@atom-learning/components 6.4.2 → 6.5.0

package/dist/components/skeleton-loader/SkeletonTable.js

@@ -1,2 +1,20 @@
-import c from"clsx";import e from"react";import{Table as l}from"../table/Table.js";import{Tile as s}from"../tile/Tile.js";import{SkeletonLoader as o}from"./Skeleton.js";const p=({numberOfColumns:a=4,numberOfRows:n=4,columnWidth:m,containerCss:d})=>e.createElement(s,{className:c("p-6","flex-row","gap-4","relative",d)},e.createElement(l,{size:"md"},e.createElement(l.Header,{theme:"white"},Array.from({length:a},(t,r)=>r).map(t=>e.createElement(l.HeaderCell,{key:t},e.createElement(o,{style:{"--width":(m==null?void 0:m[t])||"100px"},className:"h-4 w-(--width) rounded-xl"})))),e.createElement(l.Body,{striped:!1},Array.from({length:n},(t,r)=>r).map(t=>e.createElement(l.Row,{key:t},Array.from({length:a},(r,i)=>i).map(r=>e.createElement(l.Cell,{key:r,className:"border-none"},e.createElement(o,{style:{"--width":(m==null?void 0:m[r])||"100px"},className:"bg-grey-200 h-4 w-(--width) rounded-xl"}))))))));export{p as SkeletonTable};
-//# sourceMappingURL=SkeletonTable.js.map
+import { Table as e } from "../table/Table.js";
+import { SkeletonLoader as t } from "./Skeleton.js";
+import { Tile as n } from "../tile/Tile.js";
+import r from "clsx";
+import i from "react";
+//#region src/components/skeleton-loader/SkeletonTable.tsx
+var a = ({ numberOfColumns: a = 4, numberOfRows: o = 4, columnWidth: s, containerCss: c }) => /* @__PURE__ */ i.createElement(n, { className: r("p-6", "flex-row", "gap-4", "relative", c) }, /* @__PURE__ */ i.createElement(e, { size: "md" }, /* @__PURE__ */ i.createElement(e.Header, { theme: "white" }, Array.from({ length: a }, (e, t) => t).map((n) => /* @__PURE__ */ i.createElement(e.HeaderCell, { key: n }, /* @__PURE__ */ i.createElement(t, {
+	style: { "--width": s?.[n] || "100px" },
+	className: "h-4 w-(--width) rounded-xl"
+})))), /* @__PURE__ */ i.createElement(e.Body, { striped: !1 }, Array.from({ length: o }, (e, t) => t).map((n) => /* @__PURE__ */ i.createElement(e.Row, { key: n }, Array.from({ length: a }, (e, t) => t).map((n) => /* @__PURE__ */ i.createElement(e.Cell, {
+	key: n,
+	className: "border-none"
+}, /* @__PURE__ */ i.createElement(t, {
+	style: { "--width": s?.[n] || "100px" },
+	className: "bg-grey-200 h-4 w-(--width) rounded-xl"
+}))))))));
+//#endregion
+export { a as SkeletonTable };
+
+//# sourceMappingURL=SkeletonTable.js.map

