softable-pixels-web 1.2.3 → 1.2.5

package/dist/{BasePopover-m1OfX3fO.js → BasePopover-Bcy5d1t5.js}

@@ -1,9 +1,9 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CV4ryZLN.js";
-import { t as Popover } from "./Popover-tzAZp6V7.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js";
+import { t as Popover } from "./Popover-DGYahpRI.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/commons/structure/BasePopover/styles.ts
-function createBasePopoverStyles({ maxWidth = "unset", minWidth = "fit-content", minHeight = "fit-content", maxHeight = "15rem", panel }) {
+function createBasePopoverStyles({ minWidth, minHeight, maxWidth = "unset", maxHeight = "15rem", panel }) {
 	return styled({ content: {
 		minWidth,
 		maxWidth,
@@ -49,4 +49,4 @@ const BasePopover = (props) => {
 
 //#endregion
 export { BasePopover as t };
-//# sourceMappingURL=BasePopover-m1OfX3fO.js.map
+//# sourceMappingURL=BasePopover-Bcy5d1t5.js.map

package/dist/BasePopover-Bcy5d1t5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasePopover-Bcy5d1t5.js","names":["BasePopover: React.FC<BasePopoverProps>"],"sources":["../src/components/commons/structure/BasePopover/styles.ts","../src/components/commons/structure/BasePopover/index.tsx"],"sourcesContent":["// Types\nimport type { BasePopoverProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createBasePopoverStyles({\n  minWidth,\n  minHeight,\n  maxWidth = 'unset',\n  maxHeight = '15rem',\n  panel\n}: BasePopoverProps) {\n  return styled({\n    content: {\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      zIndex: 10,\n\n      overflowY: 'auto',\n      overflowX: 'hidden',\n      overscrollBehavior: 'contain',\n\n      borderWidth: 1,\n      rowGap: '0.25rem',\n      padding: panel?.padding ? panel.padding : '0.5rem',\n      borderRadius: '0.75rem',\n\n      backgroundColor: 'var(--px-bg)',\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: 'var(--px-border-primary)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { Popover } from '@components/commons/toolkit/Popover'\n\n// Types\nimport type { BasePopoverProps } from './types'\n\n// Styles\nimport { createBasePopoverStyles } from './styles'\n\nexport const BasePopover: React.FC<BasePopoverProps> = props => {\n  const { children, ...rest } = props\n\n  const { styles } = useThemedStyles(props, createBasePopoverStyles, {\n    applyCommonProps: false,\n    pick: p => [p.open, p.trigger]\n  })\n\n  return (\n    <Popover\n      p={0}\n      hideShadow\n      {...rest}\n      content={({ widthTrigger }) => (\n        <div style={{ ...styles.content, width: widthTrigger }}>{children}</div>\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;AAIA,SAAgB,wBAAwB,EACtC,UACA,WACA,WAAW,SACX,YAAY,SACZ,SACmB;AACnB,QAAO,OAAO,EACZ,SAAS;EACP;EACA;EACA;EACA;EAEA,SAAS;EACT,eAAe;EAEf,QAAQ;EAER,WAAW;EACX,WAAW;EACX,oBAAoB;EAEpB,aAAa;EACb,QAAQ;EACR,SAAS,OAAO,UAAU,MAAM,UAAU;EAC1C,cAAc;EAEd,iBAAiB;EACjB,WAAW;EACX,aAAa;EACd,EACF,CAAC;;;;;ACrBJ,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;EACjE,kBAAkB;EAClB,OAAM,MAAK,CAAC,EAAE,MAAM,EAAE,QAAQ;EAC/B,CAAC;AAEF,QACE,oBAAC;EACC,GAAG;EACH;EACA,GAAI;EACJ,UAAU,EAAE,mBACV,oBAAC;GAAI,OAAO;IAAE,GAAG,OAAO;IAAS,OAAO;IAAc;GAAG;IAAe;GAE1E"}

package/dist/{Breadcrumb-Bm9YuwCq.js → Breadcrumb-Doo-Ajul.js}

@@ -1,6 +1,6 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CV4ryZLN.js";
-import { t as Typography } from "./Typography-BTJk47bm.js";
-import { t as Skeleton } from "./Skeleton-iCdZ2Gai.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js";
+import { t as Typography } from "./Typography-CKSjnDPX.js";
+import { t as Skeleton } from "./Skeleton-CixPhMzv.js";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -84,4 +84,4 @@ const Breadcrumb = (props) => {
 
 //#endregion
 export { Breadcrumb as t };
-//# sourceMappingURL=Breadcrumb-Bm9YuwCq.js.map
+//# sourceMappingURL=Breadcrumb-Doo-Ajul.js.map

package/dist/{Breadcrumb-Bm9YuwCq.js.map → Breadcrumb-Doo-Ajul.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb-Bm9YuwCq.js","names":["BreadcrumbLoading: React.FC<Props>","Breadcrumb: React.FC<BreadcrumbProps>"],"sources":["../src/components/commons/structure/Breadcrumb/styles.ts","../src/components/commons/structure/Breadcrumb/components/BreadcrumbLoading.tsx","../src/components/commons/structure/Breadcrumb/index.tsx"],"sourcesContent":["// Types\nimport type { BreadcrumbProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createBreadcrumbStyles(_props: BreadcrumbProps): StyleMap {\n  return styled({\n    container: {\n      display: 'flex',\n      alignItems: 'center',\n      columnGap: '0.5rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Skeleton } from '../../Skeleton'\n\ninterface Props {\n  itemsCount: number\n}\n\nexport const BreadcrumbLoading: React.FC<Props> = ({ itemsCount }) => {\n  // Functions\n  function renderContent() {\n    return Array.from({ length: itemsCount }).map((_, index) => (\n      <Skeleton\n        key={`breadcrumb-skeleton-${index + 1}`}\n        width=\"5rem\"\n        height=\"1rem\"\n      />\n    ))\n  }\n\n  return <div>{renderContent()}</div>\n}\n","// External Libraries\nimport type React from 'react'\nimport { Fragment } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { BreadcrumbProps } from './types'\n\n// Styles\nimport { createBreadcrumbStyles } from './styles'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BreadcrumbLoading } from './components/BreadcrumbLoading'\nimport { Skeleton } from '../Skeleton'\n\nexport const Breadcrumb: React.FC<BreadcrumbProps> = props => {\n  const {\n    icon,\n    labelSize = '0.875rem',\n    isLoading,\n    separator,\n    items,\n    loadingItemsCount = 3\n  } = props\n\n  const { styles } = useThemedStyles(props, createBreadcrumbStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p]\n  })\n\n  function renderContent() {\n    if (isLoading) {\n      return <BreadcrumbLoading itemsCount={loadingItemsCount} />\n    }\n\n    return items.map((item, index) => {\n      const isLast = index === items.length - 1\n      const hasAction = !!item.onClick || !!item.href\n\n      const content =\n        hasAction && !isLast ? (\n          item.href ? (\n            <a href={item.href} style={{ cursor: 'pointer' }}>\n              <Typography\n                as=\"span\"\n                variant=\"b3\"\n                color=\"var(--px-text-secondary)\"\n                fontSize={labelSize}\n              >\n                {item.label}\n              </Typography>\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={item.onClick}\n              style={{ cursor: 'pointer' }}\n            >\n              <Typography\n                as=\"span\"\n                variant=\"b3\"\n                color=\"var(--px-text-secondary)\"\n                fontSize={labelSize}\n              >\n                {item.label}\n              </Typography>\n            </button>\n          )\n        ) : (\n          <Typography\n            as=\"span\"\n            variant=\"b3\"\n            color=\"var(--px-text-secondary)\"\n            fontSize={labelSize}\n          >\n            {item.label}\n          </Typography>\n        )\n\n      return (\n        <Fragment key={`${item.type}-${item.label}`}>\n          {content}\n\n          {!isLast && (\n            <Typography as=\"span\" variant=\"b3\" color=\"var(--px-text-secondary)\">\n              {separator ?? '/'}\n            </Typography>\n          )}\n        </Fragment>\n      )\n    })\n  }\n\n  return (\n    <div style={styles.container}>\n      {isLoading ? <Skeleton width=\"1.25rem\" height=\"1.25rem\" /> : icon}\n\n      {renderContent()}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,uBAAuB,QAAmC;AACxE,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,YAAY;EACZ,WAAW;EACZ,EACF,CAAC;;;;;ACFJ,MAAaA,qBAAsC,EAAE,iBAAiB;CAEpE,SAAS,gBAAgB;AACvB,SAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,CAAC,CAAC,KAAK,GAAG,UAChD,oBAAC;GAEC,OAAM;GACN,QAAO;KAFF,uBAAuB,QAAQ,IAGpC,CACF;;AAGJ,QAAO,oBAAC,mBAAK,eAAe,GAAO;;;;;ACJrC,MAAaC,cAAwC,UAAS;CAC5D,MAAM,EACJ,MACA,YAAY,YACZ,WACA,WACA,OACA,oBAAoB,MAClB;CAEJ,MAAM,EAAE,WAAW,gBAAgB,OAAO,wBAAwB;EAChE,kBAAkB;EAClB,UAAU,MAAM;EAChB,OAAM,MAAK,CAAC,EAAE;EACf,CAAC;CAEF,SAAS,gBAAgB;AACvB,MAAI,UACF,QAAO,oBAAC,qBAAkB,YAAY,oBAAqB;AAG7D,SAAO,MAAM,KAAK,MAAM,UAAU;GAChC,MAAM,SAAS,UAAU,MAAM,SAAS;AA2CxC,UACE,qBAAC,wBA3Ce,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,KAAK,SAG5B,CAAC,SACZ,KAAK,OACH,oBAAC;IAAE,MAAM,KAAK;IAAM,OAAO,EAAE,QAAQ,WAAW;cAC9C,oBAAC;KACC,IAAG;KACH,SAAQ;KACR,OAAM;KACN,UAAU;eAET,KAAK;MACK;KACX,GAEJ,oBAAC;IACC,MAAK;IACL,SAAS,KAAK;IACd,OAAO,EAAE,QAAQ,WAAW;cAE5B,oBAAC;KACC,IAAG;KACH,SAAQ;KACR,OAAM;KACN,UAAU;eAET,KAAK;MACK;KACN,GAGX,oBAAC;IACC,IAAG;IACH,SAAQ;IACR,OAAM;IACN,UAAU;cAET,KAAK;KACK,EAOZ,CAAC,UACA,oBAAC;IAAW,IAAG;IAAO,SAAQ;IAAK,OAAM;cACtC,aAAa;KACH,KANF,GAAG,KAAK,KAAK,GAAG,KAAK,QAQzB;IAEb;;AAGJ,QACE,qBAAC;EAAI,OAAO,OAAO;aAChB,YAAY,oBAAC;GAAS,OAAM;GAAU,QAAO;IAAY,GAAG,MAE5D,eAAe;GACZ"}
+{"version":3,"file":"Breadcrumb-Doo-Ajul.js","names":["BreadcrumbLoading: React.FC<Props>","Breadcrumb: React.FC<BreadcrumbProps>"],"sources":["../src/components/commons/structure/Breadcrumb/styles.ts","../src/components/commons/structure/Breadcrumb/components/BreadcrumbLoading.tsx","../src/components/commons/structure/Breadcrumb/index.tsx"],"sourcesContent":["// Types\nimport type { BreadcrumbProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createBreadcrumbStyles(_props: BreadcrumbProps): StyleMap {\n  return styled({\n    container: {\n      display: 'flex',\n      alignItems: 'center',\n      columnGap: '0.5rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Skeleton } from '../../Skeleton'\n\ninterface Props {\n  itemsCount: number\n}\n\nexport const BreadcrumbLoading: React.FC<Props> = ({ itemsCount }) => {\n  // Functions\n  function renderContent() {\n    return Array.from({ length: itemsCount }).map((_, index) => (\n      <Skeleton\n        key={`breadcrumb-skeleton-${index + 1}`}\n        width=\"5rem\"\n        height=\"1rem\"\n      />\n    ))\n  }\n\n  return <div>{renderContent()}</div>\n}\n","// External Libraries\nimport type React from 'react'\nimport { Fragment } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { BreadcrumbProps } from './types'\n\n// Styles\nimport { createBreadcrumbStyles } from './styles'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BreadcrumbLoading } from './components/BreadcrumbLoading'\nimport { Skeleton } from '../Skeleton'\n\nexport const Breadcrumb: React.FC<BreadcrumbProps> = props => {\n  const {\n    icon,\n    labelSize = '0.875rem',\n    isLoading,\n    separator,\n    items,\n    loadingItemsCount = 3\n  } = props\n\n  const { styles } = useThemedStyles(props, createBreadcrumbStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p]\n  })\n\n  function renderContent() {\n    if (isLoading) {\n      return <BreadcrumbLoading itemsCount={loadingItemsCount} />\n    }\n\n    return items.map((item, index) => {\n      const isLast = index === items.length - 1\n      const hasAction = !!item.onClick || !!item.href\n\n      const content =\n        hasAction && !isLast ? (\n          item.href ? (\n            <a href={item.href} style={{ cursor: 'pointer' }}>\n              <Typography\n                as=\"span\"\n                variant=\"b3\"\n                color=\"var(--px-text-secondary)\"\n                fontSize={labelSize}\n              >\n                {item.label}\n              </Typography>\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={item.onClick}\n              style={{ cursor: 'pointer' }}\n            >\n              <Typography\n                as=\"span\"\n                variant=\"b3\"\n                color=\"var(--px-text-secondary)\"\n                fontSize={labelSize}\n              >\n                {item.label}\n              </Typography>\n            </button>\n          )\n        ) : (\n          <Typography\n            as=\"span\"\n            variant=\"b3\"\n            color=\"var(--px-text-secondary)\"\n            fontSize={labelSize}\n          >\n            {item.label}\n          </Typography>\n        )\n\n      return (\n        <Fragment key={`${item.type}-${item.label}`}>\n          {content}\n\n          {!isLast && (\n            <Typography as=\"span\" variant=\"b3\" color=\"var(--px-text-secondary)\">\n              {separator ?? '/'}\n            </Typography>\n          )}\n        </Fragment>\n      )\n    })\n  }\n\n  return (\n    <div style={styles.container}>\n      {isLoading ? <Skeleton width=\"1.25rem\" height=\"1.25rem\" /> : icon}\n\n      {renderContent()}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,uBAAuB,QAAmC;AACxE,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,YAAY;EACZ,WAAW;EACZ,EACF,CAAC;;;;;ACFJ,MAAaA,qBAAsC,EAAE,iBAAiB;CAEpE,SAAS,gBAAgB;AACvB,SAAO,MAAM,KAAK,EAAE,QAAQ,YAAY,CAAC,CAAC,KAAK,GAAG,UAChD,oBAAC;GAEC,OAAM;GACN,QAAO;KAFF,uBAAuB,QAAQ,IAGpC,CACF;;AAGJ,QAAO,oBAAC,mBAAK,eAAe,GAAO;;;;;ACJrC,MAAaC,cAAwC,UAAS;CAC5D,MAAM,EACJ,MACA,YAAY,YACZ,WACA,WACA,OACA,oBAAoB,MAClB;CAEJ,MAAM,EAAE,WAAW,gBAAgB,OAAO,wBAAwB;EAChE,kBAAkB;EAClB,UAAU,MAAM;EAChB,OAAM,MAAK,CAAC,EAAE;EACf,CAAC;CAEF,SAAS,gBAAgB;AACvB,MAAI,UACF,QAAO,oBAAC,qBAAkB,YAAY,oBAAqB;AAG7D,SAAO,MAAM,KAAK,MAAM,UAAU;GAChC,MAAM,SAAS,UAAU,MAAM,SAAS;AA2CxC,UACE,qBAAC,wBA3Ce,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,KAAK,SAG5B,CAAC,SACZ,KAAK,OACH,oBAAC;IAAE,MAAM,KAAK;IAAM,OAAO,EAAE,QAAQ,WAAW;cAC9C,oBAAC;KACC,IAAG;KACH,SAAQ;KACR,OAAM;KACN,UAAU;eAET,KAAK;MACK;KACX,GAEJ,oBAAC;IACC,MAAK;IACL,SAAS,KAAK;IACd,OAAO,EAAE,QAAQ,WAAW;cAE5B,oBAAC;KACC,IAAG;KACH,SAAQ;KACR,OAAM;KACN,UAAU;eAET,KAAK;MACK;KACN,GAGX,oBAAC;IACC,IAAG;IACH,SAAQ;IACR,OAAM;IACN,UAAU;cAET,KAAK;KACK,EAOZ,CAAC,UACA,oBAAC;IAAW,IAAG;IAAO,SAAQ;IAAK,OAAM;cACtC,aAAa;KACH,KANF,GAAG,KAAK,KAAK,GAAG,KAAK,QAQzB;IAEb;;AAGJ,QACE,qBAAC;EAAI,OAAO,OAAO;aAChB,YAAY,oBAAC;GAAS,OAAM;GAAU,QAAO;IAAY,GAAG,MAE5D,eAAe;GACZ"}

package/dist/{Button-BgsYjAC1.js → Button-DSMdOqri.js}

@@ -1,6 +1,6 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CV4ryZLN.js";
-import { t as Typography } from "./Typography-BTJk47bm.js";
-import { t as Loader } from "./Loader-DUqRFMzl.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js";
+import { t as Typography } from "./Typography-CKSjnDPX.js";
+import { t as Loader } from "./Loader-DqDWamjq.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "framer-motion";
 
@@ -163,4 +163,4 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
 
 //#endregion
 export { Button as t };
-//# sourceMappingURL=Button-BgsYjAC1.js.map
+//# sourceMappingURL=Button-DSMdOqri.js.map

package/dist/{Button-BgsYjAC1.js.map → Button-DSMdOqri.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Button-BgsYjAC1.js","names":["ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n  return styled({\n    container: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      borderRadius: 'var(--px-border-radius-button)',\n      backgroundColor: 'inherit'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/commons/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n  color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      style={styles.container}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n    >\n      <Loader color={color} />\n    </motion.div>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps) {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      minHeight: getSize(size ?? 'md'),\n      width: fullWidth ? '100%' : 'fit-content',\n\n      position: 'relative',\n      display: 'flex',\n      justifyContent: textAlign || 'center',\n\n      padding: '0.625rem var(--px-space-xl)',\n      gap: 'var(--px-space-sm)',\n\n      borderRadius: 'var(--px-radius-lg)',\n\n      cursor: 'pointer',\n      overflow: 'hidden',\n\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n      boxShadow: variant === 'outlined' ? 'var(--px-shadow-xs)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !important'\n        }\n      }\n    },\n\n    content: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n\n      padding: '0',\n      borderRadius: 'inherit',\n\n      whiteSpace: 'nowrap',\n      columnGap: 'var(--px-space-sm)',\n\n      backgroundColor: 'inherit'\n    }\n  })\n}\n\nfunction getSize(size: ButtonSize | string): string {\n  switch (size) {\n    case 'lg':\n      return '3.25rem'\n    case 'md':\n      return '2.75rem'\n    case 'sm':\n      return '2.25rem'\n    case 'xs':\n      return '1.75rem'\n    default:\n      return size\n  }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return 'transparent'\n\n  if (variant === 'ghost') return 'transparent'\n\n  return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-border-primary)'\n\n  if (variant === 'ghost') return 'none'\n\n  return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps): string {\n  if (labelColor) return labelColor\n\n  if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n  if (variant === 'ghost') return '--px-btn-ghost-label'\n\n  return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { ButtonLoader } from './components/ButtonLoader'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n  type = 'button',\n  variant = 'filled',\n  ...rest\n}) => {\n  // Constants\n  const disabled = rest.disabled || rest.loading\n  const resolvedProps = { type, variant, disabled, ...rest }\n  const textColor = getTextColor(resolvedProps)\n  const { label, endIcon, startIcon, loading } = resolvedProps\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    resolvedProps,\n    createButtonStyles,\n    {\n      override: rest.styles,\n      applyCommonProps: true,\n      commonSlot: 'container',\n      pick: p => [p.disabled, p.loading, p.variant, p.label, p.color]\n    }\n  )\n\n  // Functions\n  function handleButtonClick(event: MouseEvent<HTMLButtonElement>) {\n    if (disabled) return\n\n    if (rest.onClick) rest.onClick(event)\n  }\n\n  return (\n    <button\n      type={type}\n      form={rest.form}\n      disabled={disabled}\n      aria-busy={rest.loading}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleButtonClick}\n    >\n      <div style={styles.content}>\n        {startIcon ?? null}\n\n        <Typography\n          color={textColor}\n          fontSize={resolvedProps.fontSize}\n          variant={rest.labelVariant || 'b1'}\n        >\n          {label}\n        </Typography>\n\n        {endIcon ?? null}\n\n        {loading ? (\n          <AnimatePresence>\n            <ButtonLoader color={textColor} />\n          </AnimatePresence>\n        ) : null}\n      </div>\n    </button>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Button-DSMdOqri.js","names":["ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n  return styled({\n    container: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      borderRadius: 'var(--px-border-radius-button)',\n      backgroundColor: 'inherit'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/commons/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n  color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      style={styles.container}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n    >\n      <Loader color={color} />\n    </motion.div>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps) {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      minHeight: getSize(size ?? 'md'),\n      width: fullWidth ? '100%' : 'fit-content',\n\n      position: 'relative',\n      display: 'flex',\n      justifyContent: textAlign || 'center',\n\n      padding: '0.625rem var(--px-space-xl)',\n      gap: 'var(--px-space-sm)',\n\n      borderRadius: 'var(--px-radius-lg)',\n\n      cursor: 'pointer',\n      overflow: 'hidden',\n\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n      boxShadow: variant === 'outlined' ? 'var(--px-shadow-xs)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !important'\n        }\n      }\n    },\n\n    content: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n\n      padding: '0',\n      borderRadius: 'inherit',\n\n      whiteSpace: 'nowrap',\n      columnGap: 'var(--px-space-sm)',\n\n      backgroundColor: 'inherit'\n    }\n  })\n}\n\nfunction getSize(size: ButtonSize | string): string {\n  switch (size) {\n    case 'lg':\n      return '3.25rem'\n    case 'md':\n      return '2.75rem'\n    case 'sm':\n      return '2.25rem'\n    case 'xs':\n      return '1.75rem'\n    default:\n      return size\n  }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return 'transparent'\n\n  if (variant === 'ghost') return 'transparent'\n\n  return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-border-primary)'\n\n  if (variant === 'ghost') return 'none'\n\n  return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps): string {\n  if (labelColor) return labelColor\n\n  if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n  if (variant === 'ghost') return '--px-btn-ghost-label'\n\n  return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { ButtonLoader } from './components/ButtonLoader'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n  type = 'button',\n  variant = 'filled',\n  ...rest\n}) => {\n  // Constants\n  const disabled = rest.disabled || rest.loading\n  const resolvedProps = { type, variant, disabled, ...rest }\n  const textColor = getTextColor(resolvedProps)\n  const { label, endIcon, startIcon, loading } = resolvedProps\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    resolvedProps,\n    createButtonStyles,\n    {\n      override: rest.styles,\n      applyCommonProps: true,\n      commonSlot: 'container',\n      pick: p => [p.disabled, p.loading, p.variant, p.label, p.color]\n    }\n  )\n\n  // Functions\n  function handleButtonClick(event: MouseEvent<HTMLButtonElement>) {\n    if (disabled) return\n\n    if (rest.onClick) rest.onClick(event)\n  }\n\n  return (\n    <button\n      type={type}\n      form={rest.form}\n      disabled={disabled}\n      aria-busy={rest.loading}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleButtonClick}\n    >\n      <div style={styles.content}>\n        {startIcon ?? null}\n\n        <Typography\n          color={textColor}\n          fontSize={resolvedProps.fontSize}\n          variant={rest.labelVariant || 'b1'}\n        >\n          {label}\n        </Typography>\n\n        {endIcon ?? null}\n\n        {loading ? (\n          <AnimatePresence>\n            <ButtonLoader color={textColor} />\n          </AnimatePresence>\n        ) : null}\n      </div>\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/{CheckItem-3d-2-qZe.js → CheckItem-CHkw5t6c.js}

@@ -1,6 +1,6 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CV4ryZLN.js";
-import { t as Icon } from "./Icon-CV5fAqK7.js";
-import { t as Typography } from "./Typography-BTJk47bm.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js";
+import { t as Icon } from "./Icon-C_yI8e6Z.js";
+import { t as Typography } from "./Typography-CKSjnDPX.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/CheckItem/styles.ts
@@ -45,4 +45,4 @@ const CheckItem = (props) => {
 
 //#endregion
 export { CheckItem as t };
-//# sourceMappingURL=CheckItem-3d-2-qZe.js.map
+//# sourceMappingURL=CheckItem-CHkw5t6c.js.map

package/dist/{CheckItem-3d-2-qZe.js.map → CheckItem-CHkw5t6c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CheckItem-3d-2-qZe.js","names":["CheckItem: React.FC<CheckItemProps>"],"sources":["../src/components/commons/toolkit/CheckItem/styles.ts","../src/components/commons/toolkit/CheckItem/index.tsx"],"sourcesContent":["// Types\nimport type { CheckItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createCheckItemStyles({ checked }: CheckItemProps): StyleMap {\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'row',\n      columnGap: 'var(--px-space-sm)'\n    },\n\n    iconContainer: {\n      width: '20px',\n      height: '20px',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked\n        ? 'var(--px-color-success)'\n        : 'var(--px-color-disabled)',\n\n      borderRadius: '50%'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckItemProps } from './types'\n\n// Styles\nimport { createCheckItemStyles } from './styles'\n\nexport const CheckItem: React.FC<CheckItemProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createCheckItemStyles)\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.iconContainer}>\n        <Icon name=\"general-check\" color=\"white\" size=\"sm\" />\n      </div>\n\n      <Typography variant=\"b2\">{props.label}</Typography>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAIA,SAAgB,sBAAsB,EAAE,WAAqC;AAC3E,QAAO,OAAO;EACZ,WAAW;GACT,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EAED,eAAe;GACb,OAAO;GACP,QAAQ;GAER,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,iBAAiB,UACb,4BACA;GAEJ,cAAc;GACf;EACF,CAAC;;;;;ACVJ,MAAaA,aAAsC,UAAS;CAE1D,MAAM,EAAE,WAAW,gBAAgB,OAAO,sBAAsB;AAEhE,QACE,qBAAC;EAAI,OAAO,OAAO;aACjB,oBAAC;GAAI,OAAO,OAAO;aACjB,oBAAC;IAAK,MAAK;IAAgB,OAAM;IAAQ,MAAK;KAAO;IACjD,EAEN,oBAAC;GAAW,SAAQ;aAAM,MAAM;IAAmB;GAC/C"}
+{"version":3,"file":"CheckItem-CHkw5t6c.js","names":["CheckItem: React.FC<CheckItemProps>"],"sources":["../src/components/commons/toolkit/CheckItem/styles.ts","../src/components/commons/toolkit/CheckItem/index.tsx"],"sourcesContent":["// Types\nimport type { CheckItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createCheckItemStyles({ checked }: CheckItemProps): StyleMap {\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'row',\n      columnGap: 'var(--px-space-sm)'\n    },\n\n    iconContainer: {\n      width: '20px',\n      height: '20px',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked\n        ? 'var(--px-color-success)'\n        : 'var(--px-color-disabled)',\n\n      borderRadius: '50%'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckItemProps } from './types'\n\n// Styles\nimport { createCheckItemStyles } from './styles'\n\nexport const CheckItem: React.FC<CheckItemProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createCheckItemStyles)\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.iconContainer}>\n        <Icon name=\"general-check\" color=\"white\" size=\"sm\" />\n      </div>\n\n      <Typography variant=\"b2\">{props.label}</Typography>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAIA,SAAgB,sBAAsB,EAAE,WAAqC;AAC3E,QAAO,OAAO;EACZ,WAAW;GACT,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EAED,eAAe;GACb,OAAO;GACP,QAAQ;GAER,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,iBAAiB,UACb,4BACA;GAEJ,cAAc;GACf;EACF,CAAC;;;;;ACVJ,MAAaA,aAAsC,UAAS;CAE1D,MAAM,EAAE,WAAW,gBAAgB,OAAO,sBAAsB;AAEhE,QACE,qBAAC;EAAI,OAAO,OAAO;aACjB,oBAAC;GAAI,OAAO,OAAO;aACjB,oBAAC;IAAK,MAAK;IAAgB,OAAM;IAAQ,MAAK;KAAO;IACjD,EAEN,oBAAC;GAAW,SAAQ;aAAM,MAAM;IAAmB;GAC/C"}

package/dist/{Checkbox-aFsrig0i.js → Checkbox-DU8VoDgU.js}

@@ -1,6 +1,6 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CV4ryZLN.js";
-import { t as Icon } from "./Icon-CV5fAqK7.js";
-import { t as Typography } from "./Typography-BTJk47bm.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js";
+import { t as Icon } from "./Icon-C_yI8e6Z.js";
+import { t as Typography } from "./Typography-CKSjnDPX.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox, Label } from "radix-ui";
@@ -165,4 +165,4 @@ const Checkbox$1 = (props) => {
 
 //#endregion
 export { Checkbox$1 as t };
-//# sourceMappingURL=Checkbox-aFsrig0i.js.map
+//# sourceMappingURL=Checkbox-DU8VoDgU.js.map

package/dist/{Checkbox-aFsrig0i.js.map → Checkbox-DU8VoDgU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-aFsrig0i.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/commons/toolkit/Checkbox/components/Label/styles.ts","../src/components/commons/toolkit/Checkbox/components/Label/index.tsx","../src/components/commons/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/commons/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/commons/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n  const { disabled } = props\n\n  return styled({\n    container: {\n      userSelect: 'none',\n      opacity: disabled ? 0.6 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      transition: 'all 200ms',\n\n      __rules: {\n        ':hover': { color: 'var(--px-color-secondary)' }\n      }\n    }\n  })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n  const { idFor, label, labelVariant } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createLabelStyles, {\n    pick: p => [p.disabled, p.labelVariant, p.label],\n    applyCommonProps: true\n  })\n\n  return (\n    <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n      <Typography variant={labelVariant ?? 'b1'} fontWeight=\"regular\">\n        {label}\n      </Typography>\n    </LabelRadix.Root>\n  )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n  return {\n    id: useId()\n  }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n  size: {\n    sm: { width: '1rem', height: '1rem' },\n    md: { width: '1.25rem', height: '1.25rem' },\n    lg: { width: '1.5rem', height: '1.5rem' }\n  },\n  radius: {\n    none: { borderRadius: 0 },\n    sm: { borderRadius: '0.25rem' },\n    md: { borderRadius: '0.375rem' },\n    lg: { borderRadius: '0.5rem' },\n    full: { borderRadius: '100%' }\n  }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps) {\n  const {\n    color,\n    checked,\n    size = 'md',\n    radius = 'md',\n    disabled = false,\n    labelPlacement = 'right'\n  } = props\n\n  const focusIndicatorOffsetColor = '#fff'\n\n  return styled({\n    container: {\n      display: 'flex',\n      columnGap: '0.5rem',\n      alignItems: 'center',\n      '--px-ring-color': color ?? undefined,\n      flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n    },\n\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked ? color : 'white',\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n      transition: 'color 200ms',\n      opacity: disabled ? 0.5 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      ...(CHECKBOX_STYLES.size[size] as any),\n      ...(CHECKBOX_STYLES.radius[radius] as any),\n\n      __rules: {\n        '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n        '&:focus-visible': {\n          outline: 'none',\n          boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n        }\n      }\n    },\n\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'var(--px-text-primary, #4b5563)'\n    }\n  })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n  backgroundColor: string\n): 'black' | 'white' {\n  let hex = backgroundColor.replace('#', '')\n\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map(c => c + c)\n      .join('')\n  }\n\n  if (hex.length === 8) {\n    hex = hex.substring(0, 6)\n  }\n\n  if (hex.length !== 6) return 'black'\n\n  const r = parseInt(hex.substring(0, 2), 16)\n  const g = parseInt(hex.substring(2, 4), 16)\n  const b = parseInt(hex.substring(4, 6), 16)\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n  return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    icon,\n    label,\n    color,\n    labelVariant,\n    checked = false,\n    disabled = false,\n    onChange\n  } = props\n\n  const iconColor = color ? getContrastingTextColor(color) : undefined\n\n  // Hooks\n  const { id } = useCheckbox()\n\n  const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n  return (\n    <div style={styles.container}>\n      <CheckboxRadix.Root\n        style={styles.root}\n        className={classes.root}\n        id={id}\n        tabIndex={0}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={checked => onChange(checked === true)}\n      >\n        <CheckboxRadix.Indicator style={styles.indicator}>\n          {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n        </CheckboxRadix.Indicator>\n      </CheckboxRadix.Root>\n\n      {label ? (\n        <Label\n          idFor={id}\n          label={label}\n          disabled={disabled}\n          labelVariant={labelVariant}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox-DU8VoDgU.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/commons/toolkit/Checkbox/components/Label/styles.ts","../src/components/commons/toolkit/Checkbox/components/Label/index.tsx","../src/components/commons/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/commons/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/commons/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n  const { disabled } = props\n\n  return styled({\n    container: {\n      userSelect: 'none',\n      opacity: disabled ? 0.6 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      transition: 'all 200ms',\n\n      __rules: {\n        ':hover': { color: 'var(--px-color-secondary)' }\n      }\n    }\n  })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n  const { idFor, label, labelVariant } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createLabelStyles, {\n    pick: p => [p.disabled, p.labelVariant, p.label],\n    applyCommonProps: true\n  })\n\n  return (\n    <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n      <Typography variant={labelVariant ?? 'b1'} fontWeight=\"regular\">\n        {label}\n      </Typography>\n    </LabelRadix.Root>\n  )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n  return {\n    id: useId()\n  }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n  size: {\n    sm: { width: '1rem', height: '1rem' },\n    md: { width: '1.25rem', height: '1.25rem' },\n    lg: { width: '1.5rem', height: '1.5rem' }\n  },\n  radius: {\n    none: { borderRadius: 0 },\n    sm: { borderRadius: '0.25rem' },\n    md: { borderRadius: '0.375rem' },\n    lg: { borderRadius: '0.5rem' },\n    full: { borderRadius: '100%' }\n  }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps) {\n  const {\n    color,\n    checked,\n    size = 'md',\n    radius = 'md',\n    disabled = false,\n    labelPlacement = 'right'\n  } = props\n\n  const focusIndicatorOffsetColor = '#fff'\n\n  return styled({\n    container: {\n      display: 'flex',\n      columnGap: '0.5rem',\n      alignItems: 'center',\n      '--px-ring-color': color ?? undefined,\n      flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n    },\n\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked ? color : 'white',\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n      transition: 'color 200ms',\n      opacity: disabled ? 0.5 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      ...(CHECKBOX_STYLES.size[size] as any),\n      ...(CHECKBOX_STYLES.radius[radius] as any),\n\n      __rules: {\n        '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n        '&:focus-visible': {\n          outline: 'none',\n          boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n        }\n      }\n    },\n\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'var(--px-text-primary, #4b5563)'\n    }\n  })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n  backgroundColor: string\n): 'black' | 'white' {\n  let hex = backgroundColor.replace('#', '')\n\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map(c => c + c)\n      .join('')\n  }\n\n  if (hex.length === 8) {\n    hex = hex.substring(0, 6)\n  }\n\n  if (hex.length !== 6) return 'black'\n\n  const r = parseInt(hex.substring(0, 2), 16)\n  const g = parseInt(hex.substring(2, 4), 16)\n  const b = parseInt(hex.substring(4, 6), 16)\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n  return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    icon,\n    label,\n    color,\n    labelVariant,\n    checked = false,\n    disabled = false,\n    onChange\n  } = props\n\n  const iconColor = color ? getContrastingTextColor(color) : undefined\n\n  // Hooks\n  const { id } = useCheckbox()\n\n  const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n  return (\n    <div style={styles.container}>\n      <CheckboxRadix.Root\n        style={styles.root}\n        className={classes.root}\n        id={id}\n        tabIndex={0}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={checked => onChange(checked === true)}\n      >\n        <CheckboxRadix.Indicator style={styles.indicator}>\n          {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n        </CheckboxRadix.Indicator>\n      </CheckboxRadix.Root>\n\n      {label ? (\n        <Label\n          idFor={id}\n          label={label}\n          disabled={disabled}\n          labelVariant={labelVariant}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,kBAAkB,OAA6B;CAC7D,MAAM,EAAE,aAAa;AAErB,QAAO,OAAO,EACZ,WAAW;EACT,YAAY;EACZ,SAAS,WAAW,KAAM;EAC1B,QAAQ,WAAW,gBAAgB;EAEnC,YAAY;EAEZ,SAAS,EACP,UAAU,EAAE,OAAO,6BAA6B,EACjD;EACF,EACF,CAAC;;;;;ACJJ,MAAaA,WAA8B,UAAS;CAClD,MAAM,EAAE,OAAO,OAAO,iBAAiB;CAGvC,MAAM,EAAE,WAAW,gBAAgB,OAAO,mBAAmB;EAC3D,OAAM,MAAK;GAAC,EAAE;GAAU,EAAE;GAAc,EAAE;GAAM;EAChD,kBAAkB;EACnB,CAAC;AAEF,QACE,oBAACC,MAAW;EAAK,SAAS;EAAO,OAAO,OAAO;YAC7C,oBAAC;GAAW,SAAS,gBAAgB;GAAM,YAAW;aACnD;IACU;GACG;;;;;AC1BtB,SAAgB,cAAc;AAC5B,QAAO,EACL,IAAI,OAAO,EACZ;;;;;ACFH,MAAaC,kBAA4C;CACvD,MAAM;EACJ,IAAI;GAAE,OAAO;GAAQ,QAAQ;GAAQ;EACrC,IAAI;GAAE,OAAO;GAAW,QAAQ;GAAW;EAC3C,IAAI;GAAE,OAAO;GAAU,QAAQ;GAAU;EAC1C;CACD,QAAQ;EACN,MAAM,EAAE,cAAc,GAAG;EACzB,IAAI,EAAE,cAAc,WAAW;EAC/B,IAAI,EAAE,cAAc,YAAY;EAChC,IAAI,EAAE,cAAc,UAAU;EAC9B,MAAM,EAAE,cAAc,QAAQ;EAC/B;CACF;AAED,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EACJ,OACA,SACA,OAAO,MACP,SAAS,MACT,WAAW,OACX,iBAAiB,YACf;CAEJ,MAAM,4BAA4B;AAElC,QAAO,OAAO;EACZ,WAAW;GACT,SAAS;GACT,WAAW;GACX,YAAY;GACZ,mBAAmB,SAAS;GAC5B,eAAe,mBAAmB,UAAU,QAAQ;GACrD;EAED,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,iBAAiB,UAAU,QAAQ;GACnC,aAAa;GACb,aAAa;GACb,aAAa,UAAU,QAAQ;GAE/B,YAAY;GACZ,SAAS,WAAW,KAAM;GAC1B,QAAQ,WAAW,gBAAgB;GAEnC,GAAI,gBAAgB,KAAK;GACzB,GAAI,gBAAgB,OAAO;GAE3B,SAAS;IACP,WAAW,EAAE,aAAa,uCAAuC;IACjE,mBAAmB;KACjB,SAAS;KACT,WAAW,aAAa,0BAA0B;KACnD;IACF;GACF;EAED,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACR;EACF,CAAC;;;;;;;;;ACpEJ,SAAgB,wBACd,iBACmB;CACnB,IAAI,MAAM,gBAAgB,QAAQ,KAAK,GAAG;AAE1C,KAAI,IAAI,WAAW,EACjB,OAAM,IACH,MAAM,GAAG,CACT,KAAI,MAAK,IAAI,EAAE,CACf,KAAK,GAAG;AAGb,KAAI,IAAI,WAAW,EACjB,OAAM,IAAI,UAAU,GAAG,EAAE;AAG3B,KAAI,IAAI,WAAW,EAAG,QAAO;CAE7B,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;CAC3C,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;CAC3C,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;AAI3C,SAFmB,OAAQ,IAAI,OAAQ,IAAI,OAAQ,KAAK,MAErC,KAAM,UAAU;;;;;ACTrC,MAAaC,cAAoC,UAAS;CACxD,MAAM,EACJ,MACA,OACA,OACA,cACA,UAAU,OACV,WAAW,OACX,aACE;CAEJ,MAAM,YAAY,QAAQ,wBAAwB,MAAM,GAAG;CAG3D,MAAM,EAAE,OAAO,aAAa;CAE5B,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,qBAAqB;AAExE,QACE,qBAAC;EAAI,OAAO,OAAO;aACjB,oBAACC,SAAc;GACb,OAAO,OAAO;GACd,WAAW,QAAQ;GACf;GACJ,UAAU;GACD;GACC;GACV,kBAAiB,cAAW,SAASC,cAAY,KAAK;aAEtD,oBAACD,SAAc;IAAU,OAAO,OAAO;cACpC,QAAQ,oBAAC;KAAK,MAAK;KAAgB,MAAK;KAAK,OAAO;MAAa;KAC1C;IACP,EAEpB,QACC,oBAACE;GACC,OAAO;GACA;GACG;GACI;IACd,GACA;GACA"}

package/dist/{Chip-DWoGbX_A.js → Chip-CINbb2Hf.js}

@@ -1,5 +1,5 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CV4ryZLN.js";
-import { t as Typography } from "./Typography-BTJk47bm.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js";
+import { t as Typography } from "./Typography-CKSjnDPX.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/Chip/styles.ts
@@ -69,4 +69,4 @@ const Chip = (props) => {
 
 //#endregion
 export { types_exports as n, Chip as t };
-//# sourceMappingURL=Chip-DWoGbX_A.js.map
+//# sourceMappingURL=Chip-CINbb2Hf.js.map

package/dist/{Chip-DWoGbX_A.js.map → Chip-CINbb2Hf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Chip-DWoGbX_A.js","names":["Chip: React.FC<ChipProps>"],"sources":["../src/components/commons/toolkit/Chip/styles.ts","../src/components/commons/toolkit/Chip/types.ts","../src/components/commons/toolkit/Chip/index.tsx"],"sourcesContent":["// Types\nimport type { ChipProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createChipStyles(props: ChipProps) {\n  return styled({\n    container: {\n      display: 'flex',\n      alignItems: 'center',\n\n      borderWidth: 1,\n      columnGap: '0.25rem',\n      borderRadius: '0.5rem',\n      paddingBlock: '0.25rem',\n      paddingRight: '0.625rem',\n      paddingLeft: props.data.icon ? '0.5rem' : '0.625rem',\n\n      cursor: !props.viewOnly ? 'pointer' : 'default',\n\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: 'var(--px-border-primary)',\n      color: props.isSelected ? 'white' : 'var(--px-text-primary)',\n      backgroundColor: props.isSelected\n        ? 'var(--px-color-primary)'\n        : 'var(--px-bg)',\n\n      whiteSpace: 'nowrap',\n      userSelect: props.viewOnly ? 'auto' : 'none',\n      MozUserSelect: props.viewOnly ? 'auto' : 'none',\n      msUserSelect: props.viewOnly ? 'inherit' : 'none',\n      WebkitUserSelect: props.viewOnly ? 'auto' : 'none',\n\n      transition: 'background-color 0.25s ease-out',\n      opacity: checkDisabled(props) ? 0.5 : 1,\n\n      __rules: {\n        '&:hover': {\n          opacity: props.viewOnly ? 1 : 0.85\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        }\n      }\n    }\n  })\n}\n\nfunction checkDisabled(props: ChipProps) {\n  if (!props.viewOnly) return false\n  return props.listDisabled || props.data.disabled\n}\n","export interface ChipProps {\n  data: ChipOption\n  viewOnly?: boolean\n  isSelected?: boolean\n  listDisabled?: boolean\n\n  onClick?(value: ChipOption): void\n}\n\nexport interface ChipOption {\n  value: string\n  label: string\n\n  disabled?: boolean\n  icon?: React.ReactNode\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '../Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ChipProps } from './types'\n\n// Styles\nimport { createChipStyles } from './styles'\n\nexport * as ChipTypes from './types'\n\nexport const Chip: React.FC<ChipProps> = props => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createChipStyles)\n\n  // Constants\n  const Component = props.viewOnly ? 'span' : 'button'\n  const isDisabled = props.listDisabled || props.data.disabled\n\n  // Functions\n  function handleClick() {\n    if (isDisabled || props.viewOnly) return\n    props.onClick?.(props.data)\n  }\n\n  return (\n    <Component\n      disabled={isDisabled}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleClick}\n    >\n      {props.data.icon}\n\n      <Typography variant=\"b2\" lineHeight=\"1.25rem\" color=\"inherit\">\n        {props.data.label}\n      </Typography>\n    </Component>\n  )\n}\n"],"mappings":";;;;;AAIA,SAAgB,iBAAiB,OAAkB;AACjD,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,YAAY;EAEZ,aAAa;EACb,WAAW;EACX,cAAc;EACd,cAAc;EACd,cAAc;EACd,aAAa,MAAM,KAAK,OAAO,WAAW;EAE1C,QAAQ,CAAC,MAAM,WAAW,YAAY;EAEtC,WAAW;EACX,aAAa;EACb,OAAO,MAAM,aAAa,UAAU;EACpC,iBAAiB,MAAM,aACnB,4BACA;EAEJ,YAAY;EACZ,YAAY,MAAM,WAAW,SAAS;EACtC,eAAe,MAAM,WAAW,SAAS;EACzC,cAAc,MAAM,WAAW,YAAY;EAC3C,kBAAkB,MAAM,WAAW,SAAS;EAE5C,YAAY;EACZ,SAAS,cAAc,MAAM,GAAG,KAAM;EAEtC,SAAS;GACP,WAAW,EACT,SAAS,MAAM,WAAW,IAAI,KAC/B;GAED,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,cAAc,OAAkB;AACvC,KAAI,CAAC,MAAM,SAAU,QAAO;AAC5B,QAAO,MAAM,gBAAgB,MAAM,KAAK;;;;;;;;;AElC1C,MAAaA,QAA4B,UAAS;CAEhD,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,iBAAiB;CAGpE,MAAM,YAAY,MAAM,WAAW,SAAS;CAC5C,MAAM,aAAa,MAAM,gBAAgB,MAAM,KAAK;CAGpD,SAAS,cAAc;AACrB,MAAI,cAAc,MAAM,SAAU;AAClC,QAAM,UAAU,MAAM,KAAK;;AAG7B,QACE,qBAAC;EACC,UAAU;EACV,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,SAAS;aAER,MAAM,KAAK,MAEZ,oBAAC;GAAW,SAAQ;GAAK,YAAW;GAAU,OAAM;aACjD,MAAM,KAAK;IACD;GACH"}
+{"version":3,"file":"Chip-CINbb2Hf.js","names":["Chip: React.FC<ChipProps>"],"sources":["../src/components/commons/toolkit/Chip/styles.ts","../src/components/commons/toolkit/Chip/types.ts","../src/components/commons/toolkit/Chip/index.tsx"],"sourcesContent":["// Types\nimport type { ChipProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createChipStyles(props: ChipProps) {\n  return styled({\n    container: {\n      display: 'flex',\n      alignItems: 'center',\n\n      borderWidth: 1,\n      columnGap: '0.25rem',\n      borderRadius: '0.5rem',\n      paddingBlock: '0.25rem',\n      paddingRight: '0.625rem',\n      paddingLeft: props.data.icon ? '0.5rem' : '0.625rem',\n\n      cursor: !props.viewOnly ? 'pointer' : 'default',\n\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: 'var(--px-border-primary)',\n      color: props.isSelected ? 'white' : 'var(--px-text-primary)',\n      backgroundColor: props.isSelected\n        ? 'var(--px-color-primary)'\n        : 'var(--px-bg)',\n\n      whiteSpace: 'nowrap',\n      userSelect: props.viewOnly ? 'auto' : 'none',\n      MozUserSelect: props.viewOnly ? 'auto' : 'none',\n      msUserSelect: props.viewOnly ? 'inherit' : 'none',\n      WebkitUserSelect: props.viewOnly ? 'auto' : 'none',\n\n      transition: 'background-color 0.25s ease-out',\n      opacity: checkDisabled(props) ? 0.5 : 1,\n\n      __rules: {\n        '&:hover': {\n          opacity: props.viewOnly ? 1 : 0.85\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        }\n      }\n    }\n  })\n}\n\nfunction checkDisabled(props: ChipProps) {\n  if (!props.viewOnly) return false\n  return props.listDisabled || props.data.disabled\n}\n","export interface ChipProps {\n  data: ChipOption\n  viewOnly?: boolean\n  isSelected?: boolean\n  listDisabled?: boolean\n\n  onClick?(value: ChipOption): void\n}\n\nexport interface ChipOption {\n  value: string\n  label: string\n\n  disabled?: boolean\n  icon?: React.ReactNode\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '../Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ChipProps } from './types'\n\n// Styles\nimport { createChipStyles } from './styles'\n\nexport * as ChipTypes from './types'\n\nexport const Chip: React.FC<ChipProps> = props => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createChipStyles)\n\n  // Constants\n  const Component = props.viewOnly ? 'span' : 'button'\n  const isDisabled = props.listDisabled || props.data.disabled\n\n  // Functions\n  function handleClick() {\n    if (isDisabled || props.viewOnly) return\n    props.onClick?.(props.data)\n  }\n\n  return (\n    <Component\n      disabled={isDisabled}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleClick}\n    >\n      {props.data.icon}\n\n      <Typography variant=\"b2\" lineHeight=\"1.25rem\" color=\"inherit\">\n        {props.data.label}\n      </Typography>\n    </Component>\n  )\n}\n"],"mappings":";;;;;AAIA,SAAgB,iBAAiB,OAAkB;AACjD,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,YAAY;EAEZ,aAAa;EACb,WAAW;EACX,cAAc;EACd,cAAc;EACd,cAAc;EACd,aAAa,MAAM,KAAK,OAAO,WAAW;EAE1C,QAAQ,CAAC,MAAM,WAAW,YAAY;EAEtC,WAAW;EACX,aAAa;EACb,OAAO,MAAM,aAAa,UAAU;EACpC,iBAAiB,MAAM,aACnB,4BACA;EAEJ,YAAY;EACZ,YAAY,MAAM,WAAW,SAAS;EACtC,eAAe,MAAM,WAAW,SAAS;EACzC,cAAc,MAAM,WAAW,YAAY;EAC3C,kBAAkB,MAAM,WAAW,SAAS;EAE5C,YAAY;EACZ,SAAS,cAAc,MAAM,GAAG,KAAM;EAEtC,SAAS;GACP,WAAW,EACT,SAAS,MAAM,WAAW,IAAI,KAC/B;GAED,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,cAAc,OAAkB;AACvC,KAAI,CAAC,MAAM,SAAU,QAAO;AAC5B,QAAO,MAAM,gBAAgB,MAAM,KAAK;;;;;;;;;AElC1C,MAAaA,QAA4B,UAAS;CAEhD,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,iBAAiB;CAGpE,MAAM,YAAY,MAAM,WAAW,SAAS;CAC5C,MAAM,aAAa,MAAM,gBAAgB,MAAM,KAAK;CAGpD,SAAS,cAAc;AACrB,MAAI,cAAc,MAAM,SAAU;AAClC,QAAM,UAAU,MAAM,KAAK;;AAG7B,QACE,qBAAC;EACC,UAAU;EACV,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,SAAS;aAER,MAAM,KAAK,MAEZ,oBAAC;GAAW,SAAQ;GAAK,YAAW;GAAU,OAAM;aACjD,MAAM,KAAK;IACD;GACH"}

package/dist/{ChipList-ClC-BPyL.js → ChipList-Dspe8Tf9.js}

@@ -1,6 +1,7 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CV4ryZLN.js";
-import { t as Chip } from "./Chip-DWoGbX_A.js";
-import { n as Label, t as ErrorMessage } from "./ErrorMessage-BRnYfudz.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js";
+import { t as Chip } from "./Chip-CINbb2Hf.js";
+import { t as Label } from "./Label-CPua_PPu.js";
+import { t as ErrorMessage } from "./ErrorMessage-DOkrG22I.js";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
@@ -110,4 +111,4 @@ const ChipList = (props) => {
 
 //#endregion
 export { ChipList as t };
-//# sourceMappingURL=ChipList-ClC-BPyL.js.map
+//# sourceMappingURL=ChipList-Dspe8Tf9.js.map

package/dist/{ChipList-ClC-BPyL.js.map → ChipList-Dspe8Tf9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ChipList-ClC-BPyL.js","names":["ChipsLoader: React.FC","ChipList: React.FC<ChipListProps>"],"sources":["../src/components/commons/toolkit/ChipList/components/ChipsLoader/styles.ts","../src/components/commons/toolkit/ChipList/components/ChipsLoader/index.tsx","../src/components/commons/toolkit/ChipList/hooks/useChipList/index.ts","../src/components/commons/toolkit/ChipList/styles.ts","../src/components/commons/toolkit/ChipList/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createChipsLoaderStyles() {\n  return styled({\n    container: {\n      width: '5rem',\n      height: '1.75rem',\n\n      display: 'flex',\n\n      borderRadius: '0.5rem',\n\n      backgroundColor: 'var(--px-surface)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { useEffect, useState } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createChipsLoaderStyles } from './styles'\n\nexport const ChipsLoader: React.FC = () => {\n  // States\n  const [pulseOn, setPulseOn] = useState(true)\n\n  // Hooks\n  const { styles } = useThemedStyles({}, createChipsLoaderStyles)\n\n  useEffect(() => {\n    const id = setInterval(() => setPulseOn(v => !v), 600)\n    return () => clearInterval(id)\n  }, [])\n\n  // Functions\n  function renderContent() {\n    return Array.from({ length: 5 }).map((_, idx) => {\n      const delayMs = idx * 120\n\n      return (\n        <div\n          key={idx.toString()}\n          style={{\n            ...styles.container,\n            opacity: pulseOn ? 1 : 0.6,\n            transition: `opacity 600ms ease-in-out ${delayMs}ms`\n          }}\n        />\n      )\n    })\n  }\n\n  return <>{renderContent()}</>\n}\n","// Types\nimport type { ChipListProps } from '../../types'\nimport type { ChipOption } from '@components/commons/toolkit/Chip/types'\n\nexport function useChipList({\n  value,\n  canClear,\n  multiple,\n  onChange\n}: ChipListProps) {\n  // Functions\n  function handleChange(option: ChipOption) {\n    const isAlreadySelected = value.includes(option.value)\n\n    if (!multiple) {\n      if (isAlreadySelected) {\n        if (canClear) onChange?.([])\n      } else onChange?.([option.value])\n\n      return\n    }\n\n    if (isAlreadySelected) {\n      if (value.length === 1) {\n        if (canClear) onChange?.([])\n      } else onChange?.(value.filter(v => v !== option.value))\n    } else onChange?.([...value, option.value])\n  }\n\n  return { handleChange }\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createChipListStyles() {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n\n    listContainer: {\n      width: '100%',\n\n      display: 'flex',\n      flexWrap: 'wrap',\n\n      gap: '0.5rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Chip } from '../Chip'\nimport { Label } from '../Label'\nimport { ErrorMessage } from '../ErrorMessage'\nimport { ChipsLoader } from './components/ChipsLoader'\n\n// Hooks\nimport { useChipList } from './hooks/useChipList'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ChipListProps } from './types'\n\n// Styles\nimport { createChipListStyles } from './styles'\n\nexport const ChipList: React.FC<ChipListProps> = props => {\n  // Hooks\n  const { handleChange } = useChipList(props)\n  const { styles } = useThemedStyles(props, createChipListStyles)\n\n  // Functions\n  function renderContent() {\n    if (props.isLoading) return <ChipsLoader />\n\n    return props.options.map(item => (\n      <Chip\n        key={item.value}\n        data={item}\n        viewOnly={props.viewOnly}\n        listDisabled={props.disabled}\n        isSelected={props.value.includes(item.value)}\n        onClick={handleChange}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      {props.hideLabel ? null : (\n        <Label\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      )}\n\n      <div style={styles.listContainer}>{renderContent()}</div>\n\n      {props.errorMessage ? (\n        <ErrorMessage message={props.errorMessage} />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAGA,SAAgB,0BAA0B;AACxC,QAAO,OAAO,EACZ,WAAW;EACT,OAAO;EACP,QAAQ;EAER,SAAS;EAET,cAAc;EAEd,iBAAiB;EAClB,EACF,CAAC;;;;;ACLJ,MAAaA,oBAA8B;CAEzC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAG5C,MAAM,EAAE,WAAW,gBAAgB,EAAE,EAAE,wBAAwB;AAE/D,iBAAgB;EACd,MAAM,KAAK,kBAAkB,YAAW,MAAK,CAAC,EAAE,EAAE,IAAI;AACtD,eAAa,cAAc,GAAG;IAC7B,EAAE,CAAC;CAGN,SAAS,gBAAgB;AACvB,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,QAAQ;GAC/C,MAAM,UAAU,MAAM;AAEtB,UACE,oBAAC,SAEC,OAAO;IACL,GAAG,OAAO;IACV,SAAS,UAAU,IAAI;IACvB,YAAY,6BAA6B,QAAQ;IAClD,IALI,IAAI,UAAU,CAMnB;IAEJ;;AAGJ,QAAO,4CAAG,eAAe,GAAI;;;;;ACpC/B,SAAgB,YAAY,EAC1B,OACA,UACA,UACA,YACgB;CAEhB,SAAS,aAAa,QAAoB;EACxC,MAAM,oBAAoB,MAAM,SAAS,OAAO,MAAM;AAEtD,MAAI,CAAC,UAAU;AACb,OAAI,mBACF;QAAI,SAAU,YAAW,EAAE,CAAC;SACvB,YAAW,CAAC,OAAO,MAAM,CAAC;AAEjC;;AAGF,MAAI,kBACF,KAAI,MAAM,WAAW,GACnB;OAAI,SAAU,YAAW,EAAE,CAAC;QACvB,YAAW,MAAM,QAAO,MAAK,MAAM,OAAO,MAAM,CAAC;MACnD,YAAW,CAAC,GAAG,OAAO,OAAO,MAAM,CAAC;;AAG7C,QAAO,EAAE,cAAc;;;;;AC1BzB,SAAgB,uBAAuB;AACrC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EAED,eAAe;GACb,OAAO;GAEP,SAAS;GACT,UAAU;GAEV,KAAK;GACN;EACF,CAAC;;;;;ACHJ,MAAaC,YAAoC,UAAS;CAExD,MAAM,EAAE,iBAAiB,YAAY,MAAM;CAC3C,MAAM,EAAE,WAAW,gBAAgB,OAAO,qBAAqB;CAG/D,SAAS,gBAAgB;AACvB,MAAI,MAAM,UAAW,QAAO,oBAAC,gBAAc;AAE3C,SAAO,MAAM,QAAQ,KAAI,SACvB,oBAAC;GAEC,MAAM;GACN,UAAU,MAAM;GAChB,cAAc,MAAM;GACpB,YAAY,MAAM,MAAM,SAAS,KAAK,MAAM;GAC5C,SAAS;KALJ,KAAK,MAMV,CACF;;AAGJ,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,MAAM,YAAY,OACjB,oBAAC;IACC,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,eAAe,MAAM;IACrB,GAAI,MAAM;KACV;GAGJ,oBAAC;IAAI,OAAO,OAAO;cAAgB,eAAe;KAAO;GAExD,MAAM,eACL,oBAAC,gBAAa,SAAS,MAAM,eAAgB,GAC3C;;GACA"}
+{"version":3,"file":"ChipList-Dspe8Tf9.js","names":["ChipsLoader: React.FC","ChipList: React.FC<ChipListProps>"],"sources":["../src/components/commons/toolkit/ChipList/components/ChipsLoader/styles.ts","../src/components/commons/toolkit/ChipList/components/ChipsLoader/index.tsx","../src/components/commons/toolkit/ChipList/hooks/useChipList/index.ts","../src/components/commons/toolkit/ChipList/styles.ts","../src/components/commons/toolkit/ChipList/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createChipsLoaderStyles() {\n  return styled({\n    container: {\n      width: '5rem',\n      height: '1.75rem',\n\n      display: 'flex',\n\n      borderRadius: '0.5rem',\n\n      backgroundColor: 'var(--px-surface)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { useEffect, useState } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createChipsLoaderStyles } from './styles'\n\nexport const ChipsLoader: React.FC = () => {\n  // States\n  const [pulseOn, setPulseOn] = useState(true)\n\n  // Hooks\n  const { styles } = useThemedStyles({}, createChipsLoaderStyles)\n\n  useEffect(() => {\n    const id = setInterval(() => setPulseOn(v => !v), 600)\n    return () => clearInterval(id)\n  }, [])\n\n  // Functions\n  function renderContent() {\n    return Array.from({ length: 5 }).map((_, idx) => {\n      const delayMs = idx * 120\n\n      return (\n        <div\n          key={idx.toString()}\n          style={{\n            ...styles.container,\n            opacity: pulseOn ? 1 : 0.6,\n            transition: `opacity 600ms ease-in-out ${delayMs}ms`\n          }}\n        />\n      )\n    })\n  }\n\n  return <>{renderContent()}</>\n}\n","// Types\nimport type { ChipListProps } from '../../types'\nimport type { ChipOption } from '@components/commons/toolkit/Chip/types'\n\nexport function useChipList({\n  value,\n  canClear,\n  multiple,\n  onChange\n}: ChipListProps) {\n  // Functions\n  function handleChange(option: ChipOption) {\n    const isAlreadySelected = value.includes(option.value)\n\n    if (!multiple) {\n      if (isAlreadySelected) {\n        if (canClear) onChange?.([])\n      } else onChange?.([option.value])\n\n      return\n    }\n\n    if (isAlreadySelected) {\n      if (value.length === 1) {\n        if (canClear) onChange?.([])\n      } else onChange?.(value.filter(v => v !== option.value))\n    } else onChange?.([...value, option.value])\n  }\n\n  return { handleChange }\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createChipListStyles() {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n\n    listContainer: {\n      width: '100%',\n\n      display: 'flex',\n      flexWrap: 'wrap',\n\n      gap: '0.5rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Chip } from '../Chip'\nimport { Label } from '../Label'\nimport { ErrorMessage } from '../ErrorMessage'\nimport { ChipsLoader } from './components/ChipsLoader'\n\n// Hooks\nimport { useChipList } from './hooks/useChipList'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ChipListProps } from './types'\n\n// Styles\nimport { createChipListStyles } from './styles'\n\nexport const ChipList: React.FC<ChipListProps> = props => {\n  // Hooks\n  const { handleChange } = useChipList(props)\n  const { styles } = useThemedStyles(props, createChipListStyles)\n\n  // Functions\n  function renderContent() {\n    if (props.isLoading) return <ChipsLoader />\n\n    return props.options.map(item => (\n      <Chip\n        key={item.value}\n        data={item}\n        viewOnly={props.viewOnly}\n        listDisabled={props.disabled}\n        isSelected={props.value.includes(item.value)}\n        onClick={handleChange}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      {props.hideLabel ? null : (\n        <Label\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      )}\n\n      <div style={styles.listContainer}>{renderContent()}</div>\n\n      {props.errorMessage ? (\n        <ErrorMessage message={props.errorMessage} />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAgB,0BAA0B;AACxC,QAAO,OAAO,EACZ,WAAW;EACT,OAAO;EACP,QAAQ;EAER,SAAS;EAET,cAAc;EAEd,iBAAiB;EAClB,EACF,CAAC;;;;;ACLJ,MAAaA,oBAA8B;CAEzC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAG5C,MAAM,EAAE,WAAW,gBAAgB,EAAE,EAAE,wBAAwB;AAE/D,iBAAgB;EACd,MAAM,KAAK,kBAAkB,YAAW,MAAK,CAAC,EAAE,EAAE,IAAI;AACtD,eAAa,cAAc,GAAG;IAC7B,EAAE,CAAC;CAGN,SAAS,gBAAgB;AACvB,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,QAAQ;GAC/C,MAAM,UAAU,MAAM;AAEtB,UACE,oBAAC,SAEC,OAAO;IACL,GAAG,OAAO;IACV,SAAS,UAAU,IAAI;IACvB,YAAY,6BAA6B,QAAQ;IAClD,IALI,IAAI,UAAU,CAMnB;IAEJ;;AAGJ,QAAO,4CAAG,eAAe,GAAI;;;;;ACpC/B,SAAgB,YAAY,EAC1B,OACA,UACA,UACA,YACgB;CAEhB,SAAS,aAAa,QAAoB;EACxC,MAAM,oBAAoB,MAAM,SAAS,OAAO,MAAM;AAEtD,MAAI,CAAC,UAAU;AACb,OAAI,mBACF;QAAI,SAAU,YAAW,EAAE,CAAC;SACvB,YAAW,CAAC,OAAO,MAAM,CAAC;AAEjC;;AAGF,MAAI,kBACF,KAAI,MAAM,WAAW,GACnB;OAAI,SAAU,YAAW,EAAE,CAAC;QACvB,YAAW,MAAM,QAAO,MAAK,MAAM,OAAO,MAAM,CAAC;MACnD,YAAW,CAAC,GAAG,OAAO,OAAO,MAAM,CAAC;;AAG7C,QAAO,EAAE,cAAc;;;;;AC1BzB,SAAgB,uBAAuB;AACrC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EAED,eAAe;GACb,OAAO;GAEP,SAAS;GACT,UAAU;GAEV,KAAK;GACN;EACF,CAAC;;;;;ACHJ,MAAaC,YAAoC,UAAS;CAExD,MAAM,EAAE,iBAAiB,YAAY,MAAM;CAC3C,MAAM,EAAE,WAAW,gBAAgB,OAAO,qBAAqB;CAG/D,SAAS,gBAAgB;AACvB,MAAI,MAAM,UAAW,QAAO,oBAAC,gBAAc;AAE3C,SAAO,MAAM,QAAQ,KAAI,SACvB,oBAAC;GAEC,MAAM;GACN,UAAU,MAAM;GAChB,cAAc,MAAM;GACpB,YAAY,MAAM,MAAM,SAAS,KAAK,MAAM;GAC5C,SAAS;KALJ,KAAK,MAMV,CACF;;AAGJ,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,MAAM,YAAY,OACjB,oBAAC;IACC,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,eAAe,MAAM;IACrB,GAAI,MAAM;KACV;GAGJ,oBAAC;IAAI,OAAO,OAAO;cAAgB,eAAe;KAAO;GAExD,MAAM,eACL,oBAAC,gBAAa,SAAS,MAAM,eAAgB,GAC3C;;GACA"}

package/dist/{ColorPicker-BVmUDE-h.js → ColorPicker-CdECHCbh.js}

@@ -1,6 +1,7 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CV4ryZLN.js";
-import { n as Label, t as ErrorMessage } from "./ErrorMessage-BRnYfudz.js";
-import { t as Skeleton } from "./Skeleton-iCdZ2Gai.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js";
+import { t as Label } from "./Label-CPua_PPu.js";
+import { t as ErrorMessage } from "./ErrorMessage-DOkrG22I.js";
+import { t as Skeleton } from "./Skeleton-CixPhMzv.js";
 import { useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
@@ -180,4 +181,4 @@ const ColorPicker = (props) => {
 
 //#endregion
 export { types_exports as n, ColorPicker as t };
-//# sourceMappingURL=ColorPicker-BVmUDE-h.js.map
+//# sourceMappingURL=ColorPicker-CdECHCbh.js.map

package/dist/{ColorPicker-BVmUDE-h.js.map → ColorPicker-CdECHCbh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker-BVmUDE-h.js","names":["ColorButton: React.FC<ColorButtonProps>","ColorsLoader: React.FC<Props>","ColorPicker: React.FC<ColorPickerProps>"],"sources":["../src/components/commons/inputs/ColorPicker/components/ColorButton/styles.ts","../src/components/commons/inputs/ColorPicker/components/ColorButton/index.tsx","../src/components/commons/inputs/ColorPicker/components/ColorsLoader/index.tsx","../src/components/commons/inputs/ColorPicker/styles.ts","../src/components/commons/inputs/ColorPicker/types.ts","../src/components/commons/inputs/ColorPicker/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  size?: string\n  color: string\n  isSelected: boolean\n  borderRadius?: string\n}\n\nexport const DEFAULT_BUTTON_SIZE = '2.25rem'\n\nexport function createColorButtonStyles(props: Params) {\n  const resolvedSize = props.size || DEFAULT_BUTTON_SIZE\n\n  return styled({\n    container: {\n      width: resolvedSize,\n      height: resolvedSize,\n\n      cursor: 'pointer',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderRadius: props.borderRadius || resolvedSize,\n\n      backgroundColor: props.color,\n      borderColor: 'var(--px-border-primary)',\n\n      outlineOffset: '2px',\n      outline: props.isSelected ? '2px solid var(--px-color-primary)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        }\n      }\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorButtonProps } from './types'\n\n// Styles\nimport { createColorButtonStyles } from './styles'\n\nexport const ColorButton: React.FC<ColorButtonProps> = ({\n  color,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    { ...rest, color },\n    createColorButtonStyles\n  )\n\n  // Functions\n  function handleClick() {\n    if (disabled) return\n    onClick(color)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleClick}\n    />\n  )\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Skeleton } from '@components/commons/structure/Skeleton'\n\n// Constants\nimport { DEFAULT_BUTTON_SIZE } from '../ColorButton/styles'\n\ninterface Props {\n  size?: string\n  borderRadius?: string\n}\n\nexport const ColorsLoader: React.FC<Props> = ({ size, borderRadius }) => {\n  // Constants\n  const resolvedSize = size || DEFAULT_BUTTON_SIZE\n  const resolvedRadius = borderRadius || DEFAULT_BUTTON_SIZE\n\n  // Functions\n  function renderContent() {\n    return Array.from({ length: 5 }).map((_, idx) => (\n      <Skeleton\n        key={idx.toString()}\n        width={resolvedSize}\n        height={resolvedSize}\n        borderRadius={resolvedRadius}\n      />\n    ))\n  }\n\n  return <>{renderContent()}</>\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { ColorPickerProps } from './types'\nimport { DEFAULT_BUTTON_SIZE } from './components/ColorButton/styles'\n\nexport function createColorPickerStyles(props: ColorPickerProps) {\n  const isCustomColor = !props.options.includes(props.value)\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    content: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      flexWrap: 'wrap',\n\n      gap: '0.625rem'\n    },\n    inputWrapper: {\n      width: props.size || DEFAULT_BUTTON_SIZE,\n      height: props.size || DEFAULT_BUTTON_SIZE,\n\n      cursor: 'pointer',\n      overflow: 'hidden',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderColor: 'var(--px-border-primary)',\n      borderRadius: props.borderRadius || DEFAULT_BUTTON_SIZE,\n\n      outlineOffset: '2px',\n      outline:\n        isCustomColor && props.value\n          ? `2px solid var(--px-color-primary)`\n          : 'none',\n\n      background:\n        isCustomColor && props.value\n          ? props.value\n          : 'linear-gradient(90deg, #ff6b6b 0%, #ffd93d 16.66%, #6bff95 33.33%, #6be7ff 50%, #6b83ff 66.66%, #d36bff 83.33%, #ff6bb5 100%)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '2px',\n          outline: `2px solid var(--px-color-primary) !important`\n        }\n      }\n    },\n\n    nativeInput: {\n      width: '100%',\n      height: '100%',\n\n      position: 'absolute',\n      inset: 0,\n\n      opacity: 0,\n      border: 'none',\n      cursor: 'pointer'\n    }\n  })\n}\n","import type {\n  StylesOf,\n  TextProps,\n  LayoutProps,\n  MarginProps\n} from '@hooks/useThemedStyles/types'\nimport type { createColorPickerStyles } from './styles'\n\nexport interface ColorPickerProps extends LayoutProps, MarginProps {\n  id?: string\n\n  label: string\n  value: string\n  options: string[]\n\n  size?: string\n  required?: boolean\n  disabled?: boolean\n  hideLabel?: boolean\n  errorMessage?: string\n  canPickCustom?: boolean\n  isLoading?: boolean\n\n  borderRadius?: string\n  requiredColor?: string\n  labelConfig?: TextProps\n  styles?: StylesOf<typeof createColorPickerStyles>\n\n  onChange: (value: string) => void\n}\n","// External Libraries\nimport { useId, useMemo } from 'react'\n\n// Components\nimport { ColorButton } from './components/ColorButton'\nimport { ColorsLoader } from './components/ColorsLoader'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorPickerProps } from './types'\n\n// Styles\nimport { createColorPickerStyles } from './styles'\n\nexport * as ColorPickerTypes from './types'\n\nexport const ColorPicker: React.FC<ColorPickerProps> = props => {\n  // Constants\n  const reactId = useId()\n  const inputId = useMemo(() => {\n    return props.id || `color-picker-${reactId}`\n  }, [props.id, reactId])\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createColorPickerStyles, {\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {\n    props.onChange(e.target.value)\n  }\n\n  function renderColors() {\n    if (props.isLoading) {\n      return (\n        <ColorsLoader size={props.size} borderRadius={props.borderRadius} />\n      )\n    }\n\n    return props.options.map(option => (\n      <ColorButton\n        key={option}\n        color={option}\n        size={props.size}\n        disabled={props.disabled}\n        borderRadius={props.borderRadius}\n        isSelected={props.value === option}\n        onClick={props.onChange}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      {!props.hideLabel ? (\n        <Label\n          htmlFor={inputId}\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      ) : null}\n\n      <div id={inputId} style={styles.content}>\n        {renderColors()}\n\n        {props.canPickCustom ? (\n          <div style={styles.inputWrapper} className={classes.inputWrapper}>\n            <input\n              type=\"color\"\n              value={props.value}\n              style={styles.nativeInput}\n              aria-label=\"Pick a custom color\"\n              onChange={handleInputChange}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      {props.errorMessage ? (\n        <ErrorMessage message={props.errorMessage} />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker-CdECHCbh.js","names":["ColorButton: React.FC<ColorButtonProps>","ColorsLoader: React.FC<Props>","ColorPicker: React.FC<ColorPickerProps>"],"sources":["../src/components/commons/inputs/ColorPicker/components/ColorButton/styles.ts","../src/components/commons/inputs/ColorPicker/components/ColorButton/index.tsx","../src/components/commons/inputs/ColorPicker/components/ColorsLoader/index.tsx","../src/components/commons/inputs/ColorPicker/styles.ts","../src/components/commons/inputs/ColorPicker/types.ts","../src/components/commons/inputs/ColorPicker/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  size?: string\n  color: string\n  isSelected: boolean\n  borderRadius?: string\n}\n\nexport const DEFAULT_BUTTON_SIZE = '2.25rem'\n\nexport function createColorButtonStyles(props: Params) {\n  const resolvedSize = props.size || DEFAULT_BUTTON_SIZE\n\n  return styled({\n    container: {\n      width: resolvedSize,\n      height: resolvedSize,\n\n      cursor: 'pointer',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderRadius: props.borderRadius || resolvedSize,\n\n      backgroundColor: props.color,\n      borderColor: 'var(--px-border-primary)',\n\n      outlineOffset: '2px',\n      outline: props.isSelected ? '2px solid var(--px-color-primary)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        }\n      }\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorButtonProps } from './types'\n\n// Styles\nimport { createColorButtonStyles } from './styles'\n\nexport const ColorButton: React.FC<ColorButtonProps> = ({\n  color,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    { ...rest, color },\n    createColorButtonStyles\n  )\n\n  // Functions\n  function handleClick() {\n    if (disabled) return\n    onClick(color)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleClick}\n    />\n  )\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Skeleton } from '@components/commons/structure/Skeleton'\n\n// Constants\nimport { DEFAULT_BUTTON_SIZE } from '../ColorButton/styles'\n\ninterface Props {\n  size?: string\n  borderRadius?: string\n}\n\nexport const ColorsLoader: React.FC<Props> = ({ size, borderRadius }) => {\n  // Constants\n  const resolvedSize = size || DEFAULT_BUTTON_SIZE\n  const resolvedRadius = borderRadius || DEFAULT_BUTTON_SIZE\n\n  // Functions\n  function renderContent() {\n    return Array.from({ length: 5 }).map((_, idx) => (\n      <Skeleton\n        key={idx.toString()}\n        width={resolvedSize}\n        height={resolvedSize}\n        borderRadius={resolvedRadius}\n      />\n    ))\n  }\n\n  return <>{renderContent()}</>\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { ColorPickerProps } from './types'\nimport { DEFAULT_BUTTON_SIZE } from './components/ColorButton/styles'\n\nexport function createColorPickerStyles(props: ColorPickerProps) {\n  const isCustomColor = !props.options.includes(props.value)\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    content: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      flexWrap: 'wrap',\n\n      gap: '0.625rem'\n    },\n    inputWrapper: {\n      width: props.size || DEFAULT_BUTTON_SIZE,\n      height: props.size || DEFAULT_BUTTON_SIZE,\n\n      cursor: 'pointer',\n      overflow: 'hidden',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderColor: 'var(--px-border-primary)',\n      borderRadius: props.borderRadius || DEFAULT_BUTTON_SIZE,\n\n      outlineOffset: '2px',\n      outline:\n        isCustomColor && props.value\n          ? `2px solid var(--px-color-primary)`\n          : 'none',\n\n      background:\n        isCustomColor && props.value\n          ? props.value\n          : 'linear-gradient(90deg, #ff6b6b 0%, #ffd93d 16.66%, #6bff95 33.33%, #6be7ff 50%, #6b83ff 66.66%, #d36bff 83.33%, #ff6bb5 100%)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '2px',\n          outline: `2px solid var(--px-color-primary) !important`\n        }\n      }\n    },\n\n    nativeInput: {\n      width: '100%',\n      height: '100%',\n\n      position: 'absolute',\n      inset: 0,\n\n      opacity: 0,\n      border: 'none',\n      cursor: 'pointer'\n    }\n  })\n}\n","import type {\n  StylesOf,\n  TextProps,\n  LayoutProps,\n  MarginProps\n} from '@hooks/useThemedStyles/types'\nimport type { createColorPickerStyles } from './styles'\n\nexport interface ColorPickerProps extends LayoutProps, MarginProps {\n  id?: string\n\n  label: string\n  value: string\n  options: string[]\n\n  size?: string\n  required?: boolean\n  disabled?: boolean\n  hideLabel?: boolean\n  errorMessage?: string\n  canPickCustom?: boolean\n  isLoading?: boolean\n\n  borderRadius?: string\n  requiredColor?: string\n  labelConfig?: TextProps\n  styles?: StylesOf<typeof createColorPickerStyles>\n\n  onChange: (value: string) => void\n}\n","// External Libraries\nimport { useId, useMemo } from 'react'\n\n// Components\nimport { ColorButton } from './components/ColorButton'\nimport { ColorsLoader } from './components/ColorsLoader'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorPickerProps } from './types'\n\n// Styles\nimport { createColorPickerStyles } from './styles'\n\nexport * as ColorPickerTypes from './types'\n\nexport const ColorPicker: React.FC<ColorPickerProps> = props => {\n  // Constants\n  const reactId = useId()\n  const inputId = useMemo(() => {\n    return props.id || `color-picker-${reactId}`\n  }, [props.id, reactId])\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createColorPickerStyles, {\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {\n    props.onChange(e.target.value)\n  }\n\n  function renderColors() {\n    if (props.isLoading) {\n      return (\n        <ColorsLoader size={props.size} borderRadius={props.borderRadius} />\n      )\n    }\n\n    return props.options.map(option => (\n      <ColorButton\n        key={option}\n        color={option}\n        size={props.size}\n        disabled={props.disabled}\n        borderRadius={props.borderRadius}\n        isSelected={props.value === option}\n        onClick={props.onChange}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      {!props.hideLabel ? (\n        <Label\n          htmlFor={inputId}\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      ) : null}\n\n      <div id={inputId} style={styles.content}>\n        {renderColors()}\n\n        {props.canPickCustom ? (\n          <div style={styles.inputWrapper} className={classes.inputWrapper}>\n            <input\n              type=\"color\"\n              value={props.value}\n              style={styles.nativeInput}\n              aria-label=\"Pick a custom color\"\n              onChange={handleInputChange}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      {props.errorMessage ? (\n        <ErrorMessage message={props.errorMessage} />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AASA,MAAa,sBAAsB;AAEnC,SAAgB,wBAAwB,OAAe;CACrD,MAAM,eAAe,MAAM,QAAQ;AAEnC,QAAO,OAAO,EACZ,WAAW;EACT,OAAO;EACP,QAAQ;EAER,QAAQ;EACR,UAAU;EAEV,aAAa;EACb,cAAc,MAAM,gBAAgB;EAEpC,iBAAiB,MAAM;EACvB,aAAa;EAEb,eAAe;EACf,SAAS,MAAM,aAAa,sCAAsC;EAElE,SAAS;GACP,WAAW,EACT,SAAS,mBACV;GAED,WAAW;IACT,eAAe;IACf,SAAS;IACV;GAED,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;;;;ACtCJ,MAAaA,eAA2C,EACtD,OACA,UACA,SACA,GAAG,WACC;CAEJ,MAAM,EAAE,QAAQ,YAAY,gBAC1B;EAAE,GAAG;EAAM;EAAO,EAClB,wBACD;CAGD,SAAS,cAAc;AACrB,MAAI,SAAU;AACd,UAAQ,MAAM;;AAGhB,QACE,oBAAC;EACC,MAAK;EACK;EACV,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,SAAS;GACT;;;;;ACpBN,MAAaC,gBAAiC,EAAE,MAAM,mBAAmB;CAEvE,MAAM,eAAe,QAAQ;CAC7B,MAAM,iBAAiB,gBAAgB;CAGvC,SAAS,gBAAgB;AACvB,SAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,QACvC,oBAAC;GAEC,OAAO;GACP,QAAQ;GACR,cAAc;KAHT,IAAI,UAAU,CAInB,CACF;;AAGJ,QAAO,4CAAG,eAAe,GAAI;;;;;ACxB/B,SAAgB,wBAAwB,OAAyB;CAC/D,MAAM,gBAAgB,CAAC,MAAM,QAAQ,SAAS,MAAM,MAAM;AAE1D,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,SAAS;GACP,OAAO;GAEP,SAAS;GACT,YAAY;GACZ,UAAU;GAEV,KAAK;GACN;EACD,cAAc;GACZ,OAAO,MAAM,QAAQ;GACrB,QAAQ,MAAM,QAAQ;GAEtB,QAAQ;GACR,UAAU;GACV,UAAU;GAEV,aAAa;GACb,aAAa;GACb,cAAc,MAAM,gBAAgB;GAEpC,eAAe;GACf,SACE,iBAAiB,MAAM,QACnB,sCACA;GAEN,YACE,iBAAiB,MAAM,QACnB,MAAM,QACN;GAEN,SAAS,EACP,kBAAkB;IAChB,eAAe;IACf,SAAS;IACV,EACF;GACF;EAED,aAAa;GACX,OAAO;GACP,QAAQ;GAER,UAAU;GACV,OAAO;GAEP,SAAS;GACT,QAAQ;GACR,QAAQ;GACT;EACF,CAAC;;;;;;;;;AElDJ,MAAaC,eAA0C,UAAS;CAE9D,MAAM,UAAU,OAAO;CACvB,MAAM,UAAU,cAAc;AAC5B,SAAO,MAAM,MAAM,gBAAgB;IAClC,CAAC,MAAM,IAAI,QAAQ,CAAC;CAGvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,yBAAyB;EAC1E,UAAU,MAAM;EAChB,kBAAkB;EAClB,YAAY;EACb,CAAC;CAGF,SAAS,kBAAkB,GAAwC;AACjE,QAAM,SAAS,EAAE,OAAO,MAAM;;CAGhC,SAAS,eAAe;AACtB,MAAI,MAAM,UACR,QACE,oBAAC;GAAa,MAAM,MAAM;GAAM,cAAc,MAAM;IAAgB;AAIxE,SAAO,MAAM,QAAQ,KAAI,WACvB,oBAAC;GAEC,OAAO;GACP,MAAM,MAAM;GACZ,UAAU,MAAM;GAChB,cAAc,MAAM;GACpB,YAAY,MAAM,UAAU;GAC5B,SAAS,MAAM;KANV,OAOL,CACF;;AAGJ,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,CAAC,MAAM,YACN,oBAAC;IACC,SAAS;IACT,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,eAAe,MAAM;IACrB,GAAI,MAAM;KACV,GACA;GAEJ,qBAAC;IAAI,IAAI;IAAS,OAAO,OAAO;eAC7B,cAAc,EAEd,MAAM,gBACL,oBAAC;KAAI,OAAO,OAAO;KAAc,WAAW,QAAQ;eAClD,oBAAC;MACC,MAAK;MACL,OAAO,MAAM;MACb,OAAO,OAAO;MACd,cAAW;MACX,UAAU;OACV;MACE,GACJ;KACA;GAEL,MAAM,eACL,oBAAC,gBAAa,SAAS,MAAM,eAAgB,GAC3C;;GACA"}

package/dist/{ContextMenu-B8mGn0Fq.js → ContextMenu-CtRqfo8w.js}

@@ -1,7 +1,7 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CV4ryZLN.js";
-import { t as Switch } from "./Switch-CiKBZRST.js";
-import { t as Typography } from "./Typography-BTJk47bm.js";
-import { t as BasePopover } from "./BasePopover-m1OfX3fO.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js";
+import { t as Switch } from "./Switch-ySpoqwBk.js";
+import { t as Typography } from "./Typography-CKSjnDPX.js";
+import { t as BasePopover } from "./BasePopover-Bcy5d1t5.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
@@ -319,4 +319,4 @@ const ContextMenu = (props) => {
 
 //#endregion
 export { types_exports as n, ContextMenu as t };
-//# sourceMappingURL=ContextMenu-B8mGn0Fq.js.map
+//# sourceMappingURL=ContextMenu-CtRqfo8w.js.map

package/dist/{ContextMenu-B8mGn0Fq.js.map → ContextMenu-CtRqfo8w.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu-B8mGn0Fq.js","names":["floatingOptions: FloatingOptions","DividerRow: React.FC"],"sources":["../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/index.tsx","../src/components/commons/toolkit/ContextMenu/utils/normalizeMenuOptions.ts","../src/components/commons/toolkit/ContextMenu/types.ts","../src/components/commons/toolkit/ContextMenu/styles.ts","../src/components/commons/toolkit/ContextMenu/index.tsx"],"sourcesContent":["// Types\nimport type { ItemRowProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createItemRowStyles<T>({ item, active }: ItemRowProps<T>) {\n  return styled({\n    button: {\n      width: '100%',\n      textAlign: 'left',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: '0.5rem',\n\n      borderRadius: '0.5rem',\n\n      paddingInline: '0.5rem',\n      paddingBlock: '0.25rem',\n\n      userSelect: 'none',\n\n      backgroundColor:\n        item.disabled || active\n          ? 'var(--px-background-card-hover)'\n          : 'transparent',\n\n      __rules: {\n        '&:hover': {\n          transition: 'all 200ms',\n          backgroundColor: 'var(--px-background-card-hover) !important'\n        }\n      }\n    },\n    containerIcon: {\n      width: '1rem',\n      flexShrink: 0,\n      display: 'flex',\n      alignItems: 'center'\n    }\n  })\n}\n","// External Libraries\nimport { type MouseEvent, useEffect, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from '../..'\nimport { Switch } from '@components/commons/toolkit/Switch'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ItemRowProps } from './types'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Styles\nimport { createItemRowStyles } from './styles'\n\nexport const ItemRow = <T extends string>(props: ItemRowProps<T>) => {\n  const { item, depth, width, onHover, onSelect } = props\n  const isGroup = item.type === 'group'\n\n  const [subOpen, setSubOpen] = useState(false)\n  const closeTimer = useRef<number | null>(null)\n  const anchorRef = useRef<HTMLButtonElement | null>(null)\n  const floatingOptions: FloatingOptions = {\n    offsetX: 10,\n    offsetY: -4,\n    strategy: 'fixed',\n    keepInViewport: true,\n    placement: 'right-start'\n  }\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createItemRowStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.active]\n  })\n\n  // Functions\n  function handleMouseEnter() {\n    onHover(item.id, isGroup)\n\n    if (!isGroup) return\n    clearTimer()\n    setSubOpen(true)\n  }\n\n  function handleMouseLeave() {\n    if (!isGroup) return\n    scheduleClose()\n  }\n\n  function handleClick(e?: MouseEvent<HTMLButtonElement>) {\n    e?.stopPropagation()\n    e?.preventDefault()\n    if (isGroup) return\n    onSelect(item)\n  }\n\n  function clearTimer() {\n    if (closeTimer.current) window.clearTimeout(closeTimer.current)\n    closeTimer.current = null\n  }\n\n  function scheduleClose() {\n    clearTimer()\n    closeTimer.current = window.setTimeout(() => setSubOpen(false), 150)\n  }\n\n  function renderMenuType() {\n    if (item.type === 'switch') return <Switch checked={item.checked} />\n    else {\n      return (\n        <>\n          {item.shortcut ? <span>{item.shortcut}</span> : null}\n\n          {isGroup ? <span>›</span> : null}\n        </>\n      )\n    }\n  }\n\n  // UseEffects\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n  useEffect(() => {\n    return () => clearTimer()\n  }, [])\n\n  return (\n    <>\n      <button\n        ref={anchorRef}\n        type=\"button\"\n        role=\"menuitem\"\n        style={styles.button}\n        className={classes.button}\n        disabled={!!item.disabled}\n        aria-disabled={item.disabled || undefined}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        {item.icon ? (\n          <span style={styles.containerIcon}>{item.icon ?? null}</span>\n        ) : null}\n\n        <Typography variant=\"b2\">{item.label}</Typography>\n\n        {renderMenuType()}\n      </button>\n\n      {isGroup ? (\n        <BasePopover\n          // biome-ignore lint/suspicious/noExplicitAny: <Not needed>\n          anchorRef={anchorRef as any}\n          open={subOpen}\n          closeOnEscape={false}\n          closeOnOutsideClick={false}\n          floatingOptions={floatingOptions}\n          dismissScope={props.dismissScope}\n          onMouseEnter={() => {\n            clearTimer()\n            setSubOpen(true)\n          }}\n          onMouseLeave={() => {\n            scheduleClose()\n          }}\n          onOpenChange={setSubOpen}\n        >\n          <Menu\n            width={width}\n            depth={depth + 1}\n            activeId={undefined}\n            items={item.children}\n            onHover={onHover}\n            onSelect={onSelect}\n          />\n        </BasePopover>\n      ) : null}\n    </>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createCustomRowStyles() {\n  return styled({\n    container: {\n      padding: '0.25rem'\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CustomRowProps } from './types'\n\n// Styles\nimport { createCustomRowStyles } from './styles'\n\nexport const CustomRow = <T extends string>(props: CustomRowProps<T>) => {\n  const { item, close } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createCustomRowStyles)\n\n  return <div style={styles.container}>{item.render({ close })}</div>\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDividerRowStyles() {\n  return styled({\n    container: {\n      border: 0,\n      display: 'flex',\n      marginBlock: '0.1rem',\n      borderTop: '1px solid var(--px-border-primary)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createDividerRowStyles } from './styles'\n\nexport const DividerRow: React.FC = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createDividerRowStyles)\n\n  return <hr style={styles.container} />\n}\n","// Types\nimport type { MenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMenuStyles<T>({ width }: MenuProps<T>) {\n  return styled({\n    container: {\n      width,\n      flexShrink: 0\n    }\n  })\n}\n","// Components\nimport { ItemRow } from './components/ItemRow'\nimport { CustomRow } from './components/CustomRow'\nimport { DividerRow } from './components/DividerRow'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MenuProps } from './types'\n\n// Styles\nimport { createMenuStyles } from './styles'\n\nexport const Menu = <T extends string>(props: MenuProps<T>) => {\n  const { items, depth, activeId, width = 240, onHover, onSelect } = props\n\n  const { styles } = useThemedStyles(props, createMenuStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.items, p.width, p.activeId, p.onSelect, p.onHover]\n  })\n\n  // Functions\n  function renderItems() {\n    return items.map(item => {\n      if (item.type === 'divider') return <DividerRow key={item.id} />\n      if (item.type === 'custom')\n        return <CustomRow key={item.id} item={item} close={close} />\n\n      return (\n        <ItemRow\n          key={item.id}\n          item={item}\n          depth={depth}\n          width={width}\n          active={activeId === item.id}\n          dismissScope={props.dismissScope}\n          onHover={onHover}\n          onSelect={onSelect}\n        />\n      )\n    })\n  }\n\n  return (\n    <div style={styles.container} role={depth === 0 ? 'menu' : undefined}>\n      {renderItems()}\n    </div>\n  )\n}\n","// Types\nimport type { MenuOption, MenuOptionInput } from '../types'\n\nexport function normalizeMenuOptions<T>(\n  options: MenuOptionInput<T>[]\n): MenuOption<T>[] {\n  return options.map(opt => {\n    if ('children' in opt) {\n      return {\n        id: opt.id,\n        label: opt.label,\n        icon: opt.icon,\n        shortcut: opt.shortcut,\n        disabled: opt.disabled,\n        className: opt.className,\n        type: 'group' as const,\n        children: normalizeMenuOptions(opt.children)\n      }\n    }\n    return opt as MenuOption<T>\n  })\n}\n","// External Libraries\nimport type { ReactNode } from 'react'\n\n// Hooks\nimport type { Placement } from '@hooks/useFloating/types'\n\n// Styles\nimport type { createContextMenuStyles } from './styles'\n\ninterface BaseOption<T> {\n  id: T\n  icon?: ReactNode\n  label?: ReactNode\n  disabled?: boolean\n  className?: string\n  shortcut?: ReactNode\n  closeOnSelect?: boolean\n}\n\nexport type MenuActionOption<T> = BaseOption<T> & {\n  type: 'action'\n  closeOnSelect?: boolean\n}\n\nexport type MenuSwitchOption<T> = BaseOption<T> & {\n  type: 'switch'\n  checked: boolean\n  closeOnSelect?: boolean\n  onCheckedChange: (next: boolean) => void\n}\n\nexport interface MenuDividerOption<T> {\n  id: T\n  type: 'divider'\n}\n\nexport interface MenuCustomOption<T> extends BaseOption<T> {\n  type: 'custom'\n  render: (ctx: { close: () => void }) => ReactNode\n}\n\nexport interface MenuGroupInput<T> extends BaseOption<T> {\n  type?: 'group'\n  children: MenuOptionInput<T>[]\n}\n\nexport type MenuOptionInput<T> =\n  | MenuGroupInput<T>\n  | MenuActionOption<T>\n  | MenuSwitchOption<T>\n  | MenuCustomOption<T>\n  | MenuDividerOption<T>\n\nexport interface MenuGroup<T> extends BaseOption<T> {\n  type: 'group'\n  children: MenuOption<T>[]\n}\n\nexport type MenuOption<T> =\n  | MenuGroup<T>\n  | MenuActionOption<T>\n  | MenuSwitchOption<T>\n  | MenuCustomOption<T>\n  | MenuDividerOption<T>\n\nexport interface ContextMenuProps<T> {\n  trigger: ReactNode\n  options: MenuOptionInput<T>[]\n\n  offsetX?: number\n  offsetY?: number\n  columnWidth?: number\n  placement?: Placement\n\n  onSelect: (actionId: T) => void\n\n  styles?: Partial<ReturnType<typeof createContextMenuStyles>>\n}\n","// Types\nimport type { ContextMenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createContextMenuStyles<T>(_props: ContextMenuProps<T>) {\n  return styled({\n    trigger: {\n      width: 'fit-content',\n      height: 'fit-content',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer'\n    }\n  })\n}\n","// External Libraries\nimport { useMemo, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from './components/Menu'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { normalizeMenuOptions } from './utils'\n\n// Types\nimport type { ContextMenuProps, MenuOption } from './types'\nimport type { PopoverTriggerRenderProps } from '../Popover/types'\n\nexport * as ContextMenuTypes from './types'\n\n// Styles\nimport { createContextMenuStyles } from './styles'\n\nexport const ContextMenu = <T extends string>(props: ContextMenuProps<T>) => {\n  const {\n    trigger,\n    options,\n    offsetX = 0,\n    offsetY = 8,\n    columnWidth = 240,\n    placement = 'bottom-start',\n    onSelect\n  } = props\n\n  // Refs\n  const scopeRef = useRef<string>(makeScopeId())\n\n  // States\n  const [open, setOpen] = useState(false)\n\n  const items = useMemo(() => normalizeMenuOptions(options), [options])\n  const floatingOptions = useMemo(\n    () => ({\n      offsetX,\n      offsetY,\n      placement\n    }),\n    [offsetX, offsetY, placement]\n  )\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createContextMenuStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.options, p.columnWidth, p.placement]\n  })\n\n  // Functions\n  function makeScopeId() {\n    if (typeof crypto !== 'undefined' && crypto.randomUUID)\n      return crypto.randomUUID()\n    return `scope_${Math.random().toString(16).slice(2)}`\n  }\n\n  function handleSelect(item: MenuOption<T>, close: () => void) {\n    if (item.type === 'action') {\n      onSelect(item.id)\n      if (item.closeOnSelect ?? true) close()\n    }\n\n    if (item.type === 'switch') {\n      item.onCheckedChange(!item.checked)\n      if (item.closeOnSelect ?? false) close()\n    }\n  }\n\n  function renderTrigger({\n    ref,\n    ariaExpanded,\n    onClick\n  }: PopoverTriggerRenderProps) {\n    return (\n      // biome-ignore lint/a11y/noStaticElementInteractions: <Not needed>\n      // biome-ignore lint/a11y/useKeyWithClickEvents: <Not needed>\n      <span\n        ref={ref as any}\n        style={styles.trigger}\n        aria-expanded={ariaExpanded}\n        onClick={onClick}\n      >\n        {trigger}\n      </span>\n    )\n  }\n\n  return (\n    <BasePopover\n      floatingOptions={floatingOptions}\n      dismissScope={scopeRef.current}\n      trigger={renderTrigger}\n      open={open}\n      onOpenChange={setOpen}\n    >\n      <Menu\n        depth={0}\n        items={items}\n        onHover={() => {}}\n        width={columnWidth}\n        dismissScope={scopeRef.current}\n        onSelect={item =>\n          handleSelect(item as MenuOption<T>, () => setOpen(false))\n        }\n      />\n    </BasePopover>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ContextMenu-CtRqfo8w.js","names":["floatingOptions: FloatingOptions","DividerRow: React.FC"],"sources":["../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/index.tsx","../src/components/commons/toolkit/ContextMenu/utils/normalizeMenuOptions.ts","../src/components/commons/toolkit/ContextMenu/types.ts","../src/components/commons/toolkit/ContextMenu/styles.ts","../src/components/commons/toolkit/ContextMenu/index.tsx"],"sourcesContent":["// Types\nimport type { ItemRowProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createItemRowStyles<T>({ item, active }: ItemRowProps<T>) {\n  return styled({\n    button: {\n      width: '100%',\n      textAlign: 'left',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: '0.5rem',\n\n      borderRadius: '0.5rem',\n\n      paddingInline: '0.5rem',\n      paddingBlock: '0.25rem',\n\n      userSelect: 'none',\n\n      backgroundColor:\n        item.disabled || active\n          ? 'var(--px-background-card-hover)'\n          : 'transparent',\n\n      __rules: {\n        '&:hover': {\n          transition: 'all 200ms',\n          backgroundColor: 'var(--px-background-card-hover) !important'\n        }\n      }\n    },\n    containerIcon: {\n      width: '1rem',\n      flexShrink: 0,\n      display: 'flex',\n      alignItems: 'center'\n    }\n  })\n}\n","// External Libraries\nimport { type MouseEvent, useEffect, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from '../..'\nimport { Switch } from '@components/commons/toolkit/Switch'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ItemRowProps } from './types'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Styles\nimport { createItemRowStyles } from './styles'\n\nexport const ItemRow = <T extends string>(props: ItemRowProps<T>) => {\n  const { item, depth, width, onHover, onSelect } = props\n  const isGroup = item.type === 'group'\n\n  const [subOpen, setSubOpen] = useState(false)\n  const closeTimer = useRef<number | null>(null)\n  const anchorRef = useRef<HTMLButtonElement | null>(null)\n  const floatingOptions: FloatingOptions = {\n    offsetX: 10,\n    offsetY: -4,\n    strategy: 'fixed',\n    keepInViewport: true,\n    placement: 'right-start'\n  }\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createItemRowStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.active]\n  })\n\n  // Functions\n  function handleMouseEnter() {\n    onHover(item.id, isGroup)\n\n    if (!isGroup) return\n    clearTimer()\n    setSubOpen(true)\n  }\n\n  function handleMouseLeave() {\n    if (!isGroup) return\n    scheduleClose()\n  }\n\n  function handleClick(e?: MouseEvent<HTMLButtonElement>) {\n    e?.stopPropagation()\n    e?.preventDefault()\n    if (isGroup) return\n    onSelect(item)\n  }\n\n  function clearTimer() {\n    if (closeTimer.current) window.clearTimeout(closeTimer.current)\n    closeTimer.current = null\n  }\n\n  function scheduleClose() {\n    clearTimer()\n    closeTimer.current = window.setTimeout(() => setSubOpen(false), 150)\n  }\n\n  function renderMenuType() {\n    if (item.type === 'switch') return <Switch checked={item.checked} />\n    else {\n      return (\n        <>\n          {item.shortcut ? <span>{item.shortcut}</span> : null}\n\n          {isGroup ? <span>›</span> : null}\n        </>\n      )\n    }\n  }\n\n  // UseEffects\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n  useEffect(() => {\n    return () => clearTimer()\n  }, [])\n\n  return (\n    <>\n      <button\n        ref={anchorRef}\n        type=\"button\"\n        role=\"menuitem\"\n        style={styles.button}\n        className={classes.button}\n        disabled={!!item.disabled}\n        aria-disabled={item.disabled || undefined}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        {item.icon ? (\n          <span style={styles.containerIcon}>{item.icon ?? null}</span>\n        ) : null}\n\n        <Typography variant=\"b2\">{item.label}</Typography>\n\n        {renderMenuType()}\n      </button>\n\n      {isGroup ? (\n        <BasePopover\n          // biome-ignore lint/suspicious/noExplicitAny: <Not needed>\n          anchorRef={anchorRef as any}\n          open={subOpen}\n          closeOnEscape={false}\n          closeOnOutsideClick={false}\n          floatingOptions={floatingOptions}\n          dismissScope={props.dismissScope}\n          onMouseEnter={() => {\n            clearTimer()\n            setSubOpen(true)\n          }}\n          onMouseLeave={() => {\n            scheduleClose()\n          }}\n          onOpenChange={setSubOpen}\n        >\n          <Menu\n            width={width}\n            depth={depth + 1}\n            activeId={undefined}\n            items={item.children}\n            onHover={onHover}\n            onSelect={onSelect}\n          />\n        </BasePopover>\n      ) : null}\n    </>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createCustomRowStyles() {\n  return styled({\n    container: {\n      padding: '0.25rem'\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CustomRowProps } from './types'\n\n// Styles\nimport { createCustomRowStyles } from './styles'\n\nexport const CustomRow = <T extends string>(props: CustomRowProps<T>) => {\n  const { item, close } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createCustomRowStyles)\n\n  return <div style={styles.container}>{item.render({ close })}</div>\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDividerRowStyles() {\n  return styled({\n    container: {\n      border: 0,\n      display: 'flex',\n      marginBlock: '0.1rem',\n      borderTop: '1px solid var(--px-border-primary)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createDividerRowStyles } from './styles'\n\nexport const DividerRow: React.FC = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createDividerRowStyles)\n\n  return <hr style={styles.container} />\n}\n","// Types\nimport type { MenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMenuStyles<T>({ width }: MenuProps<T>) {\n  return styled({\n    container: {\n      width,\n      flexShrink: 0\n    }\n  })\n}\n","// Components\nimport { ItemRow } from './components/ItemRow'\nimport { CustomRow } from './components/CustomRow'\nimport { DividerRow } from './components/DividerRow'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MenuProps } from './types'\n\n// Styles\nimport { createMenuStyles } from './styles'\n\nexport const Menu = <T extends string>(props: MenuProps<T>) => {\n  const { items, depth, activeId, width = 240, onHover, onSelect } = props\n\n  const { styles } = useThemedStyles(props, createMenuStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.items, p.width, p.activeId, p.onSelect, p.onHover]\n  })\n\n  // Functions\n  function renderItems() {\n    return items.map(item => {\n      if (item.type === 'divider') return <DividerRow key={item.id} />\n      if (item.type === 'custom')\n        return <CustomRow key={item.id} item={item} close={close} />\n\n      return (\n        <ItemRow\n          key={item.id}\n          item={item}\n          depth={depth}\n          width={width}\n          active={activeId === item.id}\n          dismissScope={props.dismissScope}\n          onHover={onHover}\n          onSelect={onSelect}\n        />\n      )\n    })\n  }\n\n  return (\n    <div style={styles.container} role={depth === 0 ? 'menu' : undefined}>\n      {renderItems()}\n    </div>\n  )\n}\n","// Types\nimport type { MenuOption, MenuOptionInput } from '../types'\n\nexport function normalizeMenuOptions<T>(\n  options: MenuOptionInput<T>[]\n): MenuOption<T>[] {\n  return options.map(opt => {\n    if ('children' in opt) {\n      return {\n        id: opt.id,\n        label: opt.label,\n        icon: opt.icon,\n        shortcut: opt.shortcut,\n        disabled: opt.disabled,\n        className: opt.className,\n        type: 'group' as const,\n        children: normalizeMenuOptions(opt.children)\n      }\n    }\n    return opt as MenuOption<T>\n  })\n}\n","// External Libraries\nimport type { ReactNode } from 'react'\n\n// Hooks\nimport type { Placement } from '@hooks/useFloating/types'\n\n// Styles\nimport type { createContextMenuStyles } from './styles'\n\ninterface BaseOption<T> {\n  id: T\n  icon?: ReactNode\n  label?: ReactNode\n  disabled?: boolean\n  className?: string\n  shortcut?: ReactNode\n  closeOnSelect?: boolean\n}\n\nexport type MenuActionOption<T> = BaseOption<T> & {\n  type: 'action'\n  closeOnSelect?: boolean\n}\n\nexport type MenuSwitchOption<T> = BaseOption<T> & {\n  type: 'switch'\n  checked: boolean\n  closeOnSelect?: boolean\n  onCheckedChange: (next: boolean) => void\n}\n\nexport interface MenuDividerOption<T> {\n  id: T\n  type: 'divider'\n}\n\nexport interface MenuCustomOption<T> extends BaseOption<T> {\n  type: 'custom'\n  render: (ctx: { close: () => void }) => ReactNode\n}\n\nexport interface MenuGroupInput<T> extends BaseOption<T> {\n  type?: 'group'\n  children: MenuOptionInput<T>[]\n}\n\nexport type MenuOptionInput<T> =\n  | MenuGroupInput<T>\n  | MenuActionOption<T>\n  | MenuSwitchOption<T>\n  | MenuCustomOption<T>\n  | MenuDividerOption<T>\n\nexport interface MenuGroup<T> extends BaseOption<T> {\n  type: 'group'\n  children: MenuOption<T>[]\n}\n\nexport type MenuOption<T> =\n  | MenuGroup<T>\n  | MenuActionOption<T>\n  | MenuSwitchOption<T>\n  | MenuCustomOption<T>\n  | MenuDividerOption<T>\n\nexport interface ContextMenuProps<T> {\n  trigger: ReactNode\n  options: MenuOptionInput<T>[]\n\n  offsetX?: number\n  offsetY?: number\n  columnWidth?: number\n  placement?: Placement\n\n  onSelect: (actionId: T) => void\n\n  styles?: Partial<ReturnType<typeof createContextMenuStyles>>\n}\n","// Types\nimport type { ContextMenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createContextMenuStyles<T>(_props: ContextMenuProps<T>) {\n  return styled({\n    trigger: {\n      width: 'fit-content',\n      height: 'fit-content',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer'\n    }\n  })\n}\n","// External Libraries\nimport { useMemo, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from './components/Menu'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { normalizeMenuOptions } from './utils'\n\n// Types\nimport type { ContextMenuProps, MenuOption } from './types'\nimport type { PopoverTriggerRenderProps } from '../Popover/types'\n\nexport * as ContextMenuTypes from './types'\n\n// Styles\nimport { createContextMenuStyles } from './styles'\n\nexport const ContextMenu = <T extends string>(props: ContextMenuProps<T>) => {\n  const {\n    trigger,\n    options,\n    offsetX = 0,\n    offsetY = 8,\n    columnWidth = 240,\n    placement = 'bottom-start',\n    onSelect\n  } = props\n\n  // Refs\n  const scopeRef = useRef<string>(makeScopeId())\n\n  // States\n  const [open, setOpen] = useState(false)\n\n  const items = useMemo(() => normalizeMenuOptions(options), [options])\n  const floatingOptions = useMemo(\n    () => ({\n      offsetX,\n      offsetY,\n      placement\n    }),\n    [offsetX, offsetY, placement]\n  )\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createContextMenuStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.options, p.columnWidth, p.placement]\n  })\n\n  // Functions\n  function makeScopeId() {\n    if (typeof crypto !== 'undefined' && crypto.randomUUID)\n      return crypto.randomUUID()\n    return `scope_${Math.random().toString(16).slice(2)}`\n  }\n\n  function handleSelect(item: MenuOption<T>, close: () => void) {\n    if (item.type === 'action') {\n      onSelect(item.id)\n      if (item.closeOnSelect ?? true) close()\n    }\n\n    if (item.type === 'switch') {\n      item.onCheckedChange(!item.checked)\n      if (item.closeOnSelect ?? false) close()\n    }\n  }\n\n  function renderTrigger({\n    ref,\n    ariaExpanded,\n    onClick\n  }: PopoverTriggerRenderProps) {\n    return (\n      // biome-ignore lint/a11y/noStaticElementInteractions: <Not needed>\n      // biome-ignore lint/a11y/useKeyWithClickEvents: <Not needed>\n      <span\n        ref={ref as any}\n        style={styles.trigger}\n        aria-expanded={ariaExpanded}\n        onClick={onClick}\n      >\n        {trigger}\n      </span>\n    )\n  }\n\n  return (\n    <BasePopover\n      floatingOptions={floatingOptions}\n      dismissScope={scopeRef.current}\n      trigger={renderTrigger}\n      open={open}\n      onOpenChange={setOpen}\n    >\n      <Menu\n        depth={0}\n        items={items}\n        onHover={() => {}}\n        width={columnWidth}\n        dismissScope={scopeRef.current}\n        onSelect={item =>\n          handleSelect(item as MenuOption<T>, () => setOpen(false))\n        }\n      />\n    </BasePopover>\n  )\n}\n"],"mappings":"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"}

package/dist/ErrorMessage-DOkrG22I.js

@@ -0,0 +1,28 @@
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/commons/toolkit/ErrorMessage/styles.ts
+function createErrorMessageStyles() {
+	return styled({ container: {
+		display: "block",
+		fontWeight: 400,
+		lineHeight: "1rem",
+		fontSize: "0.75rem",
+		fontFamily: "inherit",
+		color: "var(--px-text-error)"
+	} });
+}
+
+//#endregion
+//#region src/components/commons/toolkit/ErrorMessage/index.tsx
+const ErrorMessage = (props) => {
+	const { styles } = useThemedStyles(props, createErrorMessageStyles);
+	return /* @__PURE__ */ jsx("span", {
+		style: styles.container,
+		children: props.message
+	});
+};
+
+//#endregion
+export { ErrorMessage as t };
+//# sourceMappingURL=ErrorMessage-DOkrG22I.js.map

package/dist/ErrorMessage-DOkrG22I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage-DOkrG22I.js","names":["ErrorMessage: React.FC<ErrorMessageProps>"],"sources":["../src/components/commons/toolkit/ErrorMessage/styles.ts","../src/components/commons/toolkit/ErrorMessage/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createErrorMessageStyles() {\n  return styled({\n    container: {\n      display: 'block',\n      fontWeight: 400,\n      lineHeight: '1rem',\n      fontSize: '0.75rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-error)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ErrorMessageProps } from './types'\n\n// Styles\nimport { createErrorMessageStyles } from './styles'\n\nexport const ErrorMessage: React.FC<ErrorMessageProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createErrorMessageStyles)\n\n  return <span style={styles.container}>{props.message}</span>\n}\n"],"mappings":";;;;AAGA,SAAgB,2BAA2B;AACzC,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,YAAY;EACZ,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,OAAO;EACR,EACF,CAAC;;;;;ACDJ,MAAaA,gBAA4C,UAAS;CAEhE,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;AAEnE,QAAO,oBAAC;EAAK,OAAO,OAAO;YAAY,MAAM;GAAe"}