@ape.swap/bonds-sdk 6.3.0-test.69 → 7.0.0-test.0

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 { 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;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/uikit-sdk/Button/IconButton.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { resolveColor } from '../../../utils/resolveColor'\nimport Discord from '../Svg/Icons/Discord'\nimport { IconButtonProps, iconButtonVariants as variants } from './types'\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,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;;;;"}

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

@@ -1,6 +1,5 @@
 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",
@@ -24,7 +23,7 @@ export declare enum iconButtonVariants {
 type sizeProps = `${sizes}`;
 type variantProps = `${variants}`;
 type iconButtonVariantsProps = `${iconButtonVariants}`;
-export interface ButtonProps extends Omit<ThemeUIButtonProps, 'sx'> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     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',
 };
-const buttonPadding = {
-    [sizes.SMALL]: { x: 5, y: 2 },
-    [sizes.MEDIUM]: { x: 7, y: 3 },
-    [sizes.LARGE]: { x: 10, y: 6 },
-};
+({
+    [sizes.SMALL]: { },
+    [sizes.MEDIUM]: { },
+    [sizes.LARGE]: { },
+});
 var variants;
 (function (variants) {
     variants["PRIMARY"] = "primary";
@@ -30,5 +30,5 @@ var iconButtonVariants;
     iconButtonVariants["TRANSPARENT"] = "transparent";
 })(iconButtonVariants || (iconButtonVariants = {}));
 
-export { buttonFontSizes, buttonLineHeight, buttonPadding, iconButtonVariants, sizes, variants };
+export { buttonFontSizes, buttonLineHeight, 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 { 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;;;;"}
+{"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;;;;"}

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

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

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

@@ -1,4 +1,5 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { scales } from './types.js';
 
 const getScale = ({ scale }) => {
@@ -10,15 +11,17 @@ const getScale = ({ scale }) => {
             return '32px';
     }
 };
-const Checkbox = ({ scale = scales.SM, display = 'block', className, background, ...props }) => {
+// 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 scaleSize = getScale({ scale });
     const svgScale = scale === 'sm' ? 13 : 21;
-    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" }) })] }));
+    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" }) })] }));
 };
 
 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 { 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;;;;"}
+{"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;;;;"}

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

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { ThemeUICSSObject } from 'theme-ui';
+import type React from 'react';
 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?: ThemeUICSSObject['display'];
+    display?: React.CSSProperties['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 { 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;;;;"}
+{"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;;;;"}

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

@@ -1,5 +1,11 @@
 import React from 'react';
-declare const Flex: ({ children, ...props }: {
-    children: React.ReactNode;
-} | any) => React.JSX.Element;
+/**
+ * `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;
 export default Flex;

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

@@ -1,8 +1,12 @@
-import { jsx } from 'theme-ui/jsx-runtime';
-import { Flex as Flex$1 } from 'theme-ui';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 
-const Flex = ({ children, ...props }) => {
-    return jsx(Flex$1, { ...props, children: children });
+/**
+ * `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 }));
 };
 
 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 { 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;;;;"}
+{"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;;;;"}

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

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

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

@@ -1,52 +1,10 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
-import { Input as Input$1, Spinner } from 'theme-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../Flex/index.js';
-import Text from '../Text/index.js';
 import Search from '../Svg/Icons/Search.js';
 
-const colorScheme = {
-    default: 'gray',
-    error: 'red',
-    success: 'green',
-};
-const Input = ({ variant, width, status, isLoading, ...props }) => {
-    switch (variant) {
-        case 'search':
-            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, { 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$1, { ...props, sx: {
-                    background: 'white3',
-                    border: 'none',
-                    pl: '10px',
-                    borderRadius: 'normal',
-                    ':focus': { outline: 'none' },
-                } }));
-    }
+const baseInputClasses = 'ape:w-full ape:bg-white2 ape:pl-[10px] ape:text-medium ape:rounded-normal ape:border-none  ape:focus:outline-none';
+const Input = ({ variant, className, ...props }) => {
+    return (jsxs(Flex, { className: "ape:relative ape:w-full", children: [jsx("input", { ...props, className: `${baseInputClasses} ${className || ''}` }), variant === 'search' && (jsx(Flex, { className: "ape:absolute ape:right-3 ape:justify-center ape:h-full", children: jsx(Search, { color: "grey" }) }))] }));
 };
 
 export { Input as default };

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 { 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;;;;"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/uikit-sdk/Input/Input.tsx"],"sourcesContent":["import Flex from '../Flex'\nimport Search from '../Svg/Icons/Search'\n\ntype variant = 'search'\n\nconst baseInputClasses =\n  'ape:w-full ape:bg-white2 ape:pl-[10px] ape:text-medium ape:rounded-normal ape:border-none  ape:focus:outline-none'\n\nconst Input = ({ variant, className, ...props }: { variant?: variant; className?: string } | any) => {\n  return (\n    <Flex className=\"ape:relative ape:w-full\">\n      <input {...props} className={`${baseInputClasses} ${className || ''}`} />\n      {variant === 'search' && (\n        <Flex className=\"ape:absolute ape:right-3 ape:justify-center ape:h-full\">\n          <Search color=\"grey\" />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default Input\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAKA,MAAM,gBAAgB,GACpB,mHAAmH;AAErH,MAAM,KAAK,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmD,KAAI;IAClG,QACEA,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yBAAyB,aACvCC,GAAA,CAAA,OAAA,EAAA,EAAA,GAAW,KAAK,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAA,CAAA,EAAI,SAAS,IAAI,EAAE,EAAE,EAAA,CAAI,EACxE,OAAO,KAAK,QAAQ,KACnBA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wDAAwD,EAAA,QAAA,EACtEA,IAAC,MAAM,EAAA,EAAC,KAAK,EAAC,MAAM,GAAG,EAAA,CAClB,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

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

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

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

@@ -1,27 +1,8 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../Flex/index.js';
 
 const Dots = () => {
-    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: "'...'",
-                        },
-                    },
-                } })] }));
+    return (jsxs(Flex, { children: ["Loading ", jsx("span", { className: "ape-ellipsis" })] }));
 };
 
 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{' '}\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;;;;"}
+{"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;;;;"}

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

@@ -1,11 +1,11 @@
-import { jsxs, Fragment, jsx } from 'theme-ui/jsx-runtime';
-import { Flex, Divider } from 'theme-ui';
-import styles from './styles.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import Flex from '../Flex/index.js';
 import IconButton from '../Button/IconButton.js';
 import Close from '../Svg/Icons/Close.js';
 
-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, {})] }));
+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-text ape:h-px ape:border-none ape:mt-0.75" })] }));
 };
 
 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 { 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;;;;"}
+{"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-text ape:h-px ape:border-none ape:mt-0.75\" />}\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,mIAAmI,EACnI,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,kDAAkD,EAAA,CAAG,CAAA,EAAA,CACnF;AAEP;;;;"}

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ModalProps } from './types';
-declare const Modal: ({ children, onDismiss, open, title, zIndex, onAnimationComplete, backdrop, hideDivider, ...props }: ModalProps | any) => React.JSX.Element;
+declare const Modal: ({ children, onDismiss, open, title, zIndex, onAnimationComplete, backdrop, hideDivider, className, style, ...props }: ModalProps | any) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

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

@@ -1,25 +1,21 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { Box } from 'theme-ui';
 import { AnimatePresence, motion } from 'framer-motion';
-import styles from './styles.js';
+import clsx from 'clsx';
 import ModalHeader from './ModalHeader.js';
 import { Context } from '../../../contexts/ModalContext.js';
 import Text from '../Text/index.js';
 
-const Modal = ({ children, onDismiss, open = true, title, zIndex = 'modal', onAnimationComplete, backdrop, hideDivider, ...props }) => {
+// theme/base.ts zIndices — named tokens resolve through CSS vars, anything else is used as-is
+const namedZIndex = {
+    modal: 'var(--ape-z-index-modal)',
+    dropdown: 'var(--ape-z-index-dropdown)',
+};
+const resolveZIndex = (zIndex) => namedZIndex[zIndex] ?? zIndex;
+const Modal = ({ children, onDismiss, open = true, title, zIndex = 'modal', onAnimationComplete, backdrop, hideDivider, className, style, ...props }) => {
     const { handleClose } = useContext(Context);
     const onClose = onDismiss || handleClose;
-    return (jsxs(Box, { id: title, sx: { zIndex }, children: [jsx(AnimatePresence, { children: open && (jsxs(motion.div, { initial: {
-                        opacity: 0,
-                        transform: 'translate(-50%, -50%) scale(0.1)',
-                    }, animate: {
-                        opacity: 1,
-                        transform: 'translate(-50%, -50%) scale(1.0)',
-                    }, transition: {
-                        opacity: { duration: 0.2 },
-                        transform: { duration: 0.2 },
-                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' }, ...props, sx: { ...styles.container, zIndex }, onAnimationComplete: onAnimationComplete, children: [title && (jsx(ModalHeader, { onDismiss: onClose, hideDivider: hideDivider, children: jsx(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: title }) })), children] })) }), open && jsx(Box, { sx: { ...styles.backdrop, ...backdrop }, onClick: onClose })] }));
+    return (jsxs("div", { id: title, style: { zIndex: resolveZIndex(zIndex) }, children: [jsx(AnimatePresence, { children: open && (jsxs(motion.div, { initial: { opacity: 0, x: '-50%', y: '-50%', scale: 0.1 }, animate: { opacity: 1, x: '-50%', y: '-50%', scale: 1 }, transition: { duration: 0.2 }, exit: { opacity: 0, x: '-50%', y: '-50%', scale: 0 }, ...props, className: clsx('ape:p-5 ape:bg-white2 ape:rounded-normal ape:text-text ape:fixed ape:block ape:top-1/2 ape:left-1/2', 'ape:w-95 ape:max-w-[95vw] ape:max-h-[95vh] ape:overflow-y-auto ape:overflow-x-hidden', className), style: { zIndex: resolveZIndex(zIndex), ...style }, onAnimationComplete: onAnimationComplete, children: [title && (jsx(ModalHeader, { onDismiss: onClose, hideDivider: hideDivider, children: jsx(Text, { style: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: title }) })), children] })) }), open && (jsx("div", { className: "ape:fixed ape:inset-0 ape:bg-modal-overlay ape:w-full ape:h-full ape:z-100 ape:transition-all ape:duration-1000 ape:ease-[ease]", style: backdrop, onClick: onClose }))] }));
 };
 
 export { Modal as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Modal/index.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { Box } from 'theme-ui'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { ModalProps } from './types'\nimport style from './styles'\nimport ModalHeader from './ModalHeader'\nimport { Context as ModalContext } from '../../../contexts/ModalContext'\nimport Text from '../Text'\n\nconst Modal = ({\n  children,\n  onDismiss,\n  open = true,\n  title,\n  zIndex = 'modal',\n  onAnimationComplete,\n  backdrop,\n  hideDivider,\n  ...props\n}: ModalProps | any) => {\n  const { handleClose } = useContext(ModalContext)\n  const onClose = onDismiss || handleClose\n\n  return (\n    <Box id={title} sx={{ zIndex }}>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            initial={{\n              opacity: 0,\n              transform: 'translate(-50%, -50%) scale(0.1)',\n            }}\n            animate={{\n              opacity: 1,\n              transform: 'translate(-50%, -50%) scale(1.0)',\n            }}\n            transition={{\n              opacity: { duration: 0.2 },\n              transform: { duration: 0.2 },\n            }}\n            exit={{ opacity: 0, transform: 'translate(-50%, -50%) scale(0)' }}\n            {...props}\n            sx={{ ...style.container, zIndex }}\n            onAnimationComplete={onAnimationComplete}\n          >\n            {title && (\n              <ModalHeader onDismiss={onClose} hideDivider={hideDivider}>\n                <Text sx={{ fontSize: '22px', fontWeight: 700, lineHeight: '33px' }}>{title}</Text>\n              </ModalHeader>\n            )}\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n      {open && <Box sx={{ ...style.backdrop, ...backdrop }} onClick={onClose} />}\n    </Box>\n  )\n}\n\nexport default Modal\n"],"names":["ModalContext","_jsxs","_jsx","style"],"mappings":";;;;;;;;;AASA,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,IAAI,EACX,KAAK,EACL,MAAM,GAAG,OAAO,EAChB,mBAAmB,EACnB,QAAQ,EACR,WAAW,EACX,GAAG,KAAK,EACS,KAAI;IACrB,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAACA,OAAY,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,SAAS,IAAI,WAAW;IAExC,QACEC,IAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,aAC5BC,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACb,IAAI,KACHD,IAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE;AACP,wBAAA,OAAO,EAAE,CAAC;AACV,wBAAA,SAAS,EAAE,kCAAkC;AAC9C,qBAAA,EACD,OAAO,EAAE;AACP,wBAAA,OAAO,EAAE,CAAC;AACV,wBAAA,SAAS,EAAE,kCAAkC;AAC9C,qBAAA,EACD,UAAU,EAAE;AACV,wBAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC1B,wBAAA,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;qBAC7B,EACD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,gCAAgC,EAAE,EAAA,GAC7D,KAAK,EACT,EAAE,EAAE,EAAE,GAAGE,MAAK,CAAC,SAAS,EAAE,MAAM,EAAE,EAClC,mBAAmB,EAAE,mBAAmB,aAEvC,KAAK,KACJD,GAAA,CAAC,WAAW,IAAC,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAA,QAAA,EACvDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,EAAA,CACvE,CACf,EACA,QAAQ,CAAA,EAAA,CACE,CACd,EAAA,CACe,EACjB,IAAI,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,EAAE,GAAGC,MAAK,CAAC,QAAQ,EAAE,GAAG,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI,CAAA,EAAA,CACtE;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Modal/index.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport clsx from 'clsx'\nimport { ModalProps } from './types'\nimport ModalHeader from './ModalHeader'\nimport { Context as ModalContext } from '../../../contexts/ModalContext'\nimport Text from '../Text'\n\n// theme/base.ts zIndices — named tokens resolve through CSS vars, anything else is used as-is\nconst namedZIndex: Record<string, string> = {\n  modal: 'var(--ape-z-index-modal)',\n  dropdown: 'var(--ape-z-index-dropdown)',\n}\nconst resolveZIndex = (zIndex: string | number) => namedZIndex[zIndex as string] ?? zIndex\n\nconst Modal = ({\n  children,\n  onDismiss,\n  open = true,\n  title,\n  zIndex = 'modal',\n  onAnimationComplete,\n  backdrop,\n  hideDivider,\n  className,\n  style,\n  ...props\n}: ModalProps | any) => {\n  const { handleClose } = useContext(ModalContext)\n  const onClose = onDismiss || handleClose\n\n  return (\n    <div id={title} style={{ zIndex: resolveZIndex(zIndex) }}>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            initial={{ opacity: 0, x: '-50%', y: '-50%', scale: 0.1 }}\n            animate={{ opacity: 1, x: '-50%', y: '-50%', scale: 1 }}\n            transition={{ duration: 0.2 }}\n            exit={{ opacity: 0, x: '-50%', y: '-50%', scale: 0 }}\n            {...props}\n            className={clsx(\n              'ape:p-5 ape:bg-white2 ape:rounded-normal ape:text-text ape:fixed ape:block ape:top-1/2 ape:left-1/2',\n              'ape:w-95 ape:max-w-[95vw] ape:max-h-[95vh] ape:overflow-y-auto ape:overflow-x-hidden',\n              className,\n            )}\n            style={{ zIndex: resolveZIndex(zIndex), ...style }}\n            onAnimationComplete={onAnimationComplete}\n          >\n            {title && (\n              <ModalHeader onDismiss={onClose} hideDivider={hideDivider}>\n                <Text style={{ fontSize: '22px', fontWeight: 700, lineHeight: '33px' }}>{title}</Text>\n              </ModalHeader>\n            )}\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n      {open && (\n        <div\n          className=\"ape:fixed ape:inset-0 ape:bg-modal-overlay ape:w-full ape:h-full ape:z-100 ape:transition-all ape:duration-1000 ape:ease-[ease]\"\n          style={backdrop}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default Modal\n"],"names":["ModalContext","_jsxs","_jsx"],"mappings":";;;;;;;;AAQA;AACA,MAAM,WAAW,GAA2B;AAC1C,IAAA,KAAK,EAAE,0BAA0B;AACjC,IAAA,QAAQ,EAAE,6BAA6B;CACxC;AACD,MAAM,aAAa,GAAG,CAAC,MAAuB,KAAK,WAAW,CAAC,MAAgB,CAAC,IAAI,MAAM;AAE1F,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,IAAI,EACX,KAAK,EACL,MAAM,GAAG,OAAO,EAChB,mBAAmB,EACnB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACS,KAAI;IACrB,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAACA,OAAY,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,SAAS,IAAI,WAAW;IAExC,QACEC,cAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,aACtDC,GAAA,CAAC,eAAe,cACb,IAAI,KACHD,IAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,EACzD,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EACvD,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAA,GAChD,KAAK,EACT,SAAS,EAAE,IAAI,CACb,qGAAqG,EACrG,sFAAsF,EACtF,SAAS,CACV,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAClD,mBAAmB,EAAE,mBAAmB,EAAA,QAAA,EAAA,CAEvC,KAAK,KACJC,IAAC,WAAW,EAAA,EAAC,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAA,QAAA,EACvDA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,EAAA,CAC1E,CACf,EACA,QAAQ,IACE,CACd,EAAA,CACe,EACjB,IAAI,KACHA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,iIAAiI,EAC3I,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CAAA,EAAA,CACG;AAEV;;;;"}

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

@@ -1,18 +1,18 @@
 import React from 'react';
-import { ThemeUIStyleObject, SxProp } from 'theme-ui';
 export interface InternalProps {
     children?: React.ReactNode;
     onDismiss?: () => void;
     onAnimationComplete?: () => void;
     t?: (key: string) => string;
     hideDivider?: boolean;
-    sx?: ThemeUIStyleObject;
+    className?: string;
+    style?: React.CSSProperties;
 }
 export interface ModalProps extends InternalProps {
     children: React.ReactNode;
     open?: boolean;
     title?: string;
     zIndex?: string | number;
-    backdrop?: SxProp['sx'];
+    backdrop?: React.CSSProperties;
     hideDivider?: boolean;
 }

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SelectProps } from './types';
-declare const Select: ({ children, active, width, size, position, className, label, ...props }: SelectProps) => React.JSX.Element;
+declare const Select: ({ children, active, width, size, position, className, label, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;

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

@@ -1,11 +1,23 @@
-import { jsxs, Fragment, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { useRef, useState } from 'react';
-import { Box, Flex } from 'theme-ui';
+import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
-import { selectPadding, selectedExtraPadding, sizes, positions } from './types.js';
-import styles from './styles.js';
+import { sizes, positions } from './types.js';
 import Caret from '../Svg/Icons/Caret.js';
 
+// px values ported 1:1 from the old theme-ui space scale indices in types.ts
+const extraPaddingPx = {
+    [sizes.XSMALL]: '4px',
+    [sizes.SMALL]: '0px',
+    [sizes.MEDIUM]: '0px',
+    [sizes.LARGE]: '0px',
+};
+const trailingPaddingPx = {
+    [sizes.XSMALL]: '6px',
+    [sizes.SMALL]: '10px',
+    [sizes.MEDIUM]: '14px',
+    [sizes.LARGE]: '18px',
+};
 const Select = ({ children, active, width = 'fit-content', size = sizes.MEDIUM, position = positions.BOTTOM, className, label, ...props }) => {
     const inputRef = useRef(null);
     const [open, setOpen] = useState(false);
@@ -17,15 +29,7 @@ const Select = ({ children, active, width = 'fit-content', size = sizes.MEDIUM,
             input.dispatchEvent(new Event('change', { bubbles: true }));
         }
     };
-    return (jsxs(Fragment, { children: [jsxs(Box, { sx: { ...styles.container, width }, onClick: handleClick, className: className, children: [jsxs(Flex, { sx: {
-                            padding: selectedExtraPadding[size],
-                            pr: selectPadding[size],
-                            columnGap: '10px',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            width: '100%',
-                            overflow: 'hidden',
-                        }, children: [label ? (jsx(Box, { children: label })) : (React.Children.map(children, (child) => {
+    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx('ape:bg-white3 ape:rounded-normal ape:cursor-pointer ape:h-fit ape:relative ape:shadow-[rgba(0,0,0,0.16)_0px_1px_4px]', className), style: { width }, onClick: handleClick, children: [jsxs("div", { className: "ape:flex ape:items-center ape:justify-between ape:w-full ape:overflow-hidden", style: { padding: extraPaddingPx[size], paddingRight: trailingPaddingPx[size], columnGap: '10px' }, children: [label ? (jsx("div", { children: label })) : (React.Children.map(children, (child) => {
                                 if (child?.props?.value !== active) {
                                     return null;
                                 }
@@ -33,9 +37,12 @@ const Select = ({ children, active, width = 'fit-content', size = sizes.MEDIUM,
                                     ...child?.props,
                                     active: true,
                                 });
-                            })), jsx(Flex, { sx: { minWidth: '10px' }, children: jsx(Caret, { direction: open ? 'up' : 'down' }) })] }), jsx(AnimatePresence, { children: open && (jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { opacity: 0, height: 0 }, sx: {
-                                ...styles.ul,
-                                zIndex: 10,
+                            })), jsx("div", { className: "ape:flex ape:min-w-[10px]", children: jsx(Caret, { direction: open ? 'up' : 'down' }) })] }), jsx(AnimatePresence, { children: open && (jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { opacity: 0, height: 0 }, 
+                            // The comma inside `rgba(0,0,0,0.16)` breaks Tailwind's arbitrary-value
+                            // candidate scanning (it never generated any CSS for this class at all —
+                            // confirmed via the compiled output). Comma-free modern CSS color syntax
+                            // (space-separated rgb + slash-alpha) is required here instead.
+                            className: "ape:absolute ape:z-10 ape:bg-white2 ape:rounded-normal ape:cursor-pointer ape:min-w-full ape:w-max ape:overflow-hidden ape:shadow-[0px_1px_4px_rgb(0_0_0/0.16)]", style: {
                                 top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined,
                                 bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined,
                             }, children: React.Children.map(children, (child) => {
@@ -44,7 +51,7 @@ const Select = ({ children, active, width = 'fit-content', size = sizes.MEDIUM,
                                     active: false,
                                     onClick: () => setNativeInput(child?.props?.value),
                                 });
-                            }) })) }), jsx("input", { ref: inputRef, value: active || '', "aria-hidden": "true", tabIndex: -1, ...props, sx: styles.input })] }), open && jsx("div", { "aria-hidden": "true", onClick: () => setOpen(false), sx: styles.backdrop })] }));
+                            }) })) }), jsx("input", { ref: inputRef, value: active || '', "aria-hidden": "true", tabIndex: -1, ...props, className: "ape:bottom-0 ape:left-0 ape:absolute ape:opacity-0 ape:pointer-events-none ape:w-full" })] }), open && (jsx("div", { "aria-hidden": "true", onClick: () => setOpen(false), className: "ape:w-[98vw] ape:h-screen ape:fixed ape:bg-transparent ape:top-0 ape:left-0" }))] }));
 };
 
 export { Select as default };