@coinbase/cds-web 0.0.0 → 8.13.1

package/esm/controls/__figma__/RadioGroup.figma.js

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { figma } from '@figma/code-connect';
+import { ControlGroup } from '../ControlGroup';
+import { Radio } from '../Radio';
+import { RadioGroup } from '../RadioGroup';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(RadioGroup, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=355-14414&m=dev', {
+  imports: ["import { ControlGroup } from '@coinbase/cds-web/controls/ControlGroup';", "import { Radio } from '@coinbase/cds-web/controls/Radio';"],
+  props: {
+    options: figma.enum('quantity', {
+      '1': [{
+        value: '1',
+        children: 'Label'
+      }],
+      '2': [{
+        value: '2',
+        children: 'Label'
+      }],
+      '3': [{
+        value: '3',
+        children: 'Label'
+      }],
+      '4': [{
+        value: '4',
+        children: 'Label'
+      }],
+      '5': [{
+        value: '5',
+        children: 'Label'
+      }]
+    })
+  },
+  example: function Example(_ref) {
+    let {
+      options
+    } = _ref;
+    const [value, setValue] = useState('1');
+    const onChange = e => setValue(e.target.value);
+    return /*#__PURE__*/_jsx(ControlGroup, {
+      ControlComponent: Radio,
+      onChange: onChange,
+      options: options,
+      role: "radiogroup",
+      value: value
+    });
+  }
+});

package/esm/controls/__figma__/SearchInput.figma.js

@@ -0,0 +1,44 @@
+const _excluded = ["text"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { figma } from '@figma/code-connect';
+import { SearchInput } from '../SearchInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SearchInput, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=67-767&m=dev', {
+  imports: ["import { SearchInput } from '@coinbase/cds-web/controls/SearchInput';"],
+  props: {
+    // state: figma.enum('state', {
+    //   active: 'active',
+    //   focus: 'focus',
+    //   typing: 'typing',
+    // }),
+    compact: figma.boolean('compact'),
+    disabled: figma.boolean('disabled'),
+    text: figma.nestedProps('string.search input', {
+      placeholder: figma.enum('Ready-made', {
+        Custom: figma.string('string'),
+        'Retail search': figma.textContent('search-input-label'),
+        'Retail send': figma.textContent('search-input-label'),
+        'Web3 search': figma.textContent('search-input-label'),
+        'Wallet search': figma.textContent('search-input-label'),
+        'Wallet send': figma.textContent('search-input-label')
+      })
+    })
+  },
+  example: _ref => {
+    let {
+        text
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(SearchInput, _objectSpread({
+      onChangeText: () => {},
+      placeholder: text.placeholder,
+      value: ""
+    }, props));
+  }
+});

package/esm/controls/__figma__/Select.figma.js

@@ -0,0 +1,47 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { figma } from '@figma/code-connect';
+import { Select } from '../Select';
+import { SelectOption } from '../SelectOption';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Select, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=247-13005&m=dev', {
+  imports: ["import { Select } from '@coinbase/cds-web/controls';", "import { SelectOption } from '@coinbase/cds-web/controls';"],
+  props: {
+    startNode: figma.boolean('show start', {
+      true: figma.instance('🔄 start'),
+      false: undefined
+    }),
+    label: figma.boolean('show label', {
+      true: 'Label',
+      false: undefined
+    }),
+    helperText: figma.boolean('show helper text', {
+      true: 'Assistive Message',
+      false: undefined
+    }),
+    variant: figma.enum('state', {
+      positive: 'positive',
+      negative: 'negative'
+    }),
+    placeholder: figma.string('inputText'),
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    value: figma.enum('state', {
+      selected: 'Option 1'
+    })
+  },
+  example: function () {
+    for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
+      props[_key] = arguments[_key];
+    }
+    return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({}, props), {}, {
+      children: /*#__PURE__*/_jsx(SelectOption, {
+        title: "Option 1",
+        value: "Option 1"
+      }, "Option 1")
+    }));
+  }
+});

package/esm/controls/__figma__/SelectOption.figma.js

