@janbox/storefront-ui 1.0.0

package/dist/lib/grid/grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/grid/grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/grid/grid/types.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+export interface GridResponsiveProps extends PropsWithCSS {
+    cols?: number;
+}
+type GridExtendedProps = ResponsiveDesign<GridResponsiveProps> & {
+    container?: boolean;
+};
+export type GridProps = ShallowMerge<JSX.IntrinsicElements['div'], GridExtendedProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/grid/grid/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/grid/grid/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,KAAK,iBAAiB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,GAAG;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/lib/grid/index.d.ts

@@ -0,0 +1,3 @@
+export * from './grid';
+export * from './cell';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/dist/lib/highlight-words/highlight-words.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const highlightWordsCore = require("highlight-words-core");
+require("clsx");
+require("lodash-es");
+require("../../theme/palette.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const HighlightWords = ({ highlightClassName, ...props }) => {
+  const chunks = highlightWordsCore.findAll(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: chunks.map((chunk, index) => {
+    const { end, highlight, start } = chunk;
+    const text = props.textToHighlight.substring(start, end);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: highlight ? /* @__PURE__ */ jsxRuntime.jsx("span", { css: { fontWeight: 500 }, className: stylesheet.cn(highlightClassName), children: text }) : text }, index);
+  }) });
+};
+exports.HighlightWords = HighlightWords;

package/dist/lib/highlight-words/highlight-words.d.ts

@@ -0,0 +1,3 @@
+import { HighlightWordsProps } from './types';
+export declare const HighlightWords: ({ highlightClassName, ...props }: HighlightWordsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=highlight-words.d.ts.map

package/dist/lib/highlight-words/highlight-words.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-words.d.ts","sourceRoot":"","sources":["../../../src/lib/highlight-words/highlight-words.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAI9C,eAAO,MAAM,cAAc,qCAAsC,mBAAmB,qDAkBnF,CAAC"}

package/dist/lib/highlight-words/highlight-words.js

@@ -0,0 +1,18 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Fragment } from "react";
+import { findAll } from "highlight-words-core";
+import "clsx";
+import "lodash-es";
+import "../../theme/palette.js";
+import { cn } from "../../utils/stylesheet.js";
+const HighlightWords = ({ highlightClassName, ...props }) => {
+  const chunks = findAll(props);
+  return /* @__PURE__ */ jsx(Fragment, { children: chunks.map((chunk, index) => {
+    const { end, highlight, start } = chunk;
+    const text = props.textToHighlight.substring(start, end);
+    return /* @__PURE__ */ jsx(Fragment, { children: highlight ? /* @__PURE__ */ jsx("span", { css: { fontWeight: 500 }, className: cn(highlightClassName), children: text }) : text }, index);
+  }) });
+};
+export {
+  HighlightWords
+};

package/dist/lib/highlight-words/index.d.ts

@@ -0,0 +1,3 @@
+export * from './highlight-words';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/highlight-words/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/highlight-words/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC"}

package/dist/lib/highlight-words/types.d.ts

@@ -0,0 +1,6 @@
+import { FindAllArgs } from 'highlight-words-core';
+import { ShallowMerge } from '../../types';
+export type HighlightWordsProps = ShallowMerge<FindAllArgs, {
+    highlightClassName?: string;
+}>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/highlight-words/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/highlight-words/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,WAAW,EACX;IACE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CACF,CAAC"}

package/dist/lib/icon/helpers.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_index = require("../../utils/index.cjs");
+const defaultProps = {
+  xs: {
+    size: 24
+  }
+};
+const getIconProps = (extended) => {
+  return utils_index.mergeComponentProps(defaultProps, extended);
+};
+exports.getIconProps = getIconProps;

package/dist/lib/icon/helpers.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+export declare const getIconProps: (extended: IconProps) => IconProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/icon/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/icon/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAUpC,eAAO,MAAM,YAAY,aAAc,SAAS,cAE/C,CAAC"}

