@tcn/ui 0.0.3 → 0.0.4

package/dist/actions/button/base_button/base_button.js

@@ -1,10 +1,10 @@
 import { jsx as m } from "react/jsx-runtime";
 import h from "react";
-import B from "classnames";
+import { clsx as B } from "clsx";
 import { HStack as p } from "../../../stacks/h_stack.js";
-import '../../../base_button.css';const y = "_base-button_d33aa84", x = { "base-button": y }, R = h.forwardRef(
+import '../../../base_button.css';const y = "_base-button_d33aa84", x = { "base-button": y }, _ = h.forwardRef(
   function({
-    children: r,
+    children: s,
     className: u,
     style: l,
     color: e,
@@ -26,10 +26,10 @@ import '../../../base_button.css';const y = "_base-button_d33aa84", x = { "base-
         return;
       }
       a(t);
-    }, s = {
+    }, r = {
       ...l
     };
-    return e && (s["--button-color"] = e), /* @__PURE__ */ m(
+    return e && (r["--button-color"] = e), /* @__PURE__ */ m(
       p,
       {
         ref: b,
@@ -41,16 +41,16 @@ import '../../../base_button.css';const y = "_base-button_d33aa84", x = { "base-
         "data-size": c,
         "data-is-disabled": !!o.disabled,
         className: B(x["base-button"], "base-button", u),
-        style: s,
+        style: r,
         onTouchStart: d,
         onContextMenu: f,
         ...o,
-        children: r
+        children: s
       }
     );
   }
 );
 export {
-  R as BaseButton
+  _ as BaseButton
 };
 //# sourceMappingURL=base_button.js.map

package/dist/actions/button/base_button/base_button.js.map

@@ -1 +1 @@
-{"version":3,"file":"base_button.js","sources":["../../../../src/actions/button/base_button/base_button.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport type { Hierarchy, Size } from '../../../utils/index.js';\nimport { HStack } from '../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../stacks/h_stack.js';\nimport styles from './base_button.module.css';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\n\nexport interface BaseButtonOwnProps {\n  hierarchy?: Hierarchy;\n  size?: Size;\n  color?: string;\n}\n\nexport type BaseButtonWithStackProps = BaseButtonOwnProps &\n  HStackOwnProps & {\n    children?: React.ReactNode;\n  };\n\nexport type BaseButtonProps = WithDetailedHTMLProps<BaseButtonWithStackProps, 'button'>;\n\nexport const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(\n  function BaseButton(\n    {\n      children,\n      className,\n      style,\n      color,\n      hierarchy = 'secondary',\n      size = 'medium',\n      onTouchStart,\n      onContextMenu,\n      ...props\n    },\n    ref\n  ) {\n    const handleTouchStart = (event: React.TouchEvent<HTMLButtonElement>) => {\n      if (onTouchStart == null) {\n        event.preventDefault();\n        return;\n      }\n      onTouchStart(event);\n    };\n\n    const handleContextMenu = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (onContextMenu == null) {\n        event.preventDefault();\n        return;\n      }\n      onContextMenu(event);\n    };\n\n    const finalStyle: React.CSSProperties = {\n      ...style,\n    };\n\n    if (color) {\n      finalStyle['--button-color'] = color;\n    }\n\n    return (\n      <HStack\n        ref={ref}\n        as=\"button\"\n        inline\n        vAlign=\"center\"\n        hAlign=\"center\"\n        data-hierarchy={hierarchy}\n        data-size={size}\n        data-is-disabled={Boolean(props.disabled)}\n        className={classNames(styles['base-button'], 'base-button', className)}\n        style={finalStyle}\n        onTouchStart={handleTouchStart}\n        onContextMenu={handleContextMenu}\n        {...props}\n      >\n        {children}\n      </HStack>\n    );\n  }\n);\n"],"names":["BaseButton","React","children","className","style","color","hierarchy","size","onTouchStart","onContextMenu","props","ref","handleTouchStart","event","handleContextMenu","finalStyle","jsx","HStack","classNames","styles"],"mappings":";;;;4DAqBaA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAmB,CAACC,MAA+C;AACvE,UAAIL,KAAgB,MAAM;AACxB,QAAAK,EAAM,eAAA;AACN;AAAA,MACF;AACA,MAAAL,EAAaK,CAAK;AAAA,IACpB,GAEMC,IAAoB,CAACD,MAA+C;AACxE,UAAIJ,KAAiB,MAAM;AACzB,QAAAI,EAAM,eAAA;AACN;AAAA,MACF;AACA,MAAAJ,EAAcI,CAAK;AAAA,IACrB,GAEME,IAAkC;AAAA,MACtC,GAAGX;AAAA,IAAA;AAGL,WAAIC,MACFU,EAAW,gBAAgB,IAAIV,IAI/B,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAN;AAAA,QACA,IAAG;AAAA,QACH,QAAM;AAAA,QACN,QAAO;AAAA,QACP,QAAO;AAAA,QACP,kBAAgBL;AAAA,QAChB,aAAWC;AAAA,QACX,oBAAkB,EAAQG,EAAM;AAAA,QAChC,WAAWQ,EAAWC,EAAO,aAAa,GAAG,eAAehB,CAAS;AAAA,QACrE,OAAOY;AAAA,QACP,cAAcH;AAAA,QACd,eAAeE;AAAA,QACd,GAAGJ;AAAA,QAEH,UAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"base_button.js","sources":["../../../../src/actions/button/base_button/base_button.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport type { Hierarchy, Size } from '../../../utils/index.js';\nimport { HStack } from '../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../stacks/h_stack.js';\nimport styles from './base_button.module.css';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\n\nexport interface BaseButtonOwnProps {\n  hierarchy?: Hierarchy;\n  size?: Size;\n  color?: string;\n}\n\nexport type BaseButtonWithStackProps = BaseButtonOwnProps &\n  HStackOwnProps & {\n    children?: React.ReactNode;\n  };\n\nexport type BaseButtonProps = WithDetailedHTMLProps<BaseButtonWithStackProps, 'button'>;\n\nexport const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(\n  function BaseButton(\n    {\n      children,\n      className,\n      style,\n      color,\n      hierarchy = 'secondary',\n      size = 'medium',\n      onTouchStart,\n      onContextMenu,\n      ...props\n    },\n    ref\n  ) {\n    const handleTouchStart = (event: React.TouchEvent<HTMLButtonElement>) => {\n      if (onTouchStart == null) {\n        event.preventDefault();\n        return;\n      }\n      onTouchStart(event);\n    };\n\n    const handleContextMenu = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (onContextMenu == null) {\n        event.preventDefault();\n        return;\n      }\n      onContextMenu(event);\n    };\n\n    const finalStyle: React.CSSProperties = {\n      ...style,\n    };\n\n    if (color) {\n      finalStyle['--button-color'] = color;\n    }\n\n    return (\n      <HStack\n        ref={ref}\n        as=\"button\"\n        inline\n        vAlign=\"center\"\n        hAlign=\"center\"\n        data-hierarchy={hierarchy}\n        data-size={size}\n        data-is-disabled={Boolean(props.disabled)}\n        className={clsx(styles['base-button'], 'base-button', className)}\n        style={finalStyle}\n        onTouchStart={handleTouchStart}\n        onContextMenu={handleContextMenu}\n        {...props}\n      >\n        {children}\n      </HStack>\n    );\n  }\n);\n"],"names":["BaseButton","React","children","className","style","color","hierarchy","size","onTouchStart","onContextMenu","props","ref","handleTouchStart","event","handleContextMenu","finalStyle","jsx","HStack","clsx","styles"],"mappings":";;;;4DAqBaA,IAAaC,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAmB,CAACC,MAA+C;AACvE,UAAIL,KAAgB,MAAM;AACxB,QAAAK,EAAM,eAAA;AACN;AAAA,MACF;AACA,MAAAL,EAAaK,CAAK;AAAA,IACpB,GAEMC,IAAoB,CAACD,MAA+C;AACxE,UAAIJ,KAAiB,MAAM;AACzB,QAAAI,EAAM,eAAA;AACN;AAAA,MACF;AACA,MAAAJ,EAAcI,CAAK;AAAA,IACrB,GAEME,IAAkC;AAAA,MACtC,GAAGX;AAAA,IAAA;AAGL,WAAIC,MACFU,EAAW,gBAAgB,IAAIV,IAI/B,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAN;AAAA,QACA,IAAG;AAAA,QACH,QAAM;AAAA,QACN,QAAO;AAAA,QACP,QAAO;AAAA,QACP,kBAAgBL;AAAA,QAChB,aAAWC;AAAA,QACX,oBAAkB,EAAQG,EAAM;AAAA,QAChC,WAAWQ,EAAKC,EAAO,aAAa,GAAG,eAAehB,CAAS;AAAA,QAC/D,OAAOY;AAAA,QACP,cAAcH;AAAA,QACd,eAAeE;AAAA,QACd,GAAGJ;AAAA,QAEH,UAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

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

@@ -1,15 +1,15 @@
 import { jsx as o } from "react/jsx-runtime";
 import b from "react";
-import n from "classnames";
+import { clsx as n } from "clsx";
 import { BaseButton as c } from "../base_button/base_button.js";
-import '../../../button.css';const m = "_button_fd354ec", a = "_button-text_5989b5f", s = { button: m, "button-text": a }, _ = b.forwardRef(function({ children: t, className: e, ...u }, r) {
+import '../../../button.css';const f = "_button_fd354ec", m = "_button-text_5989b5f", u = { button: f, "button-text": m }, _ = b.forwardRef(function({ children: t, className: e, ...s }, r) {
   return /* @__PURE__ */ o(
     c,
     {
       ref: r,
-      className: n(s.button, "button", "tcn-button", e),
-      ...u,
-      children: typeof t == "string" ? /* @__PURE__ */ o("span", { className: n(s["button-text"], "button-text", "tcn-button-text"), children: t }) : t
+      className: n(u.button, "button", "tcn-button", e),
+      ...s,
+      children: typeof t == "string" ? /* @__PURE__ */ o("span", { className: n(u["button-text"], "button-text", "tcn-button-text"), children: t }) : t
     }
   );
 });

package/dist/actions/button/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/actions/button/button/button.tsx"],"sourcesContent":["import React from 'react';\nimport cln from 'classnames';\nimport { BaseButton, type BaseButtonProps } from '../base_button/base_button.js';\nimport styles from './button.module.css';\n\nexport interface ButtonProps extends BaseButtonProps {}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { children, className, ...props },\n  ref\n) {\n  return (\n    <BaseButton\n      ref={ref}\n      className={cln(styles.button, 'button', 'tcn-button', className)}\n      {...props}\n    >\n      {typeof children === 'string' ? (\n        <span className={cln(styles['button-text'], 'button-text', 'tcn-button-text')}>\n          {children}\n        </span>\n      ) : (\n        children\n      )}\n    </BaseButton>\n  );\n});\n"],"names":["Button","React","children","className","props","ref","jsx","BaseButton","cln","styles"],"mappings":";;;;8FAOaA,IAASC,EAAM,WAA2C,SACrE,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAIC,EAAO,QAAQ,UAAU,cAAcN,CAAS;AAAA,MAC9D,GAAGC;AAAA,MAEH,UAAA,OAAOF,KAAa,WACnB,gBAAAI,EAAC,UAAK,WAAWE,EAAIC,EAAO,aAAa,GAAG,eAAe,iBAAiB,GACzE,UAAAP,GACH,IAEAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"button.js","sources":["../../../../src/actions/button/button/button.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { BaseButton, type BaseButtonProps } from '../base_button/base_button.js';\nimport styles from './button.module.css';\n\nexport interface ButtonProps extends BaseButtonProps {}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { children, className, ...props },\n  ref\n) {\n  return (\n    <BaseButton\n      ref={ref}\n      className={clsx(styles.button, 'button', 'tcn-button', className)}\n      {...props}\n    >\n      {typeof children === 'string' ? (\n        <span className={clsx(styles['button-text'], 'button-text', 'tcn-button-text')}>\n          {children}\n        </span>\n      ) : (\n        children\n      )}\n    </BaseButton>\n  );\n});\n"],"names":["Button","React","children","className","props","ref","jsx","BaseButton","clsx","styles"],"mappings":";;;;8FAOaA,IAASC,EAAM,WAA2C,SACrE,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAKC,EAAO,QAAQ,UAAU,cAAcN,CAAS;AAAA,MAC/D,GAAGC;AAAA,MAEH,UAAA,OAAOF,KAAa,WACnB,gBAAAI,EAAC,UAAK,WAAWE,EAAKC,EAAO,aAAa,GAAG,eAAe,iBAAiB,GAC1E,UAAAP,GACH,IAEAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/actions/button/button_group/button_group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button_group.d.ts","sourceRoot":"","sources":["../../../../src/actions/button/button_group/button_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAG1D,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;CAC/E;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;AAEjF,eAAO,MAAM,WAAW,sGAoDvB,CAAC"}
+{"version":3,"file":"button_group.d.ts","sourceRoot":"","sources":["../../../../src/actions/button/button_group/button_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAG1D,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;CAC/E;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;AAEjF,eAAO,MAAM,WAAW,sGAiDvB,CAAC"}

package/dist/actions/button/button_group/button_group.js

@@ -1,6 +1,6 @@
 import { jsx as u, jsxs as g } from "react/jsx-runtime";
 import { HStack as f } from "../../../stacks/h_stack.js";
-import n from "classnames";
+import { clsx as n } from "clsx";
 import i from "react";
 import { Button as l } from "../button/button.js";
 import '../../../button_group.css';const v = "_button-group_87e4f35", _ = "_button-group-button_654d1ae", G = "_button-group-divider_9659287", a = { "button-group": v, "button-group-button": _, "button-group-divider": G }, w = i.forwardRef(
@@ -37,10 +37,7 @@ import '../../../button_group.css';const v = "_button-group_87e4f35", _ = "_butt
             !c && /* @__PURE__ */ u(
               "div",
               {
-                className: n(
-                  a["button-group-divider"],
-                  "button-group-divider"
-                ),
+                className: n(a["button-group-divider"], "button-group-divider"),
                 "data-hierarchy": o,
                 "data-size": r
               }

package/dist/actions/button/button_group/button_group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button_group.js","sources":["../../../../src/actions/button/button_group/button_group.tsx"],"sourcesContent":["import type { Hierarchy, Size } from '../../../utils/index.js';\nimport { HStack } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { Button, ButtonProps } from '../button/button.js';\nimport styles from './button_group.module.css';\n\nexport interface ButtonGroupOwnProps {\n  hierarchy?: Hierarchy;\n  size?: Size;\n  children: React.ReactElement<ButtonProps> | React.ReactElement<ButtonProps>[];\n}\n\nexport type ButtonGroupProps = WithDetailedHTMLProps<ButtonGroupOwnProps, 'div'>;\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    { children, className, hierarchy = 'secondary', size = 'md', ...props },\n    ref\n  ) {\n    const buttons: React.ReactElement<ButtonProps>[] = Array.isArray(children)\n      ? children\n      : [children];\n\n    return (\n      <HStack\n        ref={ref}\n        as=\"div\"\n        inline\n        width=\"auto\"\n        height=\"auto\"\n        data-hierarchy={hierarchy}\n        data-size={size}\n        className={classNames(styles['button-group'], 'button-group', className)}\n        {...props}\n      >\n        {buttons.map((button, i) => {\n          const isLast = buttons.length - 1 === i;\n\n          return (\n            <React.Fragment key={i}>\n              <Button\n                {...button.props}\n                className={classNames(\n                  styles['button-group-button'],\n                  'button-group-button',\n                  button.props.className\n                )}\n                hierarchy={hierarchy}\n                size={size}\n              />\n              {!isLast && (\n                <div\n                  className={classNames(\n                    styles['button-group-divider'],\n                    'button-group-divider'\n                  )}\n                  data-hierarchy={hierarchy}\n                  data-size={size}\n                />\n              )}\n            </React.Fragment>\n          );\n        })}\n      </HStack>\n    );\n  }\n);\n"],"names":["ButtonGroup","React","children","className","hierarchy","size","props","ref","buttons","jsx","HStack","classNames","styles","button","i","isLast","jsxs","Button"],"mappings":";;;;;4LAgBaA,IAAcC,EAAM;AAAA,EAC/B,SACE,EAAE,UAAAC,GAAU,WAAAC,GAAW,WAAAC,IAAY,aAAa,MAAAC,IAAO,MAAM,GAAGC,EAAA,GAChEC,GACA;AACA,UAAMC,IAA6C,MAAM,QAAQN,CAAQ,IACrEA,IACA,CAACA,CAAQ;AAEb,WACE,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,IAAG;AAAA,QACH,QAAM;AAAA,QACN,OAAM;AAAA,QACN,QAAO;AAAA,QACP,kBAAgBH;AAAA,QAChB,aAAWC;AAAA,QACX,WAAWM,EAAWC,EAAO,cAAc,GAAG,gBAAgBT,CAAS;AAAA,QACtE,GAAGG;AAAA,QAEH,UAAAE,EAAQ,IAAI,CAACK,GAAQC,MAAM;AAC1B,gBAAMC,IAASP,EAAQ,SAAS,MAAMM;AAEtC,iBACE,gBAAAE,EAACf,EAAM,UAAN,EACC,UAAA;AAAA,YAAA,gBAAAQ;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACE,GAAGJ,EAAO;AAAA,gBACX,WAAWF;AAAA,kBACTC,EAAO,qBAAqB;AAAA,kBAC5B;AAAA,kBACAC,EAAO,MAAM;AAAA,gBAAA;AAAA,gBAEf,WAAAT;AAAA,gBACA,MAAAC;AAAA,cAAA;AAAA,YAAA;AAAA,YAED,CAACU,KACA,gBAAAN;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWE;AAAA,kBACTC,EAAO,sBAAsB;AAAA,kBAC7B;AAAA,gBAAA;AAAA,gBAEF,kBAAgBR;AAAA,gBAChB,aAAWC;AAAA,cAAA;AAAA,YAAA;AAAA,UACb,EAAA,GAnBiBS,CAqBrB;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"button_group.js","sources":["../../../../src/actions/button/button_group/button_group.tsx"],"sourcesContent":["import type { Hierarchy, Size } from '../../../utils/index.js';\nimport { HStack } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport { Button, ButtonProps } from '../button/button.js';\nimport styles from './button_group.module.css';\n\nexport interface ButtonGroupOwnProps {\n  hierarchy?: Hierarchy;\n  size?: Size;\n  children: React.ReactElement<ButtonProps> | React.ReactElement<ButtonProps>[];\n}\n\nexport type ButtonGroupProps = WithDetailedHTMLProps<ButtonGroupOwnProps, 'div'>;\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    { children, className, hierarchy = 'secondary', size = 'md', ...props },\n    ref\n  ) {\n    const buttons: React.ReactElement<ButtonProps>[] = Array.isArray(children)\n      ? children\n      : [children];\n\n    return (\n      <HStack\n        ref={ref}\n        as=\"div\"\n        inline\n        width=\"auto\"\n        height=\"auto\"\n        data-hierarchy={hierarchy}\n        data-size={size}\n        className={clsx(styles['button-group'], 'button-group', className)}\n        {...props}\n      >\n        {buttons.map((button, i) => {\n          const isLast = buttons.length - 1 === i;\n\n          return (\n            <React.Fragment key={i}>\n              <Button\n                {...button.props}\n                className={clsx(\n                  styles['button-group-button'],\n                  'button-group-button',\n                  button.props.className\n                )}\n                hierarchy={hierarchy}\n                size={size}\n              />\n              {!isLast && (\n                <div\n                  className={clsx(styles['button-group-divider'], 'button-group-divider')}\n                  data-hierarchy={hierarchy}\n                  data-size={size}\n                />\n              )}\n            </React.Fragment>\n          );\n        })}\n      </HStack>\n    );\n  }\n);\n"],"names":["ButtonGroup","React","children","className","hierarchy","size","props","ref","buttons","jsx","HStack","clsx","styles","button","i","isLast","jsxs","Button"],"mappings":";;;;;4LAgBaA,IAAcC,EAAM;AAAA,EAC/B,SACE,EAAE,UAAAC,GAAU,WAAAC,GAAW,WAAAC,IAAY,aAAa,MAAAC,IAAO,MAAM,GAAGC,EAAA,GAChEC,GACA;AACA,UAAMC,IAA6C,MAAM,QAAQN,CAAQ,IACrEA,IACA,CAACA,CAAQ;AAEb,WACE,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,IAAG;AAAA,QACH,QAAM;AAAA,QACN,OAAM;AAAA,QACN,QAAO;AAAA,QACP,kBAAgBH;AAAA,QAChB,aAAWC;AAAA,QACX,WAAWM,EAAKC,EAAO,cAAc,GAAG,gBAAgBT,CAAS;AAAA,QAChE,GAAGG;AAAA,QAEH,UAAAE,EAAQ,IAAI,CAACK,GAAQC,MAAM;AAC1B,gBAAMC,IAASP,EAAQ,SAAS,MAAMM;AAEtC,iBACE,gBAAAE,EAACf,EAAM,UAAN,EACC,UAAA;AAAA,YAAA,gBAAAQ;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACE,GAAGJ,EAAO;AAAA,gBACX,WAAWF;AAAA,kBACTC,EAAO,qBAAqB;AAAA,kBAC5B;AAAA,kBACAC,EAAO,MAAM;AAAA,gBAAA;AAAA,gBAEf,WAAAT;AAAA,gBACA,MAAAC;AAAA,cAAA;AAAA,YAAA;AAAA,YAED,CAACU,KACA,gBAAAN;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWE,EAAKC,EAAO,sBAAsB,GAAG,sBAAsB;AAAA,gBACtE,kBAAgBR;AAAA,gBAChB,aAAWC;AAAA,cAAA;AAAA,YAAA;AAAA,UACb,EAAA,GAhBiBS,CAkBrB;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

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

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import { HStack as v } from "../../../stacks/h_stack.js";
-import l from "classnames";
+import { clsx as l } from "clsx";
 import n from "react";
-import { Button as y } from "../button/button.js";
-import '../../../select_group.css';const _ = "_select-group_c24986f", b = "_select-group-option_28f4dfd", x = "_select-group-divider_b5b865b", a = { "select-group": _, "select-group-option": b, "select-group-divider": x }, B = n.forwardRef(function({ children: o, value: c, className: u, onChange: d, disabled: s = !1, ...m }, f) {
+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) {
   const g = Array.isArray(o) ? o : [o], h = (e, p) => {
     if (s) return;
     const r = [...c];
@@ -17,20 +17,20 @@ import '../../../select_group.css';const _ = "_select-group_c24986f", b = "_sele
   return /* @__PURE__ */ i(
     v,
     {
-      ref: f,
+      ref: m,
       as: "div",
       inline: !0,
       width: "auto",
       height: "auto",
       "data-is-disabled": s,
       className: l(a["select-group"], "select-group", u),
-      ...m,
+      ...f,
       children: g.map((e, p) => {
         const r = c.includes(e.props.value), t = () => {
           h(e.props.value, r);
         };
         return /* @__PURE__ */ i(n.Fragment, { children: /* @__PURE__ */ i(
-          y,
+          x,
           {
             disabled: s || e.props.disabled,
             "data-is-disabled": s || e.props.disabled,
@@ -46,6 +46,6 @@ import '../../../select_group.css';const _ = "_select-group_c24986f", b = "_sele
   );
 });
 export {
-  B as SelectGroup
+  C as SelectGroup
 };
 //# sourceMappingURL=select_group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select_group.js","sources":["../../../../src/actions/button/select_group/select_group.tsx"],"sourcesContent":["import { HStack } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport classNames from 'classnames';\nimport React from 'react';\nimport { Button } from '../button/button.js';\nimport styles from './select_group.module.css';\n\nexport type SelectGroupChangeCallback = (values: string[]) => void;\nexport interface SelectGroupOwnProps {\n  value: string[];\n  disabled?: boolean;\n}\n\nexport type SelectGroupProps = Omit<\n  WithDetailedHTMLProps<SelectGroupOwnProps, 'div'>,\n  'onChange'\n> & {\n  onChange?: SelectGroupChangeCallback;\n  children:\n    | React.ReactElement<HTMLOptionElement>\n    | React.ReactElement<HTMLOptionElement>[];\n};\n\nexport const SelectGroup = React.forwardRef(function ButtonGroup(\n  { children, value, className, onChange, disabled = false, ...props }: SelectGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const options: React.ReactElement<any>[] = Array.isArray(children)\n    ? children\n    : [children];\n\n  const handleChange = (option: string, isSelected: boolean) => {\n    if (disabled) return;\n    const next = [...value];\n    if (isSelected) {\n      const index = value.indexOf(option);\n      index > -1 && next.splice(index, 1);\n    } else {\n      next.push(option);\n    }\n    onChange?.(next);\n  };\n\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      inline\n      width=\"auto\"\n      height=\"auto\"\n      data-is-disabled={disabled}\n      className={classNames(styles['select-group'], 'select-group', className)}\n      {...props}\n    >\n      {options.map((option, i) => {\n        const isSelected = value.includes(option.props.value);\n        const select = () => {\n          handleChange(option.props.value, isSelected);\n        };\n\n        return (\n          <React.Fragment key={i}>\n            <Button\n              disabled={disabled || option.props.disabled}\n              data-is-disabled={disabled || option.props.disabled}\n              className={classNames(styles['select-group-option'], 'select-group-option')}\n              hierarchy={isSelected ? 'primary' : 'secondary'}\n              onClick={select}\n              value={option.props.value}\n            >\n              {option.props.children}\n            </Button>\n          </React.Fragment>\n        );\n      })}\n    </HStack>\n  );\n});\n"],"names":["SelectGroup","React","children","value","className","onChange","disabled","props","ref","options","handleChange","option","isSelected","next","index","jsx","HStack","classNames","styles","i","select","Button"],"mappings":";;;;;4LAuBaA,IAAcC,EAAM,WAAW,SAC1C,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,UAAAC,IAAW,IAAO,GAAGC,EAAA,GAC7DC,GACA;AACA,QAAMC,IAAqC,MAAM,QAAQP,CAAQ,IAC7DA,IACA,CAACA,CAAQ,GAEPQ,IAAe,CAACC,GAAgBC,MAAwB;AAC5D,QAAIN,EAAU;AACd,UAAMO,IAAO,CAAC,GAAGV,CAAK;AACtB,QAAIS,GAAY;AACd,YAAME,IAAQX,EAAM,QAAQQ,CAAM;AAClC,MAAAG,IAAQ,MAAMD,EAAK,OAAOC,GAAO,CAAC;AAAA,IACpC;AACE,MAAAD,EAAK,KAAKF,CAAM;AAElB,IAAAN,IAAWQ,CAAI;AAAA,EACjB;AAEA,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,oBAAkBF;AAAA,MAClB,WAAWW,EAAWC,EAAO,cAAc,GAAG,gBAAgBd,CAAS;AAAA,MACtE,GAAGG;AAAA,MAEH,UAAAE,EAAQ,IAAI,CAACE,GAAQQ,MAAM;AAC1B,cAAMP,IAAaT,EAAM,SAASQ,EAAO,MAAM,KAAK,GAC9CS,IAAS,MAAM;AACnB,UAAAV,EAAaC,EAAO,MAAM,OAAOC,CAAU;AAAA,QAC7C;AAEA,eACE,gBAAAG,EAACd,EAAM,UAAN,EACC,UAAA,gBAAAc;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,UAAUf,KAAYK,EAAO,MAAM;AAAA,YACnC,oBAAkBL,KAAYK,EAAO,MAAM;AAAA,YAC3C,WAAWM,EAAWC,EAAO,qBAAqB,GAAG,qBAAqB;AAAA,YAC1E,WAAWN,IAAa,YAAY;AAAA,YACpC,SAASQ;AAAA,YACT,OAAOT,EAAO,MAAM;AAAA,YAEnB,YAAO,MAAM;AAAA,UAAA;AAAA,QAAA,KATGQ,CAWrB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"select_group.js","sources":["../../../../src/actions/button/select_group/select_group.tsx"],"sourcesContent":["import { HStack } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport { Button } from '../button/button.js';\nimport styles from './select_group.module.css';\n\nexport type SelectGroupChangeCallback = (values: string[]) => void;\nexport interface SelectGroupOwnProps {\n  value: string[];\n  disabled?: boolean;\n}\n\nexport type SelectGroupProps = Omit<\n  WithDetailedHTMLProps<SelectGroupOwnProps, 'div'>,\n  'onChange'\n> & {\n  onChange?: SelectGroupChangeCallback;\n  children:\n    | React.ReactElement<HTMLOptionElement>\n    | React.ReactElement<HTMLOptionElement>[];\n};\n\nexport const SelectGroup = React.forwardRef(function ButtonGroup(\n  { children, value, className, onChange, disabled = false, ...props }: SelectGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const options: React.ReactElement<any>[] = Array.isArray(children)\n    ? children\n    : [children];\n\n  const handleChange = (option: string, isSelected: boolean) => {\n    if (disabled) return;\n    const next = [...value];\n    if (isSelected) {\n      const index = value.indexOf(option);\n      index > -1 && next.splice(index, 1);\n    } else {\n      next.push(option);\n    }\n    onChange?.(next);\n  };\n\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      inline\n      width=\"auto\"\n      height=\"auto\"\n      data-is-disabled={disabled}\n      className={clsx(styles['select-group'], 'select-group', className)}\n      {...props}\n    >\n      {options.map((option, i) => {\n        const isSelected = value.includes(option.props.value);\n        const select = () => {\n          handleChange(option.props.value, isSelected);\n        };\n\n        return (\n          <React.Fragment key={i}>\n            <Button\n              disabled={disabled || option.props.disabled}\n              data-is-disabled={disabled || option.props.disabled}\n              className={clsx(styles['select-group-option'], 'select-group-option')}\n              hierarchy={isSelected ? 'primary' : 'secondary'}\n              onClick={select}\n              value={option.props.value}\n            >\n              {option.props.children}\n            </Button>\n          </React.Fragment>\n        );\n      })}\n    </HStack>\n  );\n});\n"],"names":["SelectGroup","React","children","value","className","onChange","disabled","props","ref","options","handleChange","option","isSelected","next","index","jsx","HStack","clsx","styles","i","select","Button"],"mappings":";;;;;4LAuBaA,IAAcC,EAAM,WAAW,SAC1C,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,UAAAC,IAAW,IAAO,GAAGC,EAAA,GAC7DC,GACA;AACA,QAAMC,IAAqC,MAAM,QAAQP,CAAQ,IAC7DA,IACA,CAACA,CAAQ,GAEPQ,IAAe,CAACC,GAAgBC,MAAwB;AAC5D,QAAIN,EAAU;AACd,UAAMO,IAAO,CAAC,GAAGV,CAAK;AACtB,QAAIS,GAAY;AACd,YAAME,IAAQX,EAAM,QAAQQ,CAAM;AAClC,MAAAG,IAAQ,MAAMD,EAAK,OAAOC,GAAO,CAAC;AAAA,IACpC;AACE,MAAAD,EAAK,KAAKF,CAAM;AAElB,IAAAN,IAAWQ,CAAI;AAAA,EACjB;AAEA,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,oBAAkBF;AAAA,MAClB,WAAWW,EAAKC,EAAO,cAAc,GAAG,gBAAgBd,CAAS;AAAA,MAChE,GAAGG;AAAA,MAEH,UAAAE,EAAQ,IAAI,CAACE,GAAQQ,MAAM;AAC1B,cAAMP,IAAaT,EAAM,SAASQ,EAAO,MAAM,KAAK,GAC9CS,IAAS,MAAM;AACnB,UAAAV,EAAaC,EAAO,MAAM,OAAOC,CAAU;AAAA,QAC7C;AAEA,eACE,gBAAAG,EAACd,EAAM,UAAN,EACC,UAAA,gBAAAc;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,UAAUf,KAAYK,EAAO,MAAM;AAAA,YACnC,oBAAkBL,KAAYK,EAAO,MAAM;AAAA,YAC3C,WAAWM,EAAKC,EAAO,qBAAqB,GAAG,qBAAqB;AAAA,YACpE,WAAWN,IAAa,YAAY;AAAA,YACpC,SAASQ;AAAA,YACT,OAAOT,EAAO,MAAM;AAAA,YAEnB,YAAO,MAAM;AAAA,UAAA;AAAA,QAAA,KATGQ,CAWrB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/actions/button/slim_button/slim_button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slim_button.d.ts","sourceRoot":"","sources":["../../../../src/actions/button/slim_button/slim_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAG1D,eAAO,MAAM,UAAU,oGAYtB,CAAC"}
+{"version":3,"file":"slim_button.d.ts","sourceRoot":"","sources":["../../../../src/actions/button/slim_button/slim_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAK1D,eAAO,MAAM,UAAU,oGAYtB,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"slim_button.js","sources":["../../../../src/actions/button/slim_button/slim_button.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { Button, ButtonProps } from '../button/button.js';\nimport styles from './slim_button.module.css';\n\nexport const SlimButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        className={classNames(styles['slim-button'], 'slim-button', className)}\n        {...props}\n      >\n        {children}\n      </Button>\n    );\n  }\n);\n"],"names":["SlimButton","React","children","className","props","ref","jsx","Button","classNames","styles"],"mappings":";;;;4DAKaA,IAAaC,EAAM;AAAA,EAC9B,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAEhC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAWC,EAAO,aAAa,GAAG,eAAeN,CAAS;AAAA,MACpE,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAIT;"}
+{"version":3,"file":"slim_button.js","sources":["../../../../src/actions/button/slim_button/slim_button.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, ButtonProps } from '../button/button.js';\nimport { clsx } from 'clsx';\n// Styles\nimport styles from './slim_button.module.css';\n\nexport const SlimButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        className={clsx(styles['slim-button'], 'slim-button', className)}\n        {...props}\n      >\n        {children}\n      </Button>\n    );\n  }\n);\n"],"names":["SlimButton","React","children","className","props","ref","jsx","Button","clsx","styles"],"mappings":";;;;4DAMaA,IAAaC,EAAM;AAAA,EAC9B,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAEhC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAKC,EAAO,aAAa,GAAG,eAAeN,CAAS;AAAA,MAC9D,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAIT;"}

package/dist/feedback/progress/progress_bar.js

@@ -1,7 +1,7 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import m from "react";
 import { BodyText as t } from "../../typography/body_text/body_text.js";
-import "classnames";
+import "clsx";
 import "../../callout.module-D8ECmxpO.js";
 import "../../caption.module-DDq0H4xZ.js";
 import "../../footnote.module-DEyFuqOr.js";

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

@@ -1,9 +1,9 @@
-import { jsxs as a, jsx as d } from "react/jsx-runtime";
+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 s from "classnames";
+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", g = { "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 = c.forwardRef(function({
   children: o,
   errorMessage: r,
   locked: e = !1,
@@ -11,14 +11,14 @@ import '../../../../field_control.css';const h = "_field-error_44124ee", p = "_f
   className: t,
   ...i
 }, n) {
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ d(
     f,
     {
       ref: n,
       "data-locked": e,
       "data-loading": l,
       "data-error": !!r,
-      className: s(g["field-control"], "field-control", t),
+      className: s(x["field-control"], "field-control", t),
       height: "auto",
       width: "flex",
       hAlign: "end",
@@ -27,7 +27,7 @@ import '../../../../field_control.css';const h = "_field-error_44124ee", p = "_f
       ...i,
       children: [
         o,
-        /* @__PURE__ */ d(m, { children: r })
+        /* @__PURE__ */ a(m, { children: r })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"field_control.js","sources":["../../../../../src/form/field/common/field_control/field_control.tsx"],"sourcesContent":["import React from 'react';\nimport { VStack } from '../../../../stacks/v_stack.js';\nimport type { VStackOwnProps } from '../../../../stacks/v_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';\nimport classNames from 'classnames';\nimport styles from './field_control.module.css';\nimport { FieldErrorMessage } from '../field_error.js';\n\nexport interface FieldControlOwnProps {\n  loading?: boolean;\n  locked?: boolean;\n  errorMessage?: string | React.ReactNode;\n  children: React.ReactNode;\n  inputAlignment?: 'start' | 'end';\n}\n\nexport type FieldControlProps = WithDetailedHTMLProps<\n  FieldControlOwnProps & VStackOwnProps,\n  'div'\n>;\n\nexport const FieldControl = React.forwardRef(function FieldControl(\n  {\n    children: Input,\n    errorMessage,\n    locked = false,\n    loading = false,\n    className,\n    ...props\n  }: FieldControlProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const hasError = errorMessage ? true : false;\n\n  return (\n    <VStack\n      ref={ref}\n      data-locked={locked}\n      data-loading={loading}\n      data-error={hasError}\n      className={classNames(styles['field-control'], 'field-control', className)}\n      height=\"auto\"\n      width=\"flex\"\n      hAlign=\"end\"\n      vAlign=\"center\"\n      gap=\"4px\"\n      {...props}\n    >\n      {Input}\n      <FieldErrorMessage>{errorMessage}</FieldErrorMessage>\n    </VStack>\n  );\n});\n"],"names":["FieldControl","React","Input","errorMessage","locked","loading","className","props","ref","jsxs","VStack","classNames","styles","jsx","FieldErrorMessage"],"mappings":";;;;;8GAqBaA,IAAeC,EAAM,WAAW,SAC3C;AAAA,EACE,UAAUC;AAAA,EACV,cAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAGA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,eAAaJ;AAAA,MACb,gBAAcC;AAAA,MACd,cAPa,EAAAF;AAAA,MAQb,WAAWQ,EAAWC,EAAO,eAAe,GAAG,iBAAiBN,CAAS;AAAA,MACzE,QAAO;AAAA,MACP,OAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAL;AAAA,QACD,gBAAAW,EAACC,KAAmB,UAAAX,EAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvC,CAAC;"}
+{"version":3,"file":"field_control.js","sources":["../../../../../src/form/field/common/field_control/field_control.tsx"],"sourcesContent":["import React from 'react';\nimport { VStack } from '../../../../stacks/v_stack.js';\nimport type { VStackOwnProps } from '../../../../stacks/v_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport styles from './field_control.module.css';\nimport { FieldErrorMessage } from '../field_error.js';\n\nexport interface FieldControlOwnProps {\n  loading?: boolean;\n  locked?: boolean;\n  errorMessage?: string | React.ReactNode;\n  children: React.ReactNode;\n  inputAlignment?: 'start' | 'end';\n}\n\nexport type FieldControlProps = WithDetailedHTMLProps<\n  FieldControlOwnProps & VStackOwnProps,\n  'div'\n>;\n\nexport const FieldControl = React.forwardRef(function FieldControl(\n  {\n    children: Input,\n    errorMessage,\n    locked = false,\n    loading = false,\n    className,\n    ...props\n  }: FieldControlProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const hasError = errorMessage ? true : false;\n\n  return (\n    <VStack\n      ref={ref}\n      data-locked={locked}\n      data-loading={loading}\n      data-error={hasError}\n      className={clsx(styles['field-control'], 'field-control', className)}\n      height=\"auto\"\n      width=\"flex\"\n      hAlign=\"end\"\n      vAlign=\"center\"\n      gap=\"4px\"\n      {...props}\n    >\n      {Input}\n      <FieldErrorMessage>{errorMessage}</FieldErrorMessage>\n    </VStack>\n  );\n});\n"],"names":["FieldControl","React","Input","errorMessage","locked","loading","className","props","ref","jsxs","VStack","clsx","styles","jsx","FieldErrorMessage"],"mappings":";;;;;8GAqBaA,IAAeC,EAAM,WAAW,SAC3C;AAAA,EACE,UAAUC;AAAA,EACV,cAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAGA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,eAAaJ;AAAA,MACb,gBAAcC;AAAA,MACd,cAPa,EAAAF;AAAA,MAQb,WAAWQ,EAAKC,EAAO,eAAe,GAAG,iBAAiBN,CAAS;AAAA,MACnE,QAAO;AAAA,MACP,OAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAL;AAAA,QACD,gBAAAW,EAACC,KAAmB,UAAAX,EAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvC,CAAC;"}

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

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { BodyText as i } from "../../../typography/body_text/body_text.js";
-import "classnames";
+import "clsx";
 import "../../../callout.module-D8ECmxpO.js";
 import "../../../caption.module-DDq0H4xZ.js";
 import "../../../footnote.module-DEyFuqOr.js";

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

@@ -1,6 +1,6 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import { BodyText as m } from "../../../typography/body_text/body_text.js";
-import "classnames";
+import "clsx";
 import "../../../callout.module-D8ECmxpO.js";
 import "../../../caption.module-DDq0H4xZ.js";
 import "../../../footnote.module-DEyFuqOr.js";
@@ -9,10 +9,9 @@ import "../../../subheadline.module-C-v7zMkQ.js";
 import "../../../title.module-B16de2jd.js";
 import { theme as i } from "../../../themes/theme_variables.js";
 import "react";
-import "../../../themes/themes/windows_98/windows_98_theme.js";
 import { AdornmentMap as s } from "./status_input/status_input.js";
 import { HStack as p } from "../../../stacks/h_stack.js";
-const v = ({ children: r }) => {
+const k = ({ children: r }) => {
   if (!r) return null;
   let t = r;
   return typeof r == "string" && (t = /* @__PURE__ */ o(
@@ -30,6 +29,6 @@ const v = ({ children: r }) => {
   ] });
 };
 export {
-  v as FieldErrorMessage
+  k as FieldErrorMessage
 };
 //# sourceMappingURL=field_error.js.map

package/dist/form/field/common/field_error.js.map

@@ -1 +1 @@
-{"version":3,"file":"field_error.js","sources":["../../../../src/form/field/common/field_error.tsx"],"sourcesContent":["import React from 'react';\nimport { BodyText } from '../../../typography/index.js';\nimport { theme } from '../../../themes/index.js';\nimport { AdornmentMap } from './status_input/status_input.js';\nimport { HStack } from '../../../stacks/h_stack.js';\n\nexport interface FieldErrorMessageOwnProps {\n  children?: React.ReactNode | string;\n}\n\nexport const FieldErrorMessage = ({ children }: FieldErrorMessageOwnProps) => {\n  if (!children) return null;\n  let finalChildren = children;\n\n  if (typeof children === 'string') {\n    finalChildren = (\n      <BodyText\n        breakWords\n        size=\"sm\"\n        className=\"field-error-message\"\n        color={theme.statusColors.error}\n      >\n        {children}\n      </BodyText>\n    );\n  }\n\n  return (\n    <HStack hAlign=\"end\" gap={theme.gap.md}>\n      {finalChildren}\n      {/* This is a hack to get the adornment to align with the text */}\n      <div style={{ visibility: 'hidden' }}>\n        <AdornmentMap state=\"error\" />\n      </div>\n    </HStack>\n  );\n};\n"],"names":["FieldErrorMessage","children","finalChildren","jsx","BodyText","theme","HStack","AdornmentMap"],"mappings":";;;;;;;;;;;;;;AAUO,MAAMA,IAAoB,CAAC,EAAE,UAAAC,QAA0C;AAC5E,MAAI,CAACA,EAAU,QAAO;AACtB,MAAIC,IAAgBD;AAEpB,SAAI,OAAOA,KAAa,aACtBC,IACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAOC,EAAM,aAAa;AAAA,MAEzB,UAAAJ;AAAA,IAAA;AAAA,EAAA,sBAMJK,GAAA,EAAO,QAAO,OAAM,KAAKD,EAAM,IAAI,IACjC,UAAA;AAAA,IAAAH;AAAA,IAED,gBAAAC,EAAC,OAAA,EAAI,OAAO,EAAE,YAAY,SAAA,GACxB,UAAA,gBAAAA,EAACI,GAAA,EAAa,OAAM,QAAA,CAAQ,EAAA,CAC9B;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"field_error.js","sources":["../../../../src/form/field/common/field_error.tsx"],"sourcesContent":["import React from 'react';\nimport { BodyText } from '../../../typography/index.js';\nimport { theme } from '../../../themes/index.js';\nimport { AdornmentMap } from './status_input/status_input.js';\nimport { HStack } from '../../../stacks/h_stack.js';\n\nexport interface FieldErrorMessageOwnProps {\n  children?: React.ReactNode | string;\n}\n\nexport const FieldErrorMessage = ({ children }: FieldErrorMessageOwnProps) => {\n  if (!children) return null;\n  let finalChildren = children;\n\n  if (typeof children === 'string') {\n    finalChildren = (\n      <BodyText\n        breakWords\n        size=\"sm\"\n        className=\"field-error-message\"\n        color={theme.statusColors.error}\n      >\n        {children}\n      </BodyText>\n    );\n  }\n\n  return (\n    <HStack hAlign=\"end\" gap={theme.gap.md}>\n      {finalChildren}\n      {/* This is a hack to get the adornment to align with the text */}\n      <div style={{ visibility: 'hidden' }}>\n        <AdornmentMap state=\"error\" />\n      </div>\n    </HStack>\n  );\n};\n"],"names":["FieldErrorMessage","children","finalChildren","jsx","BodyText","theme","HStack","AdornmentMap"],"mappings":";;;;;;;;;;;;;AAUO,MAAMA,IAAoB,CAAC,EAAE,UAAAC,QAA0C;AAC5E,MAAI,CAACA,EAAU,QAAO;AACtB,MAAIC,IAAgBD;AAEpB,SAAI,OAAOA,KAAa,aACtBC,IACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAOC,EAAM,aAAa;AAAA,MAEzB,UAAAJ;AAAA,IAAA;AAAA,EAAA,sBAMJK,GAAA,EAAO,QAAO,OAAM,KAAKD,EAAM,IAAI,IACjC,UAAA;AAAA,IAAAH;AAAA,IAED,gBAAAC,EAAC,OAAA,EAAI,OAAO,EAAE,YAAY,SAAA,GACxB,UAAA,gBAAAA,EAACI,GAAA,EAAa,OAAM,QAAA,CAAQ,EAAA,CAC9B;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1,11 +1,11 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import n from "react";
-import p from "classnames";
+import { clsx as p } from "clsx";
 import { VStack as f } from "../../../stacks/v_stack.js";
 import { FieldLabel as h } from "./field_label.js";
 import { FieldDescription as x } from "./field_description.js";
-const N = n.forwardRef(function({ label: i, description: o, className: t, id: r, required: d, ...a }, l) {
-  const s = `${r}-label`, c = `${r}-description`;
+const R = n.forwardRef(function({ label: i, description: o, className: t, id: r, required: d, ...l }, a) {
+  const c = `${r}-label`, s = `${r}-description`;
   return /* @__PURE__ */ m(
     f,
     {
@@ -13,16 +13,16 @@ const N = n.forwardRef(function({ label: i, description: o, className: t, id: r,
       hAlign: "start",
       gap: "4px",
       className: p("field-header", t),
-      ref: l,
-      ...a,
+      ref: a,
+      ...l,
       children: [
-        /* @__PURE__ */ e(h, { id: s, required: d, children: i }),
-        /* @__PURE__ */ e(x, { id: c, children: o })
+        /* @__PURE__ */ e(h, { id: c, required: d, children: i }),
+        /* @__PURE__ */ e(x, { id: s, children: o })
       ]
     }
   );
 });
 export {
-  N as FieldHeader
+  R as FieldHeader
 };
 //# sourceMappingURL=field_header.js.map

package/dist/form/field/common/field_header.js.map

@@ -1 +1 @@
-{"version":3,"file":"field_header.js","sources":["../../../../src/form/field/common/field_header.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport type { VStackOwnProps } from '../../../stacks/v_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport { FieldLabel } from './field_label.js';\nimport { FieldDescription } from './field_description.js';\n\nexport interface FieldHeaderOwnProps {\n  id: string;\n  label?: string | React.ReactNode;\n  description?: string | React.ReactNode;\n  required?: boolean;\n}\n\nexport type FieldHeaderProps = WithDetailedHTMLProps<FieldHeaderOwnProps, 'div'> &\n  VStackOwnProps;\n\nexport const FieldHeader = React.forwardRef(function FieldHeader(\n  { label, description, className, id, required, ...props }: FieldHeaderProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n  return (\n    <VStack\n      as=\"div\"\n      hAlign=\"start\"\n      gap=\"4px\"\n      className={classNames('field-header', className)}\n      ref={ref}\n      {...props}\n    >\n      <FieldLabel id={labelId} required={required}>\n        {label}\n      </FieldLabel>\n      <FieldDescription id={descriptionId}>{description}</FieldDescription>\n    </VStack>\n  );\n});\n"],"names":["FieldHeader","React","label","description","className","id","required","props","ref","labelId","descriptionId","jsxs","VStack","classNames","jsx","FieldLabel","FieldDescription"],"mappings":";;;;;;AAkBO,MAAMA,IAAcC,EAAM,WAAW,SAC1C,EAAE,OAAAC,GAAO,aAAAC,GAAa,WAAAC,GAAW,IAAAC,GAAI,UAAAC,GAAU,GAAGC,EAAA,GAClDC,GACA;AACA,QAAMC,IAAU,GAAGJ,CAAE,UACfK,IAAgB,GAAGL,CAAE;AAC3B,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAWC,EAAW,gBAAgBT,CAAS;AAAA,MAC/C,KAAAI;AAAA,MACC,GAAGD;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAO,EAACC,GAAA,EAAW,IAAIN,GAAS,UAAAH,GACtB,UAAAJ,GACH;AAAA,QACA,gBAAAY,EAACE,GAAA,EAAiB,IAAIN,GAAgB,UAAAP,EAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxD,CAAC;"}
+{"version":3,"file":"field_header.js","sources":["../../../../src/form/field/common/field_header.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport type { VStackOwnProps } from '../../../stacks/v_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport { FieldLabel } from './field_label.js';\nimport { FieldDescription } from './field_description.js';\n\nexport interface FieldHeaderOwnProps {\n  id: string;\n  label?: string | React.ReactNode;\n  description?: string | React.ReactNode;\n  required?: boolean;\n}\n\nexport type FieldHeaderProps = WithDetailedHTMLProps<FieldHeaderOwnProps, 'div'> &\n  VStackOwnProps;\n\nexport const FieldHeader = React.forwardRef(function FieldHeader(\n  { label, description, className, id, required, ...props }: FieldHeaderProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n  return (\n    <VStack\n      as=\"div\"\n      hAlign=\"start\"\n      gap=\"4px\"\n      className={clsx('field-header', className)}\n      ref={ref}\n      {...props}\n    >\n      <FieldLabel id={labelId} required={required}>\n        {label}\n      </FieldLabel>\n      <FieldDescription id={descriptionId}>{description}</FieldDescription>\n    </VStack>\n  );\n});\n"],"names":["FieldHeader","React","label","description","className","id","required","props","ref","labelId","descriptionId","jsxs","VStack","clsx","jsx","FieldLabel","FieldDescription"],"mappings":";;;;;;AAkBO,MAAMA,IAAcC,EAAM,WAAW,SAC1C,EAAE,OAAAC,GAAO,aAAAC,GAAa,WAAAC,GAAW,IAAAC,GAAI,UAAAC,GAAU,GAAGC,EAAA,GAClDC,GACA;AACA,QAAMC,IAAU,GAAGJ,CAAE,UACfK,IAAgB,GAAGL,CAAE;AAC3B,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAWC,EAAK,gBAAgBT,CAAS;AAAA,MACzC,KAAAI;AAAA,MACC,GAAGD;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAO,EAACC,GAAA,EAAW,IAAIN,GAAS,UAAAH,GACtB,UAAAJ,GACH;AAAA,QACA,gBAAAY,EAACE,GAAA,EAAiB,IAAIN,GAAgB,UAAAP,EAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxD,CAAC;"}

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

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as l } from "react/jsx-runtime";
 import { BodyText as t } from "../../../typography/body_text/body_text.js";
-import "classnames";
+import "clsx";
 import "../../../callout.module-D8ECmxpO.js";
 import "../../../caption.module-DDq0H4xZ.js";
 import "../../../footnote.module-DEyFuqOr.js";

package/dist/form/field/common/status_input/status_input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status_input.d.ts","sourceRoot":"","sources":["../../../../../src/form/field/common/status_input/status_input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AA6B1B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE,CAW9D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1E,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAClD,mBAAmB,GAAG,cAAc,EACpC,KAAK,CACN,CAAC;AAEF,eAAO,MAAM,gBAAgB,sGAyB3B,CAAC"}
+{"version":3,"file":"status_input.d.ts","sourceRoot":"","sources":["../../../../../src/form/field/common/status_input/status_input.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE,CAW9D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1E,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAClD,mBAAmB,GAAG,cAAc,EACpC,KAAK,CACN,CAAC;AAEF,eAAO,MAAM,gBAAgB,sGAyB3B,CAAC"}

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

@@ -7,25 +7,19 @@ import { Loading as g } from "../../../../feedback/loading/loading.js";
 import "../../../../feedback/progress/progress_bar.js";
 import "@tcn/state";
 import "../../../../stacks/v_stack.js";
-import o from "classnames";
-import '../../../../status_input.css';const A = "_field-error_6d015c9", h = "_field-status-input_c30d6fb", n = { "field-error": A, "field-status-input": h }, k = () => /* @__PURE__ */ r(f, { className: "field-lock", size: "lg" }), x = () => /* @__PURE__ */ r(g, { size: "20px", className: "field-loader" }), I = () => /* @__PURE__ */ r(
-  u,
-  {
-    className: o(n["field-error"], "field-error"),
-    size: "lg"
-  }
-), N = ({ state: e }) => {
+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 }) => {
   switch (e) {
     case "locked":
-      return /* @__PURE__ */ r(k, {});
+      return /* @__PURE__ */ r(h, {});
     case "loading":
-      return /* @__PURE__ */ r(x, {});
+      return /* @__PURE__ */ r(k, {});
     case "error":
       return /* @__PURE__ */ r(I, {});
     default:
       return null;
   }
-}, v = p.forwardRef(function({ children: s, state: t = "default", className: i, ...l }, d) {
+}, v = p.forwardRef(function({ children: i, state: t = "default", className: s, ...l }, d) {
   const a = t === "default" || t === "error";
   return /* @__PURE__ */ c(
     m,
@@ -35,7 +29,7 @@ import '../../../../status_input.css';const A = "_field-error_6d015c9", h = "_fi
       className: o(
         "field-status-input",
         n["field-status-input"],
-        i,
+        s,
         "field-status-input"
       ),
       vAlign: "center",
@@ -43,14 +37,14 @@ import '../../../../status_input.css';const A = "_field-error_6d015c9", h = "_fi
       gap: "4px",
       ...l,
       children: [
-        a && s,
-        /* @__PURE__ */ r(N, { state: t })
+        a && i,
+        /* @__PURE__ */ r(w, { state: t })
       ]
     }
   );
 });
 export {
-  N as AdornmentMap,
+  w as AdornmentMap,
   v as FieldStatusInput
 };
 //# sourceMappingURL=status_input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"status_input.js","sources":["../../../../../src/form/field/common/status_input/status_input.tsx"],"sourcesContent":["import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';\nimport { LockTwoIcon } from '@tcn/icons/lock_two_icon.js';\nimport { HStack } from '../../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';\nimport React from 'react';\nimport { Loading } from '../../../../feedback/index.js';\nimport classNames from 'classnames';\nimport styles from './status_input.module.css';\n\n/*\n TODO: I really want to make these themeable.\n The way we do that is simply put a div placeholder with\n a class that the theme can override. They can use svgs as \n backgrounds for icons. This would make it so the component\n library doesn't dictate the icon set used. \n*/\nconst LockedAdornment: React.FC = () => {\n  return <LockTwoIcon className=\"field-lock\" size=\"lg\" />;\n};\n\nconst LoadingAdornment: React.FC = () => {\n  return <Loading size=\"20px\" className=\"field-loader\" />;\n};\n\nconst ErroredAdornment: React.FC = () => {\n  return (\n    <AlertTriangleIcon\n      className={classNames(styles['field-error'], 'field-error')}\n      size=\"lg\"\n    />\n  );\n};\n\nexport const AdornmentMap: React.FC<{ state: StatusInputState }> = ({ state }) => {\n  switch (state) {\n    case 'locked':\n      return <LockedAdornment />;\n    case 'loading':\n      return <LoadingAdornment />;\n    case 'error':\n      return <ErroredAdornment />;\n    default:\n      return null;\n  }\n};\n\nexport type StatusInputState = 'locked' | 'loading' | 'error' | 'default';\nexport interface StatusInputOwnProps {\n  children: React.ReactNode;\n  state?: StatusInputState;\n}\n\nexport type StatusInputProps = WithDetailedHTMLProps<\n  StatusInputOwnProps & HStackOwnProps,\n  'div'\n>;\n\nexport const FieldStatusInput = React.forwardRef(function StatusInput(\n  { children: Control, state = 'default', className, ...props }: StatusInputProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const showControl = state === 'default' || state === 'error';\n\n  return (\n    <HStack\n      ref={ref}\n      data-state={state}\n      className={classNames(\n        'field-status-input',\n        styles['field-status-input'],\n        className,\n        'field-status-input'\n      )}\n      vAlign=\"center\"\n      hAlign=\"end\"\n      gap=\"4px\"\n      {...props}\n    >\n      {showControl && Control}\n      <AdornmentMap state={state} />\n    </HStack>\n  );\n});\n"],"names":["LockedAdornment","jsx","LockTwoIcon","LoadingAdornment","Loading","ErroredAdornment","AlertTriangleIcon","classNames","styles","AdornmentMap","state","FieldStatusInput","React","Control","className","props","ref","showControl","jsxs","HStack"],"mappings":";;;;;;;;;;wHAiBMA,IAA4B,MACzB,gBAAAC,EAACC,GAAA,EAAY,WAAU,cAAa,MAAK,MAAK,GAGjDC,IAA6B,MAC1B,gBAAAF,EAACG,GAAA,EAAQ,MAAK,QAAO,WAAU,gBAAe,GAGjDC,IAA6B,MAE/B,gBAAAJ;AAAA,EAACK;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,aAAa,GAAG,aAAa;AAAA,IAC1D,MAAK;AAAA,EAAA;AAAA,GAKEC,IAAsD,CAAC,EAAE,OAAAC,QAAY;AAChF,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,+BAAQV,GAAA,EAAgB;AAAA,IAC1B,KAAK;AACH,+BAAQG,GAAA,EAAiB;AAAA,IAC3B,KAAK;AACH,+BAAQE,GAAA,EAAiB;AAAA,IAC3B;AACE,aAAO;AAAA,EAAA;AAEb,GAaaM,IAAmBC,EAAM,WAAW,SAC/C,EAAE,UAAUC,GAAS,OAAAH,IAAQ,WAAW,WAAAI,GAAW,GAAGC,EAAA,GACtDC,GACA;AACA,QAAMC,IAAcP,MAAU,aAAaA,MAAU;AAErD,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,cAAYN;AAAA,MACZ,WAAWH;AAAA,QACT;AAAA,QACAC,EAAO,oBAAoB;AAAA,QAC3BM;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAE,KAAeJ;AAAA,QAChB,gBAAAZ,EAACQ,KAAa,OAAAC,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC,CAAC;"}
+{"version":3,"file":"status_input.js","sources":["../../../../../src/form/field/common/status_input/status_input.tsx"],"sourcesContent":["import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';\nimport { LockTwoIcon } from '@tcn/icons/lock_two_icon.js';\nimport { HStack } from '../../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';\nimport React from 'react';\nimport { Loading } from '../../../../feedback/index.js';\nimport { clsx } from 'clsx';\nimport styles from './status_input.module.css';\n\n/*\n TODO: I really want to make these themeable.\n The way we do that is simply put a div placeholder with\n a class that the theme can override. They can use svgs as \n backgrounds for icons. This would make it so the component\n library doesn't dictate the icon set used. \n*/\nconst LockedAdornment: React.FC = () => {\n  return <LockTwoIcon className=\"field-lock\" size=\"lg\" />;\n};\n\nconst LoadingAdornment: React.FC = () => {\n  return <Loading size=\"20px\" className=\"field-loader\" />;\n};\n\nconst ErroredAdornment: React.FC = () => {\n  return (\n    <AlertTriangleIcon className={clsx(styles['field-error'], 'field-error')} size=\"lg\" />\n  );\n};\n\nexport const AdornmentMap: React.FC<{ state: StatusInputState }> = ({ state }) => {\n  switch (state) {\n    case 'locked':\n      return <LockedAdornment />;\n    case 'loading':\n      return <LoadingAdornment />;\n    case 'error':\n      return <ErroredAdornment />;\n    default:\n      return null;\n  }\n};\n\nexport type StatusInputState = 'locked' | 'loading' | 'error' | 'default';\nexport interface StatusInputOwnProps {\n  children: React.ReactNode;\n  state?: StatusInputState;\n}\n\nexport type StatusInputProps = WithDetailedHTMLProps<\n  StatusInputOwnProps & HStackOwnProps,\n  'div'\n>;\n\nexport const FieldStatusInput = React.forwardRef(function StatusInput(\n  { children: Control, state = 'default', className, ...props }: StatusInputProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const showControl = state === 'default' || state === 'error';\n\n  return (\n    <HStack\n      ref={ref}\n      data-state={state}\n      className={clsx(\n        'field-status-input',\n        styles['field-status-input'],\n        className,\n        'field-status-input'\n      )}\n      vAlign=\"center\"\n      hAlign=\"end\"\n      gap=\"4px\"\n      {...props}\n    >\n      {showControl && Control}\n      <AdornmentMap state={state} />\n    </HStack>\n  );\n});\n"],"names":["LockedAdornment","jsx","LockTwoIcon","LoadingAdornment","Loading","ErroredAdornment","AlertTriangleIcon","clsx","styles","AdornmentMap","state","FieldStatusInput","React","Control","className","props","ref","showControl","jsxs","HStack"],"mappings":";;;;;;;;;;wHAiBMA,IAA4B,MACzB,gBAAAC,EAACC,GAAA,EAAY,WAAU,cAAa,MAAK,MAAK,GAGjDC,IAA6B,MAC1B,gBAAAF,EAACG,GAAA,EAAQ,MAAK,QAAO,WAAU,gBAAe,GAGjDC,IAA6B,MAE/B,gBAAAJ,EAACK,GAAA,EAAkB,WAAWC,EAAKC,EAAO,aAAa,GAAG,aAAa,GAAG,MAAK,KAAA,CAAK,GAI3EC,IAAsD,CAAC,EAAE,OAAAC,QAAY;AAChF,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,+BAAQV,GAAA,EAAgB;AAAA,IAC1B,KAAK;AACH,+BAAQG,GAAA,EAAiB;AAAA,IAC3B,KAAK;AACH,+BAAQE,GAAA,EAAiB;AAAA,IAC3B;AACE,aAAO;AAAA,EAAA;AAEb,GAaaM,IAAmBC,EAAM,WAAW,SAC/C,EAAE,UAAUC,GAAS,OAAAH,IAAQ,WAAW,WAAAI,GAAW,GAAGC,EAAA,GACtDC,GACA;AACA,QAAMC,IAAcP,MAAU,aAAaA,MAAU;AAErD,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,cAAYN;AAAA,MACZ,WAAWH;AAAA,QACT;AAAA,QACAC,EAAO,oBAAoB;AAAA,QAC3BM;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAE,KAAeJ;AAAA,QAChB,gBAAAZ,EAACQ,KAAa,OAAAC,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC,CAAC;"}

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

@@ -1,6 +1,6 @@
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import { jsxs as F, jsx as r } from "react/jsx-runtime";
 import { HStack as I } from "../../../stacks/h_stack.js";
-import H from "classnames";
+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";
@@ -12,7 +12,7 @@ const B = g.forwardRef(function({
   description: s,
   errorMessage: d,
   children: n,
-  labelWidth: a = "40%",
+  labelWidth: l = "40%",
   locked: t = !1,
   loading: e = !1,
   className: f,
@@ -20,8 +20,8 @@ const B = g.forwardRef(function({
   required: m,
   ...h
 }, p) {
-  const [i] = y(() => c || `h-field-${A++}`), u = `${i}-label`, b = `${i}-description`, l = !!d, F = t ? "locked" : e ? "loading" : l ? "error" : "default";
-  return /* @__PURE__ */ x(
+  const [i] = y(() => c || `h-field-${A++}`), u = `${i}-label`, b = `${i}-description`, a = !!d, x = t ? "locked" : e ? "loading" : a ? "error" : "default";
+  return /* @__PURE__ */ F(
     I,
     {
       ref: p,
@@ -29,7 +29,7 @@ const B = g.forwardRef(function({
       "aria-labelledby": u,
       "aria-describedby": b,
       "data-locked": t,
-      "data-error": l,
+      "data-error": a,
       "data-loading": e,
       className: H("base-field", w["h-field"], "h-field", f),
       vAlign: "start",
@@ -41,15 +41,15 @@ const B = g.forwardRef(function({
         /* @__PURE__ */ r(
           S,
           {
-            minWidth: a,
-            width: a,
+            minWidth: l,
+            width: l,
             id: i,
             label: o,
             description: s,
             required: m
           }
         ),
-        /* @__PURE__ */ r($, { errorMessage: d, loading: e, locked: t, children: /* @__PURE__ */ r(j, { state: F, children: n }) })
+        /* @__PURE__ */ r($, { errorMessage: d, loading: e, locked: t, children: /* @__PURE__ */ r(j, { state: x, children: n }) })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"h_field.js","sources":["../../../../src/form/field/h_field/h_field.tsx"],"sourcesContent":["import { HStack } from '../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport classNames from 'classnames';\nimport React, { useState } from 'react';\nimport styles from './h_field.module.css';\nimport type { FieldInput } from '../common/types.js';\nimport { FieldHeader } from '../common/field_header.js';\nimport { FieldControl } from '../common/field_control/field_control.js';\nimport { FieldStatusInput } from '../common/status_input/status_input.js';\n\nexport interface HFieldOwnProps extends FieldInput {\n  labelWidth?: string;\n  children: React.ReactNode;\n}\nexport type HFieldProps = WithDetailedHTMLProps<HFieldOwnProps, 'div'> & HStackOwnProps;\n\nlet idIndex = 0;\nexport const HField = React.forwardRef(function HField(\n  {\n    label,\n    description,\n    errorMessage,\n    children: Control,\n    labelWidth = '40%',\n    locked = false,\n    loading = false,\n    className,\n    id,\n    required,\n    ...props\n  }: HFieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [finalId] = useState(() => id || `h-field-${idIndex++}`);\n  const labelId = `${finalId}-label`;\n  const descriptionId = `${finalId}-description`;\n  const hasError = errorMessage ? true : false;\n  const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';\n\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      data-locked={locked}\n      data-error={hasError}\n      data-loading={loading}\n      className={classNames('base-field', styles['h-field'], 'h-field', className)}\n      vAlign=\"start\"\n      hAlign=\"start\"\n      height=\"auto\"\n      gap=\"4px\"\n      {...props}\n    >\n      <FieldHeader\n        minWidth={labelWidth}\n        width={labelWidth}\n        id={finalId}\n        label={label}\n        description={description}\n        required={required}\n      />\n      <FieldControl errorMessage={errorMessage} loading={loading} locked={locked}>\n        <FieldStatusInput state={state}>{Control}</FieldStatusInput>\n      </FieldControl>\n    </HStack>\n  );\n});\n"],"names":["idIndex","HField","React","label","description","errorMessage","Control","labelWidth","locked","loading","className","id","required","props","ref","finalId","useState","labelId","descriptionId","hasError","state","jsxs","HStack","classNames","styles","jsx","FieldHeader","FieldControl","FieldStatusInput"],"mappings":";;;;;;;;AAiBA,IAAIA,IAAU;AACP,MAAMC,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAUC;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,CAAO,IAAIC,EAAS,MAAML,KAAM,WAAWX,GAAS,EAAE,GACvDiB,IAAU,GAAGF,CAAO,UACpBG,IAAgB,GAAGH,CAAO,gBAC1BI,IAAW,EAAAd,GACXe,IAAQZ,IAAS,WAAWC,IAAU,YAAYU,IAAW,UAAU;AAE7E,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,mBAAiBG;AAAA,MACjB,oBAAkBC;AAAA,MAClB,eAAaV;AAAA,MACb,cAAYW;AAAA,MACZ,gBAAcV;AAAA,MACd,WAAWc,EAAW,cAAcC,EAAO,SAAS,GAAG,WAAWd,CAAS;AAAA,MAC3E,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAUnB;AAAA,YACV,OAAOA;AAAA,YACP,IAAIQ;AAAA,YACJ,OAAAZ;AAAA,YACA,aAAAC;AAAA,YACA,UAAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAa,EAACE,KAAa,cAAAtB,GAA4B,SAAAI,GAAkB,QAAAD,GAC1D,UAAA,gBAAAiB,EAACG,GAAA,EAAiB,OAAAR,GAAe,UAAAd,EAAA,CAAQ,EAAA,CAC3C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"h_field.js","sources":["../../../../src/form/field/h_field/h_field.tsx"],"sourcesContent":["import { HStack } from '../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport React, { useState } from 'react';\nimport styles from './h_field.module.css';\nimport type { FieldInput } from '../common/types.js';\nimport { FieldHeader } from '../common/field_header.js';\nimport { FieldControl } from '../common/field_control/field_control.js';\nimport { FieldStatusInput } from '../common/status_input/status_input.js';\n\nexport interface HFieldOwnProps extends FieldInput {\n  labelWidth?: string;\n  children: React.ReactNode;\n}\nexport type HFieldProps = WithDetailedHTMLProps<HFieldOwnProps, 'div'> & HStackOwnProps;\n\nlet idIndex = 0;\nexport const HField = React.forwardRef(function HField(\n  {\n    label,\n    description,\n    errorMessage,\n    children: Control,\n    labelWidth = '40%',\n    locked = false,\n    loading = false,\n    className,\n    id,\n    required,\n    ...props\n  }: HFieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [finalId] = useState(() => id || `h-field-${idIndex++}`);\n  const labelId = `${finalId}-label`;\n  const descriptionId = `${finalId}-description`;\n  const hasError = errorMessage ? true : false;\n  const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';\n\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      data-locked={locked}\n      data-error={hasError}\n      data-loading={loading}\n      className={clsx('base-field', styles['h-field'], 'h-field', className)}\n      vAlign=\"start\"\n      hAlign=\"start\"\n      height=\"auto\"\n      gap=\"4px\"\n      {...props}\n    >\n      <FieldHeader\n        minWidth={labelWidth}\n        width={labelWidth}\n        id={finalId}\n        label={label}\n        description={description}\n        required={required}\n      />\n      <FieldControl errorMessage={errorMessage} loading={loading} locked={locked}>\n        <FieldStatusInput state={state}>{Control}</FieldStatusInput>\n      </FieldControl>\n    </HStack>\n  );\n});\n"],"names":["idIndex","HField","React","label","description","errorMessage","Control","labelWidth","locked","loading","className","id","required","props","ref","finalId","useState","labelId","descriptionId","hasError","state","jsxs","HStack","clsx","styles","jsx","FieldHeader","FieldControl","FieldStatusInput"],"mappings":";;;;;;;;AAiBA,IAAIA,IAAU;AACP,MAAMC,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAUC;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,CAAO,IAAIC,EAAS,MAAML,KAAM,WAAWX,GAAS,EAAE,GACvDiB,IAAU,GAAGF,CAAO,UACpBG,IAAgB,GAAGH,CAAO,gBAC1BI,IAAW,EAAAd,GACXe,IAAQZ,IAAS,WAAWC,IAAU,YAAYU,IAAW,UAAU;AAE7E,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,mBAAiBG;AAAA,MACjB,oBAAkBC;AAAA,MAClB,eAAaV;AAAA,MACb,cAAYW;AAAA,MACZ,gBAAcV;AAAA,MACd,WAAWc,EAAK,cAAcC,EAAO,SAAS,GAAG,WAAWd,CAAS;AAAA,MACrE,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAUnB;AAAA,YACV,OAAOA;AAAA,YACP,IAAIQ;AAAA,YACJ,OAAAZ;AAAA,YACA,aAAAC;AAAA,YACA,UAAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAa,EAACE,KAAa,cAAAtB,GAA4B,SAAAI,GAAkB,QAAAD,GAC1D,UAAA,gBAAAiB,EAACG,GAAA,EAAiB,OAAAR,GAAe,UAAAd,EAAA,CAAQ,EAAA,CAC3C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}