@plumile/ui 0.1.55 → 0.1.57

package/lib/esm/atomic/atoms/formatted-date/FormattedDate.js

@@ -0,0 +1,33 @@
+import { useUiTranslation as e } from "../../../i18n/useUiTranslation.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as n } from "react";
+//#region src/atomic/atoms/formatted-date/FormattedDate.tsx
+var r = {
+	year: "numeric",
+	month: "short",
+	day: "numeric"
+}, i = ({ value: i, fallback: a, options: o = r, locale: s, className: c }) => {
+	let { t: l } = e(), u = a ?? l("common.notAvailable");
+	return /* @__PURE__ */ t("span", {
+		className: c,
+		children: n(() => {
+			if (i == null) return u;
+			let e = new Date(String(i));
+			if (Number.isNaN(e.getTime())) return u;
+			try {
+				return new Intl.DateTimeFormat(s, o).format(e);
+			} catch {
+				return u;
+			}
+		}, [
+			i,
+			u,
+			s,
+			o
+		])
+	});
+};
+//#endregion
+export { i as FormattedDate };
+
+//# sourceMappingURL=FormattedDate.js.map

package/lib/esm/atomic/atoms/formatted-date/FormattedDate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedDate.js","names":[],"sources":["../../../../../src/atomic/atoms/formatted-date/FormattedDate.tsx"],"sourcesContent":["import { type JSX, useMemo } from 'react';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\ntype DateValue = string | { toString: () => string };\n\ntype Props = {\n  value: DateValue | null | undefined;\n  fallback?: string;\n  options?: Intl.DateTimeFormatOptions;\n  locale?: string;\n  className?: string;\n};\n\nconst DEFAULT_OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n};\n\nexport const FormattedDate = ({\n  value,\n  fallback,\n  options = DEFAULT_OPTIONS,\n  locale,\n  className,\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedFallback = fallback ?? t('common.notAvailable');\n  const displayValue = useMemo(() => {\n    if (value == null) {\n      return resolvedFallback;\n    }\n\n    const date = new Date(String(value));\n    if (Number.isNaN(date.getTime())) {\n      return resolvedFallback;\n    }\n\n    try {\n      return new Intl.DateTimeFormat(locale, options).format(date);\n    } catch {\n      return resolvedFallback;\n    }\n  }, [value, resolvedFallback, locale, options]);\n\n  return <span className={className}>{displayValue}</span>;\n};\n"],"mappings":";;;;AAaA,IAAM,IAA8C;CAClD,MAAM;CACN,OAAO;CACP,KAAK;CACN,EAEY,KAAiB,EAC5B,UACA,aACA,aAAU,GACV,WACA,mBACwB;CACxB,IAAM,EAAE,SAAM,GAAkB,EAC1B,IAAmB,KAAY,EAAE,sBAAsB;AAkB7D,QAAO,kBAAC,QAAD;EAAiB;YAjBH,QAAc;AACjC,OAAI,KAAS,KACX,QAAO;GAGT,IAAM,IAAO,IAAI,KAAK,OAAO,EAAM,CAAC;AACpC,OAAI,OAAO,MAAM,EAAK,SAAS,CAAC,CAC9B,QAAO;AAGT,OAAI;AACF,WAAO,IAAI,KAAK,eAAe,GAAQ,EAAQ,CAAC,OAAO,EAAK;WACtD;AACN,WAAO;;KAER;GAAC;GAAO;GAAkB;GAAQ;GAAQ,CAAC;EAEU,CAAA"}

package/lib/esm/atomic/atoms/icon-button/IconMenuButton.js

@@ -0,0 +1,19 @@
+import { useUiTranslation as e } from "../../../i18n/useUiTranslation.js";
+import { Button as t } from "../button/Button.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/atomic/atoms/icon-button/IconMenuButton.tsx
+var r = "⋮", i = ({ label: i, icon: a = r, type: o = "button", ...s }) => {
+	let { t: c } = e(), l = i ?? c("common.menu.open");
+	return /* @__PURE__ */ n(t, {
+		"aria-label": l,
+		variant: "text",
+		size: "small",
+		type: o,
+		...s,
+		children: a
+	});
+};
+//#endregion
+export { i as IconMenuButton };
+
+//# sourceMappingURL=IconMenuButton.js.map

package/lib/esm/atomic/atoms/icon-button/IconMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconMenuButton.js","names":[],"sources":["../../../../../src/atomic/atoms/icon-button/IconMenuButton.tsx"],"sourcesContent":["import { type ComponentProps, type JSX } from 'react';\n\nimport { Button } from '../button/Button.js';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\nconst DEFAULT_ICON = '⋮';\n\nexport type IconMenuButtonProps = Omit<\n  ComponentProps<typeof Button>,\n  'children' | 'variant' | 'size'\n> & {\n  label?: string;\n  icon?: JSX.Element | string;\n};\n\nexport const IconMenuButton = ({\n  label,\n  icon = DEFAULT_ICON,\n  type = 'button',\n  ...rest\n}: IconMenuButtonProps): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedLabel = label ?? t('common.menu.open');\n  return (\n    <Button\n      aria-label={resolvedLabel}\n      variant=\"text\"\n      size=\"small\"\n      type={type}\n      {...rest}\n    >\n      {icon}\n    </Button>\n  );\n};\n"],"mappings":";;;;AAKA,IAAM,IAAe,KAUR,KAAkB,EAC7B,UACA,UAAO,GACP,UAAO,UACP,GAAG,QACmC;CACtC,IAAM,EAAE,SAAM,GAAkB,EAC1B,IAAgB,KAAS,EAAE,mBAAmB;AACpD,QACE,kBAAC,GAAD;EACE,cAAY;EACZ,SAAQ;EACR,MAAK;EACC;EACN,GAAI;YAEH;EACM,CAAA"}

package/lib/esm/atomic/atoms/input/Input.js

