softable-pixels-web 1.1.1 → 1.1.4

package/dist/{Button-CwK9nssQ.js → Button-CsXcjd9w.js}

@@ -86,7 +86,6 @@ function createButtonStyles({ size, color, variant, disabled, fullWidth, textAli
 	const finalVariant = variant ?? "filled";
 	return styled({
 		container: {
-			minHeight: "2rem",
 			...getSize(size || "md"),
 			width: fullWidth ? "100%" : "fit-content",
 			position: "relative",
@@ -95,12 +94,18 @@ function createButtonStyles({ size, color, variant, disabled, fullWidth, textAli
 			padding: "10px var(--px-space-xl)",
 			gap: "var(--px-space-sm)",
 			borderRadius: "var(--px-radius-md)",
-			cursor: disabled ? "not-allowed" : "pointer",
-			opacity: disabled ? .5 : 1,
+			cursor: "pointer",
 			transition: "background-color 0.5s",
 			border: getBorder(finalVariant, outlineColor || color),
 			backgroundColor: getBackgroundColor(finalVariant, color),
-			__rules: { "&:hover": { opacity: "0.85 !important" } }
+			boxShadow: variant === "outlined" ? `0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D` : "none",
+			__rules: {
+				"&:hover": { opacity: "0.85 !important" },
+				"&:disabled": {
+					opacity: "0.5 !important",
+					cursor: "not-allowed !important"
+				}
+			}
 		},
 		content: {
 			display: "flex",
@@ -115,11 +120,11 @@ function createButtonStyles({ size, color, variant, disabled, fullWidth, textAli
 }
 function getSize(size) {
 	switch (size) {
-		case "lg": return { height: "3.25rem" };
-		case "md": return { height: "2.75rem" };
-		case "sm": return { height: "2.25rem" };
-		case "xs": return { height: "1.75rem" };
-		default: return { height: size };
+		case "lg": return { minHeight: "3.25rem" };
+		case "md": return { minHeight: "2.75rem" };
+		case "sm": return { minHeight: "2.25rem" };
+		case "xs": return { minHeight: "1.75rem" };
+		default: return { minHeight: size };
 	}
 }
 function getBackgroundColor(variant, color) {
@@ -167,9 +172,9 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
 			p.color
 		]
 	});
-	function handleButtonClick() {
+	function handleButtonClick(event) {
 		if (disabled) return;
-		if (rest.onClick) rest.onClick();
+		if (rest.onClick) rest.onClick(event);
 	}
 	return /* @__PURE__ */ jsx("button", {
 		type,
@@ -183,7 +188,7 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
 			children: [
 				startIcon ?? null,
 				/* @__PURE__ */ jsx(Typography, {
-					variant: "b1",
+					variant: rest.labelVariant || "b1",
 					color: textColor,
 					children: label
 				}),
@@ -196,4 +201,4 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
 
 //#endregion
 export { Button as t };
-//# sourceMappingURL=Button-CwK9nssQ.js.map
+//# sourceMappingURL=Button-CsXcjd9w.js.map

package/dist/Button-CsXcjd9w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-CsXcjd9w.js","names":["getBorder","createButtonLoaderStyles","getBorder","Loader: React.FC<LoaderProps>","createButtonLoaderStyles","ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/utils/animations/spiner.ts","../src/components/toolkit/Loader/constants.ts","../src/components/toolkit/Loader/utils.ts","../src/components/toolkit/Loader/styles.ts","../src/components/toolkit/Loader/index.tsx","../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["export const SPINNER_ANIMATION = {\n  animate: { rotate: 360 },\n  transition: {\n    repeat: Infinity,\n    duration: 1,\n    ease: 'linear'\n  }\n}\n","const DEFAULT_SIZE = '20px'\nconst DEFAULT_THICKNESS = '2px'\n\nconst DEFAULT_COLOR = 'white'\nconst DEFAULT_EMPTY_COLOR = 'transparent'\n\nexport { DEFAULT_SIZE, DEFAULT_THICKNESS, DEFAULT_COLOR, DEFAULT_EMPTY_COLOR }\n","// Utils\nimport { DEFAULT_THICKNESS, DEFAULT_EMPTY_COLOR } from './constants'\n\n// Types\nimport type { LoaderProps } from './types'\n\nexport function getBorder(props: LoaderProps) {\n  const thickness = props.thickness || DEFAULT_THICKNESS\n  const emptyColor = props.emptyColor || DEFAULT_EMPTY_COLOR\n\n  return `${thickness} solid ${emptyColor}`\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { LoaderProps } from './types'\nimport { getBorder } from './utils'\nimport { DEFAULT_COLOR, DEFAULT_SIZE } from './constants'\n\nexport function createButtonLoaderStyles(props: LoaderProps): StyleMap {\n  return styled({\n    container: {\n      display: ' inline-block',\n\n      width: props.size || DEFAULT_SIZE,\n      height: props.size || DEFAULT_SIZE,\n\n      borderRadius: '50%',\n      border: getBorder(props),\n      borderLeftColor: props.color || DEFAULT_COLOR\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { SPINNER_ANIMATION } from '@utils/animations'\n\n// Types\nimport type { LoaderProps } from './types'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\nexport const Loader: React.FC<LoaderProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      role=\"status\"\n      aria-label=\"Loading\"\n      style={styles.container}\n      {...SPINNER_ANIMATION}\n    />\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n  return styled({\n    container: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      borderRadius: 'var(--px-border-radius-button)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n  color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      style={styles.container}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n    >\n      <Loader color={color} />\n    </motion.div>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\nimport type { CSSProperties } from 'react'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  disabled,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps): ReturnType<typeof styled> {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      ...getSize(size || 'md'),\n\n      width: fullWidth ? '100%' : 'fit-content',\n\n      position: 'relative',\n      display: 'flex',\n      justifyContent: textAlign || 'center',\n\n      padding: '10px var(--px-space-xl)',\n      gap: 'var(--px-space-sm)',\n\n      borderRadius: 'var(--px-radius-md)',\n\n      cursor: 'pointer',\n\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n\n      boxShadow:\n        variant === 'outlined'\n          ? `0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D`\n          : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        }\n      }\n    },\n\n    content: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n\n      padding: '0',\n      borderRadius: 'inherit',\n\n      whiteSpace: 'nowrap',\n      columnGap: 'var(--px-space-sm)'\n    }\n  })\n}\n\nfunction getSize(size: ButtonSize | string): CSSProperties {\n  switch (size) {\n    case 'lg':\n      return { minHeight: '3.25rem' }\n    case 'md':\n      return { minHeight: '2.75rem' }\n    case 'sm':\n      return { minHeight: '2.25rem' }\n    case 'xs':\n      return { minHeight: '1.75rem' }\n    default:\n      return { minHeight: size }\n  }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return 'transparent'\n\n  if (variant === 'ghost') return 'transparent'\n\n  return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n  if (variant === 'ghost') return 'none'\n\n  return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps) {\n  if (labelColor) return labelColor\n\n  if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n  if (variant === 'ghost') return '--px-btn-ghost-label'\n\n  return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\nimport { ButtonLoader } from './components/ButtonLoader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n  type = 'button',\n  variant = 'filled',\n  ...rest\n}) => {\n  // Constants\n  const disabled = rest.disabled || rest.loading\n  const resolvedProps = { type, variant, disabled, ...rest }\n  const textColor = getTextColor(resolvedProps)\n  const { label, endIcon, startIcon, loading } = resolvedProps\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    resolvedProps,\n    createButtonStyles,\n    {\n      override: rest.styles,\n      applyCommonProps: true,\n      commonSlot: 'container',\n      pick: p => [p.disabled, p.loading, p.label, p.color]\n    }\n  )\n\n  // Functions\n  function handleButtonClick(event: MouseEvent<HTMLButtonElement>) {\n    if (disabled) return\n\n    if (rest.onClick) rest.onClick(event)\n  }\n\n  return (\n    <button\n      type={type}\n      disabled={disabled}\n      aria-busy={rest.loading}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleButtonClick}\n    >\n      <div style={styles.content}>\n        {startIcon ?? null}\n\n        <Typography variant={rest.labelVariant || 'b1'} color={textColor}>\n          {label}\n        </Typography>\n\n        {endIcon ?? null}\n\n        {loading ? (\n          <AnimatePresence>\n            <ButtonLoader color={textColor} />\n          </AnimatePresence>\n        ) : null}\n      </div>\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/{CheckItem-DuJvhDP_.js → CheckItem-DsIiS-2X.js}

@@ -1,4 +1,4 @@
-import { t as Icon } from "./Icon-Djde8oXI.js";
+import { t as Icon } from "./Icon-Cv0qztmq.js";
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-3rUXJYgS.js";
 import { t as Typography } from "./Typography-BE-vQSfx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -45,4 +45,4 @@ const CheckItem = (props) => {
 
 //#endregion
 export { CheckItem as t };
-//# sourceMappingURL=CheckItem-DuJvhDP_.js.map
+//# sourceMappingURL=CheckItem-DsIiS-2X.js.map

package/dist/{CheckItem-DuJvhDP_.js.map → CheckItem-DsIiS-2X.js.map}

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

package/dist/{Checkbox-DErw2zDe.js → Checkbox-DE2wp1rK.js}

@@ -1,4 +1,4 @@
-import { t as Icon } from "./Icon-Djde8oXI.js";
+import { t as Icon } from "./Icon-Cv0qztmq.js";
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-3rUXJYgS.js";
 import { t as Typography } from "./Typography-BE-vQSfx.js";
 import { Checkbox, Label } from "radix-ui";
@@ -165,4 +165,4 @@ const Checkbox$1 = (props) => {
 
 //#endregion
 export { Checkbox$1 as t };
-//# sourceMappingURL=Checkbox-DErw2zDe.js.map
+//# sourceMappingURL=Checkbox-DE2wp1rK.js.map

package/dist/{Checkbox-DErw2zDe.js.map → Checkbox-DE2wp1rK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-DErw2zDe.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/toolkit/Checkbox/components/Label/styles.ts","../src/components/toolkit/Checkbox/components/Label/index.tsx","../src/components/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n  const { disabled } = props\n\n  return styled({\n    container: {\n      userSelect: 'none',\n      opacity: disabled ? 0.6 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      transition: 'all 200ms',\n\n      __rules: {\n        ':hover': { color: 'var(--px-color-secondary)' }\n      }\n    }\n  })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n  const { idFor, label, labelVariant } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createLabelStyles, {\n    pick: p => [p.disabled, p.labelVariant, p.label],\n    applyCommonProps: true\n  })\n\n  return (\n    <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n      <Typography variant={labelVariant ?? 'b1'} fontWeight=\"normal\">\n        {label}\n      </Typography>\n    </LabelRadix.Root>\n  )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n  return {\n    id: useId()\n  }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n  size: {\n    sm: { width: '1rem', height: '1rem' },\n    md: { width: '1.25rem', height: '1.25rem' },\n    lg: { width: '1.5rem', height: '1.5rem' }\n  },\n  radius: {\n    none: { borderRadius: 0 },\n    sm: { borderRadius: '0.25rem' },\n    md: { borderRadius: '0.375rem' },\n    lg: { borderRadius: '0.5rem' },\n    full: { borderRadius: '100%' }\n  }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps): StyleMap {\n  const {\n    color,\n    checked,\n    size = 'md',\n    radius = 'md',\n    disabled = false,\n    labelPlacement = 'right'\n  } = props\n\n  const focusIndicatorOffsetColor = '#fff'\n\n  return styled({\n    container: {\n      display: 'flex',\n      columnGap: '0.5rem',\n      alignItems: 'center',\n      '--px-ring-color': color ?? undefined,\n      flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n    },\n\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked ? color : 'white',\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n      transition: 'color 200ms',\n      opacity: disabled ? 0.5 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      ...CHECKBOX_STYLES.size[size],\n      ...CHECKBOX_STYLES.radius[radius],\n\n      __rules: {\n        '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n        '&:focus-visible': {\n          outline: 'none',\n          boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n        }\n      }\n    },\n\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'var(--px-text-primary, #4b5563)'\n    }\n  })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n  backgroundColor: string\n): 'black' | 'white' {\n  let hex = backgroundColor.replace('#', '')\n\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map(c => c + c)\n      .join('')\n  }\n\n  if (hex.length === 8) {\n    hex = hex.substring(0, 6)\n  }\n\n  if (hex.length !== 6) return 'black'\n\n  const r = parseInt(hex.substring(0, 2), 16)\n  const g = parseInt(hex.substring(2, 4), 16)\n  const b = parseInt(hex.substring(4, 6), 16)\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n  return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    icon,\n    label,\n    color,\n    labelVariant,\n    checked = false,\n    disabled = false,\n    onChange\n  } = props\n\n  const iconColor = color ? getContrastingTextColor(color) : undefined\n\n  // Hooks\n  const { id } = useCheckbox()\n\n  const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n  return (\n    <div style={styles.container}>\n      <CheckboxRadix.Root\n        style={styles.root}\n        className={classes.root}\n        id={id}\n        tabIndex={0}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={checked => onChange(checked === true)}\n      >\n        <CheckboxRadix.Indicator style={styles.indicator}>\n          {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n        </CheckboxRadix.Indicator>\n      </CheckboxRadix.Root>\n\n      {label ? (\n        <Label\n          idFor={id}\n          label={label}\n          disabled={disabled}\n          labelVariant={labelVariant}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox-DE2wp1rK.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/toolkit/Checkbox/components/Label/styles.ts","../src/components/toolkit/Checkbox/components/Label/index.tsx","../src/components/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n  const { disabled } = props\n\n  return styled({\n    container: {\n      userSelect: 'none',\n      opacity: disabled ? 0.6 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      transition: 'all 200ms',\n\n      __rules: {\n        ':hover': { color: 'var(--px-color-secondary)' }\n      }\n    }\n  })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n  const { idFor, label, labelVariant } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createLabelStyles, {\n    pick: p => [p.disabled, p.labelVariant, p.label],\n    applyCommonProps: true\n  })\n\n  return (\n    <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n      <Typography variant={labelVariant ?? 'b1'} fontWeight=\"normal\">\n        {label}\n      </Typography>\n    </LabelRadix.Root>\n  )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n  return {\n    id: useId()\n  }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n  size: {\n    sm: { width: '1rem', height: '1rem' },\n    md: { width: '1.25rem', height: '1.25rem' },\n    lg: { width: '1.5rem', height: '1.5rem' }\n  },\n  radius: {\n    none: { borderRadius: 0 },\n    sm: { borderRadius: '0.25rem' },\n    md: { borderRadius: '0.375rem' },\n    lg: { borderRadius: '0.5rem' },\n    full: { borderRadius: '100%' }\n  }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps): StyleMap {\n  const {\n    color,\n    checked,\n    size = 'md',\n    radius = 'md',\n    disabled = false,\n    labelPlacement = 'right'\n  } = props\n\n  const focusIndicatorOffsetColor = '#fff'\n\n  return styled({\n    container: {\n      display: 'flex',\n      columnGap: '0.5rem',\n      alignItems: 'center',\n      '--px-ring-color': color ?? undefined,\n      flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n    },\n\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked ? color : 'white',\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n      transition: 'color 200ms',\n      opacity: disabled ? 0.5 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      ...CHECKBOX_STYLES.size[size],\n      ...CHECKBOX_STYLES.radius[radius],\n\n      __rules: {\n        '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n        '&:focus-visible': {\n          outline: 'none',\n          boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n        }\n      }\n    },\n\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'var(--px-text-primary, #4b5563)'\n    }\n  })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n  backgroundColor: string\n): 'black' | 'white' {\n  let hex = backgroundColor.replace('#', '')\n\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map(c => c + c)\n      .join('')\n  }\n\n  if (hex.length === 8) {\n    hex = hex.substring(0, 6)\n  }\n\n  if (hex.length !== 6) return 'black'\n\n  const r = parseInt(hex.substring(0, 2), 16)\n  const g = parseInt(hex.substring(2, 4), 16)\n  const b = parseInt(hex.substring(4, 6), 16)\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n  return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    icon,\n    label,\n    color,\n    labelVariant,\n    checked = false,\n    disabled = false,\n    onChange\n  } = props\n\n  const iconColor = color ? getContrastingTextColor(color) : undefined\n\n  // Hooks\n  const { id } = useCheckbox()\n\n  const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n  return (\n    <div style={styles.container}>\n      <CheckboxRadix.Root\n        style={styles.root}\n        className={classes.root}\n        id={id}\n        tabIndex={0}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={checked => onChange(checked === true)}\n      >\n        <CheckboxRadix.Indicator style={styles.indicator}>\n          {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n        </CheckboxRadix.Indicator>\n      </CheckboxRadix.Root>\n\n      {label ? (\n        <Label\n          idFor={id}\n          label={label}\n          disabled={disabled}\n          labelVariant={labelVariant}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/{Icon-Djde8oXI.js → Icon-Cv0qztmq.js}

@@ -1,5 +1,5 @@
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-3rUXJYgS.js";
-import { Suspense, useMemo } from "react";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/assets/icons/__generated__/general/check.tsx
@@ -174,7 +174,11 @@ function createIconStyles(props) {
 		alignItems: "center",
 		justifyContent: "center",
 		color: color === "primary" ? "var(--px-text-primary)" : color === "secondary" ? "var(--px-text-secondary)" : color,
-		...ICON_SIZE_MAP[size]
+		...ICON_SIZE_MAP[size],
+		__rules: { "& > svg": {
+			width: "100%",
+			height: "100%"
+		} }
 	} });
 }
 
@@ -194,16 +198,13 @@ const Icon = (props) => {
 		console.warn(`Icon "${name}" not found.`);
 		return null;
 	}
-	return /* @__PURE__ */ jsx(Suspense, {
-		fallback: null,
-		children: /* @__PURE__ */ jsx("span", {
-			className: classes.container,
-			style: styles.container,
-			children: IconComponent
-		})
+	return /* @__PURE__ */ jsx("span", {
+		className: classes.container,
+		style: styles.container,
+		children: IconComponent
 	});
 };
 
 //#endregion
 export { Icon as t };
-//# sourceMappingURL=Icon-Djde8oXI.js.map
+//# sourceMappingURL=Icon-Cv0qztmq.js.map

package/dist/{Icon-Djde8oXI.js.map → Icon-Cv0qztmq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Icon-Djde8oXI.js","names":["ICON_SIZE_MAP: Record<string, CSSProperties>","IconLoaders"],"sources":["../src/assets/icons/__generated__/general/check.tsx","../src/assets/icons/__generated__/general/eye.tsx","../src/assets/icons/__generated__/general/eye-off.tsx","../src/assets/icons/__generated__/brands/facebook.tsx","../src/assets/icons/__generated__/brands/facebook-fit.tsx","../src/assets/icons/__generated__/brands/google.tsx","../src/assets/icons/index.tsx","../src/components/toolkit/Icon/constants.ts","../src/components/toolkit/Icon/style.ts","../src/components/toolkit/Icon/index.tsx"],"sourcesContent":["// Auto-generated from general/check.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type CheckProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Check = ({ title, ...props }: CheckProps) => (\n<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}>\n    <title>{title ?? 'check'}</title><polyline points=\"20 6 9 17 4 12\"></polyline></svg>\n)\n","// Auto-generated from general/eye.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type EyeProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Eye = ({ title, ...props }: EyeProps) => (\n<svg viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n<path d=\"M2.42012 12.7132C2.28394 12.4975 2.21584 12.3897 2.17772 12.2234C2.14909 12.0985 2.14909 11.9015 2.17772 11.7766C2.21584 11.6103 2.28394 11.5025 2.42012 11.2868C3.54553 9.50484 6.8954 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7766C21.8517 11.9015 21.8517 12.0985 21.8231 12.2234C21.785 12.3897 21.7169 12.4975 21.5807 12.7132C20.4553 14.4952 17.1054 19 12.0004 19C6.8954 19 3.54553 14.4952 2.42012 12.7132Z\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    <title>{title ?? 'eye'}</title>\n<path d=\"M12.0004 15C13.6573 15 15.0004 13.6569 15.0004 12C15.0004 10.3431 13.6573 9 12.0004 9C10.3435 9 9.0004 10.3431 9.0004 12C9.0004 13.6569 10.3435 15 12.0004 15Z\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n</svg>\n)\n","// Auto-generated from general/eye-off.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type EyeOffProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const EyeOff = ({ title, ...props }: EyeOffProps) => (\n<svg viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n<path d=\"M10.7429 5.09232C11.1494 5.03223 11.5686 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7767C21.8518 11.9016 21.8517 12.0987 21.8231 12.2236C21.7849 12.3899 21.7164 12.4985 21.5792 12.7156C21.2793 13.1901 20.8222 13.8571 20.2165 14.5805M6.72432 6.71504C4.56225 8.1817 3.09445 10.2194 2.42111 11.2853C2.28428 11.5019 2.21587 11.6102 2.17774 11.7765C2.1491 11.9014 2.14909 12.0984 2.17771 12.2234C2.21583 12.3897 2.28393 12.4975 2.42013 12.7132C3.54554 14.4952 6.89541 19 12.0004 19C14.0588 19 15.8319 18.2676 17.2888 17.2766M3.00042 3L21.0004 21M9.8791 9.87868C9.3362 10.4216 9.00042 11.1716 9.00042 12C9.00042 13.6569 10.3436 15 12.0004 15C12.8288 15 13.5788 14.6642 14.1217 14.1213\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    <title>{title ?? 'eye-off'}</title>\n</svg>\n)\n","// Auto-generated from brands/facebook.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type FacebookProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Facebook = ({ title, ...props }: FacebookProps) => (\n<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" {...props}>\n<path d=\"M16 8C16 11.9927 13.0707 15.3027 9.24667 15.9033V10.328H11.106L11.46 8.02133H9.24667V6.52467C9.24667 5.89333 9.556 5.27867 10.5467 5.27867H11.5527V3.31467C11.5527 3.31467 10.6393 3.15867 9.76667 3.15867C7.944 3.15867 6.75333 4.26333 6.75333 6.26267V8.02067H4.72733V10.3273H6.75333V15.9027C2.93 15.3013 0 11.992 0 8C0 3.582 3.582 0 8 0C12.418 0 16 3.58133 16 8Z\" fill=\"currentColor\"/>\n    <title>{title ?? 'facebook'}</title>\n</svg>\n)\n","// Auto-generated from brands/facebook-fit.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type FacebookFitProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const FacebookFit = ({ title, ...props }: FacebookFitProps) => (\n<svg viewBox=\"0 0 1024 1024\" id=\"facebook\" {...props}>\n  <path fill=\"#1877f2\" d=\"M1024,512C1024,229.23016,794.76978,0,512,0S0,229.23016,0,512c0,255.554,187.231,467.37012,432,505.77777V660H302V512H432V399.2C432,270.87982,508.43854,200,625.38922,200,681.40765,200,740,210,740,210V336H675.43713C611.83508,336,592,375.46667,592,415.95728V512H734L711.3,660H592v357.77777C836.769,979.37012,1024,767.554,1024,512Z\"></path>\n    <title>{title ?? 'facebook-fit'}</title>\n  <path fill=\"#fff\" d=\"M711.3,660,734,512H592V415.95728C592,375.46667,611.83508,336,675.43713,336H740V210s-58.59235-10-114.61078-10C508.43854,200,432,270.87982,432,399.2V512H302V660H432v357.77777a517.39619,517.39619,0,0,0,160,0V660Z\"></path>\n</svg>\n)\n","// Auto-generated from brands/google.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type GoogleProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Google = ({ title, ...props }: GoogleProps) => (\n<svg width=\"800px\" height=\"800px\" viewBox=\"-3 0 262 262\" version=\"1.1\" preserveAspectRatio=\"xMidYMid\" {...props}>\n\t<g>\n\t\t<path d=\"M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451\" fill=\"#4285F4\"></path>\n    <title>{title ?? 'google'}</title>\n\t\t<path d=\"M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1\" fill=\"#34A853\"></path>\n\t\t<path d=\"M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37\" fill=\"#FBBC05\"></path>\n\t\t<path d=\"M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479\" fill=\"#EB4335\"></path>\n\t</g>\n</svg>\n)\n","// Auto-generated by generate-icon-components.sh. Do not edit manually.\n/** biome-ignore-all lint/suspicious/noShadowRestrictedNames: generated */\n\nimport { Check } from './__generated__/general/check'\nimport { Eye } from './__generated__/general/eye'\nimport { EyeOff } from './__generated__/general/eye-off'\nimport { Facebook } from './__generated__/brands/facebook'\nimport { FacebookFit } from './__generated__/brands/facebook-fit'\nimport { Google } from './__generated__/brands/google'\n\nconst icons = {\n  'brands-facebook': <Facebook />,\n  'brands-facebook-fit': <FacebookFit />,\n  'brands-google': <Google />,\n  'general-check': <Check />,\n  'general-eye': <Eye />,\n  'general-eye-off': <EyeOff />,\n}\n\nexport type IconName = keyof typeof icons\nexport default icons\n","// External Libraries\nimport type { CSSProperties } from \"react\";\n\nexport const ICON_SIZE_MAP: Record<string, CSSProperties> = {\n  xs: {\n    width: '0.75rem',\n    height: '0.75rem'\n  },\n  sm: {\n    width: '1rem',\n    height: '1rem'\n  },\n  md: {\n    width: '1.25rem',\n    height: '1.25rem'\n  },\n  lg: {\n    width: '1.5rem',\n    height: '1.5rem'\n  },\n  xl: {\n    width: '1.75rem',\n    height: '1.75rem'\n  },\n  '2xl': {\n    width: '2rem',\n    height: '2rem'\n  },\n  '3xl': {\n    width: '2.5rem',\n    height: '2.5rem'\n  }\n} as const","// External Libraries\nimport type { CSSProperties } from 'react'\n\n// Types\nimport type { IconProps } from './types'\n\n// Utils\nimport { ICON_SIZE_MAP } from './constants'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createIconStyles(props: IconProps) {\n  const { color, size = 'md' } = props\n\n  return styled({\n    container: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color:\n        color === 'primary'\n          ? 'var(--px-text-primary)'\n          : color === 'secondary'\n            ? 'var(--px-text-secondary)'\n            : color,\n      ...ICON_SIZE_MAP[size]\n    } as CSSProperties\n  })\n}\n","// External Libraries\nimport { Suspense, useMemo } from 'react'\n\n// Components\nimport IconLoaders from '@assets/icons'\n\n// Types\nimport type { IconProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createIconStyles } from './style'\n\nexport const Icon = (props: IconProps) => {\n  const { name } = props\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createIconStyles, {\n    pick: p => [p.color, p.size],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Constants\n  const IconComponent = useMemo(() => {\n    const loader = IconLoaders[name]\n    return loader\n  }, [name])\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${name}\" not found.`)\n    return null\n  }\n\n  return (\n    <Suspense fallback={null}>\n      <span className={classes.container} style={styles.container}>\n        {IconComponent}\n      </span>\n    </Suspense>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Icon-Cv0qztmq.js","names":["ICON_SIZE_MAP: Record<string, CSSProperties>","IconLoaders"],"sources":["../src/assets/icons/__generated__/general/check.tsx","../src/assets/icons/__generated__/general/eye.tsx","../src/assets/icons/__generated__/general/eye-off.tsx","../src/assets/icons/__generated__/brands/facebook.tsx","../src/assets/icons/__generated__/brands/facebook-fit.tsx","../src/assets/icons/__generated__/brands/google.tsx","../src/assets/icons/index.tsx","../src/components/toolkit/Icon/constants.ts","../src/components/toolkit/Icon/style.ts","../src/components/toolkit/Icon/index.tsx"],"sourcesContent":["// Auto-generated from general/check.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type CheckProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Check = ({ title, ...props }: CheckProps) => (\n<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}>\n    <title>{title ?? 'check'}</title><polyline points=\"20 6 9 17 4 12\"></polyline></svg>\n)\n","// Auto-generated from general/eye.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type EyeProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Eye = ({ title, ...props }: EyeProps) => (\n<svg viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n<path d=\"M2.42012 12.7132C2.28394 12.4975 2.21584 12.3897 2.17772 12.2234C2.14909 12.0985 2.14909 11.9015 2.17772 11.7766C2.21584 11.6103 2.28394 11.5025 2.42012 11.2868C3.54553 9.50484 6.8954 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7766C21.8517 11.9015 21.8517 12.0985 21.8231 12.2234C21.785 12.3897 21.7169 12.4975 21.5807 12.7132C20.4553 14.4952 17.1054 19 12.0004 19C6.8954 19 3.54553 14.4952 2.42012 12.7132Z\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    <title>{title ?? 'eye'}</title>\n<path d=\"M12.0004 15C13.6573 15 15.0004 13.6569 15.0004 12C15.0004 10.3431 13.6573 9 12.0004 9C10.3435 9 9.0004 10.3431 9.0004 12C9.0004 13.6569 10.3435 15 12.0004 15Z\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n</svg>\n)\n","// Auto-generated from general/eye-off.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type EyeOffProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const EyeOff = ({ title, ...props }: EyeOffProps) => (\n<svg viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n<path d=\"M10.7429 5.09232C11.1494 5.03223 11.5686 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7767C21.8518 11.9016 21.8517 12.0987 21.8231 12.2236C21.7849 12.3899 21.7164 12.4985 21.5792 12.7156C21.2793 13.1901 20.8222 13.8571 20.2165 14.5805M6.72432 6.71504C4.56225 8.1817 3.09445 10.2194 2.42111 11.2853C2.28428 11.5019 2.21587 11.6102 2.17774 11.7765C2.1491 11.9014 2.14909 12.0984 2.17771 12.2234C2.21583 12.3897 2.28393 12.4975 2.42013 12.7132C3.54554 14.4952 6.89541 19 12.0004 19C14.0588 19 15.8319 18.2676 17.2888 17.2766M3.00042 3L21.0004 21M9.8791 9.87868C9.3362 10.4216 9.00042 11.1716 9.00042 12C9.00042 13.6569 10.3436 15 12.0004 15C12.8288 15 13.5788 14.6642 14.1217 14.1213\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    <title>{title ?? 'eye-off'}</title>\n</svg>\n)\n","// Auto-generated from brands/facebook.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type FacebookProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Facebook = ({ title, ...props }: FacebookProps) => (\n<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" {...props}>\n<path d=\"M16 8C16 11.9927 13.0707 15.3027 9.24667 15.9033V10.328H11.106L11.46 8.02133H9.24667V6.52467C9.24667 5.89333 9.556 5.27867 10.5467 5.27867H11.5527V3.31467C11.5527 3.31467 10.6393 3.15867 9.76667 3.15867C7.944 3.15867 6.75333 4.26333 6.75333 6.26267V8.02067H4.72733V10.3273H6.75333V15.9027C2.93 15.3013 0 11.992 0 8C0 3.582 3.582 0 8 0C12.418 0 16 3.58133 16 8Z\" fill=\"currentColor\"/>\n    <title>{title ?? 'facebook'}</title>\n</svg>\n)\n","// Auto-generated from brands/facebook-fit.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type FacebookFitProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const FacebookFit = ({ title, ...props }: FacebookFitProps) => (\n<svg viewBox=\"0 0 1024 1024\" id=\"facebook\" {...props}>\n  <path fill=\"#1877f2\" d=\"M1024,512C1024,229.23016,794.76978,0,512,0S0,229.23016,0,512c0,255.554,187.231,467.37012,432,505.77777V660H302V512H432V399.2C432,270.87982,508.43854,200,625.38922,200,681.40765,200,740,210,740,210V336H675.43713C611.83508,336,592,375.46667,592,415.95728V512H734L711.3,660H592v357.77777C836.769,979.37012,1024,767.554,1024,512Z\"></path>\n    <title>{title ?? 'facebook-fit'}</title>\n  <path fill=\"#fff\" d=\"M711.3,660,734,512H592V415.95728C592,375.46667,611.83508,336,675.43713,336H740V210s-58.59235-10-114.61078-10C508.43854,200,432,270.87982,432,399.2V512H302V660H432v357.77777a517.39619,517.39619,0,0,0,160,0V660Z\"></path>\n</svg>\n)\n","// Auto-generated from brands/google.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type GoogleProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Google = ({ title, ...props }: GoogleProps) => (\n<svg width=\"800px\" height=\"800px\" viewBox=\"-3 0 262 262\" version=\"1.1\" preserveAspectRatio=\"xMidYMid\" {...props}>\n\t<g>\n\t\t<path d=\"M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451\" fill=\"#4285F4\"></path>\n    <title>{title ?? 'google'}</title>\n\t\t<path d=\"M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1\" fill=\"#34A853\"></path>\n\t\t<path d=\"M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37\" fill=\"#FBBC05\"></path>\n\t\t<path d=\"M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479\" fill=\"#EB4335\"></path>\n\t</g>\n</svg>\n)\n","// Auto-generated by generate-icon-components.sh. Do not edit manually.\n/** biome-ignore-all lint/suspicious/noShadowRestrictedNames: generated */\n\nimport { Check } from './__generated__/general/check'\nimport { Eye } from './__generated__/general/eye'\nimport { EyeOff } from './__generated__/general/eye-off'\nimport { Facebook } from './__generated__/brands/facebook'\nimport { FacebookFit } from './__generated__/brands/facebook-fit'\nimport { Google } from './__generated__/brands/google'\n\nconst icons = {\n  'brands-facebook': <Facebook />,\n  'brands-facebook-fit': <FacebookFit />,\n  'brands-google': <Google />,\n  'general-check': <Check />,\n  'general-eye': <Eye />,\n  'general-eye-off': <EyeOff />,\n}\n\nexport type IconName = keyof typeof icons\nexport default icons\n","// External Libraries\nimport type { CSSProperties } from \"react\";\n\nexport const ICON_SIZE_MAP: Record<string, CSSProperties> = {\n  xs: {\n    width: '0.75rem',\n    height: '0.75rem'\n  },\n  sm: {\n    width: '1rem',\n    height: '1rem'\n  },\n  md: {\n    width: '1.25rem',\n    height: '1.25rem'\n  },\n  lg: {\n    width: '1.5rem',\n    height: '1.5rem'\n  },\n  xl: {\n    width: '1.75rem',\n    height: '1.75rem'\n  },\n  '2xl': {\n    width: '2rem',\n    height: '2rem'\n  },\n  '3xl': {\n    width: '2.5rem',\n    height: '2.5rem'\n  }\n} as const","// External Libraries\nimport type { CSSProperties } from 'react'\n\n// Types\nimport type { IconProps } from './types'\n\n// Utils\nimport { ICON_SIZE_MAP } from './constants'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createIconStyles(props: IconProps) {\n  const { color, size = 'md' } = props\n\n  return styled({\n    container: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color:\n        color === 'primary'\n          ? 'var(--px-text-primary)'\n          : color === 'secondary'\n            ? 'var(--px-text-secondary)'\n            : color,\n      ...ICON_SIZE_MAP[size],\n      __rules: {\n        '& > svg': { width: '100%', height: '100%' }\n      }\n    } as CSSProperties\n  })\n}\n","// External Libraries\nimport { useMemo } from 'react'\n\n// Components\nimport IconLoaders from '@assets/icons'\n\n// Types\nimport type { IconProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createIconStyles } from './style'\n\nexport const Icon = (props: IconProps) => {\n  const { name } = props\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createIconStyles, {\n    pick: p => [p.color, p.size],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Constants\n  const IconComponent = useMemo(() => {\n    const loader = IconLoaders[name]\n    return loader\n  }, [name])\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${name}\" not found.`)\n    return null\n  }\n\n  return (\n    <span className={classes.container} style={styles.container}>\n      {IconComponent}\n    </span>\n  )\n}\n"],"mappings":"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"}

package/dist/{IconButton-IhShUhfe.js → IconButton-BBdkzg3b.js}

@@ -14,6 +14,7 @@ function createIconButtonStyles(props) {
 		alignItems: "center",
 		cursor: "pointer",
 		userSelect: "none",
+		boxShadow: "0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D121A inset",
 		__rules: {
 			"&:hover": { opacity: "0.85 !important" },
 			"&:disabled": {
@@ -26,32 +27,32 @@ function createIconButtonStyles(props) {
 function getSize(size) {
 	switch (size) {
 		case "lg": return {
-			height: "3.25rem",
-			width: "3.25rem"
+			minHeight: "3.25rem",
+			minWidth: "3.25rem"
 		};
 		case "md": return {
-			height: "2.75rem",
-			width: "2.75rem"
+			minHeight: "2.75rem",
+			minWidth: "2.75rem"
 		};
 		case "sm": return {
-			height: "2.25rem",
-			width: "2.25rem"
+			minHeight: "2.25rem",
+			minWidth: "2.25rem"
 		};
 		case "xs": return {
-			height: "1.75rem",
-			width: "1.75rem"
+			minHeight: "1.75rem",
+			minWidth: "1.75rem"
 		};
 		default: return {
-			height: size,
-			width: size
+			minHeight: size,
+			minWidth: size
 		};
 	}
 }
 function getBackgroundColor(variant, color) {
 	if (color) return color;
-	if (variant === "filled") return "var(--px-btn-filled-bg)";
+	if (variant === "filled") return "var(--px-btn-outlined-bg)";
 	if (variant === "outlined") return "var(--px-btn-outlined-bg)";
-	return "var(--px-btn-filled-bg)";
+	return "var(--px-btn-outlined-bg)";
 }
 function getBorder(variant, color) {
 	if (color) return `1px solid ${color}`;
@@ -88,4 +89,4 @@ const IconButton = (props) => {
 
 //#endregion
 export { IconButton as t };
-//# sourceMappingURL=IconButton-IhShUhfe.js.map
+//# sourceMappingURL=IconButton-BBdkzg3b.js.map

package/dist/IconButton-BBdkzg3b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-BBdkzg3b.js","names":["IconButton: React.FC<IconButtonProps>"],"sources":["../src/components/commons/buttons/IconButton/styles.ts","../src/components/commons/buttons/IconButton/index.tsx"],"sourcesContent":["// Types\nimport type { CSSProperties } from 'react'\nimport type {\n  IconButtonProps,\n  IconButtonSize,\n  IconButtonVariant\n} from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createIconButtonStyles(props: IconButtonProps): StyleMap {\n  const {\n    variant = 'outlined',\n    size = 'md',\n    borderColor,\n    backgroundColor\n  } = props\n\n  return styled({\n    button: {\n      ...getSize(size),\n      backgroundColor: getBackgroundColor(variant, backgroundColor),\n      border: getBorder(variant, borderColor),\n      borderRadius: 'var(--px-radius-lg)',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n\n      boxShadow:\n        '0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D121A inset',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n        '&:disabled': {\n          opacity: '0.5',\n          cursor: 'not-allowed'\n        }\n      }\n    }\n  })\n}\n\nfunction getSize(size: IconButtonSize | string): CSSProperties {\n  switch (size) {\n    case 'lg':\n      return { minHeight: '3.25rem', minWidth: '3.25rem' }\n    case 'md':\n      return { minHeight: '2.75rem', minWidth: '2.75rem' }\n    case 'sm':\n      return { minHeight: '2.25rem', minWidth: '2.25rem' }\n    case 'xs':\n      return { minHeight: '1.75rem', minWidth: '1.75rem' }\n    default:\n      return { minHeight: size, minWidth: size }\n  }\n}\n\nfunction getBackgroundColor(\n  variant?: IconButtonVariant,\n  color?: string\n): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-outlined-bg)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-bg)'\n\n  return 'var(--px-btn-outlined-bg)'\n}\n\nfunction getBorder(variant?: IconButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n  return '1px solid var(--px-color-primary)'\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { IconButtonProps } from './types'\n\n// Styles\nimport { createIconButtonStyles } from './styles'\n\nexport const IconButton: React.FC<IconButtonProps> = props => {\n  // Constants\n  const disabled = props.isDisabled || props.isLoading\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createIconButtonStyles, {\n    pick: p => [p.size, p.variant, p.borderColor, p.backgroundColor],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'button'\n  })\n\n  return (\n    <button\n      disabled={disabled}\n      aria-busy={props.isLoading}\n      type=\"button\"\n      className={classes.button}\n      style={styles.button}\n      onClick={props.onClick}\n    >\n      {props.icon}\n    </button>\n  )\n}\n"],"mappings":";;;;AASA,SAAgB,uBAAuB,OAAkC;CACvE,MAAM,EACJ,UAAU,YACV,OAAO,MACP,aACA,oBACE;AAEJ,QAAO,OAAO,EACZ,QAAQ;EACN,GAAG,QAAQ,KAAK;EAChB,iBAAiB,mBAAmB,SAAS,gBAAgB;EAC7D,QAAQ,UAAU,SAAS,YAAY;EACvC,cAAc;EACd,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ;EACR,YAAY;EAEZ,WACE;EAEF,SAAS;GACP,WAAW,EACT,SAAS,mBACV;GACD,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,QAAQ,MAA8C;AAC7D,SAAQ,MAAR;EACE,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,QACE,QAAO;GAAE,WAAW;GAAM,UAAU;GAAM;;;AAIhD,SAAS,mBACP,SACA,OACQ;AACR,KAAI,MAAO,QAAO;AAElB,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;AAGT,SAAS,UAAU,SAA6B,OAAwB;AACtE,KAAI,MAAO,QAAO,aAAa;AAE/B,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;;;;ACvET,MAAaA,cAAwC,UAAS;CAE5D,MAAM,WAAW,MAAM,cAAc,MAAM;CAG3C,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,wBAAwB;EACzE,OAAM,MAAK;GAAC,EAAE;GAAM,EAAE;GAAS,EAAE;GAAa,EAAE;GAAgB;EAChE,UAAU,MAAM;EAChB,kBAAkB;EAClB,YAAY;EACb,CAAC;AAEF,QACE,oBAAC;EACW;EACV,aAAW,MAAM;EACjB,MAAK;EACL,WAAW,QAAQ;EACnB,OAAO,OAAO;EACd,SAAS,MAAM;YAEd,MAAM;GACA"}

package/dist/{Input-C7WKOO_t.js → Input-BvbMEjwE.js}

@@ -1,4 +1,4 @@
-import { t as Icon } from "./Icon-Djde8oXI.js";
+import { t as Icon } from "./Icon-Cv0qztmq.js";
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-3rUXJYgS.js";
 import { t as Label } from "./Label-QQpNWSeV.js";
 import { useCallback, useId, useMemo, useRef, useState } from "react";
@@ -324,4 +324,4 @@ const Input = (props) => {
 
 //#endregion
 export { Input as t };
-//# sourceMappingURL=Input-C7WKOO_t.js.map
+//# sourceMappingURL=Input-BvbMEjwE.js.map

package/dist/{Input-C7WKOO_t.js.map → Input-BvbMEjwE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Input-C7WKOO_t.js","names":["Input: React.FC<InputProps>"],"sources":["../src/components/commons/inputs/Input/hooks/useInput/index.ts","../src/components/commons/inputs/Input/styles.ts","../src/components/commons/inputs/Input/index.tsx"],"sourcesContent":["// External Libraries\nimport { useState, useRef, useCallback } from 'react'\n\n// Types\nimport type { InputProps } from '../../types'\n\nexport const useInput = ({\n  value: controlledValue,\n  defaultValue = '',\n  onChange,\n}: Partial<InputProps>) => {\n  // Refs\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // States\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [showPassword, setShowPassword] = useState(false)\n\n  // Constants\n  const isControlled = controlledValue !== undefined\n  const currentValue = isControlled ? controlledValue : internalValue\n\n  // Functions\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value\n\n      if (!isControlled) setInternalValue(value)\n      onChange?.(value)\n    },\n    [isControlled, onChange],\n  )\n\n  const togglePasswordVisibility = useCallback(() => {\n    setShowPassword(prev => !prev)\n  }, [])\n\n  const focusInput = useCallback(() => {\n    inputRef.current?.focus()\n  }, [])\n\n  return {\n    inputRef,\n    focusInput,\n    isControlled,\n    currentValue,\n    showPassword,\n    handleChange,\n    togglePasswordVisibility,\n  }\n}\n","// External libraries\nimport type { CSSProperties } from 'react'\n\n// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { InputProps } from './types'\n\nexport const INPUT_STYLES = {\n  width: {\n    auto: { width: 'auto' },\n    full: { width: '100%' },\n    md: { width: '12rem' },\n    lg: { width: '16rem' },\n    xl: { width: '20rem' },\n    '2xl': { width: '24rem' }\n  } as Record<string, CSSProperties>,\n  radius: {\n    none: { borderRadius: '0px' },\n    sm: { borderRadius: '0.125rem' },\n    md: { borderRadius: '0.375rem' },\n    lg: { borderRadius: '0.5rem' },\n    full: { borderRadius: '9999px' }\n  } as Record<string, CSSProperties>,\n  size: {\n    sm: {\n      wrapper: { minHeight: '2rem' },\n      input: {\n        padding: '0.5rem 0.75rem',\n        lineHeight: '1rem',\n        fontSize: '0.75rem'\n      },\n      label: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginBottom: '0.25rem'\n      },\n      description: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.25rem'\n      },\n      error: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.25rem'\n      }\n    } as Record<string, CSSProperties>,\n    md: {\n      wrapper: { minHeight: '2.5rem' },\n      input: {\n        padding: '0.5rem 0.75rem',\n        lineHeight: '1.25rem',\n        fontSize: '0.875rem'\n      },\n      label: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginBottom: '0.375rem'\n      },\n      description: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.375rem'\n      },\n      error: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.375rem'\n      }\n    } as Record<string, CSSProperties>,\n    lg: {\n      wrapper: { minHeight: '3rem' },\n      input: {\n        padding: '0.75rem 1rem',\n        lineHeight: '1.5rem',\n        fontSize: '1rem',\n        width: '16rem'\n      },\n      label: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginBottom: '0.5rem'\n      },\n      description: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginTop: '0.5rem'\n      },\n      error: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginTop: '0.5rem'\n      }\n    } as Record<string, CSSProperties>\n  },\n  variant: {\n    bordered: {\n      wrapper: { border: '1px solid var(--px-border-primary)' },\n      input: {\n        backgroundColor: 'transparent',\n        color: 'var(--px-text-primary)',\n        '::placeholder': {\n          color: 'var(--px-text-secondary)'\n        }\n      },\n      label: { color: 'var(--px-text-primary)' },\n      button: {\n        color: 'var(--px-text-secondary)',\n        ':hover': { color: 'var(--px-text-primary)' }\n      }\n    } as Record<string, CSSProperties>\n  },\n  state: {\n    default: {\n      input: {},\n      ring: {\n        boxShadow: '0 0 0 2px var(--px-color-info)'\n      }\n    },\n    invalid: {\n      wrapper: {\n        borderColor: 'var(--px-color-invalid)',\n        __rules: {\n          '&:focus-within': {\n            boxShadow:\n              '0 0 0 1px var(--px-background), 0 0 0 3px var(--px-color-invalid)'\n          }\n        }\n      },\n      input: {\n        color: 'var(--px-color-invalid)'\n      },\n      error: {\n        color: 'var(--px-color-invalid)'\n      }\n    },\n\n    disabled: {\n      wrapper: {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n        backgroundColor: '#f9fafb'\n      },\n      input: {\n        cursor: 'not-allowed'\n      },\n      label: {\n        cursor: 'not-allowed'\n      }\n    }\n  } as Record<string, Partial<StyleMap>>\n}\n\nexport function createInputStyles(props: InputProps): StyleMap {\n  const {\n    size = 'md',\n    variant = 'bordered',\n    radius = 'md',\n    isDisabled = false,\n    isInvalid = false,\n    focusedRingColor\n  } = props\n\n  const focusRingColor = focusedRingColor || 'var(--px-color-info)'\n\n  return styled({\n    wrapper: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n\n      ...(INPUT_STYLES.size[size]?.wrapper ?? {}),\n      ...(INPUT_STYLES.variant[variant]?.wrapper ?? {}),\n      ...(INPUT_STYLES.radius[radius] ?? {}),\n\n      __rules: {\n        '&:focus-within': {\n          boxShadow: `0 0 0 1px var(--px-background), 0 0 0 3px ${focusRingColor}`\n        }\n      },\n\n      ...(isDisabled ? INPUT_STYLES.state.disabled.wrapper : {}),\n      ...(isInvalid ? INPUT_STYLES.state.invalid.wrapper : {})\n    },\n\n    input: {\n      flex: 1,\n      backgroundColor: 'transparent',\n      outline: 'none',\n      width: '100%',\n\n      ...(INPUT_STYLES.size[size]?.input ?? {}),\n\n      ...(INPUT_STYLES.variant[variant]?.input ?? {}),\n      ...(INPUT_STYLES.state.default.input ?? {}),\n\n      ...(isDisabled ? INPUT_STYLES.state.disabled.input : {}),\n      ...(isInvalid ? INPUT_STYLES.state.invalid.input : {})\n    },\n\n    label: {\n      ...(INPUT_STYLES.size[size]?.label ?? {}),\n      ...(INPUT_STYLES.variant[variant]?.label ?? {}),\n\n      ...(isDisabled ? INPUT_STYLES.state.disabled.label : {})\n    },\n\n    error: {\n      display: 'block',\n\n      ...(INPUT_STYLES.size[size]?.error ?? {}),\n      ...(INPUT_STYLES.state.invalid.error ?? {})\n    },\n\n    button: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: '0.25rem',\n      cursor: 'pointer',\n\n      ...(INPUT_STYLES.variant[variant]?.button ?? {}),\n      ...(INPUT_STYLES.radius[radius] ?? {}),\n\n      ...(isDisabled ? { cursor: 'not-allowed', opacity: 0.5 } : {})\n    },\n\n    startContent: {\n      display: 'flex',\n      alignItems: 'center',\n      padding: '0.25rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { useId, useMemo } from 'react'\n\n// Components\nimport { Label } from '../../Label'\nimport { Icon } from '@components/toolkit/Icon'\n\n// Types\nimport type { InputProps } from './types'\n\n// Hooks\nimport { useInput } from './hooks/useInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createInputStyles, INPUT_STYLES } from './styles'\n\nexport const Input: React.FC<InputProps> = props => {\n  // Hooks\n  const {\n    id,\n    type,\n    label,\n    width,\n    fullWidth,\n    required,\n    isDisabled,\n    minLength,\n    maxLength,\n    placeholder,\n    requiredColor,\n    labelColor,\n    labelWeight,\n    labelVariant,\n    startContent,\n    endContent,\n    errorMessage,\n    onChange,\n    value,\n    defaultValue,\n    size,\n    radius,\n    variant,\n    isInvalid,\n    ...nativeInputProps\n  } = props\n\n  const {\n    inputRef,\n    currentValue,\n    showPassword,\n    handleChange,\n    togglePasswordVisibility\n  } = useInput({\n    size,\n    value,\n    radius,\n    variant,\n    isInvalid,\n    fullWidth,\n    isDisabled,\n    defaultValue,\n    onChange\n  })\n\n  // Constants\n  const reactId = useId()\n  const inputId = useMemo(() => {\n    return id || `input-${reactId}`\n  }, [id, reactId])\n  const containerWidth = getWidth()\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createInputStyles, {\n    pick: p => [\n      p.size,\n      p.variant,\n      p.radius,\n      p.isDisabled,\n      p.isInvalid,\n      p.focusedRingColor\n    ],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'input'\n  })\n\n  // Functions\n  function getType() {\n    if (type === 'password' && showPassword) return 'text'\n    return type\n  }\n\n  function getWidth() {\n    if (fullWidth) return { width: '100%' }\n    if (width) return INPUT_STYLES.width[width] || { width: 'auto' }\n    return { width: 'auto' }\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          styles={{ label: styles.label }}\n          requiredColor={requiredColor}\n          labelColor={labelColor}\n          labelWeight={labelWeight}\n          labelVariant={labelVariant}\n        />\n      </div>\n    )\n  }\n\n  function renderEndContent() {\n    return (\n      <>\n        {type === 'password' ? (\n          <button\n            type=\"button\"\n            style={styles.button}\n            onClick={togglePasswordVisibility}\n          >\n            {showPassword ? (\n              <Icon name={'general-eye-off'} />\n            ) : (\n              <Icon name={'general-eye'} />\n            )}\n          </button>\n        ) : (\n          endContent\n        )}\n      </>\n    )\n  }\n\n  return (\n    <div style={containerWidth}>\n      {renderLabel()}\n      <div style={styles.wrapper} className={classes.wrapper}>\n        {startContent && <div style={styles.startContent}>{startContent}</div>}\n        <div style={{ flex: 1 }}>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type={getType()}\n            value={currentValue}\n            style={styles.input}\n            className={classes.input}\n            disabled={isDisabled}\n            minLength={minLength}\n            maxLength={maxLength}\n            placeholder={placeholder ?? 'Digite aqui...'}\n            onChange={handleChange}\n            {...nativeInputProps}\n          />\n        </div>\n        {renderEndContent() && <div>{renderEndContent()}</div>}\n      </div>\n\n      {errorMessage ? <div style={styles.error}>{errorMessage}</div> : null}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Input-BvbMEjwE.js","names":["Input: React.FC<InputProps>"],"sources":["../src/components/commons/inputs/Input/hooks/useInput/index.ts","../src/components/commons/inputs/Input/styles.ts","../src/components/commons/inputs/Input/index.tsx"],"sourcesContent":["// External Libraries\nimport { useState, useRef, useCallback } from 'react'\n\n// Types\nimport type { InputProps } from '../../types'\n\nexport const useInput = ({\n  value: controlledValue,\n  defaultValue = '',\n  onChange,\n}: Partial<InputProps>) => {\n  // Refs\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // States\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  const [showPassword, setShowPassword] = useState(false)\n\n  // Constants\n  const isControlled = controlledValue !== undefined\n  const currentValue = isControlled ? controlledValue : internalValue\n\n  // Functions\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value\n\n      if (!isControlled) setInternalValue(value)\n      onChange?.(value)\n    },\n    [isControlled, onChange],\n  )\n\n  const togglePasswordVisibility = useCallback(() => {\n    setShowPassword(prev => !prev)\n  }, [])\n\n  const focusInput = useCallback(() => {\n    inputRef.current?.focus()\n  }, [])\n\n  return {\n    inputRef,\n    focusInput,\n    isControlled,\n    currentValue,\n    showPassword,\n    handleChange,\n    togglePasswordVisibility,\n  }\n}\n","// External libraries\nimport type { CSSProperties } from 'react'\n\n// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { InputProps } from './types'\n\nexport const INPUT_STYLES = {\n  width: {\n    auto: { width: 'auto' },\n    full: { width: '100%' },\n    md: { width: '12rem' },\n    lg: { width: '16rem' },\n    xl: { width: '20rem' },\n    '2xl': { width: '24rem' }\n  } as Record<string, CSSProperties>,\n  radius: {\n    none: { borderRadius: '0px' },\n    sm: { borderRadius: '0.125rem' },\n    md: { borderRadius: '0.375rem' },\n    lg: { borderRadius: '0.5rem' },\n    full: { borderRadius: '9999px' }\n  } as Record<string, CSSProperties>,\n  size: {\n    sm: {\n      wrapper: { minHeight: '2rem' },\n      input: {\n        padding: '0.5rem 0.75rem',\n        lineHeight: '1rem',\n        fontSize: '0.75rem'\n      },\n      label: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginBottom: '0.25rem'\n      },\n      description: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.25rem'\n      },\n      error: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.25rem'\n      }\n    } as Record<string, CSSProperties>,\n    md: {\n      wrapper: { minHeight: '2.5rem' },\n      input: {\n        padding: '0.5rem 0.75rem',\n        lineHeight: '1.25rem',\n        fontSize: '0.875rem'\n      },\n      label: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginBottom: '0.375rem'\n      },\n      description: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.375rem'\n      },\n      error: {\n        fontSize: '0.75rem',\n        lineHeight: '1rem',\n        marginTop: '0.375rem'\n      }\n    } as Record<string, CSSProperties>,\n    lg: {\n      wrapper: { minHeight: '3rem' },\n      input: {\n        padding: '0.75rem 1rem',\n        lineHeight: '1.5rem',\n        fontSize: '1rem',\n        width: '16rem'\n      },\n      label: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginBottom: '0.5rem'\n      },\n      description: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginTop: '0.5rem'\n      },\n      error: {\n        fontSize: '0.875rem',\n        lineHeight: '1.25rem',\n        marginTop: '0.5rem'\n      }\n    } as Record<string, CSSProperties>\n  },\n  variant: {\n    bordered: {\n      wrapper: { border: '1px solid var(--px-border-primary)' },\n      input: {\n        backgroundColor: 'transparent',\n        color: 'var(--px-text-primary)',\n        '::placeholder': {\n          color: 'var(--px-text-secondary)'\n        }\n      },\n      label: { color: 'var(--px-text-primary)' },\n      button: {\n        color: 'var(--px-text-secondary)',\n        ':hover': { color: 'var(--px-text-primary)' }\n      }\n    } as Record<string, CSSProperties>\n  },\n  state: {\n    default: {\n      input: {},\n      ring: {\n        boxShadow: '0 0 0 2px var(--px-color-info)'\n      }\n    },\n    invalid: {\n      wrapper: {\n        borderColor: 'var(--px-color-invalid)',\n        __rules: {\n          '&:focus-within': {\n            boxShadow:\n              '0 0 0 1px var(--px-background), 0 0 0 3px var(--px-color-invalid)'\n          }\n        }\n      },\n      input: {\n        color: 'var(--px-color-invalid)'\n      },\n      error: {\n        color: 'var(--px-color-invalid)'\n      }\n    },\n\n    disabled: {\n      wrapper: {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n        backgroundColor: '#f9fafb'\n      },\n      input: {\n        cursor: 'not-allowed'\n      },\n      label: {\n        cursor: 'not-allowed'\n      }\n    }\n  } as Record<string, Partial<StyleMap>>\n}\n\nexport function createInputStyles(props: InputProps): StyleMap {\n  const {\n    size = 'md',\n    variant = 'bordered',\n    radius = 'md',\n    isDisabled = false,\n    isInvalid = false,\n    focusedRingColor\n  } = props\n\n  const focusRingColor = focusedRingColor || 'var(--px-color-info)'\n\n  return styled({\n    wrapper: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n\n      ...(INPUT_STYLES.size[size]?.wrapper ?? {}),\n      ...(INPUT_STYLES.variant[variant]?.wrapper ?? {}),\n      ...(INPUT_STYLES.radius[radius] ?? {}),\n\n      __rules: {\n        '&:focus-within': {\n          boxShadow: `0 0 0 1px var(--px-background), 0 0 0 3px ${focusRingColor}`\n        }\n      },\n\n      ...(isDisabled ? INPUT_STYLES.state.disabled.wrapper : {}),\n      ...(isInvalid ? INPUT_STYLES.state.invalid.wrapper : {})\n    },\n\n    input: {\n      flex: 1,\n      backgroundColor: 'transparent',\n      outline: 'none',\n      width: '100%',\n\n      ...(INPUT_STYLES.size[size]?.input ?? {}),\n\n      ...(INPUT_STYLES.variant[variant]?.input ?? {}),\n      ...(INPUT_STYLES.state.default.input ?? {}),\n\n      ...(isDisabled ? INPUT_STYLES.state.disabled.input : {}),\n      ...(isInvalid ? INPUT_STYLES.state.invalid.input : {})\n    },\n\n    label: {\n      ...(INPUT_STYLES.size[size]?.label ?? {}),\n      ...(INPUT_STYLES.variant[variant]?.label ?? {}),\n\n      ...(isDisabled ? INPUT_STYLES.state.disabled.label : {})\n    },\n\n    error: {\n      display: 'block',\n\n      ...(INPUT_STYLES.size[size]?.error ?? {}),\n      ...(INPUT_STYLES.state.invalid.error ?? {})\n    },\n\n    button: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: '0.25rem',\n      cursor: 'pointer',\n\n      ...(INPUT_STYLES.variant[variant]?.button ?? {}),\n      ...(INPUT_STYLES.radius[radius] ?? {}),\n\n      ...(isDisabled ? { cursor: 'not-allowed', opacity: 0.5 } : {})\n    },\n\n    startContent: {\n      display: 'flex',\n      alignItems: 'center',\n      padding: '0.25rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { useId, useMemo } from 'react'\n\n// Components\nimport { Label } from '../../Label'\nimport { Icon } from '@components/toolkit/Icon'\n\n// Types\nimport type { InputProps } from './types'\n\n// Hooks\nimport { useInput } from './hooks/useInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createInputStyles, INPUT_STYLES } from './styles'\n\nexport const Input: React.FC<InputProps> = props => {\n  // Hooks\n  const {\n    id,\n    type,\n    label,\n    width,\n    fullWidth,\n    required,\n    isDisabled,\n    minLength,\n    maxLength,\n    placeholder,\n    requiredColor,\n    labelColor,\n    labelWeight,\n    labelVariant,\n    startContent,\n    endContent,\n    errorMessage,\n    onChange,\n    value,\n    defaultValue,\n    size,\n    radius,\n    variant,\n    isInvalid,\n    ...nativeInputProps\n  } = props\n\n  const {\n    inputRef,\n    currentValue,\n    showPassword,\n    handleChange,\n    togglePasswordVisibility\n  } = useInput({\n    size,\n    value,\n    radius,\n    variant,\n    isInvalid,\n    fullWidth,\n    isDisabled,\n    defaultValue,\n    onChange\n  })\n\n  // Constants\n  const reactId = useId()\n  const inputId = useMemo(() => {\n    return id || `input-${reactId}`\n  }, [id, reactId])\n  const containerWidth = getWidth()\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createInputStyles, {\n    pick: p => [\n      p.size,\n      p.variant,\n      p.radius,\n      p.isDisabled,\n      p.isInvalid,\n      p.focusedRingColor\n    ],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'input'\n  })\n\n  // Functions\n  function getType() {\n    if (type === 'password' && showPassword) return 'text'\n    return type\n  }\n\n  function getWidth() {\n    if (fullWidth) return { width: '100%' }\n    if (width) return INPUT_STYLES.width[width] || { width: 'auto' }\n    return { width: 'auto' }\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          styles={{ label: styles.label }}\n          requiredColor={requiredColor}\n          labelColor={labelColor}\n          labelWeight={labelWeight}\n          labelVariant={labelVariant}\n        />\n      </div>\n    )\n  }\n\n  function renderEndContent() {\n    return (\n      <>\n        {type === 'password' ? (\n          <button\n            type=\"button\"\n            style={styles.button}\n            onClick={togglePasswordVisibility}\n          >\n            {showPassword ? (\n              <Icon name={'general-eye-off'} />\n            ) : (\n              <Icon name={'general-eye'} />\n            )}\n          </button>\n        ) : (\n          endContent\n        )}\n      </>\n    )\n  }\n\n  return (\n    <div style={containerWidth}>\n      {renderLabel()}\n      <div style={styles.wrapper} className={classes.wrapper}>\n        {startContent && <div style={styles.startContent}>{startContent}</div>}\n        <div style={{ flex: 1 }}>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type={getType()}\n            value={currentValue}\n            style={styles.input}\n            className={classes.input}\n            disabled={isDisabled}\n            minLength={minLength}\n            maxLength={maxLength}\n            placeholder={placeholder ?? 'Digite aqui...'}\n            onChange={handleChange}\n            {...nativeInputProps}\n          />\n        </div>\n        {renderEndContent() && <div>{renderEndContent()}</div>}\n      </div>\n\n      {errorMessage ? <div style={styles.error}>{errorMessage}</div> : null}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/{TextArea-jpLThSHP.js → TextArea-CpIx36BV.js}

@@ -1,4 +1,4 @@
-import { t as Icon } from "./Icon-Djde8oXI.js";
+import { t as Icon } from "./Icon-Cv0qztmq.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";
@@ -111,4 +111,4 @@ const TextArea = (props) => {
 
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=TextArea-jpLThSHP.js.map
+//# sourceMappingURL=TextArea-CpIx36BV.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"TextArea-CpIx36BV.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/{ThemeContext-BsU2ZyE5.js → ThemeContext-BE6u_eYD.js}

@@ -96,8 +96,8 @@ const defaultThemes = {
 					background: "#0EB24C"
 				},
 				outlined: {
-					label: "#0EB24C",
-					borderColor: "#0EB24C"
+					label: "#222222",
+					borderColor: "#DDDDDD"
 				},
 				ghost: { label: "#6C6C6C" }
 			},
@@ -145,8 +145,8 @@ const defaultThemes = {
 					background: "#0EB24C"
 				},
 				outlined: {
-					label: "#0EB24C",
-					borderColor: "#0EB24C"
+					label: "#ECECEC",
+					borderColor: "#DDDDDD"
 				},
 				ghost: { label: "#6C6C6C" }
 			},
@@ -519,4 +519,4 @@ function useTheme() {
 
 //#endregion
 export { useTheme as n, ThemeProvider as t };
-//# sourceMappingURL=ThemeContext-BsU2ZyE5.js.map
+//# sourceMappingURL=ThemeContext-BE6u_eYD.js.map

package/dist/{ThemeContext-BsU2ZyE5.js.map → ThemeContext-BE6u_eYD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext-BsU2ZyE5.js","names":["result: any","out: any","defaultThemes: ThemeRegistry","ThemeProvider: React.FC<ThemeProviderProps>"],"sources":["../src/utils/functions/deepMerge.ts","../src/contexts/ThemeContext/constants.ts","../src/contexts/ThemeContext/utils/general.ts","../src/contexts/ThemeContext/utils/themeToCSSVars.ts","../src/contexts/ThemeContext/index.tsx"],"sourcesContent":["/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport type DeepPartial<T> = {\n  [P in keyof T]?: T[P] extends Array<infer U>\n    ? Array<DeepPartial<U>>\n    : T[P] extends object\n      ? DeepPartial<T[P]>\n      : T[P]\n}\n\nexport function deepMerge<T>(base: T, override?: DeepPartial<T>): T {\n  if (override === undefined) return clone(base)\n\n  if (!isPlainObject(base) || !isPlainObject(override)) {\n    return clone(override as T)\n  }\n\n  const result: any = Array.isArray(base) ? [] : {}\n\n  const baseKeys = Object.keys(base as any) as (keyof T)[]\n  const overrideKeys = Object.keys(override as any) as (keyof T)[]\n\n  const allKeys = Array.from(new Set([...baseKeys, ...overrideKeys]))\n\n  for (const k of allKeys) {\n    const baseVal = (base as any)[k]\n    const overrideVal = (override as any)[k]\n\n    if (overrideVal === undefined) {\n      result[k] = clone(baseVal)\n      continue\n    }\n\n    if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {\n      result[k] = deepMerge(baseVal, overrideVal)\n      continue\n    }\n\n    result[k] = clone(overrideVal)\n  }\n\n  return result as T\n}\n\nfunction isPlainObject(x: any): x is Record<string, any> {\n  return !!x && typeof x === 'object' && !Array.isArray(x)\n}\n\nfunction clone<T>(v: T): T {\n  if (v === undefined || v === null) return v\n  if (Array.isArray(v)) return v.map(item => clone(item)) as unknown as T\n  if (isPlainObject(v)) {\n    const out: any = {}\n    for (const k of Object.keys(v)) out[k] = clone((v as any)[k])\n    return out\n  }\n  return v\n}\n","// theme/defaultThemes.ts\nimport type { ThemeRegistry } from './types'\n\nconst COMMON_MAP = {\n  spacing: {\n    xs: '0.25rem', // 4px\n    sm: '0.5rem', // 8px\n    md: '1rem', // 16px\n    lg: '1.5rem', // 24px\n    xl: '2rem', // 32px\n    '2xl': '3rem' // 48px\n  },\n  borderRadius: {\n    none: '0rem', // 0px\n    sm: '0.25rem', // 4px\n    md: '0.375rem', // 6px\n    lg: '0.5rem', // 8px\n    full: '9999rem' // \"infinite\" radius equivalent\n  },\n  fontSize: {\n    xs: '0.75rem', // 12px\n    sm: '0.875rem', // 14px\n    md: '1rem', // 16px\n    lg: '1.125rem', // 18px\n    xl: '1.25rem', // 20px\n    '2xl': '1.5rem' // 24px\n  },\n  fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 }\n} as const\n\nexport const defaultThemes: ThemeRegistry = {\n  light: {\n    colors: {\n      scrollbar: '#0000001a',\n      disabled: '#D5D7DA',\n\n      primary: '#0EB24C',\n      secondary: '#6C6C6C',\n      success: '#0EB24C',\n      warning: '#f59e0b',\n      error: '#ef4444',\n      invalid: '#f87171',\n      info: '#06b6d4',\n\n      background: {\n        primary: '#FFFFFF',\n        card: {\n          primary: '#F4F4F4',\n          secondary: '#F3F6F9'\n        }\n      },\n      button: {\n        filled: {\n          label: '#FFFFFF',\n          background: '#0EB24C'\n        },\n\n        outlined: {\n          label: '#0EB24C',\n          borderColor: '#0EB24C'\n        },\n\n        ghost: {\n          label: '#6C6C6C'\n        }\n      },\n\n      surface: '#FBFBFB',\n      border: {\n        primary: '#E8E8E9',\n        secondary: '#E8E8E9'\n      },\n\n      text: {\n        primary: '#222222',\n        secondary: '#6C6C6C',\n        disabled: '#A0A0A0',\n        inverse: '#FFFFFF'\n      }\n    },\n\n    ...COMMON_MAP,\n\n    shadows: {\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.10)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.10)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.10)'\n    }\n  },\n\n  dark: {\n    colors: {\n      scrollbar: '#858585',\n      disabled: '#D5D7DA',\n\n      primary: '#0EB24C', // brand se mantém (ou pode clarear depois)\n      secondary: '#C7CFD8',\n      success: '#0EB24C',\n      warning: '#f59e0b',\n      error: '#ef4444',\n      invalid: '#f87171',\n      info: '#06b6d4',\n\n      background: {\n        primary: '#090909',\n        card: {\n          primary: '#F4F4F4',\n          secondary: '#202020'\n        }\n      },\n      button: {\n        filled: {\n          label: '#FFFFFF',\n          background: '#0EB24C'\n        },\n\n        outlined: {\n          label: '#0EB24C',\n          borderColor: '#0EB24C'\n        },\n\n        ghost: {\n          label: '#6C6C6C'\n        }\n      },\n\n      surface: '#090909',\n\n      border: {\n        primary: '#27282D',\n        secondary: '#27282D'\n      },\n\n      text: {\n        primary: '#ECECEC',\n        secondary: '#C7CFD8',\n        disabled: '#8B93A0',\n        inverse: '#090909'\n      }\n    },\n\n    ...COMMON_MAP,\n\n    shadows: {\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.35)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.45)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.50)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.55)'\n    }\n  }\n}\n","// Utils\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport { deepMerge } from '@utils/functions'\nimport { defaultThemes } from '../constants'\n\n// Types\nimport type { ThemeMode, ThemeRegistry, ThemeTokens } from '../types'\n\n/**\n * Theme Utilities\n * ===============\n * Small DOM utilities used by the ThemeProvider to:\n * - toggle dark mode class for Tailwind compatibility\n * - inject CSS variables (`--px-*`) into the document root\n * - read/watch the OS/browser theme preference (`prefers-color-scheme`)\n *\n * These helpers are:\n * - **client-safe** (guarded for SSR)\n * - **framework-agnostic** (only touch `documentElement`)\n * - **tiny** (no dependencies)\n */\n\n/**\n * CSSVarMap\n * ---------\n * A map of CSS custom properties to be applied on the document root.\n *\n * Notes:\n * - Keys must be valid CSS variable names (e.g. `\"--px-bg\"`, `\"--px-text-primary\"`).\n * - Values can be strings or numbers.\n *   - If you store numbers (e.g. 16), you decide at consumption time whether it means px.\n *\n * You can keep it generic:\n *   Record<`--${string}`, string | number>\n *\n * Or restrict to your library prefix:\n *   Record<`--px-${string}`, string | number>\n */\nexport type CSSVarMap = Partial<Record<`--${string}`, string | number>>\n\n/**\n * applyThemeClass(themeName)\n * -------------------------\n * Applies the light/dark mode class to the `<html>` element.\n *\n * Tailwind’s dark mode (in the common \"class\" strategy) typically relies on a\n * `.dark` class. This function toggles ONLY the `dark` class:\n *\n * - themeName `\"dark\"`  => adds `.dark`\n * - themeName `\"light\"` => removes `.dark`\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyThemeClass(themeName: 'light' | 'dark') {\n  if (typeof document === 'undefined') return\n  const root = document.documentElement\n  root.classList.toggle('dark', themeName === 'dark')\n}\n\n/**\n * applyCssVars(vars)\n * ------------------\n * Injects CSS variables into the document root (`<html>`).\n *\n * This is how the library exposes theme tokens as CSS variables.\n * Components can then use `var(--px-...)` in styles.\n *\n * Example:\n * ```ts\n * applyCssVars({ '--px-bg': '#fff', '--px-text-primary': '#111' })\n * ```\n *\n * Behavior:\n * - Ignores `null` / `undefined` values.\n * - Converts all values to string before applying.\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyCssVars(vars: CSSVarMap) {\n  if (typeof document === 'undefined') return\n  const root = document.documentElement\n\n  for (const [key, value] of Object.entries(vars)) {\n    if (value == null) continue\n    root.style.setProperty(key, String(value))\n  }\n}\n\n/**\n * getSystemThemeName()\n * --------------------\n * Returns the current OS/browser color scheme preference.\n *\n * It reads `prefers-color-scheme: dark` using `window.matchMedia`.\n *\n * Returns:\n * - `\"dark\"` if the user prefers dark mode\n * - `\"light\"` otherwise\n *\n * SSR:\n * - Returns `\"light\"` on the server (safe default).\n */\nexport function getSystemThemeName(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light'\n  const prefersDark =\n    window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false\n  return prefersDark ? 'dark' : 'light'\n}\n\n/**\n * watchSystemTheme(onChange)\n * --------------------------\n * Subscribes to changes in OS/browser theme preference.\n *\n * Use this when your selected mode is `\"system\"` so the app immediately reacts\n * when the user changes their OS theme.\n *\n * - Calls `onChange('light' | 'dark')` whenever the preference changes.\n * - Returns an `unsubscribe()` function.\n *\n * Implementation details:\n * - Uses `matchMedia('(prefers-color-scheme: dark)')`.\n * - Supports both modern `addEventListener('change', ...)` and legacy Safari\n *   `addListener(...)` APIs.\n *\n * SSR:\n * - Returns a no-op unsubscribe function on the server.\n */\nexport function watchSystemTheme(onChange: (name: 'light' | 'dark') => void) {\n  if (typeof window === 'undefined') return () => {}\n\n  const mq = window.matchMedia('(prefers-color-scheme: dark)')\n\n  const handler = () => onChange(mq.matches ? 'dark' : 'light')\n\n  // Optional: sync immediately on subscribe\n  handler()\n\n  // Modern browsers\n  if (mq.addEventListener) {\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }\n\n  // Legacy Safari\n  mq.addListener(handler as any)\n  return () => mq.removeListener(handler as any)\n}\n\n/**\n * Resolves an effective theme name from a mode.\n */\nexport function resolveName(mode: ThemeMode): string {\n  if (mode !== 'system') return mode\n  return getSystemThemeName()\n}\n\n/**\n * Builds a registry of user theme patches.\n */\nexport function buildRegistry(\n  userThemes?: Partial<ThemeRegistry>\n): ThemeRegistry {\n  return {\n    light: {},\n    dark: {},\n    ...(userThemes ?? {})\n  } as ThemeRegistry\n}\n\n/**\n * Builds the final resolved theme tokens.\n */\nexport function buildTheme(\n  registry: ThemeRegistry,\n  resolvedName: string,\n  override?: Partial<ThemeTokens>\n): ThemeTokens {\n  const base: ThemeTokens =\n    resolvedName === 'dark'\n      ? (defaultThemes.dark as ThemeTokens)\n      : (defaultThemes.light as ThemeTokens)\n\n  const selectedPatch = (registry[resolvedName] ?? registry.light) as any\n\n  const merged = deepMerge(base, selectedPatch)\n  return deepMerge(merged, override)\n}\n\nexport function isThemeMode(value: unknown): value is ThemeMode {\n  return typeof value === 'string' && value.length > 0\n}\n\nexport function getLocalStorageSafe(): Storage | null {\n  if (typeof window === 'undefined') return null\n  try {\n    return window.localStorage\n  } catch {\n    return null\n  }\n}\n","// Types\nimport type { CSSVarMap } from './general'\nimport type { ThemeTokens } from '../types'\n\n/**\n * themeToCssVars(theme)\n * ---------------------\n * Converts a resolved `ThemeTokens` object into a CSS variable map (`CSSVarMap`).\n *\n * The ThemeProvider uses this function to inject `--px-*` variables into the\n * document root (`<html>`). Components can then rely on stable CSS variables,\n * making them framework-agnostic and compatible with Tailwind (via `.dark`).\n *\n * Why CSS variables?\n * - They are fast (native to the browser)\n * - They work across any styling strategy (inline styles, CSS modules, Tailwind, etc.)\n * - They enable dynamic theme switching without rerendering every component\n *\n * Requirements / Assumptions:\n * - The input `theme` must be **fully resolved** (i.e. complete `ThemeTokens`).\n *   The ThemeProvider is responsible for merging partial theme patches on top\n *   of a complete base theme (light/dark defaults).\n *\n * Variable naming:\n * - All variables are prefixed with `--px-` to avoid collisions.\n * - Tokens are grouped by category (colors, surfaces, borders, text, spacing, radius, typography, shadows).\n *\n * Notes:\n * - Spacing/radius/fontSize tokens are stored as numbers (e.g. `16`), which is valid\n *   for CSS variables. When consuming them, you can:\n *   - append `px` in JS (`${var}px`), or\n *   - store them as strings here (e.g. `\"16px\"`) if you prefer.\n *\n * Example usage (component styles):\n * ```ts\n * const styles = {\n *   background: 'var(--px-bg)',\n *   color: 'var(--px-text-primary)',\n *   borderColor: 'var(--px-border-primary)',\n * }\n * ```\n *\n * Example usage (Tailwind config / CSS):\n * ```css\n * .card {\n *   background: var(--px-surface);\n *   color: var(--px-text-primary);\n *   border: 1px solid var(--px-border-primary);\n * }\n * ```\n */\nexport function themeToCssVars(theme: ThemeTokens): CSSVarMap {\n  return {\n    /**\n     * Brand & intent colors\n     */\n    '--px-color-primary': theme.colors.primary,\n    '--px-color-secondary': theme.colors.secondary,\n    '--px-color-success': theme.colors.success,\n    '--px-color-warning': theme.colors.warning,\n    '--px-color-error': theme.colors.error,\n    '--px-color-invalid': theme.colors.invalid,\n    '--px-color-info': theme.colors.info,\n    '--px-color-disabled': theme.colors.disabled,\n\n    /**\n     * Scrollbar\n     */\n    '--px-scrollbar': theme.colors.scrollbar,\n\n    /**\n     * Surfaces / backgrounds\n     */\n    '--px-bg': theme.colors.background.primary,\n    '--px-surface': theme.colors.surface,\n    '--px-background-card-primary': theme.colors.background.card.primary,\n    '--px-background-card-secondary': theme.colors.background.card.secondary,\n\n    /**\n     * Borders\n     * -------\n     * Divider and outline colors.\n     */\n    '--px-border-primary': theme.colors.border.primary,\n    '--px-border-secondary': theme.colors.border.secondary,\n\n    /**\n     * Text\n     * ----\n     * Text colors for different emphasis levels.\n     */\n    '--px-text-primary': theme.colors.text.primary,\n    '--px-text-secondary': theme.colors.text.secondary,\n    '--px-text-disabled': theme.colors.text.disabled,\n    '--px-text-inverse': theme.colors.text.inverse,\n\n    /**\n     * Buttons – Filled\n     * ----------------\n     * Filled button colors\n     */\n    '--px-btn-filled-bg': theme.colors.button.filled.background,\n    '--px-btn-filled-label': theme.colors.button.filled.label,\n\n    /**\n     * Buttons – Outlined\n     * ------------------\n     * Outlined button colors\n     */\n    '--px-btn-outlined-border': theme.colors.button.outlined.borderColor,\n    '--px-btn-outlined-label': theme.colors.button.outlined.label,\n\n    /**\n     * Buttons – Ghost\n     * --------------\n     * Ghost button colors\n     */\n    '--px-btn-ghost-label': theme.colors.button.ghost.label,\n    /**\n     * Spacing\n     * -------------\n     * Numeric spacing tokens (commonly used as px).\n     */\n    '--px-space-xs': theme.spacing.xs,\n    '--px-space-sm': theme.spacing.sm,\n    '--px-space-md': theme.spacing.md,\n    '--px-space-lg': theme.spacing.lg,\n    '--px-space-xl': theme.spacing.xl,\n    '--px-space-2xl': theme.spacing['2xl'],\n\n    /**\n     * Border radius scale\n     * -------------------\n     * Numeric radius tokens (commonly used as px).\n     */\n    '--px-radius-none': theme.borderRadius.none,\n    '--px-radius-sm': theme.borderRadius.sm,\n    '--px-radius-md': theme.borderRadius.md,\n    '--px-radius-lg': theme.borderRadius.lg,\n    '--px-radius-full': theme.borderRadius.full,\n\n    /**\n     * Typography scale\n     * ----------------\n     * Font sizes and font weights.\n     */\n    '--px-fs-xs': theme.fontSize.xs,\n    '--px-fs-sm': theme.fontSize.sm,\n    '--px-fs-md': theme.fontSize.md,\n    '--px-fs-lg': theme.fontSize.lg,\n    '--px-fs-xl': theme.fontSize.xl,\n    '--px-fs-2xl': theme.fontSize['2xl'],\n\n    '--px-fw-normal': theme.fontWeight.normal,\n    '--px-fw-medium': theme.fontWeight.medium,\n    '--px-fw-semibold': theme.fontWeight.semibold,\n    '--px-fw-bold': theme.fontWeight.bold,\n\n    /**\n     * Shadows\n     * -------\n     * CSS shadow strings for elevation.\n     */\n    '--px-shadow-sm': theme.shadows.sm,\n    '--px-shadow-md': theme.shadows.md,\n    '--px-shadow-lg': theme.shadows.lg,\n    '--px-shadow-xl': theme.shadows.xl\n  }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n'use client'\n\n// External Libraries\nimport {\n  useMemo,\n  useState,\n  useEffect,\n  useContext,\n  createContext,\n  useLayoutEffect\n} from 'react'\n\n// Utils\nimport {\n  buildTheme,\n  isThemeMode,\n  resolveName,\n  applyCssVars,\n  buildRegistry,\n  themeToCssVars,\n  applyThemeClass,\n  watchSystemTheme,\n  getLocalStorageSafe\n} from './utils'\n\n// Types\nimport type { ThemeMode, ThemeContextData, ThemeProviderProps } from './types'\n\nexport * from './types'\n\nconst ThemeContext = createContext<ThemeContextData | null>(null)\n\n/**\n * useIsomorphicLayoutEffect\n * - On client: runs before paint (layout effect)\n * - On server: falls back to useEffect (no warnings)\n */\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  themes,\n  children,\n  override,\n  persistence,\n  persist = false,\n  defaultMode = 'system',\n  storageKey = 'px-theme',\n  fallback = null\n}) => {\n  const registry = useMemo(() => buildRegistry(themes), [themes])\n\n  function makeInitialMode(): ThemeMode {\n    // 1) advanced adapter\n    if (persistence) {\n      try {\n        const saved = persistence.get()\n        return (saved ?? defaultMode) as ThemeMode\n      } catch {\n        return defaultMode\n      }\n    }\n\n    // 2) quick localStorage mode\n    if (persist) {\n      const ls = getLocalStorageSafe()\n      if (!ls) return defaultMode\n      const raw = ls.getItem(storageKey)\n      return isThemeMode(raw) ? raw : defaultMode\n    }\n\n    // 3) fallback\n    return defaultMode\n  }\n\n  const [mode, setMode] = useState<ThemeMode>(makeInitialMode)\n\n  /**\n   * Gate: only render children after we applied class + vars at least once.\n   * This prevents \"unstyled flash\" for your components.\n   */\n  const [isReady, setReady] = useState(false)\n\n  const resolvedName = useMemo(() => {\n    if (typeof window === 'undefined') return mode === 'system' ? 'light' : mode\n    return resolveName(mode)\n  }, [mode])\n\n  const theme = useMemo(\n    () => buildTheme(registry, resolvedName, override),\n    [registry, resolvedName, override]\n  )\n\n  // keep in sync with OS when mode === \"system\"\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    if (mode !== 'system') return\n\n    return watchSystemTheme(() => {\n      setMode('system')\n    })\n  }, [mode])\n\n  /**\n   * Apply theme BEFORE paint (client) and then unlock rendering.\n   */\n  useIsomorphicLayoutEffect(() => {\n    if (typeof window === 'undefined') return\n\n    applyThemeClass(resolvedName === 'dark' ? 'dark' : 'light')\n    applyCssVars(themeToCssVars(theme))\n\n    // unlock after first successful application\n    setReady(true)\n  }, [resolvedName, theme])\n\n  /**\n   * Persist mode changes (optional).\n   */\n  useEffect(() => {\n    if (persistence) {\n      try {\n        persistence.set(mode)\n      } catch {}\n      return\n    }\n\n    if (!persist) return\n    const ls = getLocalStorageSafe()\n    if (!ls) return\n\n    try {\n      ls.setItem(storageKey, mode)\n    } catch {}\n  }, [mode, persist, storageKey, persistence])\n\n  function setTheme(next: ThemeMode) {\n    setMode(next)\n  }\n\n  function toggleTheme(a: string = 'light', b: string = 'dark') {\n    setMode(resolvedName === a ? b : a)\n  }\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n  const ctxValue = useMemo(\n    () => ({\n      mode,\n      resolvedName,\n      theme,\n      isLoading: !isReady,\n      setTheme,\n      toggleTheme\n    }),\n    [mode, resolvedName, theme, isReady]\n  )\n\n  return (\n    <ThemeContext.Provider value={ctxValue}>\n      {isReady ? children : fallback}\n    </ThemeContext.Provider>\n  )\n}\n\nexport function useTheme(): ThemeContextData {\n  const ctx = useContext(ThemeContext)\n  if (!ctx) throw new Error('useTheme must be used within a ThemeProvider')\n  return ctx\n}\n"],"mappings":"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"}
+{"version":3,"file":"ThemeContext-BE6u_eYD.js","names":["result: any","out: any","defaultThemes: ThemeRegistry","ThemeProvider: React.FC<ThemeProviderProps>"],"sources":["../src/utils/functions/deepMerge.ts","../src/contexts/ThemeContext/constants.ts","../src/contexts/ThemeContext/utils/general.ts","../src/contexts/ThemeContext/utils/themeToCSSVars.ts","../src/contexts/ThemeContext/index.tsx"],"sourcesContent":["/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport type DeepPartial<T> = {\n  [P in keyof T]?: T[P] extends Array<infer U>\n    ? Array<DeepPartial<U>>\n    : T[P] extends object\n      ? DeepPartial<T[P]>\n      : T[P]\n}\n\nexport function deepMerge<T>(base: T, override?: DeepPartial<T>): T {\n  if (override === undefined) return clone(base)\n\n  if (!isPlainObject(base) || !isPlainObject(override)) {\n    return clone(override as T)\n  }\n\n  const result: any = Array.isArray(base) ? [] : {}\n\n  const baseKeys = Object.keys(base as any) as (keyof T)[]\n  const overrideKeys = Object.keys(override as any) as (keyof T)[]\n\n  const allKeys = Array.from(new Set([...baseKeys, ...overrideKeys]))\n\n  for (const k of allKeys) {\n    const baseVal = (base as any)[k]\n    const overrideVal = (override as any)[k]\n\n    if (overrideVal === undefined) {\n      result[k] = clone(baseVal)\n      continue\n    }\n\n    if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {\n      result[k] = deepMerge(baseVal, overrideVal)\n      continue\n    }\n\n    result[k] = clone(overrideVal)\n  }\n\n  return result as T\n}\n\nfunction isPlainObject(x: any): x is Record<string, any> {\n  return !!x && typeof x === 'object' && !Array.isArray(x)\n}\n\nfunction clone<T>(v: T): T {\n  if (v === undefined || v === null) return v\n  if (Array.isArray(v)) return v.map(item => clone(item)) as unknown as T\n  if (isPlainObject(v)) {\n    const out: any = {}\n    for (const k of Object.keys(v)) out[k] = clone((v as any)[k])\n    return out\n  }\n  return v\n}\n","// theme/defaultThemes.ts\nimport type { ThemeRegistry } from './types'\n\nconst COMMON_MAP = {\n  spacing: {\n    xs: '0.25rem', // 4px\n    sm: '0.5rem', // 8px\n    md: '1rem', // 16px\n    lg: '1.5rem', // 24px\n    xl: '2rem', // 32px\n    '2xl': '3rem' // 48px\n  },\n  borderRadius: {\n    none: '0rem', // 0px\n    sm: '0.25rem', // 4px\n    md: '0.375rem', // 6px\n    lg: '0.5rem', // 8px\n    full: '9999rem' // \"infinite\" radius equivalent\n  },\n  fontSize: {\n    xs: '0.75rem', // 12px\n    sm: '0.875rem', // 14px\n    md: '1rem', // 16px\n    lg: '1.125rem', // 18px\n    xl: '1.25rem', // 20px\n    '2xl': '1.5rem' // 24px\n  },\n  fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 }\n} as const\n\nexport const defaultThemes: ThemeRegistry = {\n  light: {\n    colors: {\n      scrollbar: '#0000001a',\n      disabled: '#D5D7DA',\n\n      primary: '#0EB24C',\n      secondary: '#6C6C6C',\n      success: '#0EB24C',\n      warning: '#f59e0b',\n      error: '#ef4444',\n      invalid: '#f87171',\n      info: '#06b6d4',\n\n      background: {\n        primary: '#FFFFFF',\n        card: {\n          primary: '#F4F4F4',\n          secondary: '#F3F6F9'\n        }\n      },\n      button: {\n        filled: {\n          label: '#FFFFFF',\n          background: '#0EB24C'\n        },\n\n        outlined: {\n          label: '#222222',\n          borderColor: '#DDDDDD'\n        },\n\n        ghost: {\n          label: '#6C6C6C'\n        }\n      },\n\n      surface: '#FBFBFB',\n      border: {\n        primary: '#E8E8E9',\n        secondary: '#E8E8E9'\n      },\n\n      text: {\n        primary: '#222222',\n        secondary: '#6C6C6C',\n        disabled: '#A0A0A0',\n        inverse: '#FFFFFF'\n      }\n    },\n\n    ...COMMON_MAP,\n\n    shadows: {\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.10)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.10)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.10)'\n    }\n  },\n\n  dark: {\n    colors: {\n      scrollbar: '#858585',\n      disabled: '#D5D7DA',\n\n      primary: '#0EB24C', // brand se mantém (ou pode clarear depois)\n      secondary: '#C7CFD8',\n      success: '#0EB24C',\n      warning: '#f59e0b',\n      error: '#ef4444',\n      invalid: '#f87171',\n      info: '#06b6d4',\n\n      background: {\n        primary: '#090909',\n        card: {\n          primary: '#F4F4F4',\n          secondary: '#202020'\n        }\n      },\n      button: {\n        filled: {\n          label: '#FFFFFF',\n          background: '#0EB24C'\n        },\n\n        outlined: {\n          label: '#ECECEC',\n          borderColor: '#DDDDDD'\n        },\n\n        ghost: {\n          label: '#6C6C6C'\n        }\n      },\n\n      surface: '#090909',\n\n      border: {\n        primary: '#27282D',\n        secondary: '#27282D'\n      },\n\n      text: {\n        primary: '#ECECEC',\n        secondary: '#C7CFD8',\n        disabled: '#8B93A0',\n        inverse: '#090909'\n      }\n    },\n\n    ...COMMON_MAP,\n\n    shadows: {\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.35)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.45)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.50)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.55)'\n    }\n  }\n}\n","// Utils\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport { deepMerge } from '@utils/functions'\nimport { defaultThemes } from '../constants'\n\n// Types\nimport type { ThemeMode, ThemeRegistry, ThemeTokens } from '../types'\n\n/**\n * Theme Utilities\n * ===============\n * Small DOM utilities used by the ThemeProvider to:\n * - toggle dark mode class for Tailwind compatibility\n * - inject CSS variables (`--px-*`) into the document root\n * - read/watch the OS/browser theme preference (`prefers-color-scheme`)\n *\n * These helpers are:\n * - **client-safe** (guarded for SSR)\n * - **framework-agnostic** (only touch `documentElement`)\n * - **tiny** (no dependencies)\n */\n\n/**\n * CSSVarMap\n * ---------\n * A map of CSS custom properties to be applied on the document root.\n *\n * Notes:\n * - Keys must be valid CSS variable names (e.g. `\"--px-bg\"`, `\"--px-text-primary\"`).\n * - Values can be strings or numbers.\n *   - If you store numbers (e.g. 16), you decide at consumption time whether it means px.\n *\n * You can keep it generic:\n *   Record<`--${string}`, string | number>\n *\n * Or restrict to your library prefix:\n *   Record<`--px-${string}`, string | number>\n */\nexport type CSSVarMap = Partial<Record<`--${string}`, string | number>>\n\n/**\n * applyThemeClass(themeName)\n * -------------------------\n * Applies the light/dark mode class to the `<html>` element.\n *\n * Tailwind’s dark mode (in the common \"class\" strategy) typically relies on a\n * `.dark` class. This function toggles ONLY the `dark` class:\n *\n * - themeName `\"dark\"`  => adds `.dark`\n * - themeName `\"light\"` => removes `.dark`\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyThemeClass(themeName: 'light' | 'dark') {\n  if (typeof document === 'undefined') return\n  const root = document.documentElement\n  root.classList.toggle('dark', themeName === 'dark')\n}\n\n/**\n * applyCssVars(vars)\n * ------------------\n * Injects CSS variables into the document root (`<html>`).\n *\n * This is how the library exposes theme tokens as CSS variables.\n * Components can then use `var(--px-...)` in styles.\n *\n * Example:\n * ```ts\n * applyCssVars({ '--px-bg': '#fff', '--px-text-primary': '#111' })\n * ```\n *\n * Behavior:\n * - Ignores `null` / `undefined` values.\n * - Converts all values to string before applying.\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyCssVars(vars: CSSVarMap) {\n  if (typeof document === 'undefined') return\n  const root = document.documentElement\n\n  for (const [key, value] of Object.entries(vars)) {\n    if (value == null) continue\n    root.style.setProperty(key, String(value))\n  }\n}\n\n/**\n * getSystemThemeName()\n * --------------------\n * Returns the current OS/browser color scheme preference.\n *\n * It reads `prefers-color-scheme: dark` using `window.matchMedia`.\n *\n * Returns:\n * - `\"dark\"` if the user prefers dark mode\n * - `\"light\"` otherwise\n *\n * SSR:\n * - Returns `\"light\"` on the server (safe default).\n */\nexport function getSystemThemeName(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light'\n  const prefersDark =\n    window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false\n  return prefersDark ? 'dark' : 'light'\n}\n\n/**\n * watchSystemTheme(onChange)\n * --------------------------\n * Subscribes to changes in OS/browser theme preference.\n *\n * Use this when your selected mode is `\"system\"` so the app immediately reacts\n * when the user changes their OS theme.\n *\n * - Calls `onChange('light' | 'dark')` whenever the preference changes.\n * - Returns an `unsubscribe()` function.\n *\n * Implementation details:\n * - Uses `matchMedia('(prefers-color-scheme: dark)')`.\n * - Supports both modern `addEventListener('change', ...)` and legacy Safari\n *   `addListener(...)` APIs.\n *\n * SSR:\n * - Returns a no-op unsubscribe function on the server.\n */\nexport function watchSystemTheme(onChange: (name: 'light' | 'dark') => void) {\n  if (typeof window === 'undefined') return () => {}\n\n  const mq = window.matchMedia('(prefers-color-scheme: dark)')\n\n  const handler = () => onChange(mq.matches ? 'dark' : 'light')\n\n  // Optional: sync immediately on subscribe\n  handler()\n\n  // Modern browsers\n  if (mq.addEventListener) {\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }\n\n  // Legacy Safari\n  mq.addListener(handler as any)\n  return () => mq.removeListener(handler as any)\n}\n\n/**\n * Resolves an effective theme name from a mode.\n */\nexport function resolveName(mode: ThemeMode): string {\n  if (mode !== 'system') return mode\n  return getSystemThemeName()\n}\n\n/**\n * Builds a registry of user theme patches.\n */\nexport function buildRegistry(\n  userThemes?: Partial<ThemeRegistry>\n): ThemeRegistry {\n  return {\n    light: {},\n    dark: {},\n    ...(userThemes ?? {})\n  } as ThemeRegistry\n}\n\n/**\n * Builds the final resolved theme tokens.\n */\nexport function buildTheme(\n  registry: ThemeRegistry,\n  resolvedName: string,\n  override?: Partial<ThemeTokens>\n): ThemeTokens {\n  const base: ThemeTokens =\n    resolvedName === 'dark'\n      ? (defaultThemes.dark as ThemeTokens)\n      : (defaultThemes.light as ThemeTokens)\n\n  const selectedPatch = (registry[resolvedName] ?? registry.light) as any\n\n  const merged = deepMerge(base, selectedPatch)\n  return deepMerge(merged, override)\n}\n\nexport function isThemeMode(value: unknown): value is ThemeMode {\n  return typeof value === 'string' && value.length > 0\n}\n\nexport function getLocalStorageSafe(): Storage | null {\n  if (typeof window === 'undefined') return null\n  try {\n    return window.localStorage\n  } catch {\n    return null\n  }\n}\n","// Types\nimport type { CSSVarMap } from './general'\nimport type { ThemeTokens } from '../types'\n\n/**\n * themeToCssVars(theme)\n * ---------------------\n * Converts a resolved `ThemeTokens` object into a CSS variable map (`CSSVarMap`).\n *\n * The ThemeProvider uses this function to inject `--px-*` variables into the\n * document root (`<html>`). Components can then rely on stable CSS variables,\n * making them framework-agnostic and compatible with Tailwind (via `.dark`).\n *\n * Why CSS variables?\n * - They are fast (native to the browser)\n * - They work across any styling strategy (inline styles, CSS modules, Tailwind, etc.)\n * - They enable dynamic theme switching without rerendering every component\n *\n * Requirements / Assumptions:\n * - The input `theme` must be **fully resolved** (i.e. complete `ThemeTokens`).\n *   The ThemeProvider is responsible for merging partial theme patches on top\n *   of a complete base theme (light/dark defaults).\n *\n * Variable naming:\n * - All variables are prefixed with `--px-` to avoid collisions.\n * - Tokens are grouped by category (colors, surfaces, borders, text, spacing, radius, typography, shadows).\n *\n * Notes:\n * - Spacing/radius/fontSize tokens are stored as numbers (e.g. `16`), which is valid\n *   for CSS variables. When consuming them, you can:\n *   - append `px` in JS (`${var}px`), or\n *   - store them as strings here (e.g. `\"16px\"`) if you prefer.\n *\n * Example usage (component styles):\n * ```ts\n * const styles = {\n *   background: 'var(--px-bg)',\n *   color: 'var(--px-text-primary)',\n *   borderColor: 'var(--px-border-primary)',\n * }\n * ```\n *\n * Example usage (Tailwind config / CSS):\n * ```css\n * .card {\n *   background: var(--px-surface);\n *   color: var(--px-text-primary);\n *   border: 1px solid var(--px-border-primary);\n * }\n * ```\n */\nexport function themeToCssVars(theme: ThemeTokens): CSSVarMap {\n  return {\n    /**\n     * Brand & intent colors\n     */\n    '--px-color-primary': theme.colors.primary,\n    '--px-color-secondary': theme.colors.secondary,\n    '--px-color-success': theme.colors.success,\n    '--px-color-warning': theme.colors.warning,\n    '--px-color-error': theme.colors.error,\n    '--px-color-invalid': theme.colors.invalid,\n    '--px-color-info': theme.colors.info,\n    '--px-color-disabled': theme.colors.disabled,\n\n    /**\n     * Scrollbar\n     */\n    '--px-scrollbar': theme.colors.scrollbar,\n\n    /**\n     * Surfaces / backgrounds\n     */\n    '--px-bg': theme.colors.background.primary,\n    '--px-surface': theme.colors.surface,\n    '--px-background-card-primary': theme.colors.background.card.primary,\n    '--px-background-card-secondary': theme.colors.background.card.secondary,\n\n    /**\n     * Borders\n     * -------\n     * Divider and outline colors.\n     */\n    '--px-border-primary': theme.colors.border.primary,\n    '--px-border-secondary': theme.colors.border.secondary,\n\n    /**\n     * Text\n     * ----\n     * Text colors for different emphasis levels.\n     */\n    '--px-text-primary': theme.colors.text.primary,\n    '--px-text-secondary': theme.colors.text.secondary,\n    '--px-text-disabled': theme.colors.text.disabled,\n    '--px-text-inverse': theme.colors.text.inverse,\n\n    /**\n     * Buttons – Filled\n     * ----------------\n     * Filled button colors\n     */\n    '--px-btn-filled-bg': theme.colors.button.filled.background,\n    '--px-btn-filled-label': theme.colors.button.filled.label,\n\n    /**\n     * Buttons – Outlined\n     * ------------------\n     * Outlined button colors\n     */\n    '--px-btn-outlined-border': theme.colors.button.outlined.borderColor,\n    '--px-btn-outlined-label': theme.colors.button.outlined.label,\n\n    /**\n     * Buttons – Ghost\n     * --------------\n     * Ghost button colors\n     */\n    '--px-btn-ghost-label': theme.colors.button.ghost.label,\n    /**\n     * Spacing\n     * -------------\n     * Numeric spacing tokens (commonly used as px).\n     */\n    '--px-space-xs': theme.spacing.xs,\n    '--px-space-sm': theme.spacing.sm,\n    '--px-space-md': theme.spacing.md,\n    '--px-space-lg': theme.spacing.lg,\n    '--px-space-xl': theme.spacing.xl,\n    '--px-space-2xl': theme.spacing['2xl'],\n\n    /**\n     * Border radius scale\n     * -------------------\n     * Numeric radius tokens (commonly used as px).\n     */\n    '--px-radius-none': theme.borderRadius.none,\n    '--px-radius-sm': theme.borderRadius.sm,\n    '--px-radius-md': theme.borderRadius.md,\n    '--px-radius-lg': theme.borderRadius.lg,\n    '--px-radius-full': theme.borderRadius.full,\n\n    /**\n     * Typography scale\n     * ----------------\n     * Font sizes and font weights.\n     */\n    '--px-fs-xs': theme.fontSize.xs,\n    '--px-fs-sm': theme.fontSize.sm,\n    '--px-fs-md': theme.fontSize.md,\n    '--px-fs-lg': theme.fontSize.lg,\n    '--px-fs-xl': theme.fontSize.xl,\n    '--px-fs-2xl': theme.fontSize['2xl'],\n\n    '--px-fw-normal': theme.fontWeight.normal,\n    '--px-fw-medium': theme.fontWeight.medium,\n    '--px-fw-semibold': theme.fontWeight.semibold,\n    '--px-fw-bold': theme.fontWeight.bold,\n\n    /**\n     * Shadows\n     * -------\n     * CSS shadow strings for elevation.\n     */\n    '--px-shadow-sm': theme.shadows.sm,\n    '--px-shadow-md': theme.shadows.md,\n    '--px-shadow-lg': theme.shadows.lg,\n    '--px-shadow-xl': theme.shadows.xl\n  }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n'use client'\n\n// External Libraries\nimport {\n  useMemo,\n  useState,\n  useEffect,\n  useContext,\n  createContext,\n  useLayoutEffect\n} from 'react'\n\n// Utils\nimport {\n  buildTheme,\n  isThemeMode,\n  resolveName,\n  applyCssVars,\n  buildRegistry,\n  themeToCssVars,\n  applyThemeClass,\n  watchSystemTheme,\n  getLocalStorageSafe\n} from './utils'\n\n// Types\nimport type { ThemeMode, ThemeContextData, ThemeProviderProps } from './types'\n\nexport * from './types'\n\nconst ThemeContext = createContext<ThemeContextData | null>(null)\n\n/**\n * useIsomorphicLayoutEffect\n * - On client: runs before paint (layout effect)\n * - On server: falls back to useEffect (no warnings)\n */\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  themes,\n  children,\n  override,\n  persistence,\n  persist = false,\n  defaultMode = 'system',\n  storageKey = 'px-theme',\n  fallback = null\n}) => {\n  const registry = useMemo(() => buildRegistry(themes), [themes])\n\n  function makeInitialMode(): ThemeMode {\n    // 1) advanced adapter\n    if (persistence) {\n      try {\n        const saved = persistence.get()\n        return (saved ?? defaultMode) as ThemeMode\n      } catch {\n        return defaultMode\n      }\n    }\n\n    // 2) quick localStorage mode\n    if (persist) {\n      const ls = getLocalStorageSafe()\n      if (!ls) return defaultMode\n      const raw = ls.getItem(storageKey)\n      return isThemeMode(raw) ? raw : defaultMode\n    }\n\n    // 3) fallback\n    return defaultMode\n  }\n\n  const [mode, setMode] = useState<ThemeMode>(makeInitialMode)\n\n  /**\n   * Gate: only render children after we applied class + vars at least once.\n   * This prevents \"unstyled flash\" for your components.\n   */\n  const [isReady, setReady] = useState(false)\n\n  const resolvedName = useMemo(() => {\n    if (typeof window === 'undefined') return mode === 'system' ? 'light' : mode\n    return resolveName(mode)\n  }, [mode])\n\n  const theme = useMemo(\n    () => buildTheme(registry, resolvedName, override),\n    [registry, resolvedName, override]\n  )\n\n  // keep in sync with OS when mode === \"system\"\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    if (mode !== 'system') return\n\n    return watchSystemTheme(() => {\n      setMode('system')\n    })\n  }, [mode])\n\n  /**\n   * Apply theme BEFORE paint (client) and then unlock rendering.\n   */\n  useIsomorphicLayoutEffect(() => {\n    if (typeof window === 'undefined') return\n\n    applyThemeClass(resolvedName === 'dark' ? 'dark' : 'light')\n    applyCssVars(themeToCssVars(theme))\n\n    // unlock after first successful application\n    setReady(true)\n  }, [resolvedName, theme])\n\n  /**\n   * Persist mode changes (optional).\n   */\n  useEffect(() => {\n    if (persistence) {\n      try {\n        persistence.set(mode)\n      } catch {}\n      return\n    }\n\n    if (!persist) return\n    const ls = getLocalStorageSafe()\n    if (!ls) return\n\n    try {\n      ls.setItem(storageKey, mode)\n    } catch {}\n  }, [mode, persist, storageKey, persistence])\n\n  function setTheme(next: ThemeMode) {\n    setMode(next)\n  }\n\n  function toggleTheme(a: string = 'light', b: string = 'dark') {\n    setMode(resolvedName === a ? b : a)\n  }\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n  const ctxValue = useMemo(\n    () => ({\n      mode,\n      resolvedName,\n      theme,\n      isLoading: !isReady,\n      setTheme,\n      toggleTheme\n    }),\n    [mode, resolvedName, theme, isReady]\n  )\n\n  return (\n    <ThemeContext.Provider value={ctxValue}>\n      {isReady ? children : fallback}\n    </ThemeContext.Provider>\n  )\n}\n\nexport function useTheme(): ThemeContextData {\n  const ctx = useContext(ThemeContext)\n  if (!ctx) throw new Error('useTheme must be used within a ThemeProvider')\n  return ctx\n}\n"],"mappings":"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"}

package/dist/button.d.ts

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

package/dist/button.js

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

package/dist/check-item.js

@@ -1,6 +1,6 @@
-import "./Icon-Djde8oXI.js";
+import "./Icon-Cv0qztmq.js";
 import "./useThemedStyles-3rUXJYgS.js";
 import "./Typography-BE-vQSfx.js";
-import { t as CheckItem } from "./CheckItem-DuJvhDP_.js";
+import { t as CheckItem } from "./CheckItem-DsIiS-2X.js";
 
 export { CheckItem };

package/dist/checkbox.js

@@ -1,6 +1,6 @@
-import "./Icon-Djde8oXI.js";
+import "./Icon-Cv0qztmq.js";
 import "./useThemedStyles-3rUXJYgS.js";
 import "./Typography-BE-vQSfx.js";
-import { t as Checkbox } from "./Checkbox-DErw2zDe.js";
+import { t as Checkbox } from "./Checkbox-DE2wp1rK.js";
 
 export { Checkbox };

package/dist/icon-button.js

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

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

@@ -73,11 +73,11 @@ interface ButtonProps extends PaddingProps {
   /**
    * @description Callback fired when the button is clicked.
    */
-  onClick?: (event?: MouseEvent<HTMLButtonElement>) => 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-DOwpBVkM.d.ts.map
+//# sourceMappingURL=index-DVz2cTUe.d.ts.map

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import "./types-CDUx-y9q.js";
-import { t as Button } from "./index-DOwpBVkM.js";
+import { t as Button } from "./index-DVz2cTUe.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";

package/dist/index.js

@@ -1,15 +1,15 @@
-import "./Icon-Djde8oXI.js";
+import "./Icon-Cv0qztmq.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 Checkbox } from "./Checkbox-DE2wp1rK.js";
+import { n as useTheme, t as ThemeProvider } from "./ThemeContext-BE6u_eYD.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 { t as CheckItem } from "./CheckItem-DsIiS-2X.js";
+import { t as Button } from "./Button-CsXcjd9w.js";
+import { t as IconButton } from "./IconButton-BBdkzg3b.js";
 import "./Label-QQpNWSeV.js";
-import { t as Input } from "./Input-C7WKOO_t.js";
-import { t as TextArea } from "./TextArea-jpLThSHP.js";
+import { t as Input } from "./Input-BvbMEjwE.js";
+import { t as TextArea } from "./TextArea-CpIx36BV.js";
 
 export { Button, CheckItem, Checkbox, IconButton, InfoSummary, Input, TabSwitch, TextArea, ThemeProvider, Typography, useTheme };

package/dist/input.js

@@ -1,7 +1,7 @@
-import "./Icon-Djde8oXI.js";
+import "./Icon-Cv0qztmq.js";
 import "./useThemedStyles-3rUXJYgS.js";
 import "./Typography-BE-vQSfx.js";
 import "./Label-QQpNWSeV.js";
-import { t as Input } from "./Input-C7WKOO_t.js";
+import { t as Input } from "./Input-BvbMEjwE.js";
 
 export { Input };

package/dist/text-area.js

@@ -1,7 +1,7 @@
-import "./Icon-Djde8oXI.js";
+import "./Icon-Cv0qztmq.js";
 import "./useThemedStyles-3rUXJYgS.js";
 import "./Typography-BE-vQSfx.js";
 import "./Label-QQpNWSeV.js";
-import { t as TextArea } from "./TextArea-jpLThSHP.js";
+import { t as TextArea } from "./TextArea-CpIx36BV.js";
 
 export { TextArea };

package/dist/theme-context.js

@@ -1,5 +1,5 @@
 'use client';
 
-import { n as useTheme, t as ThemeProvider } from "./ThemeContext-BsU2ZyE5.js";
+import { n as useTheme, t as ThemeProvider } from "./ThemeContext-BE6u_eYD.js";
 
 export { ThemeProvider, useTheme };

package/package.json

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

package/dist/Button-CwK9nssQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-CwK9nssQ.js","names":["getBorder","createButtonLoaderStyles","getBorder","Loader: React.FC<LoaderProps>","createButtonLoaderStyles","ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/utils/animations/spiner.ts","../src/components/toolkit/Loader/constants.ts","../src/components/toolkit/Loader/utils.ts","../src/components/toolkit/Loader/styles.ts","../src/components/toolkit/Loader/index.tsx","../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["export const SPINNER_ANIMATION = {\n  animate: { rotate: 360 },\n  transition: {\n    repeat: Infinity,\n    duration: 1,\n    ease: 'linear'\n  }\n}\n","const DEFAULT_SIZE = '20px'\nconst DEFAULT_THICKNESS = '2px'\n\nconst DEFAULT_COLOR = 'white'\nconst DEFAULT_EMPTY_COLOR = 'transparent'\n\nexport { DEFAULT_SIZE, DEFAULT_THICKNESS, DEFAULT_COLOR, DEFAULT_EMPTY_COLOR }\n","// Utils\nimport { DEFAULT_THICKNESS, DEFAULT_EMPTY_COLOR } from './constants'\n\n// Types\nimport type { LoaderProps } from './types'\n\nexport function getBorder(props: LoaderProps) {\n  const thickness = props.thickness || DEFAULT_THICKNESS\n  const emptyColor = props.emptyColor || DEFAULT_EMPTY_COLOR\n\n  return `${thickness} solid ${emptyColor}`\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { LoaderProps } from './types'\nimport { getBorder } from './utils'\nimport { DEFAULT_COLOR, DEFAULT_SIZE } from './constants'\n\nexport function createButtonLoaderStyles(props: LoaderProps): StyleMap {\n  return styled({\n    container: {\n      display: ' inline-block',\n\n      width: props.size || DEFAULT_SIZE,\n      height: props.size || DEFAULT_SIZE,\n\n      borderRadius: '50%',\n      border: getBorder(props),\n      borderLeftColor: props.color || DEFAULT_COLOR\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { SPINNER_ANIMATION } from '@utils/animations'\n\n// Types\nimport type { LoaderProps } from './types'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\nexport const Loader: React.FC<LoaderProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      role=\"status\"\n      aria-label=\"Loading\"\n      style={styles.container}\n      {...SPINNER_ANIMATION}\n    />\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n  return styled({\n    container: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      borderRadius: 'var(--px-border-radius-button)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n  color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      style={styles.container}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n    >\n      <Loader color={color} />\n    </motion.div>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\nimport type { CSSProperties } from 'react'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  disabled,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps): ReturnType<typeof styled> {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      minHeight: '2rem',\n      ...getSize(size || 'md'),\n\n      width: fullWidth ? '100%' : 'fit-content',\n\n      position: 'relative',\n      display: 'flex',\n      justifyContent: textAlign || 'center',\n\n      padding: '10px var(--px-space-xl)',\n      gap: 'var(--px-space-sm)',\n\n      borderRadius: 'var(--px-radius-md)',\n\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        }\n      }\n    },\n\n    content: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n\n      padding: '0',\n      borderRadius: 'inherit',\n\n      whiteSpace: 'nowrap',\n      columnGap: 'var(--px-space-sm)'\n    }\n  })\n}\n\nfunction getSize(size: ButtonSize | string): CSSProperties {\n  switch (size) {\n    case 'lg':\n      return { height: '3.25rem' }\n    case 'md':\n      return { height: '2.75rem' }\n    case 'sm':\n      return { height: '2.25rem' }\n    case 'xs':\n      return { height: '1.75rem' }\n    default:\n      return { height: size }\n  }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return 'transparent'\n\n  if (variant === 'ghost') return 'transparent'\n\n  return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n  if (variant === 'ghost') return 'none'\n\n  return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps) {\n  if (labelColor) return labelColor\n\n  if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n  if (variant === 'ghost') return '--px-btn-ghost-label'\n\n  return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\nimport { ButtonLoader } from './components/ButtonLoader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n  type = 'button',\n  variant = 'filled',\n  ...rest\n}) => {\n  // Constants\n  const disabled = rest.disabled || rest.loading\n  const resolvedProps = { type, variant, disabled, ...rest }\n  const textColor = getTextColor(resolvedProps)\n  const { label, endIcon, startIcon, loading } = resolvedProps\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    resolvedProps,\n    createButtonStyles,\n    {\n      override: rest.styles,\n      applyCommonProps: true,\n      commonSlot: 'container',\n      pick: p => [p.disabled, p.loading, p.label, p.color]\n    }\n  )\n\n  // Functions\n  function handleButtonClick() {\n    if (disabled) return\n\n    if (rest.onClick) rest.onClick()\n  }\n\n  return (\n    <button\n      type={type}\n      disabled={disabled}\n      aria-busy={rest.loading}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleButtonClick}\n    >\n      <div style={styles.content}>\n        {startIcon ?? null}\n\n        <Typography variant=\"b1\" color={textColor}>\n          {label}\n        </Typography>\n\n        {endIcon ?? null}\n\n        {loading ? (\n          <AnimatePresence>\n            <ButtonLoader color={textColor} />\n          </AnimatePresence>\n        ) : null}\n      </div>\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/IconButton-IhShUhfe.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton-IhShUhfe.js","names":["IconButton: React.FC<IconButtonProps>"],"sources":["../src/components/commons/buttons/IconButton/styles.ts","../src/components/commons/buttons/IconButton/index.tsx"],"sourcesContent":["// Types\nimport type { CSSProperties } from 'react'\nimport type {\n  IconButtonProps,\n  IconButtonSize,\n  IconButtonVariant\n} from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createIconButtonStyles(props: IconButtonProps): StyleMap {\n  const {\n    variant = 'outlined',\n    size = 'md',\n    borderColor,\n    backgroundColor\n  } = props\n\n  return styled({\n    button: {\n      ...getSize(size),\n      backgroundColor: getBackgroundColor(variant, backgroundColor),\n      border: getBorder(variant, borderColor),\n      borderRadius: 'var(--px-radius-lg)',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n        '&:disabled': {\n          opacity: '0.5',\n          cursor: 'not-allowed'\n        }\n      }\n    }\n  })\n}\n\nfunction getSize(size: IconButtonSize | string): CSSProperties {\n  switch (size) {\n    case 'lg':\n      return { height: '3.25rem', width: '3.25rem' }\n    case 'md':\n      return { height: '2.75rem', width: '2.75rem' }\n    case 'sm':\n      return { height: '2.25rem', width: '2.25rem' }\n    case 'xs':\n      return { height: '1.75rem', width: '1.75rem' }\n    default:\n      return { height: size, width: size }\n  }\n}\n\nfunction getBackgroundColor(\n  variant?: IconButtonVariant,\n  color?: string\n): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-bg)'\n\n  return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant?: IconButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n  return '1px solid var(--px-color-primary)'\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { IconButtonProps } from './types'\n\n// Styles\nimport { createIconButtonStyles } from './styles'\n\nexport const IconButton: React.FC<IconButtonProps> = props => {\n  // Constants\n  const disabled = props.isDisabled || props.isLoading\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createIconButtonStyles, {\n    pick: p => [p.size, p.variant, p.borderColor, p.backgroundColor],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'button'\n  })\n\n  return (\n    <button\n      disabled={disabled}\n      aria-busy={props.isLoading}\n      type=\"button\"\n      className={classes.button}\n      style={styles.button}\n      onClick={props.onClick}\n    >\n      {props.icon}\n    </button>\n  )\n}\n"],"mappings":";;;;AASA,SAAgB,uBAAuB,OAAkC;CACvE,MAAM,EACJ,UAAU,YACV,OAAO,MACP,aACA,oBACE;AAEJ,QAAO,OAAO,EACZ,QAAQ;EACN,GAAG,QAAQ,KAAK;EAChB,iBAAiB,mBAAmB,SAAS,gBAAgB;EAC7D,QAAQ,UAAU,SAAS,YAAY;EACvC,cAAc;EACd,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ;EACR,YAAY;EAEZ,SAAS;GACP,WAAW,EACT,SAAS,mBACV;GACD,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,QAAQ,MAA8C;AAC7D,SAAQ,MAAR;EACE,KAAK,KACH,QAAO;GAAE,QAAQ;GAAW,OAAO;GAAW;EAChD,KAAK,KACH,QAAO;GAAE,QAAQ;GAAW,OAAO;GAAW;EAChD,KAAK,KACH,QAAO;GAAE,QAAQ;GAAW,OAAO;GAAW;EAChD,KAAK,KACH,QAAO;GAAE,QAAQ;GAAW,OAAO;GAAW;EAChD,QACE,QAAO;GAAE,QAAQ;GAAM,OAAO;GAAM;;;AAI1C,SAAS,mBACP,SACA,OACQ;AACR,KAAI,MAAO,QAAO;AAElB,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;AAGT,SAAS,UAAU,SAA6B,OAAwB;AACtE,KAAI,MAAO,QAAO,aAAa;AAE/B,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;;;;ACpET,MAAaA,cAAwC,UAAS;CAE5D,MAAM,WAAW,MAAM,cAAc,MAAM;CAG3C,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,wBAAwB;EACzE,OAAM,MAAK;GAAC,EAAE;GAAM,EAAE;GAAS,EAAE;GAAa,EAAE;GAAgB;EAChE,UAAU,MAAM;EAChB,kBAAkB;EAClB,YAAY;EACb,CAAC;AAEF,QACE,oBAAC;EACW;EACV,aAAW,MAAM;EACjB,MAAK;EACL,WAAW,QAAQ;EACnB,OAAO,OAAO;EACd,SAAS,MAAM;YAEd,MAAM;GACA"}