package/dist/lib/icon/helpers.js

@@ -0,0 +1,12 @@
+import { mergeComponentProps } from "../../utils/index.js";
+const defaultProps = {
+  xs: {
+    size: 24
+  }
+};
+const getIconProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getIconProps
+};

package/dist/lib/icon/icon.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const helpers = require("./helpers.cjs");
+const svgLoader = require("../../components/svg-loader.cjs");
+const theme_screens = require("../../theme/screens.cjs");
+require("../../theme/palette.cjs");
+const Icon = ({ children: _children, ref, ..._props }) => {
+  const { source, xs, md, sm, lg, ...props } = helpers.getIconProps(_props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    svgLoader.SvgLoader,
+    {
+      source,
+      ...props,
+      css: [
+        createStyle(xs),
+        {
+          [theme_screens.mediaQuery("sm")]: createStyle(sm),
+          [theme_screens.mediaQuery("md")]: createStyle(md),
+          [theme_screens.mediaQuery("lg")]: createStyle(lg)
+        }
+      ],
+      width: void 0,
+      height: void 0,
+      ref
+    }
+  );
+};
+const createStyle = ({ css, size } = {}) => {
+  return [
+    {
+      width: size,
+      height: size,
+      ...css
+    }
+  ];
+};
+exports.Icon = Icon;

package/dist/lib/icon/icon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+export declare const Icon: ({ children: _children, ref, ..._props }: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon.d.ts.map

package/dist/lib/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/lib/icon/icon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAKzD,eAAO,MAAM,IAAI,4CAA6C,SAAS,qDAoBtE,CAAC"}

package/dist/lib/icon/icon.js

@@ -0,0 +1,38 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { getIconProps } from "./helpers.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+const Icon = ({ children: _children, ref, ..._props }) => {
+  const { source, xs, md, sm, lg, ...props } = getIconProps(_props);
+  return /* @__PURE__ */ jsx(
+    SvgLoader,
+    {
+      source,
+      ...props,
+      css: [
+        createStyle(xs),
+        {
+          [mediaQuery("sm")]: createStyle(sm),
+          [mediaQuery("md")]: createStyle(md),
+          [mediaQuery("lg")]: createStyle(lg)
+        }
+      ],
+      width: void 0,
+      height: void 0,
+      ref
+    }
+  );
+};
+const createStyle = ({ css, size } = {}) => {
+  return [
+    {
+      width: size,
+      height: size,
+      ...css
+    }
+  ];
+};
+export {
+  Icon
+};

package/dist/lib/icon/index.d.ts

@@ -0,0 +1,4 @@
+export * from './icon';
+export * from './types';
+export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/icon/types.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+import { PropsWithCSS, ResponsiveDesign } from '../../types';
+export interface IconResponsiveProps extends PropsWithCSS {
+    size?: number;
+}
+type IconHTMLProps = JSX.IntrinsicElements['svg'];
+export type IconExtendedProps = ResponsiveDesign<IconResponsiveProps> & {
+    source: string;
+};
+export type IconProps = IconHTMLProps & IconExtendedProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/icon/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,KAAK,aAAa,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAElD,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,GAAG;IACtE,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,iBAAiB,CAAC"}

package/dist/lib/icon-button/helpers.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const theme_screens = require("../../theme/screens.cjs");
+require("../../theme/palette.cjs");
+const utils_index = require("../../utils/index.cjs");
+const defaultProps = {
+  xs: {
+    size: "md",
+    css: {
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      borderBottomLeftRadius: 8,
+      borderBottomRightRadius: 8
+    }
+  },
+  variant: "text",
+  color: "primary",
+  type: "button"
+};
+const getIconButtonProps = (extended) => {
+  return utils_index.mergeComponentProps(
+    defaultProps,
+    extended,
+    ...theme_screens.screens.map((screen) => {
+      return (current) => {
+        var _a;
+        const size = (_a = current[screen]) == null ? void 0 : _a.size;
+        const propsBySize = {};
+        const { inputSize } = utils_index.getSizeVariantState(size);
+        propsBySize[screen] = {
+          css: {
+            minHeight: inputSize,
+            minWidth: inputSize
+          }
+        };
+        return propsBySize;
+      };
+    }),
+    extended
+  );
+};
+exports.getIconButtonProps = getIconButtonProps;

