diff --git a/.eslintrc.js b/.eslintrc.js index d6e42297..95b69b2f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -21,6 +21,7 @@ module.exports = { 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', ], + ignorePatterns: ['./leaf-styles'], plugins: ['react', 'react-hooks', '@typescript-eslint', 'deprecation'], rules: { // This rule helps highlight areas of the code that use deprecated diff --git a/.github/actions/provision/action.yml b/.github/actions/provision/action.yml index 459514ce..a986be8e 100644 --- a/.github/actions/provision/action.yml +++ b/.github/actions/provision/action.yml @@ -20,3 +20,7 @@ runs: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 run: yarn --frozen-lockfile shell: bash + + - name: Pandacodegen + run: yarn panda codegen + shell: bash diff --git a/.github/workflows/build-extension.yml b/.github/workflows/build-extension.yml index b0643499..24b85e25 100644 --- a/.github/workflows/build-extension.yml +++ b/.github/workflows/build-extension.yml @@ -45,11 +45,7 @@ jobs: path: '**/node_modules' key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/package.json') }} - - uses: actions/setup-node@v3 - - - name: Install packages - uses: ./.github/actions/provision - if: steps.cache-node-modules.outputs.cache-hit != 'true' + - uses: ./.github/actions/provision - name: Build project run: yarn build @@ -83,9 +79,7 @@ jobs: path: '**/node_modules' key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/package.json') }} - - name: Install packages - uses: ./.github/actions/provision - if: steps.cache-node-modules.outputs.cache-hit != 'true' + - uses: ./.github/actions/provision - name: Build project run: yarn build diff --git a/.github/workflows/integration-tests.yml b/.github/workflows/integration-tests.yml index 7330cf32..99af74fc 100644 --- a/.github/workflows/integration-tests.yml +++ b/.github/workflows/integration-tests.yml @@ -28,6 +28,8 @@ jobs: - name: Check out Git repository uses: actions/checkout@v3 + - uses: ./.github/actions/provision + - name: Get installed Playwright version id: playwright-version run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@playwright/test'])")" >> $GITHUB_ENV diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index ddf61541..7747429f 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -23,9 +23,7 @@ jobs: steps: - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 18 + - uses: ./.github/actions/provision - name: Get installed Playwright version id: playwright-version diff --git a/.gitignore b/.gitignore index ba58f86a..8e8c54bd 100755 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,5 @@ trace* /test-results/ /playwright-report/ /playwright/.cache/ -styled-system/chunks -# Local Netlify folder +leaf-styles .netlify diff --git a/package.json b/package.json index 65b8053a..9678ae55 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix", "lint:prettier": "prettier --check \"{src,tests,tests-legacy}/**/*.{ts,tsx}\" \"*.{js,json}\"", "lint:prettier:fix": "prettier --write \"{src,tests,tests-legacy}/**/*.{ts,tsx}\" *.js", - "lint:unused-exports": "ts-unused-exports tsconfig.json", + "lint:unused-exports": "ts-unused-exports tsconfig.json --ignoreFiles=leaf-styles", "lint:remote-wallet-config": "npx ajv-cli validate -s config/wallet-config.schema.json -d config/wallet-config.json", "lint:deps": "dependency-cruise --config .dependency-cruiser.js \"src/**/*.{ts,tsx}\"", "prod:ext": "yarn build", @@ -184,7 +184,7 @@ "chroma-js": "2.4.2", "coinselect": "3.1.13", "compare-versions": "4.1.3", - "css-loader": "^6.8.1", + "css-loader": "6.8.1", "dayjs": "1.11.8", "dlc-wasm-wallet": "0.4.7", "dompurify": "3.0.4", @@ -204,7 +204,7 @@ "object-hash": "3.0.0", "observable-hooks": "4.2.2", "pino": "8.14.1", - "postcss-preset-env": "^9.1.1", + "postcss-preset-env": "9.1.1", "prismjs": "1.29.0", "promise-memoize": "1.2.1", "punycode": "2.3.0", @@ -221,7 +221,7 @@ "react-virtuoso": "4.0.8", "redux-persist": "6.0.0", "rxjs": "7.8.1", - "style-loader": "^3.3.3", + "style-loader": "3.3.3", "ts-debounce": "4.0.0", "url": "0.11.1", "url-join": "5.0.0", @@ -243,7 +243,7 @@ "@emotion/babel-preset-css-prop": "11.11.0", "@emotion/cache": "11.11.0", "@ls-lint/ls-lint": "2.0.1", - "@pandacss/dev": "^0.9.0", + "@pandacss/dev": "0.11.0", "@playwright/test": "1.34.3", "@pmmmwh/react-refresh-webpack-plugin": "0.5.10", "@redux-devtools/cli": "2.0.0", @@ -315,8 +315,8 @@ "jest-circus": "29.3.1", "jest-dev-server": "6.2.0", "jsdom": "22.1.0", - "postcss": "^8.4.27", - "postcss-loader": "^7.3.3", + "postcss": "8.4.27", + "postcss-loader": "7.3.3", "prettier": "2.8.8", "process": "0.11.10", "progress-bar-webpack-plugin": "2.1.0", @@ -339,7 +339,8 @@ "webpack-bundle-analyzer": "4.9.0", "webpack-cli": "5.1.4", "webpack-dev-server": "4.15.1", - "webpack-hot-middleware": "2.25.4" + "webpack-hot-middleware": "2.25.4", + "webpack-shell-plugin": "0.5.0" }, "resolutions": { "socket.io-parser": "4.2.4", diff --git a/panda.config.ts b/panda.config.ts index 5bb560d8..10a5eec3 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -1,5 +1,9 @@ import { defineConfig } from '@pandacss/dev'; +import { keyframes } from './theme/keyframes'; +import { semanticTokens } from './theme/semantic-tokens'; +import { tokens } from './theme/tokens'; + export default defineConfig({ // Whether to use css reset preflight: true, @@ -10,20 +14,17 @@ export default defineConfig({ // Files to exclude exclude: [], + jsxFramework: 'react', + // Useful for theme customization theme: { - // 👇🏻 Define your tokens here - tokens: { - colors: { - primary: { value: 'red' }, - secondary: { value: '#EE0F0F' } - }, - fonts: { - body: { value: 'system-ui, sans-serif' } - } - } + extend: { + semanticTokens, + tokens, + keyframes, + }, }, // The output directory for your css system - outdir: 'styled-system', + outdir: 'leaf-styles', outExtension: 'js', }); diff --git a/postcss.config.cjs b/postcss.config.cjs deleted file mode 100644 index 573efad2..00000000 --- a/postcss.config.cjs +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - plugins: { - '@pandacss/dev/postcss': {}, - }, -} \ No newline at end of file diff --git a/src/app/components/drawer/base-drawer.tsx b/src/app/components/drawer/base-drawer.tsx index 12f2e382..3c8aa31d 100644 --- a/src/app/components/drawer/base-drawer.tsx +++ b/src/app/components/drawer/base-drawer.tsx @@ -1,8 +1,8 @@ import { ReactNode, Suspense, memo, useCallback, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; -import { css } from '@emotion/react'; import { Box, Flex, FlexProps, transition, useEventListener } from '@stacks/ui'; +import { css } from 'leaf-styles/css'; import { noop } from '@shared/utils'; @@ -101,10 +101,13 @@ export const BaseDrawer = memo((props: BaseDrawerProps) => { maxHeight={['calc(100vh - 24px)', 'calc(100vh - 96px)']} > ); diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx index 29fbcc03..3e969876 100644 --- a/src/app/components/text-input-field.tsx +++ b/src/app/components/text-input-field.tsx @@ -1,9 +1,9 @@ import { Ref, useRef } from 'react'; -import { css } from '@emotion/react'; import { Box, Flex, FlexProps, Input, Text, color } from '@stacks/ui'; import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors'; import { useField } from 'formik'; +import { css } from 'leaf-styles/css'; import { useShowFieldError } from '@app/common/form-utils'; import { capitalize } from '@app/common/utils'; @@ -59,11 +59,11 @@ export function TextInputField({ as="label" border="1px solid #DCDDE2" borderRadius="10px" - css={css` - :has(:focus)::before { - border: 2px solid #bfc6ff; - } - `} + className={css({ + '& :has(:focus)::before': { + border: '2px solid #bfc6ff', + }, + })} flexDirection="column" htmlFor={name} justifyContent="center" diff --git a/src/app/components/toggle/toggle-input.tsx b/src/app/components/toggle/toggle-input.tsx deleted file mode 100644 index 9588c5d7..00000000 --- a/src/app/components/toggle/toggle-input.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { css } from '@emotion/react'; -import * as Switch from '@radix-ui/react-switch'; - -interface ToggleInputProps { - name: string; - checked: boolean; - onChange: (checked: boolean) => void; -} - -export function ToggleInput({ name, checked, onChange }: ToggleInputProps) { - return ( - - - - ); -} diff --git a/src/app/components/toggle/toggle.tsx b/src/app/components/toggle/toggle.tsx deleted file mode 100644 index fbd8e7f0..00000000 --- a/src/app/components/toggle/toggle.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { useField } from 'formik'; - -import { ToggleInput } from './toggle-input'; - -interface ToggleProps { - name: string; -} - -// ts-unused-exports:disable-next-line -export function Toggle({ name }: ToggleProps) { - const [field, , helpers] = useField(name); - - return ( - { - helpers.setValue(checked); - }} - /> - ); -} diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx index 8afe4b00..5e9c40f3 100644 --- a/src/app/features/container/container.tsx +++ b/src/app/features/container/container.tsx @@ -4,6 +4,7 @@ import { Outlet, useLocation } from 'react-router-dom'; import { useInitalizeAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; +import { useThemeSwitcher } from '@app/common/theme-provider'; import { LoadingSpinner } from '@app/components/loading-spinner'; import { useOnSignOut } from '@app/routes/hooks/use-on-sign-out'; import { useOnWalletLock } from '@app/routes/hooks/use-on-wallet-lock'; @@ -16,6 +17,7 @@ import { SwitchAccountDrawer } from '../switch-account-drawer/switch-account-dra import { ContainerLayout } from './container.layout'; export function Container() { + const { theme } = useThemeSwitcher(); const [routeHeader] = useRouteHeaderState(); const { pathname } = useLocation(); const analytics = useAnalytics(); @@ -33,13 +35,13 @@ export function Container() { if (!hasStateRehydrated) return ; return ( - <> +
- +
); } diff --git a/src/app/index.css b/src/app/index.css index 009ed44b..e27a23b7 100644 --- a/src/app/index.css +++ b/src/app/index.css @@ -1 +1 @@ -@layer reset, base, tokens, recipes, utilities; \ No newline at end of file +@layer reset, base, tokens, recipes, utilities; diff --git a/src/app/pages/home/components/home.layout.tsx b/src/app/pages/home/components/home.layout.tsx index b05b5803..1273a353 100644 --- a/src/app/pages/home/components/home.layout.tsx +++ b/src/app/pages/home/components/home.layout.tsx @@ -11,6 +11,7 @@ type HomeLayoutProps = Record< >; export function HomeLayout(props: HomeLayoutProps) { const { suggestedFirstSteps, currentAccount, actions, children } = props; + return ( {suggestedFirstSteps} diff --git a/src/app/pages/home/components/tx-button.tsx b/src/app/pages/home/components/tx-button.tsx index a6675721..e0e114b8 100644 --- a/src/app/pages/home/components/tx-button.tsx +++ b/src/app/pages/home/components/tx-button.tsx @@ -2,8 +2,6 @@ import { memo } from 'react'; import { Box, ButtonProps, Text } from '@stacks/ui'; -import { token } from '@styled-system/tokens'; - interface HomeActionButtonProps extends ButtonProps { icon: any; label: string; @@ -11,16 +9,9 @@ interface HomeActionButtonProps extends ButtonProps { } export const HomeActionButton = memo((props: HomeActionButtonProps) => { const { icon, label, buttonComponent: Button, ...rest } = props; - console.log(token) + return ( - diff --git a/styled-system/css/conditions.js b/styled-system/css/conditions.js deleted file mode 100644 index e2862e22..00000000 --- a/styled-system/css/conditions.js +++ /dev/null @@ -1,33 +0,0 @@ -import { withoutSpace } from '../helpers.js'; - -const conditions = new Set(["_hover","_focus","_focusWithin","_focusVisible","_disabled","_active","_visited","_target","_readOnly","_readWrite","_empty","_checked","_enabled","_expanded","_highlighted","_before","_after","_firstLetter","_firstLine","_marker","_selection","_file","_backdrop","_first","_last","_only","_even","_odd","_firstOfType","_lastOfType","_onlyOfType","_peerFocus","_peerHover","_peerActive","_peerFocusWithin","_peerFocusVisible","_peerDisabled","_peerChecked","_peerInvalid","_peerExpanded","_peerPlaceholderShown","_groupFocus","_groupHover","_groupActive","_groupFocusWithin","_groupFocusVisible","_groupDisabled","_groupChecked","_groupExpanded","_groupInvalid","_indeterminate","_required","_valid","_invalid","_autofill","_inRange","_outOfRange","_placeholder","_placeholderShown","_pressed","_selected","_default","_optional","_open","_fullscreen","_loading","_currentPage","_currentStep","_motionReduce","_motionSafe","_print","_landscape","_portrait","_dark","_light","_osDark","_osLight","_highContrast","_lessContrast","_moreContrast","_ltr","_rtl","_scrollbar","_scrollbarThumb","_scrollbarTrack","_horizontal","_vertical","sm","smOnly","smDown","md","mdOnly","mdDown","lg","lgOnly","lgDown","xl","xlOnly","xlDown","2xl","2xlOnly","smToMd","smToLg","smToXl","smTo2xl","mdToLg","mdToXl","mdTo2xl","lgToXl","lgTo2xl","xlTo2xl","base"]) - -export function isCondition(value){ - return conditions.has(value) || /^@|&|&$/.test(value) -} - -const underscoreRegex = /^_/ -const selectorRegex = /&|@/ - -export function finalizeConditions(paths){ - return paths.map((path) => { - if (conditions.has(path)){ - return path.replace(underscoreRegex, '') - } - - if (selectorRegex.test(path)){ - return `[${withoutSpace(path.trim())}]` - } - - return path - })} - - export function sortConditions(paths){ - return paths.sort((a, b) => { - const aa = isCondition(a) - const bb = isCondition(b) - if (aa && !bb) return 1 - if (!aa && bb) return -1 - return 0 - }) - } \ No newline at end of file diff --git a/styled-system/css/conditions.mjs b/styled-system/css/conditions.mjs deleted file mode 100644 index b42d8f53..00000000 --- a/styled-system/css/conditions.mjs +++ /dev/null @@ -1,33 +0,0 @@ -import { withoutSpace } from '../helpers.mjs'; - -const conditions = new Set(["_hover","_focus","_focusWithin","_focusVisible","_disabled","_active","_visited","_target","_readOnly","_readWrite","_empty","_checked","_enabled","_expanded","_highlighted","_before","_after","_firstLetter","_firstLine","_marker","_selection","_file","_backdrop","_first","_last","_only","_even","_odd","_firstOfType","_lastOfType","_onlyOfType","_peerFocus","_peerHover","_peerActive","_peerFocusWithin","_peerFocusVisible","_peerDisabled","_peerChecked","_peerInvalid","_peerExpanded","_peerPlaceholderShown","_groupFocus","_groupHover","_groupActive","_groupFocusWithin","_groupFocusVisible","_groupDisabled","_groupChecked","_groupExpanded","_groupInvalid","_indeterminate","_required","_valid","_invalid","_autofill","_inRange","_outOfRange","_placeholder","_placeholderShown","_pressed","_selected","_default","_optional","_open","_fullscreen","_loading","_currentPage","_currentStep","_motionReduce","_motionSafe","_print","_landscape","_portrait","_dark","_light","_osDark","_osLight","_highContrast","_lessContrast","_moreContrast","_ltr","_rtl","_scrollbar","_scrollbarThumb","_scrollbarTrack","_horizontal","_vertical","sm","smOnly","smDown","md","mdOnly","mdDown","lg","lgOnly","lgDown","xl","xlOnly","xlDown","2xl","2xlOnly","smToMd","smToLg","smToXl","smTo2xl","mdToLg","mdToXl","mdTo2xl","lgToXl","lgTo2xl","xlTo2xl","base"]) - -export function isCondition(value){ - return conditions.has(value) || /^@|&|&$/.test(value) -} - -const underscoreRegex = /^_/ -const selectorRegex = /&|@/ - -export function finalizeConditions(paths){ - return paths.map((path) => { - if (conditions.has(path)){ - return path.replace(underscoreRegex, '') - } - - if (selectorRegex.test(path)){ - return `[${withoutSpace(path.trim())}]` - } - - return path - })} - - export function sortConditions(paths){ - return paths.sort((a, b) => { - const aa = isCondition(a) - const bb = isCondition(b) - if (aa && !bb) return 1 - if (!aa && bb) return -1 - return 0 - }) - } \ No newline at end of file diff --git a/styled-system/css/css.d.ts b/styled-system/css/css.d.ts deleted file mode 100644 index 02d0a744..00000000 --- a/styled-system/css/css.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject } from '../types' - -interface CssFunction { - (styles: SystemStyleObject): string - raw: (styles: SystemStyleObject) => SystemStyleObject -} - -export declare const css: CssFunction; \ No newline at end of file diff --git a/styled-system/css/css.js b/styled-system/css/css.js deleted file mode 100644 index 28121aa1..00000000 --- a/styled-system/css/css.js +++ /dev/null @@ -1,398 +0,0 @@ -import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.js'; -import { sortConditions, finalizeConditions } from './conditions.js'; - -const classNameMap = { - "aspectRatio": "aspect", - "boxDecorationBreak": "decoration", - "zIndex": "z", - "boxSizing": "box", - "objectPosition": "object", - "objectFit": "object", - "overscrollBehavior": "overscroll", - "overscrollBehaviorX": "overscroll-x", - "overscrollBehaviorY": "overscroll-y", - "position": "pos", - "top": "top", - "left": "left", - "insetInline": "inset-x", - "insetBlock": "inset-y", - "inset": "inset", - "insetBlockEnd": "inset-b", - "insetBlockStart": "inset-t", - "insetInlineEnd": "end", - "insetInlineStart": "start", - "right": "right", - "bottom": "bottom", - "insetX": "inset-x", - "insetY": "inset-y", - "float": "float", - "visibility": "vis", - "display": "d", - "hideFrom": "hide", - "hideBelow": "show", - "flexBasis": "basis", - "flex": "flex", - "flexDirection": "flex", - "flexGrow": "grow", - "flexShrink": "shrink", - "gridTemplateColumns": "grid-cols", - "gridTemplateRows": "grid-rows", - "gridColumn": "col-span", - "gridRow": "row-span", - "gridColumnStart": "col-start", - "gridColumnEnd": "col-end", - "gridAutoFlow": "grid-flow", - "gridAutoColumns": "auto-cols", - "gridAutoRows": "auto-rows", - "gap": "gap", - "gridGap": "gap", - "gridRowGap": "gap-x", - "gridColumnGap": "gap-y", - "rowGap": "gap-x", - "columnGap": "gap-y", - "justifyContent": "justify", - "alignContent": "content", - "alignItems": "items", - "alignSelf": "self", - "padding": "p", - "paddingLeft": "pl", - "paddingRight": "pr", - "paddingTop": "pt", - "paddingBottom": "pb", - "paddingBlock": "py", - "paddingBlockEnd": "pb", - "paddingBlockStart": "pt", - "paddingInline": "px", - "paddingInlineEnd": "pe", - "paddingInlineStart": "ps", - "marginLeft": "ml", - "marginRight": "mr", - "marginTop": "mt", - "marginBottom": "mb", - "margin": "m", - "marginBlock": "my", - "marginBlockEnd": "mb", - "marginBlockStart": "mt", - "marginInline": "mx", - "marginInlineEnd": "me", - "marginInlineStart": "ms", - "outlineWidth": "ring", - "outlineColor": "ring", - "outline": "ring", - "outlineOffset": "ring", - "divideX": "divide-x", - "divideY": "divide-y", - "divideColor": "divide", - "divideStyle": "divide", - "width": "w", - "inlineSize": "w", - "minWidth": "min-w", - "minInlineSize": "min-w", - "maxWidth": "max-w", - "maxInlineSize": "max-w", - "height": "h", - "blockSize": "h", - "minHeight": "min-h", - "minBlockSize": "min-h", - "maxHeight": "max-h", - "maxBlockSize": "max-b", - "color": "text", - "fontFamily": "font", - "fontSize": "fs", - "fontWeight": "font", - "fontSmoothing": "smoothing", - "fontVariantNumeric": "numeric", - "letterSpacing": "tracking", - "lineHeight": "leading", - "textAlign": "text", - "textDecoration": "text-decor", - "textDecorationColor": "text-decor", - "textEmphasisColor": "text-emphasis", - "textDecorationStyle": "decoration", - "textDecorationThickness": "decoration", - "textUnderlineOffset": "underline-offset", - "textTransform": "text", - "textIndent": "indent", - "textShadow": "text-shadow", - "textOverflow": "text", - "verticalAlign": "align", - "wordBreak": "break", - "textWrap": "text", - "truncate": "truncate", - "lineClamp": "clamp", - "listStyleType": "list", - "listStylePosition": "list", - "listStyleImage": "list-img", - "backgroundPosition": "bg", - "backgroundPositionX": "bg-x", - "backgroundPositionY": "bg-y", - "backgroundAttachment": "bg", - "backgroundClip": "bg-clip", - "background": "bg", - "backgroundColor": "bg", - "backgroundOrigin": "bg-origin", - "backgroundImage": "bg-img", - "backgroundRepeat": "bg-repeat", - "backgroundBlendMode": "bg-blend", - "backgroundSize": "bg", - "backgroundGradient": "bg-gradient", - "textGradient": "text-gradient", - "gradientFrom": "from", - "gradientTo": "to", - "gradientVia": "via", - "borderRadius": "rounded", - "borderTopLeftRadius": "rounded-tl", - "borderTopRightRadius": "rounded-tr", - "borderBottomRightRadius": "rounded-br", - "borderBottomLeftRadius": "rounded-bl", - "borderTopRadius": "rounded-t", - "borderRightRadius": "rounded-r", - "borderBottomRadius": "rounded-b", - "borderLeftRadius": "rounded-l", - "borderStartStartRadius": "rounded-ss", - "borderStartEndRadius": "rounded-se", - "borderStartRadius": "rounded-s", - "borderEndStartRadius": "rounded-es", - "borderEndEndRadius": "rounded-ee", - "borderEndRadius": "rounded-e", - "border": "border", - "borderColor": "border", - "borderInline": "border-x", - "borderInlineWidth": "border-x", - "borderInlineColor": "border-x", - "borderBlock": "border-y", - "borderBlockWidth": "border-y", - "borderBlockColor": "border-y", - "borderLeft": "border-l", - "borderLeftColor": "border-l", - "borderInlineStart": "border-s", - "borderInlineStartColor": "border-s", - "borderRight": "border-r", - "borderRightColor": "border-r", - "borderInlineEnd": "border-e", - "borderInlineEndColor": "border-e", - "borderTop": "border-t", - "borderTopColor": "border-t", - "borderBottom": "border-b", - "borderBottomColor": "border-b", - "borderBlockEnd": "border-be", - "borderBlockEndColor": "border-be", - "borderBlockStart": "border-bs", - "borderBlockStartColor": "border-bs", - "boxShadow": "shadow", - "boxShadowColor": "shadow", - "mixBlendMode": "mix-blend", - "filter": "filter", - "brightness": "brightness", - "contrast": "contrast", - "grayscale": "grayscale", - "hueRotate": "hue-rotate", - "invert": "invert", - "saturate": "saturate", - "sepia": "sepia", - "dropShadow": "drop-shadow", - "blur": "blur", - "backdropFilter": "backdrop", - "backdropBlur": "backdrop-blur", - "backdropBrightness": "backdrop-brightness", - "backdropContrast": "backdrop-contrast", - "backdropGrayscale": "backdrop-grayscale", - "backdropHueRotate": "backdrop-hue-rotate", - "backdropInvert": "backdrop-invert", - "backdropOpacity": "backdrop-opacity", - "backdropSaturate": "backdrop-saturate", - "backdropSepia": "backdrop-sepia", - "borderCollapse": "border", - "borderSpacing": "border-spacing", - "borderSpacingX": "border-spacing-x", - "borderSpacingY": "border-spacing-y", - "tableLayout": "table", - "transitionTimingFunction": "ease", - "transitionDelay": "delay", - "transitionDuration": "duration", - "transitionProperty": "transition-prop", - "transition": "transition", - "animation": "animation", - "animationDelay": "animation-delay", - "transformOrigin": "origin", - "scale": "scale", - "scaleX": "scale-x", - "scaleY": "scale-y", - "translate": "translate", - "translateX": "translate-x", - "translateY": "translate-y", - "accentColor": "accent", - "caretColor": "caret", - "scrollBehavior": "scroll", - "scrollbar": "scrollbar", - "scrollMargin": "scroll-m", - "scrollMarginX": "scroll-mx", - "scrollMarginY": "scroll-my", - "scrollMarginLeft": "scroll-ml", - "scrollMarginRight": "scroll-mr", - "scrollMarginTop": "scroll-mt", - "scrollMarginBottom": "scroll-mb", - "scrollMarginBlock": "scroll-my", - "scrollMarginBlockEnd": "scroll-mb", - "scrollMarginBlockStart": "scroll-mt", - "scrollMarginInline": "scroll-mx", - "scrollMarginInlineEnd": "scroll-me", - "scrollMarginInlineStart": "scroll-ms", - "scrollPadding": "scroll-p", - "scrollPaddingBlock": "scroll-pb", - "scrollPaddingBlockStart": "scroll-pt", - "scrollPaddingBlockEnd": "scroll-pb", - "scrollPaddingInline": "scroll-px", - "scrollPaddingInlineEnd": "scroll-pe", - "scrollPaddingInlineStart": "scroll-ps", - "scrollPaddingX": "scroll-px", - "scrollPaddingY": "scroll-py", - "scrollPaddingLeft": "scroll-pl", - "scrollPaddingRight": "scroll-pr", - "scrollPaddingTop": "scroll-pt", - "scrollPaddingBottom": "scroll-pb", - "scrollSnapAlign": "snap", - "scrollSnapStop": "snap", - "scrollSnapType": "snap", - "scrollSnapStrictness": "strictness", - "scrollSnapMargin": "snap-m", - "scrollSnapMarginTop": "snap-mt", - "scrollSnapMarginBottom": "snap-mb", - "scrollSnapMarginLeft": "snap-ml", - "scrollSnapMarginRight": "snap-mr", - "touchAction": "touch", - "userSelect": "select", - "fill": "fill", - "stroke": "stroke", - "srOnly": "sr", - "debug": "debug", - "appearance": "appearance", - "backfaceVisibility": "backface", - "clipPath": "clip-path", - "hyphens": "hyphens", - "mask": "mask", - "maskImage": "mask-image", - "maskSize": "mask-size", - "textSizeAdjust": "text-size-adjust", - "textStyle": "textStyle" -} - -const shorthands = { - "pos": "position", - "insetEnd": "insetInlineEnd", - "end": "insetInlineEnd", - "insetStart": "insetInlineStart", - "start": "insetInlineStart", - "flexDir": "flexDirection", - "p": "padding", - "pl": "paddingLeft", - "pr": "paddingRight", - "pt": "paddingTop", - "pb": "paddingBottom", - "py": "paddingBlock", - "paddingY": "paddingBlock", - "paddingX": "paddingInline", - "px": "paddingInline", - "pe": "paddingInlineEnd", - "paddingEnd": "paddingInlineEnd", - "ps": "paddingInlineStart", - "paddingStart": "paddingInlineStart", - "ml": "marginLeft", - "mr": "marginRight", - "mt": "marginTop", - "mb": "marginBottom", - "m": "margin", - "my": "marginBlock", - "marginY": "marginBlock", - "mx": "marginInline", - "marginX": "marginInline", - "me": "marginInlineEnd", - "marginEnd": "marginInlineEnd", - "ms": "marginInlineStart", - "marginStart": "marginInlineStart", - "ringWidth": "outlineWidth", - "ringColor": "outlineColor", - "ring": "outline", - "ringOffset": "outlineOffset", - "w": "width", - "minW": "minWidth", - "maxW": "maxWidth", - "h": "height", - "minH": "minHeight", - "maxH": "maxHeight", - "bgPosition": "backgroundPosition", - "bgPositionX": "backgroundPositionX", - "bgPositionY": "backgroundPositionY", - "bgAttachment": "backgroundAttachment", - "bgClip": "backgroundClip", - "bg": "background", - "bgColor": "backgroundColor", - "bgOrigin": "backgroundOrigin", - "bgImage": "backgroundImage", - "bgRepeat": "backgroundRepeat", - "bgBlendMode": "backgroundBlendMode", - "bgSize": "backgroundSize", - "bgGradient": "backgroundGradient", - "rounded": "borderRadius", - "roundedTopLeft": "borderTopLeftRadius", - "roundedTopRight": "borderTopRightRadius", - "roundedBottomRight": "borderBottomRightRadius", - "roundedBottomLeft": "borderBottomLeftRadius", - "roundedTop": "borderTopRadius", - "roundedRight": "borderRightRadius", - "roundedBottom": "borderBottomRadius", - "roundedLeft": "borderLeftRadius", - "roundedStartStart": "borderStartStartRadius", - "roundedStartEnd": "borderStartEndRadius", - "roundedStart": "borderStartRadius", - "roundedEndStart": "borderEndStartRadius", - "roundedEndEnd": "borderEndEndRadius", - "roundedEnd": "borderEndRadius", - "borderX": "borderInline", - "borderXWidth": "borderInlineWidth", - "borderXColor": "borderInlineColor", - "borderY": "borderBlock", - "borderYWidth": "borderBlockWidth", - "borderYColor": "borderBlockColor", - "borderStart": "borderInlineStart", - "borderStartColor": "borderInlineStartColor", - "borderEnd": "borderInlineEnd", - "borderEndColor": "borderInlineEndColor", - "shadow": "boxShadow", - "shadowColor": "boxShadowColor", - "x": "translateX", - "y": "translateY" -} - -const breakpointKeys = ["base","sm","md","lg","xl","2xl"] - -const hasShorthand = true - -const resolveShorthand = (prop) => shorthands[prop] || prop - -function transform(prop, value) { - const key = resolveShorthand(prop) - const propKey = classNameMap[key] || hypenateProperty(key) - const className = `${propKey}_${withoutSpace(value)}` - return { className } -} - -const context = { - hash: false, - conditions: { - shift: sortConditions, - finalize: finalizeConditions, - breakpoints: { keys: breakpointKeys } - }, - utility: { - prefix: undefined, - transform, - hasShorthand, - resolveShorthand, - } -} - -export const css = createCss(context) -css.raw = (styles) => styles - -export const { mergeCss, assignCss } = createMergeCss(context) \ No newline at end of file diff --git a/styled-system/css/css.mjs b/styled-system/css/css.mjs deleted file mode 100644 index 0cc05bd4..00000000 --- a/styled-system/css/css.mjs +++ /dev/null @@ -1,398 +0,0 @@ -import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs'; -import { sortConditions, finalizeConditions } from './conditions.mjs'; - -const classNameMap = { - "aspectRatio": "aspect", - "boxDecorationBreak": "decoration", - "zIndex": "z", - "boxSizing": "box", - "objectPosition": "object", - "objectFit": "object", - "overscrollBehavior": "overscroll", - "overscrollBehaviorX": "overscroll-x", - "overscrollBehaviorY": "overscroll-y", - "position": "pos", - "top": "top", - "left": "left", - "insetInline": "inset-x", - "insetBlock": "inset-y", - "inset": "inset", - "insetBlockEnd": "inset-b", - "insetBlockStart": "inset-t", - "insetInlineEnd": "end", - "insetInlineStart": "start", - "right": "right", - "bottom": "bottom", - "insetX": "inset-x", - "insetY": "inset-y", - "float": "float", - "visibility": "vis", - "display": "d", - "hideFrom": "hide", - "hideBelow": "show", - "flexBasis": "basis", - "flex": "flex", - "flexDirection": "flex", - "flexGrow": "grow", - "flexShrink": "shrink", - "gridTemplateColumns": "grid-cols", - "gridTemplateRows": "grid-rows", - "gridColumn": "col-span", - "gridRow": "row-span", - "gridColumnStart": "col-start", - "gridColumnEnd": "col-end", - "gridAutoFlow": "grid-flow", - "gridAutoColumns": "auto-cols", - "gridAutoRows": "auto-rows", - "gap": "gap", - "gridGap": "gap", - "gridRowGap": "gap-x", - "gridColumnGap": "gap-y", - "rowGap": "gap-x", - "columnGap": "gap-y", - "justifyContent": "justify", - "alignContent": "content", - "alignItems": "items", - "alignSelf": "self", - "padding": "p", - "paddingLeft": "pl", - "paddingRight": "pr", - "paddingTop": "pt", - "paddingBottom": "pb", - "paddingBlock": "py", - "paddingBlockEnd": "pb", - "paddingBlockStart": "pt", - "paddingInline": "px", - "paddingInlineEnd": "pe", - "paddingInlineStart": "ps", - "marginLeft": "ml", - "marginRight": "mr", - "marginTop": "mt", - "marginBottom": "mb", - "margin": "m", - "marginBlock": "my", - "marginBlockEnd": "mb", - "marginBlockStart": "mt", - "marginInline": "mx", - "marginInlineEnd": "me", - "marginInlineStart": "ms", - "outlineWidth": "ring", - "outlineColor": "ring", - "outline": "ring", - "outlineOffset": "ring", - "divideX": "divide-x", - "divideY": "divide-y", - "divideColor": "divide", - "divideStyle": "divide", - "width": "w", - "inlineSize": "w", - "minWidth": "min-w", - "minInlineSize": "min-w", - "maxWidth": "max-w", - "maxInlineSize": "max-w", - "height": "h", - "blockSize": "h", - "minHeight": "min-h", - "minBlockSize": "min-h", - "maxHeight": "max-h", - "maxBlockSize": "max-b", - "color": "text", - "fontFamily": "font", - "fontSize": "fs", - "fontWeight": "font", - "fontSmoothing": "smoothing", - "fontVariantNumeric": "numeric", - "letterSpacing": "tracking", - "lineHeight": "leading", - "textAlign": "text", - "textDecoration": "text-decor", - "textDecorationColor": "text-decor", - "textEmphasisColor": "text-emphasis", - "textDecorationStyle": "decoration", - "textDecorationThickness": "decoration", - "textUnderlineOffset": "underline-offset", - "textTransform": "text", - "textIndent": "indent", - "textShadow": "text-shadow", - "textOverflow": "text", - "verticalAlign": "align", - "wordBreak": "break", - "textWrap": "text", - "truncate": "truncate", - "lineClamp": "clamp", - "listStyleType": "list", - "listStylePosition": "list", - "listStyleImage": "list-img", - "backgroundPosition": "bg", - "backgroundPositionX": "bg-x", - "backgroundPositionY": "bg-y", - "backgroundAttachment": "bg", - "backgroundClip": "bg-clip", - "background": "bg", - "backgroundColor": "bg", - "backgroundOrigin": "bg-origin", - "backgroundImage": "bg-img", - "backgroundRepeat": "bg-repeat", - "backgroundBlendMode": "bg-blend", - "backgroundSize": "bg", - "backgroundGradient": "bg-gradient", - "textGradient": "text-gradient", - "gradientFrom": "from", - "gradientTo": "to", - "gradientVia": "via", - "borderRadius": "rounded", - "borderTopLeftRadius": "rounded-tl", - "borderTopRightRadius": "rounded-tr", - "borderBottomRightRadius": "rounded-br", - "borderBottomLeftRadius": "rounded-bl", - "borderTopRadius": "rounded-t", - "borderRightRadius": "rounded-r", - "borderBottomRadius": "rounded-b", - "borderLeftRadius": "rounded-l", - "borderStartStartRadius": "rounded-ss", - "borderStartEndRadius": "rounded-se", - "borderStartRadius": "rounded-s", - "borderEndStartRadius": "rounded-es", - "borderEndEndRadius": "rounded-ee", - "borderEndRadius": "rounded-e", - "border": "border", - "borderColor": "border", - "borderInline": "border-x", - "borderInlineWidth": "border-x", - "borderInlineColor": "border-x", - "borderBlock": "border-y", - "borderBlockWidth": "border-y", - "borderBlockColor": "border-y", - "borderLeft": "border-l", - "borderLeftColor": "border-l", - "borderInlineStart": "border-s", - "borderInlineStartColor": "border-s", - "borderRight": "border-r", - "borderRightColor": "border-r", - "borderInlineEnd": "border-e", - "borderInlineEndColor": "border-e", - "borderTop": "border-t", - "borderTopColor": "border-t", - "borderBottom": "border-b", - "borderBottomColor": "border-b", - "borderBlockEnd": "border-be", - "borderBlockEndColor": "border-be", - "borderBlockStart": "border-bs", - "borderBlockStartColor": "border-bs", - "boxShadow": "shadow", - "boxShadowColor": "shadow", - "mixBlendMode": "mix-blend", - "filter": "filter", - "brightness": "brightness", - "contrast": "contrast", - "grayscale": "grayscale", - "hueRotate": "hue-rotate", - "invert": "invert", - "saturate": "saturate", - "sepia": "sepia", - "dropShadow": "drop-shadow", - "blur": "blur", - "backdropFilter": "backdrop", - "backdropBlur": "backdrop-blur", - "backdropBrightness": "backdrop-brightness", - "backdropContrast": "backdrop-contrast", - "backdropGrayscale": "backdrop-grayscale", - "backdropHueRotate": "backdrop-hue-rotate", - "backdropInvert": "backdrop-invert", - "backdropOpacity": "backdrop-opacity", - "backdropSaturate": "backdrop-saturate", - "backdropSepia": "backdrop-sepia", - "borderCollapse": "border", - "borderSpacing": "border-spacing", - "borderSpacingX": "border-spacing-x", - "borderSpacingY": "border-spacing-y", - "tableLayout": "table", - "transitionTimingFunction": "ease", - "transitionDelay": "delay", - "transitionDuration": "duration", - "transitionProperty": "transition-prop", - "transition": "transition", - "animation": "animation", - "animationDelay": "animation-delay", - "transformOrigin": "origin", - "scale": "scale", - "scaleX": "scale-x", - "scaleY": "scale-y", - "translate": "translate", - "translateX": "translate-x", - "translateY": "translate-y", - "accentColor": "accent", - "caretColor": "caret", - "scrollBehavior": "scroll", - "scrollbar": "scrollbar", - "scrollMargin": "scroll-m", - "scrollMarginX": "scroll-mx", - "scrollMarginY": "scroll-my", - "scrollMarginLeft": "scroll-ml", - "scrollMarginRight": "scroll-mr", - "scrollMarginTop": "scroll-mt", - "scrollMarginBottom": "scroll-mb", - "scrollMarginBlock": "scroll-my", - "scrollMarginBlockEnd": "scroll-mb", - "scrollMarginBlockStart": "scroll-mt", - "scrollMarginInline": "scroll-mx", - "scrollMarginInlineEnd": "scroll-me", - "scrollMarginInlineStart": "scroll-ms", - "scrollPadding": "scroll-p", - "scrollPaddingBlock": "scroll-pb", - "scrollPaddingBlockStart": "scroll-pt", - "scrollPaddingBlockEnd": "scroll-pb", - "scrollPaddingInline": "scroll-px", - "scrollPaddingInlineEnd": "scroll-pe", - "scrollPaddingInlineStart": "scroll-ps", - "scrollPaddingX": "scroll-px", - "scrollPaddingY": "scroll-py", - "scrollPaddingLeft": "scroll-pl", - "scrollPaddingRight": "scroll-pr", - "scrollPaddingTop": "scroll-pt", - "scrollPaddingBottom": "scroll-pb", - "scrollSnapAlign": "snap", - "scrollSnapStop": "snap", - "scrollSnapType": "snap", - "scrollSnapStrictness": "strictness", - "scrollSnapMargin": "snap-m", - "scrollSnapMarginTop": "snap-mt", - "scrollSnapMarginBottom": "snap-mb", - "scrollSnapMarginLeft": "snap-ml", - "scrollSnapMarginRight": "snap-mr", - "touchAction": "touch", - "userSelect": "select", - "fill": "fill", - "stroke": "stroke", - "srOnly": "sr", - "debug": "debug", - "appearance": "appearance", - "backfaceVisibility": "backface", - "clipPath": "clip-path", - "hyphens": "hyphens", - "mask": "mask", - "maskImage": "mask-image", - "maskSize": "mask-size", - "textSizeAdjust": "text-size-adjust", - "textStyle": "textStyle" -} - -const shorthands = { - "pos": "position", - "insetEnd": "insetInlineEnd", - "end": "insetInlineEnd", - "insetStart": "insetInlineStart", - "start": "insetInlineStart", - "flexDir": "flexDirection", - "p": "padding", - "pl": "paddingLeft", - "pr": "paddingRight", - "pt": "paddingTop", - "pb": "paddingBottom", - "py": "paddingBlock", - "paddingY": "paddingBlock", - "paddingX": "paddingInline", - "px": "paddingInline", - "pe": "paddingInlineEnd", - "paddingEnd": "paddingInlineEnd", - "ps": "paddingInlineStart", - "paddingStart": "paddingInlineStart", - "ml": "marginLeft", - "mr": "marginRight", - "mt": "marginTop", - "mb": "marginBottom", - "m": "margin", - "my": "marginBlock", - "marginY": "marginBlock", - "mx": "marginInline", - "marginX": "marginInline", - "me": "marginInlineEnd", - "marginEnd": "marginInlineEnd", - "ms": "marginInlineStart", - "marginStart": "marginInlineStart", - "ringWidth": "outlineWidth", - "ringColor": "outlineColor", - "ring": "outline", - "ringOffset": "outlineOffset", - "w": "width", - "minW": "minWidth", - "maxW": "maxWidth", - "h": "height", - "minH": "minHeight", - "maxH": "maxHeight", - "bgPosition": "backgroundPosition", - "bgPositionX": "backgroundPositionX", - "bgPositionY": "backgroundPositionY", - "bgAttachment": "backgroundAttachment", - "bgClip": "backgroundClip", - "bg": "background", - "bgColor": "backgroundColor", - "bgOrigin": "backgroundOrigin", - "bgImage": "backgroundImage", - "bgRepeat": "backgroundRepeat", - "bgBlendMode": "backgroundBlendMode", - "bgSize": "backgroundSize", - "bgGradient": "backgroundGradient", - "rounded": "borderRadius", - "roundedTopLeft": "borderTopLeftRadius", - "roundedTopRight": "borderTopRightRadius", - "roundedBottomRight": "borderBottomRightRadius", - "roundedBottomLeft": "borderBottomLeftRadius", - "roundedTop": "borderTopRadius", - "roundedRight": "borderRightRadius", - "roundedBottom": "borderBottomRadius", - "roundedLeft": "borderLeftRadius", - "roundedStartStart": "borderStartStartRadius", - "roundedStartEnd": "borderStartEndRadius", - "roundedStart": "borderStartRadius", - "roundedEndStart": "borderEndStartRadius", - "roundedEndEnd": "borderEndEndRadius", - "roundedEnd": "borderEndRadius", - "borderX": "borderInline", - "borderXWidth": "borderInlineWidth", - "borderXColor": "borderInlineColor", - "borderY": "borderBlock", - "borderYWidth": "borderBlockWidth", - "borderYColor": "borderBlockColor", - "borderStart": "borderInlineStart", - "borderStartColor": "borderInlineStartColor", - "borderEnd": "borderInlineEnd", - "borderEndColor": "borderInlineEndColor", - "shadow": "boxShadow", - "shadowColor": "boxShadowColor", - "x": "translateX", - "y": "translateY" -} - -const breakpointKeys = ["base","sm","md","lg","xl","2xl"] - -const hasShorthand = true - -const resolveShorthand = (prop) => shorthands[prop] || prop - -function transform(prop, value) { - const key = resolveShorthand(prop) - const propKey = classNameMap[key] || hypenateProperty(key) - const className = `${propKey}_${withoutSpace(value)}` - return { className } -} - -const context = { - hash: false, - conditions: { - shift: sortConditions, - finalize: finalizeConditions, - breakpoints: { keys: breakpointKeys } - }, - utility: { - prefix: undefined, - transform, - hasShorthand, - resolveShorthand, - } -} - -export const css = createCss(context) -css.raw = (styles) => styles - -export const { mergeCss, assignCss } = createMergeCss(context) \ No newline at end of file diff --git a/styled-system/css/cva.d.ts b/styled-system/css/cva.d.ts deleted file mode 100644 index e9a1a58c..00000000 --- a/styled-system/css/cva.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/* eslint-disable */ -import type { RecipeCreatorFn } from '../types/recipe' - -export declare const cva: RecipeCreatorFn - -export type { RecipeVariantProps } from '../types/recipe' diff --git a/styled-system/css/cva.js b/styled-system/css/cva.js deleted file mode 100644 index 92721a4d..00000000 --- a/styled-system/css/cva.js +++ /dev/null @@ -1,63 +0,0 @@ -import { compact, splitProps } from '../helpers.js'; -import { css, mergeCss } from './css.js'; - -export function cva(config) { - const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config - - function resolve(props) { - const computedVariants = { ...defaultVariants, ...compact(props) } - let variantCss = { ...base } - for (const [key, value] of Object.entries(computedVariants)) { - if (variants[key]?.[value]) { - variantCss = mergeCss(variantCss, variants[key][value]) - } - } - const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants) - return mergeCss(variantCss, compoundVariantCss) - } - - function cvaFn(props) { - return css(resolve(props)) - } - - const variantKeys = Object.keys(variants) - - function splitVariantProps(props) { - return splitProps(props, variantKeys) - } - - const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])) - - return Object.assign(cvaFn, { - __cva__: true, - variantMap, - variantKeys, - resolve, - config, - splitVariantProps, - }) -} - -export function getCompoundVariantCss(compoundVariants, variantMap) { - let result = {} - compoundVariants.forEach((compoundVariant) => { - const isMatching = Object.entries(compoundVariant).every(([key, value]) => { - if (key === 'css') return true - - const values = Array.isArray(value) ? value : [value] - return values.some((value) => variantMap[key] === value) - }) - - if (isMatching) { - result = mergeCss(result, compoundVariant.css) - } - }) - - return result -} - -export function assertCompoundVariant(name, compoundVariants, variants, prop) { - if (compoundVariants.length > 0 && typeof variants[prop] === 'object') { - throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`) - } -} diff --git a/styled-system/css/cva.mjs b/styled-system/css/cva.mjs deleted file mode 100644 index a519d199..00000000 --- a/styled-system/css/cva.mjs +++ /dev/null @@ -1,63 +0,0 @@ -import { compact, splitProps } from '../helpers.mjs'; -import { css, mergeCss } from './css.mjs'; - -export function cva(config) { - const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config - - function resolve(props) { - const computedVariants = { ...defaultVariants, ...compact(props) } - let variantCss = { ...base } - for (const [key, value] of Object.entries(computedVariants)) { - if (variants[key]?.[value]) { - variantCss = mergeCss(variantCss, variants[key][value]) - } - } - const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants) - return mergeCss(variantCss, compoundVariantCss) - } - - function cvaFn(props) { - return css(resolve(props)) - } - - const variantKeys = Object.keys(variants) - - function splitVariantProps(props) { - return splitProps(props, variantKeys) - } - - const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])) - - return Object.assign(cvaFn, { - __cva__: true, - variantMap, - variantKeys, - resolve, - config, - splitVariantProps, - }) -} - -export function getCompoundVariantCss(compoundVariants, variantMap) { - let result = {} - compoundVariants.forEach((compoundVariant) => { - const isMatching = Object.entries(compoundVariant).every(([key, value]) => { - if (key === 'css') return true - - const values = Array.isArray(value) ? value : [value] - return values.some((value) => variantMap[key] === value) - }) - - if (isMatching) { - result = mergeCss(result, compoundVariant.css) - } - }) - - return result -} - -export function assertCompoundVariant(name, compoundVariants, variants, prop) { - if (compoundVariants.length > 0 && typeof variants[prop] === 'object') { - throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`) - } -} diff --git a/styled-system/css/cx.d.ts b/styled-system/css/cx.d.ts deleted file mode 100644 index 892c90ca..00000000 --- a/styled-system/css/cx.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/* eslint-disable */ -type Argument = string | boolean | null | undefined - -/** Conditionally join classNames into a single string */ -export declare function cx(...args: Argument[]): string \ No newline at end of file diff --git a/styled-system/css/cx.js b/styled-system/css/cx.js deleted file mode 100644 index 81bbdae3..00000000 --- a/styled-system/css/cx.js +++ /dev/null @@ -1,15 +0,0 @@ -function cx() { - let str = '', - i = 0, - arg - - for (; i < arguments.length; ) { - if ((arg = arguments[i++]) && typeof arg === 'string') { - str && (str += ' ') - str += arg - } - } - return str -} - -export { cx } \ No newline at end of file diff --git a/styled-system/css/cx.mjs b/styled-system/css/cx.mjs deleted file mode 100644 index 81bbdae3..00000000 --- a/styled-system/css/cx.mjs +++ /dev/null @@ -1,15 +0,0 @@ -function cx() { - let str = '', - i = 0, - arg - - for (; i < arguments.length; ) { - if ((arg = arguments[i++]) && typeof arg === 'string') { - str && (str += ' ') - str += arg - } - } - return str -} - -export { cx } \ No newline at end of file diff --git a/styled-system/css/index.d.ts b/styled-system/css/index.d.ts deleted file mode 100644 index 87fc0b41..00000000 --- a/styled-system/css/index.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-disable */ -export * from './css' -export * from './cx' -export * from './cva' \ No newline at end of file diff --git a/styled-system/css/index.js b/styled-system/css/index.js deleted file mode 100644 index 6e361abf..00000000 --- a/styled-system/css/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export * from './css.js'; -export * from './cx.js'; -export * from './cva.js'; \ No newline at end of file diff --git a/styled-system/css/index.mjs b/styled-system/css/index.mjs deleted file mode 100644 index 8369d28b..00000000 --- a/styled-system/css/index.mjs +++ /dev/null @@ -1,3 +0,0 @@ -export * from './css.mjs'; -export * from './cx.mjs'; -export * from './cva.mjs'; \ No newline at end of file diff --git a/styled-system/global.css b/styled-system/global.css deleted file mode 100644 index 0fab647e..00000000 --- a/styled-system/global.css +++ /dev/null @@ -1,36 +0,0 @@ -@layer base { - :root { - --made-with-panda: '🐼' - } - - *, *::before, *::after, ::backdrop { - --blur: ; - --brightness: ; - --contrast: ; - --grayscale: ; - --hue-rotate: ; - --invert: ; - --saturate: ; - --sepia: ; - --drop-shadow: ; - --backdrop-blur: ; - --backdrop-brightness: ; - --backdrop-contrast: ; - --backdrop-grayscale: ; - --backdrop-hue-rotate: ; - --backdrop-invert: ; - --backdrop-opacity: ; - --backdrop-saturate: ; - --backdrop-sepia: ; - --scroll-snap-strictness: proximity; - --border-spacing-x: 0; - --border-spacing-y: 0; - --translate-x: 0; - --translate-y: 0; - --rotate: 0; - --skew-x: 0; - --skew-y: 0; - --scale-x: 1; - --scale-y: 1 - } -} \ No newline at end of file diff --git a/styled-system/helpers.js b/styled-system/helpers.js deleted file mode 100644 index 7849918b..00000000 --- a/styled-system/helpers.js +++ /dev/null @@ -1,281 +0,0 @@ -// src/assert.ts -function isObject(value) { - return typeof value === "object" && value != null && !Array.isArray(value); -} - -// src/astish.ts -var newRule = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g; -var ruleClean = /\/\*[^]*?\*\/|\s\s+|\n/g; -var astish = (val, tree = [{}]) => { - const block = newRule.exec((val ?? "").replace(ruleClean, "")); - if (!block) - return tree[0]; - if (block[4]) - tree.shift(); - else if (block[3]) - tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {}); - else - tree[0][block[1]] = block[2]; - return astish(val, tree); -}; - -// src/compact.ts -function compact(value) { - return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0)); -} - -// src/condition.ts -var isBaseCondition = (v) => v === "base"; -function filterBaseConditions(c) { - return c.slice().filter((v) => !isBaseCondition(v)); -} - -// src/css-important.ts -var importantRegex = /!(important)?$/; -function isImportant(value) { - return typeof value === "string" ? importantRegex.test(value) : false; -} -function withoutImportant(value) { - return typeof value === "string" ? value.replace(importantRegex, "").trim() : value; -} -function withoutSpace(str) { - return typeof str === "string" ? str.replaceAll(" ", "_") : str; -} - -// src/hash.ts -function toChar(code) { - return String.fromCharCode(code + (code > 25 ? 39 : 97)); -} -function toName(code) { - let name = ""; - let x; - for (x = Math.abs(code); x > 52; x = x / 52 | 0) - name = toChar(x % 52) + name; - return toChar(x % 52) + name; -} -function toPhash(h, x) { - let i = x.length; - while (i) - h = h * 33 ^ x.charCodeAt(--i); - return h; -} -function toHash(value) { - return toName(toPhash(5381, value) >>> 0); -} - -// src/merge-props.ts -function mergeProps(...sources) { - const result = {}; - for (const source of sources) { - for (const [key, value] of Object.entries(source)) { - if (isObject(value)) { - result[key] = mergeProps(result[key] || {}, value); - } else { - result[key] = value; - } - } - } - return result; -} - -// src/walk-object.ts -var isNotNullish = (element) => element != null; -function walkObject(target, predicate, options = {}) { - const { stop, getKey } = options; - function inner(value, path = []) { - if (isObject(value) || Array.isArray(value)) { - const result = {}; - for (const [prop, child] of Object.entries(value)) { - const key = getKey?.(prop) ?? prop; - const childPath = [...path, key]; - if (stop?.(value, childPath)) { - return predicate(value, path); - } - const next = inner(child, childPath); - if (isNotNullish(next)) { - result[key] = next; - } - } - return result; - } - return predicate(value, path); - } - return inner(target); -} -function mapObject(obj, fn) { - if (!isObject(obj)) - return fn(obj); - return walkObject(obj, (value) => fn(value)); -} - -// src/normalize-style-object.ts -function toResponsiveObject(values, breakpoints) { - return values.reduce((acc, current, index) => { - const key = breakpoints[index]; - if (current != null) { - acc[key] = current; - } - return acc; - }, {}); -} -function normalizeShorthand(styles, context) { - const { hasShorthand, resolveShorthand } = context.utility; - return walkObject(styles, (v) => v, { - getKey: (prop) => { - return hasShorthand ? resolveShorthand(prop) : prop; - } - }); -} -function normalizeStyleObject(styles, context) { - const { utility, conditions } = context; - const { hasShorthand, resolveShorthand } = utility; - return walkObject( - styles, - (value) => { - return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value; - }, - { - stop: (value) => Array.isArray(value), - getKey: (prop) => { - return hasShorthand ? resolveShorthand(prop) : prop; - } - } - ); -} - -// src/classname.ts -var fallbackCondition = { - shift: (v) => v, - finalize: (v) => v, - breakpoints: { keys: [] } -}; -var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value; -function createCss(context) { - const { utility, hash, conditions: conds = fallbackCondition } = context; - const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-"); - const hashFn = (conditions, className) => { - let result; - if (hash) { - const baseArray = [...conds.finalize(conditions), className]; - result = formatClassName(toHash(baseArray.join(":"))); - } else { - const baseArray = [...conds.finalize(conditions), formatClassName(className)]; - result = baseArray.join(":"); - } - return result; - }; - return (styleObject = {}) => { - const normalizedObject = normalizeStyleObject(styleObject, context); - const classNames = /* @__PURE__ */ new Set(); - walkObject(normalizedObject, (value, paths) => { - const important = isImportant(value); - if (value == null) - return; - const [prop, ...allConditions] = conds.shift(paths); - const conditions = filterBaseConditions(allConditions); - const transformed = utility.transform(prop, withoutImportant(sanitize(value))); - let className = hashFn(conditions, transformed.className); - if (important) - className = `${className}!`; - classNames.add(className); - }); - return Array.from(classNames).join(" "); - }; -} -function compactStyles(...styles) { - return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0); -} -function createMergeCss(context) { - function resolve(styles) { - const allStyles = compactStyles(...styles); - if (allStyles.length === 1) - return allStyles; - return allStyles.map((style) => normalizeShorthand(style, context)); - } - function mergeCss(...styles) { - return mergeProps(...resolve(styles)); - } - function assignCss(...styles) { - return Object.assign({}, ...resolve(styles)); - } - return { mergeCss, assignCss }; -} - -// src/memo.ts -var memo = (fn) => { - const cache = /* @__PURE__ */ new Map(); - const get = (...args) => { - const key = JSON.stringify(args); - if (cache.has(key)) { - return cache.get(key); - } - const result = fn(...args); - cache.set(key, result); - return result; - }; - return get; -}; - -// src/hypenate-property.ts -var wordRegex = /([A-Z])/g; -var msRegex = /^ms-/; -var hypenateProperty = memo((property) => { - if (property.startsWith("--")) - return property; - return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase(); -}); - -// src/normalize-html.ts -var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"]; -function convert(key) { - return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key; -} -function normalizeHTMLProps(props) { - return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value])); -} -normalizeHTMLProps.keys = htmlProps; - -// src/split-props.ts -function splitProps(props, ...keys) { - const descriptors = Object.getOwnPropertyDescriptors(props); - const dKeys = Object.keys(descriptors); - const split = (k) => { - const clone = {}; - for (let i = 0; i < k.length; i++) { - const key = k[i]; - if (descriptors[key]) { - Object.defineProperty(clone, key, descriptors[key]); - delete descriptors[key]; - } - } - return clone; - }; - const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key)); - return keys.map(fn).concat(split(dKeys)); -} -export { - astish, - compact, - createCss, - createMergeCss, - filterBaseConditions, - hypenateProperty, - isBaseCondition, - isObject, - mapObject, - mergeProps, - normalizeHTMLProps, - splitProps, - toHash, - walkObject, - withoutSpace -}; - - -export function __spreadValues(a, b){ - return { ...a, ...b } -} - -export function __objRest(source, exclude){ - return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key))) -} \ No newline at end of file diff --git a/styled-system/helpers.mjs b/styled-system/helpers.mjs deleted file mode 100644 index 7849918b..00000000 --- a/styled-system/helpers.mjs +++ /dev/null @@ -1,281 +0,0 @@ -// src/assert.ts -function isObject(value) { - return typeof value === "object" && value != null && !Array.isArray(value); -} - -// src/astish.ts -var newRule = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g; -var ruleClean = /\/\*[^]*?\*\/|\s\s+|\n/g; -var astish = (val, tree = [{}]) => { - const block = newRule.exec((val ?? "").replace(ruleClean, "")); - if (!block) - return tree[0]; - if (block[4]) - tree.shift(); - else if (block[3]) - tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {}); - else - tree[0][block[1]] = block[2]; - return astish(val, tree); -}; - -// src/compact.ts -function compact(value) { - return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0)); -} - -// src/condition.ts -var isBaseCondition = (v) => v === "base"; -function filterBaseConditions(c) { - return c.slice().filter((v) => !isBaseCondition(v)); -} - -// src/css-important.ts -var importantRegex = /!(important)?$/; -function isImportant(value) { - return typeof value === "string" ? importantRegex.test(value) : false; -} -function withoutImportant(value) { - return typeof value === "string" ? value.replace(importantRegex, "").trim() : value; -} -function withoutSpace(str) { - return typeof str === "string" ? str.replaceAll(" ", "_") : str; -} - -// src/hash.ts -function toChar(code) { - return String.fromCharCode(code + (code > 25 ? 39 : 97)); -} -function toName(code) { - let name = ""; - let x; - for (x = Math.abs(code); x > 52; x = x / 52 | 0) - name = toChar(x % 52) + name; - return toChar(x % 52) + name; -} -function toPhash(h, x) { - let i = x.length; - while (i) - h = h * 33 ^ x.charCodeAt(--i); - return h; -} -function toHash(value) { - return toName(toPhash(5381, value) >>> 0); -} - -// src/merge-props.ts -function mergeProps(...sources) { - const result = {}; - for (const source of sources) { - for (const [key, value] of Object.entries(source)) { - if (isObject(value)) { - result[key] = mergeProps(result[key] || {}, value); - } else { - result[key] = value; - } - } - } - return result; -} - -// src/walk-object.ts -var isNotNullish = (element) => element != null; -function walkObject(target, predicate, options = {}) { - const { stop, getKey } = options; - function inner(value, path = []) { - if (isObject(value) || Array.isArray(value)) { - const result = {}; - for (const [prop, child] of Object.entries(value)) { - const key = getKey?.(prop) ?? prop; - const childPath = [...path, key]; - if (stop?.(value, childPath)) { - return predicate(value, path); - } - const next = inner(child, childPath); - if (isNotNullish(next)) { - result[key] = next; - } - } - return result; - } - return predicate(value, path); - } - return inner(target); -} -function mapObject(obj, fn) { - if (!isObject(obj)) - return fn(obj); - return walkObject(obj, (value) => fn(value)); -} - -// src/normalize-style-object.ts -function toResponsiveObject(values, breakpoints) { - return values.reduce((acc, current, index) => { - const key = breakpoints[index]; - if (current != null) { - acc[key] = current; - } - return acc; - }, {}); -} -function normalizeShorthand(styles, context) { - const { hasShorthand, resolveShorthand } = context.utility; - return walkObject(styles, (v) => v, { - getKey: (prop) => { - return hasShorthand ? resolveShorthand(prop) : prop; - } - }); -} -function normalizeStyleObject(styles, context) { - const { utility, conditions } = context; - const { hasShorthand, resolveShorthand } = utility; - return walkObject( - styles, - (value) => { - return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value; - }, - { - stop: (value) => Array.isArray(value), - getKey: (prop) => { - return hasShorthand ? resolveShorthand(prop) : prop; - } - } - ); -} - -// src/classname.ts -var fallbackCondition = { - shift: (v) => v, - finalize: (v) => v, - breakpoints: { keys: [] } -}; -var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value; -function createCss(context) { - const { utility, hash, conditions: conds = fallbackCondition } = context; - const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-"); - const hashFn = (conditions, className) => { - let result; - if (hash) { - const baseArray = [...conds.finalize(conditions), className]; - result = formatClassName(toHash(baseArray.join(":"))); - } else { - const baseArray = [...conds.finalize(conditions), formatClassName(className)]; - result = baseArray.join(":"); - } - return result; - }; - return (styleObject = {}) => { - const normalizedObject = normalizeStyleObject(styleObject, context); - const classNames = /* @__PURE__ */ new Set(); - walkObject(normalizedObject, (value, paths) => { - const important = isImportant(value); - if (value == null) - return; - const [prop, ...allConditions] = conds.shift(paths); - const conditions = filterBaseConditions(allConditions); - const transformed = utility.transform(prop, withoutImportant(sanitize(value))); - let className = hashFn(conditions, transformed.className); - if (important) - className = `${className}!`; - classNames.add(className); - }); - return Array.from(classNames).join(" "); - }; -} -function compactStyles(...styles) { - return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0); -} -function createMergeCss(context) { - function resolve(styles) { - const allStyles = compactStyles(...styles); - if (allStyles.length === 1) - return allStyles; - return allStyles.map((style) => normalizeShorthand(style, context)); - } - function mergeCss(...styles) { - return mergeProps(...resolve(styles)); - } - function assignCss(...styles) { - return Object.assign({}, ...resolve(styles)); - } - return { mergeCss, assignCss }; -} - -// src/memo.ts -var memo = (fn) => { - const cache = /* @__PURE__ */ new Map(); - const get = (...args) => { - const key = JSON.stringify(args); - if (cache.has(key)) { - return cache.get(key); - } - const result = fn(...args); - cache.set(key, result); - return result; - }; - return get; -}; - -// src/hypenate-property.ts -var wordRegex = /([A-Z])/g; -var msRegex = /^ms-/; -var hypenateProperty = memo((property) => { - if (property.startsWith("--")) - return property; - return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase(); -}); - -// src/normalize-html.ts -var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"]; -function convert(key) { - return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key; -} -function normalizeHTMLProps(props) { - return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value])); -} -normalizeHTMLProps.keys = htmlProps; - -// src/split-props.ts -function splitProps(props, ...keys) { - const descriptors = Object.getOwnPropertyDescriptors(props); - const dKeys = Object.keys(descriptors); - const split = (k) => { - const clone = {}; - for (let i = 0; i < k.length; i++) { - const key = k[i]; - if (descriptors[key]) { - Object.defineProperty(clone, key, descriptors[key]); - delete descriptors[key]; - } - } - return clone; - }; - const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key)); - return keys.map(fn).concat(split(dKeys)); -} -export { - astish, - compact, - createCss, - createMergeCss, - filterBaseConditions, - hypenateProperty, - isBaseCondition, - isObject, - mapObject, - mergeProps, - normalizeHTMLProps, - splitProps, - toHash, - walkObject, - withoutSpace -}; - - -export function __spreadValues(a, b){ - return { ...a, ...b } -} - -export function __objRest(source, exclude){ - return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key))) -} \ No newline at end of file diff --git a/styled-system/patterns/aspect-ratio.d.ts b/styled-system/patterns/aspect-ratio.d.ts deleted file mode 100644 index 8f52bdf7..00000000 --- a/styled-system/patterns/aspect-ratio.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type AspectRatioProperties = { - ratio?: ConditionalValue -} - - -type AspectRatioOptions = AspectRatioProperties & Omit - -interface AspectRatioPatternFn { - (options?: AspectRatioOptions): string - raw: (options: AspectRatioOptions) => AspectRatioOptions -} - - -export declare const aspectRatio: AspectRatioPatternFn; diff --git a/styled-system/patterns/aspect-ratio.js b/styled-system/patterns/aspect-ratio.js deleted file mode 100644 index 87f651f8..00000000 --- a/styled-system/patterns/aspect-ratio.js +++ /dev/null @@ -1,35 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const aspectRatioConfig = { -transform(props, { map }) { - const { ratio = 4 / 3, ...rest } = props; - return { - position: "relative", - _before: { - content: `""`, - display: "block", - height: "0", - paddingBottom: map(ratio, (r) => `${1 / r * 100}%`) - }, - "&>*": { - display: "flex", - justifyContent: "center", - alignItems: "center", - overflow: "hidden", - position: "absolute", - inset: "0", - width: "100%", - height: "100%" - }, - "&>img, &>video": { - objectFit: "cover" - }, - ...rest - }; -}} - -export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject }) - -export const aspectRatio = (styles) => css(getAspectRatioStyle(styles)) -aspectRatio.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/aspect-ratio.mjs b/styled-system/patterns/aspect-ratio.mjs deleted file mode 100644 index 12b05838..00000000 --- a/styled-system/patterns/aspect-ratio.mjs +++ /dev/null @@ -1,35 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const aspectRatioConfig = { -transform(props, { map }) { - const { ratio = 4 / 3, ...rest } = props; - return { - position: "relative", - _before: { - content: `""`, - display: "block", - height: "0", - paddingBottom: map(ratio, (r) => `${1 / r * 100}%`) - }, - "&>*": { - display: "flex", - justifyContent: "center", - alignItems: "center", - overflow: "hidden", - position: "absolute", - inset: "0", - width: "100%", - height: "100%" - }, - "&>img, &>video": { - objectFit: "cover" - }, - ...rest - }; -}} - -export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject }) - -export const aspectRatio = (styles) => css(getAspectRatioStyle(styles)) -aspectRatio.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/box.d.ts b/styled-system/patterns/box.d.ts deleted file mode 100644 index 5c6e57ac..00000000 --- a/styled-system/patterns/box.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type BoxProperties = { - -} - - -type BoxOptions = BoxProperties & Omit - -interface BoxPatternFn { - (options?: BoxOptions): string - raw: (options: BoxOptions) => BoxOptions -} - - -export declare const box: BoxPatternFn; diff --git a/styled-system/patterns/box.js b/styled-system/patterns/box.js deleted file mode 100644 index 1ffdf3d5..00000000 --- a/styled-system/patterns/box.js +++ /dev/null @@ -1,12 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const boxConfig = { -transform(props) { - return props; -}} - -export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject }) - -export const box = (styles) => css(getBoxStyle(styles)) -box.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/box.mjs b/styled-system/patterns/box.mjs deleted file mode 100644 index 2b347016..00000000 --- a/styled-system/patterns/box.mjs +++ /dev/null @@ -1,12 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const boxConfig = { -transform(props) { - return props; -}} - -export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject }) - -export const box = (styles) => css(getBoxStyle(styles)) -box.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/center.d.ts b/styled-system/patterns/center.d.ts deleted file mode 100644 index 31cc104a..00000000 --- a/styled-system/patterns/center.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type CenterProperties = { - inline?: ConditionalValue -} - - -type CenterOptions = CenterProperties & Omit - -interface CenterPatternFn { - (options?: CenterOptions): string - raw: (options: CenterOptions) => CenterOptions -} - - -export declare const center: CenterPatternFn; diff --git a/styled-system/patterns/center.js b/styled-system/patterns/center.js deleted file mode 100644 index 850a451b..00000000 --- a/styled-system/patterns/center.js +++ /dev/null @@ -1,18 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const centerConfig = { -transform(props) { - const { inline, ...rest } = props; - return { - display: inline ? "inline-flex" : "flex", - alignItems: "center", - justifyContent: "center", - ...rest - }; -}} - -export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject }) - -export const center = (styles) => css(getCenterStyle(styles)) -center.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/center.mjs b/styled-system/patterns/center.mjs deleted file mode 100644 index e05d1bb3..00000000 --- a/styled-system/patterns/center.mjs +++ /dev/null @@ -1,18 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const centerConfig = { -transform(props) { - const { inline, ...rest } = props; - return { - display: inline ? "inline-flex" : "flex", - alignItems: "center", - justifyContent: "center", - ...rest - }; -}} - -export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject }) - -export const center = (styles) => css(getCenterStyle(styles)) -center.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/circle.d.ts b/styled-system/patterns/circle.d.ts deleted file mode 100644 index c8d284f3..00000000 --- a/styled-system/patterns/circle.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type CircleProperties = { - size?: PropertyValue<'width'> -} - - -type CircleOptions = CircleProperties & Omit - -interface CirclePatternFn { - (options?: CircleOptions): string - raw: (options: CircleOptions) => CircleOptions -} - - -export declare const circle: CirclePatternFn; diff --git a/styled-system/patterns/circle.js b/styled-system/patterns/circle.js deleted file mode 100644 index 8d21b1c8..00000000 --- a/styled-system/patterns/circle.js +++ /dev/null @@ -1,22 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const circleConfig = { -transform(props) { - const { size, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: "center", - flex: "0 0 auto", - width: size, - height: size, - borderRadius: "9999px", - ...rest - }; -}} - -export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject }) - -export const circle = (styles) => css(getCircleStyle(styles)) -circle.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/circle.mjs b/styled-system/patterns/circle.mjs deleted file mode 100644 index 368f73dc..00000000 --- a/styled-system/patterns/circle.mjs +++ /dev/null @@ -1,22 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const circleConfig = { -transform(props) { - const { size, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: "center", - flex: "0 0 auto", - width: size, - height: size, - borderRadius: "9999px", - ...rest - }; -}} - -export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject }) - -export const circle = (styles) => css(getCircleStyle(styles)) -circle.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/container.d.ts b/styled-system/patterns/container.d.ts deleted file mode 100644 index 15e8c20b..00000000 --- a/styled-system/patterns/container.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type ContainerProperties = { - -} - - -type ContainerOptions = ContainerProperties & Omit - -interface ContainerPatternFn { - (options?: ContainerOptions): string - raw: (options: ContainerOptions) => ContainerOptions -} - - -export declare const container: ContainerPatternFn; diff --git a/styled-system/patterns/container.js b/styled-system/patterns/container.js deleted file mode 100644 index d3693710..00000000 --- a/styled-system/patterns/container.js +++ /dev/null @@ -1,18 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const containerConfig = { -transform(props) { - return { - position: "relative", - maxWidth: "8xl", - mx: "auto", - px: { base: "4", md: "6", lg: "8" }, - ...props - }; -}} - -export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject }) - -export const container = (styles) => css(getContainerStyle(styles)) -container.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/container.mjs b/styled-system/patterns/container.mjs deleted file mode 100644 index 25aefc7a..00000000 --- a/styled-system/patterns/container.mjs +++ /dev/null @@ -1,18 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const containerConfig = { -transform(props) { - return { - position: "relative", - maxWidth: "8xl", - mx: "auto", - px: { base: "4", md: "6", lg: "8" }, - ...props - }; -}} - -export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject }) - -export const container = (styles) => css(getContainerStyle(styles)) -container.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/divider.d.ts b/styled-system/patterns/divider.d.ts deleted file mode 100644 index ee3e19e2..00000000 --- a/styled-system/patterns/divider.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type DividerProperties = { - orientation?: ConditionalValue<"horizontal" | "vertical"> - thickness?: ConditionalValue - color?: ConditionalValue -} - - -type DividerOptions = DividerProperties & Omit - -interface DividerPatternFn { - (options?: DividerOptions): string - raw: (options: DividerOptions) => DividerOptions -} - - -export declare const divider: DividerPatternFn; diff --git a/styled-system/patterns/divider.js b/styled-system/patterns/divider.js deleted file mode 100644 index 0aa14dda..00000000 --- a/styled-system/patterns/divider.js +++ /dev/null @@ -1,21 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const dividerConfig = { -transform(props, { map }) { - const { orientation = "horizontal", thickness = "1px", color, ...rest } = props; - return { - "--thickness": thickness, - width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"), - height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"), - borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0), - borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0), - borderColor: color, - ...rest - }; -}} - -export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject }) - -export const divider = (styles) => css(getDividerStyle(styles)) -divider.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/divider.mjs b/styled-system/patterns/divider.mjs deleted file mode 100644 index 989054bb..00000000 --- a/styled-system/patterns/divider.mjs +++ /dev/null @@ -1,21 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const dividerConfig = { -transform(props, { map }) { - const { orientation = "horizontal", thickness = "1px", color, ...rest } = props; - return { - "--thickness": thickness, - width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"), - height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"), - borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0), - borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0), - borderColor: color, - ...rest - }; -}} - -export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject }) - -export const divider = (styles) => css(getDividerStyle(styles)) -divider.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/flex.d.ts b/styled-system/patterns/flex.d.ts deleted file mode 100644 index 205bd557..00000000 --- a/styled-system/patterns/flex.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type FlexProperties = { - align?: PropertyValue<'alignItems'> - justify?: PropertyValue<'justifyContent'> - direction?: PropertyValue<'flexDirection'> - wrap?: PropertyValue<'flexWrap'> - basis?: PropertyValue<'flexBasis'> - grow?: PropertyValue<'flexGrow'> - shrink?: PropertyValue<'flexShrink'> -} - - -type FlexOptions = FlexProperties & Omit - -interface FlexPatternFn { - (options?: FlexOptions): string - raw: (options: FlexOptions) => FlexOptions -} - - -export declare const flex: FlexPatternFn; diff --git a/styled-system/patterns/flex.js b/styled-system/patterns/flex.js deleted file mode 100644 index d9b0392d..00000000 --- a/styled-system/patterns/flex.js +++ /dev/null @@ -1,23 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const flexConfig = { -transform(props) { - const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props; - return { - display: "flex", - flexDirection: direction, - alignItems: align, - justifyContent: justify, - flexWrap: wrap2, - flexBasis: basis, - flexGrow: grow, - flexShrink: shrink, - ...rest - }; -}} - -export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject }) - -export const flex = (styles) => css(getFlexStyle(styles)) -flex.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/flex.mjs b/styled-system/patterns/flex.mjs deleted file mode 100644 index 22cb4429..00000000 --- a/styled-system/patterns/flex.mjs +++ /dev/null @@ -1,23 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const flexConfig = { -transform(props) { - const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props; - return { - display: "flex", - flexDirection: direction, - alignItems: align, - justifyContent: justify, - flexWrap: wrap2, - flexBasis: basis, - flexGrow: grow, - flexShrink: shrink, - ...rest - }; -}} - -export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject }) - -export const flex = (styles) => css(getFlexStyle(styles)) -flex.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/float.d.ts b/styled-system/patterns/float.d.ts deleted file mode 100644 index 8e04df06..00000000 --- a/styled-system/patterns/float.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type FloatProperties = { - offsetX?: ConditionalValue - offsetY?: ConditionalValue - offset?: ConditionalValue - placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start"> -} - - -type FloatOptions = FloatProperties & Omit - -interface FloatPatternFn { - (options?: FloatOptions): string - raw: (options: FloatOptions) => FloatOptions -} - - -export declare const float: FloatPatternFn; diff --git a/styled-system/patterns/float.js b/styled-system/patterns/float.js deleted file mode 100644 index e5baf582..00000000 --- a/styled-system/patterns/float.js +++ /dev/null @@ -1,45 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const floatConfig = { -transform(props, { map }) { - const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props; - return { - display: "inline-flex", - justifyContent: "center", - alignItems: "center", - position: "absolute", - insetBlockStart: map(placement, (v) => { - const [side] = v.split("-"); - const map2 = { top: offsetY, middle: "50%", bottom: "auto" }; - return map2[side]; - }), - insetBlockEnd: map(placement, (v) => { - const [side] = v.split("-"); - const map2 = { top: "auto", middle: "50%", bottom: offsetY }; - return map2[side]; - }), - insetInlineStart: map(placement, (v) => { - const [, align] = v.split("-"); - const map2 = { start: offsetX, center: "50%", end: "auto" }; - return map2[align]; - }), - insetInlineEnd: map(placement, (v) => { - const [, align] = v.split("-"); - const map2 = { start: "auto", center: "50%", end: offsetX }; - return map2[align]; - }), - translate: map(placement, (v) => { - const [side, align] = v.split("-"); - const mapX = { start: "-50%", center: "-50%", end: "50%" }; - const mapY = { top: "-50%", middle: "-50%", bottom: "50%" }; - return `${mapX[align]} ${mapY[side]}`; - }), - ...rest - }; -}} - -export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject }) - -export const float = (styles) => css(getFloatStyle(styles)) -float.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/float.mjs b/styled-system/patterns/float.mjs deleted file mode 100644 index 15b19ac4..00000000 --- a/styled-system/patterns/float.mjs +++ /dev/null @@ -1,45 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const floatConfig = { -transform(props, { map }) { - const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props; - return { - display: "inline-flex", - justifyContent: "center", - alignItems: "center", - position: "absolute", - insetBlockStart: map(placement, (v) => { - const [side] = v.split("-"); - const map2 = { top: offsetY, middle: "50%", bottom: "auto" }; - return map2[side]; - }), - insetBlockEnd: map(placement, (v) => { - const [side] = v.split("-"); - const map2 = { top: "auto", middle: "50%", bottom: offsetY }; - return map2[side]; - }), - insetInlineStart: map(placement, (v) => { - const [, align] = v.split("-"); - const map2 = { start: offsetX, center: "50%", end: "auto" }; - return map2[align]; - }), - insetInlineEnd: map(placement, (v) => { - const [, align] = v.split("-"); - const map2 = { start: "auto", center: "50%", end: offsetX }; - return map2[align]; - }), - translate: map(placement, (v) => { - const [side, align] = v.split("-"); - const mapX = { start: "-50%", center: "-50%", end: "50%" }; - const mapY = { top: "-50%", middle: "-50%", bottom: "50%" }; - return `${mapX[align]} ${mapY[side]}`; - }), - ...rest - }; -}} - -export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject }) - -export const float = (styles) => css(getFloatStyle(styles)) -float.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/grid-item.d.ts b/styled-system/patterns/grid-item.d.ts deleted file mode 100644 index 7eda1f48..00000000 --- a/styled-system/patterns/grid-item.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type GridItemProperties = { - colSpan?: ConditionalValue - rowSpan?: ConditionalValue - colStart?: ConditionalValue - rowStart?: ConditionalValue - colEnd?: ConditionalValue - rowEnd?: ConditionalValue -} - - -type GridItemOptions = GridItemProperties & Omit - -interface GridItemPatternFn { - (options?: GridItemOptions): string - raw: (options: GridItemOptions) => GridItemOptions -} - - -export declare const gridItem: GridItemPatternFn; diff --git a/styled-system/patterns/grid-item.js b/styled-system/patterns/grid-item.js deleted file mode 100644 index 9ec02471..00000000 --- a/styled-system/patterns/grid-item.js +++ /dev/null @@ -1,22 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const gridItemConfig = { -transform(props, { map }) { - const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props; - const spanFn = (v) => v === "auto" ? v : `span ${v}`; - return { - gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0, - gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0, - gridColumnStart: colStart, - gridColumnEnd: colEnd, - gridRowStart: rowStart, - gridRowEnd: rowEnd, - ...rest - }; -}} - -export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject }) - -export const gridItem = (styles) => css(getGridItemStyle(styles)) -gridItem.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/grid-item.mjs b/styled-system/patterns/grid-item.mjs deleted file mode 100644 index 37c8a4ce..00000000 --- a/styled-system/patterns/grid-item.mjs +++ /dev/null @@ -1,22 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const gridItemConfig = { -transform(props, { map }) { - const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props; - const spanFn = (v) => v === "auto" ? v : `span ${v}`; - return { - gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0, - gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0, - gridColumnStart: colStart, - gridColumnEnd: colEnd, - gridRowStart: rowStart, - gridRowEnd: rowEnd, - ...rest - }; -}} - -export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject }) - -export const gridItem = (styles) => css(getGridItemStyle(styles)) -gridItem.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/grid.d.ts b/styled-system/patterns/grid.d.ts deleted file mode 100644 index 712512a5..00000000 --- a/styled-system/patterns/grid.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type GridProperties = { - gap?: PropertyValue<'gap'> - columnGap?: PropertyValue<'gap'> - rowGap?: PropertyValue<'gap'> - columns?: ConditionalValue - minChildWidth?: ConditionalValue -} - - -type GridOptions = GridProperties & Omit - -interface GridPatternFn { - (options?: GridOptions): string - raw: (options: GridOptions) => GridOptions -} - - -export declare const grid: GridPatternFn; diff --git a/styled-system/patterns/grid.js b/styled-system/patterns/grid.js deleted file mode 100644 index 277390df..00000000 --- a/styled-system/patterns/grid.js +++ /dev/null @@ -1,20 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const gridConfig = { -transform(props, { map }) { - const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props; - return { - display: "grid", - gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`) : void 0, - gap, - columnGap, - rowGap, - ...rest - }; -}} - -export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject }) - -export const grid = (styles) => css(getGridStyle(styles)) -grid.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/grid.mjs b/styled-system/patterns/grid.mjs deleted file mode 100644 index 6a1a1a08..00000000 --- a/styled-system/patterns/grid.mjs +++ /dev/null @@ -1,20 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const gridConfig = { -transform(props, { map }) { - const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props; - return { - display: "grid", - gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`) : void 0, - gap, - columnGap, - rowGap, - ...rest - }; -}} - -export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject }) - -export const grid = (styles) => css(getGridStyle(styles)) -grid.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/hstack.d.ts b/styled-system/patterns/hstack.d.ts deleted file mode 100644 index b70eb132..00000000 --- a/styled-system/patterns/hstack.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type HstackProperties = { - justify?: PropertyValue<'justifyContent'> - gap?: PropertyValue<'gap'> -} - - -type HstackOptions = HstackProperties & Omit - -interface HstackPatternFn { - (options?: HstackOptions): string - raw: (options: HstackOptions) => HstackOptions -} - - -export declare const hstack: HstackPatternFn; diff --git a/styled-system/patterns/hstack.js b/styled-system/patterns/hstack.js deleted file mode 100644 index fdf9ed92..00000000 --- a/styled-system/patterns/hstack.js +++ /dev/null @@ -1,20 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const hstackConfig = { -transform(props) { - const { justify, gap = "10px", ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: justify, - gap, - flexDirection: "row", - ...rest - }; -}} - -export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject }) - -export const hstack = (styles) => css(getHstackStyle(styles)) -hstack.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/hstack.mjs b/styled-system/patterns/hstack.mjs deleted file mode 100644 index f1559d80..00000000 --- a/styled-system/patterns/hstack.mjs +++ /dev/null @@ -1,20 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const hstackConfig = { -transform(props) { - const { justify, gap = "10px", ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: justify, - gap, - flexDirection: "row", - ...rest - }; -}} - -export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject }) - -export const hstack = (styles) => css(getHstackStyle(styles)) -hstack.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/index.d.ts b/styled-system/patterns/index.d.ts deleted file mode 100644 index a01b6c6b..00000000 --- a/styled-system/patterns/index.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-disable */ -export * from './box' -export * from './flex' -export * from './stack' -export * from './vstack' -export * from './hstack' -export * from './spacer' -export * from './square' -export * from './circle' -export * from './center' -export * from './link-box' -export * from './link-overlay' -export * from './aspect-ratio' -export * from './grid' -export * from './grid-item' -export * from './wrap' -export * from './container' -export * from './divider' -export * from './float' \ No newline at end of file diff --git a/styled-system/patterns/index.js b/styled-system/patterns/index.js deleted file mode 100644 index 6a4b0e67..00000000 --- a/styled-system/patterns/index.js +++ /dev/null @@ -1,18 +0,0 @@ -export * from './box.js'; -export * from './flex.js'; -export * from './stack.js'; -export * from './vstack.js'; -export * from './hstack.js'; -export * from './spacer.js'; -export * from './square.js'; -export * from './circle.js'; -export * from './center.js'; -export * from './link-box.js'; -export * from './link-overlay.js'; -export * from './aspect-ratio.js'; -export * from './grid.js'; -export * from './grid-item.js'; -export * from './wrap.js'; -export * from './container.js'; -export * from './divider.js'; -export * from './float.js'; \ No newline at end of file diff --git a/styled-system/patterns/index.mjs b/styled-system/patterns/index.mjs deleted file mode 100644 index 6ef46f0d..00000000 --- a/styled-system/patterns/index.mjs +++ /dev/null @@ -1,18 +0,0 @@ -export * from './box.mjs'; -export * from './flex.mjs'; -export * from './stack.mjs'; -export * from './vstack.mjs'; -export * from './hstack.mjs'; -export * from './spacer.mjs'; -export * from './square.mjs'; -export * from './circle.mjs'; -export * from './center.mjs'; -export * from './link-box.mjs'; -export * from './link-overlay.mjs'; -export * from './aspect-ratio.mjs'; -export * from './grid.mjs'; -export * from './grid-item.mjs'; -export * from './wrap.mjs'; -export * from './container.mjs'; -export * from './divider.mjs'; -export * from './float.mjs'; \ No newline at end of file diff --git a/styled-system/patterns/link-box.d.ts b/styled-system/patterns/link-box.d.ts deleted file mode 100644 index 36976d2e..00000000 --- a/styled-system/patterns/link-box.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type LinkBoxProperties = { - -} - - -type LinkBoxOptions = LinkBoxProperties & Omit - -interface LinkBoxPatternFn { - (options?: LinkBoxOptions): string - raw: (options: LinkBoxOptions) => LinkBoxOptions -} - - -export declare const linkBox: LinkBoxPatternFn; diff --git a/styled-system/patterns/link-box.js b/styled-system/patterns/link-box.js deleted file mode 100644 index 094f61c6..00000000 --- a/styled-system/patterns/link-box.js +++ /dev/null @@ -1,19 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const linkBoxConfig = { -transform(props) { - return { - position: "relative", - "& :where(a, abbr)": { - position: "relative", - zIndex: "1" - }, - ...props - }; -}} - -export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject }) - -export const linkBox = (styles) => css(getLinkBoxStyle(styles)) -linkBox.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/link-box.mjs b/styled-system/patterns/link-box.mjs deleted file mode 100644 index c7f80f4c..00000000 --- a/styled-system/patterns/link-box.mjs +++ /dev/null @@ -1,19 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const linkBoxConfig = { -transform(props) { - return { - position: "relative", - "& :where(a, abbr)": { - position: "relative", - zIndex: "1" - }, - ...props - }; -}} - -export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject }) - -export const linkBox = (styles) => css(getLinkBoxStyle(styles)) -linkBox.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/link-overlay.d.ts b/styled-system/patterns/link-overlay.d.ts deleted file mode 100644 index 6cf1ce98..00000000 --- a/styled-system/patterns/link-overlay.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type LinkOverlayProperties = { - -} - - -type LinkOverlayOptions = LinkOverlayProperties & Omit - -interface LinkOverlayPatternFn { - (options?: LinkOverlayOptions): string - raw: (options: LinkOverlayOptions) => LinkOverlayOptions -} - - -export declare const linkOverlay: LinkOverlayPatternFn; diff --git a/styled-system/patterns/link-overlay.js b/styled-system/patterns/link-overlay.js deleted file mode 100644 index 69670b3d..00000000 --- a/styled-system/patterns/link-overlay.js +++ /dev/null @@ -1,24 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const linkOverlayConfig = { -transform(props) { - return { - position: "static", - _before: { - content: '""', - display: "block", - position: "absolute", - cursor: "inherit", - inset: "0", - zIndex: "0", - ...props["_before"] - }, - ...props - }; -}} - -export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject }) - -export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles)) -linkOverlay.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/link-overlay.mjs b/styled-system/patterns/link-overlay.mjs deleted file mode 100644 index f10eb927..00000000 --- a/styled-system/patterns/link-overlay.mjs +++ /dev/null @@ -1,24 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const linkOverlayConfig = { -transform(props) { - return { - position: "static", - _before: { - content: '""', - display: "block", - position: "absolute", - cursor: "inherit", - inset: "0", - zIndex: "0", - ...props["_before"] - }, - ...props - }; -}} - -export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject }) - -export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles)) -linkOverlay.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/spacer.d.ts b/styled-system/patterns/spacer.d.ts deleted file mode 100644 index 836cea8e..00000000 --- a/styled-system/patterns/spacer.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type SpacerProperties = { - size?: ConditionalValue -} - - -type SpacerOptions = SpacerProperties & Omit - -interface SpacerPatternFn { - (options?: SpacerOptions): string - raw: (options: SpacerOptions) => SpacerOptions -} - - -export declare const spacer: SpacerPatternFn; diff --git a/styled-system/patterns/spacer.js b/styled-system/patterns/spacer.js deleted file mode 100644 index 64c2ab8f..00000000 --- a/styled-system/patterns/spacer.js +++ /dev/null @@ -1,18 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const spacerConfig = { -transform(props, { map }) { - const { size, ...rest } = props; - return { - alignSelf: "stretch", - justifySelf: "stretch", - flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`), - ...rest - }; -}} - -export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject }) - -export const spacer = (styles) => css(getSpacerStyle(styles)) -spacer.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/spacer.mjs b/styled-system/patterns/spacer.mjs deleted file mode 100644 index 51ab3441..00000000 --- a/styled-system/patterns/spacer.mjs +++ /dev/null @@ -1,18 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const spacerConfig = { -transform(props, { map }) { - const { size, ...rest } = props; - return { - alignSelf: "stretch", - justifySelf: "stretch", - flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`), - ...rest - }; -}} - -export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject }) - -export const spacer = (styles) => css(getSpacerStyle(styles)) -spacer.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/square.d.ts b/styled-system/patterns/square.d.ts deleted file mode 100644 index 622ad071..00000000 --- a/styled-system/patterns/square.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type SquareProperties = { - size?: PropertyValue<'width'> -} - - -type SquareOptions = SquareProperties & Omit - -interface SquarePatternFn { - (options?: SquareOptions): string - raw: (options: SquareOptions) => SquareOptions -} - - -export declare const square: SquarePatternFn; diff --git a/styled-system/patterns/square.js b/styled-system/patterns/square.js deleted file mode 100644 index d05c71cd..00000000 --- a/styled-system/patterns/square.js +++ /dev/null @@ -1,21 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const squareConfig = { -transform(props) { - const { size, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: "center", - flex: "0 0 auto", - width: size, - height: size, - ...rest - }; -}} - -export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject }) - -export const square = (styles) => css(getSquareStyle(styles)) -square.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/square.mjs b/styled-system/patterns/square.mjs deleted file mode 100644 index 3de10fa9..00000000 --- a/styled-system/patterns/square.mjs +++ /dev/null @@ -1,21 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const squareConfig = { -transform(props) { - const { size, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: "center", - flex: "0 0 auto", - width: size, - height: size, - ...rest - }; -}} - -export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject }) - -export const square = (styles) => css(getSquareStyle(styles)) -square.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/stack.d.ts b/styled-system/patterns/stack.d.ts deleted file mode 100644 index 4380f6d9..00000000 --- a/styled-system/patterns/stack.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type StackProperties = { - align?: PropertyValue<'alignItems'> - justify?: PropertyValue<'justifyContent'> - direction?: PropertyValue<'flexDirection'> - gap?: PropertyValue<'gap'> -} - - -type StackOptions = StackProperties & Omit - -interface StackPatternFn { - (options?: StackOptions): string - raw: (options: StackOptions) => StackOptions -} - - -export declare const stack: StackPatternFn; diff --git a/styled-system/patterns/stack.js b/styled-system/patterns/stack.js deleted file mode 100644 index 0cd27528..00000000 --- a/styled-system/patterns/stack.js +++ /dev/null @@ -1,20 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const stackConfig = { -transform(props) { - const { align, justify, direction = "column", gap = "10px", ...rest } = props; - return { - display: "flex", - flexDirection: direction, - alignItems: align, - justifyContent: justify, - gap, - ...rest - }; -}} - -export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject }) - -export const stack = (styles) => css(getStackStyle(styles)) -stack.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/stack.mjs b/styled-system/patterns/stack.mjs deleted file mode 100644 index 40d23ae2..00000000 --- a/styled-system/patterns/stack.mjs +++ /dev/null @@ -1,20 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const stackConfig = { -transform(props) { - const { align, justify, direction = "column", gap = "10px", ...rest } = props; - return { - display: "flex", - flexDirection: direction, - alignItems: align, - justifyContent: justify, - gap, - ...rest - }; -}} - -export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject }) - -export const stack = (styles) => css(getStackStyle(styles)) -stack.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/vstack.d.ts b/styled-system/patterns/vstack.d.ts deleted file mode 100644 index d2fa0f39..00000000 --- a/styled-system/patterns/vstack.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type VstackProperties = { - justify?: PropertyValue<'justifyContent'> - gap?: PropertyValue<'gap'> -} - - -type VstackOptions = VstackProperties & Omit - -interface VstackPatternFn { - (options?: VstackOptions): string - raw: (options: VstackOptions) => VstackOptions -} - - -export declare const vstack: VstackPatternFn; diff --git a/styled-system/patterns/vstack.js b/styled-system/patterns/vstack.js deleted file mode 100644 index 43c7d43a..00000000 --- a/styled-system/patterns/vstack.js +++ /dev/null @@ -1,20 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const vstackConfig = { -transform(props) { - const { justify, gap = "10px", ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: justify, - gap, - flexDirection: "column", - ...rest - }; -}} - -export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject }) - -export const vstack = (styles) => css(getVstackStyle(styles)) -vstack.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/vstack.mjs b/styled-system/patterns/vstack.mjs deleted file mode 100644 index 88581c21..00000000 --- a/styled-system/patterns/vstack.mjs +++ /dev/null @@ -1,20 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const vstackConfig = { -transform(props) { - const { justify, gap = "10px", ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: justify, - gap, - flexDirection: "column", - ...rest - }; -}} - -export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject }) - -export const vstack = (styles) => css(getVstackStyle(styles)) -vstack.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/wrap.d.ts b/styled-system/patterns/wrap.d.ts deleted file mode 100644 index 4644502a..00000000 --- a/styled-system/patterns/wrap.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types' -import type { PropertyValue } from '../types/prop-type' -import type { Properties } from '../types/csstype' -import type { Tokens } from '../tokens' - -export type WrapProperties = { - gap?: PropertyValue<'gap'> - rowGap?: PropertyValue<'gap'> - columnGap?: PropertyValue<'gap'> - align?: PropertyValue<'alignItems'> - justify?: PropertyValue<'justifyContent'> -} - - -type WrapOptions = WrapProperties & Omit - -interface WrapPatternFn { - (options?: WrapOptions): string - raw: (options: WrapOptions) => WrapOptions -} - - -export declare const wrap: WrapPatternFn; diff --git a/styled-system/patterns/wrap.js b/styled-system/patterns/wrap.js deleted file mode 100644 index b735c3a3..00000000 --- a/styled-system/patterns/wrap.js +++ /dev/null @@ -1,22 +0,0 @@ -import { mapObject } from '../helpers.js'; -import { css } from '../css/index.js'; - -const wrapConfig = { -transform(props) { - const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props; - return { - display: "flex", - flexWrap: "wrap", - alignItems: align, - justifyContent: justify, - gap, - columnGap, - rowGap, - ...rest - }; -}} - -export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject }) - -export const wrap = (styles) => css(getWrapStyle(styles)) -wrap.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/patterns/wrap.mjs b/styled-system/patterns/wrap.mjs deleted file mode 100644 index 19e7df5f..00000000 --- a/styled-system/patterns/wrap.mjs +++ /dev/null @@ -1,22 +0,0 @@ -import { mapObject } from '../helpers.mjs'; -import { css } from '../css/index.mjs'; - -const wrapConfig = { -transform(props) { - const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props; - return { - display: "flex", - flexWrap: "wrap", - alignItems: align, - justifyContent: justify, - gap, - columnGap, - rowGap, - ...rest - }; -}} - -export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject }) - -export const wrap = (styles) => css(getWrapStyle(styles)) -wrap.raw = (styles) => styles \ No newline at end of file diff --git a/styled-system/reset.css b/styled-system/reset.css deleted file mode 100644 index ff42d80a..00000000 --- a/styled-system/reset.css +++ /dev/null @@ -1,191 +0,0 @@ -@layer reset { - * { - margin: 0; - padding: 0; - font: inherit; - } - - *, - *::before, - *::after { - box-sizing: border-box; - border-width: 0; - border-style: solid; - border-color: var(--global-color-border, currentColor); - } - - html { - line-height: 1.5; - --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', - 'Noto Color Emoji'; - -webkit-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - -webkit-font-smoothing: antialiased; - -moz-tab-size: 4; - tab-size: 4; - font-family: var(--global-font-body, var(--font-fallback)); - } - - hr { - height: 0; - color: inherit; - border-top-width: 1px; - } - - body { - height: 100%; - line-height: inherit; - } - - img { - border-style: none; - } - - img, - svg, - video, - canvas, - audio, - iframe, - embed, - object { - display: block; - vertical-align: middle; - } - - img, - video { - max-width: 100%; - height: auto; - } - - p, - h1, - h2, - h3, - h4, - h5, - h6 { - overflow-wrap: break-word; - } - - ol, - ul { - list-style: none; - } - - code, - kbd, - pre, - samp { - font-size: 1em; - } - - button, - [type='button'], - [type='reset'], - [type='submit'] { - -webkit-appearance: button; - background-color: transparent; - background-image: none; - } - - button, - select { - text-transform: none; - } - - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; - } - - input::placeholder, - textarea::placeholder { - opacity: 1; - color: var(--global-color-placeholder, #9ca3af); - } - - textarea { - resize: vertical; - } - - summary { - display: list-item; - } - - small { - font-size: 80%; - } - - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sub { - bottom: -0.25em; - } - - sup { - top: -0.5em; - } - - dialog { - padding: 0; - } - - a { - color: inherit; - text-decoration: inherit; - } - - abbr:where([title]) { - text-decoration: underline dotted; - } - - b, - strong { - font-weight: bolder; - } - - code, - kbd, - samp, - pre { - font-size: 1em; - --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'; - font-family: var(--global-font-mono, var(--font-fallback)); - } - - [type='search'] { - -webkit-appearance: textfield; - outline-offset: -2px; - } - - ::-webkit-search-decoration { - -webkit-appearance: none; - } - - ::-webkit-file-upload-button { - -webkit-appearance: button; - } - - ::-webkit-inner-spin-button, - ::-webkit-outer-spin-button { - height: auto; - } - - :-moz-ui-invalid { - box-shadow: none; - } - - :-moz-focusring { - outline: auto; - } -} \ No newline at end of file diff --git a/styled-system/styles.css b/styled-system/styles.css deleted file mode 100644 index eaebfac4..00000000 --- a/styled-system/styles.css +++ /dev/null @@ -1,3324 +0,0 @@ -@layer reset, base, tokens, recipes, utilities; - -@import './reset.css'; - -@import './global.css'; - -@import './tokens/index.css'; - -@import './tokens/keyframes.css'; - -@layer utilities { - .text_\#777E88 { - color: #777E88 - } - - .bg_\#f4f4f6 { - background: #f4f4f6 - } - - .top_calc\(50\%_-_8px\) { - top: calc(50% - 8px) - } - - .size_18px { - size: 18px - } - - .max-w_300px { - max-width: 300px - } - - .justify_end { - justify-content: end - } - - .mr_-8px { - margin-right: -8px - } - - .text_\#74777D { - color: #74777D - } - - .mt_8px { - margin-top: 8px - } - - .top_-24px { - top: -24px - } - - .w_106px { - width: 106px - } - - .m_0_auto { - margin: 0 auto - } - - .ml_1 { - margin-left: var(--spacing-1) - } - - .placement_right-end { - placement: right-end - } - - .ml_1 { - margin-left: 1px - } - - .bg_invert { - background: invert - } - - .h_1\.25rem { - height: 1.25rem - } - - .numeric_tabular-nums { - font-variant-numeric: tabular-nums - } - - .placement_left-start { - placement: left-start - } - - .ring_0 { - outline: 0 - } - - .transform_none { - transform: none - } - - .transform_translateY\(35px\) { - transform: translateY(35px) - } - - .duration_0\.4s { - --transition-duration: 0.4s; - transition-duration: 0.4s - } - - .will-change_transform\,_opacity { - will-change: transform, opacity - } - - .max-w_472px { - max-width: 472px - } - - .rounded-tl_16px { - border-top-left-radius: 16px - } - - .rounded-tr_16px { - border-top-right-radius: 16px - } - - .rounded-bl_0 { - border-bottom-left-radius: 0 - } - - .rounded-br_0 { - border-bottom-right-radius: 0 - } - - .max-h_calc\(100vh_-_24px\) { - max-height: calc(100vh - 24px) - } - - .max-h_100\% { - max-height: 100% - } - - .opacity_0\.3 { - opacity: 0.3 - } - - .opacity_unset { - opacity: unset - } - - .place-items_center { - place-items: center - } - - .z_9 { - z-index: 9 - } - - .opacity_0\.12 { - opacity: 0.12 - } - - .rounded_100\% { - border-radius: 100% - } - - .size_100\% { - size: 100% - } - - .size_1rem { - size: 1rem - } - - .border-b_4px_solid { - border-bottom: 4px solid - } - - .border-b_unset { - border-bottom: unset - } - - .border-t_1px_solid { - border-top: 1px solid - } - - .w_130px { - width: 130px - } - - .right_2 { - right: var(--spacing-2); - right: 2px - } - - .pr_38px { - padding-right: 38px - } - - .min-h_96px { - min-height: 96px - } - - .top_-35px { - top: -35px - } - - .border_2px_solid_\#EFEFF2 { - border: 2px solid #EFEFF2 - } - - .pl_40px { - padding-left: 40px - } - - .pr_loose { - padding-right: loose - } - - .pt_tight { - padding-top: tight - } - - .\ \.mode__full-page\:\[\&\,_body\]\:h_100\%, .\ \.mode__full-page\:\[\&\,_body\]\:h_100\% body { - height: 100% - } - - .\ \.mode__full-page\:\[\&\,_body\]\:max-height_unset, .\ \.mode__full-page\:\[\&\,_body\]\:max-height_unset body { - max-height: unset - } - - .\ \.mode__full-page\:\[\&\,_body\]\:w_100\%, .\ \.mode__full-page\:\[\&\,_body\]\:w_100\% body { - width: 100% - } - - .\.main-content\:\ \.mode__full-page\:flex-grow_1 { - flex-grow: 1 - } - - .\.main-content\:\ \.mode__full-page\:justify-content_center { - justify-content: center - } - - .\.main-content\:\ \.mode__full-page\:m_0_auto { - margin: 0 auto - } - - .\[\&\:\:-webkit-scrollbar\]\:d_none::-webkit-scrollbar { - display: none - } - - .\ \.mode__popup-center\:\[\&\,_body\]\:h_100\%, .\ \.mode__popup-center\:\[\&\,_body\]\:h_100\% body { - height: 100% - } - - .\ \.mode__popup-center\:\[\&\,_body\]\:w_100\%, .\ \.mode__popup-center\:\[\&\,_body\]\:w_100\% body { - width: 100% - } - - .\.tippy-box\[data-placement\^\=\'top\'\]\ \>\ \.tippy-arrow\:bottom_0 { - bottom: 0 - } - - .\.tippy-box\[data-placement\^\=\'top\'\]\ \>\ \.tippy-arrow\:before\:left_0 { - left: 0 - } - - .\.tippy-box\[data-placement\^\=\'bottom\'\]\ \>\ \.tippy-arrow\:top_0 { - top: 0 - } - - .\.tippy-box\[data-placement\^\=\'bottom\'\]\ \>\ \.tippy-arrow\:before\:left_0 { - left: 0 - } - - .\.tippy-box\[data-placement\^\=\'left\'\]\ \>\ \.tippy-arrow\:right_0 { - right: 0 - } - - .\.tippy-box\[data-placement\^\=\'right\'\]\ \>\ \.tippy-arrow\:left_0 { - left: 0 - } - - .\ \.tippy-box\[data-animation\=\'fade\'\]\[data-state\=\'hidden\'\]\:opacity_0 { - opacity: 0 - } - - .\[data-tippy-root\]\:max-width_calc\(100vw_-_10px\) { - max-width: calc(100vw - 10px) - } - - .\.tippy-box\:pos_relative { - position: relative - } - - .\.tippy-box\:background-color_\#333 { - background-color: #333 - } - - .\.tippy-box\:text_\#fff { - color: #fff - } - - .\.tippy-box\:border-radius_4px { - border-radius: 4px - } - - .\.tippy-box\:font-size_14px { - font-size: 14px - } - - .\.tippy-box\:line-height_1\.4 { - line-height: 1.4 - } - - .\.tippy-box\:ring_0 { - outline: 0 - } - - .\.tippy-box\:transition-property_transform\,_visibility\,_opacity { - transition-property: transform, visibility, opacity - } - - .\.tippy-box\[data-placement\^\=\'top\'\]\ \>\ \.tippy-arrow\:bottom_0 { - bottom: var(--spacing-0) - } - - .\.tippy-box\[data-placement\^\=\'top\'\]\ \>\ \.tippy-arrow\:before\:bottom_-7px { - bottom: -7px - } - - .\.tippy-box\[data-placement\^\=\'top\'\]\ \>\ \.tippy-arrow\:before\:left_0 { - left: var(--spacing-0) - } - - .\.tippy-box\[data-placement\^\=\'top\'\]\ \>\ \.tippy-arrow\:before\:border-width_8px_8px_0 { - border-width: 8px 8px 0 - } - - .\.tippy-box\[data-placement\^\=\'top\'\]\ \>\ \.tippy-arrow\:before\:border-top-color_initial { - border-top-color: initial - } - - .\.tippy-box\[data-placement\^\=\'top\'\]\ \>\ \.tippy-arrow\:before\:transform-origin_center_top { - transform-origin: center top - } - - .\.tippy-box\[data-placement\^\=\'bottom\'\]\ \>\ \.tippy-arrow\:top_0 { - top: var(--spacing-0) - } - - .\.tippy-box\[data-placement\^\=\'bottom\'\]\ \>\ \.tippy-arrow\:before\:top_-7px { - top: -7px - } - - .\.tippy-box\[data-placement\^\=\'bottom\'\]\ \>\ \.tippy-arrow\:before\:left_0 { - left: var(--spacing-0) - } - - .\.tippy-box\[data-placement\^\=\'bottom\'\]\ \>\ \.tippy-arrow\:before\:border-width_0_8px_8px { - border-width: 0 8px 8px - } - - .\.tippy-box\[data-placement\^\=\'bottom\'\]\ \>\ \.tippy-arrow\:before\:border-bottom-color_initial { - border-bottom-color: initial - } - - .\.tippy-box\[data-placement\^\=\'bottom\'\]\ \>\ \.tippy-arrow\:before\:transform-origin_center_bottom { - transform-origin: center bottom - } - - .\.tippy-box\[data-placement\^\=\'left\'\]\ \>\ \.tippy-arrow\:right_0 { - right: var(--spacing-0) - } - - .\.tippy-box\[data-placement\^\=\'left\'\]\ \>\ \.tippy-arrow\:before\:border-width_8px_0_8px_8px { - border-width: 8px 0 8px 8px - } - - .\.tippy-box\[data-placement\^\=\'left\'\]\ \>\ \.tippy-arrow\:before\:border-left-color_initial { - border-left-color: initial - } - - .\.tippy-box\[data-placement\^\=\'left\'\]\ \>\ \.tippy-arrow\:before\:right_-7px { - right: -7px - } - - .\.tippy-box\[data-placement\^\=\'left\'\]\ \>\ \.tippy-arrow\:before\:transform-origin_center_left { - transform-origin: center left - } - - .\.tippy-box\[data-placement\^\=\'right\'\]\ \>\ \.tippy-arrow\:left_0 { - left: var(--spacing-0) - } - - .\.tippy-box\[data-placement\^\=\'right\'\]\ \>\ \.tippy-arrow\:before\:left_-7px { - left: -7px - } - - .\.tippy-box\[data-placement\^\=\'right\'\]\ \>\ \.tippy-arrow\:before\:border-width_8px_8px_8px_0 { - border-width: 8px 8px 8px 0 - } - - .\.tippy-box\[data-placement\^\=\'right\'\]\ \>\ \.tippy-arrow\:before\:border-right-color_initial { - border-right-color: initial - } - - .\.tippy-box\[data-placement\^\=\'right\'\]\ \>\ \.tippy-arrow\:before\:transform-origin_center_right { - transform-origin: center right - } - - .\.tippy-box\[data-inertia\]\[data-state\=\'visible\'\]\:transition-timing-function_cubic-bezier\(0\.54\,_1\.5\,_0\.38\,_1\.11\) { - transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11) - } - - .\.tippy-arrow\:w_16px { - width: 16px - } - - .\.tippy-arrow\:h_16px { - height: 16px - } - - .\.tippy-arrow\:text_\#333 { - color: #333 - } - - .\.tippy-arrow\:before\:content_\'\' { - content: '' - } - - .\.tippy-arrow\:before\:pos_absolute { - position: absolute - } - - .\.tippy-arrow\:before\:border-color_transparent { - border-color: transparent - } - - .\.tippy-arrow\:before\:border-style_solid { - border-style: solid - } - - .\.tippy-content\:pos_relative { - position: relative - } - - .\.tippy-content\:p_5px_9px { - padding: 5px 9px - } - - .\.tippy-content\:z-index_1 { - z-index: 1 - } - - .d_unset { - display: unset - } - - .leading_10px { - line-height: 10px - } - - .mb_2px { - margin-bottom: 2px - } - - .basis_60\% { - flex-basis: 60% - } - - .w_28px { - width: 28px - } - - .w_82px { - width: 82px - } - - .cursor_unset { - cursor: unset - } - - .bg_\#DCDDE2 { - background-color: #DCDDE2 - } - - .h_39 { - height: 39 - } - - .w_39 { - width: 39 - } - - .w_24px { - width: 24px - } - - .font-variant_tabular-nums { - font-variant: tabular-nums - } - - .mr_10px { - margin-right: 10px - } - - .py_base-loose { - padding-block: base-loose - } - - .justify-items_center { - justify-items: center - } - - .py_16px { - padding-block: 16px - } - - .bg_\#F9F9FA { - background-color: #F9F9FA - } - - .py_24px { - padding-block: 24px - } - - .border_1px_solid_\#EFEFF2 { - border: 1px solid #EFEFF2 - } - - .bg_\#F5F5F7 { - background: #F5F5F7 - } - - .bg_black { - background: black - } - - .w_100px { - width: 100px - } - - .h_100px { - height: 100px - } - - .bg_black { - background: var(--colors-black) - } - - .w_40 { - width: 40px - } - - .h_40 { - height: 40px - } - - .w_40 { - width: var(--sizes-40) - } - - .h_40 { - height: var(--sizes-40) - } - - .size_calc\(100\%_\+_24px\) { - size: calc(100% + 24px) - } - - .left_-12px { - left: -12px - } - - .top_-12px { - top: -12px - } - - .z_-1 { - z-index: -1 - } - - .\ pre\:overflow-x_auto { - overflow-x: auto - } - - .\ pre\:white-space_pre-wrap { - white-space: pre-wrap - } - - .\ pre\:word-wrap_break-word { - word-wrap: break-word - } - - .h_1px { - height: 1px - } - - .size_lg { - size: lg - } - - .h_calc\(100vh_-_68px\) { - height: calc(100vh - 68px) - } - - .self_center { - align-self: center - } - - .right_35px { - right: 35px - } - - .right_15px { - right: 15px - } - - .flex_60\% { - flex: 60% - } - - .basis_20\% { - flex-basis: 20% - } - - .fs_11px { - font-size: 11px - } - - .border-width_1px { - border-width: 1px - } - - .px_12px { - padding-inline: 12px - } - - .bg_rgba\(0\,0\,0\,0\.4\) { - background: rgba(0,0,0,0.4) - } - - .pt_loose { - padding-top: loose - } - - .z_1000 { - z-index: 1000 - } - - .fontSize\:2_64px { - 2: 64px - } - - .fontSize\:2_48px { - 2: 48px - } - - .lineHeight\:2_112\% { - 2: 112% - } - - .lineHeight\:2_125\% { - 2: 125% - } - - .fs_32px { - font-size: 32px - } - - .leading_137\% { - line-height: 137% - } - - .max-w_90\% { - max-width: 90% - } - - .max-w_200px { - max-width: 200px - } - - .ml_base-tight { - margin-left: base-tight - } - - .fill_none { - fill: none - } - - .w_97px { - width: 97px - } - - .bg_\#EEF2FB { - background: #EEF2FB - } - - .min-w_105px { - min-width: 105px - } - - .mr_3px { - margin-right: 3px - } - - .text_capitalize { - text-transform: capitalize - } - - .z_4 { - z-index: 4 - } - - .transform_translateX\(4px\) { - transform: translateX(4px) - } - - .transform_translateX\(calc\(100\%_\+_4px\)\) { - transform: translateX(calc(100% + 4px)) - } - - .h_calc\(100\%_-_8px\) { - height: calc(100% - 8px) - } - - .w_calc\(50\%_-_4px\) { - width: calc(50% - 4px) - } - - .max-h_20px { - max-height: 20px - } - - .text_\#C83532 { - color: #C83532 - } - - .p_none { - padding: none - } - - .before\:content_\"\"::before { - content: "" - } - - .before\:pos_absolute::before { - position: absolute - } - - .before\:rounded_10px::before { - border-radius: 10px - } - - .before\:left_-1px::before { - left: -1px - } - - .before\:right_-1px::before { - right: -1px - } - - .before\:top_-1px::before { - top: -1px - } - - .before\:bottom_-1px::before { - bottom: -1px - } - - .text-transform_capitalize { - text-transform: capitalize - } - - .w_42px { - width: 42px - } - - .background-color_\#efeff2 { - background-color: #efeff2 - } - - .\[\&\[data-state\=\'checked\'\]\]\:background-color_\#5546ff[data-state='checked'] { - background-color: #5546ff - } - - .background-color_white { - background-color: white - } - - .border-radius_9999px { - border-radius: 9999px - } - - .transition_all_100ms { - transition: all 100ms - } - - .transform_translateX\(2px\) { - transform: translateX(2px) - } - - .will-change_transform { - will-change: transform - } - - .\[\&\[data-state\=\'checked\'\]\]\:transform_translateX\(19px\)[data-state='checked'] { - transform: translateX(19px) - } - - .mt_4px { - margin-top: 4px - } - - .mr_2px { - margin-right: 2px - } - - .size_10px { - size: 10px - } - - .w_21px { - width: 21px - } - - .h_21px { - height: 21px - } - - .bottom_-2px { - bottom: -2px - } - - .right_-9px { - right: -9px - } - - .size_13px { - size: 13px - } - - .font_\'Open_Sauce_One\' { - font-family: 'Open Sauce One' - } - - .tracking_-0\.01em { - letter-spacing: -0.01em - } - - .fontMetrics\:cap-height_2048 { - cap-height: 2048px - } - - .fontMetrics\:ascent_2728 { - ascent: 2728px - } - - .fontMetrics\:descent_-680 { - descent: -680px - } - - .fontMetrics\:line-gap_0 { - line-gap: 0 - } - - .fontMetrics\:units-per-em_2816 { - units-per-em: 2816px - } - - .fs_14 { - font-size: 14px - } - - .bg_\#FFF5EB { - background: #FFF5EB - } - - .min-h_48px { - min-height: 48px - } - - .py_base-tight { - padding-block: base-tight - } - - .mb_extra-tight { - margin-bottom: extra-tight - } - - .min-w_min-content { - min-width: min-content - } - - .top_2px { - top: 2px - } - - .max-w_23ch { - max-width: 23ch - } - - .bg_200\% { - background-size: 200% - } - - .font_normal { - font-weight: var(--font-weights-normal); - font-weight: normal - } - - .z_2 { - z-index: 2 - } - - .min-w_0px { - min-width: 0px - } - - .bg_brand { - background: brand - } - - .w_36px { - width: 36px - } - - .fs_6 { - font-size: 6px - } - - .pb_0px { - padding-bottom: 0px - } - - .pb_16px { - padding-bottom: 16px - } - - .min-h_40px { - min-height: 40px - } - - .after\:bottom_0::after { - bottom: 0 - } - - .after\:left_0::after { - left: 0 - } - - .bg_black { - background-color: black - } - - .after\:content_\"\"::after { - content: "" - } - - .after\:pos_absolute::after { - position: absolute - } - - .after\:bottom_0::after { - bottom: var(--spacing-0) - } - - .after\:left_0::after { - left: var(--spacing-0) - } - - .after\:h_30px::after { - height: 30px - } - - .after\:w_100\%::after { - width: 100% - } - - .after\:bg-img_linear-gradient\(rgba\(0\,0\,0\,0\)\,_rgba\(0\,0\,0\,1\)\)::after { - background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)) - } - - .bg_black { - background-color: var(--colors-black) - } - - .p_20px { - padding: 20px - } - - .gap_base { - gap: base - } - - .gap-x_extra-loose { - row-gap: extra-loose - } - - .opacity_0 { - opacity: 0 - } - - .left_12px { - left: 12px - } - - .bottom_12px { - bottom: 12px - } - - .right_12px { - right: 12px - } - - .top_12px { - top: 12px - } - - .w_30px { - width: 30px - } - - .h_30px { - height: 30px - } - - .text_ellipsis { - text-overflow: ellipsis - } - - .w_95\% { - width: 95% - } - - .p_6px_12px { - padding: 6px 12px - } - - .h_0px { - height: 0px - } - - .pb_100\% { - padding-bottom: 100% - } - - .left_0px { - left: 0px - } - - .top_0px { - top: 0px - } - - .p_8px { - padding: 8px - } - - .p_4px { - padding: 4px - } - - .leading_16px { - line-height: 16px - } - - .pb_12px { - padding-bottom: 12px - } - - .size_30px { - size: 30px - } - - .pos_bottom-center { - position: bottom-center - } - - .h_16px { - height: 16px - } - - .w_50px { - width: 50px - } - - .size_24px { - size: 24px - } - - .fs_10px { - font-size: 10px - } - - .top_4px { - top: 4px - } - - .w_72px { - width: 72px - } - - .h_14px { - height: 14px - } - - .border-b_1px_solid { - border-bottom: 1px solid - } - - .justify_right { - justify-content: right - } - - .pos_bottom-left { - position: bottom-left - } - - .shrink_1 { - flex-shrink: 1 - } - - .max-h_305px { - max-height: 305px - } - - .max-w_100vw { - max-width: 100vw - } - - .w_50\% { - width: 50% - } - - .size_36px { - size: 36px - } - - .leading_inherit { - line-height: inherit - } - - .transform_translateY\(-50\%\) { - transform: translateY(-50%) - } - - .rounded_50\% { - border-radius: 50% - } - - .fs_13px { - font-size: 13px - } - - .text_white { - color: white - } - - .bg_\#242629 { - background: #242629 - } - - .text_white { - color: var(--colors-white) - } - - .rounded_6px { - border-radius: 6px - } - - .pt_base-loose { - padding-top: base-loose - } - - .pr_base-tight { - padding-right: base-tight - } - - .leading_18px { - line-height: 18px - } - - .w_600 { - width: 600px - } - - .right_0 { - right: var(--spacing-0) - } - - .h_200px { - height: 200px - } - - .left_-72px { - left: -72px - } - - .right_0 { - right: 0 - } - - .overflow-wrap_break-word { - overflow-wrap: break-word - } - - .cursor_question { - cursor: question - } - - .ml_extra-tight { - margin-left: extra-tight - } - - .max-h_80vh { - max-height: 80vh - } - - .size_sm { - size: sm - } - - .text_inherited { - color: inherited - } - - .mx_tight { - margin-inline: tight - } - - .size_4px { - size: 4px - } - - .mt_45px { - margin-top: 45px - } - - .leading_1\.4 { - line-height: 1.4 - } - - .top_-80px { - top: -80px - } - - .mx_50px { - margin-inline: 50px - } - - .mx_40px { - margin-inline: 40px - } - - .pb_base-tight { - padding-bottom: base-tight - } - - .h_0 { - height: var(--sizes-0) - } - - .font_Fira_Code { - font-family: Fira Code - } - - .ml_auto { - margin-left: auto - } - - .mt_auto { - margin-top: auto - } - - .mb_auto { - margin-bottom: auto - } - - .h_0 { - height: 0 - } - - .vis_visible { - visibility: visible - } - - .vis_hidden { - visibility: hidden - } - - .transition_all_0\.65s_cubic-bezier\(0\.23\,_1\,_0\.32\,_1\) { - transition: all 0.65s cubic-bezier(0.23, 1, 0.32, 1) - } - - .overflow-x_auto { - overflow-x: auto - } - - .my_base-loose { - margin-block: base-loose - } - - .gap-y_8px { - column-gap: 8px - } - - .border-l_1px_solid_\#DCDDE2 { - border-left: 1px solid #DCDDE2 - } - - .p_unset { - padding: unset - } - - .h_3px { - height: 3px - } - - .items_flex-end { - align-items: flex-end - } - - .align_top { - align: top - } - - .leading_1\.3 { - line-height: 1.3 - } - - .pl_extra-tight { - padding-left: extra-tight - } - - .mt_-45px { - margin-top: -45px - } - - .p_tight { - padding: tight - } - - .white-space_nowrap { - white-space: nowrap - } - - .w_87px { - width: 87px - } - - .gap-x_tight { - row-gap: tight - } - - .wrap_wrap { - wrap: wrap - } - - .fs_12px\! { - font-size: 12px !important - } - - .my_base-tight { - margin-block: base-tight - } - - .mx_base { - margin-inline: base - } - - .top_60px { - top: 60px - } - - .right_extra-loose { - right: extra-loose - } - - .w_296px { - width: 296px - } - - .shadow_0px_8px_16px_rgba\(27\,_39\,_51\,_0\.08\)\; { - box-shadow: 0px 8px 16px rgba(27, 39, 51, 0.08); - } - - .z_2000 { - z-index: 2000 - } - - .origin_top_right { - transform-origin: top right - } - - .pointer-events_none { - pointer-events: none - } - - .pointer-events_all { - pointer-events: all - } - - .rounded_25px { - border-radius: 25px - } - - .max-w_62px { - max-width: 62px - } - - .mr_4px\! { - margin-right: 4px !important - } - - .max-w_250px { - max-width: 250px - } - - .placement_top { - placement: top - } - - .leading_24px { - line-height: 24px - } - - .pl_base { - padding-left: base - } - - .pr_base { - padding-right: base - } - - .h_46px { - height: 46px - } - - .w_55px { - width: 55px - } - - .transform_rotate\(-45deg\) { - transform: rotate(-45deg) - } - - .flex_unset { - flex-direction: unset - } - - .gap_3 { - gap: var(--spacing-3) - } - - .w_32px { - width: 32px - } - - .border-b_3px_solid { - border-bottom: 3px solid - } - - .gap_3 { - gap: 3px - } - - .mt_base-tight { - margin-top: base-tight - } - - .min-h_120px { - min-height: 120px - } - - .mt_3px { - margin-top: 3px - } - - .w_73px { - width: 73px - } - - .max-w_230px { - max-width: 230px - } - - .max-h_calc\(100vh_-_72px\) { - max-height: calc(100vh - 72px) - } - - .overflow-y_scroll { - overflow-y: scroll - } - - .size_72px { - size: 72px - } - - .grow_0 { - flex-grow: 0 - } - - .text_\#008051 { - color: #008051 - } - - .border_\#D9EDD4 { - border-color: #D9EDD4 - } - - .d_grid { - display: grid - } - - .gap-y_base-loose { - column-gap: base-loose - } - - .gap-x_loose { - row-gap: loose - } - - .shadow_0px_1px_2px_rgba\(0\,_0\,_0\,_0\.04\) { - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04) - } - - .border_\#DCDDE2 { - border-color: #DCDDE2 - } - - .d_inline-flex { - display: inline-flex - } - - .w_40px { - width: 40px - } - - .text_\#F59300 { - color: #F59300 - } - - .text_\#FFA953 { - color: #FFA953 - } - - .border_\#FFE0C2 { - border-color: #FFE0C2 - } - - .rounded_24px { - border-radius: 24px - } - - .h_24px { - height: 24px - } - - .px_tight { - padding-inline: tight - } - - .py_extra-tight { - padding-block: extra-tight - } - - .leading_150\% { - line-height: 150% - } - - .text_unset { - color: unset - } - - .max-w_544px { - max-width: 544px - } - - .min-h_70vh { - min-height: 70vh - } - - .pb_72px { - padding-bottom: 72px - } - - .justify_unset { - justify-content: unset - } - - .bg_colors\.red\.400 { - background: colors.red.400 - } - - .bg_red\.400 { - background-color: var(--colors-red-400) - } - - .bg_--colors-red-400 { - background: --colors-red-400 - } - - .text_red\.400 { - color: var(--colors-red-400) - } - - .bg_red\.400 { - background: var(--colors-red-400) - } - - .flex_row { - flex-direction: row - } - - .text_primary { - color: var(--colors-primary) - } - - .font_body { - font-family: var(--fonts-body) - } - - .h_36px { - height: 36px - } - - .py_tight { - padding-block: tight - } - - .items_start { - align-items: start - } - - .w_142px { - width: 142px - } - - .w_344px { - width: 344px - } - - .w_170px { - width: 170px - } - - .size_12px { - size: 12px - } - - .border_2px_solid { - border: 2px solid - } - - .h_64px { - height: 64px - } - - .shadow_none { - box-shadow: none - } - - .h_20px { - height: 20px - } - - .right_base { - right: base - } - - .top_20px { - top: 20px - } - - .transform_matrix\(-1\,_0\,_0\,_1\,_0\,_0\) { - transform: matrix(-1, 0, 0, 1, 0, 0) - } - - .w_20px { - width: 20px - } - - .size_20px { - size: 20px - } - - .mx_extra-tight { - margin-inline: extra-tight - } - - .rounded_2px { - border-radius: 2px - } - - .h_6px { - height: 6px - } - - .leading_1\.5rem { - line-height: 1.5rem - } - - .w_95px { - width: 95px - } - - .max-w_340px { - max-width: 340px - } - - .pr_extra-loose { - padding-right: extra-loose - } - - .min-h_168px { - min-height: 168px - } - - .self_start { - align-self: start - } - - .w_81px { - width: 81px - } - - .max-w_75\% { - max-width: 75% - } - - .pr_unset { - padding-right: unset - } - - .fs_inherit { - font-size: inherit - } - - .bg_center { - background-position: center - } - - .bg-y_-137px { - background-position-y: -137px - } - - .bg-repeat_no-repeat { - background-repeat: no-repeat - } - - .bg_cover { - background-size: cover - } - - .h_155px { - height: 155px - } - - .max-h_675px { - max-height: 675px - } - - .max-w_auto { - max-width: auto - } - - .justify_left { - justify-content: left - } - - .grow_2 { - flex-grow: 2 - } - - .max-w_574px { - max-width: 574px - } - - .rounded_18px { - border-radius: 18px - } - - .shadow_low { - box-shadow: low - } - - .mb_0 { - margin-bottom: var(--spacing-0); - margin-bottom: 0 - } - - .text_blue { - color: blue - } - - .d_inline-block { - display: inline-block - } - - .mb_tight { - margin-bottom: tight - } - - .h_40px { - height: 40px - } - - .leading_1\.8 { - line-height: 1.8 - } - - .max-w_280px { - max-width: 280px - } - - .fs_20px { - font-size: 20px - } - - .leading_28px { - line-height: 28px - } - - .px_50px { - padding-inline: 50px - } - - .text_inherit { - color: inherit - } - - .my_extra-loose { - margin-block: extra-loose - } - - .pb_unset { - padding-bottom: unset - } - - .fs_24px { - font-size: 24px - } - - .leading_36px { - line-height: 36px - } - - .align_middle { - align: middle - } - - .mx_extra-loose { - margin-inline: extra-loose - } - - .leading_20px { - line-height: 20px - } - - .self_bottom { - align-self: bottom - } - - .bottom_0 { - bottom: 0 - } - - .border-t_1px_solid_\#EFEFF2 { - border-top: 1px solid #EFEFF2 - } - - .bottom_0 { - bottom: var(--spacing-0) - } - - .mb_base-tight { - margin-bottom: base-tight - } - - .self_flex-start { - align-self: flex-start - } - - .leading_1rem { - line-height: 1rem - } - - .font_\'Inter\' { - font-family: 'Inter' - } - - .cursor_default { - cursor: default - } - - .cursor_pointer { - cursor: pointer - } - - .cursor_not-allowed { - cursor: not-allowed - } - - .opacity_0\.5 { - opacity: 0.5 - } - - .opacity_1 { - opacity: 1 - } - - .items_flex-start { - align-items: flex-start - } - - .flex-wrap_wrap { - flex-wrap: wrap - } - - .mt_base-loose { - margin-top: base-loose - } - - .leading_1\.5 { - line-height: 1.5 - } - - .font_mono { - font-family: var(--fonts-mono) - } - - .fs_16px { - font-size: 16px - } - - .fs_12px { - font-size: 12px - } - - .text_ink\.600 { - color: ink.600 - } - - .font_mono { - font-family: mono - } - - .fs_3 { - font-size: 3px - } - - .max-w_unset { - max-width: unset - } - - .mt_unset { - margin-top: unset - } - - .items_left { - align-items: left - } - - .justify_start { - justify-content: start - } - - .max-h_unset { - max-height: unset - } - - .text_center { - text-align: center - } - - .px_unset { - padding-inline: unset - } - - .font_200 { - font-weight: 200 - } - - .p_25px { - padding: 25px - } - - .text_justify { - text-align: justify - } - - .py_108px { - padding-block: 108px - } - - .mb_base-loose { - margin-bottom: base-loose - } - - .h_48px { - height: 48px - } - - .mt_extra-loose { - margin-top: extra-loose - } - - .size_32px { - size: 32px - } - - .mb_36px { - margin-bottom: 36px - } - - .border_unset { - border: unset; - border-color: unset - } - - .rounded_unset { - border-radius: unset - } - - .max-h_90vh { - max-height: 90vh - } - - .max-w_100\% { - max-width: 100% - } - - .min-w_100\% { - min-width: 100% - } - - .border_none { - border: var(--borders-none) - } - - .border_none { - border: none - } - - .h_100\% { - height: 100% - } - - .px_none { - padding-inline: none - } - - .w_1ch { - width: 1ch - } - - .h_55px { - height: 55px - } - - .mt_12px { - margin-top: 12px - } - - .border-t_1px_solid_\#DCDDE2 { - border-top: 1px solid #DCDDE2 - } - - .bottom_0px { - bottom: 0px - } - - .h_96px { - height: 96px - } - - .z_999 { - z-index: 999 - } - - .h_72px { - height: 72px - } - - .mb_8 { - margin-bottom: var(--spacing-8) - } - - .mx_base-loose { - margin-inline: base-loose - } - - .mb_8 { - margin-bottom: 8px - } - - .min-h_76px { - min-height: 76px - } - - .placement_right { - placement: right - } - - .size_16px { - size: 16px - } - - .font_400 { - font-weight: 400 - } - - .ml_2px { - margin-left: 2px - } - - .pl_tight { - padding-left: tight - } - - .pl_unset { - padding-left: unset - } - - .mb_0px\! { - margin-bottom: 0px !important - } - - .min-w_110px { - min-width: 110px - } - - .min-w_100px { - min-width: 100px - } - - .overflow_hidden { - overflow: hidden - } - - .p_extra-tight { - padding: extra-tight - } - - .pos_absolute { - position: absolute - } - - .top_40px { - top: 40px - } - - .z_9999 { - z-index: 9999 - } - - .ml_tight { - margin-left: tight - } - - .mr_extra-tight { - margin-right: extra-tight - } - - .border_1px_solid_\#DCDDE2 { - border: 1px solid #DCDDE2 - } - - .min-h_64px { - min-height: 64px - } - - .max-h_calc\(100vh_-_116px\) { - max-height: calc(100vh - 116px) - } - - .overflow-y_auto { - overflow-y: auto - } - - .pb_120px { - padding-bottom: 120px - } - - .pt_base { - padding-top: base - } - - .max-w_220px { - max-width: 220px - } - - .fs_0 { - font-size: 0 - } - - .px_base-tight { - padding-inline: base-tight - } - - .w_fit-content { - width: fit-content - } - - .mb_base { - margin-bottom: base - } - - .text-decor_underline { - text-decoration: underline - } - - .min-h_unset { - min-height: unset - } - - .p_extra-loose { - padding: extra-loose - } - - .pb_base { - padding-bottom: base - } - - .placement_bottom { - placement: bottom - } - - .size_14px { - size: 14px - } - - .ml_4px { - margin-left: 4px - } - - .fs_1 { - font-size: 1px - } - - .my_loose { - margin-block: loose - } - - .px_extra-loose { - padding-inline: extra-loose - } - - .pb_extra-loose { - padding-bottom: extra-loose - } - - .select_none { - -webkit-user-select: none; - user-select: none - } - - .flex_1 { - flex: 1 1 0% - } - - .mx_loose { - margin-inline: loose - } - - .mb_extra-loose { - margin-bottom: extra-loose - } - - .mr_tight { - margin-right: tight - } - - .d_none { - display: none - } - - .mt_tight { - margin-top: tight - } - - .mt_loose { - margin-top: loose - } - - .ml_base { - margin-left: base - } - - .overflow_visible { - overflow: visible - } - - .mr_base { - margin-right: base - } - - .word-wrap_break-word { - word-wrap: break-word - } - - .white-space_pre-line { - white-space: pre-line - } - - .bg_white { - background: var(--colors-white) - } - - .overflow-x_scroll { - overflow-x: scroll - } - - .bg_white { - background: white - } - - .fs_14px { - font-size: 14px - } - - .leading_1\.7 { - line-height: 1.7 - } - - .overflow_auto { - overflow: auto - } - - .bg_ink\.1000 { - background-color: ink.1000 - } - - .bg_transparent { - background: var(--colors-transparent) - } - - .font_600 { - font-weight: 600 - } - - .border_0 { - border: 0 - } - - .rounded_8px { - border-radius: 8px - } - - .px_base { - padding-inline: base - } - - .bg_transparent { - background: transparent - } - - .size_42px { - size: 42px - } - - .bg_100\% { - background-size: 100% - } - - .h_32px { - height: 32px - } - - .leading_22px { - line-height: 22px - } - - .mt_extra-tight { - margin-top: extra-tight - } - - .mr_base-tight { - margin-right: base-tight - } - - .mt_2px { - margin-top: 2px - } - - .p_base-loose { - padding: base-loose - } - - .flex_0_0_auto { - flex: 0 0 auto - } - - .rounded_9999px { - border-radius: 9999px - } - - .h_190px { - height: 190px - } - - .left_Stacks_Token { - left: Stacks Token - } - - .shrink_0 { - flex-shrink: 0 - } - - .d_block { - display: block - } - - .fs_2 { - font-size: 2px - } - - .leading_1\.6 { - line-height: 1.6 - } - - .break_break-all { - word-break: break-all - } - - .px_base-loose { - padding-inline: base-loose - } - - .py_extra-loose { - padding-block: extra-loose - } - - .\--thickness_1px { - --thickness: 1px - } - - .border-block-end-width_var\(--thickness\) { - border-block-end-width: var(--thickness) - } - - .py_base { - padding-block: base - } - - .text_currentColor { - color: currentColor - } - - .border_4px_solid_\#FCEEED { - border: 4px solid #FCEEED - } - - .mb_loose { - margin-bottom: loose - } - - .left_0 { - left: var(--spacing-0) - } - - .top_0 { - top: var(--spacing-0) - } - - .border_1px_solid { - border: 1px solid - } - - .shadow_high { - box-shadow: high - } - - .\[\&_\>_\*\]\:pointer-events_all > * { - pointer-events: all - } - - .justify_flex-end { - justify-content: flex-end - } - - .text_right { - text-align: right - } - - .justify_center { - justify-content: center - } - - .pos_fixed { - position: fixed - } - - .h_100vh { - height: 100vh - } - - .z_99 { - z-index: 99 - } - - .left_0 { - left: 0 - } - - .top_0 { - top: 0 - } - - .bg_rgba\(0\,0\,0\,0\.35\) { - background: rgba(0,0,0,0.35) - } - - .backdrop_blur\(10px\) { - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px) - } - - .self_flex-end { - align-self: flex-end - } - - .my_base { - margin-block: base - } - - .p_loose { - padding: loose - } - - .mt_base { - margin-top: base - } - - .font_bold { - font-weight: bold; - font-weight: var(--font-weights-bold) - } - - .break_break-word { - word-break: break-word - } - - .justify_space-between { - justify-content: space-between - } - - .pt_extra-loose { - padding-top: extra-loose - } - - .indent_-1em { - text-indent: -1em - } - - .ml_loose { - margin-left: loose - } - - .bg_white { - background-color: var(--colors-white) - } - - .min-h_260px { - min-height: 260px - } - - .py_loose { - padding-block: loose - } - - .rounded_16px { - border-radius: 16px - } - - .bg_white { - background-color: white - } - - .border_4px_solid { - border: 4px solid - } - - .pb_8px { - padding-bottom: 8px - } - - .rounded_20px { - border-radius: 20px - } - - .grow_1 { - flex-grow: 1 - } - - .rounded_10px { - border-radius: 10px - } - - .items_center { - align-items: center - } - - .bg_\#FCEEED { - background: #FCEEED - } - - .p_base { - padding: base - } - - .rounded_12px { - border-radius: 12px - } - - .fs_4 { - font-size: 4px - } - - .d_inline { - display: inline - } - - .font_500 { - font-weight: 500 - } - - .d_flex { - display: flex - } - - .flex_column { - flex-direction: column - } - - .gap_10px { - gap: 10px - } - - .pb_loose { - padding-bottom: loose - } - - .px_loose { - padding-inline: loose - } - - .text_left { - text-align: left - } - - .w_100\% { - width: 100% - } - - .h_600px { - height: 600px - } - - .max-w_8xl { - max-width: var(--sizes-8xl) - } - - .px_4 { - padding-inline: var(--spacing-4) - } - - .pos_relative { - position: relative - } - - .max-w_8xl { - max-width: 8xl - } - - .mx_auto { - margin-inline: auto - } - - .px_4 { - padding-inline: 4 - } - - .focusWithin\:opacity_inherit:focus-within { - opacity: inherit - } - - .focus\:clip-path_none:is(:focus, [data-focus]) { - clip-path: none; - -webkit-clip-path: none - } - - .focus\:ring_-4px:is(:focus, [data-focus]) { - outline-offset: -4px - } - - .focus\:ring_1px_solid_white:is(:focus, [data-focus]) { - outline: 1px solid white - } - - .focus\:ring_0:is(:focus, [data-focus]) { - outline: 0 - } - - .focus\:text-decor_underline:is(:focus, [data-focus]) { - text-decoration: underline - } - - .focus\:border_3px_solid:is(:focus, [data-focus]) { - border: 3px solid - } - - .focus\:border_\#5546FF:is(:focus, [data-focus]) { - border-color: #5546FF - } - - .focus\:shadow_0px_8px_16px_rgba\(0\,_0\,_0\,_0\.08\):is(:focus, [data-focus]) { - box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08) - } - - .focus\:m_-2px:is(:focus, [data-focus]) { - margin: -2px - } - - .focus\:border_2px_solid_\#5546FF:is(:focus, [data-focus]) { - border: 2px solid #5546FF - } - - .focus\:bg_transparent:is(:focus, [data-focus]) { - background: var(--colors-transparent) - } - - .focus\:bg_transparent:is(:focus, [data-focus]) { - background: transparent - } - - .focus\:shadow_none:is(:focus, [data-focus]) { - box-shadow: none - } - - .focus\:border_none:is(:focus, [data-focus]) { - border: var(--borders-none) - } - - .focus\:border_none:is(:focus, [data-focus]) { - border: none - } - - .\ \:has\(\:focus\)\:\:before\:border_2px_solid_\#bfc6ff { - border: 2px solid #bfc6ff - } - - .hover\:bg_\#F9F9FA:is(:hover, [data-hover]) { - background: #F9F9FA - } - - .hover\:bg_\#EEF2FB:is(:hover, [data-hover]) { - background: #EEF2FB - } - - .hover\:text-decor_underline:is(:hover, [data-hover]) { - text-decoration: underline - } - - .hover\:cursor_unset:is(:hover, [data-hover]) { - cursor: unset - } - - .hover\:shadow_0px_8px_16px_rgba\(0\,_0\,_0\,_0\.08\):is(:hover, [data-hover]) { - box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08) - } - - .hover\:bg_transparent:is(:hover, [data-hover]) { - background: var(--colors-transparent) - } - - .hover\:bg_transparent:is(:hover, [data-hover]) { - background: transparent - } - - .hover\:shadow_none:is(:hover, [data-hover]) { - box-shadow: none - } - - .hover\:text-decor_none:is(:hover, [data-hover]) { - text-decoration: none - } - - .hover\:bg_none:is(:hover, [data-hover]) { - background: none - } - - .hover\:rounded_8px:is(:hover, [data-hover]) { - border-radius: 8px - } - - .hover\:cursor_pointer:is(:hover, [data-hover]) { - cursor: pointer - } - - @media screen and (min-width: 640px) { - .sm\:rounded-bl_16px { - border-bottom-left-radius: 16px - } - } - - @media screen and (min-width: 640px) { - .sm\:rounded-br_16px { - border-bottom-right-radius: 16px - } - } - - @media screen and (min-width: 640px) { - .sm\:max-h_calc\(100vh_-_96px\) { - max-height: calc(100vh - 96px) - } - - .sm\:fs_48px { - font-size: 48px - } - - .sm\:max-w_100\% { - max-width: 100% - } - - .sm\:w_115px { - width: 115px - } - - .sm\:top_0 { - top: var(--spacing-0) - } - - .sm\:mr_base { - margin-right: base - } - - .sm\:flex_row { - flex-direction: row - } - - .sm\:top_0 { - top: 0 - } - } - - @media screen and (min-width: 640px) { - .sm\:p_extra-loose { - padding: extra-loose - } - - .sm\:ml_extra-tight { - margin-left: extra-tight - } - - .sm\:border_unset { - border: unset - } - - .sm\:rounded_unset { - border-radius: unset - } - - .sm\:pl_unset { - padding-left: unset - } - - .sm\:py_unset { - padding-block: unset - } - - .sm\:h_100px { - height: 100px - } - - .sm\:w_132px { - width: 132px - } - - .sm\:items_unset { - align-items: unset - } - - .sm\:gap_5 { - gap: var(--spacing-5) - } - - .sm\:fs_2 { - font-size: 2px - } - - .sm\:fs_4 { - font-size: 4px - } - - .sm\:justify_center { - justify-content: center - } - - .sm\:gap_5 { - gap: 5px - } - } - - @media screen and (min-width: 640px) { - .sm\:pr_loose { - padding-right: loose - } - - .sm\:w_86px { - width: 86px - } - - .sm\:pr_40px { - padding-right: 40px - } - - .sm\:mt_48px { - margin-top: 48px - } - } - - @media screen and (min-width: 640px) { - .sm\:fs_32px { - font-size: 32px - } - } - - @media screen and (min-width: 640px) { - .sm\:leading_125\% { - line-height: 125% - } - - .sm\:min-h_90vh { - min-height: 90vh - } - } - - @media screen and (min-width: 640px) { - .sm\:d_block { - display: block - } - - .sm\:w_193px { - width: 193px - } - } - - @media screen and (min-width: 640px) { - .sm\:items_start { - align-items: start - } - } - - @media screen and (min-width: 640px) { - .sm\:justify_space-between { - justify-content: space-between - } - } - - @media screen and (min-width: 640px) { - .sm\:w_183px { - width: 183px - } - - .sm\:w_446px { - width: 446px - } - - .sm\:mb_unset { - margin-bottom: unset - } - - .sm\:w_117px { - width: 117px - } - - .sm\:self_center { - align-self: center - } - - .sm\:w_101px { - width: 101px - } - - .sm\:max-w_85\% { - max-width: 85% - } - } - - @media screen and (min-width: 640px) { - .sm\:max-w_90\% { - max-width: 90% - } - - .sm\:pr_80px { - padding-right: 80px - } - - .sm\:bg-y_-187px { - background-position-y: -187px - } - } - - @media screen and (min-width: 640px) { - .sm\:bg_80\% { - background-size: 80% - } - - .sm\:h_220px { - height: 220px - } - } - - @media screen and (min-width: 640px) { - .sm\:max-w_auto { - max-width: auto - } - } - - @media screen and (min-width: 640px) { - .sm\:flex_column { - flex-direction: column - } - } - - @media screen and (min-width: 640px) { - .sm\:justify_left { - justify-content: left - } - } - - @media screen and (min-width: 640px) { - .sm\:mt_unset { - margin-top: unset - } - - .sm\:mt_base-loose { - margin-top: base-loose - } - } - - @media screen and (min-width: 640px) { - .sm\:px_70px { - padding-inline: 70px - } - - .sm\:mt_base { - margin-top: base - } - - .sm\:px_base { - padding-inline: base - } - - .sm\:pb_base { - padding-bottom: base - } - - .sm\:max-w_unset { - max-width: unset - } - - .sm\:mb_loose { - margin-bottom: loose - } - } - - @media screen and (min-width: 640px) { - .sm\:mt_loose { - margin-top: loose - } - - .sm\:items_center { - align-items: center - } - - .sm\:max-h_85vh { - max-height: 85vh - } - - .sm\:px_loose { - padding-inline: loose - } - - .sm\:mt_extra-loose { - margin-top: extra-loose - } - } - - @media screen and (min-width: 640px) { - .sm\:border_1px_solid { - border: 1px solid - } - - .sm\:border_\#DCDDE2 { - border-color: #DCDDE2 - } - - .sm\:rounded_16px { - border-radius: 16px - } - - .sm\:h_116px { - height: 116px - } - - .sm\:mx_extra-loose { - margin-inline: extra-loose - } - - .sm\:max-h_calc\(85vh_-_116px\) { - max-height: calc(85vh - 116px) - } - - .sm\:pb_48px { - padding-bottom: 48px - } - - .sm\:pt_48px { - padding-top: 48px - } - - .sm\:min-h_630px { - min-height: 630px - } - - .sm\:px_unset { - padding-inline: unset - } - - .sm\:fs_7 { - font-size: 7px - } - - .sm\:pb_unset { - padding-bottom: unset - } - - .sm\:px_base-loose { - padding-inline: base-loose - } - - .sm\:text_center { - text-align: center - } - } - - @media screen and (min-width: 768px) { - .md\:justify_center { - justify-content: center - } - } - - @media screen and (min-width: 768px) { - .md\:rounded-bl_16px { - border-bottom-left-radius: 16px - } - } - - @media screen and (min-width: 768px) { - .md\:rounded-br_16px { - border-bottom-right-radius: 16px - } - } - - @media screen and (min-width: 768px) { - .md\:top_50\% { - top: 50% - } - } - - @media screen and (min-width: 768px) { - .md\:gap_unset { - gap: unset - } - } - - @media screen and (min-width: 768px) { - .md\:px_48px { - padding-inline: 48px - } - } - - @media screen and (min-width: 768px) { - .md\:fs_48px { - font-size: 48px - } - } - - @media screen and (min-width: 768px) { - .md\:px_unset { - padding-inline: unset - } - } - - @media screen and (min-width: 768px) { - .md\:px_base-loose { - padding-inline: base-loose - } - } - - @media screen and (min-width: 768px) { - .md\:items_center { - align-items: center - } - } - - @media screen and (min-width: 768px) { - .md\:flex_unset { - flex-direction: unset - } - - .md\:mt_unset { - margin-top: unset - } - } - - @media screen and (min-width: 768px) { - .md\:max-w_90\% { - max-width: 90% - } - - .md\:mt_loose { - margin-top: loose - } - } - - @media screen and (min-width: 768px) { - .md\:bg-y_center { - background-position-y: center - } - } - - @media screen and (min-width: 768px) { - .md\:h_675px { - height: 675px - } - } - - @media screen and (min-width: 768px) { - .md\:max-w_518px { - max-width: 518px - } - } - - @media screen and (min-width: 768px) { - .md\:flex_row-reverse { - flex-direction: row-reverse - } - } - - @media screen and (min-width: 768px) { - .md\:justify_right { - justify-content: right - } - } - - @media screen and (min-width: 768px) { - .md\:mt_extra-loose { - margin-top: extra-loose - } - } - - @media screen and (min-width: 768px) { - .md\:mb_48px { - margin-bottom: 48px - } - } - - @media screen and (min-width: 768px) { - .md\:mt_100px { - margin-top: 100px - } - } - - @media screen and (min-width: 768px) { - .md\:px_6 { - padding-inline: var(--spacing-6) - } - } - - @media screen and (min-width: 768px) { - .md\:px_6 { - padding-inline: 6 - } - } - - @media screen and (min-width: 1024px) { - .lg\:rounded-bl_16px { - border-bottom-left-radius: 16px - } - } - - @media screen and (min-width: 1024px) { - .lg\:rounded-br_16px { - border-bottom-right-radius: 16px - } - - .lg\:mt_unset { - margin-top: unset - } - } - - @media screen and (min-width: 1024px) { - .lg\:px_unset { - padding-inline: unset - } - } - - @media screen and (min-width: 1024px) { - .lg\:max-w_100\% { - max-width: 100% - } - } - - @media screen and (min-width: 1024px) { - .lg\:px_8 { - padding-inline: var(--spacing-8) - } - } - - @media screen and (min-width: 1024px) { - .lg\:px_8 { - padding-inline: 8 - } - } -} \ No newline at end of file diff --git a/styled-system/tokens/index.css b/styled-system/tokens/index.css deleted file mode 100644 index b1fd381a..00000000 --- a/styled-system/tokens/index.css +++ /dev/null @@ -1,18 +0,0 @@ -@layer tokens { - :where(:root, :host) { - --colors-primary: red; - --colors-secondary: #EE0F0F; - --fonts-body: system-ui, sans-serif; - --breakpoints-sm: 640px; - --breakpoints-md: 768px; - --breakpoints-lg: 1024px; - --breakpoints-xl: 1280px; - --breakpoints-2xl: 1536px; - --sizes-breakpoint-sm: 640px; - --sizes-breakpoint-md: 768px; - --sizes-breakpoint-lg: 1024px; - --sizes-breakpoint-xl: 1280px; - --sizes-breakpoint-2xl: 1536px -} - } - \ No newline at end of file diff --git a/styled-system/tokens/index.d.ts b/styled-system/tokens/index.d.ts deleted file mode 100644 index 38ba80dd..00000000 --- a/styled-system/tokens/index.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable */ -import type { Token } from './tokens' - -export declare const token: { - (path: Token, fallback?: string): string - var: (path: Token, fallback?: string) => string -} - -export * from './tokens' \ No newline at end of file diff --git a/styled-system/tokens/index.js b/styled-system/tokens/index.js deleted file mode 100644 index 2928de2a..00000000 --- a/styled-system/tokens/index.js +++ /dev/null @@ -1,64 +0,0 @@ -const tokens = { - "colors.primary": { - "value": "red", - "variable": "var(--colors-primary)" - }, - "colors.secondary": { - "value": "#EE0F0F", - "variable": "var(--colors-secondary)" - }, - "fonts.body": { - "value": "system-ui, sans-serif", - "variable": "var(--fonts-body)" - }, - "breakpoints.sm": { - "value": "640px", - "variable": "var(--breakpoints-sm)" - }, - "breakpoints.md": { - "value": "768px", - "variable": "var(--breakpoints-md)" - }, - "breakpoints.lg": { - "value": "1024px", - "variable": "var(--breakpoints-lg)" - }, - "breakpoints.xl": { - "value": "1280px", - "variable": "var(--breakpoints-xl)" - }, - "breakpoints.2xl": { - "value": "1536px", - "variable": "var(--breakpoints-2xl)" - }, - "sizes.breakpoint-sm": { - "value": "640px", - "variable": "var(--sizes-breakpoint-sm)" - }, - "sizes.breakpoint-md": { - "value": "768px", - "variable": "var(--sizes-breakpoint-md)" - }, - "sizes.breakpoint-lg": { - "value": "1024px", - "variable": "var(--sizes-breakpoint-lg)" - }, - "sizes.breakpoint-xl": { - "value": "1280px", - "variable": "var(--sizes-breakpoint-xl)" - }, - "sizes.breakpoint-2xl": { - "value": "1536px", - "variable": "var(--sizes-breakpoint-2xl)" - } -} - -export function token(path, fallback) { - return tokens[path]?.value || fallback -} - -function tokenVar(path, fallback) { - return tokens[path]?.variable || fallback -} - -token.var = tokenVar \ No newline at end of file diff --git a/styled-system/tokens/index.mjs b/styled-system/tokens/index.mjs deleted file mode 100644 index 3c665e7f..00000000 --- a/styled-system/tokens/index.mjs +++ /dev/null @@ -1,64 +0,0 @@ -const tokens = { - "colors.primary": { - "value": "#0FEE0F", - "variable": "var(--colors-primary)" - }, - "colors.secondary": { - "value": "#EE0F0F", - "variable": "var(--colors-secondary)" - }, - "fonts.body": { - "value": "system-ui, sans-serif", - "variable": "var(--fonts-body)" - }, - "breakpoints.sm": { - "value": "640px", - "variable": "var(--breakpoints-sm)" - }, - "breakpoints.md": { - "value": "768px", - "variable": "var(--breakpoints-md)" - }, - "breakpoints.lg": { - "value": "1024px", - "variable": "var(--breakpoints-lg)" - }, - "breakpoints.xl": { - "value": "1280px", - "variable": "var(--breakpoints-xl)" - }, - "breakpoints.2xl": { - "value": "1536px", - "variable": "var(--breakpoints-2xl)" - }, - "sizes.breakpoint-sm": { - "value": "640px", - "variable": "var(--sizes-breakpoint-sm)" - }, - "sizes.breakpoint-md": { - "value": "768px", - "variable": "var(--sizes-breakpoint-md)" - }, - "sizes.breakpoint-lg": { - "value": "1024px", - "variable": "var(--sizes-breakpoint-lg)" - }, - "sizes.breakpoint-xl": { - "value": "1280px", - "variable": "var(--sizes-breakpoint-xl)" - }, - "sizes.breakpoint-2xl": { - "value": "1536px", - "variable": "var(--sizes-breakpoint-2xl)" - } -} - -export function token(path, fallback) { - return tokens[path]?.value || fallback -} - -function tokenVar(path, fallback) { - return tokens[path]?.variable || fallback -} - -token.var = tokenVar \ No newline at end of file diff --git a/styled-system/tokens/keyframes.css b/styled-system/tokens/keyframes.css deleted file mode 100644 index 554e3c17..00000000 --- a/styled-system/tokens/keyframes.css +++ /dev/null @@ -1,28 +0,0 @@ -@layer tokens { - @keyframes spin { - to { - transform: rotate(360deg) - } - } - @keyframes ping { - 75%, 100% { - transform: scale(2); - opacity: 0 - } - } - @keyframes pulse { - 50% { - opacity: .5 - } - } - @keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - animation-timing-function: cubic-bezier(0.8,0,1,1) - } - 50% { - transform: none; - animation-timing-function: cubic-bezier(0,0,0.2,1) - } - } -} \ No newline at end of file diff --git a/styled-system/tokens/tokens.d.ts b/styled-system/tokens/tokens.d.ts deleted file mode 100644 index b3d2f7bd..00000000 --- a/styled-system/tokens/tokens.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-disable */ -export type Token = "colors.primary" | "colors.secondary" | "fonts.body" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" - -export type ColorToken = "primary" | "secondary" - -export type FontToken = "body" - -export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl" - -export type SizeToken = "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl" - -export type Tokens = { - colors: ColorToken - fonts: FontToken - breakpoints: BreakpointToken - sizes: SizeToken -} & { [token: string]: never } - -export type TokenCategory = "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets" \ No newline at end of file diff --git a/styled-system/types/composition.d.ts b/styled-system/types/composition.d.ts deleted file mode 100644 index cb841528..00000000 --- a/styled-system/types/composition.d.ts +++ /dev/null @@ -1,111 +0,0 @@ -/* eslint-disable */ -import type { CompositionStyleObject } from './system-types' - -type Recursive = { - [key: string]: Recursive | T -} - -export type Token = { - value: Value - description?: string -} - -/* ----------------------------------------------------------------------------- - * Text styles - * -----------------------------------------------------------------------------*/ - -type TextStyleProperty = - | 'fontSize' - | 'fontSizeAdjust' - | 'fontVariationSettings' - | 'fontVariantPosition' - | 'fontVariantCaps' - | 'fontVariantNumeric' - | 'fontVariantAlternates' - | 'fontVariantLigatures' - | 'fontFamily' - | 'fontWeight' - | 'fontSynthesis' - | 'fontStyle' - | 'fontVariant' - | 'lineHeight' - | 'letterSpacing' - | 'textDecoration' - | 'textTransform' - | 'textIndent' - | 'textDecorationColor' - | 'textDecorationLine' - | 'textDecorationStyle' - | 'textEmphasisColor' - | 'textEmphasisPosition' - | 'textEmphasisStyle' - | 'hyphenateCharacter' - | 'textOrientation' - | 'textOverflow' - | 'textRendering' - -export type TextStyle = CompositionStyleObject - -export type TextStyles = Recursive> - -/* ----------------------------------------------------------------------------- - * Layer styles - * -----------------------------------------------------------------------------*/ - -type Placement = - | 'Top' - | 'Right' - | 'Bottom' - | 'Left' - | 'Inline' - | 'Block' - | 'InlineStart' - | 'InlineEnd' - | 'BlockStart' - | 'BlockEnd' - -type Radius = - | `Top${'Right' | 'Left'}` - | `Bottom${'Right' | 'Left'}` - | `Start${'Start' | 'End'}` - | `End${'Start' | 'End'}` - -type LayerStyleProperty = - | 'background' - | 'backgroundColor' - | 'backgroundImage' - | 'borderRadius' - | 'border' - | 'borderWidth' - | 'borderColor' - | 'borderStyle' - | 'boxShadow' - | 'filter' - | 'backdropFilter' - | 'transform' - | 'color' - | 'opacity' - | 'backgroundBlendMode' - | 'backgroundAttachment' - | 'backgroundClip' - | 'backgroundOrigin' - | 'backgroundPosition' - | 'backgroundRepeat' - | 'backgroundSize' - | `border${Placement}` - | `border${Placement}Width` - | 'borderRadius' - | `border${Radius}Radius` - | `border${Placement}Color` - | `border${Placement}Style` - | 'padding' - | `padding${Placement}` - -export type LayerStyle = CompositionStyleObject - -export type LayerStyles = Recursive> - -export type CompositionStyles = { - textStyles: TextStyles - layerStyles: LayerStyles -} diff --git a/styled-system/types/conditions.d.ts b/styled-system/types/conditions.d.ts deleted file mode 100644 index 90cc92a8..00000000 --- a/styled-system/types/conditions.d.ts +++ /dev/null @@ -1,136 +0,0 @@ -/* eslint-disable */ -import type { AnySelector, Selectors } from './selectors' - -export type Conditions = { - "_hover": string - "_focus": string - "_focusWithin": string - "_focusVisible": string - "_disabled": string - "_active": string - "_visited": string - "_target": string - "_readOnly": string - "_readWrite": string - "_empty": string - "_checked": string - "_enabled": string - "_expanded": string - "_highlighted": string - "_before": string - "_after": string - "_firstLetter": string - "_firstLine": string - "_marker": string - "_selection": string - "_file": string - "_backdrop": string - "_first": string - "_last": string - "_only": string - "_even": string - "_odd": string - "_firstOfType": string - "_lastOfType": string - "_onlyOfType": string - "_peerFocus": string - "_peerHover": string - "_peerActive": string - "_peerFocusWithin": string - "_peerFocusVisible": string - "_peerDisabled": string - "_peerChecked": string - "_peerInvalid": string - "_peerExpanded": string - "_peerPlaceholderShown": string - "_groupFocus": string - "_groupHover": string - "_groupActive": string - "_groupFocusWithin": string - "_groupFocusVisible": string - "_groupDisabled": string - "_groupChecked": string - "_groupExpanded": string - "_groupInvalid": string - "_indeterminate": string - "_required": string - "_valid": string - "_invalid": string - "_autofill": string - "_inRange": string - "_outOfRange": string - "_placeholder": string - "_placeholderShown": string - "_pressed": string - "_selected": string - "_default": string - "_optional": string - "_open": string - "_fullscreen": string - "_loading": string - "_currentPage": string - "_currentStep": string - "_motionReduce": string - "_motionSafe": string - "_print": string - "_landscape": string - "_portrait": string - "_dark": string - "_light": string - "_osDark": string - "_osLight": string - "_highContrast": string - "_lessContrast": string - "_moreContrast": string - "_ltr": string - "_rtl": string - "_scrollbar": string - "_scrollbarThumb": string - "_scrollbarTrack": string - "_horizontal": string - "_vertical": string - "sm": string - "smOnly": string - "smDown": string - "md": string - "mdOnly": string - "mdDown": string - "lg": string - "lgOnly": string - "lgDown": string - "xl": string - "xlOnly": string - "xlDown": string - "2xl": string - "2xlOnly": string - "smToMd": string - "smToLg": string - "smToXl": string - "smTo2xl": string - "mdToLg": string - "mdToXl": string - "mdTo2xl": string - "lgToXl": string - "lgTo2xl": string - "xlTo2xl": string - "base": string -} - -export type Condition = keyof Conditions - -export type Conditional = - | V - | Array - | { - [K in keyof Conditions]?: Conditional - } - -export type ConditionalValue = Conditional - -export type Nested

