@ape.swap/bonds-sdk 6.2.13 → 6.2.14

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

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

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

@@ -1,21 +1,16 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useContext } from 'react';
+import { Box } from 'theme-ui';
 import { AnimatePresence, motion } from 'framer-motion';
-import clsx from 'clsx';
+import styles from './styles.js';
 import ModalHeader from './ModalHeader.js';
 import { Context } from '../../../contexts/ModalContext.js';
 import Text from '../Text/index.js';
 
-// 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 Modal = ({ children, onDismiss, open = true, title, zIndex = 'modal', onAnimationComplete, backdrop, hideDivider, ...props }) => {
     const { handleClose } = useContext(Context);
     const onClose = onDismiss || handleClose;
-    return (jsxs("div", { id: title, style: { zIndex: resolveZIndex(zIndex) }, children: [jsx(AnimatePresence, { children: open && (jsxs(motion.div, { initial: {
+    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: {
@@ -24,7 +19,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, 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 }))] }));
+                    }, 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 })] }));
 };
 
 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 { 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;;;;"}
+{"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;;;;"}

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

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

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

@@ -0,0 +1,47 @@
+const styles = {
+    container: {
+        padding: '20px',
+        background: 'white2',
+        borderRadius: 'normal',
+        color: 'text',
+        hr: {
+            background: '#DCD9D9',
+        },
+        position: 'fixed',
+        display: 'block',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '380px',
+        minWidth: ['95%', 'min(380px, 90%)', '380px'],
+        overflowY: ['auto', 'auto', 'auto', 'unset'],
+        maxHeight: 'calc(100% - 30px)',
+        maxWidth: '95vw',
+    },
+    backdrop: {
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        background: 'modalOverlay',
+        width: '100%',
+        height: '100%',
+        zIndex: 100,
+        transition: 'all 1s ease',
+    },
+    modalHead: {
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        svg: {
+            fill: 'text',
+            marginLeft: 'auto',
+            cursor: 'pointer',
+        },
+        button: {
+            ml: 'auto',
+        },
+    }};
+
+export { styles as default };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/uikit-sdk/Modal/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nconst styles: Record<string, ThemeUIStyleObject> = {\n  container: {\n    padding: '20px',\n    background: 'white2',\n    borderRadius: 'normal',\n    color: 'text',\n    hr: {\n      background: '#DCD9D9',\n    },\n    position: 'fixed',\n    display: 'block',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '380px',\n    minWidth: ['95%', 'min(380px, 90%)', '380px'],\n    overflowY: ['auto', 'auto', 'auto', 'unset'],\n    maxHeight: 'calc(100% - 30px)',\n    maxWidth: '95vw',\n  },\n  backdrop: {\n    position: 'fixed',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    background: 'modalOverlay',\n    width: '100%',\n    height: '100%',\n    zIndex: 100,\n    transition: 'all 1s ease',\n  },\n  modalHead: {\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    svg: {\n      fill: 'text',\n      marginLeft: 'auto',\n      cursor: 'pointer',\n    },\n    button: {\n      ml: 'auto',\n    },\n  },\n  modalFooter: {\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    pt: 9,\n    gap: 4,\n  },\n  cancelButton: {\n    background: 'transparent',\n    textDecoration: 'underline',\n    color: 'text',\n    cursor: 'pointer',\n    fontSize: 0,\n    fontWeight: 'normal',\n    p: 0,\n  },\n}\n\nexport default styles\n"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAAuC;AACjD,IAAA,SAAS,EAAE;AACT,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,EAAE,EAAE;AACF,YAAA,UAAU,EAAE,SAAS;AACtB,SAAA;AACD,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,GAAG,EAAE,KAAK;AACV,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,SAAS,EAAE,uBAAuB;AAClC,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,OAAO,CAAC;QAC7C,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AAC5C,QAAA,SAAS,EAAE,mBAAmB;AAC9B,QAAA,QAAQ,EAAE,MAAM;AACjB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,UAAU,EAAE,cAAc;AAC1B,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,MAAM;AACX,SAAA;AACF;;;;"}

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;
-    className?: string;
-    style?: React.CSSProperties;
+    sx?: ThemeUIStyleObject;
 }
 export interface ModalProps extends InternalProps {
     children: React.ReactNode;
     open?: boolean;
     title?: string;
     zIndex?: string | number;
-    backdrop?: React.CSSProperties;
+    backdrop?: SxProp['sx'];
     hideDivider?: boolean;
 }

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

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

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