package/dist/lib/icon-button/helpers.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps } from './types';
+export declare const getIconButtonProps: (extended: IconButtonProps) => IconButtonProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/icon-button/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/icon-button/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoB1C,eAAO,MAAM,kBAAkB,aAAc,eAAe,oBAuB3D,CAAC"}

package/dist/lib/icon-button/helpers.js

@@ -0,0 +1,42 @@
+import { screens } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { mergeComponentProps, getSizeVariantState } from "../../utils/index.js";
+const defaultProps = {
+  xs: {
+    size: "md",
+    css: {
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      borderBottomLeftRadius: 8,
+      borderBottomRightRadius: 8
+    }
+  },
+  variant: "text",
+  color: "primary",
+  type: "button"
+};
+const getIconButtonProps = (extended) => {
+  return mergeComponentProps(
+    defaultProps,
+    extended,
+    ...screens.map((screen) => {
+      return (current) => {
+        var _a;
+        const size = (_a = current[screen]) == null ? void 0 : _a.size;
+        const propsBySize = {};
+        const { inputSize } = getSizeVariantState(size);
+        propsBySize[screen] = {
+          css: {
+            minHeight: inputSize,
+            minWidth: inputSize
+          }
+        };
+        return propsBySize;
+      };
+    }),
+    extended
+  );
+};
+export {
+  getIconButtonProps
+};