@@ -1,41 +1,47 @@
-import { jsx as e, jsxs as v } from "react/jsx-runtime";
-import { input as x, container as d, leftIcon as y, rightIcon as W, containerFullWidth as $, inputWithLeftIcon as P, inputWithRightIcon as E } from "./input.css.js";
-const F = (N) => {
-  const {
-    variant: g,
-    size: I,
-    fullWidth: i,
-    leftIcon: n,
-    rightIcon: s,
-    ref: r,
-    ...C
-  } = N, { className: o, style: j, ...l } = C, a = l.type;
-  if (a === "checkbox" || a === "radio")
-    return /* @__PURE__ */ e(
-      "input",
-      {
-        ref: r,
-        className: o,
-        style: j,
-        ...l
-      }
-    );
-  let c = null;
-  n != null && (c = /* @__PURE__ */ e("div", { className: y, children: n }));
-  let u = null;
-  s != null && (u = /* @__PURE__ */ e("div", { className: W, children: s }));
-  const m = [x({ variant: g, size: I, fullWidth: i }), o].filter((h) => typeof h == "string" && h.length > 0).join(" "), t = [];
-  m !== "" && t.push(m), n != null && t.push(P), s != null && t.push(E);
-  let f;
-  t.length > 0 && (f = t.join(" "));
-  let p = d;
-  return i === !0 && (p = `${d} ${$}`), /* @__PURE__ */ v("div", { className: p, children: [
-    c,
-    /* @__PURE__ */ e("input", { ref: r, className: f, ...l }),
-    u
-  ] });
+import { container as e, containerFullWidth as t, input as n, inputWithLeftIcon as r, inputWithRightIcon as i, leftIcon as a, rightIcon as o } from "./input.css.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/atomic/atoms/input/Input.tsx
+var l = (l) => {
+	let { variant: u, size: d, fullWidth: f, leftIcon: p, rightIcon: m, ref: h, ...g } = l, { className: _, style: v, ...y } = g, b = y.type;
+	if (b === "checkbox" || b === "radio") return /* @__PURE__ */ s("input", {
+		ref: h,
+		className: _,
+		style: v,
+		...y
+	});
+	let x = null;
+	p != null && (x = /* @__PURE__ */ s("div", {
+		className: a,
+		children: p
+	}));
+	let S = null;
+	m != null && (S = /* @__PURE__ */ s("div", {
+		className: o,
+		children: m
+	}));
+	let C = [n({
+		variant: u,
+		size: d,
+		fullWidth: f
+	}), _].filter((e) => typeof e == "string" && e.length > 0).join(" "), w = [];
+	C !== "" && w.push(C), p != null && w.push(r), m != null && w.push(i);
+	let T;
+	w.length > 0 && (T = w.join(" "));
+	let E = e;
+	return f === !0 && (E = `${e} ${t}`), /* @__PURE__ */ c("div", {
+		className: E,
+		children: [
+			x,
+			/* @__PURE__ */ s("input", {
+				ref: h,
+				className: T,
+				...y
+			}),
+			S
+		]
+	});
 };
-export {
-  F as Input
-};
-//# sourceMappingURL=Input.js.map
+//#endregion
+export { l as Input };
+
+//# sourceMappingURL=Input.js.map

package/lib/esm/atomic/atoms/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../src/atomic/atoms/input/Input.tsx"],"sourcesContent":["import {\n  type InputHTMLAttributes,\n  type JSX,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  container,\n  containerFullWidth,\n  input as inputRecipe,\n  inputWithLeftIcon,\n  inputWithRightIcon,\n  leftIcon as leftIconClass,\n  rightIcon as rightIconClass,\n} from './input.css.js';\n\ntype InputVariant = 'default' | 'error';\ntype InputSize = 'small' | 'medium' | 'large';\n\n// Omit the conflicting 'size' property from HTML input attributes\nexport type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n  variant?: InputVariant;\n  size?: InputSize;\n  fullWidth?: boolean;\n  leftIcon?: ReactNode;\n  rightIcon?: ReactNode;\n  ref?: Ref<HTMLInputElement>;\n};\n\nexport const Input = (props: Props): JSX.Element => {\n  const {\n    variant,\n    size,\n    fullWidth,\n    leftIcon,\n    rightIcon,\n    ref: inputRef,\n    ...rest\n  } = props;\n  const { className, style, ...inputProps } = rest;\n  const inputType = inputProps.type;\n\n  if (inputType === 'checkbox' || inputType === 'radio') {\n    return (\n      <input\n        ref={inputRef}\n        className={className}\n        style={style}\n        {...inputProps}\n      />\n    );\n  }\n\n  let leftIconElement: JSX.Element | null = null;\n  if (leftIcon != null) {\n    leftIconElement = <div className={leftIconClass}>{leftIcon}</div>;\n  }\n\n  let rightIconElement: JSX.Element | null = null;\n  if (rightIcon != null) {\n    rightIconElement = <div className={rightIconClass}>{rightIcon}</div>;\n  }\n\n  const computedClassName = inputRecipe({ variant, size, fullWidth });\n  const mergedClassNameParts = [computedClassName, className];\n  const mergedClassName = mergedClassNameParts\n    .filter((value): value is string => {\n      return typeof value === 'string' && value.length > 0;\n    })\n    .join(' ');\n\n  const inputClassNames: string[] = [];\n  if (mergedClassName !== '') {\n    inputClassNames.push(mergedClassName);\n  }\n  if (leftIcon != null) {\n    inputClassNames.push(inputWithLeftIcon);\n  }\n  if (rightIcon != null) {\n    inputClassNames.push(inputWithRightIcon);\n  }\n\n  let resolvedClassName: string | undefined;\n  if (inputClassNames.length > 0) {\n    resolvedClassName = inputClassNames.join(' ');\n  }\n\n  let containerClassName = container;\n  if (fullWidth === true) {\n    containerClassName = `${container} ${containerFullWidth}`;\n  }\n\n  return (\n    <div className={containerClassName}>\n      {leftIconElement}\n      <input ref={inputRef} className={resolvedClassName} {...inputProps} />\n      {rightIconElement}\n    </div>\n  );\n};\n"],"names":["Input","props","variant","size","fullWidth","leftIcon","rightIcon","inputRef","rest","className","style","inputProps","inputType","jsx","leftIconElement","leftIconClass","rightIconElement","rightIconClass","mergedClassName","inputRecipe","value","inputClassNames","inputWithLeftIcon","inputWithRightIcon","resolvedClassName","containerClassName","container","containerFullWidth","jsxs"],"mappings":";;AA6BO,MAAMA,IAAQ,CAACC,MAA8B;AAClD,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IAAA,UACAC;AAAAA,IAAA,WACAC;AAAAA,IACA,KAAKC;AAAA,IACL,GAAGC;AAAA,EAAA,IACDP,GACE,EAAE,WAAAQ,GAAW,OAAAC,GAAO,GAAGC,MAAeH,GACtCI,IAAYD,EAAW;AAE7B,MAAIC,MAAc,cAAcA,MAAc;AAC5C,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKN;AAAA,QACL,WAAAE;AAAA,QACA,OAAAC;AAAA,QACC,GAAGC;AAAA,MAAA;AAAA,IAAA;AAKV,MAAIG,IAAsC;AAC1C,EAAIT,KAAY,SACdS,IAAkB,gBAAAD,EAAC,OAAA,EAAI,WAAWE,GAAgB,UAAAV,GAAS;AAG7D,MAAIW,IAAuC;AAC3C,EAAIV,KAAa,SACfU,IAAmB,gBAAAH,EAAC,OAAA,EAAI,WAAWI,GAAiB,UAAAX,GAAU;AAKhE,QAAMY,IADuB,CADHC,EAAY,EAAE,SAAAjB,GAAS,MAAAC,GAAM,WAAAC,GAAW,GACjBK,CAAS,EAEvD,OAAO,CAACW,MACA,OAAOA,KAAU,YAAYA,EAAM,SAAS,CACpD,EACA,KAAK,GAAG,GAELC,IAA4B,CAAA;AAClC,EAAIH,MAAoB,MACtBG,EAAgB,KAAKH,CAAe,GAElCb,KAAY,QACdgB,EAAgB,KAAKC,CAAiB,GAEpChB,KAAa,QACfe,EAAgB,KAAKE,CAAkB;AAGzC,MAAIC;AACJ,EAAIH,EAAgB,SAAS,MAC3BG,IAAoBH,EAAgB,KAAK,GAAG;AAG9C,MAAII,IAAqBC;AACzB,SAAItB,MAAc,OAChBqB,IAAqB,GAAGC,CAAS,IAAIC,CAAkB,KAIvD,gBAAAC,EAAC,OAAA,EAAI,WAAWH,GACb,UAAA;AAAA,IAAAX;AAAA,sBACA,SAAA,EAAM,KAAKP,GAAU,WAAWiB,GAAoB,GAAGb,GAAY;AAAA,IACnEK;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../../../src/atomic/atoms/input/Input.tsx"],"sourcesContent":["import {\n  type InputHTMLAttributes,\n  type JSX,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  container,\n  containerFullWidth,\n  input as inputRecipe,\n  inputWithLeftIcon,\n  inputWithRightIcon,\n  leftIcon as leftIconClass,\n  rightIcon as rightIconClass,\n} from './input.css.js';\n\ntype InputVariant = 'default' | 'error';\ntype InputSize = 'small' | 'medium' | 'large';\n\n// Omit the conflicting 'size' property from HTML input attributes\nexport type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n  variant?: InputVariant;\n  size?: InputSize;\n  fullWidth?: boolean;\n  leftIcon?: ReactNode;\n  rightIcon?: ReactNode;\n  ref?: Ref<HTMLInputElement>;\n};\n\nexport const Input = (props: Props): JSX.Element => {\n  const {\n    variant,\n    size,\n    fullWidth,\n    leftIcon,\n    rightIcon,\n    ref: inputRef,\n    ...rest\n  } = props;\n  const { className, style, ...inputProps } = rest;\n  const inputType = inputProps.type;\n\n  if (inputType === 'checkbox' || inputType === 'radio') {\n    return (\n      <input\n        ref={inputRef}\n        className={className}\n        style={style}\n        {...inputProps}\n      />\n    );\n  }\n\n  let leftIconElement: JSX.Element | null = null;\n  if (leftIcon != null) {\n    leftIconElement = <div className={leftIconClass}>{leftIcon}</div>;\n  }\n\n  let rightIconElement: JSX.Element | null = null;\n  if (rightIcon != null) {\n    rightIconElement = <div className={rightIconClass}>{rightIcon}</div>;\n  }\n\n  const computedClassName = inputRecipe({ variant, size, fullWidth });\n  const mergedClassNameParts = [computedClassName, className];\n  const mergedClassName = mergedClassNameParts\n    .filter((value): value is string => {\n      return typeof value === 'string' && value.length > 0;\n    })\n    .join(' ');\n\n  const inputClassNames: string[] = [];\n  if (mergedClassName !== '') {\n    inputClassNames.push(mergedClassName);\n  }\n  if (leftIcon != null) {\n    inputClassNames.push(inputWithLeftIcon);\n  }\n  if (rightIcon != null) {\n    inputClassNames.push(inputWithRightIcon);\n  }\n\n  let resolvedClassName: string | undefined;\n  if (inputClassNames.length > 0) {\n    resolvedClassName = inputClassNames.join(' ');\n  }\n\n  let containerClassName = container;\n  if (fullWidth === true) {\n    containerClassName = `${container} ${containerFullWidth}`;\n  }\n\n  return (\n    <div className={containerClassName}>\n      {leftIconElement}\n      <input ref={inputRef} className={resolvedClassName} {...inputProps} />\n      {rightIconElement}\n    </div>\n  );\n};\n"],"mappings":";;;AA6BA,IAAa,KAAS,MAA8B;CAClD,IAAM,EACJ,YACA,SACA,cACA,UAAA,GACA,WAAA,GACA,KAAK,GACL,GAAG,MACD,GACE,EAAE,cAAW,UAAO,GAAG,MAAe,GACtC,IAAY,EAAW;AAE7B,KAAI,MAAc,cAAc,MAAc,QAC5C,QACE,kBAAC,SAAD;EACE,KAAK;EACM;EACJ;EACP,GAAI;EACJ,CAAA;CAIN,IAAI,IAAsC;AAC1C,CAAI,KAAY,SACd,IAAkB,kBAAC,OAAD;EAAK,WAAW;YAAgB;EAAe,CAAA;CAGnE,IAAI,IAAuC;AAC3C,CAAI,KAAa,SACf,IAAmB,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAgB,CAAA;CAKtE,IAAM,IADuB,CADH,EAAY;EAAE;EAAS;EAAM;EAAW,CAAC,EAClB,EAAU,CAExD,QAAQ,MACA,OAAO,KAAU,YAAY,EAAM,SAAS,EACnD,CACD,KAAK,IAAI,EAEN,IAA4B,EAAE;AAOpC,CANI,MAAoB,MACtB,EAAgB,KAAK,EAAgB,EAEnC,KAAY,QACd,EAAgB,KAAK,EAAkB,EAErC,KAAa,QACf,EAAgB,KAAK,EAAmB;CAG1C,IAAI;AACJ,CAAI,EAAgB,SAAS,MAC3B,IAAoB,EAAgB,KAAK,IAAI;CAG/C,IAAI,IAAqB;AAKzB,QAJI,MAAc,OAChB,IAAqB,GAAG,EAAU,GAAG,MAIrC,kBAAC,OAAD;EAAK,WAAW;YAAhB;GACG;GACD,kBAAC,SAAD;IAAO,KAAK;IAAU,WAAW;IAAmB,GAAI;IAAc,CAAA;GACrE;GACG"}

package/lib/esm/atomic/atoms/input/input.css.js

@@ -1,14 +1,32 @@
-/* empty css                                          */
-/* empty css                         */
-import { createRuntimeFn as b } from "@vanilla-extract/recipes/createRuntimeFn";
-var q = "_23o1cr0 txvbqbpsf txvbqbu66 txvbqb9jo", o = "_23o1cr1 txvbqbu6f", r = "_23o1cr5 _23o1cr3 _23o1cr2 txvbqbps6 txvbqbtu6 txvbqb9io txvbqbco txvbqbdnx txvbqb2k _23o1cr4 txvbqbebo", c = "_23o1cr7 _23o1cr3 _23o1cr2 txvbqbps6 txvbqbtu6 txvbqb9io txvbqbco txvbqbdnx txvbqb2k _23o1cr6 txvbqbqfo", a = "_23o1cr8 txvbqbnwo", i = "_23o1cr9 txvbqbojx", _ = b({ defaultClassName: "_23o1crk _23o1crb _23o1cra txvbqbnv6 txvbqboif txvbqbp56 txvbqblwx txvbqb1ro txvbqb96 txvbqbu6f txvbqbl3f txvbqb77 txvbqb6x txvbqb7i", variantClassNames: { variant: { default: "_23o1crl _23o1crc txvbqb1df txvbqb1qf txvbqbwf txvbqbuzn txvbqbv8p", error: "_23o1crm _23o1cre _23o1crd txvbqb1df txvbqb1qf txvbqbxf txvbqbuzn txvbqbv8p" }, size: { small: "_23o1crn _23o1crf txvbqbnux txvbqboi6 txvbqbp56 txvbqblwx txvbqb8x", medium: "_23o1cro _23o1crg txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqb96", large: "_23o1crp _23o1crh txvbqbnvx txvbqboj6 txvbqbp5x txvbqblxo txvbqb9f" }, fullWidth: { true: "_23o1crq _23o1cri txvbqbu6f", false: "_23o1crr _23o1crj txvbqbu66" } }, defaultVariants: { variant: "default", size: "medium", fullWidth: !0 }, compoundVariants: [] });
-export {
-  q as container,
-  o as containerFullWidth,
-  _ as input,
-  a as inputWithLeftIcon,
-  i as inputWithRightIcon,
-  r as leftIcon,
-  c as rightIcon
-};
-//# sourceMappingURL=input.css.js.map
+/* empty css                                      */
+/* empty css                     */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/atoms/input/input.css.ts
+var t = "_23o1cr0 txvbqbpsf txvbqbu66 txvbqb9jo", n = "_23o1cr1 txvbqbu6f", r = "_23o1cr5 _23o1cr3 _23o1cr2 txvbqbps6 txvbqbtu6 txvbqb9io txvbqbco txvbqbdnx txvbqb2k _23o1cr4 txvbqbebo", i = "_23o1cr7 _23o1cr3 _23o1cr2 txvbqbps6 txvbqbtu6 txvbqb9io txvbqbco txvbqbdnx txvbqb2k _23o1cr6 txvbqbqfo", a = "_23o1cr8 txvbqbnwo", o = "_23o1cr9 txvbqbojx", s = e({
+	defaultClassName: "_23o1crk _23o1crb _23o1cra txvbqbnv6 txvbqboif txvbqbp56 txvbqblwx txvbqb1ro txvbqb96 txvbqbu6f txvbqbl3f txvbqb77 txvbqb6x txvbqb7i",
+	variantClassNames: {
+		variant: {
+			default: "_23o1crl _23o1crc txvbqb1df txvbqb1qf txvbqbwf txvbqbuzn txvbqbv8p",
+			error: "_23o1crm _23o1cre _23o1crd txvbqb1df txvbqb1qf txvbqbxf txvbqbuzn txvbqbv8p"
+		},
+		size: {
+			small: "_23o1crn _23o1crf txvbqbnux txvbqboi6 txvbqbp56 txvbqblwx txvbqb8x",
+			medium: "_23o1cro _23o1crg txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqb96",
+			large: "_23o1crp _23o1crh txvbqbnvx txvbqboj6 txvbqbp5x txvbqblxo txvbqb9f"
+		},
+		fullWidth: {
+			true: "_23o1crq _23o1cri txvbqbu6f",
+			false: "_23o1crr _23o1crj txvbqbu66"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "medium",
+		fullWidth: !0
+	},
+	compoundVariants: []
+});
+//#endregion
+export { t as container, n as containerFullWidth, s as input, a as inputWithLeftIcon, o as inputWithRightIcon, r as leftIcon, i as rightIcon };
+
+//# sourceMappingURL=input.css.js.map

package/lib/esm/atomic/atoms/input/input.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"input.css.js","names":[],"sources":["../../../../../src/atomic/atoms/input/input.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  position: 'relative',\n  width: 'auto',\n  display: 'inline-block',\n});\n\nexport const containerFullWidth = sprinkles({\n  width: 'full',\n});\n\nconst iconBase = style([\n  sprinkles({\n    position: 'absolute',\n    top: '1/2',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    pointerEvents: 'none',\n  }),\n  {\n    transform: 'translateY(-50%)',\n  },\n]);\n\nexport const leftIcon = style([iconBase, sprinkles({ left: 2.5 })]);\n\nexport const rightIcon = style([iconBase, sprinkles({ right: 2.5 })]);\n\nexport const inputWithLeftIcon = sprinkles({\n  paddingLeft: 9,\n});\n\nexport const inputWithRightIcon = sprinkles({\n  paddingRight: 9,\n});\n\nconst baseInput = style([\n  sprinkles({\n    paddingY: 1,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'base',\n    width: 'full',\n    outline: 'none',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'default',\n  }),\n  {\n    '::placeholder': {\n      color: vars.colors.textSecondary,\n      opacity: '0.7',\n    },\n  },\n]);\n\nconst defaultVariant = sprinkles({\n  borderWidth: 'px',\n  borderStyle: 'solid',\n  borderColor: 'border',\n  backgroundColor: 'white',\n  color: 'text',\n});\n\nconst errorVariant = style([\n  sprinkles({\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    borderColor: 'error',\n    backgroundColor: 'white',\n    color: 'text',\n  }),\n  {\n    selectors: {\n      '&:focus': {\n        boxShadow: `0 0 0 3px color-mix(in srgb, ${vars.colors.error} 20%, transparent)`,\n      },\n    },\n  },\n]);\n\nconst smallSize = sprinkles({\n  paddingY: 1,\n  paddingX: 2,\n  fontSize: 'sm',\n});\n\nconst mediumSize = sprinkles({\n  paddingY: 2,\n  paddingX: 4,\n  fontSize: 'base',\n});\n\nconst largeSize = sprinkles({\n  paddingY: 4,\n  paddingX: 6,\n  fontSize: 'lg',\n});\n\nexport const input = recipe({\n  base: baseInput,\n  variants: {\n    variant: {\n      default: defaultVariant,\n      error: errorVariant,\n    },\n    size: {\n      small: smallSize,\n      medium: mediumSize,\n      large: largeSize,\n    },\n    fullWidth: {\n      true: sprinkles({ width: 'full' }),\n      false: sprinkles({ width: 'auto' }),\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'medium',\n    fullWidth: true,\n  },\n});\n\nexport type InputVariants = RecipeVariants<typeof input>;\n"],"mappings":""}

package/lib/esm/atomic/atoms/label/Label.js

@@ -1,17 +1,24 @@
-import { jsxs as u, jsx as p } from "react/jsx-runtime";
-import { label as N, requiredMark as f } from "./label.css.js";
-const j = (a) => {
-  const { children: t, variant: n, size: o, required: i, ...m } = a, { className: c, ...d } = m;
-  let e = null;
-  i === !0 && (e = /* @__PURE__ */ p("span", { className: f, children: "*" }));
-  const r = [N({ variant: n, size: o }), c].filter((l) => l != null && l !== "").join(" ");
-  let s;
-  return r !== "" && (s = r), /* @__PURE__ */ u("label", { className: s, ...d, children: [
-    t,
-    e
-  ] });
+import { label as e, requiredMark as t } from "./label.css.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import "react";
+//#region src/atomic/atoms/label/Label.tsx
+var i = (i) => {
+	let { children: a, variant: o, size: s, required: c, ...l } = i, { className: u, ...d } = l, f = null;
+	c === !0 && (f = /* @__PURE__ */ n("span", {
+		className: t,
+		children: "*"
+	}));
+	let p = [e({
+		variant: o,
+		size: s
+	}), u].filter((e) => e != null && e !== "").join(" "), m;
+	return p !== "" && (m = p), /* @__PURE__ */ r("label", {
+		className: m,
+		...d,
+		children: [a, f]
+	});
 };
-export {
-  j as Label
-};
-//# sourceMappingURL=Label.js.map
+//#endregion
+export { i as Label };
+
+//# sourceMappingURL=Label.js.map

package/lib/esm/atomic/atoms/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../../../src/atomic/atoms/label/Label.tsx"],"sourcesContent":["import React, { type JSX } from 'react';\nimport {\n  label,\n  requiredMark as requiredMarkClass,\n  type LabelVariants,\n} from './label.css.js';\n\ntype Props = React.LabelHTMLAttributes<HTMLLabelElement> & {\n  variant?: NonNullable<LabelVariants>['variant'];\n  size?: NonNullable<LabelVariants>['size'];\n  required?: boolean;\n};\n\nexport const Label = (props: Props): JSX.Element => {\n  const { children, variant, size, required, ...rest } = props;\n  const { className, ...labelProps } = rest;\n  let requiredMark: JSX.Element | null = null;\n\n  if (required === true) {\n    requiredMark = <span className={requiredMarkClass}>*</span>;\n  }\n\n  const computedClassName = label({ variant, size });\n  const mergedClassName = [computedClassName, className]\n    .filter((value) => {\n      return value != null && value !== '';\n    })\n    .join(' ');\n\n  let resolvedClassName: string | undefined;\n  if (mergedClassName !== '') {\n    resolvedClassName = mergedClassName;\n  }\n\n  return (\n    <label className={resolvedClassName} {...labelProps}>\n      {children}\n      {requiredMark}\n    </label>\n  );\n};\n"],"names":["Label","props","children","variant","size","required","rest","className","labelProps","requiredMark","jsx","requiredMarkClass","mergedClassName","label","value","resolvedClassName","jsxs"],"mappings":";;AAaO,MAAMA,IAAQ,CAACC,MAA8B;AAClD,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,MAAAC,GAAM,UAAAC,GAAU,GAAGC,MAASL,GACjD,EAAE,WAAAM,GAAW,GAAGC,EAAA,IAAeF;AACrC,MAAIG,IAAmC;AAEvC,EAAIJ,MAAa,OACfI,IAAe,gBAAAC,EAAC,QAAA,EAAK,WAAWC,GAAmB,UAAA,KAAC;AAItD,QAAMC,IAAkB,CADEC,EAAM,EAAE,SAAAV,GAAS,MAAAC,GAAM,GACLG,CAAS,EAClD,OAAO,CAACO,MACAA,KAAS,QAAQA,MAAU,EACnC,EACA,KAAK,GAAG;AAEX,MAAIC;AACJ,SAAIH,MAAoB,OACtBG,IAAoBH,IAIpB,gBAAAI,EAAC,SAAA,EAAM,WAAWD,GAAoB,GAAGP,GACtC,UAAA;AAAA,IAAAN;AAAA,IACAO;AAAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"Label.js","names":[],"sources":["../../../../../src/atomic/atoms/label/Label.tsx"],"sourcesContent":["import React, { type JSX } from 'react';\nimport {\n  label,\n  requiredMark as requiredMarkClass,\n  type LabelVariants,\n} from './label.css.js';\n\ntype Props = React.LabelHTMLAttributes<HTMLLabelElement> & {\n  variant?: NonNullable<LabelVariants>['variant'];\n  size?: NonNullable<LabelVariants>['size'];\n  required?: boolean;\n};\n\nexport const Label = (props: Props): JSX.Element => {\n  const { children, variant, size, required, ...rest } = props;\n  const { className, ...labelProps } = rest;\n  let requiredMark: JSX.Element | null = null;\n\n  if (required === true) {\n    requiredMark = <span className={requiredMarkClass}>*</span>;\n  }\n\n  const computedClassName = label({ variant, size });\n  const mergedClassName = [computedClassName, className]\n    .filter((value) => {\n      return value != null && value !== '';\n    })\n    .join(' ');\n\n  let resolvedClassName: string | undefined;\n  if (mergedClassName !== '') {\n    resolvedClassName = mergedClassName;\n  }\n\n  return (\n    <label className={resolvedClassName} {...labelProps}>\n      {children}\n      {requiredMark}\n    </label>\n  );\n};\n"],"mappings":";;;;AAaA,IAAa,KAAS,MAA8B;CAClD,IAAM,EAAE,aAAU,YAAS,SAAM,aAAU,GAAG,MAAS,GACjD,EAAE,cAAW,GAAG,MAAe,GACjC,IAAmC;AAEvC,CAAI,MAAa,OACf,IAAe,kBAAC,QAAD;EAAM,WAAW;YAAmB;EAAQ,CAAA;CAI7D,IAAM,IAAkB,CADE,EAAM;EAAE;EAAS;EAAM,CAAC,EACN,EAAU,CACnD,QAAQ,MACA,KAAS,QAAQ,MAAU,GAClC,CACD,KAAK,IAAI,EAER;AAKJ,QAJI,MAAoB,OACtB,IAAoB,IAIpB,kBAAC,SAAD;EAAO,WAAW;EAAmB,GAAI;YAAzC,CACG,GACA,EACK"}

package/lib/esm/atomic/atoms/label/label.css.js

@@ -1,9 +1,27 @@
-/* empty css                                          */
-/* empty css                         */
-import { createRuntimeFn as i } from "@vanilla-extract/recipes/createRuntimeFn";
-var b = i({ defaultClassName: "_7qj3pi6 _7qj3pi0 txvbqb9i6 txvbqbfz6 txvbqbamf", variantClassNames: { variant: { default: "_7qj3pi7 _7qj3pi1 txvbqbv8p", error: "_7qj3pi8 _7qj3pi2 txvbqbv93" }, size: { small: "_7qj3pi9 _7qj3pi3 txvbqb8o", medium: "_7qj3pia _7qj3pi4 txvbqb8x", large: "_7qj3pib _7qj3pi5 txvbqb96" } }, defaultVariants: { variant: "default", size: "medium" }, compoundVariants: [] }), r = "_7qj3pic txvbqbv93 txvbqbh7x";
-export {
-  b as label,
-  r as requiredMark
-};
-//# sourceMappingURL=label.css.js.map
+/* empty css                                      */
+/* empty css                     */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/atoms/label/label.css.ts
+var t = e({
+	defaultClassName: "_7qj3pi6 _7qj3pi0 txvbqb9i6 txvbqbfz6 txvbqbamf",
+	variantClassNames: {
+		variant: {
+			default: "_7qj3pi7 _7qj3pi1 txvbqbv8p",
+			error: "_7qj3pi8 _7qj3pi2 txvbqbv93"
+		},
+		size: {
+			small: "_7qj3pi9 _7qj3pi3 txvbqb8o",
+			medium: "_7qj3pia _7qj3pi4 txvbqb8x",
+			large: "_7qj3pib _7qj3pi5 txvbqb96"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "medium"
+	},
+	compoundVariants: []
+}), n = "_7qj3pic txvbqbv93 txvbqbh7x";
+//#endregion
+export { t as label, n as requiredMark };
+
+//# sourceMappingURL=label.css.js.map

package/lib/esm/atomic/atoms/label/label.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"label.css.js","names":[],"sources":["../../../../../src/atomic/atoms/label/label.css.ts"],"sourcesContent":["import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const label = recipe({\n  base: sprinkles({\n    display: 'block',\n    marginBottom: 1,\n    fontWeight: 'medium',\n  }),\n  variants: {\n    variant: {\n      default: sprinkles({ color: 'text' }),\n      error: sprinkles({ color: 'error' }),\n    },\n    size: {\n      small: sprinkles({ fontSize: 'xs' }),\n      medium: sprinkles({ fontSize: 'sm' }),\n      large: sprinkles({ fontSize: 'base' }),\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'medium',\n  },\n});\n\nexport type LabelVariants = RecipeVariants<typeof label>;\n\nexport const requiredMark = sprinkles({\n  color: 'error',\n  marginLeft: 0.5,\n});\n"],"mappings":""}

package/lib/esm/atomic/atoms/textarea/Textarea.js

@@ -1,19 +1,20 @@
-import { jsx as d } from "react/jsx-runtime";
-import { textarea as x } from "./textarea.css.js";
-const C = (r) => {
-  const { variant: a, size: o, fullWidth: l, ref: m, ...n } = r, { className: c, rows: f, ...i } = n, e = [x({ variant: a, size: o, fullWidth: l }), c].filter((t) => t != null && t !== "").join(" ");
-  let s;
-  return e !== "" && (s = e), /* @__PURE__ */ d(
-    "textarea",
-    {
-      ref: m,
-      className: s,
-      rows: f ?? 4,
-      ...i
-    }
-  );
+import { textarea as e } from "./textarea.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/atomic/atoms/textarea/Textarea.tsx
+var n = (n) => {
+	let { variant: r, size: i, fullWidth: a, ref: o, ...s } = n, { className: c, rows: l, ...u } = s, d = [e({
+		variant: r,
+		size: i,
+		fullWidth: a
+	}), c].filter((e) => e != null && e !== "").join(" "), f;
+	return d !== "" && (f = d), /* @__PURE__ */ t("textarea", {
+		ref: o,
+		className: f,
+		rows: l ?? 4,
+		...u
+	});
 };
-export {
-  C as Textarea
-};
-//# sourceMappingURL=Textarea.js.map
+//#endregion
+export { n as Textarea };
+
+//# sourceMappingURL=Textarea.js.map

package/lib/esm/atomic/atoms/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../../../src/atomic/atoms/textarea/Textarea.tsx"],"sourcesContent":["import { type JSX, type Ref, type TextareaHTMLAttributes } from 'react';\n\nimport { textarea, type TextareaVariants } from './textarea.css.js';\n\ntype VariantProp = NonNullable<TextareaVariants>['variant'];\ntype SizeProp = NonNullable<TextareaVariants>['size'];\ntype FullWidthProp = NonNullable<TextareaVariants>['fullWidth'];\n\nexport type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  variant?: VariantProp;\n  size?: SizeProp;\n  fullWidth?: FullWidthProp;\n  ref?: Ref<HTMLTextAreaElement>;\n};\n\nexport const Textarea = (props: Props): JSX.Element => {\n  const { variant, size, fullWidth, ref: textareaRef, ...rest } = props;\n  const { className, rows, ...textareaProps } = rest;\n\n  const computedClassName = textarea({ variant, size, fullWidth });\n  const mergedClassName = [computedClassName, className]\n    .filter((value) => {\n      return value != null && value !== '';\n    })\n    .join(' ');\n\n  let resolvedClassName: string | undefined;\n  if (mergedClassName !== '') {\n    resolvedClassName = mergedClassName;\n  }\n\n  const resolvedRows = rows ?? 4;\n\n  return (\n    <textarea\n      ref={textareaRef}\n      className={resolvedClassName}\n      rows={resolvedRows}\n      {...textareaProps}\n    />\n  );\n};\n"],"names":["Textarea","props","variant","size","fullWidth","textareaRef","rest","className","rows","textareaProps","mergedClassName","textarea","value","resolvedClassName","jsx"],"mappings":";;AAeO,MAAMA,IAAW,CAACC,MAA8B;AACrD,QAAM,EAAE,SAAAC,GAAS,MAAAC,GAAM,WAAAC,GAAW,KAAKC,GAAa,GAAGC,MAASL,GAC1D,EAAE,WAAAM,GAAW,MAAAC,GAAM,GAAGC,MAAkBH,GAGxCI,IAAkB,CADEC,EAAS,EAAE,SAAAT,GAAS,MAAAC,GAAM,WAAAC,GAAW,GACnBG,CAAS,EAClD,OAAO,CAACK,MACAA,KAAS,QAAQA,MAAU,EACnC,EACA,KAAK,GAAG;AAEX,MAAIC;AACJ,SAAIH,MAAoB,OACtBG,IAAoBH,IAMpB,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKT;AAAA,MACL,WAAWQ;AAAA,MACX,MANiBL,KAAQ;AAAA,MAOxB,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../../../src/atomic/atoms/textarea/Textarea.tsx"],"sourcesContent":["import { type JSX, type Ref, type TextareaHTMLAttributes } from 'react';\n\nimport { textarea, type TextareaVariants } from './textarea.css.js';\n\ntype VariantProp = NonNullable<TextareaVariants>['variant'];\ntype SizeProp = NonNullable<TextareaVariants>['size'];\ntype FullWidthProp = NonNullable<TextareaVariants>['fullWidth'];\n\nexport type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  variant?: VariantProp;\n  size?: SizeProp;\n  fullWidth?: FullWidthProp;\n  ref?: Ref<HTMLTextAreaElement>;\n};\n\nexport const Textarea = (props: Props): JSX.Element => {\n  const { variant, size, fullWidth, ref: textareaRef, ...rest } = props;\n  const { className, rows, ...textareaProps } = rest;\n\n  const computedClassName = textarea({ variant, size, fullWidth });\n  const mergedClassName = [computedClassName, className]\n    .filter((value) => {\n      return value != null && value !== '';\n    })\n    .join(' ');\n\n  let resolvedClassName: string | undefined;\n  if (mergedClassName !== '') {\n    resolvedClassName = mergedClassName;\n  }\n\n  const resolvedRows = rows ?? 4;\n\n  return (\n    <textarea\n      ref={textareaRef}\n      className={resolvedClassName}\n      rows={resolvedRows}\n      {...textareaProps}\n    />\n  );\n};\n"],"mappings":";;;AAeA,IAAa,KAAY,MAA8B;CACrD,IAAM,EAAE,YAAS,SAAM,cAAW,KAAK,GAAa,GAAG,MAAS,GAC1D,EAAE,cAAW,SAAM,GAAG,MAAkB,GAGxC,IAAkB,CADE,EAAS;EAAE;EAAS;EAAM;EAAW,CAAC,EACpB,EAAU,CACnD,QAAQ,MACA,KAAS,QAAQ,MAAU,GAClC,CACD,KAAK,IAAI,EAER;AAOJ,QANI,MAAoB,OACtB,IAAoB,IAMpB,kBAAC,YAAD;EACE,KAAK;EACL,WAAW;EACX,MANiB,KAAQ;EAOzB,GAAI;EACJ,CAAA"}