package/dist/components/skeleton-loader/SkeletonTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTable.js","sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n  numberOfColumns = 4,\n  numberOfRows = 4,\n  columnWidth,\n  containerCss\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  containerCss?: string\n}) => {\n  return (\n    <Tile\n      className={clsx('p-6', 'flex-row', 'gap-4', 'relative', containerCss)}\n    >\n      <Table size=\"md\">\n        <Table.Header theme=\"white\">\n          {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n            (columnIndex) => (\n              <Table.HeaderCell key={columnIndex}>\n                <SkeletonLoader\n                  style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n                  className=\"h-4 w-(--width) rounded-xl\"\n                />\n              </Table.HeaderCell>\n            )\n          )}\n        </Table.Header>\n        <Table.Body striped={false}>\n          {Array.from({ length: numberOfRows }, (_, index) => index).map(\n            (rowIndex) => (\n              <Table.Row key={rowIndex}>\n                {Array.from(\n                  { length: numberOfColumns },\n                  (_, index) => index\n                ).map((columnIndex) => (\n                  <Table.Cell key={columnIndex} className=\"border-none\">\n                    <SkeletonLoader\n                      style={{\n                        '--width': columnWidth?.[columnIndex] || '100px'\n                      }}\n                      className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n                    />\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            )\n          )}\n        </Table.Body>\n      </Table>\n    </Tile>\n  )\n}\n"],"names":["SkeletonTable","numberOfColumns","numberOfRows","columnWidth","containerCss","React","Tile","clsx","Table","_","index","columnIndex","SkeletonLoader","rowIndex"],"mappings":"yKAOa,MAAAA,EAAgB,CAAC,CAC5B,gBAAAC,EAAkB,EAClB,aAAAC,EAAe,EACf,YAAAC,EACA,aAAAC,CACF,IAOIC,EAAA,cAACC,EAAA,CACC,UAAWC,EAAK,MAAO,WAAY,QAAS,WAAYH,CAAY,CAEpEC,EAAAA,EAAA,cAACG,EAAA,CAAM,KAAK,IAAA,EACVH,EAAA,cAACG,EAAM,OAAN,CAAa,MAAM,OACjB,EAAA,MAAM,KAAK,CAAE,OAAQP,CAAgB,EAAG,CAACQ,EAAGC,IAAUA,CAAK,EAAE,IAC3DC,GACCN,EAAA,cAACG,EAAM,WAAN,CAAiB,IAAKG,CAAAA,EACrBN,EAAA,cAACO,EAAA,CACC,MAAO,CAAE,WAAWT,GAAA,YAAAA,EAAcQ,CAAAA,IAAgB,OAAQ,EAC1D,UAAU,4BACZ,CAAA,CACF,CAEJ,CACF,EACAN,EAAA,cAACG,EAAM,KAAN,CAAW,QAAS,EAClB,EAAA,MAAM,KAAK,CAAE,OAAQN,CAAa,EAAG,CAACO,EAAGC,IAAUA,CAAK,EAAE,IACxDG,GACCR,EAAA,cAACG,EAAM,IAAN,CAAU,IAAKK,GACb,MAAM,KACL,CAAE,OAAQZ,CAAgB,EAC1B,CAACQ,EAAGC,IAAUA,CAChB,EAAE,IAAKC,GACLN,EAAA,cAACG,EAAM,KAAN,CAAW,IAAKG,EAAa,UAAU,aACtCN,EAAAA,EAAA,cAACO,EAAA,CACC,MAAO,CACL,WAAWT,GAAA,KAAA,OAAAA,EAAcQ,CAAgB,IAAA,OAC3C,EACA,UAAU,yCACZ,CACF,CACD,CACH,CAEJ,CACF,CACF,CACF"}
+{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n  numberOfColumns = 4,\n  numberOfRows = 4,\n  columnWidth,\n  containerCss\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  containerCss?: string\n}) => {\n  return (\n    <Tile\n      className={clsx('p-6', 'flex-row', 'gap-4', 'relative', containerCss)}\n    >\n      <Table size=\"md\">\n        <Table.Header theme=\"white\">\n          {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n            (columnIndex) => (\n              <Table.HeaderCell key={columnIndex}>\n                <SkeletonLoader\n                  style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n                  className=\"h-4 w-(--width) rounded-xl\"\n                />\n              </Table.HeaderCell>\n            )\n          )}\n        </Table.Header>\n        <Table.Body striped={false}>\n          {Array.from({ length: numberOfRows }, (_, index) => index).map(\n            (rowIndex) => (\n              <Table.Row key={rowIndex}>\n                {Array.from(\n                  { length: numberOfColumns },\n                  (_, index) => index\n                ).map((columnIndex) => (\n                  <Table.Cell key={columnIndex} className=\"border-none\">\n                    <SkeletonLoader\n                      style={{\n                        '--width': columnWidth?.[columnIndex] || '100px'\n                      }}\n                      className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n                    />\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            )\n          )}\n        </Table.Body>\n      </Table>\n    </Tile>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAa,KAAiB,EAC5B,qBAAkB,GAClB,kBAAe,GACf,gBACA,sBAQE,kBAAA,cAAC,GAAD,EACE,WAAW,EAAK,OAAO,YAAY,SAAS,YAAY,EAAa,EAqChE,EAnCL,kBAAA,cAAC,GAAD,EAAO,MAAK,MAkCJ,EAjCN,kBAAA,cAAC,EAAM,QAAP,EAAc,OAAM,SAWL,EAVZ,MAAM,KAAK,EAAE,QAAQ,GAAiB,GAAG,GAAG,MAAU,EAAM,CAAC,KAC3D,MACC,kBAAA,cAAC,EAAM,YAAP,EAAkB,KAAK,GAKJ,EAJjB,kBAAA,cAAC,GAAD;CACE,OAAO,EAAE,WAAW,IAAc,MAAgB,SAAS;CAC3D,WAAU;CACV,CAAA,CACe,CAEtB,CACY,EACf,kBAAA,cAAC,EAAM,MAAP,EAAY,SAAS,IAoBR,EAnBV,MAAM,KAAK,EAAE,QAAQ,GAAc,GAAG,GAAG,MAAU,EAAM,CAAC,KACxD,MACC,kBAAA,cAAC,EAAM,KAAP,EAAW,KAAK,GAcJ,EAbT,MAAM,KACL,EAAE,QAAQ,GAAiB,GAC1B,GAAG,MAAU,EACf,CAAC,KAAK,MACL,kBAAA,cAAC,EAAM,MAAP;CAAY,KAAK;CAAa,WAAU;CAO3B,EANX,kBAAA,cAAC,GAAD;CACE,OAAO,EACL,WAAW,IAAc,MAAgB,SAC1C;CACD,WAAU;CACV,CAAA,CACS,CACb,CACQ,CAEf,CACU,CACP,CACH"}

package/dist/components/skeleton-loader/SkeletonTabs.js

@@ -1,2 +1,13 @@
-import r from"clsx";import o from"react";import{Tile as l}from"../tile/Tile.js";import{SkeletonLoader as n}from"./Skeleton.js";const p=({numberOfTabs:t,containerCss:a,tabCss:m})=>o.createElement(l,{className:r("p-6","flex-row","gap-4",a)},Array.from({length:t},(e,s)=>`tab_${s}`).map(e=>o.createElement(n,{key:e,className:r("w-32","h-6","rounded-sm",m)})));export{p as SkeletonTabs};
-//# sourceMappingURL=SkeletonTabs.js.map
+import { SkeletonLoader as e } from "./Skeleton.js";
+import { Tile as t } from "../tile/Tile.js";
+import n from "clsx";
+import r from "react";
+//#region src/components/skeleton-loader/SkeletonTabs.tsx
+var i = ({ numberOfTabs: i, containerCss: a, tabCss: o }) => /* @__PURE__ */ r.createElement(t, { className: n("p-6", "flex-row", "gap-4", a) }, Array.from({ length: i }, (e, t) => `tab_${t}`).map((t) => /* @__PURE__ */ r.createElement(e, {
+	key: t,
+	className: n("w-32", "h-6", "rounded-sm", o)
+})));
+//#endregion
+export { i as SkeletonTabs };
+
+//# sourceMappingURL=SkeletonTabs.js.map

package/dist/components/skeleton-loader/SkeletonTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTabs.js","sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n  numberOfTabs,\n  containerCss,\n  tabCss\n}: {\n  numberOfTabs: number\n  containerCss?: string\n  tabCss?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-row', 'gap-4', containerCss)}>\n    {Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map(\n      (key) => (\n        <SkeletonLoader\n          key={key}\n          className={clsx('w-32', 'h-6', 'rounded-sm', tabCss)}\n        />\n      )\n    )}\n  </Tile>\n)\n"],"names":["SkeletonTabs","numberOfTabs","containerCss","tabCss","React","Tile","clsx","_","index","key","SkeletonLoader"],"mappings":"+HAMa,MAAAA,EAAe,CAAC,CAC3B,aAAAC,EACA,aAAAC,EACA,OAAAC,CACF,IAKEC,EAAA,cAACC,EAAA,CAAK,UAAWC,EAAK,MAAO,WAAY,QAASJ,CAAY,CAC3D,EAAA,MAAM,KAAK,CAAE,OAAQD,CAAa,EAAG,CAACM,EAAGC,IAAU,OAAOA,CAAK,EAAE,EAAE,IACjEC,GACCL,EAAA,cAACM,EAAA,CACC,IAAKD,EACL,UAAWH,EAAK,OAAQ,MAAO,aAAcH,CAAM,CAAA,CACrD,CAEJ,CACF"}
+{"version":3,"file":"SkeletonTabs.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n  numberOfTabs,\n  containerCss,\n  tabCss\n}: {\n  numberOfTabs: number\n  containerCss?: string\n  tabCss?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-row', 'gap-4', containerCss)}>\n    {Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map(\n      (key) => (\n        <SkeletonLoader\n          key={key}\n          className={clsx('w-32', 'h-6', 'rounded-sm', tabCss)}\n        />\n      )\n    )}\n  </Tile>\n)\n"],"mappings":";;;;;AAMA,IAAa,KAAgB,EAC3B,iBACA,iBACA,gBAMA,kBAAA,cAAC,GAAD,EAAM,WAAW,EAAK,OAAO,YAAY,SAAS,EAAa,EASxD,EARJ,MAAM,KAAK,EAAE,QAAQ,GAAc,GAAG,GAAG,MAAU,OAAO,IAAQ,CAAC,KACjE,MACC,kBAAA,cAAC,GAAD;CACO;CACL,WAAW,EAAK,QAAQ,OAAO,cAAc,EAAO;CACpD,CAAA,CAEL,CACI"}

package/dist/components/skeleton-loader/index.js

