softable-pixels-web 1.1.7 → 1.1.9

package/dist/IconButton-CsHFWO8K.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-CsHFWO8K.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  IconButtonSize,\n  IconButtonProps,\n  IconButtonVariant\n} from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createIconButtonStyles(props: IconButtonProps) {\n  const {\n    variant = 'outlined',\n    size = 'md',\n    borderColor,\n    backgroundColor\n  } = props\n\n  return styled({\n    button: {\n      ...(getSize(size) as any),\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,OAAwB;CAC7D,MAAM,EACJ,UAAU,YACV,OAAO,MACP,aACA,oBACE;AAEJ,QAAO,OAAO,EACZ,QAAQ;EACN,GAAI,QAAQ,KAAK;EACjB,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/{InfoSummary-uorFDD40.js → InfoSummary-DcupqKIy.js}

@@ -1,8 +1,8 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-3rUXJYgS.js";
-import { t as Typography } from "./Typography-BE-vQSfx.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-MLtE91hE.js";
+import { t as Typography } from "./Typography-j84zoCoZ.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts
+//#region src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts
 function createSummaryHeaderStyles() {
 	return styled({
 		container: {
@@ -32,7 +32,7 @@ function createSummaryHeaderStyles() {
 }
 
 //#endregion
-//#region src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx
+//#region src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx
 const SummaryHeader = ({ icon, title }) => {
 	const { styles } = useThemedStyles({}, createSummaryHeaderStyles);
 	return /* @__PURE__ */ jsxs("header", {
@@ -53,7 +53,7 @@ const SummaryHeader = ({ icon, title }) => {
 };
 
 //#endregion
-//#region src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts
+//#region src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts
 function createSummaryCaptionStyles() {
 	return styled({
 		container: {
@@ -80,7 +80,7 @@ function createSummaryCaptionStyles() {
 }
 
 //#endregion
-//#region src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx
+//#region src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx
 const SummaryCaption = ({ loading, captionText }) => {
 	const { styles } = useThemedStyles({}, createSummaryCaptionStyles);
 	return /* @__PURE__ */ jsx("div", {
@@ -100,7 +100,7 @@ const SummaryCaption = ({ loading, captionText }) => {
 };
 
 //#endregion
-//#region src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts
+//#region src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts
 function createSummaryHighlightStyles() {
 	return styled({
 		container: {
@@ -131,7 +131,7 @@ function createSummaryHighlightStyles() {
 }
 
 //#endregion
-//#region src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx
+//#region src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx
 const SummaryHighlight = ({ loading, highlightText, highlightIcon }) => {
 	const { styles } = useThemedStyles({}, createSummaryHighlightStyles);
 	return /* @__PURE__ */ jsxs("div", {
@@ -154,7 +154,7 @@ const SummaryHighlight = ({ loading, highlightText, highlightIcon }) => {
 };
 
 //#endregion
-//#region src/components/toolkit/InfoSummary/components/SummaryItem/styles.ts
+//#region src/components/commons/toolkit/InfoSummary/components/SummaryItem/styles.ts
 function createSummaryItemStyles(props) {
 	return styled({
 		container: {
@@ -174,7 +174,7 @@ function createSummaryItemStyles(props) {
 }
 
 //#endregion
-//#region src/components/toolkit/InfoSummary/components/SummaryItem/index.tsx
+//#region src/components/commons/toolkit/InfoSummary/components/SummaryItem/index.tsx
 const SummaryItem = (props) => {
 	const { styles } = useThemedStyles(props, createSummaryItemStyles);
 	return /* @__PURE__ */ jsx("li", {
@@ -201,7 +201,7 @@ const SummaryItem = (props) => {
 };
 
 //#endregion
-//#region src/components/toolkit/InfoSummary/styles.ts
+//#region src/components/commons/toolkit/InfoSummary/styles.ts
 function createInfoSummaryStyles() {
 	return styled({
 		section: {
@@ -228,7 +228,7 @@ function createInfoSummaryStyles() {
 }
 
 //#endregion
-//#region src/components/toolkit/InfoSummary/index.tsx
+//#region src/components/commons/toolkit/InfoSummary/index.tsx
 const InfoSummary = ({ infos, loading }) => {
 	const { styles } = useThemedStyles({}, createInfoSummaryStyles);
 	function renderSummaryItems() {
@@ -249,4 +249,4 @@ const InfoSummary = ({ infos, loading }) => {
 
 //#endregion
 export { InfoSummary as t };
-//# sourceMappingURL=InfoSummary-uorFDD40.js.map
+//# sourceMappingURL=InfoSummary-DcupqKIy.js.map

package/dist/InfoSummary-DcupqKIy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoSummary-DcupqKIy.js","names":["SummaryHeader: React.FC<Props>","SummaryCaption: React.FC<Props>","SummaryHighlight: React.FC<Props>","SummaryItem: React.FC<SummaryItemProps>","InfoSummary: React.FC<InfoSummaryProps>"],"sources":["../src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts","../src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx","../src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts","../src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx","../src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts","../src/components/commons/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx","../src/components/commons/toolkit/InfoSummary/components/SummaryItem/styles.ts","../src/components/commons/toolkit/InfoSummary/components/SummaryItem/index.tsx","../src/components/commons/toolkit/InfoSummary/styles.ts","../src/components/commons/toolkit/InfoSummary/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHeaderStyles(): StyleMap {\n  return styled({\n    container: {\n      width: '100%',\n      minHeight: '1rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n\n      gap: '0.125rem'\n    },\n\n    iconContainer: {\n      display: 'flex',\n      alignItems: 'flex-start'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHeaderStyles } from './styles'\n\ninterface Props {\n  title: string\n  icon?: ReactNode\n}\n\nexport const SummaryHeader: React.FC<Props> = ({ icon, title }) => {\n  const { styles } = useThemedStyles({}, createSummaryHeaderStyles)\n\n  return (\n    <header style={styles.container}>\n      {icon ? <div style={styles.iconContainer}>{icon}</div> : null}\n\n      <div style={styles.textContainer}>\n        <Typography variant=\"b1\" lineHeight=\"100%\" fontSize=\"0.75rem\">\n          {title}\n        </Typography>\n      </div>\n    </header>\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryCaptionStyles(): StyleMap {\n  return styled({\n    container: {\n      width: '100%',\n      minHeight: '0.625rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyItems: 'start',\n\n      columnGap: '0.125rem'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'center',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryCaptionStyles } from './styles'\n\ninterface Props {\n  loading?: boolean\n  captionText?: string\n}\n\nexport const SummaryCaption: React.FC<Props> = ({ loading, captionText }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createSummaryCaptionStyles)\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b3\"\n          lineHeight=\"100%\"\n          isLoading={loading}\n          fontSize=\"0.625rem\"\n          color=\"var(--px-text-secondary)\"\n        >\n          {captionText}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHighlightStyles(): StyleMap {\n  return styled({\n    container: {\n      width: '100%',\n      minHeight: '1rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n\n      columnGap: '0.125rem'\n    },\n\n    iconContainer: {\n      display: 'flex',\n      alignItems: 'flex-start'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          lineHeight: '1'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHighlightStyles } from './styles'\n\ninterface Props {\n  loading?: boolean\n  highlightText?: string\n  highlightIcon?: ReactNode\n}\n\nexport const SummaryHighlight: React.FC<Props> = ({\n  loading,\n  highlightText,\n  highlightIcon\n}) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createSummaryHighlightStyles)\n\n  return (\n    <div style={styles.container}>\n      {highlightIcon ? (\n        <div style={styles.iconContainer}>{highlightIcon}</div>\n      ) : null}\n\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b1\"\n          lineHeight=\"100%\"\n          fontSize=\"0.875rem\"\n          fontWeight=\"regular\"\n          isLoading={loading}\n        >\n          {highlightText}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport type { SummaryItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryItemStyles(props: SummaryItemProps): StyleMap {\n  return styled({\n    container: {\n      height: '100%',\n      borderRight: props.isLast ? 'none' : '1px solid var(--border-secondary)'\n    },\n\n    content: {\n      minWidth: '8rem',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.125rem',\n      paddingBlock: '0.5rem',\n      paddingInline: '1rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryHeader } from './components/SummaryHeader'\nimport { SummaryCaption } from './components/SummaryCaption'\nimport { SummaryHighlight } from './components/SummaryHighlight'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SummaryItemProps } from './types'\n\n// Styles\nimport { createSummaryItemStyles } from './styles'\n\nexport const SummaryItem: React.FC<SummaryItemProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createSummaryItemStyles)\n\n  return (\n    <li style={styles.container}>\n      <article style={styles.content}>\n        <SummaryHeader icon={props.item.titleIcon} title={props.item.title} />\n\n        <SummaryHighlight\n          loading={props.loading}\n          highlightText={props.item.highlight}\n          highlightIcon={props.item.highlightIcon}\n        />\n\n        <SummaryCaption\n          loading={props.loading}\n          captionText={props.item.caption}\n        />\n      </article>\n    </li>\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createInfoSummaryStyles(): StyleMap {\n  return styled({\n    section: {\n      height: '5rem',\n      minHeight: '5rem',\n\n      width: 'fit-content',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n\n      borderWidth: 1,\n      backgroundColor: 'var(--px-bg)',\n      borderColor: 'var(--px-border-primary)',\n\n      borderRadius: '10px',\n      paddingBlock: 'var(--px-space-sm)'\n    },\n\n    summaryListContainer: {\n      width: '100%',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryItem } from './components/SummaryItem'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { InfoSummaryProps } from './types'\n\n// Styles\nimport { createInfoSummaryStyles } from './styles'\n\nexport * from './types'\n\nexport const InfoSummary: React.FC<InfoSummaryProps> = ({ infos, loading }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createInfoSummaryStyles)\n\n  // Functions\n  function renderSummaryItems() {\n    return (\n      <ul style={styles.summaryListContainer}>\n        {infos.map((info, index) => (\n          <SummaryItem\n            item={info}\n            key={info.id}\n            loading={loading}\n            isLast={index === infos.length - 1}\n          />\n        ))}\n      </ul>\n    )\n  }\n\n  return <section style={styles.section}>{renderSummaryItems()}</section>\n}\n"],"mappings":"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"}

package/dist/Input-DLJz5Mrn.js

@@ -0,0 +1,177 @@
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-MLtE91hE.js";
+import { t as Icon } from "./Icon-61UaAUrM.js";
+import { t as Label } from "./Label-BhqH21lT.js";
+import { forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/commons/inputs/Input/hooks/useInput/index.ts
+function useInput({ onChange }) {
+	const inputRef = useRef(null);
+	const [showPassword, setShowPassword] = useState(false);
+	function togglePasswordVisibility() {
+		setShowPassword((prev) => !prev);
+	}
+	function handleRefMethods() {
+		return {
+			focus: handleFocus,
+			blur: handleBlur
+		};
+	}
+	function handleFocus() {
+		inputRef.current?.focus();
+	}
+	function handleBlur() {
+		inputRef.current?.blur();
+	}
+	function handleChange(e) {
+		const value = e.target.value;
+		onChange?.(value);
+	}
+	return {
+		inputRef,
+		showPassword,
+		handleChange,
+		handleRefMethods,
+		togglePasswordVisibility
+	};
+}
+
+//#endregion
+//#region src/components/commons/inputs/Input/styles.ts
+function createInputStyles(props) {
+	return styled({
+		container: {
+			width: "100%",
+			display: "flex",
+			flexDirection: "column",
+			rowGap: "0.375rem"
+		},
+		wrapper: {
+			width: "100%",
+			display: "flex",
+			alignItems: "center",
+			borderWidth: 1,
+			columnGap: "0.25rem",
+			borderRadius: "0.5rem",
+			padding: "0.625rem 0.875rem",
+			opacity: props.disabled ? .5 : 1,
+			boxShadow: "0px 1px 2px 0px #0A0D120D",
+			borderColor: props.errorMessage ? "var(--px-color-error)" : "var(--px-border-primary)",
+			__rules: { "&:focus-within": {
+				outlineOffset: "-1px",
+				outline: `2px solid var(${props.errorMessage ? "--px-color-error" : "--px-color-primary"})`
+			} }
+		},
+		input: {
+			flex: 1,
+			fontWeight: 500,
+			fontSize: "1rem",
+			lineHeight: "1.5rem",
+			fontFamily: "inherit",
+			color: "var(--px-text-primary)",
+			__rules: {
+				"&:disabled": { cursor: "not-allowed" },
+				"&:focus": { outline: "none" },
+				"&::placeholder": {
+					fontWeight: 400,
+					color: "var(--px-text-secondary)"
+				}
+			}
+		},
+		error: {
+			display: "block",
+			fontWeight: 400,
+			lineHeight: "1rem",
+			fontSize: "0.75rem",
+			fontFamily: "inherit",
+			color: "var(--px-text-error)"
+		},
+		button: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			cursor: "pointer",
+			padding: "0.25rem",
+			borderRadius: "0.5rem",
+			__rules: { "&:focus": { outline: "1px solid var(--px-border-primary)" } }
+		}
+	});
+}
+
+//#endregion
+//#region src/components/commons/inputs/Input/index.tsx
+const Input = forwardRef((props, ref) => {
+	const { errorMessage, ...rest } = props;
+	const reactId = useId();
+	const inputId = useMemo(() => {
+		return props.id || `input-${reactId}`;
+	}, [props.id, reactId]);
+	const { inputRef, showPassword, handleChange, handleRefMethods, togglePasswordVisibility } = useInput(props);
+	useImperativeHandle(ref, handleRefMethods);
+	const { styles, classes } = useThemedStyles(props, createInputStyles, {
+		pick: (p) => [
+			p.disabled,
+			p.errorMessage,
+			p.required
+		],
+		override: props.styles,
+		applyCommonProps: true,
+		commonSlot: "input"
+	});
+	function getType() {
+		if (props.type === "password" && showPassword) return "text";
+		return props.type;
+	}
+	function renderEndContent() {
+		if (props.type === "password") return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			style: styles.button,
+			className: classes.button,
+			onClick: togglePasswordVisibility,
+			children: /* @__PURE__ */ jsx(Icon, {
+				size: "sm",
+				name: showPassword ? "general-eye-off" : "general-eye"
+			})
+		});
+		return props.endIcon ?? null;
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: inputId,
+				label: props.label,
+				required: props.required,
+				requiredColor: props.requiredColor,
+				...props.labelConfig
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: styles.wrapper,
+				className: classes.wrapper,
+				children: [
+					props.startIcon,
+					/* @__PURE__ */ jsx("input", {
+						ref: inputRef,
+						id: inputId,
+						...rest,
+						type: getType(),
+						value: props.value,
+						style: styles.input,
+						className: classes.input,
+						onChange: handleChange
+					}),
+					renderEndContent()
+				]
+			}),
+			errorMessage ? /* @__PURE__ */ jsx("span", {
+				style: styles.error,
+				children: errorMessage
+			}) : null
+		]
+	});
+});
+Input.displayName = "Input";
+
+//#endregion
+export { Input as t };
+//# sourceMappingURL=Input-DLJz5Mrn.js.map

package/dist/Input-DLJz5Mrn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-DLJz5Mrn.js","names":[],"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 } from 'react'\n\n// Types\nimport type { InputProps } from '../../types'\n\nexport function useInput({ onChange }: InputProps) {\n  // Refs\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // States\n  const [showPassword, setShowPassword] = useState(false)\n\n  // Functions\n  function togglePasswordVisibility() {\n    setShowPassword(prev => !prev)\n  }\n\n  function handleRefMethods() {\n    return { focus: handleFocus, blur: handleBlur }\n  }\n\n  function handleFocus() {\n    inputRef.current?.focus()\n  }\n\n  function handleBlur() {\n    inputRef.current?.blur()\n  }\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const value = e.target.value\n    onChange?.(value)\n  }\n\n  return {\n    inputRef,\n    showPassword,\n    handleChange,\n    handleRefMethods,\n    togglePasswordVisibility\n  }\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { InputProps } from './types'\n\nexport function createInputStyles(props: InputProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    wrapper: {\n      width: '100%',\n      display: 'flex',\n      alignItems: 'center',\n\n      borderWidth: 1,\n      columnGap: '0.25rem',\n      borderRadius: '0.5rem',\n      padding: '0.625rem 0.875rem',\n\n      opacity: props.disabled ? 0.5 : 1,\n      boxShadow: '0px 1px 2px 0px #0A0D120D',\n      borderColor: props.errorMessage\n        ? 'var(--px-color-error)'\n        : 'var(--px-border-primary)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n        }\n      }\n    },\n\n    input: {\n      flex: 1,\n\n      fontWeight: 500,\n      fontSize: '1rem',\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-primary)',\n\n      __rules: {\n        '&:disabled': {\n          cursor: 'not-allowed'\n        },\n\n        '&:focus': {\n          outline: 'none'\n        },\n\n        '&::placeholder': {\n          fontWeight: 400,\n          color: 'var(--px-text-secondary)'\n        }\n      }\n    },\n\n    error: {\n      display: 'block',\n      fontWeight: 400,\n      lineHeight: '1rem',\n      fontSize: '0.75rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-error)'\n    },\n\n    button: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      cursor: 'pointer',\n      padding: '0.25rem',\n      borderRadius: '0.5rem',\n\n      __rules: {\n        '&:focus': {\n          outline: '1px solid var(--px-border-primary)'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport { forwardRef, useId, useImperativeHandle, useMemo } from 'react'\n\n// Components\nimport { Label } from '../../Label'\nimport { Icon } from '@components/commons/toolkit/Icon'\n\n// Types\nimport type { InputProps, InputMethods } from './types'\n\n// Hooks\nimport { useInput } from './hooks/useInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createInputStyles } from './styles'\n\nexport const Input = forwardRef<InputMethods, InputProps>((props, ref) => {\n  const { errorMessage, ...rest } = props\n\n  // Constants\n  const reactId = useId()\n  const inputId = useMemo(() => {\n    return props.id || `input-${reactId}`\n  }, [props.id, reactId])\n\n  // Hooks\n  const {\n    inputRef,\n    showPassword,\n    handleChange,\n    handleRefMethods,\n    togglePasswordVisibility\n  } = useInput(props)\n  useImperativeHandle(ref, handleRefMethods)\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createInputStyles, {\n    pick: p => [p.disabled, p.errorMessage, p.required],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'input'\n  })\n\n  // Functions\n  function getType() {\n    if (props.type === 'password' && showPassword) return 'text'\n    return props.type\n  }\n\n  function renderEndContent() {\n    if (props.type === 'password') {\n      return (\n        <button\n          type=\"button\"\n          style={styles.button}\n          className={classes.button}\n          onClick={togglePasswordVisibility}\n        >\n          <Icon\n            size=\"sm\"\n            name={showPassword ? 'general-eye-off' : 'general-eye'}\n          />\n        </button>\n      )\n    }\n\n    return props.endIcon ?? null\n  }\n\n  return (\n    <div style={styles.container}>\n      <Label\n        htmlFor={inputId}\n        label={props.label}\n        required={props.required}\n        requiredColor={props.requiredColor}\n        {...props.labelConfig}\n      />\n\n      <div style={styles.wrapper} className={classes.wrapper}>\n        {props.startIcon}\n\n        <input\n          ref={inputRef}\n          id={inputId}\n          {...rest}\n          type={getType()}\n          value={props.value}\n          style={styles.input}\n          className={classes.input}\n          onChange={handleChange}\n        />\n\n        {renderEndContent()}\n      </div>\n\n      {errorMessage ? <span style={styles.error}>{errorMessage}</span> : null}\n    </div>\n  )\n})\n\nInput.displayName = 'Input'\n"],"mappings":"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"}

package/dist/Label-BhqH21lT.js

@@ -0,0 +1,25 @@
+import { t as Typography } from "./Typography-j84zoCoZ.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/commons/Label/index.tsx
+const Label = (props) => {
+	const { label, color, htmlFor, required, requiredColor, variant = "b2", ...rest } = props;
+	return /* @__PURE__ */ jsx("label", {
+		htmlFor,
+		children: /* @__PURE__ */ jsxs(Typography, {
+			variant,
+			color: color ?? "var(px-text-primary)",
+			...rest,
+			children: [label, required ? /* @__PURE__ */ jsxs(Typography, {
+				as: "span",
+				variant: "b2",
+				color: requiredColor ?? "var(--px-text-error)",
+				children: [" ", "*"]
+			}) : null]
+		})
+	});
+};
+
+//#endregion
+export { Label as t };
+//# sourceMappingURL=Label-BhqH21lT.js.map

package/dist/Label-BhqH21lT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label-BhqH21lT.js","names":["Label: React.FC<LabelProps>"],"sources":["../src/components/commons/Label/index.tsx"],"sourcesContent":["// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Types\nimport type { LabelProps } from './types'\n\nexport const Label: React.FC<LabelProps> = props => {\n  const {\n    label,\n    color,\n    htmlFor,\n    required,\n    requiredColor,\n    variant = 'b2',\n    ...rest\n  } = props\n\n  return (\n    <label htmlFor={htmlFor}>\n      <Typography\n        variant={variant}\n        color={color ?? 'var(px-text-primary)'}\n        {...rest}\n      >\n        {label}\n\n        {required ? (\n          <Typography\n            as=\"span\"\n            variant=\"b2\"\n            color={requiredColor ?? 'var(--px-text-error)'}\n          >\n            {' '}\n            *\n          </Typography>\n        ) : null}\n      </Typography>\n    </label>\n  )\n}\n"],"mappings":";;;;AAMA,MAAaA,SAA8B,UAAS;CAClD,MAAM,EACJ,OACA,OACA,SACA,UACA,eACA,UAAU,MACV,GAAG,SACD;AAEJ,QACE,oBAAC;EAAe;YACd,qBAAC;GACU;GACT,OAAO,SAAS;GAChB,GAAI;cAEH,OAEA,WACC,qBAAC;IACC,IAAG;IACH,SAAQ;IACR,OAAO,iBAAiB;eAEvB,KAAI;KAEM,GACX;IACO;GACP"}

package/dist/Popover-BsDGCJ-f.js

@@ -0,0 +1,81 @@
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-MLtE91hE.js";
+import { t as useDismiss } from "./useDismiss-DJ1mh-X3.js";
+import { t as useFloating } from "./useFloating--PcINgSt.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+
+//#region src/components/commons/toolkit/Popover/styles.ts
+function createPopoverStyles(_props) {
+	return styled({ popoverNode: {
+		position: "fixed",
+		left: 0,
+		top: 0,
+		zIndex: 10,
+		padding: "0.25rem",
+		boxShadow: "var(--px-ring-1)",
+		backgroundColor: "var(--px-bg)",
+		borderRadius: "var(--px-radius-xl)"
+	} });
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Popover/index.tsx
+const Popover = (props) => {
+	const { anchorRef, floatingOptions, closeOnEscape = true, open: controlledOpen, closeOnOutsideClick = true, trigger, content, onOpenChange, onMouseEnter, onMouseLeave } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const open = controlledOpen ?? uncontrolledOpen;
+	const { styles } = useThemedStyles(props, createPopoverStyles, {
+		applyCommonProps: true,
+		override: props.styles,
+		pick: (p) => [p.open, p.content]
+	});
+	function setOpen(v) {
+		onOpenChange?.(v);
+		if (controlledOpen === void 0) setUncontrolledOpen(v);
+	}
+	const close = useCallback(() => setOpen(false), [setOpen]);
+	const triggerRef = useRef(null);
+	const resolvedAnchorRef = anchorRef ?? triggerRef;
+	const popoverRef = useRef(null);
+	const { floatingRef, update } = useFloating(resolvedAnchorRef, {
+		offsetY: 6,
+		strategy: "fixed",
+		keepInViewport: true,
+		placement: "bottom-start",
+		...floatingOptions
+	});
+	useDismiss({
+		open,
+		closeOnEscape,
+		closeOnOutsideClick,
+		refs: [resolvedAnchorRef, popoverRef],
+		onClose: close
+	});
+	useEffect(() => {
+		if (open) requestAnimationFrame(update);
+	}, [open, update]);
+	const triggerNode = trigger?.({
+		"aria-expanded": open,
+		ref: triggerRef,
+		onClick: () => setOpen(!open)
+	}) ?? null;
+	const popoverNode = open ? /* @__PURE__ */ jsx("div", {
+		ref: (el) => {
+			popoverRef.current = el;
+			floatingRef(el);
+		},
+		role: "dialog",
+		style: styles.popoverNode,
+		onMouseEnter,
+		onMouseLeave,
+		onMouseDownCapture: (e) => e.stopPropagation(),
+		onPointerDownCapture: (e) => e.stopPropagation(),
+		children: content({ close })
+	}) : null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [triggerNode, typeof document !== "undefined" ? createPortal(popoverNode, document.body) : null] });
+};
+
+//#endregion
+export { Popover as t };
+//# sourceMappingURL=Popover-BsDGCJ-f.js.map

package/dist/Popover-BsDGCJ-f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover-BsDGCJ-f.js","names":["Popover: React.FC<PopoverProps>"],"sources":["../src/components/commons/toolkit/Popover/styles.ts","../src/components/commons/toolkit/Popover/index.tsx"],"sourcesContent":["// Types\nimport type { PopoverProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createPopoverStyles(_props: PopoverProps) {\n  return styled({\n    popoverNode: {\n      position: 'fixed',\n      left: 0,\n      top: 0,\n\n      zIndex: 10,\n\n      padding: '0.25rem',\n\n      boxShadow: 'var(--px-ring-1)',\n      backgroundColor: 'var(--px-bg)',\n\n      borderRadius: 'var(--px-radius-xl)'\n    }\n  })\n}\n","// External Libraries\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <Not needed> */\nimport type React from 'react'\nimport { createPortal } from 'react-dom'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n// Hooks\nimport { useDismiss } from '@hooks/useDismiss'\nimport { useFloating } from '@hooks/useFloating'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { PopoverProps } from './types'\n\n// Styles\nimport { createPopoverStyles } from './styles'\n\nexport const Popover: React.FC<PopoverProps> = props => {\n  const {\n    anchorRef,\n    floatingOptions,\n    closeOnEscape = true,\n    open: controlledOpen,\n    closeOnOutsideClick = true,\n    trigger,\n    content,\n    onOpenChange,\n    onMouseEnter,\n    onMouseLeave\n  } = props\n\n  // States\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false)\n\n  const open = controlledOpen ?? uncontrolledOpen\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createPopoverStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.open, p.content]\n  })\n\n  // Functions\n  function setOpen(v: boolean) {\n    onOpenChange?.(v)\n    if (controlledOpen === undefined) setUncontrolledOpen(v)\n  }\n\n  const close = useCallback(() => setOpen(false), [setOpen])\n\n  const triggerRef = useRef<HTMLElement | null>(null)\n  const resolvedAnchorRef = (anchorRef ?? triggerRef) as any\n\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n\n  const { floatingRef, update } = useFloating(resolvedAnchorRef, {\n    offsetY: 6,\n    strategy: 'fixed',\n    keepInViewport: true,\n    placement: 'bottom-start',\n    ...floatingOptions\n  })\n\n  useDismiss({\n    open,\n    closeOnEscape,\n    closeOnOutsideClick,\n    refs: [resolvedAnchorRef, popoverRef],\n    onClose: close\n  })\n\n  useEffect(() => {\n    if (open) requestAnimationFrame(update)\n  }, [open, update])\n\n  const triggerNode =\n    trigger?.({\n      'aria-expanded': open,\n      ref: triggerRef as any,\n      onClick: () => setOpen(!open)\n    }) ?? null\n\n  const popoverNode = open ? (\n    <div\n      ref={el => {\n        popoverRef.current = el\n        floatingRef(el)\n      }}\n      role=\"dialog\"\n      style={styles.popoverNode}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      onMouseDownCapture={e => e.stopPropagation()}\n      onPointerDownCapture={e => e.stopPropagation()}\n    >\n      {content({ close })}\n    </div>\n  ) : null\n\n  return (\n    <>\n      {triggerNode}\n      {typeof document !== 'undefined'\n        ? createPortal(popoverNode, document.body)\n        : null}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,oBAAoB,QAAsB;AACxD,QAAO,OAAO,EACZ,aAAa;EACX,UAAU;EACV,MAAM;EACN,KAAK;EAEL,QAAQ;EAER,SAAS;EAET,WAAW;EACX,iBAAiB;EAEjB,cAAc;EACf,EACF,CAAC;;;;;ACFJ,MAAaA,WAAkC,UAAS;CACtD,MAAM,EACJ,WACA,iBACA,gBAAgB,MAChB,MAAM,gBACN,sBAAsB,MACtB,SACA,SACA,cACA,cACA,iBACE;CAGJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAE/D,MAAM,OAAO,kBAAkB;CAG/B,MAAM,EAAE,WAAW,gBAAgB,OAAO,qBAAqB;EAC7D,kBAAkB;EAClB,UAAU,MAAM;EAChB,OAAM,MAAK,CAAC,EAAE,MAAM,EAAE,QAAQ;EAC/B,CAAC;CAGF,SAAS,QAAQ,GAAY;AAC3B,iBAAe,EAAE;AACjB,MAAI,mBAAmB,OAAW,qBAAoB,EAAE;;CAG1D,MAAM,QAAQ,kBAAkB,QAAQ,MAAM,EAAE,CAAC,QAAQ,CAAC;CAE1D,MAAM,aAAa,OAA2B,KAAK;CACnD,MAAM,oBAAqB,aAAa;CAExC,MAAM,aAAa,OAA8B,KAAK;CAEtD,MAAM,EAAE,aAAa,WAAW,YAAY,mBAAmB;EAC7D,SAAS;EACT,UAAU;EACV,gBAAgB;EAChB,WAAW;EACX,GAAG;EACJ,CAAC;AAEF,YAAW;EACT;EACA;EACA;EACA,MAAM,CAAC,mBAAmB,WAAW;EACrC,SAAS;EACV,CAAC;AAEF,iBAAgB;AACd,MAAI,KAAM,uBAAsB,OAAO;IACtC,CAAC,MAAM,OAAO,CAAC;CAElB,MAAM,cACJ,UAAU;EACR,iBAAiB;EACjB,KAAK;EACL,eAAe,QAAQ,CAAC,KAAK;EAC9B,CAAC,IAAI;CAER,MAAM,cAAc,OAClB,oBAAC;EACC,MAAK,OAAM;AACT,cAAW,UAAU;AACrB,eAAY,GAAG;;EAEjB,MAAK;EACL,OAAO,OAAO;EACA;EACA;EACd,qBAAoB,MAAK,EAAE,iBAAiB;EAC5C,uBAAsB,MAAK,EAAE,iBAAiB;YAE7C,QAAQ,EAAE,OAAO,CAAC;GACf,GACJ;AAEJ,QACE,4CACG,aACA,OAAO,aAAa,cACjB,aAAa,aAAa,SAAS,KAAK,GACxC,QACH"}

package/dist/Switch-B4e9qBOu.js

@@ -0,0 +1,49 @@
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-MLtE91hE.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/commons/toolkit/Switch/styles.ts
+function createSwitchThumbStyles({ checked, colorActive, colorInactive, colorIndicator }) {
+	return styled({
+		container: {
+			width: "2.5rem",
+			height: "1.25rem",
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center",
+			marginLeft: "0.5rem",
+			borderRadius: "2rem",
+			padding: "0.125rem",
+			transition: "background-color 0.5s",
+			backgroundColor: checked ? colorActive ?? "var(--px-color-success)" : colorInactive ?? "var(--px-color-disabled)"
+		},
+		indicator: {
+			height: "1rem",
+			width: "1rem",
+			position: "absolute",
+			left: "0.125rem",
+			top: "0.125rem",
+			borderRadius: "9999px",
+			backgroundColor: colorIndicator ?? "var(--px-surface)",
+			transition: "transform 0.5s",
+			transform: checked ? "translateX(1.25rem)" : "translateX(0)",
+			willChange: "transform"
+		}
+	});
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Switch/index.tsx
+const Switch = (props) => {
+	const { styles } = useThemedStyles(props, createSwitchThumbStyles, {
+		applyCommonProps: true,
+		pick: (p) => [p.checked]
+	});
+	return /* @__PURE__ */ jsx("span", {
+		style: styles.container,
+		children: /* @__PURE__ */ jsx("span", { style: styles.indicator })
+	});
+};
+
+//#endregion
+export { Switch as t };
+//# sourceMappingURL=Switch-B4e9qBOu.js.map

package/dist/Switch-B4e9qBOu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch-B4e9qBOu.js","names":["Switch: React.FC<SwitchThumbProps>"],"sources":["../src/components/commons/toolkit/Switch/styles.ts","../src/components/commons/toolkit/Switch/index.tsx"],"sourcesContent":["// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { styled } from '@hooks/useThemedStyles/types'\nexport function createSwitchThumbStyles({\n  checked,\n  colorActive,\n  colorInactive,\n  colorIndicator\n}: SwitchThumbProps) {\n  return styled({\n    container: {\n      width: '2.5rem',\n      height: '1.25rem',\n\n      position: 'relative',\n\n      display: 'inline-flex',\n      alignItems: 'center',\n      marginLeft: '0.5rem',\n\n      borderRadius: '2rem',\n      padding: '0.125rem',\n\n      transition: 'background-color 0.5s',\n      backgroundColor: checked\n        ? (colorActive ?? 'var(--px-color-success)')\n        : (colorInactive ?? 'var(--px-color-disabled)')\n    },\n\n    indicator: {\n      height: '1rem',\n      width: '1rem',\n\n      position: 'absolute',\n      left: '0.125rem',\n      top: '0.125rem',\n\n      borderRadius: '9999px',\n      backgroundColor: colorIndicator ?? 'var(--px-surface)',\n\n      transition: 'transform 0.5s',\n      transform: checked ? 'translateX(1.25rem)' : 'translateX(0)',\n      willChange: 'transform'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchThumbProps } from './types'\n\n// Styles\nimport { createSwitchThumbStyles } from './styles'\n\nexport const Switch: React.FC<SwitchThumbProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createSwitchThumbStyles, {\n    applyCommonProps: true,\n    pick: p => [p.checked]\n  })\n\n  return (\n    <span style={styles.container}>\n      <span style={styles.indicator} />\n    </span>\n  )\n}\n"],"mappings":";;;;AAKA,SAAgB,wBAAwB,EACtC,SACA,aACA,eACA,kBACmB;AACnB,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,QAAQ;GAER,UAAU;GAEV,SAAS;GACT,YAAY;GACZ,YAAY;GAEZ,cAAc;GACd,SAAS;GAET,YAAY;GACZ,iBAAiB,UACZ,eAAe,4BACf,iBAAiB;GACvB;EAED,WAAW;GACT,QAAQ;GACR,OAAO;GAEP,UAAU;GACV,MAAM;GACN,KAAK;GAEL,cAAc;GACd,iBAAiB,kBAAkB;GAEnC,YAAY;GACZ,WAAW,UAAU,wBAAwB;GAC7C,YAAY;GACb;EACF,CAAC;;;;;AClCJ,MAAaA,UAAqC,UAAS;CAEzD,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;EACjE,kBAAkB;EAClB,OAAM,MAAK,CAAC,EAAE,QAAQ;EACvB,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC,UAAK,OAAO,OAAO,YAAa;GAC5B"}

package/dist/{TabSwitch-De30bFX2.js → TabSwitch-CvnlK0NZ.js}

@@ -1,9 +1,9 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-3rUXJYgS.js";
-import { t as Typography } from "./Typography-BE-vQSfx.js";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-MLtE91hE.js";
+import { t as Typography } from "./Typography-j84zoCoZ.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 
-//#region src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts
+//#region src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/styles.ts
 function createTabSwitchItemStyles({ variant, disabled, selected, selectedColor }) {
 	const accent = selectedColor ?? "var(--px-color-primary)";
 	return styled({
@@ -41,7 +41,7 @@ function createTabSwitchItemStyles({ variant, disabled, selected, selectedColor
 }
 
 //#endregion
-//#region src/components/toolkit/TabSwitch/components/TabSwitchItem/index.tsx
+//#region src/components/commons/toolkit/TabSwitch/components/TabSwitchItem/index.tsx
 const SwitchItem = (props) => {
 	const { option, disabled, selected, layoutId, onClick } = props;
 	const { styles, classes } = useThemedStyles(props, createTabSwitchItemStyles, { pick: (p) => [
@@ -76,7 +76,7 @@ const SwitchItem = (props) => {
 };
 
 //#endregion
-//#region src/components/toolkit/TabSwitch/styles.ts
+//#region src/components/commons/toolkit/TabSwitch/styles.ts
 function createTabSwitchStyles(props) {
 	const { fitContent } = props;
 	return styled({ container: {
@@ -85,14 +85,14 @@ function createTabSwitchStyles(props) {
 		alignItems: "center",
 		color: "var(--px-text-primary, #4b5563)",
 		width: fitContent ? "fit-content" : "100%",
-		borderBottom: "1px solid var(--px-border-primaryder, #e5e7eb)",
+		borderBottom: "1px solid var(--px-border-primary, #e5e7eb)",
 		gap: 0,
 		__rules: { "& svg": { zIndex: 1 } }
 	} });
 }
 
 //#endregion
-//#region src/components/toolkit/TabSwitch/index.tsx
+//#region src/components/commons/toolkit/TabSwitch/index.tsx
 const TabSwitch = (props) => {
 	{
 		const { options, disabled, layoutId, currentValue, variant = "default", onChange } = props;
@@ -120,4 +120,4 @@ const TabSwitch = (props) => {
 
 //#endregion
 export { TabSwitch as t };
-//# sourceMappingURL=TabSwitch-De30bFX2.js.map
+//# sourceMappingURL=TabSwitch-CvnlK0NZ.js.map

package/dist/TabSwitch-CvnlK0NZ.js.map

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

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

@@ -1,7 +1,7 @@
-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";
+import { n as styled, t as useThemedStyles } from "./useThemedStyles-MLtE91hE.js";
+import { t as Icon } from "./Icon-61UaAUrM.js";
+import { t as Typography } from "./Typography-j84zoCoZ.js";
+import { t as Label } from "./Label-BhqH21lT.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -111,4 +111,4 @@ const TextArea = (props) => {
 
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=TextArea-CpIx36BV.js.map
+//# sourceMappingURL=TextArea-CUrG_9je.js.map

package/dist/TextArea-CUrG_9je.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea-CUrG_9je.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n  const { height = '8rem', readOnly, 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/commons/toolkit/Icon'\nimport { Typography } from '@components/commons/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,OAAsB;CACzD,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"}