@ape.swap/bonds-sdk 6.2.13 → 6.2.14

package/dist/components/uikit-sdk/Button/Button.js

@@ -1,41 +1,47 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import React from 'react';
-import Spinner from '../Spinner/index.js';
-import clsx from 'clsx';
-import { variants, sizes, buttonLineHeight, buttonFontSizes } from './types.js';
+import { Button as Button$1, Spinner } from 'theme-ui';
+import { variants, buttonPadding, buttonLineHeight, buttonFontSizes, sizes } from './types.js';
 
-const baseClasses = 'ape:font-body ape:font-bold ape:uppercase ape:cursor-pointer ape:flex ape:items-center ape:justify-center ' +
-    'ape:rounded-normal ape:border-[3px] ape:border-solid ape:transition-all ape:duration-300 ape:ease-linear ' +
-    'ape:active:enabled:scale-90';
-const variantClasses = {
-    [variants.PRIMARY]: 'ape:bg-primary-button ape:border-primary-button ape:text-primary-bright ' +
-        'ape:enabled:hover:bg-primary-button-hovered ape:enabled:hover:border-primary-button-hovered ' +
-        'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-text-disabled-button ape:disabled:border-transparent ape:disabled:opacity-90',
-    [variants.SECONDARY]: 'ape:bg-transparent ape:border-primary-button ape:text-primary-button ' +
-        'ape:enabled:hover:border-primary-button-hovered ' +
-        'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-primary-button-disable ape:disabled:border-transparent',
-};
-// px values ported 1:1 from the old theme-ui space scale indices in buttonPadding (types.ts)
-const paddingX = {
-    [sizes.SMALL]: '12px',
-    [sizes.MEDIUM]: '16px',
-    [sizes.LARGE]: '22px',
-};
-const paddingY = {
-    [sizes.SMALL]: '6px',
-    [sizes.MEDIUM]: '8px',
-    [sizes.LARGE]: '14px',
-};
-const Button = ({ variant = variants.PRIMARY, size = sizes.MEDIUM, load, children, startIcon, endIcon, fullWidth, disabled, className, style, ...props }) => {
-    return (jsxs("button", { disabled: disabled, className: clsx(baseClasses, variantClasses[variant], fullWidth ? 'ape:w-full' : 'ape:w-max', className), style: {
+const Button = ({ variant = variants.PRIMARY, size = sizes.MEDIUM, load, children, startIcon, endIcon, fullWidth, disabled, ...props }) => {
+    let hoverStyle = {
+        '&:hover': {
+            '&:not([disabled])': {
+                borderColor: 'primaryButton',
+                background: variant === 'primary' && 'primaryButton',
+                opacity: 0.7,
+            },
+            '&:disabled': {},
+        },
+    };
+    if (variant === 'secondary') {
+        hoverStyle = {
+            '&:hover': {
+                '&:not([disabled])': hoverStyle['&:hover']['&:not([disabled])'],
+                '&:disabled': {
+                    color: 'secondaryButtonDisableColor',
+                    borderColor: 'secondaryButtonDisable',
+                    opacity: 0.6,
+                },
+            },
+        };
+    }
+    return (jsxs(Button$1, { variant: variant, disabled: disabled, sx: {
+            variant: `buttons.${variant}`,
+            textTransform: 'uppercase',
             fontSize: buttonFontSizes[size],
             lineHeight: buttonLineHeight[size],
-            paddingLeft: paddingX[size],
-            paddingRight: paddingX[size],
-            paddingTop: paddingY[size],
-            paddingBottom: paddingY[size],
-            ...style,
-        }, ...props, children: [React.isValidElement(startIcon) && React.cloneElement(startIcon), children, " ", load && jsx(Spinner, { size: 16, style: { marginLeft: '5px' } }), React.isValidElement(endIcon) && React.cloneElement(endIcon)] }));
+            px: buttonPadding[size].x,
+            py: buttonPadding[size].y,
+            display: 'flex',
+            justifyContent: 'center',
+            transition: 'all .3s linear',
+            '&:active': {
+                transform: 'scale(0.9)',
+            },
+            ...hoverStyle,
+            width: fullWidth ? '100%' : 'max-content',
+        }, ...props, children: [React.isValidElement(startIcon) && React.cloneElement(startIcon), children, " ", load && jsx(Spinner, { size: 16, ml: "5px" }), React.isValidElement(endIcon) && React.cloneElement(endIcon)] }));
 };
 
 export { Button as default };

package/dist/components/uikit-sdk/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/uikit-sdk/Button/Button.tsx"],"sourcesContent":["import React from 'react'\nimport Spinner from '../Spinner'\nimport clsx from 'clsx'\nimport { ButtonProps, variants, buttonFontSizes, sizes, buttonLineHeight } from './types'\n\nconst baseClasses =\n  'ape:font-body ape:font-bold ape:uppercase ape:cursor-pointer ape:flex ape:items-center ape:justify-center ' +\n  'ape:rounded-normal ape:border-[3px] ape:border-solid ape:transition-all ape:duration-300 ape:ease-linear ' +\n  'ape:active:enabled:scale-90'\n\nconst variantClasses: Record<string, string> = {\n  [variants.PRIMARY]:\n    'ape:bg-primary-button ape:border-primary-button ape:text-primary-bright ' +\n    'ape:enabled:hover:bg-primary-button-hovered ape:enabled:hover:border-primary-button-hovered ' +\n    'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-text-disabled-button ape:disabled:border-transparent ape:disabled:opacity-90',\n  [variants.SECONDARY]:\n    'ape:bg-transparent ape:border-primary-button ape:text-primary-button ' +\n    'ape:enabled:hover:border-primary-button-hovered ' +\n    'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-primary-button-disable ape:disabled:border-transparent',\n}\n\n// px values ported 1:1 from the old theme-ui space scale indices in buttonPadding (types.ts)\nconst paddingX: Record<string, string> = {\n  [sizes.SMALL]: '12px',\n  [sizes.MEDIUM]: '16px',\n  [sizes.LARGE]: '22px',\n}\nconst paddingY: Record<string, string> = {\n  [sizes.SMALL]: '6px',\n  [sizes.MEDIUM]: '8px',\n  [sizes.LARGE]: '14px',\n}\n\nconst Button = ({\n  variant = variants.PRIMARY,\n  size = sizes.MEDIUM,\n  load,\n  children,\n  startIcon,\n  endIcon,\n  fullWidth,\n  disabled,\n  className,\n  style,\n  ...props\n}: ButtonProps) => {\n  return (\n    <button\n      disabled={disabled}\n      className={clsx(baseClasses, variantClasses[variant], fullWidth ? 'ape:w-full' : 'ape:w-max', className)}\n      style={{\n        fontSize: buttonFontSizes[size],\n        lineHeight: buttonLineHeight[size],\n        paddingLeft: paddingX[size],\n        paddingRight: paddingX[size],\n        paddingTop: paddingY[size],\n        paddingBottom: paddingY[size],\n        ...style,\n      }}\n      {...props}\n    >\n      {React.isValidElement(startIcon) && React.cloneElement(startIcon)}\n      {children} {load && <Spinner size={16} style={{ marginLeft: '5px' }} />}\n      {React.isValidElement(endIcon) && React.cloneElement(endIcon)}\n    </button>\n  )\n}\n\nexport default Button\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,WAAW,GACf,4GAA4G;IAC5G,2GAA2G;AAC3G,IAAA,6BAA6B;AAE/B,MAAM,cAAc,GAA2B;AAC7C,IAAA,CAAC,QAAQ,CAAC,OAAO,GACf,0EAA0E;QAC1E,8FAA8F;QAC9F,uJAAuJ;AACzJ,IAAA,CAAC,QAAQ,CAAC,SAAS,GACjB,uEAAuE;QACvE,kDAAkD;QAClD,iIAAiI;CACpI;AAED;AACA,MAAM,QAAQ,GAA2B;AACvC,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;CACtB;AACD,MAAM,QAAQ,GAA2B;AACvC,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK;AACpB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK;AACrB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;CACtB;AAED,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,GAAG,QAAQ,CAAC,OAAO,EAC1B,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,EAAE,SAAS,CAAC,EACxG,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC;AAC/B,YAAA,UAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC;AAClC,YAAA,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC3B,YAAA,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC5B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC1B,YAAA,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC7B,YAAA,GAAG,KAAK;SACT,EAAA,GACG,KAAK,aAER,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAChE,QAAQ,EAAA,GAAA,EAAG,IAAI,IAAIC,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,CAAI,EACtE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA,EAAA,CACtD;AAEb;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/uikit-sdk/Button/Button.tsx"],"sourcesContent":["import React from 'react'\nimport { Button as ThemeUIButton, Spinner } from 'theme-ui'\nimport { ButtonProps, variants, buttonFontSizes, buttonPadding, sizes, buttonLineHeight } from './types'\n\nconst Button = ({\n  variant = variants.PRIMARY,\n  size = sizes.MEDIUM,\n  load,\n  children,\n  startIcon,\n  endIcon,\n  fullWidth,\n  disabled,\n  ...props\n}: ButtonProps) => {\n  let hoverStyle = {\n    '&:hover': {\n      '&:not([disabled])': {\n        borderColor: 'primaryButton',\n        background: variant === 'primary' && 'primaryButton',\n        opacity: 0.7,\n      },\n      '&:disabled': {},\n    },\n  }\n  if (variant === 'secondary') {\n    hoverStyle = {\n      '&:hover': {\n        '&:not([disabled])': hoverStyle['&:hover']['&:not([disabled])'],\n        '&:disabled': {\n          color: 'secondaryButtonDisableColor',\n          borderColor: 'secondaryButtonDisable',\n          opacity: 0.6,\n        },\n      },\n    }\n  }\n\n  return (\n    <ThemeUIButton\n      variant={variant}\n      disabled={disabled}\n      sx={{\n        variant: `buttons.${variant}`,\n        textTransform: 'uppercase',\n        fontSize: buttonFontSizes[size],\n        lineHeight: buttonLineHeight[size],\n        px: buttonPadding[size].x,\n        py: buttonPadding[size].y,\n        display: 'flex',\n        justifyContent: 'center',\n        transition: 'all .3s linear',\n        '&:active': {\n          transform: 'scale(0.9)',\n        },\n        ...hoverStyle,\n        width: fullWidth ? '100%' : 'max-content',\n      }}\n      {...props}\n    >\n      {React.isValidElement(startIcon) && React.cloneElement(startIcon)}\n      {children} {load && <Spinner size={16} ml=\"5px\" />}\n      {React.isValidElement(endIcon) && React.cloneElement(endIcon)}\n    </ThemeUIButton>\n  )\n}\n\nexport default Button\n"],"names":["_jsxs","ThemeUIButton","_jsx"],"mappings":";;;;;AAIA,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,GAAG,QAAQ,CAAC,OAAO,EAC1B,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,IAAI,UAAU,GAAG;AACf,QAAA,SAAS,EAAE;AACT,YAAA,mBAAmB,EAAE;AACnB,gBAAA,WAAW,EAAE,eAAe;AAC5B,gBAAA,UAAU,EAAE,OAAO,KAAK,SAAS,IAAI,eAAe;AACpD,gBAAA,OAAO,EAAE,GAAG;AACb,aAAA;AACD,YAAA,YAAY,EAAE,EAAE;AACjB,SAAA;KACF;AACD,IAAA,IAAI,OAAO,KAAK,WAAW,EAAE;AAC3B,QAAA,UAAU,GAAG;AACX,YAAA,SAAS,EAAE;AACT,gBAAA,mBAAmB,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,mBAAmB,CAAC;AAC/D,gBAAA,YAAY,EAAE;AACZ,oBAAA,KAAK,EAAE,6BAA6B;AACpC,oBAAA,WAAW,EAAE,wBAAwB;AACrC,oBAAA,OAAO,EAAE,GAAG;AACb,iBAAA;AACF,aAAA;SACF;IACH;AAEA,IAAA,QACEA,IAAA,CAACC,QAAa,EAAA,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE;YACF,OAAO,EAAE,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE;AAC7B,YAAA,aAAa,EAAE,WAAW;AAC1B,YAAA,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC;AAC/B,YAAA,UAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC;AAClC,YAAA,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;AACzB,YAAA,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;AACzB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,UAAU,EAAE;AACV,gBAAA,SAAS,EAAE,YAAY;AACxB,aAAA;AACD,YAAA,GAAG,UAAU;YACb,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,aAAa;SAC1C,EAAA,GACG,KAAK,aAER,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAChE,QAAQ,EAAA,GAAA,EAAG,IAAI,IAAIC,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,EAAE,EAAC,KAAK,EAAA,CAAG,EACjD,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA,EAAA,CAC/C;AAEpB;;;;"}

package/dist/components/uikit-sdk/Button/IconButton.js

@@ -1,23 +1,21 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import colors from '../../../theme/colors.js';
+import { jsx } from 'theme-ui/jsx-runtime';
+import { Button } from 'theme-ui';
 import Discord from '../Svg/Icons/Discord.js';
 import { iconButtonVariants } from './types.js';
+import styles from './styles.js';
 
-const resolveColor = (color) => (color && colors[color]) || color;
-const baseClasses = 'ape:flex ape:items-center ape:justify-center ape:relative ape:text-primary-bright ape:border-none ape:cursor-pointer ' +
-    'ape:transition-all ape:duration-300 ape:ease-linear ape:hover:brightness-115 ape:active:scale-90';
-const variantClasses = {
-    [iconButtonVariants.PRIMARY]: 'ape:rounded-normal ape:font-bold ape:font-body ape:px-[19px] ape:py-[10px]',
-    [iconButtonVariants.TRANSPARENT]: 'ape:bg-transparent ape:bg-no-repeat ape:p-0 ape:[&_svg]:bg-transparent',
-};
-const IconButton = ({ icon: Icon = Discord, color = 'white1', background = 'yellow', variant = iconButtonVariants.PRIMARY, iconWidth, children, className, style, ...props }) => {
-    return (jsx("button", { ...props, className: clsx(baseClasses, variantClasses[variant], className), 
-        // The `transparent` variant must stay transparent regardless of the
-        // `background` prop (it defaults to 'yellow') — inline style always
-        // beats the variant's `ape:bg-transparent` class, so skip it here
-        // rather than let it silently win.
-        style: { ...(variant !== iconButtonVariants.TRANSPARENT ? { background: resolveColor(background) } : {}), ...style }, children: children || (jsx("span", { style: { height: iconWidth, width: iconWidth }, children: jsx(Icon, { color: color, ...props, width: iconWidth }) })) }));
+const IconButton = ({ icon: Icon = Discord, color = 'white1', background = 'yellow', variant = iconButtonVariants.PRIMARY, iconWidth, children, ...props }) => {
+    return (jsx(Button, { ...props, variant: variant, sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
+            variant: `buttons.${variant}`,
+            color: 'primaryBright',
+            background,
+            ...(variant === iconButtonVariants.PRIMARY ? styles.primary : {}),
+            ...(variant === iconButtonVariants.TRANSPARENT ? styles.transparent : {}),
+        }, children: children || (jsx("span", { sx: { height: iconWidth, width: iconWidth }, children: jsx(Icon, { color: color, ...props, width: iconWidth }) })) }));
 };
 
 export { IconButton as default };

package/dist/components/uikit-sdk/Button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/uikit-sdk/Button/IconButton.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport colors from '../../../theme/colors'\nimport Discord from '../Svg/Icons/Discord'\nimport { IconButtonProps, iconButtonVariants as variants } from './types'\n\nconst resolveColor = (color?: string) => (color && colors[color as keyof typeof colors]) || color\n\nconst baseClasses =\n  'ape:flex ape:items-center ape:justify-center ape:relative ape:text-primary-bright ape:border-none ape:cursor-pointer ' +\n  'ape:transition-all ape:duration-300 ape:ease-linear ape:hover:brightness-115 ape:active:scale-90'\n\nconst variantClasses: Record<string, string> = {\n  [variants.PRIMARY]: 'ape:rounded-normal ape:font-bold ape:font-body ape:px-[19px] ape:py-[10px]',\n  [variants.TRANSPARENT]: 'ape:bg-transparent ape:bg-no-repeat ape:p-0 ape:[&_svg]:bg-transparent',\n}\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  icon: Icon = Discord,\n  color = 'white1',\n  background = 'yellow',\n  variant = variants.PRIMARY,\n  iconWidth,\n  children,\n  className,\n  style,\n  ...props\n}) => {\n  return (\n    <button\n      {...props}\n      className={clsx(baseClasses, variantClasses[variant], className)}\n      // The `transparent` variant must stay transparent regardless of the\n      // `background` prop (it defaults to 'yellow') — inline style always\n      // beats the variant's `ape:bg-transparent` class, so skip it here\n      // rather than let it silently win.\n      style={{ ...(variant !== variants.TRANSPARENT ? { background: resolveColor(background) } : {}), ...style }}\n    >\n      {children || (\n        <span style={{ height: iconWidth, width: iconWidth }}>\n          <Icon color={color} {...props} width={iconWidth} />\n        </span>\n      )}\n    </button>\n  )\n}\n\nexport default IconButton\n"],"names":["variants","_jsx"],"mappings":";;;;;;AAMA,MAAM,YAAY,GAAG,CAAC,KAAc,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,KAA4B,CAAC,KAAK,KAAK;AAEjG,MAAM,WAAW,GACf,uHAAuH;AACvH,IAAA,kGAAkG;AAEpG,MAAM,cAAc,GAA2B;AAC7C,IAAA,CAACA,kBAAQ,CAAC,OAAO,GAAG,4EAA4E;AAChG,IAAA,CAACA,kBAAQ,CAAC,WAAW,GAAG,wEAAwE;CACjG;AAED,MAAM,UAAU,GAA8B,CAAC,EAC7C,IAAI,EAAE,IAAI,GAAG,OAAO,EACpB,KAAK,GAAG,QAAQ,EAChB,UAAU,GAAG,QAAQ,EACrB,OAAO,GAAGA,kBAAQ,CAAC,OAAO,EAC1B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,KAAI;AACH,IAAA,QACEC,GAAA,CAAA,QAAA,EAAA,EAAA,GACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;;;;;AAKhE,QAAA,KAAK,EAAE,EAAE,IAAI,OAAO,KAAKD,kBAAQ,CAAC,WAAW,GAAG,EAAE,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EAAA,QAAA,EAEzG,QAAQ,KACPC,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,YAClDA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,GAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,EAAA,CAC9C,CACR,EAAA,CACM;AAEb;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/uikit-sdk/Button/IconButton.tsx"],"sourcesContent":["import React from 'react'\nimport { Button } from 'theme-ui'\nimport Discord from '../Svg/Icons/Discord'\nimport { IconButtonProps, iconButtonVariants as variants } from './types'\nimport style from './styles'\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  icon: Icon = Discord,\n  color = 'white1',\n  background = 'yellow',\n  variant = variants.PRIMARY,\n  iconWidth,\n  children,\n  ...props\n}) => {\n  return (\n    <Button\n      {...props}\n      variant={variant}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        position: 'relative',\n        variant: `buttons.${variant}`,\n        color: 'primaryBright',\n        background,\n        ...(variant === variants.PRIMARY ? style.primary : {}),\n        ...(variant === variants.TRANSPARENT ? style.transparent : {}),\n      }}\n    >\n      {children || (\n        <span sx={{ height: iconWidth, width: iconWidth }}>\n          <Icon color={color} {...props} width={iconWidth} />\n        </span>\n      )}\n    </Button>\n  )\n}\n\nexport default IconButton\n"],"names":["variants","_jsx","style"],"mappings":";;;;;;AAMA,MAAM,UAAU,GAA8B,CAAC,EAC7C,IAAI,EAAE,IAAI,GAAG,OAAO,EACpB,KAAK,GAAG,QAAQ,EAChB,UAAU,GAAG,QAAQ,EACrB,OAAO,GAAGA,kBAAQ,CAAC,OAAO,EAC1B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;IACH,QACEC,GAAA,CAAC,MAAM,EAAA,EAAA,GACD,KAAK,EACT,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE;AAC7B,YAAA,KAAK,EAAE,eAAe;YACtB,UAAU;AACV,YAAA,IAAI,OAAO,KAAKD,kBAAQ,CAAC,OAAO,GAAGE,MAAK,CAAC,OAAO,GAAG,EAAE,CAAC;AACtD,YAAA,IAAI,OAAO,KAAKF,kBAAQ,CAAC,WAAW,GAAGE,MAAK,CAAC,WAAW,GAAG,EAAE,CAAC;AAC/D,SAAA,EAAA,QAAA,EAEA,QAAQ,KACPD,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EAC/CA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,KAAK,KAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,EAAA,CAC9C,CACR,EAAA,CACM;AAEb;;;;"}

package/dist/components/uikit-sdk/Button/styles.d.ts

@@ -0,0 +1,3 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+declare const styles: Record<string, ThemeUIStyleObject>;
+export default styles;

package/dist/components/uikit-sdk/Button/styles.js

@@ -0,0 +1,31 @@
+const defaultStyle = {
+    cursor: 'pointer',
+    color: 'primaryBright',
+    border: 'none',
+    transition: 'all .3s linear',
+    '&:hover': {
+        filter: 'brightness(115%)',
+    },
+    '&:active': {
+        transform: 'scale(0.9)',
+    },
+};
+const styles = {
+    primary: {
+        ...defaultStyle,
+    },
+    transparent: {
+        ...defaultStyle,
+        backgroundColor: 'transparent',
+        backgroundRepeat: 'no-repeat',
+        padding: '0px',
+        border: 'none',
+        cursor: 'pointer',
+        svg: {
+            background: 'transparent',
+        },
+    },
+};
+
+export { styles as default };
+//# sourceMappingURL=styles.js.map

package/dist/components/uikit-sdk/Button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/uikit-sdk/Button/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nconst defaultStyle = {\n  cursor: 'pointer',\n  color: 'primaryBright',\n  border: 'none',\n  transition: 'all .3s linear',\n  '&:hover': {\n    filter: 'brightness(115%)',\n  },\n  '&:active': {\n    transform: 'scale(0.9)',\n  },\n}\n\nconst styles: Record<string, ThemeUIStyleObject> = {\n  primary: {\n    ...defaultStyle,\n  },\n  transparent: {\n    ...defaultStyle,\n    backgroundColor: 'transparent',\n    backgroundRepeat: 'no-repeat',\n    padding: '0px',\n    border: 'none',\n    cursor: 'pointer',\n    svg: {\n      background: 'transparent',\n    },\n  },\n}\n\nexport default styles\n"],"names":[],"mappings":"AAEA,MAAM,YAAY,GAAG;AACnB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE,eAAe;AACtB,IAAA,MAAM,EAAE,MAAM;AACd,IAAA,UAAU,EAAE,gBAAgB;AAC5B,IAAA,SAAS,EAAE;AACT,QAAA,MAAM,EAAE,kBAAkB;AAC3B,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,SAAS,EAAE,YAAY;AACxB,KAAA;CACF;AAED,MAAM,MAAM,GAAuC;AACjD,IAAA,OAAO,EAAE;AACP,QAAA,GAAG,YAAY;AAChB,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,GAAG,YAAY;AACf,QAAA,eAAe,EAAE,aAAa;AAC9B,QAAA,gBAAgB,EAAE,WAAW;AAC7B,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,GAAG,EAAE;AACH,YAAA,UAAU,EAAE,aAAa;AAC1B,SAAA;AACF,KAAA;;;;;"}

package/dist/components/uikit-sdk/Button/types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import type React from 'react';
+import { ButtonProps as ThemeUIButtonProps } from 'theme-ui';
 import { SvgProps } from '../Svg/types';
 export declare enum sizes {
     SMALL = "sm",
@@ -23,7 +24,7 @@ export declare enum iconButtonVariants {
 type sizeProps = `${sizes}`;
 type variantProps = `${variants}`;
 type iconButtonVariantsProps = `${iconButtonVariants}`;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends Omit<ThemeUIButtonProps, 'sx'> {
     variant?: variantProps;
     size?: sizeProps;
     startIcon?: ReactNode;

package/dist/components/uikit-sdk/Button/types.js

@@ -14,11 +14,11 @@ const buttonLineHeight = {
     [sizes.MEDIUM]: '24px',
     [sizes.LARGE]: '33px',
 };
-({
-    [sizes.SMALL]: { },
-    [sizes.MEDIUM]: { },
-    [sizes.LARGE]: { },
-});
+const buttonPadding = {
+    [sizes.SMALL]: { x: 5, y: 2 },
+    [sizes.MEDIUM]: { x: 7, y: 3 },
+    [sizes.LARGE]: { x: 10, y: 6 },
+};
 var variants;
 (function (variants) {
     variants["PRIMARY"] = "primary";
@@ -30,5 +30,5 @@ var iconButtonVariants;
     iconButtonVariants["TRANSPARENT"] = "transparent";
 })(iconButtonVariants || (iconButtonVariants = {}));
 
-export { buttonFontSizes, buttonLineHeight, iconButtonVariants, sizes, variants };
+export { buttonFontSizes, buttonLineHeight, buttonPadding, iconButtonVariants, sizes, variants };
 //# sourceMappingURL=types.js.map

package/dist/components/uikit-sdk/Button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Button/types.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport type React from 'react'\nimport { SvgProps } from '../Svg/types'\n\nexport enum sizes {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\nexport const buttonFontSizes: Record<sizes | any, string> = {\n  [sizes.SMALL]: '12px',\n  [sizes.MEDIUM]: '16px',\n  [sizes.LARGE]: '18px',\n}\n\nexport const buttonLineHeight: Record<sizes | any, string> = {\n  [sizes.SMALL]: '10px',\n  [sizes.MEDIUM]: '24px',\n  [sizes.LARGE]: '33px',\n}\n\nexport const buttonPadding: Record<sizes | any, { x: number; y: number }> = {\n  [sizes.SMALL]: { x: 5, y: 2 },\n  [sizes.MEDIUM]: { x: 7, y: 3 },\n  [sizes.LARGE]: { x: 10, y: 6 },\n}\n\nexport enum variants {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n}\n\nexport enum iconButtonVariants {\n  PRIMARY = 'primary',\n  TRANSPARENT = 'transparent',\n}\n\ntype sizeProps = `${sizes}`\ntype variantProps = `${variants}`\ntype iconButtonVariantsProps = `${iconButtonVariants}`\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: variantProps\n  size?: sizeProps\n  startIcon?: ReactNode\n  endIcon?: ReactNode\n  fullWidth?: boolean\n  load?: boolean\n  [key: string]: any\n}\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'variant'> {\n  variant?: iconButtonVariantsProps\n  color?: string\n  background?: string\n  icon?: React.ComponentType<SvgProps>\n  iconWidth?: number\n}\n"],"names":[],"mappings":"IAIY;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,IAAa;AACb,IAAA,KAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACd,CAAC,EAJW,KAAK,KAAL,KAAK,GAAA,EAAA,CAAA,CAAA;AAMV,MAAM,eAAe,GAAgC;AAC1D,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;;AAGhB,MAAM,gBAAgB,GAAgC;AAC3D,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;;CAGqD;AAC1E,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,EAAY,CAAE;AAC7B,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,EAAY,CAAE;AAC9B,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,EAAa,CAAE;;IAGpB;AAAZ,CAAA,UAAY,QAAQ,EAAA;AAClB,IAAA,QAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACzB,CAAC,EAHW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;IAKR;AAAZ,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC7B,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Button/types.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport type React from 'react'\nimport { ButtonProps as ThemeUIButtonProps } from 'theme-ui'\nimport { SvgProps } from '../Svg/types'\n\nexport enum sizes {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\nexport const buttonFontSizes: Record<sizes | any, string> = {\n  [sizes.SMALL]: '12px',\n  [sizes.MEDIUM]: '16px',\n  [sizes.LARGE]: '18px',\n}\n\nexport const buttonLineHeight: Record<sizes | any, string> = {\n  [sizes.SMALL]: '10px',\n  [sizes.MEDIUM]: '24px',\n  [sizes.LARGE]: '33px',\n}\n\nexport const buttonPadding: Record<sizes | any, { x: number; y: number }> = {\n  [sizes.SMALL]: { x: 5, y: 2 },\n  [sizes.MEDIUM]: { x: 7, y: 3 },\n  [sizes.LARGE]: { x: 10, y: 6 },\n}\n\nexport enum variants {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n}\n\nexport enum iconButtonVariants {\n  PRIMARY = 'primary',\n  TRANSPARENT = 'transparent',\n}\n\ntype sizeProps = `${sizes}`\ntype variantProps = `${variants}`\ntype iconButtonVariantsProps = `${iconButtonVariants}`\n\nexport interface ButtonProps extends Omit<ThemeUIButtonProps, 'sx'> {\n  variant?: variantProps\n  size?: sizeProps\n  startIcon?: ReactNode\n  endIcon?: ReactNode\n  fullWidth?: boolean\n  load?: boolean\n  [key: string]: any\n}\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'variant'> {\n  variant?: iconButtonVariantsProps\n  color?: string\n  background?: string\n  icon?: React.ComponentType<SvgProps>\n  iconWidth?: number\n}\n"],"names":[],"mappings":"IAKY;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,IAAa;AACb,IAAA,KAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACd,CAAC,EAJW,KAAK,KAAL,KAAK,GAAA,EAAA,CAAA,CAAA;AAMV,MAAM,eAAe,GAAgC;AAC1D,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;;AAGhB,MAAM,gBAAgB,GAAgC;AAC3D,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;;AAGhB,MAAM,aAAa,GAAkD;AAC1E,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC7B,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC9B,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE;;IAGpB;AAAZ,CAAA,UAAY,QAAQ,EAAA;AAClB,IAAA,QAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACzB,CAAC,EAHW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;IAKR;AAAZ,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC7B,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/components/uikit-sdk/Checkbox/index.d.ts

@@ -1,3 +1,3 @@
 import { CheckboxProps } from './types';
-declare const Checkbox: ({ scale, display, className, style, background, ...props }: CheckboxProps | any) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: ({ scale, display, className, background, ...props }: CheckboxProps | any) => import("react").JSX.Element;
 export default Checkbox;

package/dist/components/uikit-sdk/Checkbox/index.js

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { scales } from './types.js';
 
 const getScale = ({ scale }) => {
@@ -11,17 +10,15 @@ const getScale = ({ scale }) => {
             return '32px';
     }
 };
-// Ported from theme/components.ts `checkbox` variant
-const inputClasses = 'ape:peer ape:bg-white2 ape:rounded-normal ape:border-2 ape:border-solid ape:border-white3 ape:shadow-none ape:outline-none ' +
-    'ape:appearance-none ape:size-full ape:m-0 ape:cursor-pointer ' +
-    'ape:checked:bg-primary-button ape:checked:border-primary-button ' +
-    'ape:focus:not-checked:outline-none ape:focus:not-checked:shadow-none ' +
-    'ape:focus:outline ape:focus:outline-1 ape:focus:outline-primary-button ' +
-    'ape:enabled:hover:not-checked:border-primary-button';
-const Checkbox = ({ scale = scales.SM, display = 'block', className, style, background, ...props }) => {
+const Checkbox = ({ scale = scales.SM, display = 'block', className, background, ...props }) => {
     const scaleSize = getScale({ scale });
     const svgScale = scale === 'sm' ? 13 : 21;
-    return (jsxs("span", { className: clsx('ape:relative', className), style: { display, width: scaleSize, height: scaleSize, ...style }, children: [jsx("input", { type: "checkbox", className: inputClasses, style: { background }, ...props }), jsx("svg", { width: svgScale, viewBox: "0 0 13 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "ape:hidden ape:absolute ape:pointer-events-none ape:inset-0 ape:m-auto ape:peer-checked:block", children: jsx("path", { d: "M11.8132 0.171594C11.522 -0.0616871 11.0766 -0.046135 10.8025 0.218251L4.25899 6.76569L1.17566 4.46397C0.93585 4.27735 0.576128 4.2618 0.319184 4.43287C-0.00627898 4.63505 -0.0747974 5.0394 0.147888 5.33489L3.35113 9.4873C3.43677 9.59617 3.55668 9.70503 3.67659 9.78279C4.27612 10.156 5.09835 10.0161 5.50946 9.47175L5.56085 9.40954L11.9159 1.01141C12.1215 0.747022 12.0701 0.389324 11.8132 0.171594Z", fill: "#FAFAFA" }) })] }));
+    return (jsxs("span", { className: className, sx: {
+            display,
+            width: scaleSize,
+            height: scaleSize,
+            position: 'relative',
+        }, children: [jsx("input", { type: "checkbox", sx: { variant: 'checkbox', background: background, borderColor: 'white4' }, ...props }), jsx("svg", { width: svgScale, viewBox: "0 0 13 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M11.8132 0.171594C11.522 -0.0616871 11.0766 -0.046135 10.8025 0.218251L4.25899 6.76569L1.17566 4.46397C0.93585 4.27735 0.576128 4.2618 0.319184 4.43287C-0.00627898 4.63505 -0.0747974 5.0394 0.147888 5.33489L3.35113 9.4873C3.43677 9.59617 3.55668 9.70503 3.67659 9.78279C4.27612 10.156 5.09835 10.0161 5.50946 9.47175L5.56085 9.40954L11.9159 1.01141C12.1215 0.747022 12.0701 0.389324 11.8132 0.171594Z", fill: "#FAFAFA" }) })] }));
 };
 
 export { Checkbox as default };

package/dist/components/uikit-sdk/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Checkbox/index.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { CheckboxProps, scales } from './types'\n\nconst getScale = ({ scale }: CheckboxProps) => {\n  switch (scale) {\n    case scales.SM:\n      return '21px'\n    case scales.MD:\n    default:\n      return '32px'\n  }\n}\n\n// Ported from theme/components.ts `checkbox` variant\nconst inputClasses =\n  'ape:peer ape:bg-white2 ape:rounded-normal ape:border-2 ape:border-solid ape:border-white3 ape:shadow-none ape:outline-none ' +\n  'ape:appearance-none ape:size-full ape:m-0 ape:cursor-pointer ' +\n  'ape:checked:bg-primary-button ape:checked:border-primary-button ' +\n  'ape:focus:not-checked:outline-none ape:focus:not-checked:shadow-none ' +\n  'ape:focus:outline ape:focus:outline-1 ape:focus:outline-primary-button ' +\n  'ape:enabled:hover:not-checked:border-primary-button'\n\nconst Checkbox = ({\n  scale = scales.SM,\n  display = 'block',\n  className,\n  style,\n  background,\n  ...props\n}: CheckboxProps | any) => {\n  const scaleSize = getScale({ scale })\n  const svgScale = scale === 'sm' ? 13 : 21\n\n  return (\n    <span\n      className={clsx('ape:relative', className)}\n      style={{ display, width: scaleSize, height: scaleSize, ...style }}\n    >\n      <input type=\"checkbox\" className={inputClasses} style={{ background }} {...props} />\n      <svg\n        width={svgScale || '13'}\n        viewBox=\"0 0 13 10\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"ape:hidden ape:absolute ape:pointer-events-none ape:inset-0 ape:m-auto ape:peer-checked:block\"\n      >\n        <path\n          d=\"M11.8132 0.171594C11.522 -0.0616871 11.0766 -0.046135 10.8025 0.218251L4.25899 6.76569L1.17566 4.46397C0.93585 4.27735 0.576128 4.2618 0.319184 4.43287C-0.00627898 4.63505 -0.0747974 5.0394 0.147888 5.33489L3.35113 9.4873C3.43677 9.59617 3.55668 9.70503 3.67659 9.78279C4.27612 10.156 5.09835 10.0161 5.50946 9.47175L5.56085 9.40954L11.9159 1.01141C12.1215 0.747022 12.0701 0.389324 11.8132 0.171594Z\"\n          fill=\"#FAFAFA\"\n        />\n      </svg>\n    </span>\n  )\n}\n\nexport default Checkbox\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAGA,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAiB,KAAI;IAC5C,QAAQ,KAAK;QACX,KAAK,MAAM,CAAC,EAAE;AACZ,YAAA,OAAO,MAAM;QACf,KAAK,MAAM,CAAC,EAAE;AACd,QAAA;AACE,YAAA,OAAO,MAAM;;AAEnB,CAAC;AAED;AACA,MAAM,YAAY,GAChB,6HAA6H;IAC7H,+DAA+D;IAC/D,kEAAkE;IAClE,uEAAuE;IACvE,yEAAyE;AACzE,IAAA,qDAAqD;AAEvD,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,GAAG,MAAM,CAAC,EAAE,EACjB,OAAO,GAAG,OAAO,EACjB,SAAS,EACT,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACY,KAAI;IACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;AACrC,IAAA,MAAM,QAAQ,GAAG,KAAK,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;AAEzC,IAAA,QACEA,IAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAA,QAAA,EAAA,CAEjEC,GAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAM,KAAK,EAAA,CAAI,EACpFA,GAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,QAAgB,EACvB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,+FAA+F,EAAA,QAAA,EAEzGA,cACE,CAAC,EAAC,kZAAkZ,EACpZ,IAAI,EAAC,SAAS,GACd,EAAA,CACE,CAAA,EAAA,CACD;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Checkbox/index.tsx"],"sourcesContent":["import { CheckboxProps, scales } from './types'\n\nconst getScale = ({ scale }: CheckboxProps) => {\n  switch (scale) {\n    case scales.SM:\n      return '21px'\n    case scales.MD:\n    default:\n      return '32px'\n  }\n}\n\nconst Checkbox = ({ scale = scales.SM, display = 'block', className, background, ...props }: CheckboxProps | any) => {\n  const scaleSize = getScale({ scale })\n  const svgScale = scale === 'sm' ? 13 : 21\n\n  return (\n    <span\n      className={className}\n      sx={{\n        display,\n        width: scaleSize,\n        height: scaleSize,\n        position: 'relative',\n      }}\n    >\n      <input type=\"checkbox\" sx={{ variant: 'checkbox', background: background, borderColor: 'white4' }} {...props} />\n      <svg width={svgScale || '13'} viewBox=\"0 0 13 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M11.8132 0.171594C11.522 -0.0616871 11.0766 -0.046135 10.8025 0.218251L4.25899 6.76569L1.17566 4.46397C0.93585 4.27735 0.576128 4.2618 0.319184 4.43287C-0.00627898 4.63505 -0.0747974 5.0394 0.147888 5.33489L3.35113 9.4873C3.43677 9.59617 3.55668 9.70503 3.67659 9.78279C4.27612 10.156 5.09835 10.0161 5.50946 9.47175L5.56085 9.40954L11.9159 1.01141C12.1215 0.747022 12.0701 0.389324 11.8132 0.171594Z\"\n          fill=\"#FAFAFA\"\n        />\n      </svg>\n    </span>\n  )\n}\n\nexport default Checkbox\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAEA,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAiB,KAAI;IAC5C,QAAQ,KAAK;QACX,KAAK,MAAM,CAAC,EAAE;AACZ,YAAA,OAAO,MAAM;QACf,KAAK,MAAM,CAAC,EAAE;AACd,QAAA;AACE,YAAA,OAAO,MAAM;;AAEnB,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC,EAAE,EAAE,OAAO,GAAG,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,KAAK,EAAuB,KAAI;IAClH,MAAM,SAAS,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;AACrC,IAAA,MAAM,QAAQ,GAAG,KAAK,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;AAEzC,IAAA,QACEA,IAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE;YACF,OAAO;AACP,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,QAAQ,EAAE,UAAU;SACrB,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,UAAU,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAA,GAAM,KAAK,EAAA,CAAI,EAChHA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,QAAgB,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,YAC9FA,GAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,kZAAkZ,EACpZ,IAAI,EAAC,SAAS,EAAA,CACd,EAAA,CACE,CAAA,EAAA,CACD;AAEX;;;;"}

package/dist/components/uikit-sdk/Checkbox/types.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import type React from 'react';
+import { ThemeUICSSObject } from 'theme-ui';
 export declare enum scales {
     SM = "sm",
     MD = "md"
@@ -7,6 +7,6 @@ export declare enum scales {
 type scaleProps = `${scales}`;
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     scale?: scaleProps;
-    display?: React.CSSProperties['display'];
+    display?: ThemeUICSSObject['display'];
 }
 export {};

package/dist/components/uikit-sdk/Checkbox/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Checkbox/types.ts"],"sourcesContent":["import { InputHTMLAttributes } from 'react'\nimport type React from 'react'\n\nexport enum scales {\n  SM = 'sm',\n  MD = 'md',\n}\n\ntype scaleProps = `${scales}`\n\nexport interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {\n  scale?: scaleProps\n  display?: React.CSSProperties['display']\n}\n"],"names":[],"mappings":"IAGY;AAAZ,CAAA,UAAY,MAAM,EAAA;AAChB,IAAA,MAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,MAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACX,CAAC,EAHW,MAAM,KAAN,MAAM,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Checkbox/types.ts"],"sourcesContent":["import { InputHTMLAttributes } from 'react'\nimport { ThemeUICSSObject } from 'theme-ui'\n\nexport enum scales {\n  SM = 'sm',\n  MD = 'md',\n}\n\ntype scaleProps = `${scales}`\n\nexport interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {\n  scale?: scaleProps\n  display?: ThemeUICSSObject['display']\n}\n"],"names":[],"mappings":"IAGY;AAAZ,CAAA,UAAY,MAAM,EAAA;AAChB,IAAA,MAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,MAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACX,CAAC,EAHW,MAAM,KAAN,MAAM,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/components/uikit-sdk/Flex/index.d.ts

@@ -1,11 +1,5 @@
 import React from 'react';
-/**
- * `ape:flex` is applied unconditionally so callers only need to pass the
- * classes that differ from a plain flex container (direction, gap, etc).
- */
-declare const Flex: ({ children, className, as: Component, ...props }: {
-    children?: React.ReactNode;
-    className?: string;
-    as?: React.ElementType;
-} & Record<string, any>) => import("react/jsx-runtime").JSX.Element;
+declare const Flex: ({ children, ...props }: {
+    children: React.ReactNode;
+} | any) => React.JSX.Element;
 export default Flex;

package/dist/components/uikit-sdk/Flex/index.js

@@ -1,12 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsx } from 'theme-ui/jsx-runtime';
+import { Flex as Flex$1 } from 'theme-ui';
 
-/**
- * `ape:flex` is applied unconditionally so callers only need to pass the
- * classes that differ from a plain flex container (direction, gap, etc).
- */
-const Flex = ({ children, className, as: Component = 'div', ...props }) => {
-    return (jsx(Component, { className: clsx('ape:flex', className), ...props, children: children }));
+const Flex = ({ children, ...props }) => {
+    return jsx(Flex$1, { ...props, children: children });
 };
 
 export { Flex as default };

package/dist/components/uikit-sdk/Flex/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Flex/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\n\n/**\n * `ape:flex` is applied unconditionally so callers only need to pass the\n * classes that differ from a plain flex container (direction, gap, etc).\n */\nconst Flex = ({\n  children,\n  className,\n  as: Component = 'div',\n  ...props\n}: { children?: React.ReactNode; className?: string; as?: React.ElementType } & Record<string, any>) => {\n  return (\n    <Component className={clsx('ape:flex', className)} {...props}>\n      {children}\n    </Component>\n  )\n}\n\nexport default Flex\n"],"names":["_jsx"],"mappings":";;;AAGA;;;AAGG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,GAAG,KAAK,EACyF,KAAI;AACrG,IAAA,QACEA,GAAA,CAAC,SAAS,IAAC,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,YACzD,QAAQ,EAAA,CACC;AAEhB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Flex/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Flex as ThemeUIFlex } from 'theme-ui'\n\nconst Flex = ({ children, ...props }: { children: React.ReactNode } | any) => {\n  return <ThemeUIFlex {...props}>{children}</ThemeUIFlex>\n}\n\nexport default Flex\n"],"names":["_jsx","ThemeUIFlex"],"mappings":";;;AAGA,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuC,KAAI;AAC3E,IAAA,OAAOA,IAACC,MAAW,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EAAG,QAAQ,GAAe;AACzD;;;;"}

package/dist/components/uikit-sdk/Input/Input.d.ts

@@ -1,10 +1,9 @@
 type variant = 'search' | 'password' | 'text';
 type inputStatus = 'default' | 'error' | 'success';
-declare const Input: ({ variant, width, status, isLoading, className, ...props }: {
+declare const Input: ({ variant, width, status, isLoading, ...props }: {
     variant?: variant;
     width?: string[];
     status?: inputStatus;
     isLoading?: boolean;
-    className?: string;
-} | any) => import("react/jsx-runtime").JSX.Element;
+} | any) => import("react").JSX.Element;
 export default Input;

package/dist/components/uikit-sdk/Input/Input.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import Spinner from '../Spinner/index.js';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { Input as Input$1, Spinner } from 'theme-ui';
 import Flex from '../Flex/index.js';
 import Text from '../Text/index.js';
 import Search from '../Svg/Icons/Search.js';
@@ -9,17 +9,43 @@ const colorScheme = {
     error: 'red',
     success: 'green',
 };
-const baseInputClasses = 'ape:bg-white3 ape:border-none ape:pl-[10px] ape:rounded-normal ape:focus:outline-none';
-const Input = ({ variant, width, status, isLoading, className, ...props }) => {
+const Input = ({ variant, width, status, isLoading, ...props }) => {
     switch (variant) {
         case 'search':
-            return (jsxs(Flex, { className: "ape:relative", style: { width: width || 'unset' }, children: [jsx("input", { ...props, className: `${baseInputClasses} ${className || ''}` }), jsx(Flex, { className: "ape:absolute ape:right-[5px] ape:justify-center ape:h-full", children: jsx(Search, { color: "grey" }) })] }));
+            return (jsxs(Flex, { sx: { position: 'relative', width: width ? width : 'unset' }, children: [jsx(Input$1, { ...props, sx: {
+                            background: 'white3',
+                            border: 'none',
+                            pl: '10px',
+                            borderRadius: 'normal',
+                            ':focus': { outline: 'none' },
+                        } }), jsx(Flex, { sx: { position: 'absolute', right: 5, justifyContent: 'center', height: '100%' }, children: jsx(Search, { color: "grey" }) })] }));
         case 'password': {
             const statusColor = colorScheme[status];
-            return (jsxs(Flex, { className: "ape:flex-col ape:items-center ape:gap-[5px] ape:relative", style: { width: width || '100%' }, children: [jsx("input", { ...props, type: "password", className: `${baseInputClasses} ape:relative ${className || ''}`, style: { borderBottom: `2px solid ${statusColor}`, color: statusColor } }), isLoading && (jsx(Flex, { className: "ape:absolute ape:top-[5px] ape:right-[5px] ape:justify-center ape:h-full", children: jsx(Spinner, { size: 20 }) })), jsx(Text, { style: { fontSize: '10px', color: statusColor, visibility: status === 'default' ? 'hidden' : 'visible' }, children: status === 'error' ? 'Wrong Password' : 'Correct Password' })] }));
+            return (jsxs(Flex, { sx: {
+                    width: width ? width : '100%',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '5px',
+                    position: 'relative',
+                }, children: [jsx(Input$1, { ...props, type: "password", sx: {
+                            position: 'relative',
+                            background: 'white3',
+                            border: 'none',
+                            borderBottom: `2px solid ${statusColor}`,
+                            color: statusColor,
+                            pl: '10px',
+                            borderRadius: 'normal',
+                            ':focus': { outline: 'none' },
+                        } }), isLoading && (jsx(Flex, { sx: { position: 'absolute', top: '5px', right: '5px', justifyContent: 'center', height: '100%' }, children: jsx(Spinner, { width: "20px", height: "20px" }) })), jsx(Text, { sx: { fontSize: '10px', color: statusColor, visibility: status === 'default' ? 'hidden' : 'visible' }, children: status === 'error' ? 'Wrong Password' : 'Correct Password' })] }));
         }
         default:
-            return jsx("input", { ...props, className: `${baseInputClasses} ${className || ''}` });
+            return (jsx(Input$1, { ...props, sx: {
+                    background: 'white3',
+                    border: 'none',
+                    pl: '10px',
+                    borderRadius: 'normal',
+                    ':focus': { outline: 'none' },
+                } }));
     }
 };
 

package/dist/components/uikit-sdk/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/uikit-sdk/Input/Input.tsx"],"sourcesContent":["import Spinner from '../Spinner'\nimport Flex from '../Flex'\nimport Text from '../Text'\nimport Search from '../Svg/Icons/Search'\n\ntype variant = 'search' | 'password' | 'text'\ntype inputStatus = 'default' | 'error' | 'success'\ntype color = 'gray' | 'red' | 'green'\n\ntype colorSchemeMap = Record<inputStatus, color>\n\nconst colorScheme: colorSchemeMap = {\n  default: 'gray',\n  error: 'red',\n  success: 'green',\n}\n\nconst baseInputClasses = 'ape:bg-white3 ape:border-none ape:pl-[10px] ape:rounded-normal ape:focus:outline-none'\n\nconst Input = ({\n  variant,\n  width,\n  status,\n  isLoading,\n  className,\n  ...props\n}: { variant?: variant; width?: string[]; status?: inputStatus; isLoading?: boolean; className?: string } | any) => {\n  switch (variant) {\n    case 'search':\n      return (\n        <Flex className=\"ape:relative\" style={{ width: width || 'unset' }}>\n          <input {...props} className={`${baseInputClasses} ${className || ''}`} />\n          <Flex className=\"ape:absolute ape:right-[5px] ape:justify-center ape:h-full\">\n            <Search color=\"grey\" />\n          </Flex>\n        </Flex>\n      )\n\n    case 'password': {\n      const statusColor = colorScheme[status as inputStatus]\n      return (\n        <Flex className=\"ape:flex-col ape:items-center ape:gap-[5px] ape:relative\" style={{ width: width || '100%' }}>\n          <input\n            {...props}\n            type=\"password\"\n            className={`${baseInputClasses} ape:relative ${className || ''}`}\n            style={{ borderBottom: `2px solid ${statusColor}`, color: statusColor }}\n          />\n          {isLoading && (\n            <Flex className=\"ape:absolute ape:top-[5px] ape:right-[5px] ape:justify-center ape:h-full\">\n              <Spinner size={20} />\n            </Flex>\n          )}\n          <Text\n            style={{ fontSize: '10px', color: statusColor, visibility: status === 'default' ? 'hidden' : 'visible' }}\n          >\n            {status === 'error' ? 'Wrong Password' : 'Correct Password'}\n          </Text>\n        </Flex>\n      )\n    }\n\n    default:\n      return <input {...props} className={`${baseInputClasses} ${className || ''}`} />\n  }\n}\n\nexport default Input\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAWA,MAAM,WAAW,GAAmB;AAClC,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,OAAO;CACjB;AAED,MAAM,gBAAgB,GAAG,uFAAuF;AAEhH,MAAM,KAAK,GAAG,CAAC,EACb,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACqG,KAAI;IACjH,QAAQ,OAAO;AACb,QAAA,KAAK,QAAQ;YACX,QACEA,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,OAAO,EAAE,aAC/DC,GAAA,CAAA,OAAA,EAAA,EAAA,GAAW,KAAK,EAAE,SAAS,EAAE,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAAI,SAAS,IAAI,EAAE,CAAA,CAAE,GAAI,EACzEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAC1EA,GAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAClB,CAAA,EAAA,CACF;QAGX,KAAK,UAAU,EAAE;AACf,YAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAqB,CAAC;YACtD,QACED,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0DAA0D,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,EAAA,QAAA,EAAA,CAC1GC,GAAA,CAAA,OAAA,EAAA,EAAA,GACM,KAAK,EACT,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,GAAG,gBAAgB,CAAA,cAAA,EAAiB,SAAS,IAAI,EAAE,CAAA,CAAE,EAChE,KAAK,EAAE,EAAE,YAAY,EAAE,CAAA,UAAA,EAAa,WAAW,CAAA,CAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAA,CACvE,EACD,SAAS,KACRA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0EAA0E,EAAA,QAAA,EACxFA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,EAAA,CAChB,CACR,EACDA,IAAC,IAAI,EAAA,EACH,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,EAAE,EAAA,QAAA,EAEvG,MAAM,KAAK,OAAO,GAAG,gBAAgB,GAAG,kBAAkB,EAAA,CACtD,CAAA,EAAA,CACF;QAEX;AAEA,QAAA;AACE,YAAA,OAAOA,GAAA,CAAA,OAAA,EAAA,EAAA,GAAW,KAAK,EAAE,SAAS,EAAE,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAAI,SAAS,IAAI,EAAE,CAAA,CAAE,GAAI;;AAEtF;;;;"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/uikit-sdk/Input/Input.tsx"],"sourcesContent":["import { Input as ThemeInput, Spinner } from 'theme-ui'\nimport Flex from '../Flex'\nimport Text from '../Text'\nimport Search from '../Svg/Icons/Search'\n\ntype variant = 'search' | 'password' | 'text'\ntype inputStatus = 'default' | 'error' | 'success'\ntype color = 'gray' | 'red' | 'green'\n\ntype colorSchemeMap = Record<inputStatus, color>\n\nconst colorScheme: colorSchemeMap = {\n  default: 'gray',\n  error: 'red',\n  success: 'green',\n}\n\nconst Input = ({\n  variant,\n  width,\n  status,\n  isLoading,\n  ...props\n}: { variant?: variant; width?: string[]; status?: inputStatus; isLoading?: boolean } | any) => {\n  switch (variant) {\n    case 'search':\n      return (\n        <Flex sx={{ position: 'relative', width: width ? width : 'unset' }}>\n          <ThemeInput\n            {...props}\n            sx={{\n              background: 'white3',\n              border: 'none',\n              pl: '10px',\n              borderRadius: 'normal',\n              ':focus': { outline: 'none' },\n            }}\n          />\n          <Flex sx={{ position: 'absolute', right: 5, justifyContent: 'center', height: '100%' }}>\n            <Search color=\"grey\" />\n          </Flex>\n        </Flex>\n      )\n\n    case 'password': {\n      const statusColor = colorScheme[status as inputStatus]\n      return (\n        <Flex\n          sx={{\n            width: width ? width : '100%',\n            flexDirection: 'column',\n            alignItems: 'center',\n            gap: '5px',\n            position: 'relative',\n          }}\n        >\n          <ThemeInput\n            {...props}\n            type=\"password\"\n            sx={{\n              position: 'relative',\n              background: 'white3',\n              border: 'none',\n              borderBottom: `2px solid ${statusColor}`,\n              color: statusColor,\n              pl: '10px',\n              borderRadius: 'normal',\n              ':focus': { outline: 'none' },\n            }}\n          />\n          {isLoading && (\n            <Flex sx={{ position: 'absolute', top: '5px', right: '5px', justifyContent: 'center', height: '100%' }}>\n              <Spinner width=\"20px\" height=\"20px\" />\n            </Flex>\n          )}\n          <Text sx={{ fontSize: '10px', color: statusColor, visibility: status === 'default' ? 'hidden' : 'visible' }}>\n            {status === 'error' ? 'Wrong Password' : 'Correct Password'}\n          </Text>\n        </Flex>\n      )\n    }\n\n    default:\n      return (\n        <ThemeInput\n          {...props}\n          sx={{\n            background: 'white3',\n            border: 'none',\n            pl: '10px',\n            borderRadius: 'normal',\n            ':focus': { outline: 'none' },\n          }}\n        />\n      )\n  }\n}\n\nexport default Input\n"],"names":["_jsxs","_jsx","ThemeInput"],"mappings":";;;;;;AAWA,MAAM,WAAW,GAAmB;AAClC,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,OAAO;CACjB;AAED,MAAM,KAAK,GAAG,CAAC,EACb,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACiF,KAAI;IAC7F,QAAQ,OAAO;AACb,QAAA,KAAK,QAAQ;AACX,YAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,OAAO,EAAE,EAAA,QAAA,EAAA,CAChEC,GAAA,CAACC,OAAU,EAAA,EAAA,GACL,KAAK,EACT,EAAE,EAAE;AACF,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,MAAM,EAAE,MAAM;AACd,4BAAA,EAAE,EAAE,MAAM;AACV,4BAAA,YAAY,EAAE,QAAQ;AACtB,4BAAA,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC9B,yBAAA,EAAA,CACD,EACFD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,YACpFA,GAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAClB,CAAA,EAAA,CACF;QAGX,KAAK,UAAU,EAAE;AACf,YAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAqB,CAAC;AACtD,YAAA,QACED,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;oBACF,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM;AAC7B,oBAAA,aAAa,EAAE,QAAQ;AACvB,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,GAAG,EAAE,KAAK;AACV,oBAAA,QAAQ,EAAE,UAAU;iBACrB,EAAA,QAAA,EAAA,CAEDC,GAAA,CAACC,OAAU,EAAA,EAAA,GACL,KAAK,EACT,IAAI,EAAC,UAAU,EACf,EAAE,EAAE;AACF,4BAAA,QAAQ,EAAE,UAAU;AACpB,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,MAAM,EAAE,MAAM;4BACd,YAAY,EAAE,CAAA,UAAA,EAAa,WAAW,CAAA,CAAE;AACxC,4BAAA,KAAK,EAAE,WAAW;AAClB,4BAAA,EAAE,EAAE,MAAM;AACV,4BAAA,YAAY,EAAE,QAAQ;AACtB,4BAAA,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC9B,yBAAA,EAAA,CACD,EACD,SAAS,KACRD,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAA,QAAA,EACpGA,GAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,GAAG,EAAA,CACjC,CACR,EACDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,EAAE,EAAA,QAAA,EACxG,MAAM,KAAK,OAAO,GAAG,gBAAgB,GAAG,kBAAkB,EAAA,CACtD,CAAA,EAAA,CACF;QAEX;AAEA,QAAA;AACE,YAAA,QACEA,GAAA,CAACC,OAAU,OACL,KAAK,EACT,EAAE,EAAE;AACF,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,EAAE,EAAE,MAAM;AACV,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC9B,iBAAA,EAAA,CACD;;AAGV;;;;"}

package/dist/components/uikit-sdk/LoadingDots/index.d.ts

@@ -1,2 +1,2 @@
-declare const Dots: () => import("react/jsx-runtime").JSX.Element;
+declare const Dots: () => import("react").JSX.Element;
 export default Dots;

package/dist/components/uikit-sdk/LoadingDots/index.js

@@ -1,8 +1,27 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import Flex from '../Flex/index.js';
 
 const Dots = () => {
-    return (jsxs(Flex, { children: ["Loading ", jsx("span", { className: "ape-ellipsis" })] }));
+    return (jsxs(Flex, { children: ["Loading", ' ', jsx("span", { sx: {
+                    ':after': {
+                        display: 'inline-block',
+                        animation: ' ellipsis 1.25s infinite',
+                        content: "'.'",
+                        width: '1em',
+                        textAlign: 'left',
+                    },
+                    '@keyframes ellipsis': {
+                        '0%': {
+                            content: "'.'",
+                        },
+                        ' 33%': {
+                            content: "'..'",
+                        },
+                        '66%': {
+                            content: "'...'",
+                        },
+                    },
+                } })] }));
 };
 
 export { Dots as default };

package/dist/components/uikit-sdk/LoadingDots/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/LoadingDots/index.tsx"],"sourcesContent":["import Flex from '../Flex'\n\nconst Dots = () => {\n  return (\n    <Flex>\n      Loading <span className=\"ape-ellipsis\" />\n    </Flex>\n  )\n}\n\nexport default Dots\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAEA,MAAM,IAAI,GAAG,MAAK;IAChB,QACEA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EACKC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,cAAc,EAAA,CAAG,CAAA,EAAA,CACpC;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/LoadingDots/index.tsx"],"sourcesContent":["import Flex from '../Flex'\n\nconst Dots = () => {\n  return (\n    <Flex>\n      Loading{' '}\n      <span\n        sx={{\n          ':after': {\n            display: 'inline-block',\n            animation: ' ellipsis 1.25s infinite',\n            content: \"'.'\",\n            width: '1em',\n            textAlign: 'left',\n          },\n          '@keyframes ellipsis': {\n            '0%': {\n              content: \"'.'\",\n            },\n            ' 33%': {\n              content: \"'..'\",\n            },\n            '66%': {\n              content: \"'...'\",\n            },\n          },\n        }}\n      />\n    </Flex>\n  )\n}\n\nexport default Dots\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAEA,MAAM,IAAI,GAAG,MAAK;IAChB,QACEA,KAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CAAA,SAAA,EACK,GAAG,EACXC,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE;AACR,wBAAA,OAAO,EAAE,cAAc;AACvB,wBAAA,SAAS,EAAE,0BAA0B;AACrC,wBAAA,OAAO,EAAE,KAAK;AACd,wBAAA,KAAK,EAAE,KAAK;AACZ,wBAAA,SAAS,EAAE,MAAM;AAClB,qBAAA;AACD,oBAAA,qBAAqB,EAAE;AACrB,wBAAA,IAAI,EAAE;AACJ,4BAAA,OAAO,EAAE,KAAK;AACf,yBAAA;AACD,wBAAA,MAAM,EAAE;AACN,4BAAA,OAAO,EAAE,MAAM;AAChB,yBAAA;AACD,wBAAA,KAAK,EAAE;AACL,4BAAA,OAAO,EAAE,OAAO;AACjB,yBAAA;AACF,qBAAA;iBACF,EAAA,CACD,CAAA,EAAA,CACG;AAEX;;;;"}

package/dist/components/uikit-sdk/Modal/ModalHeader.js

@@ -1,11 +1,11 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import Flex from '../Flex/index.js';
+import { jsxs, Fragment, jsx } from 'theme-ui/jsx-runtime';
+import { Flex, Divider } from 'theme-ui';
+import styles from './styles.js';
 import IconButton from '../Button/IconButton.js';
 import Close from '../Svg/Icons/Close.js';
 
-const ModalHeader = ({ children, onDismiss, hideDivider, className, style, ...props }) => {
-    return (jsxs(Fragment, { children: [jsxs(Flex, { ...props, style: style, className: clsx('ape:justify-between ape:items-center ape:[&_svg]:fill-text ape:[&_svg]:ml-auto ape:[&_svg]:cursor-pointer ape:[&_button]:ml-auto', className), children: [children, onDismiss && jsx(IconButton, { icon: Close, color: "text", variant: "transparent", onClick: onDismiss })] }), !hideDivider && jsx("hr", { className: "ape:bg-white3 ape:h-px ape:border-none" })] }));
+const ModalHeader = ({ children, onDismiss, hideDivider, ...props }) => {
+    return (jsxs(Fragment, { children: [jsxs(Flex, { ...props, sx: styles.modalHead, children: [children, onDismiss && jsx(IconButton, { icon: Close, color: "text", variant: "transparent", onClick: onDismiss })] }), !hideDivider && jsx(Divider, {})] }));
 };
 
 export { ModalHeader as default };

package/dist/components/uikit-sdk/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../../src/components/uikit-sdk/Modal/ModalHeader.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../Flex'\nimport IconButton from '../Button/IconButton'\nimport Close from '../Svg/Icons/Close'\nimport { InternalProps } from './types'\n\nconst ModalHeader: React.FC<InternalProps> = ({ children, onDismiss, hideDivider, className, style, ...props }) => {\n  return (\n    <>\n      <Flex\n        {...props}\n        style={style}\n        className={clsx(\n          'ape:justify-between ape:items-center ape:[&_svg]:fill-text ape:[&_svg]:ml-auto ape:[&_svg]:cursor-pointer ape:[&_button]:ml-auto',\n          className,\n        )}\n      >\n        {children}\n        {onDismiss && <IconButton icon={Close} color=\"text\" variant=\"transparent\" onClick={onDismiss} />}\n      </Flex>\n      {!hideDivider && <hr className=\"ape:bg-white3 ape:h-px ape:border-none\" />}\n    </>\n  )\n}\n\nexport default ModalHeader\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAOA,MAAM,WAAW,GAA4B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,KAAI;IAChH,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAC,IAAI,EAAA,EAAA,GACC,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACb,kIAAkI,EAClI,SAAS,CACV,EAAA,QAAA,EAAA,CAEA,QAAQ,EACR,SAAS,IAAIE,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,SAAS,GAAI,CAAA,EAAA,CAC3F,EACN,CAAC,WAAW,IAAIA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,wCAAwC,EAAA,CAAG,CAAA,EAAA,CACzE;AAEP;;;;"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../../src/components/uikit-sdk/Modal/ModalHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { Divider, Flex } from 'theme-ui'\nimport style from './styles'\nimport IconButton from '../Button/IconButton'\nimport Close from '../Svg/Icons/Close'\nimport { InternalProps } from './types'\n\nconst ModalHeader: React.FC<InternalProps> = ({ children, onDismiss, hideDivider, ...props }) => {\n  return (\n    <>\n      <Flex {...props} sx={style.modalHead}>\n        {children}\n        {onDismiss && <IconButton icon={Close} color=\"text\" variant=\"transparent\" onClick={onDismiss} />}\n      </Flex>\n      {!hideDivider && <Divider />}\n    </>\n  )\n}\n\nexport default ModalHeader\n"],"names":["_jsxs","style","_jsx"],"mappings":";;;;;;AAOA,MAAM,WAAW,GAA4B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,KAAI;IAC9F,QACEA,4BACEA,IAAA,CAAC,IAAI,OAAK,KAAK,EAAE,EAAE,EAAEC,MAAK,CAAC,SAAS,EAAA,QAAA,EAAA,CACjC,QAAQ,EACR,SAAS,IAAIC,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,SAAS,GAAI,CAAA,EAAA,CAC3F,EACN,CAAC,WAAW,IAAIA,IAAC,OAAO,EAAA,EAAA,CAAG,CAAA,EAAA,CAC3B;AAEP;;;;"}