softable-pixels-web 1.2.24 → 1.2.26

package/dist/{Switch-CWfHuT5f.js → Switch-CIVBbhne.js}

@@ -1,5 +1,6 @@
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-C2-V1GJa.js";
-import { jsx } from "react/jsx-runtime";
+import { t as Typography } from "./Typography-BTM9_PzE.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/Switch/styles.ts
 function createSwitchThumbStyles({ checked, colorActive, colorInactive, colorIndicator }) {
@@ -34,7 +35,7 @@ function createSwitchThumbStyles({ checked, colorActive, colorInactive, colorInd
 //#endregion
 //#region src/components/commons/toolkit/Switch/index.tsx
 const Switch = (props) => {
-	const { checked, onChange } = props;
+	const { label, checked, onChange } = props;
 	const { styles } = useThemedStyles(props, createSwitchThumbStyles, {
 		applyCommonProps: true,
 		pick: (p) => [p.checked]
@@ -44,13 +45,20 @@ const Switch = (props) => {
 		e.preventDefault();
 		onChange?.(!checked);
 	}
-	return /* @__PURE__ */ jsx("span", {
-		style: styles.container,
-		onClick: handleChange,
-		children: /* @__PURE__ */ jsx("span", { style: styles.indicator })
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full flex items-center justify-between gap-x-2",
+		children: [label ? /* @__PURE__ */ jsx(Typography, {
+			variant: "b2",
+			color: "var(px-text-primary)",
+			children: label
+		}) : null, /* @__PURE__ */ jsx("span", {
+			style: styles.container,
+			onClick: handleChange,
+			children: /* @__PURE__ */ jsx("span", { style: styles.indicator })
+		})]
 	});
 };
 
 //#endregion
 export { Switch as t };
-//# sourceMappingURL=Switch-CWfHuT5f.js.map
+//# sourceMappingURL=Switch-CIVBbhne.js.map

package/dist/Switch-CIVBbhne.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch-CIVBbhne.js","names":["Switch: React.FC<SwitchThumbProps>"],"sources":["../src/components/commons/toolkit/Switch/styles.ts","../src/components/commons/toolkit/Switch/index.tsx"],"sourcesContent":["// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { styled } from '@hooks/useThemedStyles/types'\nexport function createSwitchThumbStyles({\n  checked,\n  colorActive,\n  colorInactive,\n  colorIndicator\n}: SwitchThumbProps) {\n  return styled({\n    container: {\n      width: '2.5rem',\n      height: '1.5rem',\n\n      position: 'relative',\n\n      display: 'inline-flex',\n      alignItems: 'center',\n      marginLeft: '0.5rem',\n\n      borderRadius: '2rem',\n      padding: '0.125rem',\n\n      transition: 'background-color 0.5s',\n      backgroundColor: checked\n        ? (colorActive ?? 'var(--px-color-success)')\n        : (colorInactive ?? 'var(--px-color-disabled)')\n    },\n\n    indicator: {\n      height: '1.25rem',\n      width: '1.25rem',\n\n      position: 'absolute',\n      left: '0.125rem',\n      top: '0.125rem',\n\n      borderRadius: '9999px',\n      backgroundColor: colorIndicator ?? 'var(--px-surface)',\n\n      transition: 'transform 0.5s',\n      transform: checked ? 'translateX(1rem)' : 'translateX(0)',\n      willChange: 'transform'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { createSwitchThumbStyles } from './styles'\nimport { Typography } from '../Typography'\n\nexport const Switch: React.FC<SwitchThumbProps> = props => {\n  const { label, checked, onChange } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createSwitchThumbStyles, {\n    applyCommonProps: true,\n    pick: p => [p.checked]\n  })\n\n  // Functions\n  function handleChange(e: MouseEvent<HTMLSpanElement>) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    onChange?.(!checked)\n  }\n\n  return (\n    <div className=\"w-full flex items-center justify-between gap-x-2\">\n      {label ? (\n        <Typography variant=\"b2\" color=\"var(px-text-primary)\">\n          {label}\n        </Typography>\n      ) : null}\n      {/* biome-ignore lint/a11y/useKeyWithClickEvents: <Not Needed> */}\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: <Not Needed> */}\n      <span style={styles.container} onClick={handleChange}>\n        <span style={styles.indicator} />\n      </span>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAKA,SAAgB,wBAAwB,EACtC,SACA,aACA,eACA,kBACmB;AACnB,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,QAAQ;GAER,UAAU;GAEV,SAAS;GACT,YAAY;GACZ,YAAY;GAEZ,cAAc;GACd,SAAS;GAET,YAAY;GACZ,iBAAiB,UACZ,eAAe,4BACf,iBAAiB;GACvB;EAED,WAAW;GACT,QAAQ;GACR,OAAO;GAEP,UAAU;GACV,MAAM;GACN,KAAK;GAEL,cAAc;GACd,iBAAiB,kBAAkB;GAEnC,YAAY;GACZ,WAAW,UAAU,qBAAqB;GAC1C,YAAY;GACb;EACF,CAAC;;;;;AChCJ,MAAaA,UAAqC,UAAS;CACzD,MAAM,EAAE,OAAO,SAAS,aAAa;CAGrC,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;EACjE,kBAAkB;EAClB,OAAM,MAAK,CAAC,EAAE,QAAQ;EACvB,CAAC;CAGF,SAAS,aAAa,GAAgC;AACpD,IAAE,iBAAiB;AACnB,IAAE,gBAAgB;AAElB,aAAW,CAAC,QAAQ;;AAGtB,QACE,qBAAC;EAAI,WAAU;aACZ,QACC,oBAAC;GAAW,SAAQ;GAAK,OAAM;aAC5B;IACU,GACX,MAGJ,oBAAC;GAAK,OAAO,OAAO;GAAW,SAAS;aACtC,oBAAC,UAAK,OAAO,OAAO,YAAa;IAC5B;GACH"}

package/dist/{TabSwitch-DSxetCLF.js → TabSwitch-CVngRFFe.js}

@@ -1,5 +1,5 @@
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-C2-V1GJa.js";
-import { t as Typography } from "./Typography-DNz74SEg.js";
+import { t as Typography } from "./Typography-BTM9_PzE.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 
@@ -127,4 +127,4 @@ const TabSwitch = (props) => {
 
 //#endregion
 export { types_exports as n, TabSwitch as t };
-//# sourceMappingURL=TabSwitch-DSxetCLF.js.map
+//# sourceMappingURL=TabSwitch-CVngRFFe.js.map

package/dist/{TabSwitch-DSxetCLF.js.map → TabSwitch-CVngRFFe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TabSwitch-DSxetCLF.js","names":[],"sources":["../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/commons/toolkit/TabSwitch/styles.ts","../src/components/commons/toolkit/TabSwitch/types.ts","../src/components/commons/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  disabled?: boolean\n  selected?: boolean\n  selectedColor?: string\n  variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n  variant,\n  disabled,\n  selected,\n  selectedColor\n}: Params) {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return styled({\n    item: {\n      minHeight: '1.25rem',\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      background: 'transparent',\n      border: 0,\n      padding: '8px 10px',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      __rules: { '& > p': { zIndex: 1 } }\n    },\n\n    selectedBg:\n      variant === 'default'\n        ? {\n            position: 'absolute',\n            inset: 0,\n            borderRadius: 6,\n            border: '1px solid var(--px-border-primary)',\n            background: selected ? accent : 'transparent'\n          }\n        : {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: -2,\n            height: 2,\n            background: selected ? accent : 'transparent'\n          }\n  })\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n  option: SwitchOption<T>\n  selected: boolean\n  layoutId?: string\n  disabled?: boolean\n  selectedColor?: string\n  selectedLabelColor?: string\n  variant: 'default' | 'underline'\n  onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n  const { option, disabled, selected, layoutId, onClick } = props\n\n  const { styles, classes } = useThemedStyles(\n    props,\n    createTabSwitchItemStyles,\n    {\n      pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n    }\n  )\n\n  const isDisabled = disabled || option.disabled\n\n  return (\n    <button\n      type=\"button\"\n      style={styles.item}\n      className={classes.item}\n      tabIndex={isDisabled ? -1 : 0}\n      onClick={() => !isDisabled && onClick(option.value)}\n    >\n      {selected ? (\n        <motion.div\n          layoutId={layoutId || 'pixel-tabswitch-selected'}\n          style={styles.selectedBg}\n        />\n      ) : null}\n\n      {option.icon ? (\n        <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n      ) : null}\n\n      {option.label ? (\n        <Typography variant=\"b1\" fontWeight=\"bold\">\n          {option.label}\n        </Typography>\n      ) : null}\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>) {\n  const { fitContent, backgroundColor, variant } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      padding: '3px',\n      flexDirection: 'row',\n      alignItems: 'center',\n      borderRadius: '0.5rem',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      backgroundColor: backgroundColor ?? 'transparent',\n      borderBottom:\n        variant === 'underline'\n          ? '1px solid var(--px-border-primary, #e5e7eb)'\n          : 'unset',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\n}\n","// Types\nimport type { CommonStyleProps, TypeStyles } from '@hooks/useThemedStyles/types'\nimport type { ReactNode } from 'react'\nimport type { createTabSwitchStyles } from './styles'\n\nexport interface SwitchOption<T> {\n  value: T\n  label?: string\n  disabled?: boolean\n\n  icon?: ReactNode\n}\n\nexport interface TabSwitchProps<T> extends CommonStyleProps {\n  currentValue: T\n  options: SwitchOption<T>[]\n\n  disabled?: boolean\n  fitContent?: boolean\n\n  layoutId?: string\n\n  selectedColor?: string\n  backgroundColor?: string\n  selectedLabelColor?: string\n\n  variant?: 'default' | 'underline'\n\n  styles?: TypeStyles<typeof createTabSwitchStyles>\n\n  onChange: (value: T) => void\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * as TabSwitchTypes from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n  {\n    const {\n      options,\n      disabled,\n      layoutId,\n      currentValue,\n      variant = 'default',\n      onChange\n    } = props\n\n    const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n      pick: p => [p.disabled, p.currentValue],\n      override: props.styles,\n      applyCommonProps: true\n    })\n\n    return (\n      <div style={styles.container} className={classes.container}>\n        {options.map(opt => (\n          <SwitchItem\n            key={String(opt.value)}\n            option={opt}\n            variant={variant}\n            layoutId={layoutId}\n            disabled={disabled}\n            selectedColor={props.selectedColor}\n            selected={currentValue === opt.value}\n            selectedLabelColor={props.selectedLabelColor}\n            onClick={onChange}\n          />\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACS;CACT,MAAM,SAAS,iBAAiB;AAEhC,QAAO,OAAO;EACZ,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR,CAAC;;;;;AC3BJ,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEH,OAAO,QACN,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG,GACX;;GACG;;;;;AC3Db,SAAgB,sBAAyB,OAA0B;CACjE,MAAM,EAAE,YAAY,iBAAiB,YAAY;AAEjD,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,cAAc;EACd,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,iBAAiB,mBAAmB;EACpC,cACE,YAAY,cACR,gDACA;EACN,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;;;;;AEVJ,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,aAAa;GACvC,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}
+{"version":3,"file":"TabSwitch-CVngRFFe.js","names":[],"sources":["../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/commons/toolkit/TabSwitch/styles.ts","../src/components/commons/toolkit/TabSwitch/types.ts","../src/components/commons/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  disabled?: boolean\n  selected?: boolean\n  selectedColor?: string\n  variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n  variant,\n  disabled,\n  selected,\n  selectedColor\n}: Params) {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return styled({\n    item: {\n      minHeight: '1.25rem',\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      background: 'transparent',\n      border: 0,\n      padding: '8px 10px',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      __rules: { '& > p': { zIndex: 1 } }\n    },\n\n    selectedBg:\n      variant === 'default'\n        ? {\n            position: 'absolute',\n            inset: 0,\n            borderRadius: 6,\n            border: '1px solid var(--px-border-primary)',\n            background: selected ? accent : 'transparent'\n          }\n        : {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: -2,\n            height: 2,\n            background: selected ? accent : 'transparent'\n          }\n  })\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n  option: SwitchOption<T>\n  selected: boolean\n  layoutId?: string\n  disabled?: boolean\n  selectedColor?: string\n  selectedLabelColor?: string\n  variant: 'default' | 'underline'\n  onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n  const { option, disabled, selected, layoutId, onClick } = props\n\n  const { styles, classes } = useThemedStyles(\n    props,\n    createTabSwitchItemStyles,\n    {\n      pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n    }\n  )\n\n  const isDisabled = disabled || option.disabled\n\n  return (\n    <button\n      type=\"button\"\n      style={styles.item}\n      className={classes.item}\n      tabIndex={isDisabled ? -1 : 0}\n      onClick={() => !isDisabled && onClick(option.value)}\n    >\n      {selected ? (\n        <motion.div\n          layoutId={layoutId || 'pixel-tabswitch-selected'}\n          style={styles.selectedBg}\n        />\n      ) : null}\n\n      {option.icon ? (\n        <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n      ) : null}\n\n      {option.label ? (\n        <Typography variant=\"b1\" fontWeight=\"bold\">\n          {option.label}\n        </Typography>\n      ) : null}\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>) {\n  const { fitContent, backgroundColor, variant } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      padding: '3px',\n      flexDirection: 'row',\n      alignItems: 'center',\n      borderRadius: '0.5rem',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      backgroundColor: backgroundColor ?? 'transparent',\n      borderBottom:\n        variant === 'underline'\n          ? '1px solid var(--px-border-primary, #e5e7eb)'\n          : 'unset',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\n}\n","// Types\nimport type { CommonStyleProps, TypeStyles } from '@hooks/useThemedStyles/types'\nimport type { ReactNode } from 'react'\nimport type { createTabSwitchStyles } from './styles'\n\nexport interface SwitchOption<T> {\n  value: T\n  label?: string\n  disabled?: boolean\n\n  icon?: ReactNode\n}\n\nexport interface TabSwitchProps<T> extends CommonStyleProps {\n  currentValue: T\n  options: SwitchOption<T>[]\n\n  disabled?: boolean\n  fitContent?: boolean\n\n  layoutId?: string\n\n  selectedColor?: string\n  backgroundColor?: string\n  selectedLabelColor?: string\n\n  variant?: 'default' | 'underline'\n\n  styles?: TypeStyles<typeof createTabSwitchStyles>\n\n  onChange: (value: T) => void\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * as TabSwitchTypes from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n  {\n    const {\n      options,\n      disabled,\n      layoutId,\n      currentValue,\n      variant = 'default',\n      onChange\n    } = props\n\n    const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n      pick: p => [p.disabled, p.currentValue],\n      override: props.styles,\n      applyCommonProps: true\n    })\n\n    return (\n      <div style={styles.container} className={classes.container}>\n        {options.map(opt => (\n          <SwitchItem\n            key={String(opt.value)}\n            option={opt}\n            variant={variant}\n            layoutId={layoutId}\n            disabled={disabled}\n            selectedColor={props.selectedColor}\n            selected={currentValue === opt.value}\n            selectedLabelColor={props.selectedLabelColor}\n            onClick={onChange}\n          />\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACS;CACT,MAAM,SAAS,iBAAiB;AAEhC,QAAO,OAAO;EACZ,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR,CAAC;;;;;AC3BJ,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEH,OAAO,QACN,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG,GACX;;GACG;;;;;AC3Db,SAAgB,sBAAyB,OAA0B;CACjE,MAAM,EAAE,YAAY,iBAAiB,YAAY;AAEjD,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,cAAc;EACd,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,iBAAiB,mBAAmB;EACpC,cACE,YAAY,cACR,gDACA;EACN,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;;;;;AEVJ,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,aAAa;GACvC,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}

package/dist/{TextArea-BuWwCWjY.js → TextArea-B0chOPGK.js}

@@ -1,6 +1,6 @@
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-C2-V1GJa.js";
-import { t as Typography } from "./Typography-DNz74SEg.js";
-import { t as Label } from "./Label-CVSeI-Bh.js";
+import { t as Typography } from "./Typography-BTM9_PzE.js";
+import { t as Label } from "./Label-BIHK45eW.js";
 import { t as ErrorMessage } from "./ErrorMessage-BlKbgDGA.js";
 import { useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -116,4 +116,4 @@ const TextArea = (props) => {
 
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=TextArea-BuWwCWjY.js.map
+//# sourceMappingURL=TextArea-B0chOPGK.js.map

package/dist/{TextArea-BuWwCWjY.js.map → TextArea-B0chOPGK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TextArea-BuWwCWjY.js","names":["value"],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n  const { height = '8rem', readOnly } = props\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    iconContainer: {\n      position: 'absolute',\n      left: '0.75rem',\n      top: '1.375rem',\n      transform: 'translateY(-50%)'\n    },\n    textArea: {\n      height,\n      width: '100%',\n      paddingBlock: '0.75rem',\n      paddingInline: '0.875rem',\n      borderWidth: 1,\n      borderRadius: '0.5rem',\n      resize: 'none',\n\n      fontWeight: '400',\n      fontSize: '1rem',\n      color: 'var(--px-text-primary)',\n\n      borderColor: props.errorMessage\n        ? 'var(--px-color-error)'\n        : 'var(--px-border-primary)',\n      outlineOffset: '-1px',\n\n      cursor: readOnly ? 'default' : undefined,\n\n      __rules: {\n        '&::placeholder': {\n          fontWeight: 400,\n          color: 'var(--px-text-secondary)'\n        },\n\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport { useId, useRef, useState } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n  const {\n    value,\n    delay,\n    disabled,\n    readOnly,\n    maxLength,\n    hideMaxLength,\n    textMaxLength,\n    placeholder,\n    errorMessage,\n\n    label,\n    required,\n    requiredColor,\n    labelConfig,\n    onChange\n  } = props\n\n  // Refs\n  const timeoutRef = useRef<NodeJS.Timeout>(null)\n\n  // States\n  const [inputValue, setInputValue] = useState(value)\n\n  // Hooks\n  const inputId = useId()\n\n  const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n    pick: p => [p.height, p.readOnly, p.placeholderColor, p.focusedRingColor],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Functions\n  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (disabled || readOnly) return\n\n    const value = e.target.value\n\n    setInputValue(value)\n\n    if (timeoutRef.current) clearTimeout(timeoutRef.current)\n\n    if (!delay) onChange?.(value)\n    else {\n      timeoutRef.current = setTimeout(() => onChange?.(value), delay)\n    }\n  }\n\n  function renderLabel() {\n    if (!label) return null\n\n    return (\n      <div>\n        <Label\n          label={label}\n          htmlFor={inputId}\n          required={required}\n          requiredColor={requiredColor}\n          {...labelConfig}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      {renderLabel()}\n\n      <textarea\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        maxLength={maxLength}\n        placeholder={placeholder}\n        style={styles.textArea}\n        className={classes.textArea}\n        onChange={handleChange}\n      />\n\n      {maxLength && !hideMaxLength ? (\n        <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n          {value?.length}/{maxLength} {textMaxLength}\n        </Typography>\n      ) : null}\n\n      {errorMessage ? <ErrorMessage message={errorMessage} /> : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,aAAa;AAEtC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,aAAa;GACb,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,aAAa,MAAM,eACf,0BACA;GACJ,eAAe;GAEf,QAAQ,WAAW,YAAY;GAE/B,SAAS;IACP,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IAED,kBAAkB;KAChB,eAAe;KACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;KAC1F;IACF;GACF;EACF,CAAC;;;;;ACrCJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,OACA,UACA,UACA,WACA,eACA,eACA,aACA,cAEA,OACA,UACA,eACA,aACA,aACE;CAGJ,MAAM,aAAa,OAAuB,KAAK;CAG/C,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GAAC,EAAE;GAAQ,EAAE;GAAU,EAAE;GAAkB,EAAE;GAAiB;EACzE,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;EAE1B,MAAMA,UAAQ,EAAE,OAAO;AAEvB,gBAAcA,QAAM;AAEpB,MAAI,WAAW,QAAS,cAAa,WAAW,QAAQ;AAExD,MAAI,CAAC,MAAO,YAAWA,QAAM;MAE3B,YAAW,UAAU,iBAAiB,WAAWA,QAAM,EAAE,MAAM;;CAInE,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC,mBACC,oBAAC;GACQ;GACP,SAAS;GACC;GACK;GACf,GAAI;IACJ,GACE;;AAIV,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,aAAa;GAEd,oBAAC;IACC,OAAO;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;GAED,aAAa,CAAC,gBACb,qBAAC;IAAW,SAAQ;IAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;KAC9D,OAAO;KAAO;KAAE;KAAU;KAAE;;KAClB,GACX;GAEH,eAAe,oBAAC,gBAAa,SAAS,eAAgB,GAAG;;GACtD"}
+{"version":3,"file":"TextArea-B0chOPGK.js","names":["value"],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n  const { height = '8rem', readOnly } = props\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    iconContainer: {\n      position: 'absolute',\n      left: '0.75rem',\n      top: '1.375rem',\n      transform: 'translateY(-50%)'\n    },\n    textArea: {\n      height,\n      width: '100%',\n      paddingBlock: '0.75rem',\n      paddingInline: '0.875rem',\n      borderWidth: 1,\n      borderRadius: '0.5rem',\n      resize: 'none',\n\n      fontWeight: '400',\n      fontSize: '1rem',\n      color: 'var(--px-text-primary)',\n\n      borderColor: props.errorMessage\n        ? 'var(--px-color-error)'\n        : 'var(--px-border-primary)',\n      outlineOffset: '-1px',\n\n      cursor: readOnly ? 'default' : undefined,\n\n      __rules: {\n        '&::placeholder': {\n          fontWeight: 400,\n          color: 'var(--px-text-secondary)'\n        },\n\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport { useId, useRef, useState } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n  const {\n    value,\n    delay,\n    disabled,\n    readOnly,\n    maxLength,\n    hideMaxLength,\n    textMaxLength,\n    placeholder,\n    errorMessage,\n\n    label,\n    required,\n    requiredColor,\n    labelConfig,\n    onChange\n  } = props\n\n  // Refs\n  const timeoutRef = useRef<NodeJS.Timeout>(null)\n\n  // States\n  const [inputValue, setInputValue] = useState(value)\n\n  // Hooks\n  const inputId = useId()\n\n  const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n    pick: p => [p.height, p.readOnly, p.placeholderColor, p.focusedRingColor],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Functions\n  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (disabled || readOnly) return\n\n    const value = e.target.value\n\n    setInputValue(value)\n\n    if (timeoutRef.current) clearTimeout(timeoutRef.current)\n\n    if (!delay) onChange?.(value)\n    else {\n      timeoutRef.current = setTimeout(() => onChange?.(value), delay)\n    }\n  }\n\n  function renderLabel() {\n    if (!label) return null\n\n    return (\n      <div>\n        <Label\n          label={label}\n          htmlFor={inputId}\n          required={required}\n          requiredColor={requiredColor}\n          {...labelConfig}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      {renderLabel()}\n\n      <textarea\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        maxLength={maxLength}\n        placeholder={placeholder}\n        style={styles.textArea}\n        className={classes.textArea}\n        onChange={handleChange}\n      />\n\n      {maxLength && !hideMaxLength ? (\n        <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n          {value?.length}/{maxLength} {textMaxLength}\n        </Typography>\n      ) : null}\n\n      {errorMessage ? <ErrorMessage message={errorMessage} /> : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,aAAa;AAEtC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,aAAa;GACb,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,aAAa,MAAM,eACf,0BACA;GACJ,eAAe;GAEf,QAAQ,WAAW,YAAY;GAE/B,SAAS;IACP,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IAED,kBAAkB;KAChB,eAAe;KACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;KAC1F;IACF;GACF;EACF,CAAC;;;;;ACrCJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,OACA,UACA,UACA,WACA,eACA,eACA,aACA,cAEA,OACA,UACA,eACA,aACA,aACE;CAGJ,MAAM,aAAa,OAAuB,KAAK;CAG/C,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GAAC,EAAE;GAAQ,EAAE;GAAU,EAAE;GAAkB,EAAE;GAAiB;EACzE,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;EAE1B,MAAMA,UAAQ,EAAE,OAAO;AAEvB,gBAAcA,QAAM;AAEpB,MAAI,WAAW,QAAS,cAAa,WAAW,QAAQ;AAExD,MAAI,CAAC,MAAO,YAAWA,QAAM;MAE3B,YAAW,UAAU,iBAAiB,WAAWA,QAAM,EAAE,MAAM;;CAInE,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC,mBACC,oBAAC;GACQ;GACP,SAAS;GACC;GACK;GACf,GAAI;IACJ,GACE;;AAIV,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,aAAa;GAEd,oBAAC;IACC,OAAO;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;GAED,aAAa,CAAC,gBACb,qBAAC;IAAW,SAAQ;IAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;KAC9D,OAAO;KAAO;KAAE;KAAU;KAAE;;KAClB,GACX;GAEH,eAAe,oBAAC,gBAAa,SAAS,eAAgB,GAAG;;GACtD"}

package/dist/{Typography-DNz74SEg.js → Typography-BTM9_PzE.js}

@@ -167,4 +167,4 @@ const Typography = (props) => {
 
 //#endregion
 export { Typography as t };
-//# sourceMappingURL=Typography-DNz74SEg.js.map
+//# sourceMappingURL=Typography-BTM9_PzE.js.map

package/dist/{Typography-DNz74SEg.js.map → Typography-BTM9_PzE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Typography-DNz74SEg.js","names":["typographyVariants: Record<TypographyVariant, SlotStyle>","variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n>","alignText: Record<TextAlign, SlotStyle>","Typography: React.FC<TypographyProps>"],"sources":["../src/components/commons/toolkit/Typography/utils.ts","../src/components/commons/toolkit/Typography/config.ts","../src/components/commons/toolkit/Typography/style.ts","../src/components/commons/toolkit/Typography/index.tsx"],"sourcesContent":["export function getPlaceholder(content: React.ReactNode, size: number) {\n  const contentSize = typeof content === 'string' ? content.length : 0\n  const finalSize = Math.max(contentSize, size)\n\n  if (finalSize === 0) return ''\n\n  return '*'.repeat(finalSize)\n}\n","// External Libraries\nimport type { JSX } from 'react'\n\n// Types\nimport type { TextAlign, TypographyVariant } from './types'\nimport { type SlotStyle, WEIGHTS } from '@hooks/useThemedStyles/types'\n\nconst primaryColor = 'var(--px-text-primary)'\nconst secondaryColor = 'var(--px-text-secondary)'\n\nexport const typographyVariants: Record<TypographyVariant, SlotStyle> = {\n  h1: {\n    fontSize: '3rem',\n    fontWeight: '700',\n    lineHeight: WEIGHTS.bold,\n    color: primaryColor\n  },\n  h2: {\n    fontSize: '2.25rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2.5 / 2.25)',\n    color: primaryColor\n  },\n  h3: {\n    fontSize: '1.875rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2.25 / 1.875)',\n    color: primaryColor\n  },\n  h4: {\n    fontSize: '1.5rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2 / 1.5)',\n    color: primaryColor\n  },\n  h5: {\n    fontSize: '1.25rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(1.75 / 1.25)',\n    color: primaryColor\n  },\n  b1: {\n    fontSize: '1rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: '1.5',\n    color: primaryColor\n  },\n  b2: {\n    fontSize: '0.875rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: 'calc(1.25 / 0.875)',\n    color: secondaryColor\n  },\n  b3: {\n    fontSize: '0.75rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: 'calc(1 / 0.75)',\n    color: secondaryColor\n  },\n  caption: {\n    fontSize: '0.65rem',\n    fontWeight: WEIGHTS.regular,\n    lineHeight: 'calc(1 / 0.65)',\n    color: secondaryColor\n  },\n  legal: {\n    fontSize: '0.65rem',\n    lineHeight: 'calc(1 / 0.65)',\n    fontWeight: WEIGHTS.light,\n    textTransform: 'uppercase',\n    letterSpacing: '0.025em',\n    color: secondaryColor\n  }\n}\n\nexport const variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  b1: 'p',\n  b2: 'p',\n  b3: 'p',\n  caption: 'span',\n  legal: 'span'\n}\n\nexport const alignText: Record<TextAlign, SlotStyle> = {\n  left: { textAlign: 'left' },\n  center: { textAlign: 'center' },\n  right: { textAlign: 'right' },\n  justify: { textAlign: 'justify' }\n}\n","// Utils\nimport { alignText, typographyVariants } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\nimport { type SlotStyle, styled } from '@hooks/useThemedStyles/types'\n\nexport function createTypographyStyles(props: TypographyProps) {\n  const { variant, align = 'left', color } = props\n\n  return styled({\n    loading: {\n      width: 'fit-content',\n      display: 'inline-block',\n      borderRadius: '0.25rem',\n\n      background: 'var(--px-bg-skeleton)',\n      backgroundSize: '400% 400%',\n      animation: 'gradient 3s ease infinite',\n      color: 'transparent',\n\n      __keyframes: {\n        gradient: {\n          '0%': { backgroundPosition: '0% 50%' },\n          '50%': { backgroundPosition: '100% 50%' },\n          '100%': { backgroundPosition: '0% 50%' }\n        }\n      }\n    },\n\n    text: {\n      ...alignText[align],\n      ...typographyVariants[variant],\n      color: color ?? typographyVariants[variant].color\n    } as SlotStyle\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { getPlaceholder } from './utils'\nimport { variantToElement } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\n\n// Styles\nimport { createTypographyStyles } from './style'\n\nexport const Typography: React.FC<TypographyProps> = props => {\n  const {\n    id,\n    as,\n    href,\n    variant,\n    children,\n    className,\n    isLoading = false,\n    placeholderSize = 5,\n    styles: styleTypography\n  } = props\n\n  const { styles } = useThemedStyles(props, createTypographyStyles, {\n    pick: p => [p.isLoading, p.variant, p.align, p.color],\n    commonSlot: 'text',\n    applyCommonProps: true,\n    override: styleTypography\n  })\n\n  const Component = as ?? variantToElement[variant]\n\n  if (isLoading) {\n    return (\n      <span\n        id={id}\n        aria-hidden=\"true\"\n        role=\"presentation\"\n        style={{ ...styles.text, ...styles.loading }}\n      >\n        {getPlaceholder(children, placeholderSize)}\n      </span>\n    )\n  }\n\n  const sharedProps = { id, style: styles.text, className }\n\n  if (href) {\n    return (\n      <a href={href} {...sharedProps}>\n        {children}\n      </a>\n    )\n  }\n\n  return <Component {...sharedProps}>{children}</Component>\n}\n"],"mappings":"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"}
+{"version":3,"file":"Typography-BTM9_PzE.js","names":["typographyVariants: Record<TypographyVariant, SlotStyle>","variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n>","alignText: Record<TextAlign, SlotStyle>","Typography: React.FC<TypographyProps>"],"sources":["../src/components/commons/toolkit/Typography/utils.ts","../src/components/commons/toolkit/Typography/config.ts","../src/components/commons/toolkit/Typography/style.ts","../src/components/commons/toolkit/Typography/index.tsx"],"sourcesContent":["export function getPlaceholder(content: React.ReactNode, size: number) {\n  const contentSize = typeof content === 'string' ? content.length : 0\n  const finalSize = Math.max(contentSize, size)\n\n  if (finalSize === 0) return ''\n\n  return '*'.repeat(finalSize)\n}\n","// External Libraries\nimport type { JSX } from 'react'\n\n// Types\nimport type { TextAlign, TypographyVariant } from './types'\nimport { type SlotStyle, WEIGHTS } from '@hooks/useThemedStyles/types'\n\nconst primaryColor = 'var(--px-text-primary)'\nconst secondaryColor = 'var(--px-text-secondary)'\n\nexport const typographyVariants: Record<TypographyVariant, SlotStyle> = {\n  h1: {\n    fontSize: '3rem',\n    fontWeight: '700',\n    lineHeight: WEIGHTS.bold,\n    color: primaryColor\n  },\n  h2: {\n    fontSize: '2.25rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2.5 / 2.25)',\n    color: primaryColor\n  },\n  h3: {\n    fontSize: '1.875rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2.25 / 1.875)',\n    color: primaryColor\n  },\n  h4: {\n    fontSize: '1.5rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(2 / 1.5)',\n    color: primaryColor\n  },\n  h5: {\n    fontSize: '1.25rem',\n    fontWeight: WEIGHTS.bold,\n    lineHeight: 'calc(1.75 / 1.25)',\n    color: primaryColor\n  },\n  b1: {\n    fontSize: '1rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: '1.5',\n    color: primaryColor\n  },\n  b2: {\n    fontSize: '0.875rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: 'calc(1.25 / 0.875)',\n    color: secondaryColor\n  },\n  b3: {\n    fontSize: '0.75rem',\n    fontWeight: WEIGHTS.medium,\n    lineHeight: 'calc(1 / 0.75)',\n    color: secondaryColor\n  },\n  caption: {\n    fontSize: '0.65rem',\n    fontWeight: WEIGHTS.regular,\n    lineHeight: 'calc(1 / 0.65)',\n    color: secondaryColor\n  },\n  legal: {\n    fontSize: '0.65rem',\n    lineHeight: 'calc(1 / 0.65)',\n    fontWeight: WEIGHTS.light,\n    textTransform: 'uppercase',\n    letterSpacing: '0.025em',\n    color: secondaryColor\n  }\n}\n\nexport const variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  b1: 'p',\n  b2: 'p',\n  b3: 'p',\n  caption: 'span',\n  legal: 'span'\n}\n\nexport const alignText: Record<TextAlign, SlotStyle> = {\n  left: { textAlign: 'left' },\n  center: { textAlign: 'center' },\n  right: { textAlign: 'right' },\n  justify: { textAlign: 'justify' }\n}\n","// Utils\nimport { alignText, typographyVariants } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\nimport { type SlotStyle, styled } from '@hooks/useThemedStyles/types'\n\nexport function createTypographyStyles(props: TypographyProps) {\n  const { variant, align = 'left', color } = props\n\n  return styled({\n    loading: {\n      width: 'fit-content',\n      display: 'inline-block',\n      borderRadius: '0.25rem',\n\n      background: 'var(--px-bg-skeleton)',\n      backgroundSize: '400% 400%',\n      animation: 'gradient 3s ease infinite',\n      color: 'transparent',\n\n      __keyframes: {\n        gradient: {\n          '0%': { backgroundPosition: '0% 50%' },\n          '50%': { backgroundPosition: '100% 50%' },\n          '100%': { backgroundPosition: '0% 50%' }\n        }\n      }\n    },\n\n    text: {\n      ...alignText[align],\n      ...typographyVariants[variant],\n      color: color ?? typographyVariants[variant].color\n    } as SlotStyle\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { getPlaceholder } from './utils'\nimport { variantToElement } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\n\n// Styles\nimport { createTypographyStyles } from './style'\n\nexport const Typography: React.FC<TypographyProps> = props => {\n  const {\n    id,\n    as,\n    href,\n    variant,\n    children,\n    className,\n    isLoading = false,\n    placeholderSize = 5,\n    styles: styleTypography\n  } = props\n\n  const { styles } = useThemedStyles(props, createTypographyStyles, {\n    pick: p => [p.isLoading, p.variant, p.align, p.color],\n    commonSlot: 'text',\n    applyCommonProps: true,\n    override: styleTypography\n  })\n\n  const Component = as ?? variantToElement[variant]\n\n  if (isLoading) {\n    return (\n      <span\n        id={id}\n        aria-hidden=\"true\"\n        role=\"presentation\"\n        style={{ ...styles.text, ...styles.loading }}\n      >\n        {getPlaceholder(children, placeholderSize)}\n      </span>\n    )\n  }\n\n  const sharedProps = { id, style: styles.text, className }\n\n  if (href) {\n    return (\n      <a href={href} {...sharedProps}>\n        {children}\n      </a>\n    )\n  }\n\n  return <Component {...sharedProps}>{children}</Component>\n}\n"],"mappings":"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"}

package/dist/base-popover.js

@@ -1,7 +1,7 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./useDismiss-Bv7pzF85.js";
-import "./useFloating-EH6HmChz.js";
-import "./Popover-CtS201O7.js";
-import { t as BasePopover } from "./BasePopover-CJ3fgbyR.js";
+import "./useDismiss-DU3sm3Wt.js";
+import "./useFloating-D8XvrX3y.js";
+import "./Popover-Ca6y8mp2.js";
+import { t as BasePopover } from "./BasePopover-8DnU_4ZE.js";
 
 export { BasePopover };

package/dist/breadcrumb.js

@@ -1,6 +1,6 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Typography-DNz74SEg.js";
+import "./Typography-BTM9_PzE.js";
 import "./Skeleton-CK7nXld2.js";
-import { t as Breadcrumb } from "./Breadcrumb-DybIVEbb.js";
+import { t as Breadcrumb } from "./Breadcrumb-26GLzOFf.js";
 
 export { Breadcrumb };

package/dist/button.js

@@ -1,6 +1,6 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Typography-DNz74SEg.js";
+import "./Typography-BTM9_PzE.js";
 import "./Loader-COoEBdxD.js";
-import { t as Button } from "./Button-BoxJYXZV.js";
+import { t as Button } from "./Button-Bt0n0YRS.js";
 
 export { Button };

package/dist/check-item.js

@@ -1,6 +1,6 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Icon-DsZcccBA.js";
-import "./Typography-DNz74SEg.js";
-import { t as CheckItem } from "./CheckItem-CyBf-IJ_.js";
+import "./Typography-BTM9_PzE.js";
+import "./Icon-B_-jkpZe.js";
+import { t as CheckItem } from "./CheckItem-D4FQlFVr.js";
 
 export { CheckItem };

package/dist/checkbox.js

@@ -1,6 +1,6 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Icon-DsZcccBA.js";
-import "./Typography-DNz74SEg.js";
-import { t as Checkbox } from "./Checkbox-BIv2CdPA.js";
+import "./Typography-BTM9_PzE.js";
+import "./Icon-B_-jkpZe.js";
+import { t as Checkbox } from "./Checkbox-MBu-eqhs.js";
 
 export { Checkbox };

package/dist/chip-list.js

@@ -1,8 +1,8 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Typography-DNz74SEg.js";
-import "./Chip-D5uSkIub.js";
-import "./Label-CVSeI-Bh.js";
+import "./Typography-BTM9_PzE.js";
+import "./Chip-DVyLeXhu.js";
+import "./Label-BIHK45eW.js";
 import "./ErrorMessage-BlKbgDGA.js";
-import { t as ChipList } from "./ChipList-DUNb3XUs.js";
+import { t as ChipList } from "./ChipList-SJPLLogY.js";
 
 export { ChipList };

package/dist/chip.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Typography-DNz74SEg.js";
-import { n as types_exports, t as Chip } from "./Chip-D5uSkIub.js";
+import "./Typography-BTM9_PzE.js";
+import { n as types_exports, t as Chip } from "./Chip-DVyLeXhu.js";
 
 export { Chip, types_exports as ChipTypes };

package/dist/color-picker.js

@@ -1,8 +1,8 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Typography-DNz74SEg.js";
-import "./Label-CVSeI-Bh.js";
+import "./Typography-BTM9_PzE.js";
+import "./Label-BIHK45eW.js";
 import "./ErrorMessage-BlKbgDGA.js";
-import { n as types_exports, t as ColorPicker } from "./ColorPicker-BjdYX32n.js";
+import { n as types_exports, t as ColorPicker } from "./ColorPicker-CoW1U32M.js";
 import "./Skeleton-CK7nXld2.js";
 
 export { ColorPicker, types_exports as ColorPickerTypes };

package/dist/context-menu.d.ts

@@ -1,2 +1,2 @@
-import { n as types_d_exports, t as ContextMenu } from "./index-rjAef_UW.js";
+import { n as types_d_exports, t as ContextMenu } from "./index-C_M4hYmf.js";
 export { ContextMenu, types_d_exports as ContextMenuTypes };

package/dist/context-menu.js

@@ -1,10 +1,10 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Switch-CWfHuT5f.js";
-import "./useDismiss-Bv7pzF85.js";
-import "./useFloating-EH6HmChz.js";
-import "./Popover-CtS201O7.js";
-import "./Typography-DNz74SEg.js";
-import "./BasePopover-CJ3fgbyR.js";
-import { n as types_exports, t as ContextMenu } from "./ContextMenu-gddOGRUy.js";
+import "./Switch-CIVBbhne.js";
+import "./Typography-BTM9_PzE.js";
+import "./useDismiss-DU3sm3Wt.js";
+import "./useFloating-D8XvrX3y.js";
+import "./Popover-Ca6y8mp2.js";
+import "./BasePopover-8DnU_4ZE.js";
+import { n as types_exports, t as ContextMenu } from "./ContextMenu-C9wbwxr4.js";
 
 export { ContextMenu, types_exports as ContextMenuTypes };

package/dist/date-picker.js

@@ -1,15 +1,15 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./useDismiss-Bv7pzF85.js";
-import "./useFloating-EH6HmChz.js";
-import "./Popover-CtS201O7.js";
-import "./Icon-DsZcccBA.js";
-import "./Typography-DNz74SEg.js";
-import { n as types_exports, t as DatePicker } from "./DatePicker-DxnkpNFK.js";
-import "./BasePopover-CJ3fgbyR.js";
-import "./Label-CVSeI-Bh.js";
+import "./Typography-BTM9_PzE.js";
+import "./useDismiss-DU3sm3Wt.js";
+import "./useFloating-D8XvrX3y.js";
+import "./Popover-Ca6y8mp2.js";
+import "./Icon-B_-jkpZe.js";
+import { n as types_exports, t as DatePicker } from "./DatePicker-BMjFyNnT.js";
+import "./BasePopover-8DnU_4ZE.js";
+import "./Label-BIHK45eW.js";
 import "./ErrorMessage-BlKbgDGA.js";
 import "./Loader-COoEBdxD.js";
-import "./Button-BoxJYXZV.js";
+import "./Button-Bt0n0YRS.js";
 import "./MaskModule-_W1aSkxF.js";
 
 export { DatePicker, types_exports as DatePickerTypes };

package/dist/{index-BAU_wCNU.d.ts → index-BDhzbGaA.d.ts}

@@ -27,7 +27,7 @@ declare function createSelectStyles(props: SelectProps): {
     opacity: number;
     cursor: "not-allowed" | "pointer" | "progress";
     boxShadow: "var(--px-shadow-default)";
-    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
+    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
     __rules: {
       '&:focus-within': {
         outlineOffset: string;
@@ -50,6 +50,18 @@ declare function createSelectStyles(props: SelectProps): {
   panel: {
     width: string;
   };
+  contentValueImage: {
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    columnGap: string;
+  };
+  iconContainer: {
+    display: "flex";
+    justifyContent: "center";
+    alignItems: "center";
+    maxWidth: string;
+  };
 };
 declare namespace types_d_exports {
   export { SelectOption, SelectProps };
@@ -83,10 +95,11 @@ interface SelectProps extends LayoutProps, MarginProps {
 interface SelectOption {
   label: string;
   value: string;
+  startIcon?: React.ReactNode;
 }
 //#endregion
 //#region src/components/commons/inputs/Select/index.d.ts
 declare const Select: React$1.FC<SelectProps>;
 //#endregion
 export { types_d_exports as n, Select as t };
-//# sourceMappingURL=index-BAU_wCNU.d.ts.map
+//# sourceMappingURL=index-BDhzbGaA.d.ts.map

package/dist/{index-CqWGFqGH.d.ts → index-BZTLZhoa.d.ts}

@@ -2,6 +2,7 @@ import React from "react";
 
 //#region src/components/commons/toolkit/Switch/types.d.ts
 interface SwitchThumbProps {
+  label?: string;
   checked: boolean;
   colorIndicator?: string;
   colorActive?: string;
@@ -13,4 +14,4 @@ interface SwitchThumbProps {
 declare const Switch: React.FC<SwitchThumbProps>;
 //#endregion
 export { Switch as t };
-//# sourceMappingURL=index-CqWGFqGH.d.ts.map
+//# sourceMappingURL=index-BZTLZhoa.d.ts.map

package/dist/{index-rjAef_UW.d.ts → index-C_M4hYmf.d.ts}

@@ -1,7 +1,7 @@
 import { r as TypeStyles } from "./useThemedStyles-BmCyHvYs.js";
 import { n as Placement } from "./types-DOVvAept.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/ContextMenu/styles.d.ts
 declare function createContextMenuStyles<T>(_props: ContextMenuProps<T>): {
@@ -68,7 +68,7 @@ interface ContextMenuProps<T> {
 }
 //#endregion
 //#region src/components/commons/toolkit/ContextMenu/index.d.ts
-declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime1.JSX.Element;
+declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { types_d_exports as n, ContextMenu as t };
-//# sourceMappingURL=index-rjAef_UW.d.ts.map
+//# sourceMappingURL=index-C_M4hYmf.d.ts.map

package/dist/{index-EKs-cTg7.d.ts → index-Cocx24nH.d.ts}

@@ -1,6 +1,6 @@
 import { a as TextProps } from "./styleProps-BA0nnV0Y.js";
 import { r as TypeStyles } from "./useThemedStyles-BmCyHvYs.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/commons/inputs/TextArea/styles.d.ts
 declare function createTextAreaStyles(props: TextAreaProps): {
@@ -27,7 +27,7 @@ declare function createTextAreaStyles(props: TextAreaProps): {
     fontWeight: "400";
     fontSize: string;
     color: "var(--px-text-primary)";
-    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
+    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
     outlineOffset: string;
     cursor: "default" | undefined;
     __rules: {
@@ -67,7 +67,7 @@ interface TextAreaProps {
 }
 //#endregion
 //#region src/components/commons/inputs/TextArea/index.d.ts
-declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
+declare const TextArea: (props: TextAreaProps) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=index-EKs-cTg7.d.ts.map
+//# sourceMappingURL=index-Cocx24nH.d.ts.map

package/dist/{index-D4xpcrkW.d.ts → index-goekpccU.d.ts}

@@ -22,7 +22,7 @@ declare function createInputStyles(props: InputProps): {
     padding: string;
     opacity: number;
     boxShadow: "var(--px-shadow-default)";
-    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
+    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
     __rules: {
       '&:focus-within': {
         outlineOffset: string;
@@ -103,4 +103,4 @@ interface InputMethods {
 declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<InputMethods>>;
 //#endregion
 export { Input as t };
-//# sourceMappingURL=index-D4xpcrkW.d.ts.map
+//# sourceMappingURL=index-goekpccU.d.ts.map

package/dist/index.d.ts

@@ -5,11 +5,11 @@ import { n as types_d_exports$1, t as ColorPicker } from "./index-IRwLCtr6.js";
 import { n as types_d_exports$4 } from "./types-DsHO3o0W.js";
 import { n as types_d_exports$3, t as DatePicker } from "./index-CYAtenGA.js";
 import { n as Locale, r as MaskType, t as MaskModule } from "./index-YmSxAVca.js";
-import { t as Input } from "./index-D4xpcrkW.js";
+import { t as Input } from "./index-goekpccU.js";
 import { t as SearchInput } from "./index-3xu8OVrG.js";
-import { n as types_d_exports$5, t as Select } from "./index-BAU_wCNU.js";
+import { n as types_d_exports$5, t as Select } from "./index-BDhzbGaA.js";
 import { t as index_d_exports } from "./index-jJAJfSGh.js";
-import { t as TextArea } from "./index-EKs-cTg7.js";
+import { t as TextArea } from "./index-Cocx24nH.js";
 import { t as Popover } from "./index-BC4vBeyW.js";
 import { t as BasePopover } from "./index-T_MMQOp-.js";
 import { t as Breadcrumb } from "./index-DTykQKAL.js";
@@ -19,11 +19,11 @@ import { t as Checkbox } from "./index-D2O6oLka.js";
 import { r as types_d_exports } from "./types-BMD9Opqm.js";
 import { Chip } from "./chip.js";
 import { t as ChipList } from "./index-BJwLC4k9.js";
-import { n as types_d_exports$2, t as ContextMenu } from "./index-rjAef_UW.js";
+import { n as types_d_exports$2, t as ContextMenu } from "./index-C_M4hYmf.js";
 import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
 import { t as Pagination } from "./index-DV7CHzMN.js";
 import { ScrollPaginationContainer } from "./scroll-pagination-container.js";
-import { t as Switch } from "./index-CqWGFqGH.js";
+import { t as Switch } from "./index-BZTLZhoa.js";
 import { n as types_d_exports$6, t as TabSwitch } from "./index-NrJMrnzL.js";
 import { Typography } from "./typography.js";
 import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-BAScxlcW.js";

package/dist/index.js

@@ -1,35 +1,35 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import { t as Switch } from "./Switch-CWfHuT5f.js";
-import { t as useDismiss } from "./useDismiss-Bv7pzF85.js";
-import { t as useFloating } from "./useFloating-EH6HmChz.js";
-import { n as types_exports$4, t as Popover } from "./Popover-CtS201O7.js";
-import "./Icon-DsZcccBA.js";
-import { t as Typography } from "./Typography-DNz74SEg.js";
-import { t as Checkbox } from "./Checkbox-BIv2CdPA.js";
-import { n as types_exports$3, t as DatePicker } from "./DatePicker-DxnkpNFK.js";
+import { t as Switch } from "./Switch-CIVBbhne.js";
+import { t as Typography } from "./Typography-BTM9_PzE.js";
+import { t as useDismiss } from "./useDismiss-DU3sm3Wt.js";
+import { t as useFloating } from "./useFloating-D8XvrX3y.js";
+import { n as types_exports$4, t as Popover } from "./Popover-Ca6y8mp2.js";
+import "./Icon-B_-jkpZe.js";
+import { t as Checkbox } from "./Checkbox-MBu-eqhs.js";
+import { n as types_exports$3, t as DatePicker } from "./DatePicker-BMjFyNnT.js";
 import { n as useTheme, t as ThemeProvider } from "./ThemeContext-CwpLofGu.js";
-import { n as types_exports$7, t as TabSwitch } from "./TabSwitch-DSxetCLF.js";
-import { t as CheckItem } from "./CheckItem-CyBf-IJ_.js";
-import { t as InfoSummary } from "./InfoSummary-Dx0Quhyh.js";
-import { t as BasePopover } from "./BasePopover-CJ3fgbyR.js";
-import { n as types_exports$2, t as ContextMenu } from "./ContextMenu-gddOGRUy.js";
-import { n as types_exports, t as Chip } from "./Chip-D5uSkIub.js";
-import "./Label-CVSeI-Bh.js";
+import { n as types_exports$7, t as TabSwitch } from "./TabSwitch-CVngRFFe.js";
+import { t as CheckItem } from "./CheckItem-D4FQlFVr.js";
+import { t as InfoSummary } from "./InfoSummary-DjhdozE3.js";
+import { t as BasePopover } from "./BasePopover-8DnU_4ZE.js";
+import { n as types_exports$2, t as ContextMenu } from "./ContextMenu-C9wbwxr4.js";
+import { n as types_exports, t as Chip } from "./Chip-DVyLeXhu.js";
+import "./Label-BIHK45eW.js";
 import "./ErrorMessage-BlKbgDGA.js";
-import { t as ChipList } from "./ChipList-DUNb3XUs.js";
+import { t as ChipList } from "./ChipList-SJPLLogY.js";
 import { t as IconButton } from "./IconButton-DstAIotD.js";
-import { t as Pagination } from "./Pagination-BLRSfr8j.js";
+import { t as Pagination } from "./Pagination-CLQ-I-Ll.js";
 import "./Loader-COoEBdxD.js";
-import { t as Button } from "./Button-BoxJYXZV.js";
+import { t as Button } from "./Button-Bt0n0YRS.js";
 import { n as types_exports$5, t as ScrollPaginationContainer } from "./ScrollPaginationContainer-CMpmFODW.js";
 import { a as Locale, o as MaskType, s as MaskModule } from "./MaskModule-_W1aSkxF.js";
-import { t as Input } from "./Input-BJhWrENq.js";
-import { n as types_exports$6, t as Select } from "./Select-Bjf4h9IV.js";
-import { t as TextArea } from "./TextArea-BuWwCWjY.js";
-import { t as SearchInput } from "./SearchInput-CZ6NlgaZ.js";
-import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-BjdYX32n.js";
+import { t as Input } from "./Input-WKAFbfzS.js";
+import { n as types_exports$6, t as Select } from "./Select-HUf25HtQ.js";
+import { t as TextArea } from "./TextArea-B0chOPGK.js";
+import { t as SearchInput } from "./SearchInput-N6NU3ljd.js";
+import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-CoW1U32M.js";
 import { t as Skeleton } from "./Skeleton-CK7nXld2.js";
 import { useVirtualAnchor } from "./use-virtual-anchor.js";
-import { t as Breadcrumb } from "./Breadcrumb-DybIVEbb.js";
+import { t as Breadcrumb } from "./Breadcrumb-26GLzOFf.js";
 
 export { BasePopover, Breadcrumb, Button, CheckItem, Checkbox, Chip, ChipList, types_exports as ChipTypes, ColorPicker, types_exports$1 as ColorPickerTypes, ContextMenu, types_exports$2 as ContextMenuTypes, DatePicker, types_exports$3 as DatePickerTypes, IconButton, InfoSummary, Input, Locale, MaskModule, MaskType, Pagination, Popover, types_exports$4 as PopoverTypes, ScrollPaginationContainer, types_exports$5 as ScrollPaginationContainerTypes, SearchInput, Select, types_exports$6 as SelectTypes, Skeleton, Switch, TabSwitch, types_exports$7 as TabSwitchTypes, TextArea, ThemeProvider, Typography, useDismiss, useFloating, useTheme, useVirtualAnchor };

package/dist/info-summary.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Typography-DNz74SEg.js";
-import { t as InfoSummary } from "./InfoSummary-Dx0Quhyh.js";
+import "./Typography-BTM9_PzE.js";
+import { t as InfoSummary } from "./InfoSummary-DjhdozE3.js";
 
 export { InfoSummary };

package/dist/input.d.ts

@@ -1,2 +1,2 @@
-import { t as Input } from "./index-D4xpcrkW.js";
+import { t as Input } from "./index-goekpccU.js";
 export { Input };

package/dist/input.js

@@ -1,9 +1,9 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Icon-DsZcccBA.js";
-import "./Typography-DNz74SEg.js";
-import "./Label-CVSeI-Bh.js";
+import "./Typography-BTM9_PzE.js";
+import "./Icon-B_-jkpZe.js";
+import "./Label-BIHK45eW.js";
 import "./ErrorMessage-BlKbgDGA.js";
 import "./MaskModule-_W1aSkxF.js";
-import { t as Input } from "./Input-BJhWrENq.js";
+import { t as Input } from "./Input-WKAFbfzS.js";
 
 export { Input };

package/dist/pagination.js

@@ -1,9 +1,9 @@
 import "./useThemedStyles-C2-V1GJa.js";
-import "./Icon-DsZcccBA.js";
-import "./Typography-DNz74SEg.js";
+import "./Typography-BTM9_PzE.js";
+import "./Icon-B_-jkpZe.js";
 import "./IconButton-DstAIotD.js";
-import { t as Pagination } from "./Pagination-BLRSfr8j.js";
+import { t as Pagination } from "./Pagination-CLQ-I-Ll.js";
 import "./Loader-COoEBdxD.js";
-import "./Button-BoxJYXZV.js";
+import "./Button-Bt0n0YRS.js";
 
 export { Pagination };