@@ -0,0 +1,38 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { figma } from '@figma/code-connect';
+import { SelectOption } from '../SelectOption';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SelectOption, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=244-11050&m=dev', {
+  imports: ["import { SelectOption } from '@coinbase/cds-web/controls';"],
+  props: {
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    media: figma.boolean('show media', {
+      true: figma.instance('media'),
+      false: undefined
+    }),
+    title: figma.boolean('show title', {
+      true: figma.string('title string'),
+      false: undefined
+    }),
+    description: figma.boolean('show description', {
+      true: figma.string('description string'),
+      false: undefined
+    }),
+    detail: figma.boolean('show detail', {
+      true: 'Detail',
+      false: undefined
+    }),
+    accessory: figma.boolean('show accessory', {
+      true: figma.instance('accessory'),
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(SelectOption, _objectSpread({
+    value: ""
+  }, props))
+});

package/esm/controls/__figma__/Switch.figma.js

@@ -0,0 +1,20 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { figma } from '@figma/code-connect';
+import { Switch } from '../Switch';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Switch, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=155%3A9924', {
+  imports: ["import { Switch } from '@coinbase/cds-web/controls/Switch';"],
+  props: {
+    children: figma.boolean('show label', {
+      true: figma.string('↳ label'),
+      false: undefined
+    }),
+    checked: figma.boolean('checked'),
+    disabled: figma.boolean('disabled')
+  },
+  example: props => /*#__PURE__*/_jsx(Switch, _objectSpread({}, props))
+});

package/esm/controls/__figma__/TextInput.figma.js

@@ -0,0 +1,130 @@
+const _excluded = ["placeholder"],
+  _excluded2 = ["placeholder", "endIcon"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { figma } from '@figma/code-connect';
+import { HStack } from '../../layout';
+import { Link } from '../../typography';
+import { TextInput } from '../TextInput';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(TextInput, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=252%3A16679', {
+  imports: ["import { TextInput } from '@coinbase/cds-web/controls/TextInput';"],
+  props: {
+    align: figma.boolean('right align text', {
+      true: 'end',
+      false: undefined
+    }),
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    label: figma.boolean('show label', {
+      true: figma.string('↳ label string'),
+      false: undefined
+    }),
+    labelVariant: figma.enum('label inside', {
+      inside: 'inside',
+      outside: 'outside'
+    }),
+    start: figma.boolean('show start', {
+      true: figma.instance('↳ start icon'),
+      false: undefined
+    }),
+    end: figma.boolean('show end', {
+      true: figma.boolean('↳ show end icon', {
+        true: figma.instance('↳ end icon'),
+        false: undefined
+      }),
+      false: undefined
+    }),
+    helperText: figma.boolean('show helper text', {
+      true: 'Assistive message',
+      false: undefined
+    }),
+    placeholder: figma.nestedProps('string.text input', {
+      text: figma.enum('Ready-made', {
+        Custom: figma.string('string'),
+        Email: figma.textContent('text-input-label'),
+        Password: figma.textContent('text-input-label'),
+        'Legal name': figma.textContent('text-input-label')
+      })
+    }),
+    variant: figma.enum('state', {
+      positive: 'positive',
+      negative: 'negative'
+    })
+  },
+  example: _ref => {
+    let {
+        placeholder
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(TextInput, _objectSpread({
+      placeholder: placeholder.text
+    }, props));
+  }
+});
+figma.connect(TextInput, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=252%3A16679', {
+  imports: ["import { TextInput } from '@coinbase/cds-web/controls/TextInput';"],
+  variant: {
+    'show end': true,
+    '↳ show suffix': true
+  },
+  props: {
+    align: figma.boolean('right align text', {
+      true: 'end',
+      false: undefined
+    }),
+    disabled: figma.boolean('disabled'),
+    compact: figma.boolean('compact'),
+    label: figma.boolean('show label', {
+      true: figma.string('↳ label string'),
+      false: undefined
+    }),
+    labelVariant: figma.boolean('label inside', {
+      true: 'inside',
+      false: 'outside'
+    }),
+    start: figma.boolean('show start', {
+      true: figma.instance('↳ start icon'),
+      false: undefined
+    }),
+    endIcon: figma.instance('↳ end icon'),
+    helperText: figma.boolean('show helper text', {
+      true: 'Assistive message',
+      false: undefined
+    }),
+    placeholder: figma.nestedProps('string.text input', {
+      text: figma.enum('Ready-made', {
+        Custom: figma.string('string'),
+        Email: figma.textContent('text-input-label'),
+        Password: figma.textContent('text-input-label'),
+        'Legal name': figma.textContent('text-input-label')
+      })
+    }),
+    variant: figma.enum('state', {
+      positive: 'positive',
+      negative: 'negative'
+    })
+  },
+  example: _ref2 => {
+    let {
+        placeholder,
+        endIcon
+      } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/_jsx(TextInput, _objectSpread({
+      end: /*#__PURE__*/_jsxs(HStack, {
+        children: [/*#__PURE__*/_jsx(Link, {
+          color: "fgPrimary",
+          onClick: () => {},
+          children: "copy"
+        }), endIcon]
+      }),
+      placeholder: placeholder.text
+    }, props));
+  }
+});