@@ -1,23 +1,11 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'theme-ui/jsx-runtime';
 import React, { useRef, useState } from 'react';
-import clsx from 'clsx';
+import { Box, Flex } from 'theme-ui';
 import { AnimatePresence, motion } from 'framer-motion';
-import { sizes, positions } from './types.js';
+import { selectPadding, selectedExtraPadding, sizes, positions } from './types.js';
+import styles from './styles.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);
@@ -29,7 +17,15 @@ const Select = ({ children, active, width = 'fit-content', size = sizes.MEDIUM,
             input.dispatchEvent(new Event('change', { bubbles: true }));
         }
     };
-    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) => {
+    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) => {
                                 if (child?.props?.value !== active) {
                                     return null;
                                 }
@@ -37,7 +33,9 @@ const Select = ({ children, active, width = 'fit-content', size = sizes.MEDIUM,
                                     ...child?.props,
                                     active: true,
                                 });
-                            })), 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: {
+                            })), 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,
                                 top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined,
                                 bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined,
                             }, children: React.Children.map(children, (child) => {
@@ -46,7 +44,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, 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" }))] }));
+                            }) })) }), 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 })] }));
 };
 
 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 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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"}
+{"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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"}

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, className, ...props }: SelectItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectItem: ({ onClick, value, active, size, children, ...props }: SelectItemProps) => import("react").JSX.Element;
 export default SelectItem;

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

@@ -1,30 +1,19 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { sizes } from './types.js';
+import { jsx } from 'theme-ui/jsx-runtime';
+import { selectItemPadding, sizes } from './types.js';
+import { dynamicStyles } from './styles.js';
+import Flex from '../Flex/index.js';
 
-// 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 }) }));
+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 }) }));
 };
 
 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 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;;;;"}
+{"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;;;;"}

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

@@ -0,0 +1,4 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+declare const styles: Record<'container' | 'ul' | 'backdrop' | 'input', ThemeUIStyleObject>;
+export declare const dynamicStyles: Record<string, (props: any) => ThemeUIStyleObject>;
+export default styles;

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

