chore: remove emotion jsx pragma

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [["@babel/preset-react", { "runtime": "automatic", "importSource": "@emotion/core" }]],
+  "plugins": [["babel-plugin-emotion", { "cssPropOptimization": true }]]
+}

jest/jest-preprocess.js

@@ -1,6 +1,5 @@
-/* eslint-disable import/no-extraneous-dependencies */
 const babelOptions = {
-  presets: ['@babel/env', '@babel/preset-react', '@babel/preset-typescript'],
+  presets: ['@babel/env', '@babel/preset-react', '@emotion/babel-preset-css-prop', '@babel/preset-typescript'],
   plugins: ['babel-plugin-macros'],
 };
 

package.json

@@ -39,6 +39,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
+    "@emotion/babel-preset-css-prop": "^10.0.23",
     "@emotion/jest": "^11.1.0",
     "@svgr/rollup": "^5.5.0",
     "@testing-library/dom": "^7.29.0",

packages/components/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.babelrc"
+}

packages/components/src/AspectRatio/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { forwardRefWithAs, getStylesObject, PropsWithAs } from '@sajari/react-sdk-utils';
 import React, { Children, cloneElement, isValidElement } from 'react';
 

packages/components/src/Button/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { useButton } from '@react-aria/button';
 import { useFocus, useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';

packages/components/src/ButtonGroup/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-nested-ternary */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { __DEV__, cleanChildren, getStylesObject } from '@sajari/react-sdk-utils';
 import React, { cloneElement } from 'react';
 import tw, { styled } from 'twin.macro';

packages/components/src/Checkbox/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { useId } from '@react-aria/utils';
 import { __DEV__, getStylesObject } from '@sajari/react-sdk-utils';
 import React from 'react';

packages/components/src/CheckboxGroup/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { useId } from '@react-aria/utils';
 import { cleanChildren, getStylesObject } from '@sajari/react-sdk-utils';
 import React, { cloneElement, useRef, useState } from 'react';

packages/components/src/Combobox/components/Dropdown/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-array-index-key */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { getStylesObject } from '@sajari/react-sdk-utils';
 import React from 'react';
 

packages/components/src/Combobox/components/DropdownItem/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { getStylesObject } from '@sajari/react-sdk-utils';
 import classnames from 'classnames';
 import React from 'react';

packages/components/src/Combobox/components/DropdownResult/index.tsx

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { getStylesObject } from '@sajari/react-sdk-utils';
 import classnames from 'classnames';
+import React from 'react';
 
 import Box from '../../../Box';
 import Heading from '../../../Heading';

packages/components/src/Combobox/components/Typeahead/index.tsx

@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { getStylesObject } from '@sajari/react-sdk-utils';
+import React from 'react';
 
 import Box from '../../../Box';
 import { useComboboxContext } from '../../context';

packages/components/src/Combobox/components/Voice/index.tsx

@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { getStylesObject } from '@sajari/react-sdk-utils';
+import React from 'react';
 
 import { IconEmptyMic, IconMic } from '../../../assets/icons';
 import Box from '../../../Box';

packages/components/src/Combobox/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable prefer-arrow-callback */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { mergeProps, useId } from '@react-aria/utils';
 import { __DEV__, getStylesObject } from '@sajari/react-sdk-utils';
 import { useCombobox } from 'downshift';

packages/components/src/Heading/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { forwardRefWithAs, getStylesObject, PropsWithAs } from '@sajari/react-sdk-utils';
 import React from 'react';
 

packages/components/src/Image/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { __DEV__, getStylesObject } from '@sajari/react-sdk-utils';
 import React from 'react';
 

packages/components/src/Label/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { __DEV__, getStylesObject } from '@sajari/react-sdk-utils';
 import React from 'react';
 

packages/components/src/Link/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { mergeProps } from '@react-aria/utils';
 import { __DEV__, getStylesObject } from '@sajari/react-sdk-utils';
 import React from 'react';

packages/components/src/Pagination/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { clamp, getStylesObject, isSSR, isString } from '@sajari/react-sdk-utils';
 import classnames from 'classnames';
 import React, { useCallback, useEffect } from 'react';

packages/components/src/PoweredBy/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { __DEV__ } from '@sajari/react-sdk-utils';
 import React from 'react';
 

packages/components/src/Radio/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/role-supports-aria-props */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { useId } from '@react-aria/utils';
 import { __DEV__, getStylesObject } from '@sajari/react-sdk-utils';
 import React from 'react';

packages/components/src/RadioGroup/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { useId } from '@react-aria/utils';
 import { cleanChildren, getStylesObject } from '@sajari/react-sdk-utils';
 import React, { cloneElement, forwardRef, useImperativeHandle, useRef, useState } from 'react';

packages/components/src/RangeInput/components/Fill/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { getStylesObject } from '@sajari/react-sdk-utils';
 import React from 'react';
 

packages/components/src/RangeInput/components/Handle/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { getStylesObject } from '@sajari/react-sdk-utils';
 import classnames from 'classnames';
 import React from 'react';

packages/components/src/RangeInput/components/Input/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { useTextField } from '@react-aria/textfield';
 import { getStylesObject } from '@sajari/react-sdk-utils';
 import React from 'react';

packages/components/src/RangeInput/components/Track/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { getStylesObject } from '@sajari/react-sdk-utils';
 import React from 'react';
 

packages/components/src/RangeInput/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { AriaTextFieldOptions, useTextField } from '@react-aria/textfield';
 import { __DEV__, clamp, closest, formatNumber, getStylesObject, round } from '@sajari/react-sdk-utils';
 import React, { MouseEvent, ReactNode, useEffect } from 'react';

packages/components/src/Rating/RatingItem.tsx

@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { getStylesObject } from '@sajari/react-sdk-utils';
+import React from 'react';
 
 import Box from '../Box';
 import useRatingItemStyles from './styles';

packages/components/src/Rating/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-array-index-key */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { __DEV__, getStylesObject } from '@sajari/react-sdk-utils';
 import classnames from 'classnames';
 import React from 'react';

packages/components/src/ResizeObserver/index.tsx

@@ -1,7 +1,5 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { __DEV__, isSSR } from '@sajari/react-sdk-utils';
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import Observer from 'resize-observer-polyfill';
 
 import Box from '../Box';

packages/components/src/Select/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { useId } from '@react-aria/utils';
 import { __DEV__, getStylesObject } from '@sajari/react-sdk-utils';
 import React from 'react';

packages/components/src/Spinner/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { __DEV__ } from '@sajari/react-sdk-utils';
 import React from 'react';
 

packages/components/src/Swatch/color.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-confusing-arrow */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { useSwitch } from '@react-aria/switch';
 import { useToggleState } from '@react-stately/toggle';
 import { __DEV__, getStylesObject } from '@sajari/react-sdk-utils';

packages/components/src/Swatch/index.tsx

@@ -1,7 +1,5 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { __DEV__, cleanChildren, getStylesObject } from '@sajari/react-sdk-utils';
-import { cloneElement, useCallback } from 'react';
+import React, { cloneElement, useCallback } from 'react';
 import tw from 'twin.macro';
 
 import Box from '../Box';

packages/components/src/Tabs/Tab/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { mergeProps } from '@react-aria/utils';
 import { __DEV__, getStylesObject } from '@sajari/react-sdk-utils';
 import classnames from 'classnames';

packages/components/src/Tabs/TabList/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { __DEV__, cleanChildren, getStylesObject } from '@sajari/react-sdk-utils';
 import React, { cloneElement, useRef } from 'react';
 

packages/components/src/Tabs/TabPanel/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { __DEV__, assignRef } from '@sajari/react-sdk-utils';
 import React from 'react';
 

packages/components/src/Tabs/TabPanels/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { __DEV__, cleanChildren } from '@sajari/react-sdk-utils';
 import React, { cloneElement } from 'react';
 

packages/components/src/Tabs/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { useId } from '@react-aria/utils';
 import React, { useRef, useState } from 'react';
 

packages/components/src/Text/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { forwardRefWithAs, getStylesObject, PropsWithAs } from '@sajari/react-sdk-utils';
 import React from 'react';
 

packages/components/tsconfig.build.json

@@ -1,5 +1,8 @@
 {
   "extends": "../../tsconfig.build.json",
   "files": ["./src/types/twin.d.ts"],
+  "compilerOptions": {
+    "jsx": "preserve"
+  },
   "include": ["src", "types", "../../types"]
 }

packages/search-ui/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.babelrc"
+}