@@ -1,2 +1,22 @@
-import{SkeletonLoader as t}from"./Skeleton.js";import{SkeletonHeading as a}from"./SkeletonHeading.js";import{SkeletonButton as l}from"./SkeletonButton.js";import{SkeletonTabs as f}from"./SkeletonTabs.js";import{SkeletonDoughnutChart as m}from"./SkeletonDoughnutChart.js";import{SkeletonTable as x}from"./SkeletonTable.js";import{SkeletonCard as d}from"./SkeletonCard.js";export{l as Button,d as Card,m as DoughnutChart,a as Heading,t as Loader,x as Table,f as Tabs};
-//# sourceMappingURL=index.js.map
+import { __exportAll as e } from "../../_virtual/_rolldown/runtime.js";
+import { SkeletonLoader as t } from "./Skeleton.js";
+import { SkeletonHeading as n } from "./SkeletonHeading.js";
+import { SkeletonButton as r } from "./SkeletonButton.js";
+import { SkeletonTabs as i } from "./SkeletonTabs.js";
+import { SkeletonDoughnutChart as a } from "./SkeletonDoughnutChart.js";
+import { SkeletonTable as o } from "./SkeletonTable.js";
+import { SkeletonCard as s } from "./SkeletonCard.js";
+//#region src/components/skeleton-loader/index.ts
+var c = /* @__PURE__ */ e({
+	Button: () => r,
+	Card: () => s,
+	DoughnutChart: () => a,
+	Heading: () => n,
+	Loader: () => t,
+	Table: () => o,
+	Tabs: () => i
+});
+//#endregion
+export { c as skeleton_loader_exports };
+
+//# sourceMappingURL=index.js.map

package/dist/components/skeleton-loader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/skeleton-loader/index.ts"],"sourcesContent":["export { SkeletonLoader as Loader } from './Skeleton'\nexport { SkeletonHeading as Heading } from './SkeletonHeading'\nexport { SkeletonButton as Button } from './SkeletonButton'\nexport { SkeletonTabs as Tabs } from './SkeletonTabs'\nexport { SkeletonDoughnutChart as DoughnutChart } from './SkeletonDoughnutChart'\nexport { SkeletonTable as Table } from './SkeletonTable'\nexport { SkeletonCard as Card } from './SkeletonCard'\n"],"mappings":""}

package/dist/components/slider/Slider.js

@@ -1,2 +1,66 @@
-import{Track as p,Root as b,Range as h,Thumb as v}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../styled.js";import{CSSWrapper as y}from"../../utilities/css-wrapper/CSSWrapper.js";import{SliderSteps as g}from"./SliderSteps.js";import{SliderValue as w}from"./SliderValue.js";const S=t(p,{base:["rounded-full","grow","relative","data-[orientation=horizontal]:h-1","data-[orientation=vertical]:w-1"],variants:{theme:{light:["bg-white"],tonal:["bg-grey-600"]}}}),x=t(b,{base:["items-center","flex","relative","touch-none","select-none","cursor-pointer","data-[orientation=horizontal]:h-4","data-[orientation=vertical]:flex-col","data-[orientation=vertical]:w-4","disabled:cursor-not-allowed","disabled:opacity-30"]}),E=t(h,{base:["bg-primary-800","rounded-full","h-full","absolute","disabled:cursor-not-allowed","disabled:opacity-30"]}),k=t(v,{base:["bg-primary-900","rounded-full","block","size-4","hover:bg-primary-1000","focus:outline-2","focus:outline-offset-2","focus:outline-primary-900","focus:outline-solid","disabled:cursor-not-allowed","disabled:opacity-30"]}),a=e.forwardRef(({value:l,defaultValue:r,min:i=0,max:n=100,theme:d="tonal",className:s,children:m,...u},c)=>{const o=l||r;return e.createElement(y,{className:s},e.createElement(x,{defaultValue:r,value:l,min:i,max:n,ref:c,...u},e.createElement(S,{theme:d},e.createElement(E,null)),(o==null?void 0:o.length)&&o.map((V,f)=>e.createElement(k,{key:`thumb${f}`}))),m)});a.Value=w,a.Steps=g,a.displayName="Slider";export{a as Slider};
-//# sourceMappingURL=Slider.js.map
+import { styled as e } from "../../styled.js";
+import { CSSWrapper as t } from "../../utilities/css-wrapper/CSSWrapper.js";
+import { SliderSteps as n } from "./SliderSteps.js";
+import { SliderValue as r } from "./SliderValue.js";
+import * as i from "react";
+import { Range as a, Root as o, Thumb as s, Track as c } from "@radix-ui/react-slider";
+//#region src/components/slider/Slider.tsx
+var l = e(c, {
+	base: [
+		"rounded-full",
+		"grow",
+		"relative",
+		"data-[orientation=horizontal]:h-1",
+		"data-[orientation=vertical]:w-1"
+	],
+	variants: { theme: {
+		light: ["bg-white"],
+		tonal: ["bg-grey-600"]
+	} }
+}), u = e(o, { base: [
+	"items-center",
+	"flex",
+	"relative",
+	"touch-none",
+	"select-none",
+	"cursor-pointer",
+	"data-[orientation=horizontal]:h-4",
+	"data-[orientation=vertical]:flex-col",
+	"data-[orientation=vertical]:w-4",
+	"disabled:cursor-not-allowed",
+	"disabled:opacity-30"
+] }), d = e(a, { base: [
+	"bg-primary-800",
+	"rounded-full",
+	"h-full",
+	"absolute",
+	"disabled:cursor-not-allowed",
+	"disabled:opacity-30"
+] }), f = e(s, { base: [
+	"bg-primary-900",
+	"rounded-full",
+	"block",
+	"size-4",
+	"hover:bg-primary-1000",
+	"focus:outline-2",
+	"focus:outline-offset-2",
+	"focus:outline-primary-900",
+	"focus:outline-solid",
+	"disabled:cursor-not-allowed",
+	"disabled:opacity-30"
+] }), p = i.forwardRef(({ value: e, defaultValue: n, min: r = 0, max: a = 100, theme: o = "tonal", className: s, children: c, ...p }, m) => {
+	let h = e || n;
+	return /* @__PURE__ */ i.createElement(t, { className: s }, /* @__PURE__ */ i.createElement(u, {
+		defaultValue: n,
+		value: e,
+		min: r,
+		max: a,
+		ref: m,
+		...p
+	}, /* @__PURE__ */ i.createElement(l, { theme: o }, /* @__PURE__ */ i.createElement(d, null)), h?.length && h.map((e, t) => /* @__PURE__ */ i.createElement(f, { key: `thumb${t}` }))), c);
+});
+p.Value = r, p.Steps = n, p.displayName = "Slider";
+//#endregion
+export { p as Slider };
+
+//# sourceMappingURL=Slider.js.map