package/esm/controls/context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const TextInputFocusVariantContext = /*#__PURE__*/createContext(undefined);
+export const useTextInputFocusVariantContent = () => useContext(TextInputFocusVariantContext);

package/esm/controls/index.js

@@ -0,0 +1,15 @@
+export * from './Checkbox';
+export * from './CheckboxCell';
+export * from './CheckboxGroup';
+export * from './ControlGroup';
+export * from './InputIcon';
+export * from './InputIconButton';
+export * from './NativeTextArea';
+export * from './RadioCell';
+export * from './RadioGroup';
+export * from './SearchInput';
+export * from './SegmentedControl';
+export * from './Select';
+export * from './SelectOption';
+export * from './Switch';
+export * from './TextInput';

package/esm/controls/selectContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const defaultContext = {
+  onChange: () => {},
+  value: undefined,
+  handleCloseMenu: undefined
+};
+export const SelectContext = /*#__PURE__*/createContext(defaultContext);
+export const SelectProvider = SelectContext.Provider;
+export const useSelectContext = () => useContext(SelectContext);

package/esm/controls/useHandleRadioSelect.js

@@ -0,0 +1,6 @@
+import { useCallback } from 'react';
+export function useHandleRadioSelect(onChange) {
+  return useCallback(event => {
+    onChange === null || onChange === void 0 || onChange(event.target.value);
+  }, [onChange]);
+}

package/esm/controls/useRefocusTrigger.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+import { FOCUSABLE_ELEMENTS } from '@coinbase/cds-common/tokens/overlays';
+import { isBrowser } from '../utils/browser';
+
+/** Refocuses a pressable that opens a menu after the menu has been opened and then closed */
+export const useRefocusTrigger = shouldRefocus => {
+  const ref = useRef(null);
+  useEffect(() => {
+    //  focuses the element after the menu opens & closes at least once
+    if (shouldRefocus && isBrowser() && ref.current) {
+      var _ref$current$parentNo;
+      const focusableElements = (_ref$current$parentNo = ref.current.parentNode) === null || _ref$current$parentNo === void 0 ? void 0 : _ref$current$parentNo.querySelectorAll(FOCUSABLE_ELEMENTS);
+      if (focusableElements !== null && focusableElements !== void 0 && focusableElements.length && focusableElements[0]) {
+        focusableElements[0].focus();
+      }
+    }
+  }, [shouldRefocus, ref]);
+  return ref;
+};

package/esm/controls/useSelectionCellControlHeight.js

@@ -0,0 +1,35 @@
+import { useTheme } from '../hooks/useTheme';
+
+/**
+ * Returns the height of the selection cell control based on the theme's headline line height and font size
+ * @returns The height of the selection cell control
+ */
+export const useSelectionCellControlHeight = () => {
+  const {
+    lineHeight,
+    fontSize
+  } = useTheme();
+  const headlineLineHeight = lineHeight.headline;
+  if (typeof headlineLineHeight === 'string' && headlineLineHeight.endsWith('%')) {
+    // If the line height is a percentage, we need to convert it to a number by timing it to the font size
+    const headlineFontSize = fontSize.headline;
+    // convert the percentage string to a number
+    const headlineLineHeightNumber = Number(headlineLineHeight.replace('%', '')) / 100;
+    if (typeof headlineFontSize === 'number') {
+      // multiply the font size by the line height percentage
+      return headlineFontSize * headlineLineHeightNumber;
+    } else if (headlineFontSize.endsWith('rem')) {
+      // if font size is a rem, we need to convert it to a number by multiplying it by 16
+      const headlineFontSizeNumber = Number(headlineFontSize.replace('rem', '')) * 16;
+      return headlineFontSizeNumber * headlineLineHeightNumber;
+    } else if (headlineFontSize.endsWith('px')) {
+      // if font size is a px, we need to convert it to a number
+      const headlineFontSizeNumber = Number(headlineFontSize.replace('px', ''));
+      return headlineFontSizeNumber * headlineLineHeightNumber;
+    } else {
+      // fall to 24 in all other cases
+      return headlineLineHeightNumber * 24;
+    }
+  }
+  return headlineLineHeight;
+};

package/esm/core/createThemeCssVars.js