packages/search-ui/src/Filter/Box.tsx

@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { Box as CoreBox } from '@sajari/react-components';
+import React from 'react';
 
 import { useSearchUIContext } from '../ContextProvider';
 import Header from './Header';

packages/search-ui/src/Filter/Header.tsx

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { Box, Button, Heading } from '@sajari/react-components';
 import { getStylesObject } from '@sajari/react-sdk-utils';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import tw from 'twin.macro';
 

packages/search-ui/src/Filter/ListFilter.tsx

@@ -1,9 +1,7 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { Box as CoreBox, Button, Checkbox, CheckboxGroup, Combobox, Radio, RadioGroup } from '@sajari/react-components';
 import { useFilter, useQuery } from '@sajari/react-hooks';
 import { getStylesObject, isBoolean, isEmpty, useTheme } from '@sajari/react-sdk-utils';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import tw from 'twin.macro';
 

packages/search-ui/src/Filter/TabFilter.tsx

@@ -1,8 +1,7 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { Tab, TabList, Tabs } from '@sajari/react-components';
 import { useFilter } from '@sajari/react-hooks';
 import { isEmpty } from '@sajari/react-sdk-utils';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSearchUIContext } from '../ContextProvider';

packages/search-ui/src/Input/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { Combobox } from '@sajari/react-components';
 import { useAutocomplete, useQuery, useSearchContext } from '@sajari/react-hooks';
 import { __DEV__ } from '@sajari/react-sdk-utils';