package/dist/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\ntype SliderType = ReturnType<\n  typeof React.forwardRef<HTMLSpanElement, SliderProps>\n> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      className,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper className={className}>\n        <StyledSlider\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack theme={theme}>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"names":["StyledTrack","styled","Track","StyledSlider","Root","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","className","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"qTASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,KAAM,CACJ,eACA,OACA,WACA,oCACA,iCACF,EACA,SAAU,CACR,MAAO,CACL,MAAO,CAAC,UAAU,EAClB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,KAAM,CACJ,eACA,OACA,WACA,aACA,cACA,iBACA,oCACA,uCACA,kCACA,8BACA,qBACF,CACF,CAAC,EAEKC,EAAcJ,EAAOK,EAAO,CAChC,KAAM,CACJ,iBACA,eACA,SACA,WACA,8BACA,qBACF,CACF,CAAC,EAEKC,EAAcN,EAAOO,EAAO,CAChC,KAAM,CACJ,iBACA,eACA,QACA,SACA,wBACA,kBACA,yBACA,4BACA,sBACA,8BACA,qBACF,CACF,CAAC,EAYYC,EAASC,EAAM,WAC1B,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,UAAWL,CAAAA,EACrBN,EAAA,cAACP,EAAA,CACC,aAAcS,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAAAA,EAEJR,EAAA,cAACV,EAAA,CAAY,MAAOe,CAClBL,EAAAA,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQgB,CAAC,EAAA,CAAI,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\ntype SliderType = ReturnType<\n  typeof React.forwardRef<HTMLSpanElement, SliderProps>\n> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      className,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper className={className}>\n        <StyledSlider\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack theme={theme}>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"mappings":";;;;;;;AASA,IAAM,IAAc,EAAO,GAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,OAAO,CAAC,WAAW;EACnB,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC,EAEI,IAAe,EAAO,GAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAAc,EAAO,GAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAEI,IAAc,EAAO,GAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAYW,IAAS,EAAM,YAExB,EACE,UACA,iBACA,SAAM,GACN,SAAM,KACN,WAAQ,SACR,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAS,KAAS;AACxB,QACE,kBAAA,cAAC,GAAD,EAAuB,cAgBV,EAfX,kBAAA,cAAC,GAAD;EACgB;EACP;EACF;EACA;EACA;EACL,GAAI;EAOS,EALb,kBAAA,cAAC,GAAD,EAAoB,UAEN,EADZ,kBAAA,cAAC,GAAA,KAAc,CACH,EACb,GAAQ,UACP,EAAO,KAAK,GAAG,MAAM,kBAAA,cAAC,GAAD,EAAa,KAAK,QAAQ,KAAO,CAAA,CAAC,CAC5C,EACd,EACU;EAGlB;AAED,EAAO,QAAQ,GACf,EAAO,QAAQ,GAEf,EAAO,cAAc"}

package/dist/components/slider/SliderSteps.js

@@ -1,2 +1,25 @@
-import*as s from"react";import{styled as m}from"../../styled.js";import{Text as n}from"../text/Text.js";const o=m("div",{base:["h-3","mt-3","relative","w-full"]}),r=(l,e,a)=>(l-e)/(a-e)*100,p=(l,e,a)=>{const t=r(l,e,a);return t<=10?0:t>=90?100:50},u=({min:l,max:e,steps:a=[]})=>a.length===0?null:s.createElement(o,null,a.map(t=>s.createElement(n,{as:"span",key:t.value,style:{"--left":`${r(t.value,l,e)}%`,"--translate-x":`-${p(t.value,l,e)}%`},className:"text-grey-700 absolute left-(--left) translate-x-(--translate-x)"},t.label)));export{u as SliderSteps};
-//# sourceMappingURL=SliderSteps.js.map
+import { styled as e } from "../../styled.js";
+import { Text as t } from "../text/Text.js";
+import * as n from "react";
+//#region src/components/slider/SliderSteps.tsx
+var r = e("div", { base: [
+	"h-3",
+	"mt-3",
+	"relative",
+	"w-full"
+] }), i = (e, t, n) => (e - t) / (n - t) * 100, a = (e, t, n) => {
+	let r = i(e, t, n);
+	return r <= 10 ? 0 : r >= 90 ? 100 : 50;
+}, o = ({ min: e, max: o, steps: s = [] }) => s.length === 0 ? null : /* @__PURE__ */ n.createElement(r, null, s.map((r) => /* @__PURE__ */ n.createElement(t, {
+	as: "span",
+	key: r.value,
+	style: {
+		"--left": `${i(r.value, e, o)}%`,
+		"--translate-x": `-${a(r.value, e, o)}%`
+	},
+	className: "text-grey-700 absolute left-(--left) translate-x-(--translate-x)"
+}, r.label)));
+//#endregion
+export { o as SliderSteps };
+
+//# sourceMappingURL=SliderSteps.js.map

package/dist/components/slider/SliderSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderSteps.js","sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst SliderStepsContainer = styled('div', {\n  base: ['h-3', 'mt-3', 'relative', 'w-full']\n})\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <SliderStepsContainer>\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </SliderStepsContainer>\n  )\n}\n"],"names":["SliderStepsContainer","styled","getPercentValue","value","min","max","getTransformValue","percentage","SliderSteps","steps","React","step","Text"],"mappings":"wGAeA,MAAMA,EAAuBC,EAAO,MAAO,CACzC,KAAM,CAAC,MAAO,OAAQ,WAAY,QAAQ,CAC5C,CAAC,EAEKC,EAAkB,CAACC,EAAeC,EAAaC,KAC1CF,EAAQC,IAAQC,EAAMD,GAAQ,IAGnCE,EAAoB,CAACH,EAAeC,EAAaC,IAAwB,CAC7E,MAAME,EAAaL,EAAgBC,EAAOC,EAAKC,CAAG,EAElD,OAAIE,GAAc,GAAW,EACzBA,GAAc,GAAW,IACtB,EACT,EAEaC,EAAc,CAAC,CAAE,IAAAJ,EAAK,IAAAC,EAAK,MAAAI,EAAQ,EAAG,IAC7CA,EAAM,SAAW,EAAU,KAG7BC,EAAA,cAACV,EAAA,KACES,EAAM,IAAKE,GACVD,EAAA,cAACE,EAAA,CACC,GAAG,OACH,IAAKD,EAAK,MACV,MAAO,CACL,SAAU,GAAGT,EAAgBS,EAAK,MAAOP,EAAKC,CAAG,CAAC,IAClD,gBAAiB,IAAIC,EAAkBK,EAAK,MAAOP,EAAKC,CAAG,CAAC,GAC9D,EACA,UAAU,kEAETM,EAAAA,EAAK,KACR,CACD,CACH"}
+{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst SliderStepsContainer = styled('div', {\n  base: ['h-3', 'mt-3', 'relative', 'w-full']\n})\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <SliderStepsContainer>\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </SliderStepsContainer>\n  )\n}\n"],"mappings":";;;;AAeA,IAAM,IAAuB,EAAO,OAAO,EACzC,MAAM;CAAC;CAAO;CAAQ;CAAY;CAAS,EAC5C,CAAC,EAEI,KAAmB,GAAe,GAAa,OAC1C,IAAQ,MAAQ,IAAM,KAAQ,KAGnC,KAAqB,GAAe,GAAa,MAAwB;CAC7E,IAAM,IAAa,EAAgB,GAAO,GAAK,EAAI;AAInD,QAFI,KAAc,KAAW,IACzB,KAAc,KAAW,MACtB;GAGI,KAAe,EAAE,QAAK,QAAK,WAAQ,EAAE,OAC5C,EAAM,WAAW,IAAU,OAG7B,kBAAA,cAAC,GAAA,MACE,EAAM,KAAK,MACV,kBAAA,cAAC,GAAD;CACE,IAAG;CACH,KAAK,EAAK;CACV,OAAO;EACL,UAAU,GAAG,EAAgB,EAAK,OAAO,GAAK,EAAI,CAAC;EACnD,iBAAiB,IAAI,EAAkB,EAAK,OAAO,GAAK,EAAI,CAAC;EAC9D;CACD,WAAU;CAGL,EADJ,EAAK,MACD,CACP,CACmB"}