package/dist/lib/icon-button/icon-button.cjs

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const react$1 = require("@floating-ui/react");
+const helpers = require("./helpers.cjs");
+const index = require("../../hooks/use-ripple-effect/index.cjs");
+const utils_index = require("../../utils/index.cjs");
+const loadingWaiting = require("../../assets/svg/loading-waiting.svg.cjs");
+const theme_screens = require("../../theme/screens.cjs");
+const theme_palette = require("../../theme/palette.cjs");
+const common = require("../../utils/common.cjs");
+const icon = require("../icon/icon.cjs");
+const emotionHelpers = require("../../utils/emotion-helpers.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const IconButton = react.forwardRef((_props, ref) => {
+  var _a, _b, _c, _d;
+  const { color, variant, children, icon: icon$1, isLoading, ...rest } = helpers.getIconButtonProps(_props);
+  const {
+    dark,
+    light,
+    main,
+    contrastText,
+    placeholder: placeholderColor,
+    ariaDisabledSurface,
+    ariaDisabledText
+  } = utils_index.getColorShadesByVariant(color);
+  const buttonRef = react.useRef(null);
+  const { className } = index.useRippleEffect(buttonRef);
+  const mergedRef = react$1.useMergeRefs([ref, buttonRef]);
+  const createStyle = (screen) => {
+    const { css: css2 } = rest[screen] ?? {};
+    return [css2];
+  };
+  const css = [
+    {
+      display: "flex",
+      width: "fit-content",
+      height: "fit-content",
+      position: "relative",
+      justifyContent: "center",
+      alignItems: "center",
+      pointerEvents: common.ensureBoolean(rest["aria-disabled"]) ? "none" : void 0,
+      ":disabled": {
+        pointerEvents: "none"
+      }
+    },
+    isLoading && {
+      pointerEvents: "none",
+      "& > *:not([data-loading])": {
+        visibility: "hidden"
+      }
+    },
+    variant === "contained" && {
+      backgroundColor: isLoading ? placeholderColor : main,
+      color: contrastText,
+      ":hover": {
+        backgroundColor: dark
+      },
+      "&[aria-disabled=true]": {
+        backgroundColor: ariaDisabledSurface,
+        pointerEvents: "none"
+      }
+    },
+    variant === "outlined" && {
+      backgroundColor: "transparent",
+      color: isLoading ? placeholderColor : main,
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: isLoading ? placeholderColor : main,
+      ":hover": {
+        backgroundColor: light
+      },
+      "&[aria-disabled=true]": {
+        color: ariaDisabledText,
+        pointerEvents: "none",
+        borderColor: "currentcolor"
+      }
+    },
+    variant === "text" && {
+      backgroundColor: "transparent",
+      color: isLoading ? placeholderColor : main,
+      ":hover": {
+        backgroundColor: light
+      },
+      "&[aria-disabled=true]": {
+        color: ariaDisabledText
+      }
+    },
+    {
+      ":disabled": {
+        color: theme_palette.getColorVar("neutral.500"),
+        backgroundColor: theme_palette.getColorVar("neutral.300")
+      }
+    },
+    rest["aria-disabled"] && {
+      pointerEvents: "none"
+    },
+    createStyle("xs"),
+    {
+      [theme_screens.mediaQuery("sm")]: createStyle("sm"),
+      [theme_screens.mediaQuery("md")]: createStyle("md")
+    }
+  ];
+  const onClick = (e) => {
+    var _a2;
+    (_a2 = rest.onClick) == null ? void 0 : _a2.call(rest, e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      css,
+      ...utils_index.omitResponsiveProps(rest),
+      className: stylesheet.cn(rest.className, className),
+      onClick,
+      ref: mergedRef,
+      children: [
+        !!icon$1 && /* @__PURE__ */ jsxRuntime.jsx(
+          icon.Icon,
+          {
+            ...icon$1,
+            xs: {
+              size: utils_index.getSizeVariantState((_a = rest.xs) == null ? void 0 : _a.size).iconSize,
+              ...icon$1.xs
+            },
+            sm: {
+              size: utils_index.getSizeVariantState((_b = rest.sm) == null ? void 0 : _b.size).iconSize,
+              ...icon$1.sm
+            },
+            md: {
+              size: utils_index.getSizeVariantState((_c = rest.md) == null ? void 0 : _c.size).iconSize,
+              ...icon$1.md
+            },
+            lg: {
+              size: utils_index.getSizeVariantState((_d = rest.lg) == null ? void 0 : _d.size).iconSize,
+              ...icon$1.lg
+            }
+          }
+        ),
+        children,
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-loading": true, css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { css: emotionHelpers.animateSpin, source: loadingWaiting }) })
+      ]
+    }
+  );
+});
+exports.IconButton = IconButton;

package/dist/lib/icon-button/icon-button.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps } from './types';
+export declare const IconButton: import('react').ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/lib/icon-button/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/lib/icon-button/icon-button.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAU1C,eAAO,MAAM,UAAU,4HAqIrB,CAAC"}

package/dist/lib/icon-button/icon-button.js

