@ape.swap/bonds-sdk 6.2.12 → 6.2.13

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,10 @@
 type variant = 'search' | 'password' | 'text';
 type inputStatus = 'default' | 'error' | 'success';
-declare const Input: ({ variant, width, status, isLoading, ...props }: {
+declare const Input: ({ variant, width, status, isLoading, 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,5 +1,5 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
-import { Input as Input$1, Spinner } from 'theme-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Spinner from '../Spinner/index.js';
 import Flex from '../Flex/index.js';
 import Text from '../Text/index.js';
 import Search from '../Svg/Icons/Search.js';
@@ -9,43 +9,17 @@ const colorScheme = {
     error: 'red',
     success: 'green',
 };
-const Input = ({ variant, width, status, isLoading, ...props }) => {
+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 }) => {
     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" }) })] }));
+            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" }) })] }));
         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' })] }));
+            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' })] }));
         }
         default:
-            return (jsx(Input$1, { ...props, sx: {
-                    background: 'white3',
-                    border: 'none',
-                    pl: '10px',
-                    borderRadius: 'normal',
-                    ':focus': { outline: 'none' },
-                } }));
+            return jsx("input", { ...props, className: `${baseInputClasses} ${className || ''}` });
     }
 };
 

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":"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"}
+{"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;;;;"}

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-white3 ape:h-px ape:border-none" })] }));
 };
 
 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-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;;;;"}

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,16 +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: {
+    return (jsxs("div", { id: title, style: { zIndex: resolveZIndex(zIndex) }, children: [jsx(AnimatePresence, { children: open && (jsxs(motion.div, { initial: {
                         opacity: 0,
                         transform: 'translate(-50%, -50%) scale(0.1)',
                     }, animate: {
@@ -19,7 +24,7 @@ const Modal = ({ children, onDismiss, open = true, title, zIndex = 'modal', onAn
                     }, 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 })] }));
+                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' }, ...props, className: clsx('ape:p-[20px] ape:bg-white2 ape:rounded-normal ape:text-text ape:fixed ape:block ape:top-1/2 ape:left-1/2', 'ape:w-[380px] ape:max-w-[95vw] ape:max-h-[calc(100%-30px)] ape:overflow-y-auto ape:lg:[overflow-y:unset]', 'ape:min-w-[95%] ape:sm:min-w-[min(380px,90%)] ape:md:min-w-[380px]', 'ape:[&_hr]:bg-[#DCD9D9]', 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={{\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            className={clsx(\n              'ape:p-[20px] ape:bg-white2 ape:rounded-normal ape:text-text ape:fixed ape:block ape:top-1/2 ape:left-1/2',\n              'ape:w-[380px] ape:max-w-[95vw] ape:max-h-[calc(100%-30px)] ape:overflow-y-auto ape:lg:[overflow-y:unset]',\n              'ape:min-w-[95%] ape:sm:min-w-[min(380px,90%)] ape:md:min-w-[380px]',\n              'ape:[&_hr]:bg-[#DCD9D9]',\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;AAExC,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,EAAA,QAAA,EAAA,CACtDC,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,SAAS,EAAE,IAAI,CACb,0GAA0G,EAC1G,0GAA0G,EAC1G,oEAAoE,EACpE,yBAAyB,EACzB,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,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAA,QAAA,EACvDA,IAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,GAC1E,CACf,EACA,QAAQ,CAAA,EAAA,CACE,CACd,EAAA,CACe,EACjB,IAAI,KACHA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,mIAAmI,EAC7I,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', 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,7 @@ 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 }, 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-[rgba(0,0,0,0.16)_0px_1px_4px]", 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 +46,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 };

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/uikit-sdk/Select/Select.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react'\nimport { Box, Flex } from 'theme-ui'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { SelectProps, selectPadding, sizes, positions, selectedExtraPadding } from './types'\nimport styles from './styles'\nimport Caret from '../Svg/Icons/Caret'\n\nconst Select = ({\n  children,\n  active,\n  width = 'fit-content',\n  size = sizes.MEDIUM,\n  position = positions.BOTTOM,\n  className,\n  label,\n  ...props\n}: SelectProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [open, setOpen] = useState(false)\n\n  const handleClick = () => setOpen((prev) => !prev)\n\n  const setNativeInput = (val: string) => {\n    const input = inputRef?.current\n\n    if (input) {\n      Object?.getOwnPropertyDescriptor?.(window.HTMLInputElement.prototype, 'value')?.set?.call(input, val)\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n    }\n  }\n\n  return (\n    <>\n      <Box sx={{ ...styles.container, width }} onClick={handleClick} className={className}>\n        <Flex\n          sx={{\n            padding: selectedExtraPadding[size],\n            pr: selectPadding[size],\n            columnGap: '10px',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            width: '100%',\n            overflow: 'hidden',\n          }}\n        >\n          {label ? (\n            <Box>{label}</Box>\n          ) : (\n            React.Children.map(children, (child) => {\n              if ((child as any)?.props?.value !== active) {\n                return null\n              }\n              return React.cloneElement(child as any, {\n                ...(child as any)?.props,\n                active: true,\n              })\n            })\n          )}\n          <Flex sx={{ minWidth: '10px' }}>\n            <Caret direction={open ? 'up' : 'down'} />\n          </Flex>\n        </Flex>\n        <AnimatePresence>\n          {open && (\n            <motion.div\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: 'fit-content' }}\n              transition={{ opacity: { duration: 0.2 } }}\n              exit={{ opacity: 0, height: 0 }}\n              sx={{\n                ...styles.ul,\n                zIndex: 10,\n                top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined,\n                bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined,\n              }}\n            >\n              {React.Children.map(children, (child) => {\n                return React.cloneElement(child as any, {\n                  ...(child as any)?.props,\n                  active: false,\n                  onClick: () => setNativeInput((child as any)?.props?.value),\n                })\n              })}\n            </motion.div>\n          )}\n        </AnimatePresence>\n        <input ref={inputRef} value={active || ''} aria-hidden=\"true\" tabIndex={-1} {...props} sx={styles.input} />\n      </Box>\n      {open && <div aria-hidden=\"true\" onClick={() => setOpen(false)} sx={styles.backdrop} />}\n    </>\n  )\n}\n\nexport default Select\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/uikit-sdk/Select/Select.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { SelectProps, sizes, positions } from './types'\nimport Caret from '../Svg/Icons/Caret'\n\n// px values ported 1:1 from the old theme-ui space scale indices in types.ts\nconst extraPaddingPx: Record<string, string> = {\n  [sizes.XSMALL]: '4px',\n  [sizes.SMALL]: '0px',\n  [sizes.MEDIUM]: '0px',\n  [sizes.LARGE]: '0px',\n}\nconst trailingPaddingPx: Record<string, string> = {\n  [sizes.XSMALL]: '6px',\n  [sizes.SMALL]: '10px',\n  [sizes.MEDIUM]: '14px',\n  [sizes.LARGE]: '18px',\n}\n\nconst Select = ({\n  children,\n  active,\n  width = 'fit-content',\n  size = sizes.MEDIUM,\n  position = positions.BOTTOM,\n  className,\n  label,\n  ...props\n}: SelectProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [open, setOpen] = useState(false)\n\n  const handleClick = () => setOpen((prev) => !prev)\n\n  const setNativeInput = (val: string) => {\n    const input = inputRef?.current\n\n    if (input) {\n      Object?.getOwnPropertyDescriptor?.(window.HTMLInputElement.prototype, 'value')?.set?.call(input, val)\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n    }\n  }\n\n  return (\n    <>\n      <div\n        className={clsx('ape:bg-white3 ape:rounded-normal ape:cursor-pointer ape:h-fit ape:relative', className)}\n        style={{ width }}\n        onClick={handleClick}\n      >\n        <div\n          className=\"ape:flex ape:items-center ape:justify-between ape:w-full ape:overflow-hidden\"\n          style={{ padding: extraPaddingPx[size], paddingRight: trailingPaddingPx[size], columnGap: '10px' }}\n        >\n          {label ? (\n            <div>{label}</div>\n          ) : (\n            React.Children.map(children, (child) => {\n              if ((child as any)?.props?.value !== active) {\n                return null\n              }\n              return React.cloneElement(child as any, {\n                ...(child as any)?.props,\n                active: true,\n              })\n            })\n          )}\n          <div className=\"ape:flex ape:min-w-[10px]\">\n            <Caret direction={open ? 'up' : 'down'} />\n          </div>\n        </div>\n        <AnimatePresence>\n          {open && (\n            <motion.div\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: 'fit-content' }}\n              transition={{ opacity: { duration: 0.2 } }}\n              exit={{ opacity: 0, height: 0 }}\n              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-[rgba(0,0,0,0.16)_0px_1px_4px]\"\n              style={{\n                top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined,\n                bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined,\n              }}\n            >\n              {React.Children.map(children, (child) => {\n                return React.cloneElement(child as any, {\n                  ...(child as any)?.props,\n                  active: false,\n                  onClick: () => setNativeInput((child as any)?.props?.value),\n                })\n              })}\n            </motion.div>\n          )}\n        </AnimatePresence>\n        <input\n          ref={inputRef}\n          value={active || ''}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          {...props}\n          className=\"ape:bottom-0 ape:left-0 ape:absolute ape:opacity-0 ape:pointer-events-none ape:w-full\"\n        />\n      </div>\n      {open && (\n        <div\n          aria-hidden=\"true\"\n          onClick={() => setOpen(false)}\n          className=\"ape:w-[98vw] ape:h-screen ape:fixed ape:bg-transparent ape:top-0 ape:left-0\"\n        />\n      )}\n    </>\n  )\n}\n\nexport default Select\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
 import { SelectItemProps } from './types';
-declare const SelectItem: ({ onClick, value, active, size, children, ...props }: SelectItemProps) => import("react").JSX.Element;
+declare const SelectItem: ({ onClick, value, active, size, children, className, ...props }: SelectItemProps) => import("react/jsx-runtime").JSX.Element;
 export default SelectItem;

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

@@ -1,19 +1,30 @@
-import { jsx } from 'theme-ui/jsx-runtime';
-import { selectItemPadding, sizes } from './types.js';
-import { dynamicStyles } from './styles.js';
-import Flex from '../Flex/index.js';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { sizes } from './types.js';
 
-const SelectItem = ({ onClick, value, active, size = sizes.MEDIUM, children, ...props }) => {
-    const style = dynamicStyles.dropdownItem({ size });
-    return (jsx(Flex, { as: "li", ...props, onClick: () => onClick?.(value), sx: {
-            padding: selectItemPadding[size],
-            listStyleType: 'none',
-            cursor: 'pointer',
-            borderRadius: 'normal',
-            '&:hover': {
-                backgroundColor: !active ? 'white3' : undefined,
-            },
-        }, children: jsx(Flex, { sx: style, children: children }) }));
+// px values ported 1:1 from the old theme-ui space scale indices in types.ts
+const itemPaddingPx = {
+    [sizes.XSMALL]: '6px',
+    [sizes.SMALL]: '10px',
+    [sizes.MEDIUM]: '14px',
+    [sizes.LARGE]: '18px',
+};
+// fontSizes indices ported 1:1 from types.ts (theme fontSizes scale). Applied
+// as a forced descendant override (not just inherited) — the original theme-ui
+// styles did the same via a `'*': { fontSize }` wildcard selector, since a
+// child like Text sets its own explicit font-size via its variant, which
+// plain CSS inheritance can't override on its own.
+// `!` (important) because this must reliably beat a descendant's own explicit
+// variant font-size class, and Tailwind's internal class ordering — not JSX
+// source order — decides who wins between two same-specificity utilities.
+const itemFontSizeClass = {
+    [sizes.XSMALL]: 'ape:text-[14px]! ape:[&_*]:text-[14px]!',
+    [sizes.SMALL]: 'ape:text-[14px]! ape:[&_*]:text-[14px]!',
+    [sizes.MEDIUM]: 'ape:text-[18px]! ape:[&_*]:text-[18px]!',
+    [sizes.LARGE]: 'ape:text-[24px]! ape:[&_*]:text-[24px]!',
+};
+const SelectItem = ({ onClick, value, active, size = sizes.MEDIUM, children, className, ...props }) => {
+    return (jsx("li", { ...props, onClick: () => onClick?.(value), className: clsx('ape:flex ape:list-none ape:cursor-pointer ape:rounded-normal', !active && 'ape:hover:bg-white3', className), style: { padding: itemPaddingPx[size] }, children: jsx("div", { className: clsx('ape:flex ape:w-full', itemFontSizeClass[size]), children: children }) }));
 };
 
 export { SelectItem as default };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.js","sources":["../../../../src/components/uikit-sdk/Select/SelectItem.tsx"],"sourcesContent":["import { SelectItemProps, selectItemPadding, sizes } from './types'\nimport { dynamicStyles } from './styles'\nimport Flex from '../Flex'\n\nconst SelectItem = ({ onClick, value, active, size = sizes.MEDIUM, children, ...props }: SelectItemProps) => {\n  const style = dynamicStyles.dropdownItem({ size })\n\n  return (\n    <Flex\n      as=\"li\"\n      {...props}\n      onClick={() => onClick?.(value)}\n      sx={{\n        padding: selectItemPadding[size],\n        listStyleType: 'none',\n        cursor: 'pointer',\n        borderRadius: 'normal',\n        '&:hover': {\n          backgroundColor: !active ? 'white3' : undefined,\n        },\n      }}\n    >\n      <Flex sx={style}>{children}</Flex>\n    </Flex>\n  )\n}\n\nexport default SelectItem\n"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB,KAAI;IAC1G,MAAM,KAAK,GAAG,aAAa,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IAElD,QACEA,IAAC,IAAI,EAAA,EACH,EAAE,EAAC,IAAI,EAAA,GACH,KAAK,EACT,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,EAC/B,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,iBAAiB,CAAC,IAAI,CAAC;AAChC,YAAA,aAAa,EAAE,MAAM;AACrB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,SAAS,EAAE;gBACT,eAAe,EAAE,CAAC,MAAM,GAAG,QAAQ,GAAG,SAAS;AAChD,aAAA;SACF,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,EAAA,CAC7B;AAEX;;;;"}
+{"version":3,"file":"SelectItem.js","sources":["../../../../src/components/uikit-sdk/Select/SelectItem.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { SelectItemProps, sizes } from './types'\n\n// px values ported 1:1 from the old theme-ui space scale indices in types.ts\nconst itemPaddingPx: Record<string, string> = {\n  [sizes.XSMALL]: '6px',\n  [sizes.SMALL]: '10px',\n  [sizes.MEDIUM]: '14px',\n  [sizes.LARGE]: '18px',\n}\n// fontSizes indices ported 1:1 from types.ts (theme fontSizes scale). Applied\n// as a forced descendant override (not just inherited) — the original theme-ui\n// styles did the same via a `'*': { fontSize }` wildcard selector, since a\n// child like Text sets its own explicit font-size via its variant, which\n// plain CSS inheritance can't override on its own.\n// `!` (important) because this must reliably beat a descendant's own explicit\n// variant font-size class, and Tailwind's internal class ordering — not JSX\n// source order — decides who wins between two same-specificity utilities.\nconst itemFontSizeClass: Record<string, string> = {\n  [sizes.XSMALL]: 'ape:text-[14px]! ape:[&_*]:text-[14px]!',\n  [sizes.SMALL]: 'ape:text-[14px]! ape:[&_*]:text-[14px]!',\n  [sizes.MEDIUM]: 'ape:text-[18px]! ape:[&_*]:text-[18px]!',\n  [sizes.LARGE]: 'ape:text-[24px]! ape:[&_*]:text-[24px]!',\n}\n\nconst SelectItem = ({\n  onClick,\n  value,\n  active,\n  size = sizes.MEDIUM,\n  children,\n  className,\n  ...props\n}: SelectItemProps) => {\n  return (\n    <li\n      {...props}\n      onClick={() => onClick?.(value)}\n      className={clsx(\n        'ape:flex ape:list-none ape:cursor-pointer ape:rounded-normal',\n        !active && 'ape:hover:bg-white3',\n        className,\n      )}\n      style={{ padding: itemPaddingPx[size] }}\n    >\n      <div className={clsx('ape:flex ape:w-full', itemFontSizeClass[size])}>{children}</div>\n    </li>\n  )\n}\n\nexport default SelectItem\n"],"names":["_jsx"],"mappings":";;;;AAGA;AACA,MAAM,aAAa,GAA2B;AAC5C,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK;AACrB,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAA2B;AAChD,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,yCAAyC;AACzD,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,yCAAyC;AACxD,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,yCAAyC;AACzD,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,yCAAyC;CACzD;AAED,MAAM,UAAU,GAAG,CAAC,EAClB,OAAO,EACP,KAAK,EACL,MAAM,EACN,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACQ,KAAI;IACpB,QACEA,GAAA,CAAA,IAAA,EAAA,EAAA,GACM,KAAK,EACT,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,EAC/B,SAAS,EAAE,IAAI,CACb,8DAA8D,EAC9D,CAAC,MAAM,IAAI,qBAAqB,EAChC,SAAS,CACV,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,EAAA,QAAA,EAEvCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,EAAA,CACnF;AAET;;;;"}

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

@@ -50,6 +50,7 @@ export interface SelectItemProps {
     active?: boolean;
     size?: sizeProps;
     value: number | string;
+    className?: string;
     sx?: any;
 }
 export {};