npm - @adgytec/adgytec-web-ui-components - Versions diffs - 2.0.0 → 2.1.0 - Mend

@adgytec/adgytec-web-ui-components 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (230) hide show

package/dist/chunks/Switch CHANGED Viewed

@@ -1,9 +1,9 @@
-import { t as e } from "./Icon";
-import { t } from "./tapTarget";
-import { t as n } from "./base";
+import { t as e } from "./tapTarget";
+import { t } from "./base";
+import { t as n } from "./Icon";
 import r from "clsx";
-import { Switch as i } from "react-aria-components";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Switch as s } from "react-aria-components";
 import { Check as c, X as l } from "lucide-react";
 import '../assets/Switch.css';var u = {
 	switch: "_switch_vehim_22",
@@ -11,37 +11,37 @@ import '../assets/Switch.css';var u = {
 	icon: "_icon_vehim_175",
 	handle: "_handle_vehim_179",
 	track: "_track_vehim_299"
-}, d = ({ className: d, children: f, icon: p = "selected", labelPlacement: m = "start", containerStateLayer: h = !1, ...g }) => /* @__PURE__ */ o(i, {
-	className: (e) => r(u.switch, h && u["state-layer"], n.labelLarge, typeof d == "function" ? d(e) : d),
-	...g,
+}, d = ({ className: d, children: f, icon: p = "selected", labelPlacement: m = "start", containerStateLayer: h = !1, unselectedIcon: g = l, selectedIcon: _ = c, ...v }) => /* @__PURE__ */ a(s, {
+	className: (e) => r(u.switch, h && u["state-layer"], t.labelLarge, typeof d == "function" ? d(e) : d),
+	...v,
 	"data-switch": !0,
-	children: (n) => {
-		let { isSelected: i, isHovered: d, isDisabled: g, isFocused: _, isFocusVisible: v, isPressed: y, isReadOnly: b } = n, x;
-		p !== "none" && i && (x = c), p === "both" && !i && (x = l);
+	children: (t) => {
+		let { isSelected: s, isHovered: c, isDisabled: l, isFocused: d, isFocusVisible: v, isPressed: y, isReadOnly: b } = t, x;
+		p !== "none" && s && (x = _), p === "both" && !s && (x = g);
 		let S = {
-			"data-selected": i || void 0,
-			"data-hovered": d || void 0,
-			"data-disabled": g || void 0,
-			"data-focused": _ || void 0,
+			"data-selected": s || void 0,
+			"data-hovered": c || void 0,
+			"data-disabled": l || void 0,
+			"data-focused": d || void 0,
 			"data-focus-visible": v || void 0,
 			"data-pressed": y || void 0,
 			"data-readonly": b || void 0,
 			"data-icon": x ? !0 : void 0,
 			"data-show-state-layer": !h || void 0
 		}, C;
-		x && (C = /* @__PURE__ */ o(e, {
+		x && (C = /* @__PURE__ */ a(n, {
 			icon: x,
 			size: 16,
 			className: r(u.icon),
 			...S
 		}));
-		let w = typeof f == "function" ? f(n) : f;
-		return /* @__PURE__ */ s(a, { children: [
+		let w = typeof f == "function" ? f(t) : f;
+		return /* @__PURE__ */ o(i, { children: [
 			m === "start" && w,
-			/* @__PURE__ */ o("span", {
+			/* @__PURE__ */ a("span", {
 				...S,
-				className: r(u.track, t),
-				children: /* @__PURE__ */ o("span", {
+				className: r(u.track, e),
+				children: /* @__PURE__ */ a("span", {
 					...S,
 					className: r(u.handle),
 					children: C

package/dist/chunks/Switch.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch","names":[],"sources":["../../src/components/Input/Switch/switch.module.css","../../src/components/Input/Switch/Switch.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-switch-handle-color\n* --md-switch-selected-handle-color\n\n --md-switch-handle-interaction-color\n* --md-switch-selected-handle-interaction-color\n\n --md-switch-handle-icon-color\n* --md-switch-selected-handle-icon-color\n\n --md-switch-track-color\n* --md-switch-selected-track-color\n* --md-switch-track-outline-color\n\n --md-switch-state-layer-color\n* --md-switch-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .switch {\n / switch tokens /\n / handle tokens /\n --_md-switch-handle-color: var(\n --md-switch-handle-color,\n var(--md-sys-color-outline)\n );\n --_md-switch-selected-handle-color: var(\n --md-switch-selected-handle-color,\n var(--md-sys-color-on-primary)\n );\n\n / for hovered, focused and pressed state /\n --_md-switch-handle-interaction-color: var(\n --md-switch-handle-interaction-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-switch-selected-handle-interaction-color: var(\n --md-switch-selected-handle-interaction-color,\n var(--md-sys-color-primary-container)\n );\n\n / handle icon tokens /\n --_md-switch-handle-icon-color: var(\n --md-switch-handle-icon-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-handle-icon-color: var(\n --md-switch-selected-handle-icon-color,\n var(--md-sys-color-primary)\n );\n\n / track tokens /\n --_md-switch-track-color: var(\n --md-switch-track-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-track-color: var(\n --md-switch-selected-track-color,\n var(--md-sys-color-primary)\n );\n --_md-switch-track-outline-color: var(\n --md-switch-track-outline-color,\n var(--md-sys-color-outline)\n );\n\n / state layer tokens /\n --_md-switch-state-layer-color: var(\n --md-switch-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-switch-selected-state-layer-color: var(\n --md-switch-selected-state-layer-color,\n var(--_md-switch-selected-track-color)\n );\n\n / configurable tokens end /\n\n / handle specific tokens /\n / size /\n --_md-switch-handle-size: calc(16 var(--dp, 1px));\n --_md-switch-handle-with-icon-size: calc(24 * var(--dp, 1px));\n --_md-switch-selected-handle-size: calc(24 * var(--dp, 1px));\n --_md-switch-pressed-handle-size: calc(28 * var(--dp, 1px));\n\n /* shape /\n --_md-switch-handle-shape: var(--md-sys-shape-corner-radius-full);\n\n / handle tokens end /\n\n / track tokens /\n / dimensions and shape /\n --_md-switch-track-block-size: calc(32 var(--dp, 1px));\n --_md-switch-track-inline-size: calc(52 * var(--dp, 1px));\n --_md-switch-track-shape: var(--md-sys-shape-corner-radius-full);\n\n /* outline /\n --_md-switch-track-outline-thickness: calc(2 var(--dp, 1px));\n\n /* track tokens end /\n\n / state layer tokens /\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-switch-state-layer-color);\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / state layer tokens end /\n\n position: relative;\n display: inline-flex;\n\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-16);\n\n color: inherit;\n cursor: pointer;\n\n & {\n cursor: inherit;\n }\n\n &[data-disabled] {\n color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-switch-selected-state-layer-color);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n z-index: 1;\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n z-index: 1;\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n }\n\n .state-layer::before {\n content: \"\";\n\n position: absolute;\n inset: calc(-1 * var(--md-sys-layout-space-12));\n\n background-color: var(--_state-layer-color);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n pointer-events: none;\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .icon {\n color: var(--_icon-color);\n }\n\n .handle {\n /* derived size /\n --_handle-size: var(--_md-switch-handle-size);\n --_handle-color: var(--_md-switch-handle-color);\n --_handle-x: calc(6 var(--dp, 1px));\n\n --_icon-color: var(--_md-switch-handle-icon-color);\n\n /* handle style /\n position: absolute;\n inset-block-start: 50%;\n translate: var(--_handle-x) -50%;\n\n inline-size: var(--_handle-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_md-switch-handle-shape);\n\n background-color: var(--_handle-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition:\n translate var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n inline-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n block-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n --_handle-size: var(--_md-switch-handle-with-icon-size);\n --_handle-x: calc(2 var(--dp, 1px));\n }\n\n &[data-selected] {\n --_handle-color: var(--_md-switch-selected-handle-color);\n --_handle-size: var(--_md-switch-selected-handle-size);\n --_handle-x: calc(22 * var(--dp, 1px));\n --_icon-color: var(--_md-switch-selected-handle-icon-color);\n }\n\n &[data-pressed] {\n --_handle-size: var(--_md-switch-pressed-handle-size);\n --_handle-x: 0;\n\n &[data-selected] {\n --_handle-x: calc(20 * var(--dp, 1px));\n }\n }\n\n &[data-focus-visible],\n &[data-hovered],\n &[data-pressed] {\n --_handle-color: var(--_md-switch-handle-interaction-color);\n\n &[data-selected] {\n --_handle-color: var(\n --_md-switch-selected-handle-interaction-color\n );\n }\n }\n\n &[data-disabled] {\n --_icon-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-selected] {\n --_icon-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-surface) r g b /\n 1\n );\n }\n }\n }\n\n /* handle state layer /\n .handle[data-show-state-layer]::before {\n --_state-size: calc(40 var(--dp, 1px));\n --_state-shape: var(--md-sys-shape-corner-radius-full);\n\n content: \"\";\n\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_state-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_state-shape);\n\n background-color: var(--_state-layer-color);\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track {\n --_track-color: var(--_md-switch-track-color);\n --_track-outline-color: var(--_md-switch-track-outline-color);\n\n position: relative;\n border-radius: var(--_md-switch-track-shape);\n\n inline-size: var(--_md-switch-track-inline-size);\n min-inline-size: var(--_md-switch-track-inline-size);\n\n block-size: var(--_md-switch-track-block-size);\n min-block-size: var(--_md-switch-track-block-size);\n\n border-width: var(--_md-switch-track-outline-thickness);\n border-style: solid;\n border-color: var(--_track-outline-color);\n\n background-color: var(--_track-color);\n\n transition:\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n border-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track[data-disabled] {\n --_track-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_track-outline-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-selected] {\n --_track-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n .track[data-selected] {\n --_track-color: var(--_md-switch-selected-track-color);\n --_track-outline-color: transparent;\n }\n\n .track[data-focus-visible] {\n --focus-indicator-color: var(--md-sys-color-secondary);\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n}\n","import clsx from \"clsx\";\nimport { Check, type LucideIcon, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport styles from \"./switch.module.css\";\nimport type { SwitchProps } from \"./types\";\n\nexport const Switch: React.FC<SwitchProps> = ({\n className,\n children,\n icon = \"selected\",\n labelPlacement = \"start\",\n containerStateLayer = false,\n ...props\n}) => {\n return (\n <AriaSwitch\n className={(renderProps) =>\n clsx(\n styles[\"switch\"],\n containerStateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-switch\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isReadOnly,\n } = renderProps;\n\n let iconValue: LucideIcon \| undefined;\n if (icon !== \"none\" && isSelected) {\n iconValue = Check;\n }\n\n if (icon === \"both\" && !isSelected) {\n iconValue = X;\n }\n\n const dataAttrs = {\n \"data-selected\": isSelected \|\| undefined,\n \"data-hovered\": isHovered \|\| undefined,\n \"data-disabled\": isDisabled \|\| undefined,\n \"data-focused\": isFocused \|\| undefined,\n \"data-focus-visible\": isFocusVisible \|\| undefined,\n \"data-pressed\": isPressed \|\| undefined,\n \"data-readonly\": isReadOnly \|\| undefined,\n \"data-icon\": iconValue ? true : undefined,\n \"data-show-state-layer\": !containerStateLayer \|\| undefined,\n };\n\n let iconElement: ReactNode;\n if (iconValue) {\n iconElement = (\n <Icon\n icon={iconValue}\n size={16}\n className={clsx(styles[\"icon\"])}\n {...dataAttrs}\n />\n );\n }\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n\n return (\n <>\n {labelPlacement === \"start\" && label}\n\n <span\n {...dataAttrs}\n className={clsx(styles[\"track\"], TapTarget)}\n >\n <span\n {...dataAttrs}\n className={clsx(styles[\"handle\"])}\n >\n {iconElement}\n </span>\n </span>\n\n {labelPlacement === \"end\" && label}\n </>\n );\n }}\n </AriaSwitch>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCUa,KAAiC,EAC1C,cACA,aACA,UAAO,YACP,oBAAiB,SACjB,yBAAsB,IACtB,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,QACP,KAAuB,EAAO,gBAC9B,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;CACJ,eAAA;YAEE,MAAgB;EACd,IAAM,EACF,eACA,cACA,eACA,cACA,mBACA,cACA,kBACA,GAEA;EAKJ,AAJI,MAAS,UAAU,MACnB,IAAY,IAGZ,MAAS,UAAU,CAAC,MACpB,IAAY;EAGhB,IAAM,IAAY;GACd,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,sBAAsB,KAAkB,KAAA;GACxC,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,aAAa,IAAY,KAAO,KAAA;GAChC,yBAAyB,CAAC,KAAuB,KAAA;EACrD,GAEI;EACJ,AAAI,MACA,IACI,kBAAC,GAAD;GACI,MAAM;GACN,MAAM;GACN,WAAW,EAAK,EAAO,IAAO;GAC9B,GAAI;EACP,CAAA;EAIT,IAAM,IACF,OAAO,KAAa,aACd,EAAS,CAAW,IACpB;EAEV,OACI,kBAAA,GAAA,EAAA,UAAA;GACK,MAAmB,WAAW;GAE/B,kBAAC,QAAD;IACI,GAAI;IACJ,WAAW,EAAK,EAAO,OAAU,CAAS;cAE1C,kBAAC,QAAD;KACI,GAAI;KACJ,WAAW,EAAK,EAAO,MAAS;eAE/B;IACC,CAAA;GACJ,CAAA;GAEL,MAAmB,SAAS;EAC/B,EAAA,CAAA;CAEV;AACQ,CAAA"}
1	+ {"version":3,"file":"Switch","names":[],"sources":["../../src/components/Input/Switch/switch.module.css","../../src/components/Input/Switch/Switch.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-switch-handle-color\n* --md-switch-selected-handle-color\n\n --md-switch-handle-interaction-color\n* --md-switch-selected-handle-interaction-color\n\n --md-switch-handle-icon-color\n* --md-switch-selected-handle-icon-color\n\n --md-switch-track-color\n* --md-switch-selected-track-color\n* --md-switch-track-outline-color\n\n --md-switch-state-layer-color\n* --md-switch-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .switch {\n / switch tokens /\n / handle tokens /\n --_md-switch-handle-color: var(\n --md-switch-handle-color,\n var(--md-sys-color-outline)\n );\n --_md-switch-selected-handle-color: var(\n --md-switch-selected-handle-color,\n var(--md-sys-color-on-primary)\n );\n\n / for hovered, focused and pressed state /\n --_md-switch-handle-interaction-color: var(\n --md-switch-handle-interaction-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-switch-selected-handle-interaction-color: var(\n --md-switch-selected-handle-interaction-color,\n var(--md-sys-color-primary-container)\n );\n\n / handle icon tokens /\n --_md-switch-handle-icon-color: var(\n --md-switch-handle-icon-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-handle-icon-color: var(\n --md-switch-selected-handle-icon-color,\n var(--md-sys-color-primary)\n );\n\n / track tokens /\n --_md-switch-track-color: var(\n --md-switch-track-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-track-color: var(\n --md-switch-selected-track-color,\n var(--md-sys-color-primary)\n );\n --_md-switch-track-outline-color: var(\n --md-switch-track-outline-color,\n var(--md-sys-color-outline)\n );\n\n / state layer tokens /\n --_md-switch-state-layer-color: var(\n --md-switch-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-switch-selected-state-layer-color: var(\n --md-switch-selected-state-layer-color,\n var(--_md-switch-selected-track-color)\n );\n\n / configurable tokens end /\n\n / handle specific tokens /\n / size /\n --_md-switch-handle-size: calc(16 var(--dp, 1px));\n --_md-switch-handle-with-icon-size: calc(24 * var(--dp, 1px));\n --_md-switch-selected-handle-size: calc(24 * var(--dp, 1px));\n --_md-switch-pressed-handle-size: calc(28 * var(--dp, 1px));\n\n /* shape /\n --_md-switch-handle-shape: var(--md-sys-shape-corner-radius-full);\n\n / handle tokens end /\n\n / track tokens /\n / dimensions and shape /\n --_md-switch-track-block-size: calc(32 var(--dp, 1px));\n --_md-switch-track-inline-size: calc(52 * var(--dp, 1px));\n --_md-switch-track-shape: var(--md-sys-shape-corner-radius-full);\n\n /* outline /\n --_md-switch-track-outline-thickness: calc(2 var(--dp, 1px));\n\n /* track tokens end /\n\n / state layer tokens /\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-switch-state-layer-color);\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / state layer tokens end /\n\n position: relative;\n display: inline-flex;\n\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-16);\n\n color: inherit;\n cursor: pointer;\n\n & {\n cursor: inherit;\n }\n\n &[data-disabled] {\n color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-switch-selected-state-layer-color);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n z-index: 1;\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n z-index: 1;\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n }\n\n .state-layer::before {\n content: \"\";\n\n position: absolute;\n inset: calc(-1 * var(--md-sys-layout-space-12));\n\n background-color: var(--_state-layer-color);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n pointer-events: none;\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .icon {\n color: var(--_icon-color);\n }\n\n .handle {\n /* derived size /\n --_handle-size: var(--_md-switch-handle-size);\n --_handle-color: var(--_md-switch-handle-color);\n --_handle-x: calc(6 var(--dp, 1px));\n\n --_icon-color: var(--_md-switch-handle-icon-color);\n\n /* handle style /\n position: absolute;\n inset-block-start: 50%;\n translate: var(--_handle-x) -50%;\n\n inline-size: var(--_handle-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_md-switch-handle-shape);\n\n background-color: var(--_handle-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition:\n translate var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n inline-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n block-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n --_handle-size: var(--_md-switch-handle-with-icon-size);\n --_handle-x: calc(2 var(--dp, 1px));\n }\n\n &[data-selected] {\n --_handle-color: var(--_md-switch-selected-handle-color);\n --_handle-size: var(--_md-switch-selected-handle-size);\n --_handle-x: calc(22 * var(--dp, 1px));\n --_icon-color: var(--_md-switch-selected-handle-icon-color);\n }\n\n &[data-pressed] {\n --_handle-size: var(--_md-switch-pressed-handle-size);\n --_handle-x: 0;\n\n &[data-selected] {\n --_handle-x: calc(20 * var(--dp, 1px));\n }\n }\n\n &[data-focus-visible],\n &[data-hovered],\n &[data-pressed] {\n --_handle-color: var(--_md-switch-handle-interaction-color);\n\n &[data-selected] {\n --_handle-color: var(\n --_md-switch-selected-handle-interaction-color\n );\n }\n }\n\n &[data-disabled] {\n --_icon-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-selected] {\n --_icon-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-surface) r g b /\n 1\n );\n }\n }\n }\n\n /* handle state layer /\n .handle[data-show-state-layer]::before {\n --_state-size: calc(40 var(--dp, 1px));\n --_state-shape: var(--md-sys-shape-corner-radius-full);\n\n content: \"\";\n\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_state-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_state-shape);\n\n background-color: var(--_state-layer-color);\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track {\n --_track-color: var(--_md-switch-track-color);\n --_track-outline-color: var(--_md-switch-track-outline-color);\n\n position: relative;\n border-radius: var(--_md-switch-track-shape);\n\n inline-size: var(--_md-switch-track-inline-size);\n min-inline-size: var(--_md-switch-track-inline-size);\n\n block-size: var(--_md-switch-track-block-size);\n min-block-size: var(--_md-switch-track-block-size);\n\n border-width: var(--_md-switch-track-outline-thickness);\n border-style: solid;\n border-color: var(--_track-outline-color);\n\n background-color: var(--_track-color);\n\n transition:\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n border-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track[data-disabled] {\n --_track-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_track-outline-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-selected] {\n --_track-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n .track[data-selected] {\n --_track-color: var(--_md-switch-selected-track-color);\n --_track-outline-color: transparent;\n }\n\n .track[data-focus-visible] {\n --focus-indicator-color: var(--md-sys-color-secondary);\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n }\n}\n","import clsx from \"clsx\";\nimport { Check, type LucideIcon, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport styles from \"./switch.module.css\";\nimport type { SwitchProps } from \"./types\";\n\nexport const Switch: React.FC<SwitchProps> = ({\n className,\n children,\n icon = \"selected\",\n labelPlacement = \"start\",\n containerStateLayer = false,\n unselectedIcon = X,\n selectedIcon = Check,\n ...props\n}) => {\n return (\n <AriaSwitch\n className={(renderProps) =>\n clsx(\n styles[\"switch\"],\n containerStateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-switch\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isReadOnly,\n } = renderProps;\n\n let iconValue: LucideIcon \| undefined;\n if (icon !== \"none\" && isSelected) {\n iconValue = selectedIcon;\n }\n\n if (icon === \"both\" && !isSelected) {\n iconValue = unselectedIcon;\n }\n\n const dataAttrs = {\n \"data-selected\": isSelected \|\| undefined,\n \"data-hovered\": isHovered \|\| undefined,\n \"data-disabled\": isDisabled \|\| undefined,\n \"data-focused\": isFocused \|\| undefined,\n \"data-focus-visible\": isFocusVisible \|\| undefined,\n \"data-pressed\": isPressed \|\| undefined,\n \"data-readonly\": isReadOnly \|\| undefined,\n \"data-icon\": iconValue ? true : undefined,\n \"data-show-state-layer\": !containerStateLayer \|\| undefined,\n };\n\n let iconElement: ReactNode;\n if (iconValue) {\n iconElement = (\n <Icon\n icon={iconValue}\n size={16}\n className={clsx(styles[\"icon\"])}\n {...dataAttrs}\n />\n );\n }\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n\n return (\n <>\n {labelPlacement === \"start\" && label}\n\n <span\n {...dataAttrs}\n className={clsx(styles[\"track\"], TapTarget)}\n >\n <span\n {...dataAttrs}\n className={clsx(styles[\"handle\"])}\n >\n {iconElement}\n </span>\n </span>\n\n {labelPlacement === \"end\" && label}\n </>\n );\n }}\n </AriaSwitch>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCUa,KAAiC,EAC1C,cACA,aACA,UAAO,YACP,oBAAiB,SACjB,yBAAsB,IACtB,oBAAiB,GACjB,kBAAe,GACf,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,QACP,KAAuB,EAAO,gBAC9B,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;CACJ,eAAA;YAEE,MAAgB;EACd,IAAM,EACF,eACA,cACA,eACA,cACA,mBACA,cACA,kBACA,GAEA;EAKJ,AAJI,MAAS,UAAU,MACnB,IAAY,IAGZ,MAAS,UAAU,CAAC,MACpB,IAAY;EAGhB,IAAM,IAAY;GACd,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,sBAAsB,KAAkB,KAAA;GACxC,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,aAAa,IAAY,KAAO,KAAA;GAChC,yBAAyB,CAAC,KAAuB,KAAA;EACrD,GAEI;EACJ,AAAI,MACA,IACI,kBAAC,GAAD;GACI,MAAM;GACN,MAAM;GACN,WAAW,EAAK,EAAO,IAAO;GAC9B,GAAI;EACP,CAAA;EAIT,IAAM,IACF,OAAO,KAAa,aACd,EAAS,CAAW,IACpB;EAEV,OACI,kBAAA,GAAA,EAAA,UAAA;GACK,MAAmB,WAAW;GAE/B,kBAAC,QAAD;IACI,GAAI;IACJ,WAAW,EAAK,EAAO,OAAU,CAAS;cAE1C,kBAAC,QAAD;KACI,GAAI;KACJ,WAAW,EAAK,EAAO,MAAS;eAE/B;IACC,CAAA;GACJ,CAAA;GAEL,MAAmB,SAAS;EAC/B,EAAA,CAAA;CAEV;AACQ,CAAA"}

package/dist/chunks/Tab CHANGED Viewed

@@ -1,32 +1,32 @@
-import { t as e } from "./Icon";
-import { n as t, t as n } from "./useSplash";
-import { t as r } from "./base";
+import { t as e } from "./base";
+import { t } from "./Icon";
+import { n, t as r } from "./useSplash";
 import i from "clsx";
-import { SelectionIndicator as a, Tab as o } from "react-aria-components";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { SelectionIndicator as s, Tab as c } from "react-aria-components";
 import '../assets/Tab.css';var l = {
 	tab: "_tab_1lw7s_2",
 	"selection-indicator": "_selection-indicator_1lw7s_117",
 	splash: "_splash_1lw7s_130"
 }, u = ({ className: u, label: d, icon: f, onPress: p, ...m }) => {
-	let { splashInfo: h, handlePress: g } = n(p);
-	return /* @__PURE__ */ c(o, {
+	let { splashInfo: h, handlePress: g } = r(p);
+	return /* @__PURE__ */ o(c, {
 		onPress: g,
-		className: (e) => i(l.tab, r.titleSmall, typeof u == "function" ? u(e) : u),
+		className: (t) => i(l.tab, e.titleSmall, typeof u == "function" ? u(t) : u),
 		...m,
 		"data-icon": f ? !0 : void 0,
 		"data-tab": !0,
 		children: [
-			h && /* @__PURE__ */ s("span", {
+			h && /* @__PURE__ */ a("span", {
 				className: i(l.splash),
-				children: /* @__PURE__ */ s(t, { ...h })
+				children: /* @__PURE__ */ a(n, { ...h })
 			}),
-			f && /* @__PURE__ */ s(e, {
+			f && /* @__PURE__ */ a(t, {
 				icon: f,
 				size: 24
 			}),
 			d,
-			/* @__PURE__ */ s(a, {
+			/* @__PURE__ */ a(s, {
 				className: i(l["selection-indicator"]),
 				"data-selection-indicator": !0
 			})

package/dist/chunks/TabList CHANGED Viewed

@@ -1,8 +1,8 @@
 import e from "clsx";
-import { TabList as t } from "react-aria-components";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
+import { TabList as n } from "react-aria-components";
 import '../assets/TabList.css';//#region src/components/Tabs/TabList/tabList.module.css
-var r = { "tab-list": "_tab-list_8hi4u_12" }, i = ({ className: i, ...a }) => /* @__PURE__ */ n(t, {
+var r = { "tab-list": "_tab-list_8hi4u_12" }, i = ({ className: i, ...a }) => /* @__PURE__ */ t(n, {
 	className: (t) => e(r["tab-list"], typeof i == "function" ? i(t) : i),
 	...a
 });

package/dist/chunks/TabPanel CHANGED Viewed

@@ -1,8 +1,8 @@
 import e from "clsx";
-import { TabPanel as t } from "react-aria-components";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
+import { TabPanel as n } from "react-aria-components";
 import '../assets/TabPanel.css';//#region src/components/Tabs/TabPanel/tabPanel.module.css
-var r = { "tab-panel": "_tab-panel_1q4o7_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ n(t, {
+var r = { "tab-panel": "_tab-panel_1q4o7_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ t(n, {
 	className: (t) => e(r["tab-panel"], typeof i == "function" ? i(t) : i),
 	...a
 });

package/dist/chunks/TabPanels CHANGED Viewed

@@ -1,8 +1,8 @@
 import e from "clsx";
-import { TabPanels as t } from "react-aria-components";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
+import { TabPanels as n } from "react-aria-components";
 import '../assets/TabPanels.css';//#region src/components/Tabs/TabPanels/tabPanels.module.css
-var r = { "tab-panels": "_tab-panels_u5x73_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ n(t, {
+var r = { "tab-panels": "_tab-panels_u5x73_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ t(n, {
 	className: e(r["tab-panels"], i),
 	...a,
 	"data-tab-panels": !0

package/dist/chunks/Tabs CHANGED Viewed

@@ -1,7 +1,7 @@
 import e from "clsx";
-import { Tabs as t } from "react-aria-components";
-import { jsx as n } from "react/jsx-runtime";
-import '../assets/Tabs.css';var r = { tabs: "_tabs_1mme9_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ n(t, {
+import { jsx as t } from "react/jsx-runtime";
+import { Tabs as n } from "react-aria-components";
+import '../assets/Tabs.css';var r = { tabs: "_tabs_1mme9_2" }, i = ({ className: i, ...a }) => /* @__PURE__ */ t(n, {
 	className: (t) => e(r.tabs, typeof i == "function" ? i(t) : i),
 	...a
 });

package/dist/chunks/Tag CHANGED Viewed

@@ -1,43 +1,43 @@
-import { t as e } from "./Icon";
-import { n as t, t as n } from "./useSplash";
-import { t as r } from "./base";
+import { t as e } from "./base";
+import { t } from "./Icon";
+import { n, t as r } from "./useSplash";
 import { IconButton as i } from "../components/Button/IconButton/index.js";
 import a from "clsx";
-import { Tag as o } from "react-aria-components";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Tag as l } from "react-aria-components";
 import { Check as u, X as d } from "lucide-react";
 import '../assets/Tag.css';//#region src/components/Tag/core.ts
 var f = 18, p = 24, m = {
-	tag: "_tag_mgv0u_15",
-	label: "_label_mgv0u_184",
-	"avatar-constraint": "_avatar-constraint_mgv0u_195"
+	tag: "_tag_oartz_15",
+	label: "_label_oartz_184",
+	"avatar-constraint": "_avatar-constraint_oartz_195"
 }, h = ({ icon: f, avatar: p, label: h, className: g, onPress: _, textValue: v = h, ...y }) => {
-	let { splashInfo: b, handlePress: x } = n(_);
-	return /* @__PURE__ */ c(o, {
+	let { splashInfo: b, handlePress: x } = r(_);
+	return /* @__PURE__ */ s(l, {
 		onPress: x,
 		className: (e) => a(m.tag, typeof g == "function" ? g(e) : g),
 		textValue: v,
 		...y,
 		"data-avatar": p ? !0 : void 0,
 		"data-icon": !p && f ? !0 : void 0,
-		children: ({ isSelected: n, allowsRemoving: o, isDisabled: g }) => /* @__PURE__ */ l(s, { children: [
-			b && /* @__PURE__ */ c(t, { ...b }),
-			p ? /* @__PURE__ */ c("div", {
+		children: ({ isSelected: r, allowsRemoving: l, isDisabled: g }) => /* @__PURE__ */ c(o, { children: [
+			b && /* @__PURE__ */ s(n, { ...b }),
+			p ? /* @__PURE__ */ s("div", {
 				className: a(m["avatar-constraint"]),
 				"data-disabled": g || void 0,
 				children: p
-			}) : n ? /* @__PURE__ */ c(e, {
+			}) : r ? /* @__PURE__ */ s(t, {
 				icon: u,
 				size: 18
-			}) : f && /* @__PURE__ */ c(e, {
+			}) : f && /* @__PURE__ */ s(t, {
 				icon: f,
 				size: 18
 			}),
-			/* @__PURE__ */ c("p", {
-				className: a(r.labelLarge, m.label),
+			/* @__PURE__ */ s("p", {
+				className: a(e.labelLarge, m.label),
 				children: h
 			}),
-			o && /* @__PURE__ */ c(i, {
+			l && /* @__PURE__ */ s(i, {
 				slot: "remove",
 				icon: d,
 				size: "extra-small",

package/dist/chunks/Tag.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag","names":[],"sources":["../../src/components/Tag/core.ts","../../src/components/Tag/tag.module.css","../../src/components/Tag/Tag.tsx"],"sourcesContent":["export const TagIconSize = 18;\nexport const AvatarSize = 24;\n","/* configurable tokens\n\n --md-chip-background-color\n* --md-chip-selected-background-color\n\n --md-chip-icon-color\n* --md-chip-selected-icon-color\n\n --md-chip-label-color\n* --md-chip-selected-label-color\n\n configurable tokens end /\n\n@layer adgytec.overrides {\n .tag {\n [data-visual-button] {\n --focus-indicator-offset: calc(-4 var(--dp, 1px));\n }\n }\n}\n\n@layer adgytec.comps {\n .tag {\n --_md-chip-background-color: var(\n --md-chip-background-color,\n var(--md-sys-color-surface-container-low)\n );\n --_md-chip-selected-background-color: var(\n --md-chip-selected-background-color,\n var(--md-sys-color-secondary-container)\n );\n --_md-chip-icon-color: var(\n --md-chip-icon-color,\n var(--md-sys-color-primary)\n );\n --_md-chip-selected-icon-color: var(\n --md-chip-selected-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n --_md-chip-label-color: var(\n --md-chip-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-chip-selected-label-color: var(\n --md-chip-selected-label-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n /* derived /\n --_background: var(--_md-chip-background-color);\n --_label-color: var(--_md-chip-label-color);\n --_icon-color: var(--_md-chip-icon-color);\n\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_label-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / styles /\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-8);\n\n position: relative;\n overflow: clip;\n\n background-color: var(--_background);\n color: var(--_icon-color);\n\n padding-inline: var(--md-sys-layout-space-12);\n padding-block: calc(5 var(--dp, 1px));\n border-radius: var(--md-sys-shape-corner-radius-small);\n\n border: calc(1 * var(--dp, 1px)) solid\n var(--md-sys-color-outline-variant);\n outline: none;\n\n transition:\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n border-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n padding var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n padding-inline-start: var(--md-sys-layout-space-8);\n }\n\n &[data-avatar] {\n padding-block: calc(3 * var(--dp, 1px));\n padding-inline-start: var(--md-sys-layout-space-4);\n }\n\n &[data-allows-removing] {\n padding-block: 0;\n padding-inline-end: calc(2 * var(--dp, 1px));\n }\n\n &[data-selection-mode] {\n cursor: pointer;\n }\n\n &[data-selected] {\n --_background: var(--_md-chip-selected-background-color);\n --_label-color: var(--_md-chip-selected-label-color);\n --_icon-color: var(--_md-chip-selected-icon-color);\n\n border-color: transparent;\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n\n &[data-disabled] {\n cursor: default;\n border-color: transparent;\n\n --_background: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_label-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_icon-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n\n /* state layer /\n .tag::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n / focus indicator /\n .tag[data-focus-visible] {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n\n z-index: 1;\n }\n\n .label {\n color: var(--_label-color);\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .avatar-constraint {\n inline-size: var(--md-sys-layout-space-24);\n aspect-ratio: 1 / 1;\n\n overflow: clip;\n\n &[data-disabled] {\n position: relative;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n\n background: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Check, X } from \"lucide-react\";\nimport { Tag as AriaTag } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Splash } from \"../Splash/Splash\";\nimport { useSplash } from \"../Splash/useSplash\";\nimport { TagIconSize } from \"./core\";\nimport styles from \"./tag.module.css\";\nimport type { TagProps } from \"./types\";\n\nexport const Tag: React.FC<TagProps> = ({\n icon,\n avatar,\n label,\n className,\n onPress,\n textValue = label,\n ...props\n}) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <AriaTag\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n styles[\"tag\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n textValue={textValue}\n {...props}\n data-avatar={avatar ? true : undefined}\n data-icon={!avatar && icon ? true : undefined}\n >\n {({ isSelected, allowsRemoving, isDisabled }) => (\n <>\n {splashInfo && <Splash {...splashInfo} />}\n {avatar ? (\n <div\n className={clsx(styles[\"avatar-constraint\"])}\n data-disabled={isDisabled \|\| undefined}\n >\n {avatar}\n </div>\n ) : isSelected ? (\n <Icon icon={Check} size={TagIconSize} />\n ) : (\n icon && <Icon icon={icon} size={TagIconSize} />\n )}\n\n <p className={clsx(typography.labelLarge, styles[\"label\"])}>\n {label}\n </p>\n\n {allowsRemoving && (\n <IconButton\n slot=\"remove\"\n icon={X}\n size=\"extra-small\"\n color=\"standard\"\n />\n )}\n </>\n )}\n </AriaTag>\n );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAa,IAAc,IACd,IAAa;;;;GEWb,KAA2B,EACpC,SACA,WACA,UACA,cACA,YACA,eAAY,GACZ,GAAG,QACD;CACF,IAAM,EAAE,eAAY,mBAAgB,EAAU,CAAO;CAErD,OACI,kBAAC,GAAD;EACI,SAAS;EACT,YAAY,MACR,EACI,EAAO,KACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEO;EACX,GAAI;EACJ,eAAa,IAAS,KAAO,KAAA;EAC7B,aAAW,CAAC,KAAU,IAAO,KAAO,KAAA;aAElC,EAAE,eAAY,mBAAgB,oBAC5B,kBAAA,GAAA,EAAA,UAAA;GACK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAa,CAAA;GACvC,IACG,kBAAC,OAAD;IACI,WAAW,EAAK,EAAO,oBAAoB;IAC3C,iBAAe,KAAc,KAAA;cAE5B;GACA,CAAA,IACL,IACA,kBAAC,GAAD;IAAM,MAAM;IAAO,MAAA;GAAoB,CAAA,IAEvC,KAAQ,kBAAC,GAAD;IAAY;IAAM,MAAA;GAAoB,CAAA;GAGlD,kBAAC,KAAD;IAAG,WAAW,EAAK,EAAW,YAAY,EAAO,KAAQ;cACpD;GACF,CAAA;GAEF,KACG,kBAAC,GAAD;IACI,MAAK;IACL,MAAM;IACN,MAAK;IACL,OAAM;GACT,CAAA;EAEP,EAAA,CAAA;CAED,CAAA;AAEjB"}
1	+ {"version":3,"file":"Tag","names":[],"sources":["../../src/components/Tag/core.ts","../../src/components/Tag/tag.module.css","../../src/components/Tag/Tag.tsx"],"sourcesContent":["export const TagIconSize = 18;\nexport const AvatarSize = 24;\n","/* configurable tokens\n\n --md-chip-background-color\n* --md-chip-selected-background-color\n\n --md-chip-icon-color\n* --md-chip-selected-icon-color\n\n --md-chip-label-color\n* --md-chip-selected-label-color\n\n configurable tokens end /\n\n@layer adgytec.overrides {\n .tag {\n [data-visual-button] {\n --focus-indicator-offset: calc(-4 var(--dp, 1px));\n }\n }\n}\n\n@layer adgytec.comps {\n .tag {\n --_md-chip-background-color: var(\n --md-chip-background-color,\n var(--md-sys-color-surface-container-low)\n );\n --_md-chip-selected-background-color: var(\n --md-chip-selected-background-color,\n var(--md-sys-color-secondary-container)\n );\n --_md-chip-icon-color: var(\n --md-chip-icon-color,\n var(--md-sys-color-primary)\n );\n --_md-chip-selected-icon-color: var(\n --md-chip-selected-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n --_md-chip-label-color: var(\n --md-chip-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-chip-selected-label-color: var(\n --md-chip-selected-label-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n /* derived /\n --_background: var(--_md-chip-background-color);\n --_label-color: var(--_md-chip-label-color);\n --_icon-color: var(--_md-chip-icon-color);\n\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_label-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / styles /\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-8);\n\n position: relative;\n overflow: clip;\n\n background-color: var(--_background);\n color: var(--_icon-color);\n\n padding-inline: var(--md-sys-layout-space-12);\n padding-block: calc(5 var(--dp, 1px));\n border-radius: var(--md-sys-shape-corner-radius-small);\n\n border: calc(1 * var(--dp, 1px)) solid\n var(--md-sys-color-outline-variant);\n outline: none;\n\n transition:\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n border-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n padding var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n padding-inline-start: var(--md-sys-layout-space-8);\n }\n\n &[data-avatar] {\n padding-block: calc(3 * var(--dp, 1px));\n padding-inline-start: var(--md-sys-layout-space-4);\n }\n\n &[data-allows-removing] {\n padding-block: 0;\n padding-inline-end: calc(2 * var(--dp, 1px));\n }\n\n &[data-selection-mode] {\n cursor: pointer;\n }\n\n &[data-selected] {\n --_background: var(--_md-chip-selected-background-color);\n --_label-color: var(--_md-chip-selected-label-color);\n --_icon-color: var(--_md-chip-selected-icon-color);\n\n border-color: transparent;\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n\n &[data-disabled] {\n cursor: default;\n border-color: transparent;\n\n --_background: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_label-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_icon-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n\n /* state layer /\n .tag::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n / focus indicator /\n .tag[data-focus-visible] {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n\n z-index: 1;\n }\n\n .label {\n color: var(--_label-color);\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .avatar-constraint {\n inline-size: var(--md-sys-layout-space-24);\n max-inline-size: var(--md-sys-layout-space-24);\n\n block-size: var(--md-sys-layout-space-24);\n max-block-size: var(--md-sys-layout-space-24);\n\n aspect-ratio: 1 / 1;\n border-radius: 50%;\n\n overflow: clip;\n\n &[data-disabled] {\n position: relative;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n\n background: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Check, X } from \"lucide-react\";\nimport { Tag as AriaTag } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Splash } from \"../Splash/Splash\";\nimport { useSplash } from \"../Splash/useSplash\";\nimport { TagIconSize } from \"./core\";\nimport styles from \"./tag.module.css\";\nimport type { TagProps } from \"./types\";\n\nexport const Tag: React.FC<TagProps> = ({\n icon,\n avatar,\n label,\n className,\n onPress,\n textValue = label,\n ...props\n}) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <AriaTag\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n styles[\"tag\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n textValue={textValue}\n {...props}\n data-avatar={avatar ? true : undefined}\n data-icon={!avatar && icon ? true : undefined}\n >\n {({ isSelected, allowsRemoving, isDisabled }) => (\n <>\n {splashInfo && <Splash {...splashInfo} />}\n {avatar ? (\n <div\n className={clsx(styles[\"avatar-constraint\"])}\n data-disabled={isDisabled \|\| undefined}\n >\n {avatar}\n </div>\n ) : isSelected ? (\n <Icon icon={Check} size={TagIconSize} />\n ) : (\n icon && <Icon icon={icon} size={TagIconSize} />\n )}\n\n <p className={clsx(typography.labelLarge, styles[\"label\"])}>\n {label}\n </p>\n\n {allowsRemoving && (\n <IconButton\n slot=\"remove\"\n icon={X}\n size=\"extra-small\"\n color=\"standard\"\n />\n )}\n </>\n )}\n </AriaTag>\n );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAa,IAAc,IACd,IAAa;;;;GEWb,KAA2B,EACpC,SACA,WACA,UACA,cACA,YACA,eAAY,GACZ,GAAG,QACD;CACF,IAAM,EAAE,eAAY,mBAAgB,EAAU,CAAO;CAErD,OACI,kBAAC,GAAD;EACI,SAAS;EACT,YAAY,MACR,EACI,EAAO,KACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEO;EACX,GAAI;EACJ,eAAa,IAAS,KAAO,KAAA;EAC7B,aAAW,CAAC,KAAU,IAAO,KAAO,KAAA;aAElC,EAAE,eAAY,mBAAgB,oBAC5B,kBAAA,GAAA,EAAA,UAAA;GACK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAa,CAAA;GACvC,IACG,kBAAC,OAAD;IACI,WAAW,EAAK,EAAO,oBAAoB;IAC3C,iBAAe,KAAc,KAAA;cAE5B;GACA,CAAA,IACL,IACA,kBAAC,GAAD;IAAM,MAAM;IAAO,MAAA;GAAoB,CAAA,IAEvC,KAAQ,kBAAC,GAAD;IAAY;IAAM,MAAA;GAAoB,CAAA;GAGlD,kBAAC,KAAD;IAAG,WAAW,EAAK,EAAW,YAAY,EAAO,KAAQ;cACpD;GACF,CAAA;GAEF,KACG,kBAAC,GAAD;IACI,MAAK;IACL,MAAM;IACN,MAAK;IACL,OAAM;GACT,CAAA;EAEP,EAAA,CAAA;CAED,CAAA;AAEjB"}

package/dist/chunks/ThemeSelector CHANGED Viewed

@@ -1,10 +1,10 @@
-import { r as e } from "./core";
-import { t } from "./base";
+import { t as e } from "./base";
+import { r as t } from "./core";
 import { t as n } from "./ConnectedButtonGroup";
 import { t as r } from "./Switch";
 import i from "clsx";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useLayoutEffect as s, useMemo as c } from "react";
+import { useLayoutEffect as a, useMemo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { useLocalStorage as l, useMediaQuery as u } from "usehooks-ts";
 import '../assets/ThemeSelector.css';//#region src/utils/theme/build.ts
 var d = ({ isDarkMode: e, isMonochrome: t, contrast: n }) => {
@@ -44,7 +44,7 @@ function m({ defaultThemeMode: e = "system", defaultContrast: t = "standard", is
 //#region src/components/ThemeSelector/ThemeProvider.tsx
 var h = ({ children: e }) => {
 	let { isDarkMode: t, isMonochrome: n, contrast: r } = m();
-	return s(() => {
+	return a(() => {
 		let e = d({
 			isDarkMode: t,
 			isMonochrome: n,
@@ -93,29 +93,29 @@ var b = {
 	selector: "_selector_o55o3_2",
 	"theme-item": "_theme-item_o55o3_7",
 	"theme-item-info": "_theme-item-info_o55o3_12"
-}, x = ({ heading: e, description: n, children: r, className: s, useInline: c = !1 }) => c ? /* @__PURE__ */ o("span", {
-	className: i(b["theme-item"], s),
-	children: [/* @__PURE__ */ o("span", {
+}, x = ({ heading: t, description: n, children: r, className: a, useInline: o = !1 }) => o ? /* @__PURE__ */ c("span", {
+	className: i(b["theme-item"], a),
+	children: [/* @__PURE__ */ c("span", {
 		className: i(b["theme-item-info"]),
-		children: [/* @__PURE__ */ a("span", {
-			className: i(t.titleMedium),
+		children: [/* @__PURE__ */ s("span", {
+			className: i(e.titleMedium),
 			slot: "label",
-			children: e
-		}), n && /* @__PURE__ */ a("span", {
-			className: i(t.bodyMedium),
+			children: t
+		}), n && /* @__PURE__ */ s("span", {
+			className: i(e.bodyMedium),
 			slot: "description",
 			children: n
 		})]
 	}), r]
-}) : /* @__PURE__ */ o("div", {
-	className: i(b["theme-item"], s),
-	children: [/* @__PURE__ */ o("div", {
+}) : /* @__PURE__ */ c("div", {
+	className: i(b["theme-item"], a),
+	children: [/* @__PURE__ */ c("div", {
 		className: i(b["theme-item-info"]),
-		children: [/* @__PURE__ */ a("h3", {
-			className: i(t.titleMedium),
-			children: e
-		}), n && /* @__PURE__ */ a("p", {
-			className: i(t.bodyMedium),
+		children: [/* @__PURE__ */ s("h3", {
+			className: i(e.titleMedium),
+			children: t
+		}), n && /* @__PURE__ */ s("p", {
+			className: i(e.bodyMedium),
 			children: n
 		})]
 	}), r]
@@ -134,31 +134,31 @@ var b = {
 }, w = {
 	heading: "Monochrome",
 	description: "Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience."
-}, T = ({ modeDetails: t = S, contrastDetails: s = C, monochromeDetails: l = w }) => {
-	let { mode: u, isMonochrome: d, contrast: f, setContrast: p, setMode: h, setMonochrome: T } = m(), E = c(() => g(t), [t]), D = c(() => _(s), [s]);
-	return /* @__PURE__ */ o("div", {
+}, T = ({ modeDetails: e = S, contrastDetails: a = C, monochromeDetails: l = w }) => {
+	let { mode: u, isMonochrome: d, contrast: f, setContrast: p, setMode: h, setMonochrome: T } = m(), E = o(() => g(e), [e]), D = o(() => _(a), [a]);
+	return /* @__PURE__ */ c("div", {
 		className: i(b.selector),
 		children: [
-			/* @__PURE__ */ a(x, {
-				heading: t.heading,
-				description: t.description,
-				children: /* @__PURE__ */ a(n, {
+			/* @__PURE__ */ s(x, {
+				heading: e.heading,
+				description: e.description,
+				children: /* @__PURE__ */ s(n, {
 					selectionMode: "single",
 					selectedKeys: [u],
 					onSelectionChange: (e) => {
 						let t = Array.from(e)[0];
 						v(t) && h(t);
 					},
-					children: E.map((t) => /* @__PURE__ */ a(e, {
-						id: t.id,
-						children: t.value
-					}, t.id))
+					children: E.map((e) => /* @__PURE__ */ s(t, {
+						id: e.id,
+						children: e.value
+					}, e.id))
 				})
 			}),
-			/* @__PURE__ */ a(x, {
-				heading: s.heading,
-				description: s.description,
-				children: /* @__PURE__ */ a(n, {
+			/* @__PURE__ */ s(x, {
+				heading: a.heading,
+				description: a.description,
+				children: /* @__PURE__ */ s(n, {
 					color: "tonal",
 					selectionMode: "single",
 					selectedKeys: [f],
@@ -167,17 +167,17 @@ var b = {
 						y(t) && p(t);
 					},
 					isDisabled: d,
-					children: D.map((t) => /* @__PURE__ */ a(e, {
-						id: t.id,
-						children: t.value
-					}, t.id))
+					children: D.map((e) => /* @__PURE__ */ s(t, {
+						id: e.id,
+						children: e.value
+					}, e.id))
 				})
 			}),
-			/* @__PURE__ */ a(r, {
+			/* @__PURE__ */ s(r, {
 				isSelected: d,
 				onChange: T,
 				containerStateLayer: !0,
-				children: /* @__PURE__ */ a(x, {
+				children: /* @__PURE__ */ s(x, {
 					heading: l.heading,
 					description: l.description,
 					useInline: !0

package/dist/chunks/Toolbar CHANGED Viewed

@@ -1,16 +1,16 @@
 import e from "clsx";
-import { ToggleButtonGroup as t, Toolbar as n } from "react-aria-components";
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
+import { ToggleButtonGroup as n, Toolbar as r } from "react-aria-components";
 import '../assets/Toolbar.css';var i = {
 	toolbar: "_toolbar_9s41z_16",
 	section: "_section_9s41z_60"
-}, a = ({ className: t, variant: a = "docked", color: o = "standard", ...s }) => /* @__PURE__ */ r(n, {
-	className: (n) => e(i.toolbar, typeof t == "function" ? t(n) : t),
+}, a = ({ className: n, variant: a = "docked", color: o = "standard", ...s }) => /* @__PURE__ */ t(r, {
+	className: (t) => e(i.toolbar, typeof n == "function" ? n(t) : n),
 	...s,
 	"data-variant": a,
 	"data-color": o
-}), o = ({ className: n, ...a }) => /* @__PURE__ */ r(t, {
-	className: (t) => e(i.section, typeof n == "function" ? n(t) : n),
+}), o = ({ className: r, ...a }) => /* @__PURE__ */ t(n, {
+	className: (t) => e(i.section, typeof r == "function" ? r(t) : r),
 	...a
 });
 //#endregion

package/dist/chunks/Tooltip CHANGED Viewed

@@ -1,8 +1,8 @@
 import { t as e } from "./base";
 import t from "clsx";
-import { Tooltip as n } from "react-aria-components";
-import { jsx as r } from "react/jsx-runtime";
-import '../assets/Tooltip.css';var i = { tooltip: "_tooltip_t0b77_9" }, a = ({ className: a, offset: o = 4, ...s }) => /* @__PURE__ */ r(n, {
+import { jsx as n } from "react/jsx-runtime";
+import { Tooltip as r } from "react-aria-components";
+import '../assets/Tooltip.css';var i = { tooltip: "_tooltip_t0b77_9" }, a = ({ className: a, offset: o = 4, ...s }) => /* @__PURE__ */ n(r, {
 	offset: o,
 	className: (n) => t(i.tooltip, e.labelMedium, typeof a == "function" ? a(n) : a),
 	...s,