@tcn/ui 0.3.0 → 0.3.1

package/dist/actions/button/select_group/select_group.js

@@ -1,42 +1,42 @@
 import { jsx as i } from "react/jsx-runtime";
-import { HStack as v } from "../../../stacks/h_stack.js";
+import { HStack as _ } from "../../../stacks/h_stack.js";
 import { clsx as l } from "clsx";
 import n from "react";
-import { Button as x } from "../button/button.js";
-import '../../../select_group.css';const y = "_select-group_c24986f", _ = "_select-group-option_28f4dfd", b = "_select-group-divider_b5b865b", a = { "select-group": y, "select-group-option": _, "select-group-divider": b }, C = n.forwardRef(function({ children: o, value: c, className: u, onChange: d, disabled: s = !1, ...f }, m) {
+import { Button as v } from "../button/button.js";
+import '../../../select_group.css';const x = "_select-group_c24986f", y = "_select-group-option_28f4dfd", b = "_select-group-divider_b5b865b", a = { "select-group": x, "select-group-option": y, "select-group-divider": b }, C = n.forwardRef(function({ children: o, value: c, className: u, onChange: d, disabled: t = !1, ...f }, m) {
   const g = Array.isArray(o) ? o : [o], h = (e, p) => {
-    if (s) return;
+    if (t) return;
     const r = [...c];
     if (p) {
-      const t = c.indexOf(e);
-      t > -1 && r.splice(t, 1);
+      const s = c.indexOf(e);
+      s > -1 && r.splice(s, 1);
     } else
       r.push(e);
     d?.(r);
   };
   return /* @__PURE__ */ i(
-    v,
+    _,
     {
       ref: m,
       as: "div",
       inline: !0,
       width: "auto",
       height: "auto",
-      "data-is-disabled": s,
+      "data-is-disabled": t,
       className: l(a["select-group"], "select-group", u),
       ...f,
       children: g.map((e, p) => {
-        const r = c.includes(e.props.value), t = () => {
+        const r = c.includes(e.props.value), s = () => {
           h(e.props.value, r);
         };
         return /* @__PURE__ */ i(n.Fragment, { children: /* @__PURE__ */ i(
-          x,
+          v,
           {
-            disabled: s || e.props.disabled,
-            "data-is-disabled": s || e.props.disabled,
+            disabled: t || e.props.disabled,
+            "data-is-disabled": t || e.props.disabled,
             className: l(a["select-group-option"], "select-group-option"),
             hierarchy: r ? "primary" : "secondary",
-            onClick: t,
+            onClick: s,
             value: e.props.value,
             children: e.props.children
           }

package/dist/actions/button/select_group/single_select_group.js

@@ -1,14 +1,14 @@
 import { jsx as p } from "react/jsx-runtime";
 import h from "react";
 import { SelectGroup as m } from "./select_group.js";
-const G = h.forwardRef(function({
+const s = h.forwardRef(function({
   children: t,
   value: n,
   className: o,
   onChange: r,
   disabled: l = !1,
-  ...c
-}, f) {
+  ...f
+}, c) {
   const g = (e) => {
     if (e.length === 0)
       return;
@@ -18,17 +18,17 @@ const G = h.forwardRef(function({
   return /* @__PURE__ */ p(
     m,
     {
-      ref: f,
+      ref: c,
       value: n != null ? [n] : [],
       onChange: g,
       disabled: l,
       className: o,
-      ...c,
+      ...f,
       children: t
     }
   );
 });
 export {
-  G as SingleSelectGroup
+  s as SingleSelectGroup
 };
 //# sourceMappingURL=single_select_group.js.map

package/dist/actions/button/slim_button/slim_button.js

@@ -2,12 +2,12 @@ import { jsx as r } from "react/jsx-runtime";
 import n from "react";
 import { Button as i } from "../button/button.js";
 import { clsx as l } from "clsx";
-import '../../../slim_button.css';const c = "_slim-button_188fdc3", u = { "slim-button": c }, b = n.forwardRef(
+import '../../../slim_button.css';const u = "_slim-button_188fdc3", c = { "slim-button": u }, b = n.forwardRef(
   ({ children: t, className: o, ...m }, s) => /* @__PURE__ */ r(
     i,
     {
       ref: s,
-      className: l(u["slim-button"], "tcn-slim-button", o),
+      className: l(c["slim-button"], "tcn-slim-button", o),
       ...m,
       children: t
     }

package/dist/actions/types.d.ts

@@ -0,0 +1,2 @@
+export type ActionSeverity = 'dangerous' | 'cautious' | 'neutral' | 'suggested' | 'encouraged';
+//# sourceMappingURL=types.d.ts.map

package/dist/actions/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/actions/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,UAAU,GACV,SAAS,GACT,WAAW,GACX,YAAY,CAAC"}

package/dist/actions/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/actions/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/feedback/loading/loading.js

@@ -1,34 +1,34 @@
 import { jsx as c } from "react/jsx-runtime";
 import M from "react";
-import '../../loading.css';const p = "_loading-line_e364229", y = "_linePulse_bde300c", f = { "loading-line": p, linePulse: y }, I = M.forwardRef(
+import '../../loading.css';const f = "_loading-line_e364229", p = "_linePulse_bde300c", u = { "loading-line": f, linePulse: p }, I = M.forwardRef(
   ({
-    size: e = "1em",
+    size: s = "1em",
     color: l = "var(--accent-color)",
-    lineCount: a = 12,
+    lineCount: n = 12,
     animationDuration: t = 1200,
     className: r,
     style: h
-  }, v) => {
-    const d = Array.from({ length: a }), g = 360 / a;
+  }, d) => {
+    const v = Array.from({ length: n }), g = 360 / n;
     return /* @__PURE__ */ c(
       "svg",
       {
-        ref: v,
+        ref: d,
         width: 50,
         height: 50,
         viewBox: "0 0 50 50",
         className: r,
         xmlns: "http://www.w3.org/2000/svg",
-        style: { height: e, width: e, ...h },
+        style: { height: s, width: s, ...h },
         fill: "none",
-        children: d.map((x, s) => {
-          const n = g * s, i = 50 / 4.5, o = 50 / 2.25, m = 50 / 2 + i * Math.cos(n * Math.PI / 180), S = 50 / 2 + i * Math.sin(n * Math.PI / 180), z = 50 / 2 + o * Math.cos(n * Math.PI / 180), w = 50 / 2 + o * Math.sin(n * Math.PI / 180);
+        children: v.map((_, e) => {
+          const a = g * e, i = 50 / 4.5, o = 50 / 2.25, m = 50 / 2 + i * Math.cos(a * Math.PI / 180), S = 50 / 2 + i * Math.sin(a * Math.PI / 180), z = 50 / 2 + o * Math.cos(a * Math.PI / 180), w = 50 / 2 + o * Math.sin(a * Math.PI / 180);
           return /* @__PURE__ */ c(
             "line",
             {
-              className: f["loading-line"],
+              className: u["loading-line"],
               style: {
-                animationDelay: `${s * t / a}ms`,
+                animationDelay: `${e * t / n}ms`,
                 animationDuration: `${t}ms`
               },
               x1: m,
@@ -39,7 +39,7 @@ import '../../loading.css';const p = "_loading-line_e364229", y = "_linePulse_bd
               strokeWidth: 3,
               strokeLinecap: "round"
             },
-            s
+            e
           );
         })
       }

package/dist/feedback/loading/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sources":["../../../src/feedback/loading/loading.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport styles from './loading.module.css';\n\nexport interface LoadingProps {\n  size?: string;\n  color?: string;\n  lineCount?: number;\n  animationDuration?: number;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const Loading = React.forwardRef(\n  (\n    {\n      size = '1em',\n      color = 'var(--accent-color)',\n      lineCount = 12,\n      animationDuration = 1200,\n      className,\n      style,\n    }: LoadingProps,\n    ref: React.Ref<SVGSVGElement>\n  ) => {\n    const canvasSize = 50;\n    const lines = Array.from({ length: lineCount });\n    const angleStep = 360 / lineCount;\n\n    return (\n      <svg\n        ref={ref}\n        width={canvasSize}\n        height={canvasSize}\n        viewBox={`0 0 ${canvasSize} ${canvasSize}`}\n        className={className}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{ height: size, width: size, ...style }}\n        fill=\"none\"\n      >\n        {lines.map((_, i) => {\n          const angle = angleStep * i;\n          const innerRadius = canvasSize / 4.5;\n          const outerRadius = canvasSize / 2.25;\n\n          const x1 = canvasSize / 2 + innerRadius * Math.cos((angle * Math.PI) / 180);\n          const y1 = canvasSize / 2 + innerRadius * Math.sin((angle * Math.PI) / 180);\n          const x2 = canvasSize / 2 + outerRadius * Math.cos((angle * Math.PI) / 180);\n          const y2 = canvasSize / 2 + outerRadius * Math.sin((angle * Math.PI) / 180);\n\n          return (\n            <line\n              className={styles['loading-line']}\n              style={{\n                animationDelay: `${(i * animationDuration) / lineCount}ms`,\n                animationDuration: `${animationDuration}ms`,\n              }}\n              key={i}\n              x1={x1}\n              y1={y1}\n              x2={x2}\n              y2={y2}\n              stroke={color}\n              strokeWidth={3}\n              strokeLinecap=\"round\"\n            />\n          );\n        })}\n      </svg>\n    );\n  }\n);\n"],"names":["Loading","React","size","color","lineCount","animationDuration","className","style","ref","lines","angleStep","jsx","_","i","angle","innerRadius","outerRadius","x1","y1","x2","y2","styles"],"mappings":";;sGAYaA,IAAUC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,IACpB,WAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,GAEFC,MACG;AAEH,UAAMC,IAAQ,MAAM,KAAK,EAAE,QAAQL,GAAW,GACxCM,IAAY,MAAMN;AAExB,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAAF;AAAA,QACA,OAAM;AAAA,QACN,OAAO,EAAE,QAAQJ,GAAM,OAAOA,GAAM,GAAGK,EAAA;AAAA,QACvC,MAAK;AAAA,QAEJ,UAAAE,EAAM,IAAI,CAACG,GAAGC,MAAM;AACnB,gBAAMC,IAAQJ,IAAYG,GACpBE,IAAc,KAAa,KAC3BC,IAAc,KAAa,MAE3BC,IAAK,KAAa,IAAIF,IAAc,KAAK,IAAKD,IAAQ,KAAK,KAAM,GAAG,GACpEI,IAAK,KAAa,IAAIH,IAAc,KAAK,IAAKD,IAAQ,KAAK,KAAM,GAAG,GACpEK,IAAK,KAAa,IAAIH,IAAc,KAAK,IAAKF,IAAQ,KAAK,KAAM,GAAG,GACpEM,IAAK,KAAa,IAAIJ,IAAc,KAAK,IAAKF,IAAQ,KAAK,KAAM,GAAG;AAE1E,iBACE,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWU,EAAO,cAAc;AAAA,cAChC,OAAO;AAAA,gBACL,gBAAgB,GAAIR,IAAIR,IAAqBD,CAAS;AAAA,gBACtD,mBAAmB,GAAGC,CAAiB;AAAA,cAAA;AAAA,cAGzC,IAAAY;AAAA,cACA,IAAAC;AAAA,cACA,IAAAC;AAAA,cACA,IAAAC;AAAA,cACA,QAAQjB;AAAA,cACR,aAAa;AAAA,cACb,eAAc;AAAA,YAAA;AAAA,YAPTU;AAAA,UAAA;AAAA,QAUX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"loading.js","sources":["../../../src/feedback/loading/loading.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport styles from './loading.module.css';\n\nexport interface LoadingProps {\n  size?: string;\n  color?: string;\n  lineCount?: number;\n  animationDuration?: number;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const Loading = React.forwardRef(\n  (\n    {\n      size = '1em',\n      color = 'var(--accent-color)',\n      lineCount = 12,\n      animationDuration = 1200,\n      className,\n      style,\n    }: LoadingProps,\n    ref: React.Ref<SVGSVGElement>\n  ) => {\n    const canvasSize = 50;\n    const lines = Array.from({ length: lineCount });\n    const angleStep = 360 / lineCount;\n\n    return (\n      <svg\n        ref={ref}\n        width={canvasSize}\n        height={canvasSize}\n        viewBox={`0 0 ${canvasSize} ${canvasSize}`}\n        className={className}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{ height: size, width: size, ...style }}\n        fill=\"none\"\n      >\n        {lines.map((_, i) => {\n          const angle = angleStep * i;\n          const innerRadius = canvasSize / 4.5;\n          const outerRadius = canvasSize / 2.25;\n\n          const x1 = canvasSize / 2 + innerRadius * Math.cos((angle * Math.PI) / 180);\n          const y1 = canvasSize / 2 + innerRadius * Math.sin((angle * Math.PI) / 180);\n          const x2 = canvasSize / 2 + outerRadius * Math.cos((angle * Math.PI) / 180);\n          const y2 = canvasSize / 2 + outerRadius * Math.sin((angle * Math.PI) / 180);\n\n          return (\n            <line\n              className={styles['loading-line']}\n              style={{\n                animationDelay: `${(i * animationDuration) / lineCount}ms`,\n                animationDuration: `${animationDuration}ms`,\n              }}\n              key={i}\n              x1={x1}\n              y1={y1}\n              x2={x2}\n              y2={y2}\n              stroke={color}\n              strokeWidth={3}\n              strokeLinecap=\"round\"\n            />\n          );\n        })}\n      </svg>\n    );\n  }\n);\n"],"names":["Loading","React","size","color","lineCount","animationDuration","className","style","ref","lines","angleStep","jsx","i","angle","innerRadius","outerRadius","x1","y1","x2","y2","styles"],"mappings":";;sGAYaA,IAAUC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,IACpB,WAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,GAEFC,MACG;AAEH,UAAMC,IAAQ,MAAM,KAAK,EAAE,QAAQL,GAAW,GACxCM,IAAY,MAAMN;AAExB,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAAF;AAAA,QACA,OAAM;AAAA,QACN,OAAO,EAAE,QAAQJ,GAAM,OAAOA,GAAM,GAAGK,EAAA;AAAA,QACvC,MAAK;AAAA,QAEJ,UAAAE,EAAM,IAAI,CAAC,GAAGG,MAAM;AACnB,gBAAMC,IAAQH,IAAYE,GACpBE,IAAc,KAAa,KAC3BC,IAAc,KAAa,MAE3BC,IAAK,KAAa,IAAIF,IAAc,KAAK,IAAKD,IAAQ,KAAK,KAAM,GAAG,GACpEI,IAAK,KAAa,IAAIH,IAAc,KAAK,IAAKD,IAAQ,KAAK,KAAM,GAAG,GACpEK,IAAK,KAAa,IAAIH,IAAc,KAAK,IAAKF,IAAQ,KAAK,KAAM,GAAG,GACpEM,IAAK,KAAa,IAAIJ,IAAc,KAAK,IAAKF,IAAQ,KAAK,KAAM,GAAG;AAE1E,iBACE,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,EAAO,cAAc;AAAA,cAChC,OAAO;AAAA,gBACL,gBAAgB,GAAIR,IAAIP,IAAqBD,CAAS;AAAA,gBACtD,mBAAmB,GAAGC,CAAiB;AAAA,cAAA;AAAA,cAGzC,IAAAW;AAAA,cACA,IAAAC;AAAA,cACA,IAAAC;AAAA,cACA,IAAAC;AAAA,cACA,QAAQhB;AAAA,cACR,aAAa;AAAA,cACb,eAAc;AAAA,YAAA;AAAA,YAPTS;AAAA,UAAA;AAAA,QAUX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/feedback/progress/progress_bar.js

@@ -12,7 +12,7 @@ import { HStack as l } from "../../stacks/h_stack.js";
 import { Spacer as a } from "../../stacks/spacer.js";
 import { VStack as d } from "../../stacks/v_stack.js";
 import { ZStack as b } from "../../stacks/z_stack.js";
-import '../../progress_bar.css';const f = "_progress-bar-container_014b4d9", h = "_progress-bar-background_9176cc0", _ = "_progress-bar_057c33d", k = "_progress-bar-fill_00854f0", x = "_moveStripes_d219e85", s = { "progress-bar-container": f, "progress-bar-background": h, "progress-bar": _, "progress-bar-fill": k, moveStripes: x }, H = m.forwardRef(function({ message: i, value: p, ...c }, n) {
+import '../../progress_bar.css';const f = "_progress-bar-container_014b4d9", h = "_progress-bar-background_9176cc0", _ = "_progress-bar_057c33d", k = "_progress-bar-fill_00854f0", u = "_moveStripes_d219e85", s = { "progress-bar-container": f, "progress-bar-background": h, "progress-bar": _, "progress-bar-fill": k, moveStripes: u }, H = m.forwardRef(function({ message: i, value: p, ...c }, n) {
   const o = `${(p * 100).toFixed(0)}%`, g = { "--progress-percentage": o };
   return /* @__PURE__ */ e(d, { ref: n, className: s["progress-bar-container"], ...c, children: [
     /* @__PURE__ */ e(l, { height: "auto", vAlign: "end", children: [

package/dist/form/field/common/field_control/field_control.js

@@ -1,20 +1,20 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import c from "react";
-import { VStack as f } from "../../../../stacks/v_stack.js";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import f from "react";
+import { VStack as c } from "../../../../stacks/v_stack.js";
 import { clsx as s } from "clsx";
 import { FieldErrorMessage as m } from "../field_error.js";
-import '../../../../field_control.css';const h = "_field-error_44124ee", p = "_field-control_ca50e63", x = { "field-error": h, "field-control": p }, k = c.forwardRef(function({
+import '../../../../field_control.css';const h = "_field-error_44124ee", p = "_field-control_ca50e63", x = { "field-error": h, "field-control": p }, k = f.forwardRef(function({
   children: o,
   errorMessage: r,
   locked: e = !1,
   loading: l = !1,
   className: t,
   ...i
-}, n) {
-  return /* @__PURE__ */ d(
-    f,
+}, d) {
+  return /* @__PURE__ */ n(
+    c,
     {
-      ref: n,
+      ref: d,
       "data-locked": e,
       "data-loading": l,
       "data-error": !!r,

package/dist/form/field/common/status_input/status_input.js

@@ -8,14 +8,14 @@ import "../../../../feedback/progress/progress_bar.js";
 import "@tcn/state";
 import "../../../../stacks/v_stack.js";
 import { clsx as o } from "clsx";
-import '../../../../status_input.css';const A = "_field-error_6d015c9", x = "_field-status-input_c30d6fb", n = { "field-error": A, "field-status-input": x }, h = () => /* @__PURE__ */ r(f, { className: "field-lock", size: "lg" }), k = () => /* @__PURE__ */ r(g, { size: "20px", className: "field-loader" }), I = () => /* @__PURE__ */ r(u, { className: o(n["field-error"], "field-error"), size: "lg" }), w = ({ state: e }) => {
+import '../../../../status_input.css';const A = "_field-error_6d015c9", x = "_field-status-input_c30d6fb", n = { "field-error": A, "field-status-input": x }, _ = () => /* @__PURE__ */ r(f, { className: "field-lock", size: "lg" }), h = () => /* @__PURE__ */ r(g, { size: "20px", className: "field-loader" }), k = () => /* @__PURE__ */ r(u, { className: o(n["field-error"], "field-error"), size: "lg" }), I = ({ state: e }) => {
   switch (e) {
     case "locked":
-      return /* @__PURE__ */ r(h, {});
+      return /* @__PURE__ */ r(_, {});
     case "loading":
-      return /* @__PURE__ */ r(k, {});
+      return /* @__PURE__ */ r(h, {});
     case "error":
-      return /* @__PURE__ */ r(I, {});
+      return /* @__PURE__ */ r(k, {});
     default:
       return null;
   }
@@ -38,13 +38,13 @@ import '../../../../status_input.css';const A = "_field-error_6d015c9", x = "_fi
       ...l,
       children: [
         a && i,
-        /* @__PURE__ */ r(w, { state: t })
+        /* @__PURE__ */ r(I, { state: t })
       ]
     }
   );
 });
 export {
-  w as AdornmentMap,
+  I as AdornmentMap,
   v as FieldStatusInput
 };
 //# sourceMappingURL=status_input.js.map

package/dist/form/field/field.js

@@ -7,13 +7,13 @@ import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as l } from "../../utils/hooks/use_fork_ref.js";
 import { useResizeObserver as p } from "../../utils/hooks/use_resize_observer.js";
-const H = c.forwardRef(function({ children: t, breakpointPixels: i = 500, ...e }, m) {
-  const [f, n] = u(!0), s = p((d) => {
+const z = c.forwardRef(function({ children: t, breakpointPixels: i = 500, ...e }, f) {
+  const [m, n] = u(!0), s = p((d) => {
     n(d >= i);
-  }), o = l(m, s);
-  return /* @__PURE__ */ r(a, { children: f ? /* @__PURE__ */ r(F, { ...e, ref: o, ...e, children: t }) : /* @__PURE__ */ r(R, { ...e, ref: o, ...e, children: t }) });
+  }), o = l(f, s);
+  return /* @__PURE__ */ r(a, { children: m ? /* @__PURE__ */ r(F, { ...e, ref: o, ...e, children: t }) : /* @__PURE__ */ r(R, { ...e, ref: o, ...e, children: t }) });
 });
 export {
-  H as Field
+  z as Field
 };
 //# sourceMappingURL=field.js.map

package/dist/form/field/h_field/h_field.js

@@ -1,13 +1,13 @@
 import { jsxs as F, jsx as r } from "react/jsx-runtime";
 import { HStack as I } from "../../../stacks/h_stack.js";
 import { clsx as H } from "clsx";
-import g, { useState as y } from "react";
-import { FieldHeader as S } from "../common/field_header.js";
-import { FieldControl as $ } from "../common/field_control/field_control.js";
-import { FieldStatusInput as j } from "../common/status_input/status_input.js";
-import '../../../h_field.css';const v = "_h-field_845b93f", w = { "h-field": v };
-let A = 0;
-const B = g.forwardRef(function({
+import _, { useState as g } from "react";
+import { FieldHeader as y } from "../common/field_header.js";
+import { FieldControl as S } from "../common/field_control/field_control.js";
+import { FieldStatusInput as $ } from "../common/status_input/status_input.js";
+import '../../../h_field.css';const j = "_h-field_845b93f", v = { "h-field": j };
+let w = 0;
+const B = _.forwardRef(function({
   label: o,
   description: s,
   errorMessage: d,
@@ -20,7 +20,7 @@ const B = g.forwardRef(function({
   required: m,
   ...h
 }, p) {
-  const [i] = y(() => c || `h-field-${A++}`), u = `${i}-label`, b = `${i}-description`, a = !!d, x = t ? "locked" : e ? "loading" : a ? "error" : "default";
+  const [i] = g(() => c || `h-field-${w++}`), u = `${i}-label`, b = `${i}-description`, a = !!d, x = t ? "locked" : e ? "loading" : a ? "error" : "default";
   return /* @__PURE__ */ F(
     I,
     {
@@ -31,7 +31,7 @@ const B = g.forwardRef(function({
       "data-locked": t,
       "data-error": a,
       "data-loading": e,
-      className: H("base-field", w["h-field"], "h-field", f),
+      className: H("base-field", v["h-field"], "h-field", f),
       vAlign: "start",
       hAlign: "start",
       height: "auto",
@@ -39,7 +39,7 @@ const B = g.forwardRef(function({
       ...h,
       children: [
         /* @__PURE__ */ r(
-          S,
+          y,
           {
             minWidth: l,
             width: l,
@@ -49,7 +49,7 @@ const B = g.forwardRef(function({
             required: m
           }
         ),
-        /* @__PURE__ */ r($, { errorMessage: d, loading: e, locked: t, children: /* @__PURE__ */ r(j, { state: x, children: n }) })
+        /* @__PURE__ */ r(S, { errorMessage: d, loading: e, locked: t, children: /* @__PURE__ */ r($, { state: x, children: n }) })
       ]
     }
   );

package/dist/form/field/v_field/v_field.js

@@ -7,21 +7,21 @@ import { FieldHeader as y } from "../common/field_header.js";
 import { FieldStatusInput as S } from "../common/status_input/status_input.js";
 import '../../../v_field.css';const V = {};
 let $ = 0;
-const z = F.forwardRef(function({
+const q = F.forwardRef(function({
   label: d,
   description: o,
   errorMessage: a,
   children: s,
   locked: t = !1,
-  loading: r = !1,
+  loading: e = !1,
   maxWidth: R,
   minWidth: W,
   className: n,
-  id: c,
-  required: f,
+  id: f,
+  required: c,
   ...m
 }, p) {
-  const [e] = I(() => c || `v-field-${$++}`), l = !!a, h = `${e}-label`, u = `${e}-description`, b = t ? "locked" : r ? "loading" : l ? "error" : "default";
+  const [r] = I(() => f || `v-field-${$++}`), l = !!a, h = `${r}-label`, u = `${r}-description`, b = t ? "locked" : e ? "loading" : l ? "error" : "default";
   return /* @__PURE__ */ x(
     g,
     {
@@ -31,7 +31,7 @@ const z = F.forwardRef(function({
       "aria-describedby": u,
       "data-locked": t,
       "data-error": l,
-      "data-loading": r,
+      "data-loading": e,
       className: v("base-field", V["v-field"], "v-field", n),
       vAlign: "start",
       hAlign: "start",
@@ -42,17 +42,17 @@ const z = F.forwardRef(function({
         /* @__PURE__ */ i(
           y,
           {
-            id: e,
+            id: r,
             label: d,
             description: o,
-            required: f
+            required: c
           }
         ),
         /* @__PURE__ */ i(
           A,
           {
             errorMessage: a,
-            loading: r,
+            loading: e,
             locked: t,
             hAlign: "start",
             children: /* @__PURE__ */ i(S, { state: b, hAlign: "start", children: s })
@@ -63,6 +63,6 @@ const z = F.forwardRef(function({
   );
 });
 export {
-  z as VField
+  q as VField
 };
 //# sourceMappingURL=v_field.js.map

package/dist/form/field_set/field_set.js

@@ -11,8 +11,8 @@ import { HStack as b } from "../../stacks/h_stack.js";
 import { Spacer as f } from "../../stacks/spacer.js";
 import { VStack as m } from "../../stacks/v_stack.js";
 import y, { useMemo as S } from "react";
-import '../../field_set.css';const x = "_field-set_8e981d9", g = "_field-set-body_4cd3139", c = { "field-set": x, "field-set-body": g };
-let u = 0;
+import '../../field_set.css';const u = "_field-set_8e981d9", x = "_field-set-body_4cd3139", c = { "field-set": u, "field-set-body": x };
+let _ = 0;
 const q = y.forwardRef(function({
   legend: l,
   startAdornments: d,
@@ -21,7 +21,7 @@ const q = y.forwardRef(function({
   children: n,
   ...t
 }, p) {
-  const s = `field-set-${S(() => u++, [])}`;
+  const s = `field-set-${S(() => _++, [])}`;
   return /* @__PURE__ */ r(
     m,
     {

package/dist/formatter-QJ4M4OGQ-DaIl2Wi_.js

@@ -0,0 +1,6 @@
+import { _ as a, d as i, r as m } from "./showcase-WfP6kBEb.js";
+var t = a(m(), 1), f = (0, t.default)(2)(async (e, r) => e === !1 ? r : i(r));
+export {
+  f as formatter
+};
+//# sourceMappingURL=formatter-QJ4M4OGQ-DaIl2Wi_.js.map

package/dist/formatter-QJ4M4OGQ-DaIl2Wi_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatter-QJ4M4OGQ-DaIl2Wi_.js","sources":["../../../node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/storybook/dist/_browser-chunks/formatter-QJ4M4OGQ.js"],"sourcesContent":["import {\n  require_memoizerific\n} from \"./chunk-WJYERY3R.js\";\nimport {\n  dedent\n} from \"./chunk-JP7NCOJX.js\";\nimport {\n  __toESM\n} from \"./chunk-A242L54C.js\";\n\n// src/components/components/syntaxhighlighter/formatter.ts\nvar import_memoizerific = __toESM(require_memoizerific(), 1);\nvar formatter = (0, import_memoizerific.default)(2)(async (type, source) => type === !1 ? source : dedent(source));\nexport {\n  formatter\n};\n"],"names":["import_memoizerific","__toESM","require_memoizerific","formatter","type","source","dedent"],"mappings":";AAWA,IAAIA,IAAsBC,EAAQC,EAAoB,GAAI,CAAC,GACvDC,QAAgBH,EAAoB,SAAS,CAAC,EAAE,OAAOI,GAAMC,MAAWD,MAAS,KAAKC,IAASC,EAAOD,CAAM,CAAC;","x_google_ignoreList":[0]}

package/dist/gallery.css

@@ -0,0 +1 @@
+._container_932284e{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--min-column-width),1fr));gap:20px;max-width:var(--max-gallery-width)}

package/dist/inputs/checkbox/checkbox.js

@@ -1,34 +1,34 @@
 import { jsx as x } from "react/jsx-runtime";
-import { clsx as i } from "clsx";
-import d from "react";
-import '../../checkbox.css';const f = "_checkbox_cb77818", h = { checkbox: f }, y = d.forwardRef(function({
+import { clsx as d } from "clsx";
+import f from "react";
+import '../../checkbox.css';const i = "_checkbox_cb77818", l = { checkbox: i }, _ = f.forwardRef(function({
   style: a,
   className: r,
   width: s,
   height: b,
-  checked: c,
-  inputRef: l,
-  onChange: e,
+  checked: e,
+  inputRef: k,
+  onChange: c,
   ...o
 }, n) {
   return /* @__PURE__ */ x(
     "input",
     {
       ref: n,
-      "data-checked": c,
+      "data-checked": e,
       "data-is-disabled": o.disabled || !1,
-      checked: c,
+      checked: e,
       type: "checkbox",
       onChange: (t) => {
-        e && e(!!t.currentTarget.checked, t);
+        c && c(!!t.currentTarget.checked, t);
       },
       ...o,
-      className: i(r, h.checkbox, "checkbox"),
+      className: d(r, l.checkbox, "checkbox"),
       style: { width: s, height: b, ...a }
     }
   );
 });
 export {
-  y as Checkbox
+  _ as Checkbox
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/inputs/color_input/color_picker.js

@@ -7,23 +7,23 @@ import { useForkRef as k } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
 import { ZStack as l } from "../../stacks/z_stack.js";
 import { clsx as u } from "clsx";
-import { ChromePicker as h } from "react-color";
-import '../../color_picker.css';const d = "_color-picker_4757d5a", R = "_chrome-picker_2f64060", e = { "color-picker": d, "chrome-picker": R }, F = s.forwardRef(function({ color: c, onColorChange: t, className: i, ...m }, p) {
-  const r = n(null), f = k(r, p);
+import { ChromePicker as d } from "react-color";
+import '../../color_picker.css';const h = "_color-picker_4757d5a", R = "_chrome-picker_2f64060", e = { "color-picker": h, "chrome-picker": R }, F = s.forwardRef(function({ color: c, onColorChange: t, className: i, ...m }, f) {
+  const r = n(null), p = k(r, f);
   return a(() => {
     r.current && r.current.focus();
   }, []), /* @__PURE__ */ o(
     l,
     {
       tabIndex: 0,
-      ref: f,
+      ref: p,
       padding: "8px",
       height: "auto",
       width: "auto",
       className: u(e["color-picker"], i),
       ...m,
       children: /* @__PURE__ */ o(
-        h,
+        d,
         {
           className: e["chrome-picker"],
           color: c,

package/dist/inputs/combo_box/combo_box.js

@@ -1,14 +1,14 @@
-import { jsxs as D, Fragment as L, jsx as S } from "react/jsx-runtime";
+import { jsxs as w, Fragment as D, jsx as S } from "react/jsx-runtime";
 import "../../utils/click_away_listener.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
-import N, { useRef as s, useState as x } from "react";
-import { useForkRef as V } from "../../utils/hooks/use_fork_ref.js";
+import L, { useRef as s, useState as x } from "react";
+import { useForkRef as N } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import { clsx as z } from "clsx";
-import { SuggestionList as G } from "../suggestions/suggestion_list.js";
-import { Input as H } from "../input/input.js";
-const ee = N.forwardRef(function({
+import { clsx as V } from "clsx";
+import { SuggestionList as z } from "../suggestions/suggestion_list.js";
+import { Input as G } from "../input/input.js";
+const ee = L.forwardRef(function({
   onOptionSelect: a,
   children: C = [],
   onKeyDown: o,
@@ -21,18 +21,18 @@ const ee = N.forwardRef(function({
   onMouseUp: g,
   ...i
 }, y) {
-  const A = s(!1), d = s(c), n = s(!1), [E, F] = x(null), f = s(null), [h, R] = x(!1), T = V(y, f);
+  const A = s(!1), d = s(c), n = s(!1), [E, F] = x(null), f = s(null), [h, R] = x(!1), T = N(y, f);
   function l() {
     R(!0);
   }
   function r() {
     n.current = !1, R(!1);
   }
-  function I(e, t, w) {
+  function I(e, t, q) {
     n.current = !0;
     const u = f.current;
     requestAnimationFrame(() => {
-      u != null && (u.value = e, u.focus(), u.setSelectionRange(t, w));
+      u != null && (u.value = e, u.focus(), u.setSelectionRange(t, q));
     }), i.onChange && i.onChange(e), r();
   }
   function M(e) {
@@ -53,25 +53,25 @@ const ee = N.forwardRef(function({
   function U(e) {
     F(e.currentTarget), A.current = document.activeElement === e.currentTarget, p && p(e);
   }
-  function q(e) {
+  function _(e) {
     n.current && (n.current = !1, r()), l(), g && g(e);
   }
-  return /* @__PURE__ */ D(L, { children: [
+  return /* @__PURE__ */ w(D, { children: [
     /* @__PURE__ */ S(
-      H,
+      G,
       {
         ref: T,
-        className: z(b, "combo-box-input"),
+        className: V(b, "combo-box-input"),
         ...i,
         value: c,
         onKeyDown: j,
         onKeyUp: B,
         onMouseDown: U,
-        onMouseUp: q
+        onMouseUp: _
       }
     ),
     h && /* @__PURE__ */ S(
-      G,
+      z,
       {
         anchorElement: E,
         onClose: I,