softable-pixels-web 1.1.0 → 1.1.1

package/dist/{TabSwitch-Ce-uQvRp.js.map → TabSwitch-De30bFX2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TabSwitch-Ce-uQvRp.js","names":[],"sources":["../src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/toolkit/TabSwitch/styles.ts","../src/components/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled, type StyleMap } 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): StyleMap {\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/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      <Typography variant=\"b1\" fontWeight=\"bold\">\n        {option.label}\n      </Typography>\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap {\n  const { fitContent } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      borderBottom: '1px solid var(--px-border-primaryder, #e5e7eb)',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\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 * 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,iBACmB;CACnB,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;GAEJ,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG;;GACN;;;;;ACzDb,SAAgB,sBAAyB,OAAoC;CAC3E,MAAM,EAAE,eAAe;AAEvB,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,cAAc;EACd,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;ACJJ,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-De30bFX2.js","names":[],"sources":["../src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/toolkit/TabSwitch/styles.ts","../src/components/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled, type StyleMap } 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): StyleMap {\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/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      <Typography variant=\"b1\" fontWeight=\"bold\">\n        {option.label}\n      </Typography>\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap {\n  const { fitContent } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      borderBottom: '1px solid var(--px-border-primaryder, #e5e7eb)',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\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 * 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,iBACmB;CACnB,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;GAEJ,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG;;GACN;;;;;ACzDb,SAAgB,sBAAyB,OAAoC;CAC3E,MAAM,EAAE,eAAe;AAEvB,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,cAAc;EACd,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;ACJJ,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-BsErpaMx.js → TextArea-jpLThSHP.js}

@@ -1,7 +1,7 @@
-import { t as Icon } from "./Icon-7fQw74zg.js";
-import { n as useThemedStyles, t as styled } from "./useThemedStyles-68D71Lua.js";
-import { t as Typography } from "./Typography-CKXLkfw7.js";
-import { t as Label } from "./Label-1Gh2DlKl.js";
+import { t as Icon } from "./Icon-Djde8oXI.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-3rUXJYgS.js";
+import { t as Typography } from "./Typography-BE-vQSfx.js";
+import { t as Label } from "./Label-QQpNWSeV.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -111,4 +111,4 @@ const TextArea = (props) => {
 
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=TextArea-BsErpaMx.js.map
+//# sourceMappingURL=TextArea-jpLThSHP.js.map

package/dist/{TextArea-BsErpaMx.js.map → TextArea-jpLThSHP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TextArea-BsErpaMx.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps): StyleMap {\n  const { height = '8rem', readOnly, startIcon } = props\n\n  const focusRingColor = props.focusedRingColor || 'var(--px-color-info)'\n  const placeHolderColor =\n    props.placeholderColor || 'var(--px-text-placeholder)'\n\n  return styled({\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      borderRadius: '0.5rem',\n      resize: 'none',\n\n      fontWeight: '400',\n      fontSize: '1rem',\n      color: 'var(--px-text-primary)',\n\n      border: '1px solid red',\n      outlineOffset: '-1px',\n\n      cursor: readOnly ? 'default' : undefined,\n      paddingLeft: startIcon ? '2.5rem' : undefined,\n\n      __rules: {\n        '&::placeholder': {\n          color: `${placeHolderColor}`\n        },\n        '&:focus': readOnly\n          ? { outline: 'none' }\n          : { outline: `2px solid ${focusRingColor}` }\n      }\n    }\n  })\n}\n","// External Libraries\nimport { useId } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/Label'\nimport { Icon } from '@components/toolkit/Icon'\nimport { Typography } from '@components/toolkit/Typography'\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    disabled,\n    readOnly,\n    maxLength,\n    hideMaxLength,\n    textMaxLength,\n    placeholder,\n\n    label,\n    required,\n    requiredColor,\n    labelColor,\n    labelWeight,\n    labelVariant,\n\n    startIcon,\n    iconColor\n  } = props\n\n  // Hooks\n  const inputId = useId()\n\n  const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n    pick: p => [\n      p.height,\n      p.readOnly,\n      p.startIcon,\n      p.placeholderColor,\n      p.focusedRingColor\n    ],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Functions\n  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (disabled || readOnly) return\n    props.onChange?.(e.target.value)\n  }\n\n  function renderLabel() {\n    if (!label) return null\n\n    return (\n      <div className=\"flex items-center gap-3\">\n        <Label\n          htmlFor={inputId}\n          label={label}\n          required={required}\n          requiredColor={requiredColor}\n          labelColor={labelColor}\n          labelWeight={labelWeight}\n          labelVariant={labelVariant}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div>\n      {renderLabel()}\n\n      <div style={{ position: 'relative' }}>\n        {startIcon && (\n          <div style={styles.iconContainer}>\n            <Icon\n              name={startIcon}\n              color={iconColor ? iconColor : 'var(--px-text-primary)'}\n            />\n          </div>\n        )}\n\n        <textarea\n          value={value}\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      </div>\n\n      {maxLength && !hideMaxLength ? (\n        <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n          {value.length}/{maxLength} {textMaxLength}\n        </Typography>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EAAE,SAAS,QAAQ,UAAU,cAAc;CAEjD,MAAM,iBAAiB,MAAM,oBAAoB;CACjD,MAAM,mBACJ,MAAM,oBAAoB;AAE5B,QAAO,OAAO;EACZ,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,QAAQ;GACR,eAAe;GAEf,QAAQ,WAAW,YAAY;GAC/B,aAAa,YAAY,WAAW;GAEpC,SAAS;IACP,kBAAkB,EAChB,OAAO,GAAG,oBACX;IACD,WAAW,WACP,EAAE,SAAS,QAAQ,GACnB,EAAE,SAAS,aAAa,kBAAkB;IAC/C;GACF;EACF,CAAC;;;;;AC5BJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,UACA,UACA,WACA,eACA,eACA,aAEA,OACA,UACA,eACA,YACA,aACA,cAEA,WACA,cACE;CAGJ,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GACT,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACH;EACD,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;AAC1B,QAAM,WAAW,EAAE,OAAO,MAAM;;CAGlC,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,SAAS;IACF;IACG;IACK;IACH;IACC;IACC;KACd;IACE;;AAIV,QACE,qBAAC;EACE,aAAa;EAEd,qBAAC;GAAI,OAAO,EAAE,UAAU,YAAY;cACjC,aACC,oBAAC;IAAI,OAAO,OAAO;cACjB,oBAAC;KACC,MAAM;KACN,OAAO,YAAY,YAAY;MAC/B;KACE,EAGR,oBAAC;IACQ;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;IACE;EAEL,aAAa,CAAC,gBACb,qBAAC;GAAW,SAAQ;GAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;IAC9D,MAAM;IAAO;IAAE;IAAU;IAAE;;IACjB,GACX;KACA"}
+{"version":3,"file":"TextArea-jpLThSHP.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps): StyleMap {\n  const { height = '8rem', readOnly, startIcon } = props\n\n  const focusRingColor = props.focusedRingColor || 'var(--px-color-info)'\n  const placeHolderColor =\n    props.placeholderColor || 'var(--px-text-placeholder)'\n\n  return styled({\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      borderRadius: '0.5rem',\n      resize: 'none',\n\n      fontWeight: '400',\n      fontSize: '1rem',\n      color: 'var(--px-text-primary)',\n\n      border: '1px solid red',\n      outlineOffset: '-1px',\n\n      cursor: readOnly ? 'default' : undefined,\n      paddingLeft: startIcon ? '2.5rem' : undefined,\n\n      __rules: {\n        '&::placeholder': {\n          color: `${placeHolderColor}`\n        },\n        '&:focus': readOnly\n          ? { outline: 'none' }\n          : { outline: `2px solid ${focusRingColor}` }\n      }\n    }\n  })\n}\n","// External Libraries\nimport { useId } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/Label'\nimport { Icon } from '@components/toolkit/Icon'\nimport { Typography } from '@components/toolkit/Typography'\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    disabled,\n    readOnly,\n    maxLength,\n    hideMaxLength,\n    textMaxLength,\n    placeholder,\n\n    label,\n    required,\n    requiredColor,\n    labelColor,\n    labelWeight,\n    labelVariant,\n\n    startIcon,\n    iconColor\n  } = props\n\n  // Hooks\n  const inputId = useId()\n\n  const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n    pick: p => [\n      p.height,\n      p.readOnly,\n      p.startIcon,\n      p.placeholderColor,\n      p.focusedRingColor\n    ],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Functions\n  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (disabled || readOnly) return\n    props.onChange?.(e.target.value)\n  }\n\n  function renderLabel() {\n    if (!label) return null\n\n    return (\n      <div className=\"flex items-center gap-3\">\n        <Label\n          htmlFor={inputId}\n          label={label}\n          required={required}\n          requiredColor={requiredColor}\n          labelColor={labelColor}\n          labelWeight={labelWeight}\n          labelVariant={labelVariant}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div>\n      {renderLabel()}\n\n      <div style={{ position: 'relative' }}>\n        {startIcon && (\n          <div style={styles.iconContainer}>\n            <Icon\n              name={startIcon}\n              color={iconColor ? iconColor : 'var(--px-text-primary)'}\n            />\n          </div>\n        )}\n\n        <textarea\n          value={value}\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      </div>\n\n      {maxLength && !hideMaxLength ? (\n        <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n          {value.length}/{maxLength} {textMaxLength}\n        </Typography>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EAAE,SAAS,QAAQ,UAAU,cAAc;CAEjD,MAAM,iBAAiB,MAAM,oBAAoB;CACjD,MAAM,mBACJ,MAAM,oBAAoB;AAE5B,QAAO,OAAO;EACZ,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,QAAQ;GACR,eAAe;GAEf,QAAQ,WAAW,YAAY;GAC/B,aAAa,YAAY,WAAW;GAEpC,SAAS;IACP,kBAAkB,EAChB,OAAO,GAAG,oBACX;IACD,WAAW,WACP,EAAE,SAAS,QAAQ,GACnB,EAAE,SAAS,aAAa,kBAAkB;IAC/C;GACF;EACF,CAAC;;;;;AC5BJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,UACA,UACA,WACA,eACA,eACA,aAEA,OACA,UACA,eACA,YACA,aACA,cAEA,WACA,cACE;CAGJ,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GACT,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACH;EACD,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;AAC1B,QAAM,WAAW,EAAE,OAAO,MAAM;;CAGlC,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,SAAS;IACF;IACG;IACK;IACH;IACC;IACC;KACd;IACE;;AAIV,QACE,qBAAC;EACE,aAAa;EAEd,qBAAC;GAAI,OAAO,EAAE,UAAU,YAAY;cACjC,aACC,oBAAC;IAAI,OAAO,OAAO;cACjB,oBAAC;KACC,MAAM;KACN,OAAO,YAAY,YAAY;MAC/B;KACE,EAGR,oBAAC;IACQ;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;IACE;EAEL,aAAa,CAAC,gBACb,qBAAC;GAAW,SAAQ;GAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;IAC9D,MAAM;IAAO;IAAE;IAAU;IAAE;;IACjB,GACX;KACA"}

package/dist/{Typography-CKXLkfw7.js → Typography-BE-vQSfx.js}

@@ -1,4 +1,4 @@
-import { n as useThemedStyles, t as styled } from "./useThemedStyles-68D71Lua.js";
+import { n as styled, r as WEIGHTS, t as useThemedStyles } from "./useThemedStyles-3rUXJYgS.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/toolkit/Typography/config.ts
@@ -8,49 +8,61 @@ const typographyVariants = {
 	h1: {
 		fontSize: "3rem",
 		fontWeight: "700",
-		lineHeight: "1.25",
+		lineHeight: WEIGHTS.bold,
 		color: primaryColor
 	},
 	h2: {
 		fontSize: "2.25rem",
-		fontWeight: "600",
-		lineHeight: "1.35",
+		fontWeight: WEIGHTS.bold,
+		lineHeight: "calc(2.5 / 2.25)",
 		color: primaryColor
 	},
 	h3: {
 		fontSize: "1.875rem",
-		fontWeight: "600",
+		fontWeight: WEIGHTS.bold,
+		lineHeight: "calc(2.25 / 1.875)",
 		color: primaryColor
 	},
 	h4: {
 		fontSize: "1.5rem",
-		fontWeight: "500",
+		fontWeight: WEIGHTS.bold,
+		lineHeight: "calc(2 / 1.5)",
 		color: primaryColor
 	},
 	h5: {
 		fontSize: "1.25rem",
-		fontWeight: "500",
+		fontWeight: WEIGHTS.bold,
+		lineHeight: "calc(1.75 / 1.25)",
 		color: primaryColor
 	},
 	b1: {
 		fontSize: "1rem",
-		fontWeight: "500",
+		fontWeight: WEIGHTS.medium,
+		lineHeight: "1.5",
 		color: primaryColor
 	},
 	b2: {
 		fontSize: "0.875rem",
+		fontWeight: WEIGHTS.medium,
+		lineHeight: "calc(1.25 / 0.875)",
 		color: secondaryColor
 	},
 	b3: {
 		fontSize: "0.75rem",
+		fontWeight: WEIGHTS.medium,
+		lineHeight: "calc(1 / 0.75)",
 		color: secondaryColor
 	},
 	caption: {
-		fontSize: "0.75rem",
+		fontSize: "0.65rem",
+		fontWeight: WEIGHTS.regular,
+		lineHeight: "calc(1 / 0.65)",
 		color: secondaryColor
 	},
 	legal: {
 		fontSize: "0.65rem",
+		lineHeight: "calc(1 / 0.65)",
+		fontWeight: WEIGHTS.light,
 		textTransform: "uppercase",
 		letterSpacing: "0.025em",
 		color: secondaryColor
@@ -106,7 +118,7 @@ function createTypographyStyles(props) {
 //#endregion
 //#region src/components/toolkit/Typography/index.tsx
 function Typography(props) {
-	const { id, as, href, variant, children, placeholder, isLoading = false, styles: styleTypography } = props;
+	const { id, as, href, variant, children, className, placeholder, isLoading = false, styles: styleTypography } = props;
 	const { styles } = useThemedStyles(props, createTypographyStyles, {
 		pick: (p) => [
 			p.isLoading,
@@ -130,7 +142,8 @@ function Typography(props) {
 	const sharedProps = {
 		id,
 		style: styles.text,
-		"aria-label": placeholder
+		"aria-label": placeholder,
+		className
 	};
 	if (href) return /* @__PURE__ */ jsx("a", {
 		href,
@@ -145,4 +158,4 @@ function Typography(props) {
 
 //#endregion
 export { Typography as t };
-//# sourceMappingURL=Typography-CKXLkfw7.js.map
+//# sourceMappingURL=Typography-BE-vQSfx.js.map

package/dist/Typography-BE-vQSfx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography-BE-vQSfx.js","names":["typographyVariants: Record<TypographyVariant, SlotStyle>","variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n>","alignText: Record<TextAlign, SlotStyle>"],"sources":["../src/components/toolkit/Typography/config.ts","../src/components/toolkit/Typography/style.ts","../src/components/toolkit/Typography/index.tsx"],"sourcesContent":["// 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 { isLoading, variant, align = 'left', color } = props\n\n  return styled({\n    base: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      borderBottom: '1px solid var(--pixel-border, #e5e7eb)',\n      gap: 0,\n      animation: isLoading ? 'animate-pulse 1.5s infinite' : undefined\n    },\n\n    loading: {\n      width: '50%',\n      height: '1em',\n      display: 'inline-block',\n      backgroundColor: 'var(--pixel-gray-300, #d1d5db)',\n      borderRadius: '0.25rem'\n    },\n\n    text: {\n      ...alignText[align],\n      ...typographyVariants[variant],\n      color: color ?? typographyVariants[variant].color\n    } as SlotStyle\n  })\n}\n","// Utils\nimport { variantToElement } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTypographyStyles } from './style'\n\nexport function Typography(props: TypographyProps) {\n  const {\n    id,\n    as,\n    href,\n    variant,\n    children,\n    className,\n    placeholder,\n    isLoading = false,\n    styles: styleTypography\n  } = props\n\n  const { styles } = useThemedStyles(props, createTypographyStyles, {\n    pick: p => [p.isLoading, p.variant, p.align],\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    )\n  }\n\n  const sharedProps = {\n    id,\n    style: styles.text,\n    'aria-label': placeholder,\n    className\n  }\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":";;;;AAOA,MAAM,eAAe;AACrB,MAAM,iBAAiB;AAEvB,MAAaA,qBAA2D;CACtE,IAAI;EACF,UAAU;EACV,YAAY;EACZ,YAAY,QAAQ;EACpB,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,IAAI;EACF,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,SAAS;EACP,UAAU;EACV,YAAY,QAAQ;EACpB,YAAY;EACZ,OAAO;EACR;CACD,OAAO;EACL,UAAU;EACV,YAAY;EACZ,YAAY,QAAQ;EACpB,eAAe;EACf,eAAe;EACf,OAAO;EACR;CACF;AAED,MAAaC,mBAGT;CACF,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,OAAO;CACR;AAED,MAAaC,YAA0C;CACrD,MAAM,EAAE,WAAW,QAAQ;CAC3B,QAAQ,EAAE,WAAW,UAAU;CAC/B,OAAO,EAAE,WAAW,SAAS;CAC7B,SAAS,EAAE,WAAW,WAAW;CAClC;;;;ACzFD,SAAgB,uBAAuB,OAAwB;CAC7D,MAAM,EAAE,WAAW,SAAS,QAAQ,QAAQ,UAAU;AAEtD,QAAO,OAAO;EACZ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,YAAY;GACZ,cAAc;GACd,KAAK;GACL,WAAW,YAAY,gCAAgC;GACxD;EAED,SAAS;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,iBAAiB;GACjB,cAAc;GACf;EAED,MAAM;GACJ,GAAG,UAAU;GACb,GAAG,mBAAmB;GACtB,OAAO,SAAS,mBAAmB,SAAS;GAC7C;EACF,CAAC;;;;;ACrBJ,SAAgB,WAAW,OAAwB;CACjD,MAAM,EACJ,IACA,IACA,MACA,SACA,UACA,WACA,aACA,YAAY,OACZ,QAAQ,oBACN;CAEJ,MAAM,EAAE,WAAW,gBAAgB,OAAO,wBAAwB;EAChE,OAAM,MAAK;GAAC,EAAE;GAAW,EAAE;GAAS,EAAE;GAAM;EAC5C,YAAY;EACZ,kBAAkB;EAClB,UAAU;EACX,CAAC;CAEF,MAAM,YAAY,MAAM,iBAAiB;AAEzC,KAAI,UACF,QACE,oBAAC;EACK;EACJ,eAAY;EACZ,MAAK;EACL,OAAO;GAAE,GAAG,OAAO;GAAM,GAAG,OAAO;GAAS;GAC5C;CAIN,MAAM,cAAc;EAClB;EACA,OAAO,OAAO;EACd,cAAc;EACd;EACD;AAED,KAAI,KACF,QACE,oBAAC;EAAQ;EAAM,GAAI;EAChB;GACC;AAIR,QAAO,oBAAC;EAAU,GAAI;EAAc;GAAqB"}

package/dist/button.d.ts

@@ -1,3 +1,3 @@
-import "./types-CdA3IIV2.js";
-import { t as Button } from "./index-R-Kb8ovB.js";
+import "./types-CDUx-y9q.js";
+import { t as Button } from "./index-DOwpBVkM.js";
 export { Button };

package/dist/button.js

@@ -1,5 +1,5 @@
-import "./useThemedStyles-68D71Lua.js";
-import "./Typography-CKXLkfw7.js";
-import { t as Button } from "./Button-nrM-Dn6T.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import { t as Button } from "./Button-CwK9nssQ.js";
 
 export { Button };

package/dist/check-item.js

@@ -1,6 +1,6 @@
-import "./Icon-7fQw74zg.js";
-import "./useThemedStyles-68D71Lua.js";
-import "./Typography-CKXLkfw7.js";
-import { t as CheckItem } from "./CheckItem-Cr8YZFKe.js";
+import "./Icon-Djde8oXI.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import { t as CheckItem } from "./CheckItem-DuJvhDP_.js";
 
 export { CheckItem };

package/dist/checkbox.d.ts

@@ -1,3 +1,3 @@
-import "./types-CdA3IIV2.js";
-import { t as Checkbox } from "./index-Da42fqu3.js";
+import "./types-CDUx-y9q.js";
+import { t as Checkbox } from "./index-DH2bD-Yj.js";
 export { Checkbox };

package/dist/checkbox.js

@@ -1,6 +1,6 @@
-import "./Icon-7fQw74zg.js";
-import "./useThemedStyles-68D71Lua.js";
-import "./Typography-CKXLkfw7.js";
-import { t as Checkbox } from "./Checkbox-BRAE-Kg-.js";
+import "./Icon-Djde8oXI.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import { t as Checkbox } from "./Checkbox-DErw2zDe.js";
 
 export { Checkbox };

package/dist/icon-button.d.ts

@@ -1,2 +1,2 @@
-import { t as IconButton } from "./index-BYZm15m2.js";
+import { t as IconButton } from "./index-CyvtOmP2.js";
 export { IconButton };

package/dist/icon-button.js

@@ -1,4 +1,4 @@
-import "./useThemedStyles-68D71Lua.js";
-import { t as IconButton } from "./IconButton-B7-l2DTb.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import { t as IconButton } from "./IconButton-IhShUhfe.js";
 
 export { IconButton };

package/dist/{index-BrVPSHH2.d.ts → index-BspBF3Mv.d.ts}

@@ -1,5 +1,5 @@
-import { t as StyleMap } from "./useThemedStyles-CXoofBTv.js";
-import { n as TypographyVariant } from "./types-CdA3IIV2.js";
+import { n as StyleMap } from "./useThemedStyles-B7irjShy.js";
+import { n as TypographyVariant } from "./types-CDUx-y9q.js";
 import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/assets/icons/index.d.ts
@@ -45,4 +45,4 @@ interface TextAreaProps {
 declare const TextArea: (props: TextAreaProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=index-BrVPSHH2.d.ts.map
+//# sourceMappingURL=index-BspBF3Mv.d.ts.map

package/dist/{index-BYZm15m2.d.ts → index-CyvtOmP2.d.ts}

@@ -1,4 +1,4 @@
-import { t as StyleMap } from "./useThemedStyles-CXoofBTv.js";
+import { n as StyleMap } from "./useThemedStyles-B7irjShy.js";
 import { MouseEvent, ReactNode } from "react";
 
 //#region src/components/commons/buttons/IconButton/styles.d.ts
@@ -7,20 +7,20 @@ declare function createIconButtonStyles(props: IconButtonProps): StyleMap;
 //#region src/components/commons/buttons/IconButton/types.d.ts
 interface IconButtonProps {
   icon: ReactNode;
-  size?: IconButtonSize;
+  size?: IconButtonSize | (string & {});
   isLoading?: boolean;
   isDisabled?: boolean;
-  variant?: IconButtonVarriant;
+  variant?: IconButtonVariant;
   backgroundColor?: string;
   borderColor?: string;
   styles?: Partial<ReturnType<typeof createIconButtonStyles>>;
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-type IconButtonVarriant = 'filled' | 'outlined' | 'borderless';
+type IconButtonVariant = 'filled' | 'outlined' | 'ghost';
 //#endregion
 //#region src/components/commons/buttons/IconButton/index.d.ts
 declare const IconButton: React.FC<IconButtonProps>;
 //#endregion
 export { IconButton as t };
-//# sourceMappingURL=index-BYZm15m2.d.ts.map
+//# sourceMappingURL=index-CyvtOmP2.d.ts.map

package/dist/{index-Da42fqu3.d.ts → index-DH2bD-Yj.d.ts}

@@ -1,4 +1,4 @@
-import { n as TypographyVariant } from "./types-CdA3IIV2.js";
+import { n as TypographyVariant } from "./types-CDUx-y9q.js";
 import React$1 from "react";
 import { ChecklistAlertResponse } from "@api/checklist/alerts/dtos";
 
@@ -28,4 +28,4 @@ interface CheckboxProps {
 declare const Checkbox: React$1.FC<CheckboxProps>;
 //#endregion
 export { Checkbox as t };
-//# sourceMappingURL=index-Da42fqu3.d.ts.map
+//# sourceMappingURL=index-DH2bD-Yj.d.ts.map

package/dist/{index-R-Kb8ovB.d.ts → index-DOwpBVkM.d.ts}

@@ -1,58 +1,31 @@
-import { i as PaddingProps } from "./styleProps-7WdaXgmQ.js";
-import { n as TypeStyles } from "./useThemedStyles-CXoofBTv.js";
-import { n as TypographyVariant } from "./types-CdA3IIV2.js";
-import React, { ReactNode } from "react";
+import { i as PaddingProps } from "./styleProps-D405c8KF.js";
+import { i as styled, r as TypeStyles } from "./useThemedStyles-B7irjShy.js";
+import { n as TypographyVariant } from "./types-CDUx-y9q.js";
+import React, { MouseEvent, ReactNode } from "react";
 
 //#region src/components/commons/buttons/Button/styles.d.ts
 declare function createButtonStyles({
+  size,
   color,
   variant,
   disabled,
   fullWidth,
   textAlign,
   outlineColor
-}: ButtonProps): {
-  container: {
-    minHeight: string;
-    height: string;
-    width: string;
-    position: "relative";
-    display: "flex";
-    justifyContent: Align;
-    padding: string;
-    gap: string;
-    borderRadius: string;
-    cursor: "not-allowed" | "pointer";
-    opacity: number;
-    transition: "background-color 0.5s";
-    border: string;
-    backgroundColor: string;
-    __rules: {
-      '&:hover': {
-        opacity: "0.85 !important";
-      };
-    };
-  };
-  content: {
-    display: "flex";
-    flexDirection: "row";
-    alignItems: "center";
-    padding: string;
-    borderRadius: string;
-    whiteSpace: "nowrap";
-    columnGap: string;
-  };
-};
+}: ButtonProps): ReturnType<typeof styled>;
 //#endregion
 //#region src/components/commons/buttons/Button/types.d.ts
 type Align = 'center' | 'left' | 'right';
 type ButtonType = 'button' | 'submit' | 'reset';
 type ButtonVariant = 'filled' | 'outlined' | 'ghost';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 interface ButtonProps extends PaddingProps {
   /** Text label displayed inside the button */
   label: string;
   /** Text variant of the button label */
   labelVariant?: TypographyVariant;
+  /** Size of the button */
+  size?: ButtonSize | (string & {});
   /** Icon displayed before the label */
   startIcon?: ReactNode;
   styles?: TypeStyles<typeof createButtonStyles>;
@@ -100,11 +73,11 @@ interface ButtonProps extends PaddingProps {
   /**
    * @description Callback fired when the button is clicked.
    */
-  onClick?: () => void;
+  onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;
 }
 //#endregion
 //#region src/components/commons/buttons/Button/index.d.ts
 declare const Button: React.FC<ButtonProps>;
 //#endregion
 export { Button as t };
-//# sourceMappingURL=index-R-Kb8ovB.d.ts.map
+//# sourceMappingURL=index-DOwpBVkM.d.ts.map

package/dist/{index-C181qAfZ.d.ts → index-DUrGjyKy.d.ts}

@@ -1,7 +1,7 @@
-import { t as CommonStyleProps } from "./styleProps-7WdaXgmQ.js";
-import { t as StyleMap } from "./useThemedStyles-CXoofBTv.js";
+import { t as CommonStyleProps } from "./styleProps-D405c8KF.js";
+import { n as StyleMap } from "./useThemedStyles-B7irjShy.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/toolkit/TabSwitch/styles.d.ts
 declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap;
@@ -27,7 +27,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
 }
 //#endregion
 //#region src/components/toolkit/TabSwitch/index.d.ts
-declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
+declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
-//# sourceMappingURL=index-C181qAfZ.d.ts.map
+//# sourceMappingURL=index-DUrGjyKy.d.ts.map

package/dist/{index-v4w-T_f6.d.ts → index-pnnP9M22.d.ts}

@@ -1,6 +1,6 @@
-import { i as PaddingProps, n as LayoutProps } from "./styleProps-7WdaXgmQ.js";
-import { t as StyleMap } from "./useThemedStyles-CXoofBTv.js";
-import { n as TypographyVariant } from "./types-CdA3IIV2.js";
+import { i as PaddingProps, n as LayoutProps } from "./styleProps-D405c8KF.js";
+import { n as StyleMap } from "./useThemedStyles-B7irjShy.js";
+import { n as TypographyVariant } from "./types-CDUx-y9q.js";
 import React, { ReactNode } from "react";
 
 //#region src/components/commons/inputs/Input/styles.d.ts
@@ -46,4 +46,4 @@ interface InputProps extends LayoutProps, PaddingProps {
 declare const Input: React.FC<InputProps>;
 //#endregion
 export { Input as t };
-//# sourceMappingURL=index-v4w-T_f6.d.ts.map
+//# sourceMappingURL=index-pnnP9M22.d.ts.map

package/dist/index.d.ts

@@ -1,12 +1,12 @@
-import "./types-CdA3IIV2.js";
-import { t as Button } from "./index-R-Kb8ovB.js";
-import { t as IconButton } from "./index-BYZm15m2.js";
-import { t as Input } from "./index-v4w-T_f6.js";
-import { t as TextArea } from "./index-BrVPSHH2.js";
+import "./types-CDUx-y9q.js";
+import { t as Button } from "./index-DOwpBVkM.js";
+import { t as IconButton } from "./index-CyvtOmP2.js";
+import { t as Input } from "./index-pnnP9M22.js";
+import { t as TextArea } from "./index-BspBF3Mv.js";
 import { t as CheckItem } from "./index-akSk71wZ.js";
-import { t as Checkbox } from "./index-Da42fqu3.js";
+import { t as Checkbox } from "./index-DH2bD-Yj.js";
 import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-C181qAfZ.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-DUrGjyKy.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-CIxyqe-m.js";
 export { Button, CheckItem, Checkbox, IconButton, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, SwitchOption, TabSwitch, TabSwitchProps, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useTheme };

package/dist/index.js

@@ -1,15 +1,15 @@
-import "./Icon-7fQw74zg.js";
-import "./useThemedStyles-68D71Lua.js";
-import { t as Typography } from "./Typography-CKXLkfw7.js";
-import { t as Checkbox } from "./Checkbox-BRAE-Kg-.js";
+import "./Icon-Djde8oXI.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import { t as Typography } from "./Typography-BE-vQSfx.js";
+import { t as Checkbox } from "./Checkbox-DErw2zDe.js";
 import { n as useTheme, t as ThemeProvider } from "./ThemeContext-BsU2ZyE5.js";
-import { t as TabSwitch } from "./TabSwitch-Ce-uQvRp.js";
-import { t as InfoSummary } from "./InfoSummary-D2ER39sF.js";
-import { t as CheckItem } from "./CheckItem-Cr8YZFKe.js";
-import { t as Button } from "./Button-nrM-Dn6T.js";
-import { t as IconButton } from "./IconButton-B7-l2DTb.js";
-import "./Label-1Gh2DlKl.js";
-import { t as Input } from "./Input-BR3ZaetX.js";
-import { t as TextArea } from "./TextArea-BsErpaMx.js";
+import { t as TabSwitch } from "./TabSwitch-De30bFX2.js";
+import { t as InfoSummary } from "./InfoSummary-BwrLkEfC.js";
+import { t as CheckItem } from "./CheckItem-DuJvhDP_.js";
+import { t as Button } from "./Button-CwK9nssQ.js";
+import { t as IconButton } from "./IconButton-IhShUhfe.js";
+import "./Label-QQpNWSeV.js";
+import { t as Input } from "./Input-C7WKOO_t.js";
+import { t as TextArea } from "./TextArea-jpLThSHP.js";
 
 export { Button, CheckItem, Checkbox, IconButton, InfoSummary, Input, TabSwitch, TextArea, ThemeProvider, Typography, useTheme };

package/dist/info-summary.js

@@ -1,5 +1,5 @@
-import "./useThemedStyles-68D71Lua.js";
-import "./Typography-CKXLkfw7.js";
-import { t as InfoSummary } from "./InfoSummary-D2ER39sF.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import { t as InfoSummary } from "./InfoSummary-BwrLkEfC.js";
 
 export { InfoSummary };

package/dist/input.d.ts

@@ -1,3 +1,3 @@
-import "./types-CdA3IIV2.js";
-import { t as Input } from "./index-v4w-T_f6.js";
+import "./types-CDUx-y9q.js";
+import { t as Input } from "./index-pnnP9M22.js";
 export { Input };

package/dist/input.js

@@ -1,7 +1,7 @@
-import "./Icon-7fQw74zg.js";
-import "./useThemedStyles-68D71Lua.js";
-import "./Typography-CKXLkfw7.js";
-import "./Label-1Gh2DlKl.js";
-import { t as Input } from "./Input-BR3ZaetX.js";
+import "./Icon-Djde8oXI.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import "./Label-QQpNWSeV.js";
+import { t as Input } from "./Input-C7WKOO_t.js";
 
 export { Input };

package/dist/{styleProps-7WdaXgmQ.d.ts → styleProps-D405c8KF.d.ts}

@@ -19,10 +19,17 @@ interface PaddingProps {
   pb?: Space;
   pl?: Space;
 }
+interface FontWeights {
+  light: number;
+  regular: number;
+  medium: number;
+  bold: number;
+  black: number;
+}
 interface TextProps {
   fontSize?: number | string;
-  fontWeight?: React.CSSProperties['fontWeight'];
   lineHeight?: number | string;
+  fontWeight?: keyof FontWeights | (number & {});
   textAlign?: React.CSSProperties['textAlign'];
 }
 interface LayoutProps {
@@ -36,4 +43,4 @@ interface LayoutProps {
 type CommonStyleProps = MarginProps & PaddingProps & TextProps & LayoutProps;
 //#endregion
 export { TextProps as a, PaddingProps as i, LayoutProps as n, MarginProps as r, CommonStyleProps as t };
-//# sourceMappingURL=styleProps-7WdaXgmQ.d.ts.map
+//# sourceMappingURL=styleProps-D405c8KF.d.ts.map

package/dist/tab-switch.d.ts

@@ -1,2 +1,2 @@
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-C181qAfZ.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-DUrGjyKy.js";
 export { SwitchOption, TabSwitch, TabSwitchProps };

package/dist/tab-switch.js

@@ -1,5 +1,5 @@
-import "./useThemedStyles-68D71Lua.js";
-import "./Typography-CKXLkfw7.js";
-import { t as TabSwitch } from "./TabSwitch-Ce-uQvRp.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import { t as TabSwitch } from "./TabSwitch-De30bFX2.js";
 
 export { TabSwitch };

package/dist/text-area.d.ts

@@ -1,3 +1,3 @@
-import "./types-CdA3IIV2.js";
-import { t as TextArea } from "./index-BrVPSHH2.js";
+import "./types-CDUx-y9q.js";
+import { t as TextArea } from "./index-BspBF3Mv.js";
 export { TextArea };

package/dist/text-area.js

@@ -1,7 +1,7 @@
-import "./Icon-7fQw74zg.js";
-import "./useThemedStyles-68D71Lua.js";
-import "./Typography-CKXLkfw7.js";
-import "./Label-1Gh2DlKl.js";
-import { t as TextArea } from "./TextArea-BsErpaMx.js";
+import "./Icon-Djde8oXI.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import "./Label-QQpNWSeV.js";
+import { t as TextArea } from "./TextArea-jpLThSHP.js";
 
 export { TextArea };