package/dist/components/slider/SliderValue.js

@@ -1,2 +1,8 @@
-import*as r from"react";import{Text as a}from"../text/Text.js";const m=({value:e=[],outputLabel:t=l=>`Current value is ${l}`})=>r.createElement(a,{className:"text-grey-700 mt-4 w-full"},t(e.length===1?e[0]:e));export{m as SliderValue};
-//# sourceMappingURL=SliderValue.js.map
+import { Text as e } from "../text/Text.js";
+import * as t from "react";
+//#region src/components/slider/SliderValue.tsx
+var n = ({ value: n = [], outputLabel: r = (e) => `Current value is ${e}` }) => /* @__PURE__ */ t.createElement(e, { className: "text-grey-700 mt-4 w-full" }, r(n.length === 1 ? n[0] : n));
+//#endregion
+export { n as SliderValue };
+
+//# sourceMappingURL=SliderValue.js.map

package/dist/components/slider/SliderValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderValue.js","sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n  return (\n    <Text className=\"text-grey-700 mt-4 w-full\">\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"names":["SliderValue","value","outputLabel","React","Text"],"mappings":"+DAYO,MAAMA,EAAc,CAAC,CAC1B,MAAAC,EAAQ,CAAA,EACR,YAAAC,EAAeD,GAAU,oBAAoBA,CAAK,EACpD,IAEIE,EAAA,cAACC,EAAA,CAAK,UAAU,2BAAA,EACbF,EAAYD,EAAM,SAAW,EAAIA,EAAM,CAAC,EAAIA,CAAK,CACpD"}
+{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n  return (\n    <Text className=\"text-grey-700 mt-4 w-full\">\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"mappings":";;;AAYA,IAAa,KAAe,EAC1B,WAAQ,EAAE,EACV,kBAAe,MAAU,oBAAoB,UAG3C,kBAAA,cAAC,GAAD,EAAM,WAAU,6BAET,EADJ,EAAY,EAAM,WAAW,IAAI,EAAM,KAAK,EAAM,CAC9C"}

package/dist/components/slider-field/SliderField.js

@@ -1,2 +1,41 @@
-import e from"react";import{useFormContext as S,useController as V}from"react-hook-form";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import{Slider as a}from"../slider/Slider.js";const i=({className:u,hideLabel:d,label:s,name:t,defaultValue:f,value:l,validation:p,outputLabel:c,min:r=0,max:m=100,steps:b=[],...h})=>{const{control:v}=S(),{field:{ref:x,onChange:n,value:o,name:E}}=V({name:t,control:v,rules:p,defaultValue:f});return e.useEffect(()=>{l!=null&&l.length&&n(l)},[JSON.stringify(l)]),e.createElement(g,{className:u,fieldId:t,label:s,hideLabel:d},e.createElement(a,{ref:x,name:E,onValueChange:n,value:o,min:r,max:m,...h},e.createElement(a.Steps,{min:r,max:m,steps:b}),e.createElement(a.Value,{value:o,outputLabel:c})))};i.displayName="SliderField";export{i as SliderField};
-//# sourceMappingURL=SliderField.js.map
+import { FieldWrapper as e } from "../field-wrapper/FieldWrapper.js";
+import { Slider as t } from "../slider/Slider.js";
+import n from "react";
+import { useController as r, useFormContext as i } from "react-hook-form";
+//#region src/components/slider-field/SliderField.tsx
+var a = ({ className: a, hideLabel: o, label: s, name: c, defaultValue: l, value: u, validation: d, outputLabel: f, min: p = 0, max: m = 100, steps: h = [], ...g }) => {
+	let { control: _ } = i(), { field: { ref: v, onChange: y, value: b, name: x } } = r({
+		name: c,
+		control: _,
+		rules: d,
+		defaultValue: l
+	});
+	return n.useEffect(() => {
+		u?.length && y(u);
+	}, [JSON.stringify(u)]), /* @__PURE__ */ n.createElement(e, {
+		className: a,
+		fieldId: c,
+		label: s,
+		hideLabel: o
+	}, /* @__PURE__ */ n.createElement(t, {
+		ref: v,
+		name: x,
+		onValueChange: y,
+		value: b,
+		min: p,
+		max: m,
+		...g
+	}, /* @__PURE__ */ n.createElement(t.Steps, {
+		min: p,
+		max: m,
+		steps: h
+	}), /* @__PURE__ */ n.createElement(t.Value, {
+		value: b,
+		outputLabel: f
+	})));
+};
+a.displayName = "SliderField";
+//#endregion
+export { a as SliderField };
+
+//# sourceMappingURL=SliderField.js.map

package/dist/components/slider-field/SliderField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderField.js","sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { Slider, SliderProps } from '~/components/slider/Slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...remainingProps\n}: SliderFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...remainingProps}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"names":["SliderField","className","hideLabel","label","name","defaultValue","value","validation","outputLabel","min","max","steps","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","React","FieldWrapper","Slider"],"mappings":"sMAiBa,MAAAA,EAAc,CAAC,CAC1B,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,aAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,CAAA,EACR,GAAGC,CACL,IAAwB,CACtB,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EACd,EAAA,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAf,EACA,QAAAS,EACA,MAAON,EACP,aAAAF,CACF,CAAC,EAED,OAAAe,EAAM,UAAU,IAAM,CAEhBd,GAAA,MAAAA,EAAO,QAAQU,EAASV,CAAK,CACnC,EAAG,CAAC,KAAK,UAAUA,CAAK,CAAC,CAAC,EAGxBc,EAAA,cAACC,EAAA,CACC,UAAWpB,EACX,QAASG,EACT,MAAOD,EACP,UAAWD,CAAAA,EAEXkB,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACN,cAAeF,EACf,MAAOC,EACP,IAAKR,EACL,IAAKC,EACJ,GAAGE,GAEJQ,EAAA,cAACE,EAAO,MAAP,CAAa,IAAKb,EAAK,IAAKC,EAAK,MAAOC,CAAO,CAAA,EAEhDS,EAAA,cAACE,EAAO,MAAP,CAAa,MAAOL,EAAY,YAAaT,CAAa,CAAA,CAC7D,CACF,CAEJ,EAEAR,EAAY,YAAc"}
+{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { Slider, SliderProps } from '~/components/slider/Slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...remainingProps\n}: SliderFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...remainingProps}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;AAiBA,IAAa,KAAe,EAC1B,cACA,cACA,UACA,SACA,iBACA,UACA,eACA,gBACA,SAAM,GACN,SAAM,KACN,WAAQ,EAAE,EACV,GAAG,QACmB;CACtB,IAAM,EAAE,eAAY,GAAgB,EAC9B,EACJ,OAAO,EAAE,QAAK,aAAU,OAAO,GAAY,MAAM,QAC/C,EAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;AAOF,QALA,EAAM,gBAAgB;AAEpB,EAAI,GAAO,UAAQ,EAAS,EAAM;IACjC,CAAC,KAAK,UAAU,EAAM,CAAC,CAAC,EAGzB,kBAAA,cAAC,GAAD;EACa;EACX,SAAS;EACF;EACI;EAeE,EAbb,kBAAA,cAAC,GAAD;EACO;EACL,MAAM;EACN,eAAe;EACf,OAAO;EACF;EACA;EACL,GAAI;EAKG,EAHP,kBAAA,cAAC,EAAO,OAAR;EAAmB;EAAU;EAAY;EAAS,CAAA,EAElD,kBAAA,cAAC,EAAO,OAAR;EAAc,OAAO;EAAyB;EAAe,CAAA,CACtD,CACI;;AAInB,EAAY,cAAc"}

package/dist/components/sortable/Handle.js

@@ -1,2 +1,31 @@
-import{DragHandle as s}from"@atom-learning/icons";import*as e from"react";import{styled as l}from"../../styled.js";import{ActionIcon as d}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";const r=l(d,{base:["text-inherit!","fill-current","disabled:**:pointer-events-none","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{isDragging:{true:["cursor-grabbing"],false:["cursor-grab"]}}}),a=e.forwardRef(({isDragging:i,size:o,...t},n)=>e.createElement(r,{ref:n,isDragging:i,appearance:"simple",hasTooltip:!1,size:o,...t},e.createElement(m,{is:s})));a.displayName="Handle";export{a as Handle,r as StyledHandle};
-//# sourceMappingURL=Handle.js.map
+import { styled as e } from "../../styled.js";
+import { Icon as t } from "../icon/Icon.js";
+import { ActionIcon as n } from "../action-icon/ActionIcon.js";
+import * as r from "react";
+import { DragHandle as i } from "@atom-learning/icons";
+//#region src/components/sortable/Handle.tsx
+var a = e(n, {
+	base: [
+		"text-inherit!",
+		"fill-current",
+		"disabled:**:pointer-events-none",
+		"disabled:cursor-not-allowed",
+		"disabled:opacity-30"
+	],
+	variants: { isDragging: {
+		true: ["cursor-grabbing"],
+		false: ["cursor-grab"]
+	} }
+}), o = r.forwardRef(({ isDragging: e, size: n, ...o }, s) => /* @__PURE__ */ r.createElement(a, {
+	ref: s,
+	isDragging: e,
+	appearance: "simple",
+	hasTooltip: !1,
+	size: n,
+	...o
+}, /* @__PURE__ */ r.createElement(t, { is: i })));
+o.displayName = "Handle";
+//#endregion
+export { o as Handle };
+
+//# sourceMappingURL=Handle.js.map

package/dist/components/sortable/Handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handle.js","sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n  ({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  }\n)\n\nHandle.displayName = 'Handle'\n"],"names":["StyledHandle","styled","ActionIcon","Handle","React","isDragging","size","rest","ref","Icon","DragHandle"],"mappings":"oNAQa,MAAAA,EAAeC,EAAOC,EAAY,CAC7C,KAAM,CACJ,gBACA,eACA,kCACA,8BACA,qBACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CAAC,iBAAiB,EACxB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EAQYC,EAASC,EAAM,WAC1B,CAAC,CAAE,WAAAC,EAAY,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAE5BJ,EAAA,cAACJ,EACC,CAAA,IAAKQ,EACL,WAAYH,EACZ,WAAW,SACX,WAAY,GACZ,KAAMC,EACL,GAAGC,CAAAA,EAEJH,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAY,CACxB,CAGN,EAEAP,EAAO,YAAc"}
+{"version":3,"file":"Handle.js","names":[],"sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n  ({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  }\n)\n\nHandle.displayName = 'Handle'\n"],"mappings":";;;;;;AAQA,IAAa,IAAe,EAAO,GAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,YAAY;EACV,MAAM,CAAC,kBAAkB;EACzB,OAAO,CAAC,cAAc;EACvB,EACF;CACF,CAAC,EAQW,IAAS,EAAM,YACzB,EAAE,eAAY,SAAM,GAAG,KAAQ,MAE5B,kBAAA,cAAC,GAAD;CACO;CACO;CACZ,YAAW;CACX,YAAY;CACN;CACN,GAAI;CAGS,EADb,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAc,CAAA,CACX,CAGpB;AAED,EAAO,cAAc"}

package/dist/components/sortable/SortableHandle.js

@@ -1,2 +1,21 @@
-import{useSortable as n}from"@dnd-kit/sortable";import*as b from"react";import{Handle as g}from"./Handle.js";const a=({targetId:r,disabled:e=!1,label:t="drag handle",...l})=>{const{attributes:o,listeners:i,isDragging:s,setActivatorNodeRef:d}=n({id:r});return b.createElement(g,{ref:d,isDragging:s,label:t,disabled:e,...e?{}:i,...e?{}:o,...l})};a.displayName="SortableHandle";export{a as SortableHandle};
-//# sourceMappingURL=SortableHandle.js.map
+import { Handle as e } from "./Handle.js";
+import * as t from "react";
+import { useSortable as n } from "@dnd-kit/sortable";
+//#region src/components/sortable/SortableHandle.tsx
+var r = ({ targetId: r, disabled: i = !1, label: a = "drag handle", ...o }) => {
+	let { attributes: s, listeners: c, isDragging: l, setActivatorNodeRef: u } = n({ id: r });
+	return /* @__PURE__ */ t.createElement(e, {
+		ref: u,
+		isDragging: l,
+		label: a,
+		disabled: i,
+		...i ? {} : c,
+		...i ? {} : s,
+		...o
+	});
+};
+r.displayName = "SortableHandle";
+//#endregion
+export { r as SortableHandle };
+
+//# sourceMappingURL=SortableHandle.js.map

package/dist/components/sortable/SortableHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableHandle.js","sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"names":["SortableHandle","targetId","disabled","label","rest","attributes","listeners","isDragging","setActivatorNodeRef","useSortable","React","DragHandle"],"mappings":"6GAWO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,cACR,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,WAAAC,EAAY,oBAAAC,CAAoB,EAC7DC,EAAY,CAAE,GAAIR,CAAS,CAAC,EAE9B,OACES,EAAA,cAACC,EAAA,CACC,IAAKH,EACL,WAAYD,EACZ,MAAOJ,EACP,SAAUD,EACT,GAAKA,EAAuB,CAAA,EAAZI,EAChB,GAAKJ,EAAwB,CAAA,EAAbG,EAChB,GAAGD,CAAAA,CACN,CAEJ,EAEAJ,EAAe,YAAc"}
+{"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"mappings":";;;;AAWA,IAAa,KAAkB,EAC7B,aACA,cAAW,IACX,WAAQ,eACR,GAAG,QACuB;CAC1B,IAAM,EAAE,eAAY,cAAW,eAAY,2BACzC,EAAY,EAAE,IAAI,GAAU,CAAC;AAE/B,QACE,kBAAA,cAAC,GAAD;EACE,KAAK;EACO;EACL;EACG;EACV,GAAM,IAAuB,EAAE,GAAd;EACjB,GAAM,IAAwB,EAAE,GAAf;EACjB,GAAI;EACJ,CAAA;;AAIN,EAAe,cAAc"}

package/dist/components/sortable/SortableItem.js

@@ -1,2 +1,28 @@
-import{useSortable as p}from"@dnd-kit/sortable";import{Slot as g}from"@radix-ui/react-slot";import u from"clsx";import*as y from"react";const s=({id:l,asChild:o=!1,className:i,style:d,isDragHandle:e=!1,disabled:r,...n})=>{const{transform:a,setNodeRef:c,isDragging:t,listeners:m,attributes:b}=p({id:l});return y.createElement(o?g:"div",{ref:c,style:{...d,"--scale":1,"--translate-x":(a==null?void 0:a.x)||0,"--translate-y":(a==null?void 0:a.y)||0},"data-dragging":t,"data-disabled":r,...e&&!r?m:{},...e&&!r?b:{},...n,className:u("translate-x-[calc(var(--translate-x)*1px)]","translate-y-[calc(var(--translate-y)*1px)]","scale-(--scale)",t&&"z-5","disabled:**:pointer-events-none","disabled:cursor-not-allowed","disabled:opacity-30",e&&(t?"cursor-grabbing":"cursor-grab"),i)})};s.displayName="SortableItem";export{s as SortableItem};
-//# sourceMappingURL=SortableItem.js.map
+import e from "clsx";
+import * as t from "react";
+import { Slot as n } from "@radix-ui/react-slot";
+import { useSortable as r } from "@dnd-kit/sortable";
+//#region src/components/sortable/SortableItem.tsx
+var i = ({ id: i, asChild: a = !1, className: o, style: s, isDragHandle: c = !1, disabled: l, ...u }) => {
+	let { transform: d, setNodeRef: f, isDragging: p, listeners: m, attributes: h } = r({ id: i }), g = a ? n : "div";
+	return /* @__PURE__ */ t.createElement(g, {
+		ref: f,
+		style: {
+			...s,
+			"--scale": 1,
+			"--translate-x": d?.x || 0,
+			"--translate-y": d?.y || 0
+		},
+		"data-dragging": p,
+		"data-disabled": l,
+		...c && !l ? m : {},
+		...c && !l ? h : {},
+		...u,
+		className: e("translate-x-[calc(var(--translate-x)*1px)]", "translate-y-[calc(var(--translate-y)*1px)]", "scale-(--scale)", p && "z-5", "disabled:**:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-30", c && (p ? "cursor-grabbing" : "cursor-grab"), o)
+	});
+};
+i.displayName = "SortableItem";
+//#endregion
+export { i as SortableItem };
+
+//# sourceMappingURL=SortableItem.js.map

package/dist/components/sortable/SortableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={clsx(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"names":["SortableItem","id","asChild","className","style","isDragHandle","disabled","rest","transform","setNodeRef","isDragging","listeners","attributes","useSortable","React","Slot","clsx"],"mappings":"wIAea,MAAAA,EAAe,CAAC,CAC3B,GAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,SAAAC,EACA,GAAGC,CACL,IAAmD,CACjD,KAAM,CAAE,UAAAC,EAAW,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAW,EAC/DC,EAAY,CAAE,GAAAZ,CAAG,CAAC,EAGpB,OACEa,EAAA,cAFgBZ,EAAUa,EAAO,MAEhC,CACC,IAAKN,EACL,MAAO,CACL,GAAGL,EACH,UAAW,EACX,iBAAiBI,GAAA,KAAAA,OAAAA,EAAW,IAAK,EACjC,iBAAiBA,GAAA,KAAAA,OAAAA,EAAW,IAAK,CACnC,EACA,gBAAeE,EACf,gBAAeJ,EACd,GAAID,GAAgB,CAACC,EAAWK,EAAY,CAAC,EAC7C,GAAIN,GAAgB,CAACC,EAAWM,EAAa,GAC7C,GAAGL,EACJ,UAAWS,EACT,6CACA,6CACA,kBACAN,GAAc,MACd,kCACA,8BACA,sBACAL,IAAiBK,EAAa,kBAAoB,eAClDP,CACF,CACF,CAAA,CAEJ,EAEAH,EAAa,YAAc"}
+{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={clsx(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"mappings":";;;;;AAeA,IAAa,KAAgB,EAC3B,OACA,aAAU,IACV,cACA,UACA,kBAAe,IACf,aACA,GAAG,QAC8C;CACjD,IAAM,EAAE,cAAW,eAAY,eAAY,cAAW,kBACpD,EAAY,EAAE,OAAI,CAAC,EAEf,IAAY,IAAU,IAAO;AACnC,QACE,kBAAA,cAAC,GAAD;EACE,KAAK;EACL,OAAO;GACL,GAAG;GACH,WAAW;GACX,iBAAiB,GAAW,KAAK;GACjC,iBAAiB,GAAW,KAAK;GAClC;EACD,iBAAe;EACf,iBAAe;EACf,GAAK,KAAgB,CAAC,IAAW,IAAY,EAAE;EAC/C,GAAK,KAAgB,CAAC,IAAW,IAAa,EAAE;EAChD,GAAI;EACJ,WAAW,EACT,8CACA,8CACA,mBACA,KAAc,OACd,mCACA,+BACA,uBACA,MAAiB,IAAa,oBAAoB,gBAClD,EACD;EACD,CAAA;;AAIN,EAAa,cAAc"}

package/dist/components/sortable/SortableRoot.js

@@ -1,2 +1,31 @@
-import{useSensors as x,useSensor as l,PointerSensor as p,KeyboardSensor as C,DndContext as v,closestCenter as y}from"@dnd-kit/core";import{sortableKeyboardCoordinates as E,arrayMove as D,SortableContext as I}from"@dnd-kit/sortable";import*as o from"react";const c=({sortableIds:t,onSortChange:m,children:S})=>{const[u,s]=o.useState(t);o.useEffect(()=>{s(t)},[t]);const b=x(l(p),l(C,{coordinateGetter:E}));return o.createElement(v,{sensors:b,collisionDetection:y,onDragEnd:f=>{const{active:n,over:e}=f;n.id&&e!=null&&e.id&&n.id!==(e==null?void 0:e.id)&&s(r=>{const d=r.indexOf(n.id),i=r.indexOf(e.id),a=D(r,d,i);return m({order:a,oldIndex:d,newIndex:i}),a})}},o.createElement(I,{items:u},S))};c.displayName="SortableRoot";export{c as SortableRoot};
-//# sourceMappingURL=SortableRoot.js.map
+import * as e from "react";
+import { SortableContext as t, arrayMove as n, sortableKeyboardCoordinates as r } from "@dnd-kit/sortable";
+import { DndContext as i, KeyboardSensor as a, PointerSensor as o, closestCenter as s, useSensor as c, useSensors as l } from "@dnd-kit/core";
+//#region src/components/sortable/SortableRoot.tsx
+var u = ({ sortableIds: u, onSortChange: d, children: f }) => {
+	let [p, m] = e.useState(u);
+	e.useEffect(() => {
+		m(u);
+	}, [u]);
+	let h = l(c(o), c(a, { coordinateGetter: r }));
+	return /* @__PURE__ */ e.createElement(i, {
+		sensors: h,
+		collisionDetection: s,
+		onDragEnd: (e) => {
+			let { active: t, over: r } = e;
+			t.id && r?.id && t.id !== r?.id && m((e) => {
+				let i = e.indexOf(t.id), a = e.indexOf(r.id), o = n(e, i, a);
+				return d({
+					order: o,
+					oldIndex: i,
+					newIndex: a
+				}), o;
+			});
+		}
+	}, /* @__PURE__ */ e.createElement(t, { items: p }, f));
+};
+u.displayName = "SortableRoot";
+//#endregion
+export { u as SortableRoot };
+
+//# sourceMappingURL=SortableRoot.js.map

package/dist/components/sortable/SortableRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableRoot.js","sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"names":["SortableRoot","sortableIds","onSortChange","children","order","setOrder","React","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","newOrder","arrayMove","SortableContext"],"mappings":"gQAyBa,MAAAA,EAAe,CAAC,CAC3B,YAAAC,EACA,aAAAC,EACA,SAAAC,CACF,IAAmD,CACjD,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAM,SAA4BL,CAAW,EACvEK,EAAM,UAAU,IAAM,CACpBD,EAASJ,CAAW,CACtB,EAAG,CAACA,CAAW,CAAC,EAEhB,MAAMM,EAAUC,EACdC,EAAUC,CAAa,EACvBD,EAAUE,EAAgB,CACxB,iBAAkBC,CACpB,CAAC,CACH,EAeA,OACEN,EAAA,cAACO,EAAA,CACC,QAASN,EACT,mBAAoBO,EACpB,UAjBmBC,GAAwB,CAC7C,KAAM,CAAE,OAAAC,EAAQ,KAAAC,CAAK,EAAIF,EACrBC,EAAO,IAAMC,GAAA,MAAAA,EAAM,IAAMD,EAAO,MAAOC,GAAA,KAAA,OAAAA,EAAM,KAC/CZ,EAAUD,GAAU,CAClB,MAAMc,EAAWd,EAAM,QAAQY,EAAO,EAAE,EAClCG,EAAWf,EAAM,QAAQa,EAAK,EAAE,EAChCG,EAAWC,EAAUjB,EAAOc,EAAUC,CAAQ,EACpD,OAAAjB,EAAa,CAAE,MAAOkB,EAAU,SAAAF,EAAU,SAAAC,CAAS,CAAC,EAC7CC,CACT,CAAC,CAEL,CAAA,EAQId,EAAA,cAACgB,EAAA,CAAgB,MAAOlB,GAAQD,CAAS,CAC3C,CAEJ,EAEAH,EAAa,YAAc"}
+{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;AAyBA,IAAa,KAAgB,EAC3B,gBACA,iBACA,kBACiD;CACjD,IAAM,CAAC,GAAO,KAAY,EAAM,SAA4B,EAAY;AACxE,GAAM,gBAAgB;AACpB,IAAS,EAAY;IACpB,CAAC,EAAY,CAAC;CAEjB,IAAM,IAAU,EACd,EAAU,EAAc,EACxB,EAAU,GAAgB,EACxB,kBAAkB,GACnB,CAAC,CACH;AAeD,QACE,kBAAA,cAAC,GAAD;EACW;EACT,oBAAoB;EACpB,YAjBmB,MAAwB;GAC7C,IAAM,EAAE,WAAQ,YAAS;AACzB,GAAI,EAAO,MAAM,GAAM,MAAM,EAAO,OAAO,GAAM,MAC/C,GAAU,MAAU;IAClB,IAAM,IAAW,EAAM,QAAQ,EAAO,GAAG,EACnC,IAAW,EAAM,QAAQ,EAAK,GAAG,EACjC,IAAW,EAAU,GAAO,GAAU,EAAS;AAErD,WADA,EAAa;KAAE,OAAO;KAAU;KAAU;KAAU,CAAC,EAC9C;KACP;;EAWS,EADX,kBAAA,cAAC,GAAD,EAAiB,OAAO,GAAmC,EAA3B,EAA2B,CAChD;;AAIjB,EAAa,cAAc"}

package/dist/components/sortable/index.js

@@ -1,2 +1,14 @@
-import{SortableHandle as t}from"./SortableHandle.js";import{SortableItem as a}from"./SortableItem.js";import{SortableRoot as m}from"./SortableRoot.js";export{t as Handle,a as Item,m as Root};
-//# sourceMappingURL=index.js.map
+import { __exportAll as e } from "../../_virtual/_rolldown/runtime.js";
+import { SortableHandle as t } from "./SortableHandle.js";
+import { SortableItem as n } from "./SortableItem.js";
+import { SortableRoot as r } from "./SortableRoot.js";
+//#region src/components/sortable/index.ts
+var i = /* @__PURE__ */ e({
+	Handle: () => t,
+	Item: () => n,
+	Root: () => r
+});
+//#endregion
+export { i as sortable_exports };
+
+//# sourceMappingURL=index.js.map

package/dist/components/sortable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/sortable/index.ts"],"sourcesContent":["export { SortableHandle as Handle } from './SortableHandle'\nexport { SortableItem as Item } from './SortableItem'\nexport { SortableRoot as Root } from './SortableRoot'\n"],"mappings":""}

package/dist/components/spacer/Spacer.js

@@ -1,2 +1,12 @@
-import{styled as s}from"../../styled.js";const e=s("div",{base:["flex-1","justify-self-stretch","self-stretch"]});e.displayName="Spacer";export{e as Spacer};
-//# sourceMappingURL=Spacer.js.map
+import { styled as e } from "../../styled.js";
+//#region src/components/spacer/Spacer.tsx
+var t = e("div", { base: [
+	"flex-1",
+	"justify-self-stretch",
+	"self-stretch"
+] });
+t.displayName = "Spacer";
+//#endregion
+export { t as Spacer };
+
+//# sourceMappingURL=Spacer.js.map

package/dist/components/spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"names":["Spacer","styled"],"mappings":"yCAMa,MAAAA,EAASC,EAAO,MAAO,CAClC,KAAM,CAAC,SAAU,uBAAwB,cAAc,CACzD,CAAC,EAEDD,EAAO,YAAc"}
+{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"mappings":";;AAMA,IAAa,IAAS,EAAO,OAAO,EAClC,MAAM;CAAC;CAAU;CAAwB;CAAe,EACzD,CAAC;AAEF,EAAO,cAAc"}