softable-pixels-web 1.2.36 → 1.2.37

package/dist/{TextArea-s6HdNSc5.js.map → TextArea-BMJWFF3y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TextArea-s6HdNSc5.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-BMJWFF3y.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-u0BPHgCr.js → Typography-CcQTHV-F.js}

@@ -16,8 +16,8 @@ const secondaryColor = "var(--px-text-secondary)";
 const typographyVariants = {
 	h1: {
 		fontSize: "3rem",
-		fontWeight: "700",
-		lineHeight: WEIGHTS.bold,
+		fontWeight: WEIGHTS.bold,
+		lineHeight: "1",
 		color: primaryColor
 	},
 	h2: {
@@ -172,4 +172,4 @@ const Typography = (props) => {
 
 //#endregion
 export { Typography as t };
-//# sourceMappingURL=Typography-u0BPHgCr.js.map
+//# sourceMappingURL=Typography-CcQTHV-F.js.map

package/dist/Typography-CcQTHV-F.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography-CcQTHV-F.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: WEIGHTS.bold,\n    lineHeight: '1',\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, labelLineThrough = false } = 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      ...(labelLineThrough && {\n        textDecoration: 'line-through',\n        opacity: 0.6\n      })\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, p.labelLineThrough],\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":";;;;AAAA,SAAgB,eAAe,SAA0B,MAAc;CACrE,MAAM,cAAc,OAAO,YAAY,WAAW,QAAQ,SAAS;CACnE,MAAM,YAAY,KAAK,IAAI,aAAa,KAAK;AAE7C,KAAI,cAAc,EAAG,QAAO;AAE5B,QAAO,IAAI,OAAO,UAAU;;;;;ACC9B,MAAM,eAAe;AACrB,MAAM,iBAAiB;AAEvB,MAAaA,qBAA2D;CACtE,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,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,SAAS,QAAQ,QAAQ,OAAO,mBAAmB,UAAU;AAErE,QAAO,OAAO;EACZ,SAAS;GACP,OAAO;GACP,SAAS;GACT,cAAc;GAEd,YAAY;GACZ,gBAAgB;GAChB,WAAW;GACX,OAAO;GAEP,aAAa,EACX,UAAU;IACR,MAAM,EAAE,oBAAoB,UAAU;IACtC,OAAO,EAAE,oBAAoB,YAAY;IACzC,QAAQ,EAAE,oBAAoB,UAAU;IACzC,EACF;GACF;EAED,MAAM;GACJ,GAAG,UAAU;GACb,GAAG,mBAAmB;GACtB,OAAO,SAAS,mBAAmB,SAAS;GAC5C,GAAI,oBAAoB;IACtB,gBAAgB;IAChB,SAAS;IACV;GACF;EACF,CAAC;;;;;ACvBJ,MAAaC,cAAwC,UAAS;CAC5D,MAAM,EACJ,IACA,IACA,MACA,SACA,UACA,WACA,YAAY,OACZ,kBAAkB,GAClB,QAAQ,oBACN;CAEJ,MAAM,EAAE,WAAW,gBAAgB,OAAO,wBAAwB;EAChE,OAAM,MAAK;GAAC,EAAE;GAAW,EAAE;GAAS,EAAE;GAAO,EAAE;GAAO,EAAE;GAAiB;EACzE,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;YAE3C,eAAe,UAAU,gBAAgB;GACrC;CAIX,MAAM,cAAc;EAAE;EAAI,OAAO,OAAO;EAAM;EAAW;AAEzD,KAAI,KACF,QACE,oBAAC;EAAQ;EAAM,GAAI;EAChB;GACC;AAIR,QAAO,oBAAC;EAAU,GAAI;EAAc;GAAqB"}

package/dist/breadcrumb.js

@@ -1,6 +1,6 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
+import "./Typography-CcQTHV-F.js";
 import "./Skeleton-pvWAx_gn.js";
-import { t as Breadcrumb } from "./Breadcrumb--lRHi6sr.js";
+import { t as Breadcrumb } from "./Breadcrumb-BjO7RVR0.js";
 
 export { Breadcrumb };

package/dist/button.js

@@ -1,6 +1,6 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
+import "./Typography-CcQTHV-F.js";
 import "./Loader-BTp8PCMz.js";
-import { t as Button } from "./Button-QcKlQyM3.js";
+import { t as Button } from "./Button-CWZvWbMh.js";
 
 export { Button };

package/dist/check-item.js

@@ -1,6 +1,6 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
+import "./Typography-CcQTHV-F.js";
 import "./Icon-bV19y393.js";
-import { t as CheckItem } from "./CheckItem-C2NriXyN.js";
+import { t as CheckItem } from "./CheckItem-CE27veSs.js";
 
 export { CheckItem };

package/dist/checkbox.js

@@ -1,6 +1,6 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
+import "./Typography-CcQTHV-F.js";
 import "./Icon-bV19y393.js";
-import { t as Checkbox } from "./Checkbox-qoUWy3Nj.js";
+import { t as Checkbox } from "./Checkbox-DWlmddP3.js";
 
 export { Checkbox };

package/dist/chip-list.js

@@ -1,8 +1,8 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
-import "./Chip-DJVwuXlv.js";
-import "./Label-VE3hoSbt.js";
+import "./Typography-CcQTHV-F.js";
+import "./Chip-0yO5bwim.js";
+import "./Label-CBUa-x13.js";
 import "./ErrorMessage-6pG4hFId.js";
-import { t as ChipList } from "./ChipList-D7J-hTLW.js";
+import { t as ChipList } from "./ChipList-CmO2ctak.js";
 
 export { ChipList };

package/dist/chip.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
-import { n as types_exports, t as Chip } from "./Chip-DJVwuXlv.js";
+import "./Typography-CcQTHV-F.js";
+import { n as types_exports, t as Chip } from "./Chip-0yO5bwim.js";
 
 export { Chip, types_exports as ChipTypes };

package/dist/color-picker.js

@@ -1,8 +1,8 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
-import "./Label-VE3hoSbt.js";
+import "./Typography-CcQTHV-F.js";
+import "./Label-CBUa-x13.js";
 import "./ErrorMessage-6pG4hFId.js";
-import { n as types_exports, t as ColorPicker } from "./ColorPicker-sqs31Md7.js";
+import { n as types_exports, t as ColorPicker } from "./ColorPicker-BBTuW0Bp.js";
 import "./Skeleton-pvWAx_gn.js";
 
 export { ColorPicker, types_exports as ColorPickerTypes };

package/dist/context-menu.js

@@ -1,10 +1,10 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
-import "./Switch-DlZXMyGG.js";
+import "./Typography-CcQTHV-F.js";
+import "./Switch-D3Eitmnj.js";
 import "./useDismiss-Dpzg5Xpf.js";
 import "./useFloating-D-2IDIWG.js";
 import "./Popover-BV_1hBez.js";
 import "./BasePopover-CY-9StFD.js";
-import { n as types_exports, t as ContextMenu } from "./ContextMenu-CrVwvqGG.js";
+import { n as types_exports, t as ContextMenu } from "./ContextMenu-_72bEVKL.js";
 
 export { ContextMenu, types_exports as ContextMenuTypes };

package/dist/date-picker.js

@@ -1,15 +1,15 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
+import "./Typography-CcQTHV-F.js";
 import "./useDismiss-Dpzg5Xpf.js";
 import "./useFloating-D-2IDIWG.js";
 import "./Popover-BV_1hBez.js";
 import "./Icon-bV19y393.js";
-import { n as types_exports, t as DatePicker } from "./DatePicker-0xnJwcp2.js";
+import { n as types_exports, t as DatePicker } from "./DatePicker-znH0ZAdX.js";
 import "./BasePopover-CY-9StFD.js";
-import "./Label-VE3hoSbt.js";
+import "./Label-CBUa-x13.js";
 import "./ErrorMessage-6pG4hFId.js";
 import "./Loader-BTp8PCMz.js";
-import "./Button-QcKlQyM3.js";
+import "./Button-CWZvWbMh.js";
 import "./MaskModule-DZko7F_e.js";
 
 export { DatePicker, types_exports as DatePickerTypes };

package/dist/file-input.js

@@ -1,8 +1,8 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
+import "./Typography-CcQTHV-F.js";
 import "./Icon-bV19y393.js";
-import "./Label-VE3hoSbt.js";
+import "./Label-CBUa-x13.js";
 import "./ErrorMessage-6pG4hFId.js";
-import { n as types_exports, t as FileInput } from "./FileInput-CfUBqmTu.js";
+import { n as types_exports, t as FileInput } from "./FileInput-BXK9H8Ar.js";
 
 export { FileInput, types_exports as FileInputTypes };

package/dist/{index-BBmC9Lfb.d.ts → index-BQRzf4rc.d.ts}

@@ -1,7 +1,7 @@
 import { t as CommonStyleProps } from "./styleProps-Bq2PkDym.js";
 import { r as TypeStyles } from "./useThemedStyles-DoHwc6h5.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/TabSwitch/styles.d.ts
 declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): {
@@ -47,7 +47,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
 }
 //#endregion
 //#region src/components/commons/toolkit/TabSwitch/index.d.ts
-declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime1.JSX.Element;
+declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { types_d_exports as n, TabSwitch as t };
-//# sourceMappingURL=index-BBmC9Lfb.d.ts.map
+//# sourceMappingURL=index-BQRzf4rc.d.ts.map

package/dist/{index-j6W-PwB7.d.ts → index-BmFKokpv.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;
@@ -106,4 +106,4 @@ interface SelectOption {
 declare const Select: React$1.FC<SelectProps>;
 //#endregion
 export { types_d_exports as n, Select as t };
-//# sourceMappingURL=index-j6W-PwB7.d.ts.map
+//# sourceMappingURL=index-BmFKokpv.d.ts.map

package/dist/{index-Q90gI7Q2.d.ts → index-BxDK_Go8.d.ts}

@@ -1,6 +1,6 @@
 import { a as TextProps } from "./styleProps-Bq2PkDym.js";
 import { r as TypeStyles } from "./useThemedStyles-DoHwc6h5.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-Q90gI7Q2.d.ts.map
+//# sourceMappingURL=index-BxDK_Go8.d.ts.map

package/dist/{index-qPJuO65u.d.ts → index-C22JJ_rW.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;
@@ -108,4 +108,4 @@ interface InputMethods {
 declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<InputMethods>>;
 //#endregion
 export { Input as t };
-//# sourceMappingURL=index-qPJuO65u.d.ts.map
+//# sourceMappingURL=index-C22JJ_rW.d.ts.map

package/dist/index.d.ts

@@ -6,11 +6,11 @@ import { n as types_d_exports$5 } from "./types-vfa_y8KH.js";
 import { n as types_d_exports$3, t as DatePicker } from "./index-BaTeJXMP.js";
 import { n as types_d_exports$4, t as FileInput } from "./index-DDF3jbpO.js";
 import { n as Locale, r as MaskType, t as MaskModule } from "./index-CSRzYxDc.js";
-import { t as Input } from "./index-qPJuO65u.js";
+import { t as Input } from "./index-C22JJ_rW.js";
 import { t as SearchInput } from "./index-MyZ_XVsH.js";
-import { n as types_d_exports$6, t as Select } from "./index-j6W-PwB7.js";
+import { n as types_d_exports$6, t as Select } from "./index-BmFKokpv.js";
 import { t as index_d_exports } from "./index-CriBmhqv.js";
-import { t as TextArea } from "./index-Q90gI7Q2.js";
+import { t as TextArea } from "./index-BxDK_Go8.js";
 import { t as Popover } from "./index-tivXt3ba.js";
 import { t as BasePopover } from "./index-BKsKKh1p.js";
 import { t as Breadcrumb } from "./index-CBHEtmuG.js";
@@ -25,7 +25,7 @@ import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.j
 import { t as Pagination } from "./index-D5kC89SC.js";
 import { ScrollPaginationContainer } from "./scroll-pagination-container.js";
 import { t as Switch } from "./index-DoLWDzDX.js";
-import { n as types_d_exports$7, t as TabSwitch } from "./index-BBmC9Lfb.js";
+import { n as types_d_exports$7, t as TabSwitch } from "./index-BQRzf4rc.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-DPmfBsga.js";
 import { useDismiss } from "./use-dismiss.js";

package/dist/index.js

@@ -1,36 +1,36 @@
 import "./useThemedStyles-Dco_54KA.js";
-import { t as Typography } from "./Typography-u0BPHgCr.js";
-import { t as Switch } from "./Switch-DlZXMyGG.js";
+import { t as Typography } from "./Typography-CcQTHV-F.js";
+import { t as Switch } from "./Switch-D3Eitmnj.js";
 import { t as useDismiss } from "./useDismiss-Dpzg5Xpf.js";
 import { t as useFloating } from "./useFloating-D-2IDIWG.js";
 import { n as types_exports$5, t as Popover } from "./Popover-BV_1hBez.js";
 import "./Icon-bV19y393.js";
-import { t as Checkbox } from "./Checkbox-qoUWy3Nj.js";
-import { n as types_exports$3, t as DatePicker } from "./DatePicker-0xnJwcp2.js";
+import { t as Checkbox } from "./Checkbox-DWlmddP3.js";
+import { n as types_exports$3, t as DatePicker } from "./DatePicker-znH0ZAdX.js";
 import { n as useTheme, t as ThemeProvider } from "./ThemeContext-CRVo1wLa.js";
-import { n as types_exports$7, t as Select } from "./Select-ChVwX-7Z.js";
-import { n as types_exports$8, t as TabSwitch } from "./TabSwitch-Co6kaDbi.js";
-import { t as CheckItem } from "./CheckItem-C2NriXyN.js";
-import { t as InfoSummary } from "./InfoSummary-B6k4_vpG.js";
+import { n as types_exports$7, t as Select } from "./Select-CTEWtbKT.js";
+import { n as types_exports$8, t as TabSwitch } from "./TabSwitch-UPXOZTf4.js";
+import { t as CheckItem } from "./CheckItem-CE27veSs.js";
+import { t as InfoSummary } from "./InfoSummary-D8x-t44q.js";
 import { t as BasePopover } from "./BasePopover-CY-9StFD.js";
-import { n as types_exports$2, t as ContextMenu } from "./ContextMenu-CrVwvqGG.js";
-import { n as types_exports, t as Chip } from "./Chip-DJVwuXlv.js";
-import "./Label-VE3hoSbt.js";
+import { n as types_exports$2, t as ContextMenu } from "./ContextMenu-_72bEVKL.js";
+import { n as types_exports, t as Chip } from "./Chip-0yO5bwim.js";
+import "./Label-CBUa-x13.js";
 import "./ErrorMessage-6pG4hFId.js";
-import { t as ChipList } from "./ChipList-D7J-hTLW.js";
+import { t as ChipList } from "./ChipList-CmO2ctak.js";
 import { t as IconButton } from "./IconButton-R8wpGZU_.js";
-import { t as Pagination } from "./Pagination-DV4VUQj_.js";
+import { t as Pagination } from "./Pagination-i2_x464D.js";
 import "./Loader-BTp8PCMz.js";
-import { t as Button } from "./Button-QcKlQyM3.js";
+import { t as Button } from "./Button-CWZvWbMh.js";
 import { n as types_exports$6, t as ScrollPaginationContainer } from "./ScrollPaginationContainer-isAA4BsG.js";
 import { c as MaskModule, o as Locale, s as MaskType } from "./MaskModule-DZko7F_e.js";
-import { t as Input } from "./Input-BLnysNxN.js";
-import { t as TextArea } from "./TextArea-s6HdNSc5.js";
-import { t as SearchInput } from "./SearchInput-vI-WcTPT.js";
-import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-sqs31Md7.js";
+import { t as Input } from "./Input-BbQajtvC.js";
+import { t as TextArea } from "./TextArea-BMJWFF3y.js";
+import { t as SearchInput } from "./SearchInput-zePMheJK.js";
+import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-BBTuW0Bp.js";
 import { t as Skeleton } from "./Skeleton-pvWAx_gn.js";
-import { n as types_exports$4, t as FileInput } from "./FileInput-CfUBqmTu.js";
+import { n as types_exports$4, t as FileInput } from "./FileInput-BXK9H8Ar.js";
 import { useVirtualAnchor } from "./use-virtual-anchor.js";
-import { t as Breadcrumb } from "./Breadcrumb--lRHi6sr.js";
+import { t as Breadcrumb } from "./Breadcrumb-BjO7RVR0.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, FileInput, types_exports$4 as FileInputTypes, IconButton, InfoSummary, Input, Locale, MaskModule, MaskType, Pagination, Popover, types_exports$5 as PopoverTypes, ScrollPaginationContainer, types_exports$6 as ScrollPaginationContainerTypes, SearchInput, Select, types_exports$7 as SelectTypes, Skeleton, Switch, TabSwitch, types_exports$8 as TabSwitchTypes, TextArea, ThemeProvider, Typography, useDismiss, useFloating, useTheme, useVirtualAnchor };

package/dist/info-summary.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
-import { t as InfoSummary } from "./InfoSummary-B6k4_vpG.js";
+import "./Typography-CcQTHV-F.js";
+import { t as InfoSummary } from "./InfoSummary-D8x-t44q.js";
 
 export { InfoSummary };

package/dist/input.d.ts

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

package/dist/input.js

@@ -1,9 +1,9 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
+import "./Typography-CcQTHV-F.js";
 import "./Icon-bV19y393.js";
-import "./Label-VE3hoSbt.js";
+import "./Label-CBUa-x13.js";
 import "./ErrorMessage-6pG4hFId.js";
 import "./MaskModule-DZko7F_e.js";
-import { t as Input } from "./Input-BLnysNxN.js";
+import { t as Input } from "./Input-BbQajtvC.js";
 
 export { Input };

package/dist/pagination.js

@@ -1,9 +1,9 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
+import "./Typography-CcQTHV-F.js";
 import "./Icon-bV19y393.js";
 import "./IconButton-R8wpGZU_.js";
-import { t as Pagination } from "./Pagination-DV4VUQj_.js";
+import { t as Pagination } from "./Pagination-i2_x464D.js";
 import "./Loader-BTp8PCMz.js";
-import "./Button-QcKlQyM3.js";
+import "./Button-CWZvWbMh.js";
 
 export { Pagination };

package/dist/searchInput.js

@@ -1,7 +1,7 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
+import "./Typography-CcQTHV-F.js";
 import "./Icon-bV19y393.js";
-import "./Label-VE3hoSbt.js";
-import { t as SearchInput } from "./SearchInput-vI-WcTPT.js";
+import "./Label-CBUa-x13.js";
+import { t as SearchInput } from "./SearchInput-zePMheJK.js";
 
 export { SearchInput };

package/dist/select.d.ts

@@ -1,4 +1,4 @@
 import "./types-vfa_y8KH.js";
-import { n as types_d_exports, t as Select } from "./index-j6W-PwB7.js";
+import { n as types_d_exports, t as Select } from "./index-BmFKokpv.js";
 import "./index-CriBmhqv.js";
 export { Select, types_d_exports as SelectTypes };

package/dist/select.js

@@ -1,16 +1,16 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
+import "./Typography-CcQTHV-F.js";
 import "./useDismiss-Dpzg5Xpf.js";
 import "./useFloating-D-2IDIWG.js";
 import "./Popover-BV_1hBez.js";
 import "./Icon-bV19y393.js";
-import { n as types_exports, t as Select } from "./Select-ChVwX-7Z.js";
+import { n as types_exports, t as Select } from "./Select-CTEWtbKT.js";
 import "./BasePopover-CY-9StFD.js";
-import "./Label-VE3hoSbt.js";
+import "./Label-CBUa-x13.js";
 import "./ErrorMessage-6pG4hFId.js";
 import "./Loader-BTp8PCMz.js";
 import "./ScrollPaginationContainer-isAA4BsG.js";
 import "./MaskModule-DZko7F_e.js";
-import "./Input-BLnysNxN.js";
+import "./Input-BbQajtvC.js";
 
 export { Select, types_exports as SelectTypes };

package/dist/switch.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
-import { t as Switch } from "./Switch-DlZXMyGG.js";
+import "./Typography-CcQTHV-F.js";
+import { t as Switch } from "./Switch-D3Eitmnj.js";
 
 export { Switch };

package/dist/tab-switch.d.ts

@@ -1,2 +1,2 @@
-import { n as types_d_exports, t as TabSwitch } from "./index-BBmC9Lfb.js";
+import { n as types_d_exports, t as TabSwitch } from "./index-BQRzf4rc.js";
 export { TabSwitch, types_d_exports as TabSwitchTypes };

package/dist/tab-switch.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
-import { n as types_exports, t as TabSwitch } from "./TabSwitch-Co6kaDbi.js";
+import "./Typography-CcQTHV-F.js";
+import { n as types_exports, t as TabSwitch } from "./TabSwitch-UPXOZTf4.js";
 
 export { TabSwitch, types_exports as TabSwitchTypes };

package/dist/text-area.d.ts

@@ -1,2 +1,2 @@
-import { t as TextArea } from "./index-Q90gI7Q2.js";
+import { t as TextArea } from "./index-BxDK_Go8.js";
 export { TextArea };

package/dist/text-area.js

@@ -1,7 +1,7 @@
 import "./useThemedStyles-Dco_54KA.js";
-import "./Typography-u0BPHgCr.js";
-import "./Label-VE3hoSbt.js";
+import "./Typography-CcQTHV-F.js";
+import "./Label-CBUa-x13.js";
 import "./ErrorMessage-6pG4hFId.js";
-import { t as TextArea } from "./TextArea-s6HdNSc5.js";
+import { t as TextArea } from "./TextArea-BMJWFF3y.js";
 
 export { TextArea };

package/dist/typography.js

@@ -1,4 +1,4 @@
 import "./useThemedStyles-Dco_54KA.js";
-import { t as Typography } from "./Typography-u0BPHgCr.js";
+import { t as Typography } from "./Typography-CcQTHV-F.js";
 
 export { Typography };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.2.36",
+  "version": "1.2.37",
   "description": "",
   "keywords": [],
   "author": "softable",

package/dist/Typography-u0BPHgCr.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Typography-u0BPHgCr.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, labelLineThrough = false } = 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      ...(labelLineThrough && {\n        textDecoration: 'line-through',\n        opacity: 0.6\n      })\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, p.labelLineThrough],\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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"}