= P & { - [K in Selectors]?: Nested

-} & { - [K in AnySelector]?: Nested

-} & { - [K in keyof Conditions]?: Nested

-} diff --git a/styled-system/types/csstype.d.ts b/styled-system/types/csstype.d.ts deleted file mode 100644 index 11f95c0b..00000000 --- a/styled-system/types/csstype.d.ts +++ /dev/null @@ -1,20749 +0,0 @@ -/* eslint-disable */ -export {}; - -export type PropertyValue = TValue extends Array - ? Array - : TValue extends infer TUnpacked & {} - ? TUnpacked - : TValue; - -export type Fallback = { [P in keyof T]: T[P] | NonNullable[] }; - -export interface StandardLonghandProperties { - /** - * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements. - * - * **Syntax**: `auto | ` - * - * **Initial value**: `auto` - * - * | Chrome | Firefox | Safari | Edge | IE | - * | :----: | :-----: | :------: | :--: | :-: | - * | **93** | **92** | **15.4** | n/a | No | - * - * @see https://developer.mozilla.org/docs/Web/CSS/accent-color - */ - accentColor?: Property.AccentColor | undefined; - /** - * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. - * - * **Syntax**: `normal | | | ? ` - * - * **Initial value**: `normal` - * - * | Chrome | Firefox | Safari | Edge | IE | - * | :------: | :-----: | :-----: | :----: | :----: | - * | **29** | **28** | **9** | **12** | **11** | - * | 21 _-x-_ | | 7 _-x-_ | | | - * - * @see https://developer.mozilla.org/docs/Web/CSS/align-content - */ - alignContent?: Property.AlignContent | undefined; - /** - * The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. - * - * **Syntax**: `normal | stretch | | [ ? ]` - * - * **Initial value**: `normal` - * - * | Chrome | Firefox | Safari | Edge | IE | - * | :------: | :-----: | :-----: | :----: | :----: | - * | **29** | **20** | **9** | **12** | **11** | - * | 21 _-x-_ | | 7 _-x-_ | | | - * - * @see https://developer.mozilla.org/docs/Web/CSS/align-items - */ - alignItems?: Property.AlignItems | undefined; - /** - * The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. - * - * **Syntax**: `auto | normal | stretch | | ? ` - * - * **Initial value**: `auto` - * - * | Chrome | Firefox | Safari | Edge | IE | - * | :------: | :-----: | :-----: | :----: | :----: | - * | **29** | **20** | **9** | **12** | **10** | - * | 21 _-x-_ | | 7 _-x-_ | | | - * - * @see https://developer.mozilla.org/docs/Web/CSS/align-self - */ - alignSelf?: Property.AlignSelf | undefined; - /** - * The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis. - * - * **Syntax**: `[ normal | | | ? ]#` - * - * **Initial value**: `normal` - * - * | Chrome | Firefox | Safari | Edge | IE | - * | :----: | :-----: | :----: | :--: | :-: | - * | No | n/a | No | n/a | No | - * - * @see https://developer.mozilla.org/docs/Web/CSS/align-tracks - */ - alignTracks?: Property.AlignTracks | undefined; - /** - * The **`animation-composition`** CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously. - * - * **Syntax**: `#` - * - * **Initial value**: `replace` - * - * | Chrome | Firefox | Safari | Edge | IE | - * | :-----: | :-----: | :----: | :--: | :-: | - * | **112** | n/a | **16** | n/a | No | - * - * @see https://developer.mozilla.org/docs/Web/CSS/animation-composition - */ - animationComposition?: Property.AnimationComposition | undefined; - /** - * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. - * - * **Syntax**: `