@@ -0,0 +1,33 @@
+import { styleVarPrefixes } from './theme';
+
+/** Takes a theme object and formats its keys as CSS variables to be used in inline styles. */
+export const createThemeCssVars = theme => {
+  const themeCss = {};
+  const themeKeys = Object.keys(theme);
+  for (const key of themeKeys) {
+    const themeVars = theme[key];
+    if (!themeVars || key === 'id') continue;
+
+    // Handle activeColorScheme separately
+    if (key === 'activeColorScheme') {
+      themeCss['--activeColorScheme'] = theme.activeColorScheme;
+      continue;
+    }
+    const prefix = styleVarPrefixes[key];
+    const cssVarPrefix = prefix ? "--".concat(prefix, "-") : '--';
+    const varNames = Object.keys(themeVars);
+
+    // Process each var in the themeVars
+    for (const varName of varNames) {
+      const value = themeVars[varName];
+      if (value === undefined) continue;
+
+      // Create CSS variable name, replacing periods with underscores
+      const cssVarName = "".concat(cssVarPrefix).concat(varName).replaceAll('.', '_');
+
+      // Format value (add px to numbers)
+      themeCss[cssVarName] = typeof value !== 'number' ? value : value + 'px';
+    }
+  }
+  return themeCss;
+};

package/esm/core/polymorphism.js

@@ -0,0 +1,6 @@
+/**
+ * Prior art:
+ * https://www.benmvp.com/blog/polymorphic-react-components-typescript/
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/pull/70361
+ */
+export let Polymorphic;

package/esm/core/theme.js

@@ -0,0 +1,26 @@
+/** Maps our StyleVars to their CSS variable prefixes. For example, the names of CSS vars generated from `iconSize` vars will be prefixed with `--iconSize-`. */
+export const styleVarPrefixes = {
+  lightSpectrum: 'light',
+  darkSpectrum: 'dark',
+  lightColor: 'lightColor',
+  darkColor: 'darkColor',
+  spectrum: '',
+  color: 'color',
+  space: 'space',
+  iconSize: 'iconSize',
+  avatarSize: 'avatarSize',
+  borderWidth: 'borderWidth',
+  borderRadius: 'borderRadius',
+  fontFamily: 'fontFamily',
+  fontFamilyMono: 'fontFamilyMono',
+  fontSize: 'fontSize',
+  fontWeight: 'fontWeight',
+  lineHeight: 'lineHeight',
+  textTransform: 'textTransform',
+  shadow: 'shadow',
+  controlSize: 'controlSize'
+};
+
+/** Used to generate intellisense via ThemeCSSVars below. */
+
+/** A flat object of the CSS variable names of all themeable vars, based on the Theme type. */

package/esm/cx.js

@@ -0,0 +1,49 @@
+/**
+ * This is a copy of the cx function from @linaria/core@3.0.0-beta.22.
+ * We copy it here to avoid the need to depend on @linaria/core@3.0.0-beta.22 at runtime.
+ * https://github.com/callstack/linaria/blob/08ddb916cd944dedb30881fedb997bba185da3a5/packages/core/src/cx.ts
+ */
+
+// eslint-disable-next-line no-restricted-syntax
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If space separated atomic styles are provided, they are deduplicated according to the first hashed valued:
+ *
+ * ```js
+ *  cx('atm_a_class1 atm_b_class2', 'atm_a_class3') // returns `atm_a_class3 atm_b_class2`
+ * ```
+ *
+ * @returns the combined, space separated class names that can be applied directly to the class attribute
+ */
+export const cx = function cx() {
+  const presentClassNames = Array.prototype.slice
+  // eslint-disable-next-line prefer-rest-params
+  .call(arguments).filter(Boolean);
+  const atomicClasses = {};
+  const nonAtomicClasses = [];
+  presentClassNames.forEach(arg => {
+    // className could be the output of a previous cx call, so split by ' ' first
+    const individualClassNames = arg ? arg.split(' ') : [];
+    individualClassNames.forEach(className => {
+      if (className.startsWith('atm_')) {
+        const [, keyHash] = className.split('_');
+        atomicClasses[keyHash] = className;
+      } else {
+        nonAtomicClasses.push(className);
+      }
+    });
+  });
+  const result = [];
+  for (const keyHash in atomicClasses) {
+    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
+      result.push(atomicClasses[keyHash]);
+    }
+  }
+  result.push(...nonAtomicClasses);
+  return result.join(' ');
+};

package/esm/dates/Calendar.css

@@ -0,0 +1 @@
+.pressableCss-pb7kwm3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}