@@ -0,0 +1,146 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import { getIconButtonProps } from "./helpers.js";
+import { useRippleEffect } from "../../hooks/use-ripple-effect/index.js";
+import { getColorShadesByVariant, getSizeVariantState, omitResponsiveProps } from "../../utils/index.js";
+import LoadingIcon from "../../assets/svg/loading-waiting.svg.js";
+import { mediaQuery } from "../../theme/screens.js";
+import { getColorVar } from "../../theme/palette.js";
+import { ensureBoolean } from "../../utils/common.js";
+import { Icon } from "../icon/icon.js";
+import { animateSpin } from "../../utils/emotion-helpers.js";
+import { cn } from "../../utils/stylesheet.js";
+const IconButton = forwardRef((_props, ref) => {
+  var _a, _b, _c, _d;
+  const { color, variant, children, icon, isLoading, ...rest } = getIconButtonProps(_props);
+  const {
+    dark,
+    light,
+    main,
+    contrastText,
+    placeholder: placeholderColor,
+    ariaDisabledSurface,
+    ariaDisabledText
+  } = getColorShadesByVariant(color);
+  const buttonRef = useRef(null);
+  const { className } = useRippleEffect(buttonRef);
+  const mergedRef = useMergeRefs([ref, buttonRef]);
+  const createStyle = (screen) => {
+    const { css: css2 } = rest[screen] ?? {};
+    return [css2];
+  };
+  const css = [
+    {
+      display: "flex",
+      width: "fit-content",
+      height: "fit-content",
+      position: "relative",
+      justifyContent: "center",
+      alignItems: "center",
+      pointerEvents: ensureBoolean(rest["aria-disabled"]) ? "none" : void 0,
+      ":disabled": {
+        pointerEvents: "none"
+      }
+    },
+    isLoading && {
+      pointerEvents: "none",
+      "& > *:not([data-loading])": {
+        visibility: "hidden"
+      }
+    },
+    variant === "contained" && {
+      backgroundColor: isLoading ? placeholderColor : main,
+      color: contrastText,
+      ":hover": {
+        backgroundColor: dark
+      },
+      "&[aria-disabled=true]": {
+        backgroundColor: ariaDisabledSurface,
+        pointerEvents: "none"
+      }
+    },
+    variant === "outlined" && {
+      backgroundColor: "transparent",
+      color: isLoading ? placeholderColor : main,
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: isLoading ? placeholderColor : main,
+      ":hover": {
+        backgroundColor: light
+      },
+      "&[aria-disabled=true]": {
+        color: ariaDisabledText,
+        pointerEvents: "none",
+        borderColor: "currentcolor"
+      }
+    },
+    variant === "text" && {
+      backgroundColor: "transparent",
+      color: isLoading ? placeholderColor : main,
+      ":hover": {
+        backgroundColor: light
+      },
+      "&[aria-disabled=true]": {
+        color: ariaDisabledText
+      }
+    },
+    {
+      ":disabled": {
+        color: getColorVar("neutral.500"),
+        backgroundColor: getColorVar("neutral.300")
+      }
+    },
+    rest["aria-disabled"] && {
+      pointerEvents: "none"
+    },
+    createStyle("xs"),
+    {
+      [mediaQuery("sm")]: createStyle("sm"),
+      [mediaQuery("md")]: createStyle("md")
+    }
+  ];
+  const onClick = (e) => {
+    var _a2;
+    (_a2 = rest.onClick) == null ? void 0 : _a2.call(rest, e);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      css,
+      ...omitResponsiveProps(rest),
+      className: cn(rest.className, className),
+      onClick,
+      ref: mergedRef,
+      children: [
+        !!icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            ...icon,
+            xs: {
+              size: getSizeVariantState((_a = rest.xs) == null ? void 0 : _a.size).iconSize,
+              ...icon.xs
+            },
+            sm: {
+              size: getSizeVariantState((_b = rest.sm) == null ? void 0 : _b.size).iconSize,
+              ...icon.sm
+            },
+            md: {
+              size: getSizeVariantState((_c = rest.md) == null ? void 0 : _c.size).iconSize,
+              ...icon.md
+            },
+            lg: {
+              size: getSizeVariantState((_d = rest.lg) == null ? void 0 : _d.size).iconSize,
+              ...icon.lg
+            }
+          }
+        ),
+        children,
+        isLoading && /* @__PURE__ */ jsx("span", { "data-loading": true, css: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Icon, { css: animateSpin, source: LoadingIcon }) })
+      ]
+    }
+  );
+});
+export {
+  IconButton
+};

package/dist/lib/icon-button/index.d.ts

@@ -0,0 +1,4 @@
+export * from './icon-button';
+export * from './types';
+export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/icon-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/icon-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}