@plumile/ui 0.1.55 → 0.1.57

package/lib/esm/atomic/atoms/badge/badge.css.js

@@ -1,8 +1,30 @@
-/* empty css                                          */
-/* empty css                         */
-import { createRuntimeFn as v } from "@vanilla-extract/recipes/createRuntimeFn";
-var x = v({ defaultClassName: "_1v7kjrra _1v7kjrr0 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9jf txvbqbco txvbqbdnx txvbqb1rf txvbqb8o txvbqbamf txvbqbanx _1v7kjrr1 txvbqbegx", variantClassNames: { tone: { neutral: "_1v7kjrrb _1v7kjrr4 txvbqbv4j txvbqbva3", info: "_1v7kjrrc _1v7kjrr5 txvbqbv2j txvbqbv9p", success: "_1v7kjrrd _1v7kjrr6 txvbqbv0v txvbqbv6p", warning: "_1v7kjrre _1v7kjrr7 txvbqbv0b txvbqbv65", danger: "_1v7kjrrf _1v7kjrr8 txvbqbuzr txvbqbv5l", accent: "_1v7kjrrg _1v7kjrr9 txvbqbv49 txvbqbv9z" }, loading: { on: "_1v7kjrrh _1v7kjrr3", off: "_1v7kjrri " } }, defaultVariants: { tone: "neutral", loading: "off" }, compoundVariants: [] });
-export {
-  x as badge
-};
-//# sourceMappingURL=badge.css.js.map
+/* empty css                                      */
+/* empty css                     */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/atoms/badge/badge.css.ts
+var t = e({
+	defaultClassName: "_1v7kjrra _1v7kjrr0 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9jf txvbqbco txvbqbdnx txvbqb1rf txvbqb8o txvbqbamf txvbqbanx _1v7kjrr1 txvbqbegx",
+	variantClassNames: {
+		tone: {
+			neutral: "_1v7kjrrb _1v7kjrr4 txvbqbv4j txvbqbva3",
+			info: "_1v7kjrrc _1v7kjrr5 txvbqbv2j txvbqbv9p",
+			success: "_1v7kjrrd _1v7kjrr6 txvbqbv0v txvbqbv6p",
+			warning: "_1v7kjrre _1v7kjrr7 txvbqbv0b txvbqbv65",
+			danger: "_1v7kjrrf _1v7kjrr8 txvbqbuzr txvbqbv5l",
+			accent: "_1v7kjrrg _1v7kjrr9 txvbqbv49 txvbqbv9z"
+		},
+		loading: {
+			on: "_1v7kjrrh _1v7kjrr3",
+			off: "_1v7kjrri "
+		}
+	},
+	defaultVariants: {
+		tone: "neutral",
+		loading: "off"
+	},
+	compoundVariants: []
+});
+//#endregion
+export { t as badge };
+
+//# sourceMappingURL=badge.css.js.map

package/lib/esm/atomic/atoms/badge/badge.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"badge.css.js","names":[],"sources":["../../../../../src/atomic/atoms/badge/badge.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst baseSprinkles = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  paddingY: 2,\n  paddingX: 3,\n  borderRadius: 'md',\n  fontSize: 'xs',\n  fontWeight: 'medium',\n  gap: 1,\n});\n\nconst baseTypography = sprinkles({\n  lineHeight: 1,\n});\n\nconst shimmerAnimation = keyframes({\n  '0%': {\n    transform: 'translateX(-120%)',\n  },\n  '50%': {\n    transform: 'translateX(0%)',\n  },\n  '100%': {\n    transform: 'translateX(120%)',\n  },\n});\n\nconst loadingBase = style({\n  position: 'relative',\n  overflow: 'hidden',\n  selectors: {\n    '&::after': {\n      content: '',\n      position: 'absolute',\n      inset: 0,\n      background: `linear-gradient(\n        100deg,\n        ${vars.colors.transparent} 0%,\n        color-mix(in srgb, ${vars.colors.white} 20%, transparent) 25%,\n        color-mix(in srgb, ${vars.colors.white} 90%, transparent) 50%,\n        color-mix(in srgb, ${vars.colors.white} 20%, transparent) 75%,\n        ${vars.colors.transparent} 100%\n      )`,\n      transform: 'translateX(-120%)',\n      animation: `${shimmerAnimation} 1.1s ease-in-out infinite`,\n      opacity: 0.9,\n      pointerEvents: 'none',\n      willChange: 'transform',\n    },\n  },\n});\n\nexport const badge = recipe({\n  base: [baseSprinkles, baseTypography],\n  variants: {\n    tone: {\n      neutral: sprinkles({\n        backgroundColor: 'brandLightGray',\n        color: 'brandDarkGray',\n      }),\n      info: sprinkles({\n        backgroundColor: 'primaryLight',\n        color: 'brandPrimaryRed',\n      }),\n      success: sprinkles({ backgroundColor: 'green-100', color: 'green-700' }),\n      warning: sprinkles({ backgroundColor: 'amber-100', color: 'amber-700' }),\n      danger: sprinkles({ backgroundColor: 'red-100', color: 'red-700' }),\n      accent: sprinkles({\n        backgroundColor: 'brandSecondaryOrange',\n        color: 'brandWhite',\n      }),\n    },\n    loading: {\n      on: loadingBase,\n      off: '',\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n    loading: 'off',\n  },\n  compoundVariants: [],\n});\n\nexport type BadgeVariants = RecipeVariants<typeof badge>;\n"],"mappings":""}

package/lib/esm/atomic/atoms/button/Button.js

@@ -1,58 +1,48 @@
-import { jsxs as L, jsx as n, Fragment as x } from "react/jsx-runtime";
-import { ButtonLoadingSpinnerSvg as B } from "../../../icons/ButtonLoadingSpinnerSvg.js";
-import { button as v, spinnerIcon as j, loadingIndicator as w, iconLeft as C, content as R, iconRight as S } from "./button.css.js";
 import { cx as e } from "../../../theme/tools.js";