@@ -0,0 +1,50 @@
+import { fontSizes } from './types.js';
+
+const styles = {
+    container: {
+        background: 'white3',
+        borderRadius: 'normal',
+        cursor: 'pointer',
+        width: 'fit-content',
+        height: 'fit-content',
+        position: 'relative',
+    },
+    ul: {
+        position: 'absolute',
+        background: 'white2',
+        borderRadius: 'normal',
+        cursor: 'pointer',
+        minWidth: '100%',
+        width: 'max-content',
+        overflow: 'hidden',
+        boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
+    },
+    backdrop: {
+        width: '98vw',
+        height: '100vh',
+        position: 'fixed',
+        background: 'transparent',
+        top: 0,
+        left: 0,
+    },
+    input: {
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        opacity: 0,
+        pointerEvents: 'none',
+        width: '100%',
+    },
+};
+const dynamicStyles = {
+    dropdownItem: ({ size }) => ({
+        width: '100%',
+        fontSize: fontSizes[size],
+        '*': {
+            fontSize: fontSizes[size],
+        },
+    }),
+};
+
+export { styles as default, dynamicStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/uikit-sdk/Select/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\nimport { fontSizes } from './types'\n\nconst styles: Record<'container' | 'ul' | 'backdrop' | 'input', ThemeUIStyleObject> = {\n  container: {\n    background: 'white3',\n    borderRadius: 'normal',\n    cursor: 'pointer',\n    width: 'fit-content',\n    height: 'fit-content',\n    position: 'relative',\n  },\n  ul: {\n    position: 'absolute',\n    background: 'white2',\n    borderRadius: 'normal',\n    cursor: 'pointer',\n    minWidth: '100%',\n    width: 'max-content',\n    overflow: 'hidden',\n    boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',\n  },\n  backdrop: {\n    width: '98vw',\n    height: '100vh',\n    position: 'fixed',\n    background: 'transparent',\n    top: 0,\n    left: 0,\n  },\n  input: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    opacity: 0,\n    pointerEvents: 'none',\n    width: '100%',\n  },\n}\n\ninterface Props {\n  active: boolean\n  size: keyof typeof fontSizes\n}\n\nexport const dynamicStyles: Record<string, (props: any) => ThemeUIStyleObject> = {\n  dropdownItem: ({ size }: Props) => ({\n    width: '100%',\n    fontSize: fontSizes[size],\n    '*': {\n      fontSize: fontSizes[size],\n    },\n  }),\n}\n\nexport default styles\n"],"names":[],"mappings":";;AAGA,MAAM,MAAM,GAA0E;AACpF,IAAA,SAAS,EAAE;AACT,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,SAAS,EAAE,iCAAiC;AAC7C,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,OAAO;AACf,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,UAAU,EAAE,aAAa;AACzB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;;AAQI,MAAM,aAAa,GAAuD;IAC/E,YAAY,EAAE,CAAC,EAAE,IAAI,EAAS,MAAM;AAClC,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;AACzB,QAAA,GAAG,EAAE;AACH,YAAA,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;AAC1B,SAAA;KACF,CAAC;;;;;"}

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

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

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

@@ -10,30 +10,30 @@ var sizes;
     sizes["MEDIUM"] = "md";
     sizes["LARGE"] = "lg";
 })(sizes || (sizes = {}));
-({
+const fontSizes = {
     [sizes.XSMALL]: 1,
     [sizes.SMALL]: 1,
     [sizes.MEDIUM]: 3,
     [sizes.LARGE]: 6,
-});
-({
+};
+const selectPadding = {
     [sizes.XSMALL]: 2,
     [sizes.SMALL]: 4,
     [sizes.MEDIUM]: 6,
     [sizes.LARGE]: 8,
-});
-({
+};
+const selectedExtraPadding = {
     [sizes.XSMALL]: 1,
     [sizes.SMALL]: 0,
     [sizes.MEDIUM]: 0,
     [sizes.LARGE]: 0,
-});
-({
+};
+const selectItemPadding = {
     [sizes.XSMALL]: 2,
     [sizes.SMALL]: 4,
     [sizes.MEDIUM]: 6,
     [sizes.LARGE]: 8,
-});
+};
 
-export { positions, sizes };
+export { fontSizes, positions, selectItemPadding, selectPadding, selectedExtraPadding, sizes };
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Select/types.ts"],"sourcesContent":["import React, { InputHTMLAttributes } from 'react'\n\nexport enum positions {\n  TOP = 'top',\n  BOTTOM = 'bottom',\n}\n\nexport enum sizes {\n  XSMALL = 'xsm',\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\nexport const fontSizes = {\n  [sizes.XSMALL]: 1,\n  [sizes.SMALL]: 1,\n  [sizes.MEDIUM]: 3,\n  [sizes.LARGE]: 6,\n}\n\nexport const selectPadding = {\n  [sizes.XSMALL]: 2,\n  [sizes.SMALL]: 4,\n  [sizes.MEDIUM]: 6,\n  [sizes.LARGE]: 8,\n}\n\nexport const selectedExtraPadding = {\n  [sizes.XSMALL]: 1,\n  [sizes.SMALL]: 0,\n  [sizes.MEDIUM]: 0,\n  [sizes.LARGE]: 0,\n}\n\nexport const selectItemPadding = {\n  [sizes.XSMALL]: 2,\n  [sizes.SMALL]: 4,\n  [sizes.MEDIUM]: 6,\n  [sizes.LARGE]: 8,\n}\n\ntype sizeProps = `${sizes}`\ntype positionProps = `${positions}`\n\nexport interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  active?: number | string\n  size?: sizeProps\n  width?: string | number\n  label?: JSX.Element\n  position?: positionProps\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SelectItemProps {\n  children: React.ReactNode\n  onClick?: (value: number | string) => void\n  url?: string\n  active?: boolean\n  size?: sizeProps\n  value: number | string\n  className?: string\n  sx?: any\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACX,IAAA,SAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAHW,SAAS,KAAT,SAAS,GAAA,EAAA,CAAA,CAAA;IAKT;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,KAAc;AACd,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,EALW,KAAK,KAAL,KAAK,GAAA,EAAA,CAAA,CAAA;CAOQ;AACvB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;AAChB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;;CAGW;AAC3B,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;AAChB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;;CAGkB;AAClC,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;AAChB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;;CAGe;AAC/B,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;AAChB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Select/types.ts"],"sourcesContent":["import React, { InputHTMLAttributes } from 'react'\n\nexport enum positions {\n  TOP = 'top',\n  BOTTOM = 'bottom',\n}\n\nexport enum sizes {\n  XSMALL = 'xsm',\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\nexport const fontSizes = {\n  [sizes.XSMALL]: 1,\n  [sizes.SMALL]: 1,\n  [sizes.MEDIUM]: 3,\n  [sizes.LARGE]: 6,\n}\n\nexport const selectPadding = {\n  [sizes.XSMALL]: 2,\n  [sizes.SMALL]: 4,\n  [sizes.MEDIUM]: 6,\n  [sizes.LARGE]: 8,\n}\n\nexport const selectedExtraPadding = {\n  [sizes.XSMALL]: 1,\n  [sizes.SMALL]: 0,\n  [sizes.MEDIUM]: 0,\n  [sizes.LARGE]: 0,\n}\n\nexport const selectItemPadding = {\n  [sizes.XSMALL]: 2,\n  [sizes.SMALL]: 4,\n  [sizes.MEDIUM]: 6,\n  [sizes.LARGE]: 8,\n}\n\ntype sizeProps = `${sizes}`\ntype positionProps = `${positions}`\n\nexport interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  active?: number | string\n  size?: sizeProps\n  width?: string | number\n  label?: JSX.Element\n  position?: positionProps\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport interface SelectItemProps {\n  children: React.ReactNode\n  onClick?: (value: number | string) => void\n  url?: string\n  active?: boolean\n  size?: sizeProps\n  value: number | string\n  sx?: any\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACX,IAAA,SAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAHW,SAAS,KAAT,SAAS,GAAA,EAAA,CAAA,CAAA;IAKT;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,KAAc;AACd,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,EALW,KAAK,KAAL,KAAK,GAAA,EAAA,CAAA,CAAA;AAOV,MAAM,SAAS,GAAG;AACvB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;AAChB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;;AAGX,MAAM,aAAa,GAAG;AAC3B,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;AAChB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;;AAGX,MAAM,oBAAoB,GAAG;AAClC,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;AAChB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;;AAGX,MAAM,iBAAiB,GAAG;AAC/B,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;AAChB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AACjB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;;;;;"}

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SkeletonProps } from './types';
-declare const Skeleton: ({ variant, animation, className, style, width, height, ...props }: SkeletonProps | any) => import("react/jsx-runtime").JSX.Element;
+declare const Skeleton: ({ variant, animation, ...props }: SkeletonProps | any) => React.JSX.Element;
 export default Skeleton;

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

@@ -1,13 +1,14 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsx } from 'theme-ui/jsx-runtime';
+import { Box } from 'theme-ui';
 import { variant, animation } from './types.js';
+import styles from './styles.js';
 
-const Skeleton = ({ variant: variant$1 = variant.RECT, animation: animation$1 = animation.PULSE, className, style, width, height, ...props }) => {
-    return (jsx("div", { ...props, className: clsx(animation$1 === animation.WAVES ? 'ape-skeleton-waves' : 'ape-skeleton-pulse', className), style: {
-            height,
-            width,
+const Skeleton = ({ variant: variant$1 = variant.RECT, animation: animation$1 = animation.PULSE, ...props }) => {
+    return (jsx(Box, { ...props, sx: {
+            ...(animation$1 === animation.WAVES ? styles.waves : styles.pulse),
+            height: props.height,
+            width: props.width,
             borderRadius: variant$1 === variant.RECT ? '10px' : '50%',
-            ...style,
         } }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Skeleton/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { SkeletonProps, animation as ANIMATION, variant as VARIANT } from './types'\n\nconst Skeleton = ({\n  variant = VARIANT.RECT,\n  animation = ANIMATION.PULSE,\n  className,\n  style,\n  width,\n  height,\n  ...props\n}: SkeletonProps | any) => {\n  return (\n    <div\n      {...props}\n      className={clsx(animation === ANIMATION.WAVES ? 'ape-skeleton-waves' : 'ape-skeleton-pulse', className)}\n      style={{\n        height,\n        width,\n        borderRadius: variant === VARIANT.RECT ? '10px' : '50%',\n        ...style,\n      }}\n    />\n  )\n}\n\nexport default Skeleton\n"],"names":["variant","VARIANT","animation","ANIMATION","_jsx"],"mappings":";;;;AAIA,MAAM,QAAQ,GAAG,CAAC,WAChBA,SAAO,GAAGC,OAAO,CAAC,IAAI,aACtBC,WAAS,GAAGC,SAAS,CAAC,KAAK,EAC3B,SAAS,EACT,KAAK,EACL,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACY,KAAI;IACxB,QACEC,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EACT,SAAS,EAAE,IAAI,CAACF,WAAS,KAAKC,SAAS,CAAC,KAAK,GAAG,oBAAoB,GAAG,oBAAoB,EAAE,SAAS,CAAC,EACvG,KAAK,EAAE;YACL,MAAM;YACN,KAAK;AACL,YAAA,YAAY,EAAEH,SAAO,KAAKC,OAAO,CAAC,IAAI,GAAG,MAAM,GAAG,KAAK;AACvD,YAAA,GAAG,KAAK;AACT,SAAA,EAAA,CACD;AAEN;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Skeleton/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from 'theme-ui'\nimport { SkeletonProps, animation as ANIMATION, variant as VARIANT } from './types'\nimport styles from './styles'\n\nconst Skeleton = ({ variant = VARIANT.RECT, animation = ANIMATION.PULSE, ...props }: SkeletonProps | any) => {\n  return (\n    <Box\n      {...props}\n      sx={{\n        ...(animation === ANIMATION.WAVES ? styles.waves : styles.pulse),\n        height: props.height,\n        width: props.width,\n        borderRadius: variant === VARIANT.RECT ? '10px' : '50%',\n      }}\n    />\n  )\n}\n\nexport default Skeleton\n"],"names":["variant","VARIANT","animation","ANIMATION","_jsx"],"mappings":";;;;;AAKA,MAAM,QAAQ,GAAG,CAAC,WAAEA,SAAO,GAAGC,OAAO,CAAC,IAAI,aAAEC,WAAS,GAAGC,SAAS,CAAC,KAAK,EAAE,GAAG,KAAK,EAAuB,KAAI;AAC1G,IAAA,QACEC,GAAA,CAAC,GAAG,OACE,KAAK,EACT,EAAE,EAAE;AACF,YAAA,IAAIF,WAAS,KAAKC,SAAS,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAChE,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,KAAK,EAAE,KAAK,CAAC,KAAK;AAClB,YAAA,YAAY,EAAEH,SAAO,KAAKC,OAAO,CAAC,IAAI,GAAG,MAAM,GAAG,KAAK;AACxD,SAAA,EAAA,CACD;AAEN;;;;"}

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

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

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

@@ -0,0 +1,43 @@
+import { keyframes } from '@emotion/react';
+
+const waves = keyframes({
+    from: { left: '-150px' },
+    to: { left: '100%' },
+});
+const pulse = keyframes({
+    '0%': { opacity: 1 },
+    '50%': { opacity: 0.4 },
+    '100%': { opacity: 1 },
+});
+const styles = {
+    waves: {
+        position: 'relative',
+        overflow: 'hidden',
+        transform: 'translate3d(0, 0, 0)',
+        borderRadius: '',
+        minHeight: '16px',
+        display: 'block',
+        backgroundColor: 'white2',
+        '&:before': {
+            content: `""`,
+            position: 'absolute',
+            backgroundImage: 'linear-gradient(90deg, transparent, rgba(243, 243, 243, 0.3), transparent)',
+            top: 0,
+            left: '-150px',
+            height: '100%',
+            width: '250px',
+            animation: `${waves} 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite`,
+        },
+    },
+    pulse: {
+        animation: `${pulse} 2s infinite ease-out`,
+        transform: 'translate3d(0, 0, 0)',
+        borderRadius: '2px',
+        minHeight: '20px',
+        display: 'block',
+        backgroundColor: 'white2',
+    },
+};
+
+export { styles as default };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/uikit-sdk/Skeleton/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\nimport { keyframes } from '@emotion/react'\n\nconst waves = keyframes({\n  from: { left: '-150px' },\n  to: { left: '100%' },\n})\n\nconst pulse = keyframes({\n  '0%': { opacity: 1 },\n  '50%': { opacity: 0.4 },\n  '100%': { opacity: 1 },\n})\n\nconst styles: Record<string, ThemeUIStyleObject> = {\n  waves: {\n    position: 'relative',\n    overflow: 'hidden',\n    transform: 'translate3d(0, 0, 0)',\n    borderRadius: '',\n    minHeight: '16px',\n    display: 'block',\n    backgroundColor: 'white2',\n    '&:before': {\n      content: `\"\"`,\n      position: 'absolute',\n      backgroundImage: 'linear-gradient(90deg, transparent, rgba(243, 243, 243, 0.3), transparent)',\n      top: 0,\n      left: '-150px',\n      height: '100%',\n      width: '250px',\n      animation: `${waves} 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite`,\n    },\n  },\n  pulse: {\n    animation: `${pulse} 2s infinite ease-out`,\n    transform: 'translate3d(0, 0, 0)',\n    borderRadius: '2px',\n    minHeight: '20px',\n    display: 'block',\n    backgroundColor: 'white2',\n  },\n}\n\nexport default styles\n"],"names":[],"mappings":";;AAGA,MAAM,KAAK,GAAG,SAAS,CAAC;AACtB,IAAA,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;AACxB,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;AACrB,CAAA,CAAC;AAEF,MAAM,KAAK,GAAG,SAAS,CAAC;AACtB,IAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACpB,IAAA,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;AACvB,IAAA,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,CAAA,CAAC;AAEF,MAAM,MAAM,GAAuC;AACjD,IAAA,KAAK,EAAE;AACL,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,SAAS,EAAE,sBAAsB;AACjC,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,UAAU,EAAE;AACV,YAAA,OAAO,EAAE,CAAA,EAAA,CAAI;AACb,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,eAAe,EAAE,4EAA4E;AAC7F,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,KAAK,EAAE,OAAO;YACd,SAAS,EAAE,CAAA,EAAG,KAAK,CAAA,2CAAA,CAA6C;AACjE,SAAA;AACF,KAAA;AACD,IAAA,KAAK,EAAE;QACL,SAAS,EAAE,CAAA,EAAG,KAAK,CAAA,qBAAA,CAAuB;AAC1C,QAAA,SAAS,EAAE,sBAAsB;AACjC,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,eAAe,EAAE,QAAQ;AAC1B,KAAA;;;;;"}

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

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { BoxProps } from 'theme-ui';
 export declare enum animation {
     WAVES = "waves",
     PULSE = "pulse"
@@ -9,7 +9,7 @@ export declare enum variant {
 }
 type Animation = `${animation}`;
 type Variant = `${variant}`;
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface SkeletonProps extends BoxProps {
     animation?: Animation;
     variant?: Variant;
     width?: string | number;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Skeleton/types.ts"],"sourcesContent":["import type React from 'react'\n\nexport enum animation {\n  WAVES = 'waves',\n  PULSE = 'pulse',\n}\n\nexport enum variant {\n  RECT = 'rect',\n  CIRCLE = 'circle',\n}\n\ntype Animation = `${animation}`\ntype Variant = `${variant}`\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  animation?: Animation\n  variant?: Variant\n  width?: string | number\n  height?: string | number\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHW,SAAS,KAAT,SAAS,GAAA,EAAA,CAAA,CAAA;IAKT;AAAZ,CAAA,UAAY,OAAO,EAAA;AACjB,IAAA,OAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,OAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAHW,OAAO,KAAP,OAAO,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Skeleton/types.ts"],"sourcesContent":["import { BoxProps } from 'theme-ui'\n\nexport enum animation {\n  WAVES = 'waves',\n  PULSE = 'pulse',\n}\n\nexport enum variant {\n  RECT = 'rect',\n  CIRCLE = 'circle',\n}\n\ntype Animation = `${animation}`\ntype Variant = `${variant}`\n\nexport interface SkeletonProps extends BoxProps {\n  animation?: Animation\n  variant?: Variant\n  width?: string | number\n  height?: string | number\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHW,SAAS,KAAT,SAAS,GAAA,EAAA,CAAA,CAAA;IAKT;AAAZ,CAAA,UAAY,OAAO,EAAA;AACjB,IAAA,OAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,OAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAHW,OAAO,KAAP,OAAO,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/components/uikit-sdk/Svg/Icons/AllChains.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
 
 const AllChains = ({ width }) => {
     return (jsx("svg", { width: width || '26', viewBox: "0 0 26 26", fill: "#fafafa", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { mask: "url(#mask0_4377_23303)", children: [jsx("circle", { cx: "12", cy: "12", r: "11", fill: "#fafafa" }), jsx("path", { d: "M0 12.9777C0.0118051 5.83109 5.86935 -0.0156193 13.0011 -9.12111e-05C20.1926 0.0161764 26.0074 5.84588 26 13.0332C25.9926 20.2375 20.138 26.062 12.8624 25.9992C5.72916 25.9378 0.0272993 20.1783 0 12.9777ZM10.6563 20.2242C11.2222 20.2331 11.9032 20.0659 12.5547 19.7598C13.4386 19.345 14.0879 18.6462 14.7077 17.929C15.1068 17.4676 14.9954 16.7525 14.5387 16.3606C14.0746 15.9621 13.3995 15.9769 12.9561 16.4028C12.6765 16.6712 12.4123 16.9544 12.132 17.2213C11.1875 18.1175 9.72666 18.1027 8.81693 17.1932C7.90573 16.2823 7.88802 14.8211 8.78299 13.8776C9.04344 13.6033 9.31865 13.3437 9.58205 13.0731C10.0454 12.5962 10.0484 11.8656 9.59312 11.4079C9.1342 10.9472 8.41409 10.9465 7.92934 11.4123C7.67036 11.6615 7.41434 11.9144 7.16274 12.1717C6.29433 13.0576 5.82803 14.1172 5.78745 15.3624C5.70113 18.0332 7.82826 20.2294 10.6563 20.2242ZM15.5016 5.78746C14.31 5.78894 13.2638 6.18454 12.374 6.97278C12.036 7.27151 11.7276 7.60426 11.4126 7.92813C10.9359 8.41837 10.9411 9.15189 11.417 9.61182C11.8811 10.0599 12.6005 10.0444 13.0808 9.57337C13.3575 9.302 13.6223 9.01879 13.9071 8.75703C14.4797 8.22982 15.1644 8.02647 15.9243 8.16918C16.8525 8.34369 17.487 8.89753 17.7652 9.80333C18.0434 10.7091 17.8176 11.5122 17.1617 12.1924C16.9189 12.4446 16.6651 12.6864 16.4202 12.9378C15.9546 13.4147 15.9494 14.1446 16.4039 14.6015C16.8628 15.0629 17.5837 15.0659 18.0677 14.6023C18.3341 14.3472 18.5967 14.0884 18.8535 13.8236C19.7027 12.9481 20.1646 11.9048 20.2096 10.6803C20.3092 7.99246 18.188 5.78746 15.5008 5.7882L15.5016 5.78746ZM15.4381 11.7407C15.399 11.2674 15.1895 10.8903 14.7342 10.6803C14.2753 10.4681 13.7979 10.5494 13.4113 10.9295C12.5769 11.7517 11.7468 12.5792 10.9271 13.4155C10.4446 13.9072 10.446 14.6104 10.9035 15.0807C11.3676 15.5576 12.0892 15.5702 12.5879 15.0814C13.4254 14.2621 14.2473 13.4273 15.0751 12.5977C15.3068 12.3655 15.4182 12.0801 15.4381 11.7407Z", fill: "#312F3A" })] }) }));