packages/search-ui/src/Results/components/Message/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { Box, Heading, Spinner, Text } from '@sajari/react-components';
 import { getStylesObject } from '@sajari/react-sdk-utils';
 import * as React from 'react';

packages/search-ui/src/Results/components/Result/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/jsx-no-target-blank */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
+
 import { Box, Heading, Image, ImageProps, Link, Rating, Text } from '@sajari/react-components';
 import {
   __DEV__,

packages/search-ui/src/Results/index.tsx

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { ResizeObserver } from '@sajari/react-components';
 import { useQuery, useSearchContext, useTracking } from '@sajari/react-hooks';
 import { getStylesObject, isEmpty, isNullOrUndefined } from '@sajari/react-sdk-utils';

packages/search-ui/src/ResultsPerPage/index.tsx

@@ -1,8 +1,7 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { useId } from '@react-aria/utils';
 import { Select } from '@sajari/react-components';
 import { useResultsPerPage, useSearchContext } from '@sajari/react-hooks';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSearchUIContext } from '../ContextProvider';

packages/search-ui/src/Sorting/index.tsx

@@ -1,8 +1,7 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { useId } from '@react-aria/utils';
 import { Select } from '@sajari/react-components';
 import { useSorting } from '@sajari/react-hooks';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSearchUIContext } from '../ContextProvider';

packages/search-ui/src/ViewType/index.tsx

@@ -1,8 +1,7 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import { useId } from '@react-aria/utils';
 import { Button, ButtonGroup } from '@sajari/react-components';
 import { useSearchContext } from '@sajari/react-hooks';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { IconSmallGrid, IconSmallList } from '../assets/icons';

packages/search-ui/tsconfig.build.json

@@ -1,5 +1,8 @@
 {
   "extends": "../../tsconfig.build.json",
   "files": ["./src/types/twin.d.ts"],
+  "compilerOptions": {
+    "jsx": "preserve"
+  },
   "include": ["src", "types", "../../types"]
 }