package/lib/esm/atomic/atoms/textarea/textarea.css.js

@@ -1,8 +1,32 @@
-/* empty css                                          */
-/* empty css                            */
-import { createRuntimeFn as t } from "@vanilla-extract/recipes/createRuntimeFn";
-var q = t({ defaultClassName: "_1act0tcb _1act0tc1 _1act0tc0 txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqb1rf txvbqb96 txvbqbu6f txvbqbl3f txvbqb77 txvbqb6x txvbqb7i txvbqbjl6 txvbqbuxx txvbqbf2o", variantClassNames: { variant: { default: "_1act0tcc _1act0tc3 _1act0tc2 txvbqb1df txvbqb1qf txvbqbwf txvbqbuzn txvbqbv8p", error: "_1act0tcd _1act0tc5 _1act0tc4 txvbqb1df txvbqb1qf txvbqbxf txvbqbuzn txvbqbv8p" }, size: { small: "_1act0tce _1act0tc6 txvbqbnux txvbqboi6 txvbqbp56 txvbqblwx txvbqb8x txvbqbjkf", medium: "_1act0tcf _1act0tc7 txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqb96 txvbqbjl6", large: "_1act0tcg _1act0tc8 txvbqbnvx txvbqboj6 txvbqbp5x txvbqblxo txvbqb9f txvbqbjlx" }, fullWidth: { true: "_1act0tch _1act0tc9 txvbqbu6f", false: "_1act0tci _1act0tca txvbqbu66" } }, defaultVariants: { variant: "default", size: "medium", fullWidth: !0 }, compoundVariants: [] });
-export {
-  q as textarea
-};
-//# sourceMappingURL=textarea.css.js.map
+/* empty css                                      */
+/* empty css                        */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/atoms/textarea/textarea.css.ts
+var t = e({
+	defaultClassName: "_1act0tcb _1act0tc1 _1act0tc0 txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqb1rf txvbqb96 txvbqbu6f txvbqbl3f txvbqb77 txvbqb6x txvbqb7i txvbqbjl6 txvbqbuxx txvbqbf2o",
+	variantClassNames: {
+		variant: {
+			default: "_1act0tcc _1act0tc3 _1act0tc2 txvbqb1df txvbqb1qf txvbqbwf txvbqbuzn txvbqbv8p",
+			error: "_1act0tcd _1act0tc5 _1act0tc4 txvbqb1df txvbqb1qf txvbqbxf txvbqbuzn txvbqbv8p"
+		},
+		size: {
+			small: "_1act0tce _1act0tc6 txvbqbnux txvbqboi6 txvbqbp56 txvbqblwx txvbqb8x txvbqbjkf",
+			medium: "_1act0tcf _1act0tc7 txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqb96 txvbqbjl6",
+			large: "_1act0tcg _1act0tc8 txvbqbnvx txvbqboj6 txvbqbp5x txvbqblxo txvbqb9f txvbqbjlx"
+		},
+		fullWidth: {
+			true: "_1act0tch _1act0tc9 txvbqbu6f",
+			false: "_1act0tci _1act0tca txvbqbu66"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "medium",
+		fullWidth: !0
+	},
+	compoundVariants: []
+});
+//#endregion
+export { t as textarea };
+
+//# sourceMappingURL=textarea.css.js.map

package/lib/esm/atomic/atoms/textarea/textarea.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"textarea.css.js","names":[],"sources":["../../../../../src/atomic/atoms/textarea/textarea.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst baseTextarea = style([\n  sprinkles({\n    paddingY: 2,\n    paddingX: 4,\n    borderRadius: 'md',\n    fontSize: 'base',\n    width: 'full',\n    outline: 'none',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'default',\n    minHeight: 24,\n    resize: 'vertical',\n    lineHeight: 1.5,\n  }),\n  {\n    '::placeholder': {\n      color: vars.colors.textSecondary,\n      opacity: '0.7',\n    },\n  },\n]);\n\nconst defaultVariant = style([\n  sprinkles({\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    borderColor: 'border',\n    backgroundColor: 'white',\n    color: 'text',\n  }),\n  {\n    selectors: {\n      '&:focus': {\n        borderColor: vars.colors.primary,\n        boxShadow: `0 0 0 3px ${vars.colors.primaryLight}`,\n      },\n    },\n  },\n]);\n\nconst errorVariant = style([\n  sprinkles({\n    borderWidth: 'px',\n    borderStyle: 'solid',\n    borderColor: 'error',\n    backgroundColor: 'white',\n    color: 'text',\n  }),\n  {\n    selectors: {\n      '&:focus': {\n        boxShadow: `0 0 0 3px color-mix(in srgb, ${vars.colors.error} 20%, transparent)`,\n      },\n    },\n  },\n]);\n\nconst smallSize = sprinkles({\n  paddingY: 1,\n  paddingX: 2,\n  fontSize: 'sm',\n  minHeight: 18,\n});\n\nconst mediumSize = sprinkles({\n  paddingY: 2,\n  paddingX: 4,\n  fontSize: 'base',\n  minHeight: 24,\n});\n\nconst largeSize = sprinkles({\n  paddingY: 4,\n  paddingX: 6,\n  fontSize: 'lg',\n  minHeight: 32,\n});\n\nexport const textarea = recipe({\n  base: baseTextarea,\n  variants: {\n    variant: {\n      default: defaultVariant,\n      error: errorVariant,\n    },\n    size: {\n      small: smallSize,\n      medium: mediumSize,\n      large: largeSize,\n    },\n    fullWidth: {\n      true: sprinkles({ width: 'full' }),\n      false: sprinkles({ width: 'auto' }),\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'medium',\n    fullWidth: true,\n  },\n});\n\nexport type TextareaVariants = RecipeVariants<typeof textarea>;\n"],"mappings":""}

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.js