-const k = (l) => {
-  const {
-    children: r,
-    className: d,
-    disabled: m,
-    isLoading: i = !1,
-    loadingLabel: h,
-    classes: s,
-    leftIcon: a,
-    rightIcon: c,
-    size: p,
-    variant: f,
-    width: g,
-    ref: u,
-    ...N
-  } = l, b = e(v({ variant: f, size: p, width: g }), d), I = !!i || !!m;
-  let t;
-  if (i)
-    t = /* @__PURE__ */ L("span", { className: e(w, s?.loadingIndicator), children: [
-      /* @__PURE__ */ n(
-        B,
-        {
-          className: e(j, s?.spinnerIcon),
-          width: 20,
-          height: 20
-        }
-      ),
-      h
-    ] });
-  else {
-    const o = [];
-    a != null && o.push(
-      /* @__PURE__ */ n("span", { className: e(C, s?.iconLeft), children: a }, "left-icon")
-    ), o.push(
-      /* @__PURE__ */ n("span", { className: e(R, s?.content), children: r }, "content")
-    ), c != null && o.push(
-      /* @__PURE__ */ n("span", { className: e(S, s?.iconRight), children: c }, "right-icon")
-    ), t = /* @__PURE__ */ n(x, { children: o });
-  }
-  return /* @__PURE__ */ n(
-    "button",
-    {
-      ref: u,
-      className: b,
-      disabled: I,
-      ...N,
-      children: t
-    }
-  );
+import { ButtonLoadingSpinnerSvg as t } from "../../../icons/ButtonLoadingSpinnerSvg.js";
+import { useUiTranslation as n } from "../../../i18n/useUiTranslation.js";
+import { button as r, content as i, iconLeft as a, iconRight as o, loadingIndicator as s, spinnerIcon as c } from "./button.css.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import "react";
+//#region src/atomic/atoms/button/Button.tsx
+var f = (f) => {
+	let { t: p } = n(), { children: m, className: h, disabled: g, isLoading: _ = !1, loadingLabel: v, classes: y, leftIcon: b, rightIcon: x, size: S, variant: C, width: w, ref: T, ...E } = f, D = e(r({
+		variant: C,
+		size: S,
+		width: w
+	}), h), O = !!_ || !!g, k;
+	if (_) {
+		let n = v ?? p("common.loading");
+		k = /* @__PURE__ */ d("span", {
+			className: e(s, y?.loadingIndicator),
+			children: [/* @__PURE__ */ u(t, {
+				className: e(c, y?.spinnerIcon),
+				width: 20,
+				height: 20
+			}), n]
+		});
+	} else {
+		let t = [];
+		b != null && t.push(/* @__PURE__ */ u("span", {
+			className: e(a, y?.iconLeft),
+			children: b
+		}, "left-icon")), t.push(/* @__PURE__ */ u("span", {
+			className: e(i, y?.content),
+			children: m
+		}, "content")), x != null && t.push(/* @__PURE__ */ u("span", {
+			className: e(o, y?.iconRight),
+			children: x
+		}, "right-icon")), k = /* @__PURE__ */ u(l, { children: t });
+	}
+	return /* @__PURE__ */ u("button", {
+		ref: T,
+		className: D,
+		disabled: O,
+		...E,
+		children: k
+	});
 };
-export {
-  k as Button
-};
-//# sourceMappingURL=Button.js.map
+//#endregion
+export { f as Button };
+
+//# sourceMappingURL=Button.js.map

package/lib/esm/atomic/atoms/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../src/atomic/atoms/button/Button.tsx"],"sourcesContent":["import React, { type Ref, type JSX } from 'react';\n\nimport { ButtonLoadingSpinnerSvg } from '../../../icons/ButtonLoadingSpinnerSvg.js';\n\nimport {\n  button,\n  content as contentClass,\n  iconLeft,\n  iconRight,\n  loadingIndicator,\n  spinnerIcon,\n  type ButtonVariants,\n} from './button.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype ButtonSlot =\n  | 'loadingIndicator'\n  | 'spinnerIcon'\n  | 'content'\n  | 'iconLeft'\n  | 'iconRight';\n\ntype SlotClasses<T extends string> = Partial<Record<T, string>>;\n\n// Omit the conflicting 'size' property from HTML button attributes\ntype Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & {\n  variant?: NonNullable<ButtonVariants>['variant'];\n  size?: NonNullable<ButtonVariants>['size'];\n  width?: NonNullable<ButtonVariants>['width'];\n  isLoading?: boolean;\n  loadingLabel?: React.ReactNode;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  ref?: Ref<HTMLButtonElement>;\n  classes?: SlotClasses<ButtonSlot>;\n};\n\nexport const Button = (props: Props): JSX.Element => {\n  const {\n    children,\n    className,\n    disabled,\n    isLoading = false,\n    loadingLabel,\n    classes,\n    leftIcon,\n    rightIcon,\n    size,\n    variant,\n    width,\n    ref,\n    ...rest\n  } = props;\n\n  const resolvedClassName = cx(button({ variant, size, width }), className);\n  const isDisabled = Boolean(isLoading) || Boolean(disabled);\n\n  let renderedContent: JSX.Element;\n\n  if (isLoading) {\n    renderedContent = (\n      <span className={cx(loadingIndicator, classes?.loadingIndicator)}>\n        <ButtonLoadingSpinnerSvg\n          className={cx(spinnerIcon, classes?.spinnerIcon)}\n          width={20}\n          height={20}\n        />\n        {loadingLabel}\n      </span>\n    );\n  } else {\n    const iconElements: JSX.Element[] = [];\n\n    if (leftIcon != null) {\n      iconElements.push(\n        <span className={cx(iconLeft, classes?.iconLeft)} key=\"left-icon\">\n          {leftIcon}\n        </span>,\n      );\n    }\n\n    iconElements.push(\n      <span className={cx(contentClass, classes?.content)} key=\"content\">\n        {children}\n      </span>,\n    );\n\n    if (rightIcon != null) {\n      iconElements.push(\n        <span className={cx(iconRight, classes?.iconRight)} key=\"right-icon\">\n          {rightIcon}\n        </span>,\n      );\n    }\n\n    renderedContent = <>{iconElements}</>;\n  }\n\n  return (\n    <button\n      ref={ref}\n      className={resolvedClassName}\n      disabled={isDisabled}\n      {...rest}\n    >\n      {renderedContent}\n    </button>\n  );\n};\n"],"names":["Button","props","children","className","disabled","isLoading","loadingLabel","classes","leftIcon","rightIcon","size","variant","width","ref","rest","resolvedClassName","cx","button","isDisabled","renderedContent","loadingIndicator","jsx","ButtonLoadingSpinnerSvg","spinnerIcon","iconElements","iconLeft","contentClass","iconRight"],"mappings":";;;;AAqCO,MAAMA,IAAS,CAACC,MAA8B;AACnD,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb,GAEEc,IAAoBC,EAAGC,EAAO,EAAE,SAAAN,GAAS,MAAAD,GAAM,OAAAE,GAAO,GAAGT,CAAS,GAClEe,IAAa,EAAQb,KAAc,EAAQD;AAEjD,MAAIe;AAEJ,MAAId;AACF,IAAAc,sBACG,QAAA,EAAK,WAAWH,EAAGI,GAAkBb,GAAS,gBAAgB,GAC7D,UAAA;AAAA,MAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWN,EAAGO,GAAahB,GAAS,WAAW;AAAA,UAC/C,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAETD;AAAA,IAAA,GACH;AAAA,OAEG;AACL,UAAMkB,IAA8B,CAAA;AAEpC,IAAIhB,KAAY,QACdgB,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWL,EAAGS,GAAUlB,GAAS,QAAQ,GAC5C,UAAAC,EAAA,GADmD,WAEtD;AAAA,IAAA,GAIJgB,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWL,EAAGU,GAAcnB,GAAS,OAAO,GAC/C,UAAAL,EAAA,GADsD,SAEzD;AAAA,IAAA,GAGEO,KAAa,QACfe,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWL,EAAGW,GAAWpB,GAAS,SAAS,GAC9C,UAAAE,EAAA,GADqD,YAExD;AAAA,IAAA,GAIJU,2BAAqB,UAAAK,EAAA,CAAa;AAAA,EACpC;AAEA,SACE,gBAAAH;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,WAAWE;AAAA,MACX,UAAUG;AAAA,MACT,GAAGJ;AAAA,MAEH,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../../../src/atomic/atoms/button/Button.tsx"],"sourcesContent":["import React, { type Ref, type JSX } from 'react';\n\nimport { ButtonLoadingSpinnerSvg } from '../../../icons/ButtonLoadingSpinnerSvg.js';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\nimport {\n  button,\n  content as contentClass,\n  iconLeft,\n  iconRight,\n  loadingIndicator,\n  spinnerIcon,\n  type ButtonVariants,\n} from './button.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype ButtonSlot =\n  | 'loadingIndicator'\n  | 'spinnerIcon'\n  | 'content'\n  | 'iconLeft'\n  | 'iconRight';\n\ntype SlotClasses<T extends string> = Partial<Record<T, string>>;\n\n// Omit the conflicting 'size' property from HTML button attributes\ntype Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & {\n  variant?: NonNullable<ButtonVariants>['variant'];\n  size?: NonNullable<ButtonVariants>['size'];\n  width?: NonNullable<ButtonVariants>['width'];\n  isLoading?: boolean;\n  loadingLabel?: React.ReactNode;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  ref?: Ref<HTMLButtonElement>;\n  classes?: SlotClasses<ButtonSlot>;\n};\n\nexport const Button = (props: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const {\n    children,\n    className,\n    disabled,\n    isLoading = false,\n    loadingLabel,\n    classes,\n    leftIcon,\n    rightIcon,\n    size,\n    variant,\n    width,\n    ref,\n    ...rest\n  } = props;\n\n  const resolvedClassName = cx(button({ variant, size, width }), className);\n  const isDisabled = Boolean(isLoading) || Boolean(disabled);\n\n  let renderedContent: JSX.Element;\n\n  if (isLoading) {\n    const resolvedLoadingLabel = loadingLabel ?? t('common.loading');\n    renderedContent = (\n      <span className={cx(loadingIndicator, classes?.loadingIndicator)}>\n        <ButtonLoadingSpinnerSvg\n          className={cx(spinnerIcon, classes?.spinnerIcon)}\n          width={20}\n          height={20}\n        />\n        {resolvedLoadingLabel}\n      </span>\n    );\n  } else {\n    const iconElements: JSX.Element[] = [];\n\n    if (leftIcon != null) {\n      iconElements.push(\n        <span className={cx(iconLeft, classes?.iconLeft)} key=\"left-icon\">\n          {leftIcon}\n        </span>,\n      );\n    }\n\n    iconElements.push(\n      <span className={cx(contentClass, classes?.content)} key=\"content\">\n        {children}\n      </span>,\n    );\n\n    if (rightIcon != null) {\n      iconElements.push(\n        <span className={cx(iconRight, classes?.iconRight)} key=\"right-icon\">\n          {rightIcon}\n        </span>,\n      );\n    }\n\n    renderedContent = <>{iconElements}</>;\n  }\n\n  return (\n    <button\n      ref={ref}\n      className={resolvedClassName}\n      disabled={isDisabled}\n      {...rest}\n    >\n      {renderedContent}\n    </button>\n  );\n};\n"],"mappings":";;;;;;;AAsCA,IAAa,KAAU,MAA8B;CACnD,IAAM,EAAE,SAAM,GAAkB,EAC1B,EACJ,aACA,cACA,aACA,eAAY,IACZ,iBACA,YACA,aACA,cACA,SACA,YACA,UACA,QACA,GAAG,MACD,GAEE,IAAoB,EAAG,EAAO;EAAE;EAAS;EAAM;EAAO,CAAC,EAAE,EAAU,EACnE,IAAa,EAAQ,KAAc,EAAQ,GAE7C;AAEJ,KAAI,GAAW;EACb,IAAM,IAAuB,KAAgB,EAAE,iBAAiB;AAChE,MACE,kBAAC,QAAD;GAAM,WAAW,EAAG,GAAkB,GAAS,iBAAiB;aAAhE,CACE,kBAAC,GAAD;IACE,WAAW,EAAG,GAAa,GAAS,YAAY;IAChD,OAAO;IACP,QAAQ;IACR,CAAA,EACD,EACI;;QAEJ;EACL,IAAM,IAA8B,EAAE;AAwBtC,EAtBI,KAAY,QACd,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW,EAAG,GAAU,GAAS,SAAS;aAC7C;GACI,EAF+C,YAE/C,CACR,EAGH,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW,EAAG,GAAc,GAAS,QAAQ;GAChD;GACI,EAFkD,UAElD,CACR,EAEG,KAAa,QACf,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW,EAAG,GAAW,GAAS,UAAU;aAC/C;GACI,EAFiD,aAEjD,CACR,EAGH,IAAkB,kBAAA,GAAA,EAAA,UAAG,GAAgB,CAAA;;AAGvC,QACE,kBAAC,UAAD;EACO;EACL,WAAW;EACX,UAAU;EACV,GAAI;YAEH;EACM,CAAA"}

package/lib/esm/atomic/atoms/button/LinkButton.js

@@ -1,63 +1,49 @@
-import { jsx as n, jsxs as v, Fragment as B } from "react/jsx-runtime";
-import { Link as C } from "@plumile/router";
-import { ButtonLoadingSpinnerSvg as I } from "../../../icons/ButtonLoadingSpinnerSvg.js";
-import { cx as x } from "../../../theme/tools.js";
-import { button as D, activeButton as j, loadingIndicator as k, spinnerIcon as w, iconLeft as S, content as z, iconRight as E } from "./button.css.js";
-const A = (d) => {
-  const {
-    children: a,
-    className: m,
-    isDisabled: h,
-    isLoading: l = !1,
-    leftIcon: s,
-    loadingLabel: p,
-    ref: f,
-    rightIcon: t,
-    size: u,
-    variant: o,
-    width: g,
-    ...N
-  } = d, b = x(D({ variant: o, size: u, width: g }), m), c = !!l || !!h, L = o === "icon";
-  let i;
-  if (l)
-    i = /* @__PURE__ */ v("span", { className: k, children: [
-      /* @__PURE__ */ n(
-        I,
-        {
-          className: w,
-          width: 20,
-          height: 20
-        }
-      ),
-      p
-    ] });
-  else if (L)
-    i = /* @__PURE__ */ n("span", { children: s ?? t ?? a ?? null });
-  else {
-    const e = [];
-    s != null && e.push(
-      /* @__PURE__ */ n("span", { className: S, children: s }, "left-icon")
-    ), e.push(
-      /* @__PURE__ */ n("span", { className: z, children: a }, "content")
-    ), t != null && e.push(
-      /* @__PURE__ */ n("span", { className: E, children: t }, "right-icon")
-    ), i = /* @__PURE__ */ n(B, { children: e });
-  }
-  let r;
-  return c && (r = !0), /* @__PURE__ */ n(
-    C,
-    {
-      ...N,
-      ref: f,
-      className: b,
-      activeClassName: j({ variant: o }),
-      isDisabled: c,
-      "aria-disabled": r,
-      children: i
-    }
-  );
+import { cx as e } from "../../../theme/tools.js";
+import { ButtonLoadingSpinnerSvg as t } from "../../../icons/ButtonLoadingSpinnerSvg.js";
+import { activeButton as n, button as r, content as i, iconLeft as a, iconRight as o, loadingIndicator as s, spinnerIcon as c } from "./button.css.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Link as f } from "@plumile/router";
+//#region src/atomic/atoms/button/LinkButton.tsx
+var p = (p) => {
+	let { children: m, className: h, isDisabled: g, isLoading: _ = !1, leftIcon: v, loadingLabel: y, ref: b, rightIcon: x, size: S, variant: C, width: w, ...T } = p, E = e(r({
+		variant: C,
+		size: S,
+		width: w
+	}), h), D = !!_ || !!g, O = C === "icon", k;
+	if (_) k = /* @__PURE__ */ d("span", {
+		className: s,
+		children: [/* @__PURE__ */ u(t, {
+			className: c,
+			width: 20,
+			height: 20
+		}), y]
+	});
+	else if (O) k = /* @__PURE__ */ u("span", { children: v ?? x ?? m ?? null });
+	else {
+		let e = [];
+		v != null && e.push(/* @__PURE__ */ u("span", {
+			className: a,
+			children: v
+		}, "left-icon")), e.push(/* @__PURE__ */ u("span", {
+			className: i,
+			children: m
+		}, "content")), x != null && e.push(/* @__PURE__ */ u("span", {
+			className: o,
+			children: x
+		}, "right-icon")), k = /* @__PURE__ */ u(l, { children: e });
+	}
+	let A;
+	return D && (A = !0), /* @__PURE__ */ u(f, {
+		...T,
+		ref: b,
+		className: E,
+		activeClassName: n({ variant: C }),
+		isDisabled: D,
+		"aria-disabled": A,
+		children: k
+	});
 };
-export {
-  A as LinkButton
-};
-//# sourceMappingURL=LinkButton.js.map
+//#endregion
+export { p as LinkButton };
+
+//# sourceMappingURL=LinkButton.js.map

package/lib/esm/atomic/atoms/button/LinkButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.js","sources":["../../../../../src/atomic/atoms/button/LinkButton.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type JSX,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { Link } from '@plumile/router';\n\nimport { ButtonLoadingSpinnerSvg } from '../../../icons/ButtonLoadingSpinnerSvg.js';\nimport { cx } from '../../../theme/tools.js';\nimport {\n  activeButton,\n  button,\n  content as contentClass,\n  iconLeft,\n  iconRight,\n  loadingIndicator,\n  spinnerIcon,\n  type ButtonVariants,\n} from './button.css.js';\n\ntype LinkProps = ComponentPropsWithoutRef<typeof Link>;\n\ntype Props = Omit<LinkProps, 'children' | 'className'> & {\n  children: ReactNode;\n  className?: string;\n  variant?: NonNullable<ButtonVariants>['variant'];\n  size?: NonNullable<ButtonVariants>['size'];\n  width?: NonNullable<ButtonVariants>['width'];\n  isLoading?: boolean;\n  loadingLabel?: ReactNode;\n  leftIcon?: ReactNode;\n  rightIcon?: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n};\n\nexport const LinkButton = (props: Props): JSX.Element => {\n  const {\n    children,\n    className,\n    isDisabled,\n    isLoading = false,\n    leftIcon,\n    loadingLabel,\n    ref,\n    rightIcon,\n    size,\n    variant,\n    width,\n    ...rest\n  } = props;\n\n  const resolvedClassName = cx(button({ variant, size, width }), className);\n  const disabled = Boolean(isLoading) || Boolean(isDisabled);\n  const isIconVariant = variant === 'icon';\n\n  let renderedContent: JSX.Element;\n\n  if (isLoading) {\n    renderedContent = (\n      <span className={loadingIndicator}>\n        <ButtonLoadingSpinnerSvg\n          className={spinnerIcon}\n          width={20}\n          height={20}\n        />\n        {loadingLabel}\n      </span>\n    );\n  } else if (isIconVariant) {\n    const iconContent = leftIcon ?? rightIcon ?? children ?? null;\n\n    renderedContent = <span>{iconContent}</span>;\n  } else {\n    const iconElements: JSX.Element[] = [];\n\n    if (leftIcon != null) {\n      iconElements.push(\n        <span className={iconLeft} key=\"left-icon\">\n          {leftIcon}\n        </span>,\n      );\n    }\n\n    iconElements.push(\n      <span className={contentClass} key=\"content\">\n        {children}\n      </span>,\n    );\n\n    if (rightIcon != null) {\n      iconElements.push(\n        <span className={iconRight} key=\"right-icon\">\n          {rightIcon}\n        </span>,\n      );\n    }\n\n    renderedContent = <>{iconElements}</>;\n  }\n\n  let ariaDisabled: true | undefined;\n  if (disabled) {\n    ariaDisabled = true;\n  }\n\n  return (\n    <Link\n      {...rest}\n      ref={ref}\n      className={resolvedClassName}\n      activeClassName={activeButton({ variant })}\n      isDisabled={disabled}\n      aria-disabled={ariaDisabled}\n    >\n      {renderedContent}\n    </Link>\n  );\n};\n"],"names":["LinkButton","props","children","className","isDisabled","isLoading","leftIcon","loadingLabel","ref","rightIcon","size","variant","width","rest","resolvedClassName","cx","button","disabled","isIconVariant","renderedContent","jsxs","loadingIndicator","jsx","ButtonLoadingSpinnerSvg","spinnerIcon","iconElements","iconLeft","contentClass","iconRight","ariaDisabled","Link","activeButton"],"mappings":";;;;;AAoCO,MAAMA,IAAa,CAACC,MAA8B;AACvD,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,KAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDZ,GAEEa,IAAoBC,EAAGC,EAAO,EAAE,SAAAL,GAAS,MAAAD,GAAM,OAAAE,GAAO,GAAGT,CAAS,GAClEc,IAAW,EAAQZ,KAAc,EAAQD,GACzCc,IAAgBP,MAAY;AAElC,MAAIQ;AAEJ,MAAId;AACF,IAAAc,IACE,gBAAAC,EAAC,QAAA,EAAK,WAAWC,GACf,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAETjB;AAAA,IAAA,GACH;AAAA,WAEOW;AAGT,IAAAC,IAAkB,gBAAAG,EAAC,UAAM,UAFLhB,KAAYG,KAAaP,KAAY,KAEhC,CAAY;AAAA,OAChC;AACL,UAAMuB,IAA8B,CAAA;AAEpC,IAAInB,KAAY,QACdmB,EAAa;AAAA,MACX,gBAAAH,EAAC,QAAA,EAAK,WAAWI,GACd,eAD4B,WAE/B;AAAA,IAAA,GAIJD,EAAa;AAAA,MACX,gBAAAH,EAAC,QAAA,EAAK,WAAWK,GACd,UAAAzB,KADgC,SAEnC;AAAA,IAAA,GAGEO,KAAa,QACfgB,EAAa;AAAA,MACX,gBAAAH,EAAC,QAAA,EAAK,WAAWM,GACd,eAD6B,YAEhC;AAAA,IAAA,GAIJT,2BAAqB,UAAAM,EAAA,CAAa;AAAA,EACpC;AAEA,MAAII;AACJ,SAAIZ,MACFY,IAAe,KAIf,gBAAAP;AAAA,IAACQ;AAAA,IAAA;AAAA,MACE,GAAGjB;AAAA,MACJ,KAAAL;AAAA,MACA,WAAWM;AAAA,MACX,iBAAiBiB,EAAa,EAAE,SAAApB,GAAS;AAAA,MACzC,YAAYM;AAAA,MACZ,iBAAeY;AAAA,MAEd,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"LinkButton.js","names":[],"sources":["../../../../../src/atomic/atoms/button/LinkButton.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type JSX,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { Link } from '@plumile/router';\n\nimport { ButtonLoadingSpinnerSvg } from '../../../icons/ButtonLoadingSpinnerSvg.js';\nimport { cx } from '../../../theme/tools.js';\nimport {\n  activeButton,\n  button,\n  content as contentClass,\n  iconLeft,\n  iconRight,\n  loadingIndicator,\n  spinnerIcon,\n  type ButtonVariants,\n} from './button.css.js';\n\ntype LinkProps = ComponentPropsWithoutRef<typeof Link>;\n\ntype Props = Omit<LinkProps, 'children' | 'className'> & {\n  children: ReactNode;\n  className?: string;\n  variant?: NonNullable<ButtonVariants>['variant'];\n  size?: NonNullable<ButtonVariants>['size'];\n  width?: NonNullable<ButtonVariants>['width'];\n  isLoading?: boolean;\n  loadingLabel?: ReactNode;\n  leftIcon?: ReactNode;\n  rightIcon?: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n};\n\nexport const LinkButton = (props: Props): JSX.Element => {\n  const {\n    children,\n    className,\n    isDisabled,\n    isLoading = false,\n    leftIcon,\n    loadingLabel,\n    ref,\n    rightIcon,\n    size,\n    variant,\n    width,\n    ...rest\n  } = props;\n\n  const resolvedClassName = cx(button({ variant, size, width }), className);\n  const disabled = Boolean(isLoading) || Boolean(isDisabled);\n  const isIconVariant = variant === 'icon';\n\n  let renderedContent: JSX.Element;\n\n  if (isLoading) {\n    renderedContent = (\n      <span className={loadingIndicator}>\n        <ButtonLoadingSpinnerSvg\n          className={spinnerIcon}\n          width={20}\n          height={20}\n        />\n        {loadingLabel}\n      </span>\n    );\n  } else if (isIconVariant) {\n    const iconContent = leftIcon ?? rightIcon ?? children ?? null;\n\n    renderedContent = <span>{iconContent}</span>;\n  } else {\n    const iconElements: JSX.Element[] = [];\n\n    if (leftIcon != null) {\n      iconElements.push(\n        <span className={iconLeft} key=\"left-icon\">\n          {leftIcon}\n        </span>,\n      );\n    }\n\n    iconElements.push(\n      <span className={contentClass} key=\"content\">\n        {children}\n      </span>,\n    );\n\n    if (rightIcon != null) {\n      iconElements.push(\n        <span className={iconRight} key=\"right-icon\">\n          {rightIcon}\n        </span>,\n      );\n    }\n\n    renderedContent = <>{iconElements}</>;\n  }\n\n  let ariaDisabled: true | undefined;\n  if (disabled) {\n    ariaDisabled = true;\n  }\n\n  return (\n    <Link\n      {...rest}\n      ref={ref}\n      className={resolvedClassName}\n      activeClassName={activeButton({ variant })}\n      isDisabled={disabled}\n      aria-disabled={ariaDisabled}\n    >\n      {renderedContent}\n    </Link>\n  );\n};\n"],"mappings":";;;;;;AAoCA,IAAa,KAAc,MAA8B;CACvD,IAAM,EACJ,aACA,cACA,eACA,eAAY,IACZ,aACA,iBACA,QACA,cACA,SACA,YACA,UACA,GAAG,MACD,GAEE,IAAoB,EAAG,EAAO;EAAE;EAAS;EAAM;EAAO,CAAC,EAAE,EAAU,EACnE,IAAW,EAAQ,KAAc,EAAQ,GACzC,IAAgB,MAAY,QAE9B;AAEJ,KAAI,EACF,KACE,kBAAC,QAAD;EAAM,WAAW;YAAjB,CACE,kBAAC,GAAD;GACE,WAAW;GACX,OAAO;GACP,QAAQ;GACR,CAAA,EACD,EACI;;UAEA,EAGT,KAAkB,kBAAC,QAAD,EAAA,UAFE,KAAY,KAAa,KAAY,MAEb,CAAA;MACvC;EACL,IAAM,IAA8B,EAAE;AAwBtC,EAtBI,KAAY,QACd,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW;aACd;GACI,EAFwB,YAExB,CACR,EAGH,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW;GACd;GACI,EAF4B,UAE5B,CACR,EAEG,KAAa,QACf,EAAa,KACX,kBAAC,QAAD;GAAM,WAAW;aACd;GACI,EAFyB,aAEzB,CACR,EAGH,IAAkB,kBAAA,GAAA,EAAA,UAAG,GAAgB,CAAA;;CAGvC,IAAI;AAKJ,QAJI,MACF,IAAe,KAIf,kBAAC,GAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,iBAAiB,EAAa,EAAE,YAAS,CAAC;EAC1C,YAAY;EACZ,iBAAe;YAEd;EACI,CAAA"}

package/lib/esm/atomic/atoms/button/button.css.js

@@ -1,16 +1,95 @@
-/* empty css                                          */
-/* empty css                          */
-import { createRuntimeFn as b } from "@vanilla-extract/recipes/createRuntimeFn";
-var x = b({ defaultClassName: "qmnfour qmnfou0 txvbqb9io txvbqbdnx txvbqbco txvbqbamf txvbqbv qmnfou2 qmnfou1 txvbqb77 txvbqb6x txvbqb7i txvbqb12f txvbqb1px", variantClassNames: { variant: { primary: "qmnfous qmnfou3 txvbqbv47 txvbqbv9z txvbqbamo", secondary: "qmnfout qmnfou5 qmnfou4 txvbqbuzj txvbqbv7z txvbqb1df txvbqb1qf txvbqbsf", text: "qmnfouu qmnfou6 txvbqbuzj txvbqbv7z", success: "qmnfouv qmnfou8 qmnfou7 txvbqbv3v txvbqbv8p", danger: "qmnfouw qmnfoua qmnfou9 txvbqbv3l txvbqbv8p", brand: "qmnfoux qmnfouc qmnfoub txvbqbv9z txvbqbamo txvbqbuyf txvbqb1co txvbqb1qf txvbqbf6 txvbqb8qf", brandGhost: "qmnfouy qmnfoue qmnfoud txvbqbv49 txvbqbv9z txvbqb10f txvbqb1df txvbqb1qf txvbqb78 txvbqb6w txvbqb7k", tab: "qmnfouz qmnfoui qmnfouh txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqbuzj txvbqbv8r txvbqbv txvbqb78 txvbqb6x txvbqb7k txvbqb12f txvbqb1qf txvbqb5sx txvbqb36f txvbqb8x txvbqbamf txvbqb6", icon: "qmnfou10 qmnfoug qmnfouf txvbqbv49 txvbqbv9z txvbqb1t6 txvbqbl9f" }, size: { small: "qmnfou11 qmnfouj txvbqbnvf txvbqboio txvbqbp56 txvbqblwx txvbqb8o txvbqb1rx txvbqbc6o", medium: "qmnfou12 qmnfouk txvbqbnvx txvbqboj6 txvbqbp5f txvbqblx6 txvbqb8x txvbqb1rx txvbqbc76", large: "qmnfou13 qmnfoul txvbqbnwf txvbqbojo txvbqbp5x txvbqblxo txvbqb96 txvbqb1ro txvbqbc7o" }, width: { auto: "qmnfou14 qmnfoup txvbqbu66", full: "qmnfou15 qmnfouq txvbqbu6f" } }, defaultVariants: { variant: "primary", size: "medium", width: "auto" }, compoundVariants: [[{ variant: "icon", size: "small" }, "qmnfoum txvbqbtx6 txvbqbc6o txvbqbk6x txvbqbji6"], [{ variant: "icon", size: "medium" }, "qmnfoun txvbqbtxo txvbqbc76 txvbqbk7f txvbqbjio"], [{ variant: "icon", size: "large" }, "qmnfouo txvbqbty6 txvbqbc7o txvbqbk7x txvbqbjj6"]] }), o = "qmnfou16 txvbqbv7z txvbqb12f txvbqb1qf txvbqb5sx txvbqb3jo txvbqbamo", n = b({ defaultClassName: "qmnfou19 qmnfou0 txvbqb9io txvbqbdnx txvbqbco txvbqbamf txvbqbv qmnfou2 qmnfou1 txvbqb77 txvbqb6x txvbqb7i txvbqb12f txvbqb1px", variantClassNames: { variant: { primary: "qmnfou1a qmnfou3 txvbqbv47 txvbqbv9z txvbqbamo", secondary: "qmnfou1b qmnfou5 qmnfou4 txvbqbuzj txvbqbv7z txvbqb1df txvbqb1qf txvbqbsf", text: "qmnfou1c qmnfou6 txvbqbuzj txvbqbv7z", success: "qmnfou1d qmnfou8 qmnfou7 txvbqbv3v txvbqbv8p", danger: "qmnfou1e qmnfoua qmnfou9 txvbqbv3l txvbqbv8p", brand: "qmnfou1f qmnfouc qmnfoub txvbqbv9z txvbqbamo txvbqbuyf txvbqb1co txvbqb1qf txvbqbf6 txvbqb8qf", brandGhost: "qmnfou1g qmnfoue qmnfoud txvbqbv49 txvbqbv9z txvbqb10f txvbqb1df txvbqb1qf txvbqb78 txvbqb6w txvbqb7k", tab: "qmnfou1h qmnfou16 txvbqbv7z txvbqb12f txvbqb1qf txvbqb5sx txvbqb3jo txvbqbamo", icon: "qmnfou1i qmnfoug qmnfouf txvbqbv49 txvbqbv9z txvbqb1t6 txvbqbl9f" }, size: { small: "qmnfou1j qmnfouj txvbqbnvf txvbqboio txvbqbp56 txvbqblwx txvbqb8o txvbqb1rx txvbqbc6o", medium: "qmnfou1k qmnfouk txvbqbnvx txvbqboj6 txvbqbp5f txvbqblx6 txvbqb8x txvbqb1rx txvbqbc76", large: "qmnfou1l qmnfoul txvbqbnwf txvbqbojo txvbqbp5x txvbqblxo txvbqb96 txvbqb1ro txvbqbc7o" }, width: { auto: "qmnfou1m qmnfou17 txvbqbu66", full: "qmnfou1n qmnfou18 txvbqbu6f" } }, defaultVariants: { variant: "primary", size: "medium", width: "auto" }, compoundVariants: [[{ variant: "icon", size: "small" }, "qmnfoum txvbqbtx6 txvbqbc6o txvbqbk6x txvbqbji6"], [{ variant: "icon", size: "medium" }, "qmnfoun txvbqbtxo txvbqbc76 txvbqbk7f txvbqbjio"], [{ variant: "icon", size: "large" }, "qmnfouo txvbqbty6 txvbqbc7o txvbqbk7x txvbqbjj6"]] }), f = "qmnfou1o txvbqb9jf txvbqbco", m = "qmnfou1q txvbqb9jf txvbqbco txvbqbao6", u = "qmnfou1s qmnfou1r txvbqbtwf txvbqbc5x txvbqbaj6", a = "qmnfou1t txvbqb9jf txvbqbco txvbqbh9x", i = "qmnfou1u txvbqb9jf txvbqbco txvbqbgmo", r = "qmnfou1v txvbqb9jf txvbqbco txvbqbdnx";
-export {
-  n as activeButton,
-  x as button,
-  f as content,
-  a as iconLeft,
-  r as iconOnlyContent,
-  i as iconRight,
-  m as loadingIndicator,
-  u as spinnerIcon,
-  o as tabButtonActive
-};
-//# sourceMappingURL=button.css.js.map
+/* empty css                                      */
+/* empty css                      */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/atoms/button/button.css.ts
+var t = e({
+	defaultClassName: "qmnfour qmnfou0 txvbqb9io txvbqbdnx txvbqbco txvbqbamf txvbqbv qmnfou2 qmnfou1 txvbqb77 txvbqb6x txvbqb7i txvbqb12f txvbqb1px",
+	variantClassNames: {
+		variant: {
+			primary: "qmnfous qmnfou3 txvbqbv47 txvbqbv9z txvbqbamo",
+			secondary: "qmnfout qmnfou5 qmnfou4 txvbqbuzj txvbqbv7z txvbqb1df txvbqb1qf txvbqbsf",
+			text: "qmnfouu qmnfou6 txvbqbuzj txvbqbv7z",
+			success: "qmnfouv qmnfou8 qmnfou7 txvbqbv3v txvbqbv8p",
+			danger: "qmnfouw qmnfoua qmnfou9 txvbqbv3l txvbqbv8p",
+			brand: "qmnfoux qmnfouc qmnfoub txvbqbv9z txvbqbamo txvbqbuyf txvbqb1co txvbqb1qf txvbqbf6 txvbqb8qf",
+			brandGhost: "qmnfouy qmnfoue qmnfoud txvbqbv49 txvbqbv9z txvbqb10f txvbqb1df txvbqb1qf txvbqb78 txvbqb6w txvbqb7k",
+			tab: "qmnfouz qmnfoui qmnfouh txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqbuzj txvbqbv8r txvbqbv txvbqb78 txvbqb6x txvbqb7k txvbqb12f txvbqb1qf txvbqb5sx txvbqb36f txvbqb8x txvbqbamf txvbqb6",
+			icon: "qmnfou10 qmnfoug qmnfouf txvbqbv49 txvbqbv9z txvbqb1t6 txvbqbl9f"
+		},
+		size: {
+			small: "qmnfou11 qmnfouj txvbqbnvf txvbqboio txvbqbp56 txvbqblwx txvbqb8o txvbqb1rx txvbqbc6o",
+			medium: "qmnfou12 qmnfouk txvbqbnvx txvbqboj6 txvbqbp5f txvbqblx6 txvbqb8x txvbqb1rx txvbqbc76",
+			large: "qmnfou13 qmnfoul txvbqbnwf txvbqbojo txvbqbp5x txvbqblxo txvbqb96 txvbqb1ro txvbqbc7o"
+		},
+		width: {
+			auto: "qmnfou14 qmnfoup txvbqbu66",
+			full: "qmnfou15 qmnfouq txvbqbu6f"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "medium",
+		width: "auto"
+	},
+	compoundVariants: [
+		[{
+			variant: "icon",
+			size: "small"
+		}, "qmnfoum txvbqbtx6 txvbqbc6o txvbqbk6x txvbqbji6"],
+		[{
+			variant: "icon",
+			size: "medium"
+		}, "qmnfoun txvbqbtxo txvbqbc76 txvbqbk7f txvbqbjio"],
+		[{
+			variant: "icon",
+			size: "large"
+		}, "qmnfouo txvbqbty6 txvbqbc7o txvbqbk7x txvbqbjj6"]
+	]
+}), n = "qmnfou16 txvbqbv7z txvbqb12f txvbqb1qf txvbqb5sx txvbqb3jo txvbqbamo", r = e({
+	defaultClassName: "qmnfou19 qmnfou0 txvbqb9io txvbqbdnx txvbqbco txvbqbamf txvbqbv qmnfou2 qmnfou1 txvbqb77 txvbqb6x txvbqb7i txvbqb12f txvbqb1px",
+	variantClassNames: {
+		variant: {
+			primary: "qmnfou1a qmnfou3 txvbqbv47 txvbqbv9z txvbqbamo",
+			secondary: "qmnfou1b qmnfou5 qmnfou4 txvbqbuzj txvbqbv7z txvbqb1df txvbqb1qf txvbqbsf",
+			text: "qmnfou1c qmnfou6 txvbqbuzj txvbqbv7z",
+			success: "qmnfou1d qmnfou8 qmnfou7 txvbqbv3v txvbqbv8p",
+			danger: "qmnfou1e qmnfoua qmnfou9 txvbqbv3l txvbqbv8p",
+			brand: "qmnfou1f qmnfouc qmnfoub txvbqbv9z txvbqbamo txvbqbuyf txvbqb1co txvbqb1qf txvbqbf6 txvbqb8qf",
+			brandGhost: "qmnfou1g qmnfoue qmnfoud txvbqbv49 txvbqbv9z txvbqb10f txvbqb1df txvbqb1qf txvbqb78 txvbqb6w txvbqb7k",
+			tab: "qmnfou1h qmnfou16 txvbqbv7z txvbqb12f txvbqb1qf txvbqb5sx txvbqb3jo txvbqbamo",
+			icon: "qmnfou1i qmnfoug qmnfouf txvbqbv49 txvbqbv9z txvbqb1t6 txvbqbl9f"
+		},
+		size: {
+			small: "qmnfou1j qmnfouj txvbqbnvf txvbqboio txvbqbp56 txvbqblwx txvbqb8o txvbqb1rx txvbqbc6o",
+			medium: "qmnfou1k qmnfouk txvbqbnvx txvbqboj6 txvbqbp5f txvbqblx6 txvbqb8x txvbqb1rx txvbqbc76",
+			large: "qmnfou1l qmnfoul txvbqbnwf txvbqbojo txvbqbp5x txvbqblxo txvbqb96 txvbqb1ro txvbqbc7o"
+		},
+		width: {
+			auto: "qmnfou1m qmnfou17 txvbqbu66",
+			full: "qmnfou1n qmnfou18 txvbqbu6f"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "medium",
+		width: "auto"
+	},
+	compoundVariants: [
+		[{
+			variant: "icon",
+			size: "small"
+		}, "qmnfoum txvbqbtx6 txvbqbc6o txvbqbk6x txvbqbji6"],
+		[{
+			variant: "icon",
+			size: "medium"
+		}, "qmnfoun txvbqbtxo txvbqbc76 txvbqbk7f txvbqbjio"],
+		[{
+			variant: "icon",
+			size: "large"
+		}, "qmnfouo txvbqbty6 txvbqbc7o txvbqbk7x txvbqbjj6"]
+	]
+}), i = "qmnfou1o txvbqb9jf txvbqbco", a = "qmnfou1q txvbqb9jf txvbqbco txvbqbao6", o = "qmnfou1s qmnfou1r txvbqbtwf txvbqbc5x txvbqbaj6", s = "qmnfou1t txvbqb9jf txvbqbco txvbqbh9x", c = "qmnfou1u txvbqb9jf txvbqbco txvbqbgmo", l = "qmnfou1v txvbqb9jf txvbqbco txvbqbdnx";
+//#endregion
+export { r as activeButton, t as button, i as content, s as iconLeft, l as iconOnlyContent, c as iconRight, a as loadingIndicator, o as spinnerIcon, n as tabButtonActive };
+
+//# sourceMappingURL=button.css.js.map

package/lib/esm/atomic/atoms/button/button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"button.css.js","names":[],"sources":["../../../../../src/atomic/atoms/button/button.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst baseLayout = sprinkles({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  fontWeight: 'medium',\n  cursor: 'pointer',\n});\n\nconst baseInteraction = style([\n  sprinkles({\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'default',\n    borderWidth: 0,\n    borderStyle: 'none',\n  }),\n  {\n    selectors: {\n      '&:active': {\n        transform: 'scale(0.98)',\n      },\n      '&:disabled': {\n        opacity: '0.7',\n        cursor: 'not-allowed',\n      },\n    },\n  },\n]);\n\nconst primaryVariant = sprinkles({\n  backgroundColor: 'brandPrimaryRed',\n  color: 'brandWhite',\n  fontWeight: 'semibold',\n});\n\nconst secondaryVariant = style([\n  sprinkles({\n    backgroundColor: 'transparent',\n    color: 'primary',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    borderColor: 'primary',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.primaryLight,\n      },\n    },\n  },\n]);\n\nconst textVariant = sprinkles({\n  backgroundColor: 'transparent',\n  color: 'primary',\n});\n\nconst successVariant = style([\n  sprinkles({ backgroundColor: 'success', color: 'text' }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        filter: 'brightness(0.9)',\n      },\n    },\n  },\n]);\n\nconst dangerVariant = style([\n  sprinkles({ backgroundColor: 'error', color: 'text' }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        filter: 'brightness(0.9)',\n      },\n    },\n  },\n]);\n\nconst brandVariant = style([\n  sprinkles({\n    color: 'brandWhite',\n    fontWeight: 'semibold',\n    backgroundImage: 'brandDiagonal125',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n    boxShadow: 'xl',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        filter: 'brightness(0.97)',\n        transform: 'translateY(-1px)',\n      },\n      '&:active:not(:disabled)': {\n        transform: 'translateY(0)',\n      },\n    },\n  },\n]);\n\nconst brandGhostVariant = style([\n  sprinkles({\n    backgroundColor: 'brandSecondaryOrange',\n    color: 'brandWhite',\n    borderColor: 'brandSecondaryOrange',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        filter: 'brightness(0.97)',\n      },\n    },\n  },\n]);\n\nconst iconVariant = style([\n  sprinkles({\n    backgroundColor: 'brandSecondaryOrange',\n    color: 'brandWhite',\n    borderRadius: 'full',\n    padding: 0,\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.primaryLight,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nconst tabVariant = style([\n  sprinkles({\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'pointer',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    borderWidth: 0,\n    borderStyle: 'solid',\n    borderBottomWidth: 2,\n    borderBottomColor: 'transparent',\n    paddingY: 2,\n    paddingX: 4,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    appearance: 'none',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        color: vars.colors.text,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        cursor: 'default',\n        opacity: 0.6,\n      },\n    },\n  },\n]);\n\nconst smallSize = sprinkles({\n  paddingY: 1,\n  paddingX: 4,\n  fontSize: 'xs',\n  borderRadius: 'xl',\n  height: 8,\n});\n\nconst mediumSize = sprinkles({\n  paddingY: 2,\n  paddingX: 6,\n  fontSize: 'sm',\n  borderRadius: 'xl',\n  height: 10,\n});\n\nconst largeSize = sprinkles({\n  paddingY: 4,\n  paddingX: 8,\n  fontSize: 'base',\n  borderRadius: 'lg',\n  height: 12,\n});\n\nconst iconSizeSmall = sprinkles({\n  width: 8,\n  height: 8,\n  minWidth: 8,\n  minHeight: 8,\n});\n\nconst iconSizeMedium = sprinkles({\n  width: 10,\n  height: 10,\n  minWidth: 10,\n  minHeight: 10,\n});\n\nconst iconSizeLarge = sprinkles({\n  width: 12,\n  height: 12,\n  minWidth: 12,\n  minHeight: 12,\n});\n\nexport const button = recipe({\n  base: [baseLayout, baseInteraction],\n  variants: {\n    variant: {\n      primary: primaryVariant,\n      secondary: secondaryVariant,\n      text: textVariant,\n      success: successVariant,\n      danger: dangerVariant,\n      brand: brandVariant,\n      brandGhost: brandGhostVariant,\n      tab: tabVariant,\n      icon: iconVariant,\n    },\n    size: {\n      small: smallSize,\n      medium: mediumSize,\n      large: largeSize,\n    },\n    width: {\n      auto: sprinkles({ width: 'auto' }),\n      full: sprinkles({ width: 'full' }),\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n    size: 'medium',\n    width: 'auto',\n  },\n  compoundVariants: [\n    {\n      variants: { variant: 'icon', size: 'small' },\n      style: iconSizeSmall,\n    },\n    {\n      variants: { variant: 'icon', size: 'medium' },\n      style: iconSizeMedium,\n    },\n    {\n      variants: { variant: 'icon', size: 'large' },\n      style: iconSizeLarge,\n    },\n  ],\n});\n\nexport const tabButtonActive = sprinkles({\n  color: 'primary',\n  borderWidth: 0,\n  borderStyle: 'solid',\n  borderBottomWidth: 2,\n  borderBottomColor: 'primary',\n  fontWeight: 'semibold',\n});\n\nexport const activeButton = recipe({\n  base: [baseLayout, baseInteraction],\n  variants: {\n    variant: {\n      primary: primaryVariant,\n      secondary: secondaryVariant,\n      text: textVariant,\n      success: successVariant,\n      danger: dangerVariant,\n      brand: brandVariant,\n      brandGhost: brandGhostVariant,\n      tab: tabButtonActive,\n      icon: iconVariant,\n    },\n    size: {\n      small: smallSize,\n      medium: mediumSize,\n      large: largeSize,\n    },\n    width: {\n      auto: sprinkles({ width: 'auto' }),\n      full: sprinkles({ width: 'full' }),\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n    size: 'medium',\n    width: 'auto',\n  },\n  compoundVariants: [\n    {\n      variants: { variant: 'icon', size: 'small' },\n      style: iconSizeSmall,\n    },\n    {\n      variants: { variant: 'icon', size: 'medium' },\n      style: iconSizeMedium,\n    },\n    {\n      variants: { variant: 'icon', size: 'large' },\n      style: iconSizeLarge,\n    },\n  ],\n});\n\nexport type ButtonVariants = RecipeVariants<typeof button>;\n\nconst INLINE_FLEX = 'inline-flex' as const;\n\nconst inlineFlexCenter = sprinkles({\n  display: INLINE_FLEX,\n  alignItems: 'center',\n});\n\nconst spin = keyframes({\n  '0%': {\n    transform: 'rotate(0deg)',\n  },\n  '100%': {\n    transform: 'rotate(360deg)',\n  },\n});\n\nexport const content = inlineFlexCenter;\n\nexport const loadingIndicator = sprinkles({\n  display: INLINE_FLEX,\n  alignItems: 'center',\n  gap: 2,\n});\n\nexport const spinnerIcon = style([\n  sprinkles({\n    width: 5,\n    height: 5,\n    flexShrink: 0,\n  }),\n  {\n    animation: `${spin} 1s linear infinite`,\n  },\n]);\n\nexport const iconLeft = sprinkles({\n  display: INLINE_FLEX,\n  alignItems: 'center',\n  marginRight: 2,\n});\n\nexport const iconRight = sprinkles({\n  display: INLINE_FLEX,\n  alignItems: 'center',\n  marginLeft: 2,\n});\n\nexport const iconOnlyContent = sprinkles({\n  display: INLINE_FLEX,\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n"],"mappings":""}

package/lib/esm/atomic/atoms/checkbox/Checkbox.js

@@ -1,41 +1,38 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { checkboxContainer as i, checkboxInput as b, customCheckbox as h, checkboxLabel as p } from "./checkbox.css.js";
-import { Input as f } from "../input/Input.js";
-import { Label as x } from "../label/Label.js";
-const N = (s) => {
-  const {
-    label: e,
-    checked: c = !1,
-    disabled: o = !1,
-    onChange: n,
-    ref: r,
-    ...t
-  } = s;
-  let l = null;
-  return e != null && e !== "" && (l = /* @__PURE__ */ a("span", { className: p, children: e })), /* @__PURE__ */ m(x, { className: i, children: [
-    /* @__PURE__ */ a(
-      f,
-      {
-        ref: r,
-        type: "checkbox",
-        className: b,
-        checked: c,
-        disabled: o,
-        onChange: n,
-        ...t
-      }
-    ),
-    /* @__PURE__ */ a(
-      "span",
-      {
-        className: h({ checked: c, disabled: o }),
-        "aria-hidden": "true"
-      }
-    ),
-    l
-  ] });
+import { checkboxContainer as e, checkboxInput as t, checkboxLabel as n, customCheckbox as r } from "./checkbox.css.js";
+import { Input as i } from "../input/Input.js";
+import { Label as a } from "../label/Label.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import "react";
+//#region src/atomic/atoms/checkbox/Checkbox.tsx
+var c = (c) => {
+	let { label: l, checked: u = !1, disabled: d = !1, onChange: f, ref: p, ...m } = c, h = null;
+	return l != null && l !== "" && (h = /* @__PURE__ */ o("span", {
+		className: n,
+		children: l
+	})), /* @__PURE__ */ s(a, {
+		className: e,
+		children: [
+			/* @__PURE__ */ o(i, {
+				ref: p,
+				type: "checkbox",
+				className: t,
+				checked: u,
+				disabled: d,
+				onChange: f,
+				...m
+			}),
+			/* @__PURE__ */ o("span", {
+				className: r({
+					checked: u,
+					disabled: d
+				}),
+				"aria-hidden": "true"
+			}),
+			h
+		]
+	});
 };
-export {
-  N as Checkbox
-};
-//# sourceMappingURL=Checkbox.js.map
+//#endregion
+export { c as Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/lib/esm/atomic/atoms/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/atomic/atoms/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { type JSX, type Ref } from 'react';\nimport {\n  checkboxContainer,\n  checkboxInput,\n  checkboxLabel,\n  customCheckbox,\n  type CheckboxVariants,\n} from './checkbox.css.js';\nimport { Input } from '../input/Input.js';\nimport { Label } from '../label/Label.js';\n\nexport interface CheckboxProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'type' | 'checked' | 'size'\n    >,\n    Omit<CheckboxVariants, 'checked'> {\n  label?: string;\n  checked?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const Checkbox = (props: CheckboxProps): JSX.Element => {\n  const {\n    label,\n    checked = false,\n    disabled = false,\n    onChange,\n    ref: inputRef,\n    ...rest\n  } = props;\n\n  let labelContent: JSX.Element | null = null;\n  if (label != null && label !== '') {\n    labelContent = <span className={checkboxLabel}>{label}</span>;\n  }\n  return (\n    <Label className={checkboxContainer}>\n      <Input\n        ref={inputRef}\n        type=\"checkbox\"\n        className={checkboxInput}\n        checked={checked}\n        disabled={disabled}\n        onChange={onChange}\n        {...rest}\n      />\n      <span\n        className={customCheckbox({ checked, disabled })}\n        aria-hidden=\"true\"\n      />\n      {labelContent}\n    </Label>\n  );\n};\n"],"names":["Checkbox","props","label","checked","disabled","onChange","inputRef","rest","labelContent","jsx","checkboxLabel","jsxs","Label","checkboxContainer","Input","checkboxInput","customCheckbox"],"mappings":";;;;AAuBO,MAAMA,IAAW,CAACC,MAAsC;AAC7D,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,KAAKC;AAAA,IACL,GAAGC;AAAA,EAAA,IACDN;AAEJ,MAAIO,IAAmC;AACvC,SAAIN,KAAS,QAAQA,MAAU,OAC7BM,IAAe,gBAAAC,EAAC,QAAA,EAAK,WAAWC,GAAgB,UAAAR,GAAM,IAGtD,gBAAAS,EAACC,GAAA,EAAM,WAAWC,GAChB,UAAA;AAAA,IAAA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,MAAK;AAAA,QACL,WAAWS;AAAA,QACX,SAAAZ;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACC,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWO,EAAe,EAAE,SAAAb,GAAS,UAAAC,GAAU;AAAA,QAC/C,eAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEbI;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../../src/atomic/atoms/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { type JSX, type Ref } from 'react';\nimport {\n  checkboxContainer,\n  checkboxInput,\n  checkboxLabel,\n  customCheckbox,\n  type CheckboxVariants,\n} from './checkbox.css.js';\nimport { Input } from '../input/Input.js';\nimport { Label } from '../label/Label.js';\n\nexport interface CheckboxProps\n  extends\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'type' | 'checked' | 'size'\n    >,\n    Omit<CheckboxVariants, 'checked'> {\n  label?: string;\n  checked?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const Checkbox = (props: CheckboxProps): JSX.Element => {\n  const {\n    label,\n    checked = false,\n    disabled = false,\n    onChange,\n    ref: inputRef,\n    ...rest\n  } = props;\n\n  let labelContent: JSX.Element | null = null;\n  if (label != null && label !== '') {\n    labelContent = <span className={checkboxLabel}>{label}</span>;\n  }\n  return (\n    <Label className={checkboxContainer}>\n      <Input\n        ref={inputRef}\n        type=\"checkbox\"\n        className={checkboxInput}\n        checked={checked}\n        disabled={disabled}\n        onChange={onChange}\n        {...rest}\n      />\n      <span\n        className={customCheckbox({ checked, disabled })}\n        aria-hidden=\"true\"\n      />\n      {labelContent}\n    </Label>\n  );\n};\n"],"mappings":";;;;;;AAuBA,IAAa,KAAY,MAAsC;CAC7D,IAAM,EACJ,UACA,aAAU,IACV,cAAW,IACX,aACA,KAAK,GACL,GAAG,MACD,GAEA,IAAmC;AAIvC,QAHI,KAAS,QAAQ,MAAU,OAC7B,IAAe,kBAAC,QAAD;EAAM,WAAW;YAAgB;EAAa,CAAA,GAG7D,kBAAC,GAAD;EAAO,WAAW;YAAlB;GACE,kBAAC,GAAD;IACE,KAAK;IACL,MAAK;IACL,WAAW;IACF;IACC;IACA;IACV,GAAI;IACJ,CAAA;GACF,kBAAC,QAAD;IACE,WAAW,EAAe;KAAE;KAAS;KAAU,CAAC;IAChD,eAAY;IACZ,CAAA;GACD;GACK"}

package/lib/esm/atomic/atoms/checkbox/checkbox.css.js

@@ -1,11 +1,26 @@
-/* empty css                                          */
-/* empty css                            */
-import { createRuntimeFn as b } from "@vanilla-extract/recipes/createRuntimeFn";
-var x = "_3u0sls0 txvbqb9io txvbqbco txvbqbpsf", q = "_3u0sls1 txvbqbps6 txvbqbv txvbqbvab txvbqbc4o txvbqbtv6", a = "_3u0sls2 txvbqb8x txvbqbv8r txvbqbnux txvbqbv", e = b({ defaultClassName: "_3u0slsb _3u0sls4 _3u0sls3 txvbqb9jo txvbqbtwf txvbqbc5x txvbqbuzn txvbqb1df txvbqb1qf txvbqbwf txvbqb1rf txvbqbv txvbqbpsf txvbqb78 txvbqb6x txvbqb7i", variantClassNames: { checked: { true: "_3u0slsc _3u0sls6 _3u0sls5 txvbqbv2h txvbqbsf", false: "_3u0slsd _3u0sls8 _3u0sls7 txvbqbuzn" }, disabled: { true: "_3u0slse _3u0sls9 txvbqbvar txvbqbr", false: "_3u0slsf _3u0slsa" } }, defaultVariants: { checked: !1, disabled: !1 }, compoundVariants: [] });
-export {
-  x as checkboxContainer,
-  q as checkboxInput,
-  a as checkboxLabel,
-  e as customCheckbox
-};
-//# sourceMappingURL=checkbox.css.js.map
+/* empty css                                      */
+/* empty css                        */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/atoms/checkbox/checkbox.css.ts
+var t = "_3u0sls0 txvbqb9io txvbqbco txvbqbpsf", n = "_3u0sls1 txvbqbps6 txvbqbv txvbqbvab txvbqbc4o txvbqbtv6", r = "_3u0sls2 txvbqb8x txvbqbv8r txvbqbnux txvbqbv", i = e({
+	defaultClassName: "_3u0slsb _3u0sls4 _3u0sls3 txvbqb9jo txvbqbtwf txvbqbc5x txvbqbuzn txvbqb1df txvbqb1qf txvbqbwf txvbqb1rf txvbqbv txvbqbpsf txvbqb78 txvbqb6x txvbqb7i",
+	variantClassNames: {
+		checked: {
+			true: "_3u0slsc _3u0sls6 _3u0sls5 txvbqbv2h txvbqbsf",
+			false: "_3u0slsd _3u0sls8 _3u0sls7 txvbqbuzn"
+		},
+		disabled: {
+			true: "_3u0slse _3u0sls9 txvbqbvar txvbqbr",
+			false: "_3u0slsf _3u0slsa"
+		}
+	},
+	defaultVariants: {
+		checked: !1,
+		disabled: !1
+	},
+	compoundVariants: []
+});
+//#endregion
+export { t as checkboxContainer, n as checkboxInput, r as checkboxLabel, i as customCheckbox };
+
+//# sourceMappingURL=checkbox.css.js.map

package/lib/esm/atomic/atoms/checkbox/checkbox.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"checkbox.css.js","names":[],"sources":["../../../../../src/atomic/atoms/checkbox/checkbox.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const checkboxContainer = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  position: 'relative',\n});\n\nexport const checkboxInput = sprinkles({\n  position: 'absolute',\n  cursor: 'pointer',\n  opacity: 0,\n  height: 0,\n  width: 0,\n});\n\nexport const checkboxLabel = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  paddingLeft: 2,\n  cursor: 'pointer',\n});\n\nconst checkboxBase = style([\n  sprinkles({\n    display: 'inline-block',\n    width: 5,\n    height: 5,\n    backgroundColor: 'white',\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    borderColor: 'border',\n    borderRadius: 'md',\n    cursor: 'pointer',\n    position: 'relative',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'default',\n  }),\n  {\n    selectors: {\n      '&:after': {\n        content: '\"\"',\n        position: 'absolute',\n        display: 'none',\n        left: '6px',\n        top: '2px',\n        width: '6px',\n        height: '11px',\n        border: `solid ${vars.colors.white}`,\n        borderWidth: '0 2px 2px 0',\n        transform: 'rotate(45deg)',\n      },\n    },\n  },\n]);\n\nconst checkedVariant = style([\n  sprinkles({ backgroundColor: 'primary', borderColor: 'primary' }),\n  {\n    selectors: {\n      '&:after': {\n        display: 'block',\n      },\n    },\n  },\n]);\n\nconst uncheckedVariant = style([\n  sprinkles({ backgroundColor: 'white' }),\n  {\n    selectors: {\n      '&:hover': {\n        borderColor: vars.colors.primary,\n      },\n    },\n  },\n]);\n\nconst disabledVariant = sprinkles({\n  opacity: 50,\n  cursor: 'not-allowed',\n});\n\nconst enabledVariant = sprinkles({});\n\nexport const customCheckbox = recipe({\n  base: checkboxBase,\n  variants: {\n    checked: {\n      true: checkedVariant,\n      false: uncheckedVariant,\n    },\n    disabled: {\n      true: disabledVariant,\n      false: enabledVariant,\n    },\n  },\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n\nexport type CheckboxVariants = RecipeVariants<typeof customCheckbox>;\n"],"mappings":""}