@@ -0,0 +1,48 @@
+import { cx as e } from "../../../theme/tools.js";
+import { ChevronDownSvg as t } from "../../../icons/ChevronDownSvg.js";
+import { Dropdown as n } from "../dropdown/Dropdown.js";
+import { breadcrumbChevron as r, breadcrumbChevronButton as i, breadcrumbChevronOpen as a, breadcrumbLink as o, breadcrumbNameRow as s, breadcrumbSection as c, popoverPanel as l } from "./breadcrumbNavigation.css.js";
+import { BreadcrumbMenuPopover as u } from "./BreadcrumbMenuPopover.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Link as p } from "@plumile/router";
+//#region src/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.tsx
+var m = ({ node: m, menu: h, ariaLabel: g, searchPlaceholder: _, searchAriaLabel: v, emptyLabel: y, emptyMatchesLabel: b }) => {
+	let x = h?.items ?? [];
+	return /* @__PURE__ */ d("div", {
+		className: c,
+		children: /* @__PURE__ */ f("div", {
+			className: s,
+			children: [/* @__PURE__ */ d(p, {
+				to: m.to,
+				className: o,
+				children: m.name
+			}), /* @__PURE__ */ d(n, {
+				trigger: (n) => /* @__PURE__ */ d("button", {
+					type: "button",
+					className: i,
+					children: /* @__PURE__ */ d(t, {
+						width: 14,
+						height: 14,
+						className: e(r, { [a]: n })
+					})
+				}),
+				ariaLabel: g,
+				placement: "bottom-start",
+				matchTriggerWidth: !1,
+				contentClassName: l,
+				children: /* @__PURE__ */ d(u, {
+					items: x,
+					selectedId: h?.selectedId,
+					searchPlaceholder: _,
+					searchAriaLabel: v,
+					emptyLabel: y,
+					emptyMatchesLabel: b
+				})
+			})]
+		})
+	});
+};
+//#endregion
+export { m as BreadcrumbMenuDropdown };
+
+//# sourceMappingURL=BreadcrumbMenuDropdown.js.map

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbMenuDropdown.js","names":[],"sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { Link } from '@plumile/router';\nimport { ChevronDownSvg } from '../../../icons/ChevronDownSvg.js';\nimport { Dropdown } from '../dropdown/Dropdown.js';\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './breadcrumbNavigation.css.js';\nimport { BreadcrumbMenuPopover } from './BreadcrumbMenuPopover.js';\nimport type { BreadcrumbMenuConfig, BreadcrumbNode } from './types.js';\n\ntype Props = {\n  node: BreadcrumbNode;\n  menu?: BreadcrumbMenuConfig;\n  ariaLabel: string;\n  searchPlaceholder: string;\n  searchAriaLabel: string;\n  emptyLabel: string;\n  emptyMatchesLabel: string;\n};\n\nexport const BreadcrumbMenuDropdown = ({\n  node,\n  menu,\n  ariaLabel,\n  searchPlaceholder,\n  searchAriaLabel,\n  emptyLabel,\n  emptyMatchesLabel,\n}: Props): JSX.Element => {\n  const menuItems = menu?.items ?? [];\n\n  return (\n    <div className={styles.breadcrumbSection}>\n      {/* <span className={styles.breadcrumbLabel}>{sectionLabel}</span> */}\n      <div className={styles.breadcrumbNameRow}>\n        <Link to={node.to} className={styles.breadcrumbLink}>\n          {node.name}\n        </Link>\n        <Dropdown\n          trigger={(isOpen) => {\n            return (\n              <button type=\"button\" className={styles.breadcrumbChevronButton}>\n                <ChevronDownSvg\n                  width={14}\n                  height={14}\n                  className={cx(styles.breadcrumbChevron, {\n                    [styles.breadcrumbChevronOpen]: isOpen,\n                  })}\n                />\n              </button>\n            );\n          }}\n          ariaLabel={ariaLabel}\n          placement=\"bottom-start\"\n          matchTriggerWidth={false}\n          contentClassName={styles.popoverPanel}\n        >\n          <BreadcrumbMenuPopover\n            items={menuItems}\n            selectedId={menu?.selectedId}\n            searchPlaceholder={searchPlaceholder}\n            searchAriaLabel={searchAriaLabel}\n            emptyLabel={emptyLabel}\n            emptyMatchesLabel={emptyMatchesLabel}\n          />\n        </Dropdown>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAoBA,IAAa,KAA0B,EACrC,SACA,SACA,cACA,sBACA,oBACA,eACA,2BACwB;CACxB,IAAM,IAAY,GAAM,SAAS,EAAE;AAEnC,QACE,kBAAC,OAAD;EAAK,WAAW;YAEd,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IAAM,IAAI,EAAK;IAAI,WAAW;cAC3B,EAAK;IACD,CAAA,EACP,kBAAC,GAAD;IACE,UAAU,MAEN,kBAAC,UAAD;KAAQ,MAAK;KAAS,WAAW;eAC/B,kBAAC,GAAD;MACE,OAAO;MACP,QAAQ;MACR,WAAW,EAAG,GAA0B,GACrC,IAA+B,GACjC,CAAC;MACF,CAAA;KACK,CAAA;IAGF;IACX,WAAU;IACV,mBAAmB;IACnB,kBAAkB;cAElB,kBAAC,GAAD;KACE,OAAO;KACP,YAAY,GAAM;KACC;KACF;KACL;KACO;KACnB,CAAA;IACO,CAAA,CACP;;EACF,CAAA"}

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuPopover.js

@@ -0,0 +1,54 @@
+import { cx as e } from "../../../theme/tools.js";
+import { Input as t } from "../../atoms/input/Input.js";
+import { useDropdown as n } from "../dropdown/Dropdown.js";
+import { popoverContent as r, popoverItem as i, popoverItemActive as a, popoverItemDescription as o, popoverItemName as s, popoverList as c, popoverSearch as l } from "./breadcrumbNavigation.css.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useMemo as f, useState as p } from "react";
+import { Link as m } from "@plumile/router";
+//#region src/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuPopover.tsx
+var h = ({ items: h, selectedId: g, searchPlaceholder: _, searchAriaLabel: v, emptyLabel: y, emptyMatchesLabel: b }) => {
+	let { close: x } = n(), [S, C] = p(""), w = S.trim().toLowerCase(), T = f(() => w === "" ? h : h.filter((e) => e.name.toLowerCase().includes(w)), [h, w]), E;
+	return E = w === "" ? y : b, /* @__PURE__ */ d("div", {
+		className: r,
+		children: [/* @__PURE__ */ u("div", {
+			className: l,
+			children: /* @__PURE__ */ u(t, {
+				type: "search",
+				size: "small",
+				fullWidth: !0,
+				placeholder: _,
+				value: S,
+				onChange: (e) => {
+					C(e.target.value);
+				},
+				"aria-label": v
+			})
+		}), /* @__PURE__ */ d("ul", {
+			className: c,
+			children: [T.length === 0 && /* @__PURE__ */ u("li", {
+				className: "_1u1q111s txvbqbl9x txvbqb8x txvbqbv8r",
+				children: E
+			}), T.map((t) => {
+				let n = e(i, { [a]: t.id === g }), r = null;
+				return t.description != null && t.description !== "" && (r = /* @__PURE__ */ u("span", {
+					className: o,
+					children: t.description
+				})), /* @__PURE__ */ u("li", { children: /* @__PURE__ */ d(m, {
+					to: t.to,
+					className: n,
+					onClick: () => {
+						x();
+					},
+					children: [/* @__PURE__ */ u("span", {
+						className: s,
+						children: t.name
+					}), r]
+				}) }, t.id);
+			})]
+		})]
+	});
+};
+//#endregion
+export { h as BreadcrumbMenuPopover };
+
+//# sourceMappingURL=BreadcrumbMenuPopover.js.map

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbMenuPopover.js","names":[],"sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuPopover.tsx"],"sourcesContent":["import { type JSX, useMemo, useState } from 'react';\nimport { Link } from '@plumile/router';\nimport { Input } from '../../atoms/input/Input.js';\nimport { useDropdown } from '../dropdown/Dropdown.js';\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './breadcrumbNavigation.css.js';\nimport type { BreadcrumbMenuItem } from './types.js';\n\ntype Props = {\n  items: readonly BreadcrumbMenuItem[];\n  selectedId?: string | null;\n  searchPlaceholder: string;\n  searchAriaLabel: string;\n  emptyLabel: string;\n  emptyMatchesLabel: string;\n};\n\nexport const BreadcrumbMenuPopover = ({\n  items,\n  selectedId,\n  searchPlaceholder,\n  searchAriaLabel,\n  emptyLabel,\n  emptyMatchesLabel,\n}: Props): JSX.Element => {\n  const { close } = useDropdown();\n  const [query, setQuery] = useState('');\n  const normalizedQuery = query.trim().toLowerCase();\n\n  const filteredItems = useMemo(() => {\n    if (normalizedQuery === '') {\n      return items;\n    }\n\n    return items.filter((item) => {\n      return item.name.toLowerCase().includes(normalizedQuery);\n    });\n  }, [items, normalizedQuery]);\n\n  let emptyStateLabel: string;\n  if (normalizedQuery === '') {\n    emptyStateLabel = emptyLabel;\n  } else {\n    emptyStateLabel = emptyMatchesLabel;\n  }\n\n  return (\n    <div className={styles.popoverContent}>\n      <div className={styles.popoverSearch}>\n        <Input\n          type=\"search\"\n          size=\"small\"\n          fullWidth\n          placeholder={searchPlaceholder}\n          value={query}\n          onChange={(event) => {\n            setQuery(event.target.value);\n          }}\n          aria-label={searchAriaLabel}\n        />\n      </div>\n      <ul className={styles.popoverList}>\n        {filteredItems.length === 0 && (\n          <li className={styles.popoverEmpty}>{emptyStateLabel}</li>\n        )}\n        {filteredItems.map((item) => {\n          const itemClassName = cx(styles.popoverItem, {\n            [styles.popoverItemActive]: item.id === selectedId,\n          });\n\n          let descriptionNode: JSX.Element | null = null;\n          if (item.description != null && item.description !== '') {\n            descriptionNode = (\n              <span className={styles.popoverItemDescription}>\n                {item.description}\n              </span>\n            );\n          }\n\n          return (\n            <li key={item.id}>\n              <Link\n                to={item.to}\n                className={itemClassName}\n                onClick={() => {\n                  close();\n                }}\n              >\n                <span className={styles.popoverItemName}>{item.name}</span>\n                {descriptionNode}\n              </Link>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAkBA,IAAa,KAAyB,EACpC,UACA,eACA,sBACA,oBACA,eACA,2BACwB;CACxB,IAAM,EAAE,aAAU,GAAa,EACzB,CAAC,GAAO,KAAY,EAAS,GAAG,EAChC,IAAkB,EAAM,MAAM,CAAC,aAAa,EAE5C,IAAgB,QAChB,MAAoB,KACf,IAGF,EAAM,QAAQ,MACZ,EAAK,KAAK,aAAa,CAAC,SAAS,EAAgB,CACxD,EACD,CAAC,GAAO,EAAgB,CAAC,EAExB;AAOJ,QANA,AAGE,IAHE,MAAoB,KACJ,IAEA,GAIlB,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aACd,kBAAC,GAAD;IACE,MAAK;IACL,MAAK;IACL,WAAA;IACA,aAAa;IACb,OAAO;IACP,WAAW,MAAU;AACnB,OAAS,EAAM,OAAO,MAAM;;IAE9B,cAAY;IACZ,CAAA;GACE,CAAA,EACN,kBAAC,MAAD;GAAI,WAAW;aAAf,CACG,EAAc,WAAW,KACxB,kBAAC,MAAD;IAAI,WAAW;cAAsB;IAAqB,CAAA,EAE3D,EAAc,KAAK,MAAS;IAC3B,IAAM,IAAgB,EAAG,GAAoB,GAC1C,IAA2B,EAAK,OAAO,GACzC,CAAC,EAEE,IAAsC;AAS1C,WARI,EAAK,eAAe,QAAQ,EAAK,gBAAgB,OACnD,IACE,kBAAC,QAAD;KAAM,WAAW;eACd,EAAK;KACD,CAAA,GAKT,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;KACE,IAAI,EAAK;KACT,WAAW;KACX,eAAe;AACb,SAAO;;eAJX,CAOE,kBAAC,QAAD;MAAM,WAAW;gBAAyB,EAAK;MAAY,CAAA,EAC1D,EACI;QACJ,EAXI,EAAK,GAWT;KAEP,CACC;KACD"}