@drivy/cobalt 2.14.0 → 2.16.0

package/components/Form/CheckablePill.js

@@ -1,29 +1,24 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import { Icon } from '../Icon/index.js';
 import { withFieldLabelAndHint } from './field.js';
 
 const CheckablePill = ({ type, icon, value, children, defaultChecked, status, ...InputProps }) => {
-    return (React.createElement("span", { className: cx("cobalt-CheckablePillField", {
+    return (jsx("span", { className: cx("cobalt-CheckablePillField", {
             "cobalt-CheckablePillField--error": status === "error",
             "cobalt-CheckablePillField--with-icon": icon,
-        }) },
-        React.createElement("label", { className: "cobalt-CheckablePillField__LabelWrapper" },
-            React.createElement("input", { ...InputProps, type: type, className: "cobalt-CheckablePillField__Input", value: value, defaultChecked: defaultChecked }),
-            React.createElement("span", { className: "cobalt-CheckablePillField__Label" },
-                icon && React.createElement(Icon, { source: icon }),
-                children))));
+        }), children: jsxs("label", { className: "cobalt-CheckablePillField__LabelWrapper", children: [jsx("input", { ...InputProps, type: type, className: "cobalt-CheckablePillField__Input", value: value, defaultChecked: defaultChecked }), jsxs("span", { className: "cobalt-CheckablePillField__Label", children: [icon && jsx(Icon, { source: icon }), children] })] }) }));
 };
 const CheckboxPill = ({ ...props }) => {
-    return React.createElement(CheckablePill, { ...props, type: "checkbox" });
+    return jsx(CheckablePill, { ...props, type: "checkbox" });
 };
 CheckboxPill.displayName = "CheckboxPill";
 const RadioPill = ({ ...props }) => {
-    return React.createElement(CheckablePill, { ...props, type: "radio" });
+    return jsx(CheckablePill, { ...props, type: "radio" });
 };
 RadioPill.displayName = "RadioPill";
 const _CheckablePillsGroup = ({ children }) => {
-    return (React.createElement("div", { className: "cobalt-CheckablePillsGroup" }, typeof children === "function" ? children() : children));
+    return (jsx("div", { className: "cobalt-CheckablePillsGroup", children: typeof children === "function" ? children() : children }));
 };
 const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup);
 CheckablePillsGroup.displayName = "CheckablePillsGroup";

package/components/Form/CheckablePill.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckablePill.js","sources":["../../../src/components/Form/CheckablePill.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon, IconSources } from \"../Icon\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  type?: \"checkbox\" | \"radio\"\n  icon?: IconSources\n  value: string\n  children: React.ReactNode\n  defaultChecked?: boolean\n  name: string\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nconst CheckablePill = ({\n  type,\n  icon,\n  value,\n  children,\n  defaultChecked,\n  status,\n  ...InputProps\n}: Props) => {\n  return (\n    <span\n      className={classNames(\"cobalt-CheckablePillField\", {\n        \"cobalt-CheckablePillField--error\": status === \"error\",\n        \"cobalt-CheckablePillField--with-icon\": icon,\n      })}\n    >\n      <label className=\"cobalt-CheckablePillField__LabelWrapper\">\n        <input\n          {...InputProps}\n          type={type}\n          className=\"cobalt-CheckablePillField__Input\"\n          value={value}\n          defaultChecked={defaultChecked}\n        />\n        <span className=\"cobalt-CheckablePillField__Label\">\n          {icon && <Icon source={icon} />}\n          {children}\n        </span>\n      </label>\n    </span>\n  )\n}\n\nexport const CheckboxPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"checkbox\" />\n}\nCheckboxPill.displayName = \"CheckboxPill\"\n\nexport const RadioPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"radio\" />\n}\nRadioPill.displayName = \"RadioPill\"\n\ninterface CheckablePillsGroupProps {\n  children: React.ReactNode | (() => React.ReactNode)\n}\n\nconst _CheckablePillsGroup = ({ children }: CheckablePillsGroupProps) => {\n  return (\n    <div className=\"cobalt-CheckablePillsGroup\">\n      {typeof children === \"function\" ? children() : children}\n    </div>\n  )\n}\n\nexport const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup)\nCheckablePillsGroup.displayName = \"CheckablePillsGroup\"\n"],"names":["classNames"],"mappings":";;;;;AAgBA,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,MAAM,EACN,GAAG,UAAU,EACP,KAAI;AACV,IAAA,QACE,KACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,2BAA2B,EAAE;YACjD,kCAAkC,EAAE,MAAM,KAAK,OAAO;AACtD,YAAA,sCAAsC,EAAE,IAAI;SAC7C,CAAC,EAAA;QAEF,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,yCAAyC,EAAA;AACxD,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,UAAU,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,CAAA;YACF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;AAC/C,gBAAA,IAAI,IAAI,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,MAAM,EAAE,IAAI,EAAI,CAAA;AAC9B,gBAAA,QAAQ,CACJ,CACD,CACH,EACR;AACH,CAAC,CAAA;AAEY,MAAA,YAAY,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;IAClD,OAAO,KAAA,CAAA,aAAA,CAAC,aAAa,EAAK,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,UAAU,EAAA,CAAG,CAAA;AACrD,EAAC;AACD,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAE5B,MAAA,SAAS,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;IAC/C,OAAO,KAAA,CAAA,aAAA,CAAC,aAAa,EAAK,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,OAAO,EAAA,CAAG,CAAA;AAClD,EAAC;AACD,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAMnC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACtE,QACE,6BAAK,SAAS,EAAC,4BAA4B,EACxC,EAAA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,CACnD,EACP;AACH,CAAC,CAAA;MAEY,mBAAmB,GAAG,qBAAqB,CAAC,oBAAoB,EAAC;AAC9E,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"CheckablePill.js","sources":["../../../src/components/Form/CheckablePill.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport type React from \"react\"\nimport { Icon, type IconSources } from \"../Icon\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport type { FormElement } from \"./form\"\n\ntype Props = {\n  type?: \"checkbox\" | \"radio\"\n  icon?: IconSources\n  value: string\n  children: React.ReactNode\n  defaultChecked?: boolean\n  name: string\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nconst CheckablePill = ({\n  type,\n  icon,\n  value,\n  children,\n  defaultChecked,\n  status,\n  ...InputProps\n}: Props) => {\n  return (\n    <span\n      className={classNames(\"cobalt-CheckablePillField\", {\n        \"cobalt-CheckablePillField--error\": status === \"error\",\n        \"cobalt-CheckablePillField--with-icon\": icon,\n      })}\n    >\n      <label className=\"cobalt-CheckablePillField__LabelWrapper\">\n        <input\n          {...InputProps}\n          type={type}\n          className=\"cobalt-CheckablePillField__Input\"\n          value={value}\n          defaultChecked={defaultChecked}\n        />\n        <span className=\"cobalt-CheckablePillField__Label\">\n          {icon && <Icon source={icon} />}\n          {children}\n        </span>\n      </label>\n    </span>\n  )\n}\n\nexport const CheckboxPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"checkbox\" />\n}\nCheckboxPill.displayName = \"CheckboxPill\"\n\nexport const RadioPill = ({ ...props }: Props) => {\n  return <CheckablePill {...props} type=\"radio\" />\n}\nRadioPill.displayName = \"RadioPill\"\n\ninterface CheckablePillsGroupProps {\n  children: React.ReactNode | (() => React.ReactNode)\n}\n\nconst _CheckablePillsGroup = ({ children }: CheckablePillsGroupProps) => {\n  return (\n    <div className=\"cobalt-CheckablePillsGroup\">\n      {typeof children === \"function\" ? children() : children}\n    </div>\n  )\n}\n\nexport const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup)\nCheckablePillsGroup.displayName = \"CheckablePillsGroup\"\n"],"names":["_jsx","classNames","_jsxs"],"mappings":";;;;;AAgBA,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,MAAM,EACN,GAAG,UAAU,EACP,KAAI;AACV,IAAA,QACEA,GACE,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEC,EAAU,CAAC,2BAA2B,EAAE;YACjD,kCAAkC,EAAE,MAAM,KAAK,OAAO;AACtD,YAAA,sCAAsC,EAAE,IAAI;SAC7C,CAAC,EAAA,QAAA,EAEFC,gBAAO,SAAS,EAAC,yCAAyC,EACxD,QAAA,EAAA,CAAAF,GAAA,CAAA,OAAA,EAAA,EAAA,GACM,UAAU,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,CAAA,EACFE,eAAM,SAAS,EAAC,kCAAkC,EAC/C,QAAA,EAAA,CAAA,IAAI,IAAIF,GAAC,CAAA,IAAI,IAAC,MAAM,EAAE,IAAI,EAAI,CAAA,EAC9B,QAAQ,CACJ,EAAA,CAAA,CAAA,EAAA,CACD,EACH,CAAA,EACR;AACH,CAAC,CAAA;AAEY,MAAA,YAAY,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;IAClD,OAAOA,GAAA,CAAC,aAAa,EAAK,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,UAAU,EAAA,CAAG,CAAA;AACrD,EAAC;AACD,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAE5B,MAAA,SAAS,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;IAC/C,OAAOA,GAAA,CAAC,aAAa,EAAK,EAAA,GAAA,KAAK,EAAE,IAAI,EAAC,OAAO,EAAA,CAAG,CAAA;AAClD,EAAC;AACD,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAMnC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACtE,QACEA,aAAK,SAAS,EAAC,4BAA4B,EACxC,QAAA,EAAA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,EACnD,CAAA,EACP;AACH,CAAC,CAAA;MAEY,mBAAmB,GAAG,qBAAqB,CAAC,oBAAoB,EAAC;AAC9E,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/components/Form/Checkmark.js

@@ -1,30 +1,24 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
-import { Hint } from './Hint.js';
 import { withFieldLabelAndHint } from './field.js';
+import { Hint } from './Hint.js';
 
 const Checkmark = ({ label, status, hint, ...inputProps }) => {
-    return (React.createElement("div", { className: cx("cobalt-CheckmarkField", {
+    return (jsxs("div", { className: cx("cobalt-CheckmarkField", {
             "cobalt-CheckmarkField--success": status === "success",
             "cobalt-CheckmarkField--error": status === "error",
-        }) },
-        React.createElement("label", { className: "cobalt-CheckmarkField__LabelWrapper" },
-            React.createElement("input", { ...inputProps, className: "cobalt-CheckmarkField__Input" }),
-            React.createElement("span", { className: "cobalt-CheckmarkField__Checkmark" }),
-            React.createElement("span", { className: "cobalt-CheckmarkField__Label" }, label)),
-        hint && (React.createElement(Hint, { status: status },
-            React.createElement("span", { dangerouslySetInnerHTML: { __html: hint } })))));
+        }), children: [jsxs("label", { className: "cobalt-CheckmarkField__LabelWrapper", children: [jsx("input", { ...inputProps, className: "cobalt-CheckmarkField__Input" }), jsx("span", { className: "cobalt-CheckmarkField__Checkmark" }), jsx("span", { className: "cobalt-CheckmarkField__Label", children: label })] }), hint && (jsx(Hint, { status: status, children: jsx("span", { dangerouslySetInnerHTML: { __html: hint } }) }))] }));
 };
 const Checkbox = ({ label, ...props }) => {
-    return React.createElement(Checkmark, { ...props, label: label, type: "checkbox" });
+    return jsx(Checkmark, { ...props, label: label, type: "checkbox" });
 };
 Checkbox.displayName = "CobaltCheckbox";
 const Radio = ({ label, ...props }) => {
-    return React.createElement(Checkmark, { ...props, label: label, type: "radio" });
+    return jsx(Checkmark, { ...props, label: label, type: "radio" });
 };
 Radio.displayName = "CobaltRadio";
 const ChoiceList = ({ children }) => {
-    return (React.createElement("div", { className: "cobalt-ChoiceList" }, typeof children === "function" ? children() : children));
+    return (jsx("div", { className: "cobalt-ChoiceList", children: typeof children === "function" ? children() : children }));
 };
 const wrappedChoiceList = withFieldLabelAndHint(ChoiceList);
 wrappedChoiceList.displayName = "ChoiceList";

package/components/Form/Checkmark.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkmark.js","sources":["../../../src/components/Form/Checkmark.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Hint } from \"./Hint\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  label: string | JSX.Element\n  type?: \"checkbox\" | \"radio\"\n  hint?: string\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nconst Checkmark = ({ label, status, hint, ...inputProps }: Props) => {\n  return (\n    <div\n      className={classNames(\"cobalt-CheckmarkField\", {\n        \"cobalt-CheckmarkField--success\": status === \"success\",\n        \"cobalt-CheckmarkField--error\": status === \"error\",\n      })}\n    >\n      <label className=\"cobalt-CheckmarkField__LabelWrapper\">\n        <input {...inputProps} className=\"cobalt-CheckmarkField__Input\" />\n        <span className=\"cobalt-CheckmarkField__Checkmark\" />\n        <span className=\"cobalt-CheckmarkField__Label\">{label}</span>\n      </label>\n      {hint && (\n        <Hint status={status}>\n          <span dangerouslySetInnerHTML={{ __html: hint }} />\n        </Hint>\n      )}\n    </div>\n  )\n}\n\nexport const Checkbox = ({ label, ...props }: Props) => {\n  return <Checkmark {...props} label={label} type=\"checkbox\" />\n}\nCheckbox.displayName = \"CobaltCheckbox\"\n\nexport const Radio = ({ label, ...props }: Props) => {\n  return <Checkmark {...props} label={label} type=\"radio\" />\n}\nRadio.displayName = \"CobaltRadio\"\n\ntype ChoiceListProps = {\n  children: React.ReactNode | (() => React.ReactNode)\n}\n\nconst ChoiceList = ({ children }: ChoiceListProps) => {\n  return (\n    <div className=\"cobalt-ChoiceList\">\n      {typeof children === \"function\" ? children() : children}\n    </div>\n  )\n}\n\nconst wrappedChoiceList = withFieldLabelAndHint(ChoiceList)\nwrappedChoiceList.displayName = \"ChoiceList\"\n\nexport { wrappedChoiceList as ChoiceList }\n"],"names":["classNames"],"mappings":";;;;;AAaA,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAS,KAAI;AAClE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,uBAAuB,EAAE;YAC7C,gCAAgC,EAAE,MAAM,KAAK,SAAS;YACtD,8BAA8B,EAAE,MAAM,KAAK,OAAO;SACnD,CAAC,EAAA;QAEF,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,qCAAqC,EAAA;AACpD,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAW,UAAU,EAAE,SAAS,EAAC,8BAA8B,EAAG,CAAA;YAClE,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAG,CAAA;AACrD,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8BAA8B,EAAE,EAAA,KAAK,CAAQ,CACvD;AACP,QAAA,IAAI,KACH,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,MAAM,EAAE,MAAM,EAAA;AAClB,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAAA,CAAI,CAC9C,CACR,CACG,EACP;AACH,CAAC,CAAA;AAEM,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAS,KAAI;AACrD,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,SAAS,EAAK,EAAA,GAAA,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,UAAU,GAAG,CAAA;AAC/D,EAAC;AACD,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAEhC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAS,KAAI;AAClD,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,SAAS,EAAK,EAAA,GAAA,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,GAAG,CAAA;AAC5D,EAAC;AACD,KAAK,CAAC,WAAW,GAAG,aAAa,CAAA;AAMjC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAmB,KAAI;IACnD,QACE,6BAAK,SAAS,EAAC,mBAAmB,EAC/B,EAAA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,CACnD,EACP;AACH,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,EAAC;AAC3D,iBAAiB,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"Checkmark.js","sources":["../../../src/components/Form/Checkmark.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport type React from \"react\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport type { FormElement } from \"./form\"\nimport { Hint } from \"./Hint\"\n\ntype Props = {\n  label: string | JSX.Element\n  type?: \"checkbox\" | \"radio\"\n  hint?: string\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nconst Checkmark = ({ label, status, hint, ...inputProps }: Props) => {\n  return (\n    <div\n      className={classNames(\"cobalt-CheckmarkField\", {\n        \"cobalt-CheckmarkField--success\": status === \"success\",\n        \"cobalt-CheckmarkField--error\": status === \"error\",\n      })}\n    >\n      <label className=\"cobalt-CheckmarkField__LabelWrapper\">\n        <input {...inputProps} className=\"cobalt-CheckmarkField__Input\" />\n        <span className=\"cobalt-CheckmarkField__Checkmark\" />\n        <span className=\"cobalt-CheckmarkField__Label\">{label}</span>\n      </label>\n      {hint && (\n        <Hint status={status}>\n          {/** biome-ignore lint/security/noDangerouslySetInnerHtml: Allow to pass content from the HAML template*/}\n          <span dangerouslySetInnerHTML={{ __html: hint }} />\n        </Hint>\n      )}\n    </div>\n  )\n}\n\nexport const Checkbox = ({ label, ...props }: Props) => {\n  return <Checkmark {...props} label={label} type=\"checkbox\" />\n}\nCheckbox.displayName = \"CobaltCheckbox\"\n\nexport const Radio = ({ label, ...props }: Props) => {\n  return <Checkmark {...props} label={label} type=\"radio\" />\n}\nRadio.displayName = \"CobaltRadio\"\n\ntype ChoiceListProps = {\n  children: React.ReactNode | (() => React.ReactNode)\n}\n\nconst ChoiceList = ({ children }: ChoiceListProps) => {\n  return (\n    <div className=\"cobalt-ChoiceList\">\n      {typeof children === \"function\" ? children() : children}\n    </div>\n  )\n}\n\nconst wrappedChoiceList = withFieldLabelAndHint(ChoiceList)\nwrappedChoiceList.displayName = \"ChoiceList\"\n\nexport { wrappedChoiceList as ChoiceList }\n"],"names":["_jsxs","classNames","_jsx"],"mappings":";;;;;AAaA,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAS,KAAI;AAClE,IAAA,QACEA,IACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,EAAU,CAAC,uBAAuB,EAAE;YAC7C,gCAAgC,EAAE,MAAM,KAAK,SAAS;YACtD,8BAA8B,EAAE,MAAM,KAAK,OAAO;SACnD,CAAC,EAAA,QAAA,EAAA,CAEFD,IAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,qCAAqC,aACpDE,GAAW,CAAA,OAAA,EAAA,EAAA,GAAA,UAAU,EAAE,SAAS,EAAC,8BAA8B,GAAG,EAClEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,CAAG,EACrDA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAE,QAAA,EAAA,KAAK,GAAQ,CACvD,EAAA,CAAA,EACP,IAAI,KACHA,GAAA,CAAC,IAAI,EAAC,EAAA,MAAM,EAAE,MAAM,EAElB,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,EAC9C,CAAA,CACR,CACG,EAAA,CAAA,EACP;AACH,CAAC,CAAA;AAEM,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAS,KAAI;AACrD,IAAA,OAAOA,GAAC,CAAA,SAAS,EAAK,EAAA,GAAA,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,UAAU,GAAG,CAAA;AAC/D,EAAC;AACD,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAEhC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAS,KAAI;AAClD,IAAA,OAAOA,GAAC,CAAA,SAAS,EAAK,EAAA,GAAA,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,GAAG,CAAA;AAC5D,EAAC;AACD,KAAK,CAAC,WAAW,GAAG,aAAa,CAAA;AAMjC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAmB,KAAI;IACnD,QACEA,aAAK,SAAS,EAAC,mBAAmB,EAC/B,QAAA,EAAA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,EAAE,GAAG,QAAQ,EACnD,CAAA,EACP;AACH,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,UAAU,EAAC;AAC3D,iBAAiB,CAAC,WAAW,GAAG,YAAY;;;;"}

package/components/Form/ComposedField.js

@@ -1,14 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { withFieldLabelAndHint } from './field.js';
 
 const ComposedFormField = ({ id, children }) => {
-    return (React.createElement("div", { className: "cobalt-ComposedFormField" }, React.Children.toArray(children).map((child, index) => {
-        return index === 0
-            ? React.cloneElement(child, {
-                id,
-            })
-            : child;
-    })));
+    return (jsx("div", { className: "cobalt-ComposedFormField", children: React.Children.toArray(children).map((child, index) => {
+            if (index === 0 && React.isValidElement(child)) {
+                return React.cloneElement(child, { id });
+            }
+            return child;
+        }) }));
 };
 const wrappedComponent = withFieldLabelAndHint(ComposedFormField);
 wrappedComponent.displayName = "ComposedField";

package/components/Form/ComposedField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposedField.js","sources":["../../../src/components/Form/ComposedField.tsx"],"sourcesContent":["import React from \"react\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport { FormElement } from \"./form\"\n\ntype Props = {\n  id?: string\n  children: React.ReactNode\n} & FormElement\n\nconst ComposedFormField = ({ id, children }: Props) => {\n  return (\n    <div className=\"cobalt-ComposedFormField\">\n      {React.Children.toArray(children).map((child, index) => {\n        return index === 0\n          ? React.cloneElement(child as React.ComponentElement<any, any>, {\n              id,\n            })\n          : child\n      })}\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(ComposedFormField)\nwrappedComponent.displayName = \"ComposedField\"\n\nexport { wrappedComponent as ComposedField }\n"],"names":[],"mappings":";;;AASA,MAAM,iBAAiB,GAAG,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAS,KAAI;IACpD,QACE,6BAAK,SAAS,EAAC,0BAA0B,EACtC,EAAA,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;QACrD,OAAO,KAAK,KAAK,CAAC;AAChB,cAAE,KAAK,CAAC,YAAY,CAAC,KAAyC,EAAE;gBAC5D,EAAE;aACH,CAAC;cACF,KAAK,CAAA;KACV,CAAC,CACE,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,iBAAiB,EAAC;AACjE,gBAAgB,CAAC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"ComposedField.js","sources":["../../../src/components/Form/ComposedField.tsx"],"sourcesContent":["import React from \"react\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport type { FormElement } from \"./form\"\n\ntype Props = {\n  id?: string\n  children: React.ReactNode\n} & FormElement\n\nconst ComposedFormField = ({ id, children }: Props) => {\n  return (\n    <div className=\"cobalt-ComposedFormField\">\n      {React.Children.toArray(children).map((child, index) => {\n        if (index === 0 && React.isValidElement(child)) {\n          return React.cloneElement(child, { id } as { id?: string })\n        }\n        return child\n      })}\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(ComposedFormField)\nwrappedComponent.displayName = \"ComposedField\"\n\nexport { wrappedComponent as ComposedField }\n"],"names":["_jsx"],"mappings":";;;;AASA,MAAM,iBAAiB,GAAG,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAS,KAAI;IACpD,QACEA,aAAK,SAAS,EAAC,0BAA0B,EACtC,QAAA,EAAA,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;YACrD,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC9C,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,EAAqB,CAAC,CAAA;aAC5D;AACD,YAAA,OAAO,KAAK,CAAA;SACb,CAAC,EACE,CAAA,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,iBAAiB,EAAC;AACjE,gBAAgB,CAAC,WAAW,GAAG,eAAe;;;;"}

package/components/Form/Fieldset.js

@@ -1,9 +1,7 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const Fieldset = ({ legend, children }) => {
-    return (React.createElement("fieldset", { className: "cobalt-Fieldset" },
-        React.createElement("legend", null, legend),
-        children));
+    return (jsxs("fieldset", { className: "cobalt-Fieldset", children: [jsx("legend", { children: legend }), children] }));
 };
 
 export { Fieldset };

package/components/Form/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../../../src/components/Form/Fieldset.tsx"],"sourcesContent":["import React from \"react\"\n\ntype Props = {\n  legend: string\n  children: React.ReactNode\n}\n\nexport const Fieldset = ({ legend, children }: Props) => {\n  return (\n    <fieldset className=\"cobalt-Fieldset\">\n      <legend>{legend}</legend>\n      {children}\n    </fieldset>\n  )\n}\n"],"names":[],"mappings":";;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAS,KAAI;AACtD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAU,SAAS,EAAC,iBAAiB,EAAA;AACnC,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAA,EAAS,MAAM,CAAU;QACxB,QAAQ,CACA,EACZ;AACH;;;;"}
+{"version":3,"file":"Fieldset.js","sources":["../../../src/components/Form/Fieldset.tsx"],"sourcesContent":["import type React from \"react\"\n\ntype Props = {\n  legend: string\n  children: React.ReactNode\n}\n\nexport const Fieldset = ({ legend, children }: Props) => {\n  return (\n    <fieldset className=\"cobalt-Fieldset\">\n      <legend>{legend}</legend>\n      {children}\n    </fieldset>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAS,KAAI;AACtD,IAAA,QACEA,IAAA,CAAA,UAAA,EAAA,EAAU,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CACnCC,GAAS,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,MAAM,EAAU,CAAA,EACxB,QAAQ,CAAA,EAAA,CACA,EACZ;AACH;;;;"}

package/components/Form/Hint.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import { Icon } from '../Icon/index.js';
 
@@ -27,13 +27,10 @@ const getIconColor = (status) => {
     }
 };
 const Hint = ({ children, status, className }) => {
-    return (React.createElement("div", { className: cx("cobalt-Hint", className, {
+    return (jsxs("div", { className: cx("cobalt-Hint", className, {
             "cobalt-Hint--success": status === "success",
             "cobalt-Hint--error": status === "error",
-        }) },
-        React.createElement("span", { className: "cobalt-Hint__Icon" },
-            React.createElement(Icon, { source: getIcon(status), size: ICON_SIZE, color: getIconColor(status) })),
-        React.createElement("span", { className: "cobalt-Hint__Message" }, children)));
+        }), children: [jsx("span", { className: "cobalt-Hint__Icon", children: jsx(Icon, { source: getIcon(status), size: ICON_SIZE, color: getIconColor(status) }) }), jsx("span", { className: "cobalt-Hint__Message", children: children })] }));
 };
 
 export { Hint };

package/components/Form/Hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.js","sources":["../../../src/components/Form/Hint.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon } from \"../Icon\"\nimport { FormElementStatus } from \"./form\"\n\nexport interface HintPropsType {\n  className?: string\n  children: React.ReactNode\n  status?: FormElementStatus\n}\n\nconst ICON_SIZE = 16\n\nconst getIcon = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"checkCircle\"\n    }\n    case \"error\": {\n      return \"contextualWarningCircleFilled\"\n    }\n    default: {\n      return \"info\"\n    }\n  }\n}\n\nconst getIconColor = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\":\n      return \"success\"\n    case \"error\":\n      return \"error\"\n    default:\n      return \"onSurfaceVariant\"\n  }\n}\n\nexport const Hint = ({ children, status, className }: HintPropsType) => {\n  return (\n    <div\n      className={classNames(\"cobalt-Hint\", className, {\n        \"cobalt-Hint--success\": status === \"success\",\n        \"cobalt-Hint--error\": status === \"error\",\n      })}\n    >\n      <span className=\"cobalt-Hint__Icon\">\n        <Icon\n          source={getIcon(status)}\n          size={ICON_SIZE}\n          color={getIconColor(status)}\n        />\n      </span>\n      <span className=\"cobalt-Hint__Message\">{children}</span>\n    </div>\n  )\n}\n"],"names":["classNames"],"mappings":";;;;AAWA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,OAAO,GAAG,CAAC,MAAqC,KAAI;IACxD,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,aAAa,CAAA;SACrB;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,+BAA+B,CAAA;SACvC;QACD,SAAS;AACP,YAAA,OAAO,MAAM,CAAA;SACd;KACF;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,MAAqC,KAAI;IAC7D,QAAQ,MAAM;AACZ,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,SAAS,CAAA;AAClB,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,OAAO,CAAA;AAChB,QAAA;AACE,YAAA,OAAO,kBAAkB,CAAA;KAC5B;AACH,CAAC,CAAA;AAEM,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAiB,KAAI;IACrE,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,aAAa,EAAE,SAAS,EAAE;YAC9C,sBAAsB,EAAE,MAAM,KAAK,SAAS;YAC5C,oBAAoB,EAAE,MAAM,KAAK,OAAO;SACzC,CAAC,EAAA;QAEF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,EAAA;YACjC,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,GAC3B,CACG;QACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,EAAE,QAAQ,CAAQ,CACpD,EACP;AACH;;;;"}
+{"version":3,"file":"Hint.js","sources":["../../../src/components/Form/Hint.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport type React from \"react\"\nimport { Icon } from \"../Icon\"\nimport type { FormElementStatus } from \"./form\"\n\nexport interface HintPropsType {\n  className?: string\n  children: React.ReactNode\n  status?: FormElementStatus\n}\n\nconst ICON_SIZE = 16\n\nconst getIcon = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"checkCircle\"\n    }\n    case \"error\": {\n      return \"contextualWarningCircleFilled\"\n    }\n    default: {\n      return \"info\"\n    }\n  }\n}\n\nconst getIconColor = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\":\n      return \"success\"\n    case \"error\":\n      return \"error\"\n    default:\n      return \"onSurfaceVariant\"\n  }\n}\n\nexport const Hint = ({ children, status, className }: HintPropsType) => {\n  return (\n    <div\n      className={classNames(\"cobalt-Hint\", className, {\n        \"cobalt-Hint--success\": status === \"success\",\n        \"cobalt-Hint--error\": status === \"error\",\n      })}\n    >\n      <span className=\"cobalt-Hint__Icon\">\n        <Icon\n          source={getIcon(status)}\n          size={ICON_SIZE}\n          color={getIconColor(status)}\n        />\n      </span>\n      <span className=\"cobalt-Hint__Message\">{children}</span>\n    </div>\n  )\n}\n"],"names":["_jsxs","classNames","_jsx"],"mappings":";;;;AAWA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,OAAO,GAAG,CAAC,MAAqC,KAAI;IACxD,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,aAAa,CAAA;SACrB;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,+BAA+B,CAAA;SACvC;QACD,SAAS;AACP,YAAA,OAAO,MAAM,CAAA;SACd;KACF;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,MAAqC,KAAI;IAC7D,QAAQ,MAAM;AACZ,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,SAAS,CAAA;AAClB,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,OAAO,CAAA;AAChB,QAAA;AACE,YAAA,OAAO,kBAAkB,CAAA;KAC5B;AACH,CAAC,CAAA;AAEM,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAiB,KAAI;IACrE,QACEA,cACE,SAAS,EAAEC,EAAU,CAAC,aAAa,EAAE,SAAS,EAAE;YAC9C,sBAAsB,EAAE,MAAM,KAAK,SAAS;YAC5C,oBAAoB,EAAE,MAAM,KAAK,OAAO;AACzC,SAAA,CAAC,aAEFC,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,YACjCA,GAAC,CAAA,IAAI,EACH,EAAA,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,GAC3B,EACG,CAAA,EACPA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAE,QAAQ,EAAQ,CAAA,CAAA,EAAA,CACpD,EACP;AACH;;;;"}

package/components/Form/RadioWithDetails.js

@@ -1,18 +1,12 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
+import React from 'react';
 
 const RadioWithDetails = ({ icon, title, description, className, ...inputProps }) => {
-    return (React.createElement("label", { className: cx("cobalt-radio-with-details", !description && "cobalt-radio-with-details--noDescription", className) },
-        React.createElement("input", { ...inputProps, type: "radio", className: "cobalt-radio-with-details__input" }),
-        React.createElement("div", { className: "cobalt-radio-with-details__inner" },
-            icon &&
-                React.cloneElement(icon, {
-                    className: "cobalt-radio-with-details__icon",
-                }),
-            React.createElement("div", { className: "cobalt-radio-with-details__content" },
-                React.createElement("div", { className: "cobalt-radio-with-details__title" }, title),
-                description && (React.createElement("div", { className: "cobalt-radio-with-details__description" }, description))),
-            React.createElement("div", { className: "cobalt-radio-with-details__visual-input" }))));
+    return (jsxs("label", { className: cx("cobalt-radio-with-details", !description && "cobalt-radio-with-details--noDescription", className), children: [jsx("input", { ...inputProps, type: "radio", className: "cobalt-radio-with-details__input" }), jsxs("div", { className: "cobalt-radio-with-details__inner", children: [icon &&
+                        React.cloneElement(icon, {
+                            className: "cobalt-radio-with-details__icon",
+                        }), jsxs("div", { className: "cobalt-radio-with-details__content", children: [jsx("div", { className: "cobalt-radio-with-details__title", children: title }), description && (jsx("div", { className: "cobalt-radio-with-details__description", children: description }))] }), jsx("div", { className: "cobalt-radio-with-details__visual-input" })] })] }));
 };
 
 export { RadioWithDetails as default };

package/components/Form/RadioWithDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioWithDetails.js","sources":["../../../src/components/Form/RadioWithDetails.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type RadioWithDetailsPropsType = {\n  icon?: JSX.Element\n  title: string\n  description?: string\n  name: string\n  className?: string\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst RadioWithDetails = ({\n  icon,\n  title,\n  description,\n  className,\n  ...inputProps\n}: RadioWithDetailsPropsType) => {\n  return (\n    <label\n      className={cx(\n        \"cobalt-radio-with-details\",\n        !description && \"cobalt-radio-with-details--noDescription\",\n        className\n      )}\n    >\n      <input\n        {...inputProps}\n        type=\"radio\"\n        className=\"cobalt-radio-with-details__input\"\n      />\n      <div className=\"cobalt-radio-with-details__inner\">\n        {icon &&\n          React.cloneElement(icon, {\n            className: \"cobalt-radio-with-details__icon\",\n          })}\n        <div className=\"cobalt-radio-with-details__content\">\n          <div className=\"cobalt-radio-with-details__title\">{title}</div>\n          {description && (\n            <div className=\"cobalt-radio-with-details__description\">\n              {description}\n            </div>\n          )}\n        </div>\n        <div className=\"cobalt-radio-with-details__visual-input\" />\n      </div>\n    </label>\n  )\n}\n\nexport default RadioWithDetails\n"],"names":[],"mappings":";;;AAWA,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,UAAU,EACa,KAAI;AAC9B,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,2BAA2B,EAC3B,CAAC,WAAW,IAAI,0CAA0C,EAC1D,SAAS,CACV,EAAA;QAED,KACM,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAA,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kCAAkC,EAC5C,CAAA;QACF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;YAC9C,IAAI;AACH,gBAAA,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;AACvB,oBAAA,SAAS,EAAE,iCAAiC;iBAC7C,CAAC;YACJ,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,EAAE,KAAK,CAAO;gBAC9D,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EACpD,EAAA,WAAW,CACR,CACP,CACG;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,GAAG,CACvD,CACA,EACT;AACH;;;;"}
+{"version":3,"file":"RadioWithDetails.js","sources":["../../../src/components/Form/RadioWithDetails.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React from \"react\"\n\nexport type RadioWithDetailsPropsType = {\n  icon?: JSX.Element\n  title: string\n  description?: string\n  name: string\n  className?: string\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst RadioWithDetails = ({\n  icon,\n  title,\n  description,\n  className,\n  ...inputProps\n}: RadioWithDetailsPropsType) => {\n  return (\n    <label\n      className={cx(\n        \"cobalt-radio-with-details\",\n        !description && \"cobalt-radio-with-details--noDescription\",\n        className,\n      )}\n    >\n      <input\n        {...inputProps}\n        type=\"radio\"\n        className=\"cobalt-radio-with-details__input\"\n      />\n      <div className=\"cobalt-radio-with-details__inner\">\n        {icon &&\n          React.cloneElement(icon, {\n            className: \"cobalt-radio-with-details__icon\",\n          })}\n        <div className=\"cobalt-radio-with-details__content\">\n          <div className=\"cobalt-radio-with-details__title\">{title}</div>\n          {description && (\n            <div className=\"cobalt-radio-with-details__description\">\n              {description}\n            </div>\n          )}\n        </div>\n        <div className=\"cobalt-radio-with-details__visual-input\" />\n      </div>\n    </label>\n  )\n}\n\nexport default RadioWithDetails\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAWA,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,UAAU,EACa,KAAI;AAC9B,IAAA,QACEA,IAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,2BAA2B,EAC3B,CAAC,WAAW,IAAI,0CAA0C,EAC1D,SAAS,CACV,EAAA,QAAA,EAAA,CAEDC,GACM,CAAA,OAAA,EAAA,EAAA,GAAA,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kCAAkC,EAAA,CAC5C,EACFD,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,aAC9C,IAAI;AACH,wBAAA,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;AACvB,4BAAA,SAAS,EAAE,iCAAiC;AAC7C,yBAAA,CAAC,EACJA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EACjD,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAE,QAAA,EAAA,KAAK,EAAO,CAAA,EAC9D,WAAW,KACVA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,wCAAwC,EAAA,QAAA,EACpD,WAAW,EAAA,CACR,CACP,CACG,EAAA,CAAA,EACNA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yCAAyC,EAAA,CAAG,CACvD,EAAA,CAAA,CAAA,EAAA,CACA,EACT;AACH;;;;"}

package/components/Form/Select.js

@@ -1,13 +1,12 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import { withFieldLabelAndHint } from './field.js';
 
 const Select = ({ children, status, forwardedRef, ...selectProps }) => {
-    return (React.createElement("div", { className: cx("cobalt-SelectField", {
+    return (jsx("div", { className: cx("cobalt-SelectField", {
             "cobalt-SelectField--success": status === "success",
             "cobalt-SelectField--error": status === "error",
-        }) },
-        React.createElement("select", { ...selectProps, ref: forwardedRef, className: "cobalt-SelectField__Input" }, children)));
+        }), children: jsx("select", { ...selectProps, ref: forwardedRef, className: "cobalt-SelectField__Input", children: children }) }));
 };
 const wrappedComponent = withFieldLabelAndHint(Select);
 wrappedComponent.displayName = "Select";

package/components/Form/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Form/Select.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\n\ntype Props = {\n  children: any\n  forwardedRef?: React.Ref<HTMLSelectElement>\n} & FormElement &\n  React.SelectHTMLAttributes<HTMLSelectElement>\n\nconst Select = ({ children, status, forwardedRef, ...selectProps }: Props) => {\n  return (\n    <div\n      className={classNames(\"cobalt-SelectField\", {\n        \"cobalt-SelectField--success\": status === \"success\",\n        \"cobalt-SelectField--error\": status === \"error\",\n      })}\n    >\n      <select\n        {...selectProps}\n        ref={forwardedRef}\n        className=\"cobalt-SelectField__Input\"\n      >\n        {children}\n      </select>\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Select)\nwrappedComponent.displayName = \"Select\"\n\nexport { wrappedComponent as Select }\n"],"names":["classNames"],"mappings":";;;;AAWA,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,WAAW,EAAS,KAAI;AAC3E,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,oBAAoB,EAAE;YAC1C,6BAA6B,EAAE,MAAM,KAAK,SAAS;YACnD,2BAA2B,EAAE,MAAM,KAAK,OAAO;SAChD,CAAC,EAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,WAAW,EACf,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,2BAA2B,EAEpC,EAAA,QAAQ,CACF,CACL,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Form/Select.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport type React from \"react\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport type { FormElement } from \"./form\"\n\ntype Props = {\n  children: React.ReactNode\n  forwardedRef?: React.Ref<HTMLSelectElement>\n} & FormElement &\n  React.SelectHTMLAttributes<HTMLSelectElement>\n\nconst Select = ({ children, status, forwardedRef, ...selectProps }: Props) => {\n  return (\n    <div\n      className={classNames(\"cobalt-SelectField\", {\n        \"cobalt-SelectField--success\": status === \"success\",\n        \"cobalt-SelectField--error\": status === \"error\",\n      })}\n    >\n      <select\n        {...selectProps}\n        ref={forwardedRef}\n        className=\"cobalt-SelectField__Input\"\n      >\n        {children}\n      </select>\n    </div>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Select)\nwrappedComponent.displayName = \"Select\"\n\nexport { wrappedComponent as Select }\n"],"names":["_jsx","classNames"],"mappings":";;;;AAWA,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,WAAW,EAAS,KAAI;AAC3E,IAAA,QACEA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,EAAU,CAAC,oBAAoB,EAAE;YAC1C,6BAA6B,EAAE,MAAM,KAAK,SAAS;YACnD,2BAA2B,EAAE,MAAM,KAAK,OAAO;AAChD,SAAA,CAAC,YAEFD,GACM,CAAA,QAAA,EAAA,EAAA,GAAA,WAAW,EACf,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,2BAA2B,EAEpC,QAAA,EAAA,QAAQ,EACF,CAAA,EAAA,CACL,EACP;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAC;AACtD,gBAAgB,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/components/Form/Slider.js

@@ -1,6 +1,7 @@
-import React, { useState, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slider as Slider$1 } from '@ark-ui/react';
 import cx from 'classnames';
+import { useState, useMemo } from 'react';
 import { FieldWrapper } from './field.js';
 
 const MIN_BAR_HEIGHT_PERCENT = 3;
@@ -9,12 +10,12 @@ const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled
     const sliderMaxValue = max || 100;
     const value = Array.isArray(_value)
         ? _value
-        : _value !== undefined && !isNaN(_value)
+        : _value !== undefined && !Number.isNaN(_value)
             ? [_value]
             : undefined;
     const defaultValue = Array.isArray(_defaultValue)
         ? _defaultValue
-        : _defaultValue !== undefined && !isNaN(_defaultValue)
+        : _defaultValue !== undefined && !Number.isNaN(_defaultValue)
             ? [_defaultValue]
             : undefined;
     function initValue() {
@@ -49,8 +50,7 @@ const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled
         const scaleFactor = 100 - MIN_BAR_HEIGHT_PERCENT;
         return rawValues.map((v) => v > 0 ? (v / maxBars) * scaleFactor + MIN_BAR_HEIGHT_PERCENT : 0);
     }, [bars, sliderMinValue, sliderMaxValue]);
-    return (React.createElement(FieldWrapper, { ...restProps, status: status, label: label, hint: hint },
-        React.createElement(Slider$1.Root, { ...restProps, className: cx("cobalt-slider", className, {
+    return (jsx(FieldWrapper, { ...restProps, status: status, label: label, hint: hint, children: jsxs(Slider$1.Root, { ...restProps, className: cx("cobalt-slider", className, {
                 "cobalt-slider--disabled": disabled,
                 "cobalt-slider--withHint": hint,
                 "cobalt-slider--withBars": !!bars,
@@ -62,29 +62,21 @@ const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled
             }, onValueChange: ({ value: newValueArr }) => {
                 setSliderValue(newValueArr);
                 const newValue = newValueArr.length === 1 ? newValueArr[0] : newValueArr;
-                onValueChange && onValueChange(newValue);
-            } },
-            React.createElement(Slider$1.Label, { className: FieldWrapper.labelClassName }, label),
-            renderValue && (React.createElement("div", { className: "cobalt-slider__value-container" }, renderValue((sliderValue.length === 1 ? sliderValue[0] : sliderValue), status))),
-            React.createElement(Slider$1.Control, null,
-                React.createElement("div", { className: "cobalt-slider__bars" }, barsData &&
-                    barsData.map((val, i) => {
-                        const barsStep = (bars === null || bars === void 0 ? void 0 : bars.step) || 1;
-                        return (React.createElement("div", { key: i, className: cx("cobalt-slider__bar", {
-                                "cobalt-slider__bar--active": i * barsStep + sliderMinValue >= sliderValue[0] &&
-                                    (i + 1) * barsStep + sliderMinValue <= sliderValue[1],
-                            }), style: {
-                                width: `calc(${100 / barsData.length}%)`,
-                                height: `${val}%`,
-                            } }));
-                    })),
-                React.createElement(Slider$1.Track, null,
-                    React.createElement(Slider$1.Range, null)),
-                sliderValue.map((_v, i) => (React.createElement(Slider$1.Thumb, { key: i, index: i },
-                    React.createElement(Slider$1.HiddenInput, null))))))));
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+            }, children: [jsx(Slider$1.Label, { className: FieldWrapper.labelClassName, children: label }), renderValue && (jsx("div", { className: "cobalt-slider__value-container", children: renderValue((sliderValue.length === 1 ? sliderValue[0] : sliderValue), status) })), jsxs(Slider$1.Control, { children: [jsx("div", { className: "cobalt-slider__bars", children: barsData === null || barsData === void 0 ? void 0 : barsData.map((val, i) => {
+                                const barsStep = (bars === null || bars === void 0 ? void 0 : bars.step) || 1;
+                                const barPosition = i * barsStep + sliderMinValue;
+                                return (jsx("div", { className: cx("cobalt-slider__bar", {
+                                        "cobalt-slider__bar--active": barPosition >= sliderValue[0] &&
+                                            (i + 1) * barsStep + sliderMinValue <= sliderValue[1],
+                                    }), style: {
+                                        width: `calc(${100 / barsData.length}%)`,
+                                        height: `${val}%`,
+                                    } }, `bar-${barPosition}`));
+                            }) }), jsx(Slider$1.Track, { children: jsx(Slider$1.Range, {}) }), sliderValue.map((_v, i) => (jsx(Slider$1.Thumb, { index: i, children: jsx(Slider$1.HiddenInput, {}) }, `thumb-${_v}`)))] })] }) }));
 };
 const SliderValueMeta = ({ children }) => {
-    return React.createElement("span", { className: "cobalt-slider__value-meta" }, children);
+    return jsx("span", { className: "cobalt-slider__value-meta", children: children });
 };
 
 export { SliderValueMeta, Slider as default };

package/components/Form/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { PropsWithChildren, useState, useMemo } from \"react\"\nimport { Slider as ArkSlider, SliderRootProps } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { FieldWrapper, FieldWrapperProps } from \"./field\"\n\nconst MIN_BAR_HEIGHT_PERCENT = 3\n\nexport type SliderPropsType<T extends number | number[]> = {\n  /**\n   * mandatory for A11y\n   */\n  value?: T\n  defaultValue?: T\n  ariaLabel: string\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  bars?: {\n    step: number\n    bins: Record<number, number>\n  }\n  /**\n   * Listener called when the value is changed\n   */\n  onValueChange?: (newValue: T) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: T,\n    status: FieldWrapperProps[\"status\"]\n  ) => React.ReactElement\n\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FieldWrapperProps &\n  Omit<SliderRootProps, \"value\" | \"defaultValue\" | \"onValueChange\">\n\nconst Slider = <T extends number | number[]>({\n  defaultValue: _defaultValue,\n  value: _value,\n  min,\n  max,\n  disabled,\n  onValueChange,\n  renderValue,\n  ariaLabel,\n  hint,\n  label,\n  status,\n  className,\n  step,\n  bars,\n  ...restProps\n}: SliderPropsType<T>) => {\n  const sliderMinValue = min || 0\n  const sliderMaxValue = max || 100\n  const value: number[] | undefined = Array.isArray(_value)\n    ? _value\n    : _value !== undefined && !isNaN(_value)\n      ? [_value]\n      : undefined\n  const defaultValue: number[] | undefined = Array.isArray(_defaultValue)\n    ? _defaultValue\n    : _defaultValue !== undefined && !isNaN(_defaultValue)\n      ? [_defaultValue]\n      : undefined\n  function initValue(): number[] {\n    if (value !== undefined) return value\n    if (defaultValue !== undefined) return defaultValue\n    if (min !== undefined) return [min]\n    return [0]\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  const barsData = useMemo(() => {\n    if (!bars || bars.step <= 0 || sliderMinValue >= sliderMaxValue) return null\n\n    const barsCount = (sliderMaxValue - sliderMinValue) / bars.step\n\n    let maxBars = 0\n    const rawValues = []\n\n    for (let i = 0; i < barsCount; i++) {\n      const binValue = bars.bins[i * bars.step + sliderMinValue]\n      if (binValue) {\n        maxBars = Math.max(maxBars, binValue)\n        rawValues.push(binValue)\n      } else {\n        rawValues.push(0)\n      }\n    }\n\n    if (maxBars === 0) {\n      return rawValues.map(() => 0) // all values are zero, so all bars are 0%\n    }\n\n    const scaleFactor = 100 - MIN_BAR_HEIGHT_PERCENT\n\n    return rawValues.map((v) =>\n      v > 0 ? (v / maxBars) * scaleFactor + MIN_BAR_HEIGHT_PERCENT : 0\n    )\n  }, [bars, sliderMinValue, sliderMaxValue])\n\n  return (\n    <FieldWrapper {...restProps} status={status} label={label} hint={hint}>\n      <ArkSlider.Root\n        {...restProps}\n        className={cx(\"cobalt-slider\", className, {\n          \"cobalt-slider--disabled\": disabled,\n          \"cobalt-slider--withHint\": hint,\n          \"cobalt-slider--withBars\": !!bars,\n        })}\n        thumbAlignment=\"contain\"\n        disabled={disabled}\n        aria-label={[ariaLabel]}\n        value={sliderValue}\n        min={min}\n        max={max}\n        step={step}\n        // Need to force disbplaying in smaller spaces like popovers\n        thumbSize={{\n          width: 24,\n          height: 24,\n        }}\n        onValueChange={({ value: newValueArr }) => {\n          setSliderValue(newValueArr)\n          const newValue =\n            newValueArr.length === 1 ? newValueArr[0] : newValueArr\n          onValueChange && onValueChange(newValue as T)\n        }}\n      >\n        <ArkSlider.Label className={FieldWrapper.labelClassName}>\n          {label}\n        </ArkSlider.Label>\n        {renderValue && (\n          <div className=\"cobalt-slider__value-container\">\n            {renderValue(\n              (sliderValue.length === 1 ? sliderValue[0] : sliderValue) as T,\n              status\n            )}\n          </div>\n        )}\n        <ArkSlider.Control>\n          <div className=\"cobalt-slider__bars\">\n            {barsData &&\n              barsData.map((val, i) => {\n                const barsStep = bars?.step || 1\n                return (\n                  <div\n                    key={i}\n                    className={cx(\"cobalt-slider__bar\", {\n                      \"cobalt-slider__bar--active\":\n                        i * barsStep + sliderMinValue >= sliderValue[0] &&\n                        (i + 1) * barsStep + sliderMinValue <= sliderValue[1],\n                    })}\n                    style={{\n                      width: `calc(${100 / barsData.length}%)`,\n                      height: `${val}%`,\n                    }}\n                  ></div>\n                )\n              })}\n          </div>\n          <ArkSlider.Track>\n            <ArkSlider.Range />\n          </ArkSlider.Track>\n          {sliderValue.map((_v, i) => (\n            <ArkSlider.Thumb key={i} index={i}>\n              <ArkSlider.HiddenInput />\n            </ArkSlider.Thumb>\n          ))}\n        </ArkSlider.Control>\n      </ArkSlider.Root>\n    </FieldWrapper>\n  )\n}\n\nexport default Slider\n\nexport const SliderValueMeta = ({ children }: PropsWithChildren) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["ArkSlider"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import { Slider as ArkSlider, type SliderRootProps } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport type React from \"react\"\nimport { type PropsWithChildren, useMemo, useState } from \"react\"\nimport { FieldWrapper, type FieldWrapperProps } from \"./field\"\n\nconst MIN_BAR_HEIGHT_PERCENT = 3\n\nexport type SliderPropsType<T extends number | number[]> = {\n  /**\n   * mandatory for A11y\n   */\n  value?: T\n  defaultValue?: T\n  ariaLabel: string\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  bars?: {\n    step: number\n    bins: Record<number, number>\n  }\n  /**\n   * Listener called when the value is changed\n   */\n  onValueChange?: (newValue: T) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: T,\n    status: FieldWrapperProps[\"status\"],\n  ) => React.ReactElement\n\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FieldWrapperProps &\n  Omit<SliderRootProps, \"value\" | \"defaultValue\" | \"onValueChange\">\n\nconst Slider = <T extends number | number[]>({\n  defaultValue: _defaultValue,\n  value: _value,\n  min,\n  max,\n  disabled,\n  onValueChange,\n  renderValue,\n  ariaLabel,\n  hint,\n  label,\n  status,\n  className,\n  step,\n  bars,\n  ...restProps\n}: SliderPropsType<T>) => {\n  const sliderMinValue = min || 0\n  const sliderMaxValue = max || 100\n  const value: number[] | undefined = Array.isArray(_value)\n    ? _value\n    : _value !== undefined && !Number.isNaN(_value)\n      ? [_value]\n      : undefined\n  const defaultValue: number[] | undefined = Array.isArray(_defaultValue)\n    ? _defaultValue\n    : _defaultValue !== undefined && !Number.isNaN(_defaultValue)\n      ? [_defaultValue]\n      : undefined\n  function initValue(): number[] {\n    if (value !== undefined) return value\n    if (defaultValue !== undefined) return defaultValue\n    if (min !== undefined) return [min]\n    return [0]\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  const barsData = useMemo(() => {\n    if (!bars || bars.step <= 0 || sliderMinValue >= sliderMaxValue) return null\n\n    const barsCount = (sliderMaxValue - sliderMinValue) / bars.step\n\n    let maxBars = 0\n    const rawValues = []\n\n    for (let i = 0; i < barsCount; i++) {\n      const binValue = bars.bins[i * bars.step + sliderMinValue]\n      if (binValue) {\n        maxBars = Math.max(maxBars, binValue)\n        rawValues.push(binValue)\n      } else {\n        rawValues.push(0)\n      }\n    }\n\n    if (maxBars === 0) {\n      return rawValues.map(() => 0) // all values are zero, so all bars are 0%\n    }\n\n    const scaleFactor = 100 - MIN_BAR_HEIGHT_PERCENT\n\n    return rawValues.map((v) =>\n      v > 0 ? (v / maxBars) * scaleFactor + MIN_BAR_HEIGHT_PERCENT : 0,\n    )\n  }, [bars, sliderMinValue, sliderMaxValue])\n\n  return (\n    <FieldWrapper {...restProps} status={status} label={label} hint={hint}>\n      <ArkSlider.Root\n        {...restProps}\n        className={cx(\"cobalt-slider\", className, {\n          \"cobalt-slider--disabled\": disabled,\n          \"cobalt-slider--withHint\": hint,\n          \"cobalt-slider--withBars\": !!bars,\n        })}\n        thumbAlignment=\"contain\"\n        disabled={disabled}\n        aria-label={[ariaLabel]}\n        value={sliderValue}\n        min={min}\n        max={max}\n        step={step}\n        // Need to force disbplaying in smaller spaces like popovers\n        thumbSize={{\n          width: 24,\n          height: 24,\n        }}\n        onValueChange={({ value: newValueArr }) => {\n          setSliderValue(newValueArr)\n          const newValue =\n            newValueArr.length === 1 ? newValueArr[0] : newValueArr\n          onValueChange?.(newValue as T)\n        }}\n      >\n        <ArkSlider.Label className={FieldWrapper.labelClassName}>\n          {label}\n        </ArkSlider.Label>\n        {renderValue && (\n          <div className=\"cobalt-slider__value-container\">\n            {renderValue(\n              (sliderValue.length === 1 ? sliderValue[0] : sliderValue) as T,\n              status,\n            )}\n          </div>\n        )}\n        <ArkSlider.Control>\n          <div className=\"cobalt-slider__bars\">\n            {barsData?.map((val, i) => {\n              const barsStep = bars?.step || 1\n              const barPosition = i * barsStep + sliderMinValue\n              return (\n                <div\n                  key={`bar-${barPosition}`}\n                  className={cx(\"cobalt-slider__bar\", {\n                    \"cobalt-slider__bar--active\":\n                      barPosition >= sliderValue[0] &&\n                      (i + 1) * barsStep + sliderMinValue <= sliderValue[1],\n                  })}\n                  style={{\n                    width: `calc(${100 / barsData.length}%)`,\n                    height: `${val}%`,\n                  }}\n                />\n              )\n            })}\n          </div>\n          <ArkSlider.Track>\n            <ArkSlider.Range />\n          </ArkSlider.Track>\n          {sliderValue.map((_v, i) => (\n            <ArkSlider.Thumb key={`thumb-${_v}`} index={i}>\n              <ArkSlider.HiddenInput />\n            </ArkSlider.Thumb>\n          ))}\n        </ArkSlider.Control>\n      </ArkSlider.Root>\n    </FieldWrapper>\n  )\n}\n\nexport default Slider\n\nexport const SliderValueMeta = ({ children }: PropsWithChildren) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["_jsx","_jsxs","ArkSlider"],"mappings":"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"}

package/components/Form/Stepper.js

@@ -1,8 +1,9 @@
-import React, { PureComponent } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
-import { withFieldLabelAndHint } from './field.js';
+import { PureComponent } from 'react';
 import Button from '../Buttons/Button/index.js';
 import '../Icon/index.js';
+import { withFieldLabelAndHint } from './field.js';
 import MinusIcon from '../Icon/__generated__/MinusIcon.js';
 import PlusIcon from '../Icon/__generated__/PlusIcon.js';
 
@@ -50,7 +51,8 @@ class Stepper extends PureComponent {
             this.setState({
                 value: enforceInRange(value, this.props.min, this.props.max),
             }, () => {
-                this.props.onChange && this.props.onChange(this.state.value);
+                var _a, _b;
+                (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.value);
             });
         };
         if (props.step < 0)
@@ -74,33 +76,25 @@ class Stepper extends PureComponent {
     }
     render() {
         const { name, status, disabled, min, max, children } = this.props;
-        return (React.createElement("div", { className: cx("cobalt-Stepper", {
+        return (jsx("div", { className: cx("cobalt-Stepper", {
                 "cobalt-Stepper--disabled": disabled,
                 "cobalt-Stepper--success": status === "success",
                 "cobalt-Stepper--error": status === "error",
-            }) },
-            React.createElement("div", { className: "cobalt-Stepper__Wrapper" },
-                React.createElement(Button, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, ...(!disabled && {
-                        onPointerDown: () => this.onPointerDown(this.onDecrement),
-                        onPointerUp: this.onPointerUp,
-                        onPointerLeave: this.onPointerUp,
-                    }), type: "button", "data-label": "stepper-minus" },
-                    React.createElement(MinusIcon, null)),
-                React.createElement("div", { className: "cobalt-Stepper__ContentWrapper" },
-                    children ? children(this.state.value) : this.state.value,
-                    React.createElement("input", { type: "hidden", name: name, value: this.state.value })),
-                React.createElement(Button, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, ...(!disabled && {
-                        onPointerDown: () => this.onPointerDown(this.onIncrement),
-                        onPointerUp: this.onPointerUp,
-                        onPointerLeave: this.onPointerUp,
-                    }), type: "button", "data-label": "stepper-plus" },
-                    React.createElement(PlusIcon, null)))));
+            }), children: jsxs("div", { className: "cobalt-Stepper__Wrapper", children: [jsx(Button, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, ...(!disabled && {
+                            onPointerDown: () => this.onPointerDown(this.onDecrement),
+                            onPointerUp: this.onPointerUp,
+                            onPointerLeave: this.onPointerUp,
+                        }), type: "button", "data-label": "stepper-minus", children: jsx(MinusIcon, {}) }), jsxs("div", { className: "cobalt-Stepper__ContentWrapper", children: [children ? children(this.state.value) : this.state.value, jsx("input", { type: "hidden", name: name, value: this.state.value })] }), jsx(Button, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, ...(!disabled && {
+                            onPointerDown: () => this.onPointerDown(this.onIncrement),
+                            onPointerUp: this.onPointerUp,
+                            onPointerLeave: this.onPointerUp,
+                        }), type: "button", "data-label": "stepper-plus", children: jsx(PlusIcon, {}) })] }) }));
     }
 }
 const wrappedComponent = withFieldLabelAndHint(Stepper);
 wrappedComponent.displayName = "Stepper";
 const StepperMeta = ({ children }) => {
-    return React.createElement("div", { className: "cobalt-Stepper__Meta" }, children);
+    return jsx("div", { className: "cobalt-Stepper__Meta", children: children });
 };
 
 export { wrappedComponent as Stepper, StepperMeta };

package/components/Form/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport Button from \"../Buttons/Button\"\nimport { MinusIcon, PlusIcon } from \"../Icon\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n) => {\n  let enforcedValue = value\n  if (typeof max !== \"undefined\") {\n    enforcedValue = Math.min(enforcedValue, max)\n  }\n  if (typeof min !== \"undefined\") {\n    enforcedValue = Math.max(enforcedValue, min)\n  }\n  return enforcedValue\n}\n\ntype Props = {\n  value: number\n  name?: string\n  disabled?: boolean\n  min?: number\n  max?: number\n  step: number\n  onChange?: (value: number) => void\n  children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n  value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n\n    if (props.step < 0)\n      throw new Error(\"Incorrect step value. Can't be below zero\")\n\n    this.onDecrement = this.onDecrement.bind(this)\n    this.onIncrement = this.onIncrement.bind(this)\n    this.changeValue = this.changeValue.bind(this)\n    this.onPointerDown = this.onPointerDown.bind(this)\n    this.onPointerUp = this.onPointerUp.bind(this)\n\n    this.state = {\n      value: enforceInRange(props.value, props.min, props.max),\n    }\n  }\n\n  timeout: ReturnType<typeof setTimeout> | null = null\n  interval: ReturnType<typeof setInterval> | null = null\n\n  componentDidUpdate(_prevProps: Props, prevState: State) {\n    if (prevState.value !== this.state.value) {\n      this.changeValue(this.state.value)\n    } else if (this.props.value !== this.state.value) {\n      this.changeValue(this.props.value)\n    }\n  }\n\n  onDecrement = () => {\n    ;(this.props.min !== null || this.state.value > this.props.min) &&\n      this.changeValue(\n        parseFloat((this.state.value - this.props.step).toFixed(10))\n      )\n  }\n\n  onIncrement = () => {\n    ;(this.props.max !== null || this.state.value < this.props.max) &&\n      this.changeValue(\n        parseFloat((this.state.value + this.props.step).toFixed(10))\n      )\n  }\n\n  onPointerDown = (callback: () => void) => {\n    callback()\n    this.timeout && clearTimeout(this.timeout)\n    this.timeout = setTimeout(() => {\n      this.interval && clearInterval(this.interval)\n      this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n    }, AUTO_CHANGE_TIMEOUT_IN_MS)\n  }\n\n  onPointerUp = () => {\n    if (this.interval) {\n      clearInterval(this.interval)\n      this.interval = null\n    }\n    this.timeout && clearTimeout(this.timeout)\n  }\n\n  changeValue = (value: number) => {\n    this.setState(\n      {\n        value: enforceInRange(value, this.props.min, this.props.max),\n      },\n      () => {\n        this.props.onChange && this.props.onChange(this.state.value)\n      }\n    )\n  }\n\n  render() {\n    const { name, status, disabled, min, max, children } = this.props\n\n    return (\n      <div\n        className={classNames(\"cobalt-Stepper\", {\n          \"cobalt-Stepper--disabled\": disabled,\n          \"cobalt-Stepper--success\": status === \"success\",\n          \"cobalt-Stepper--error\": status === \"error\",\n        })}\n      >\n        <div className=\"cobalt-Stepper__Wrapper\">\n          <Button\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === min}\n            {...(!disabled && {\n              onPointerDown: () => this.onPointerDown(this.onDecrement),\n              onPointerUp: this.onPointerUp,\n              onPointerLeave: this.onPointerUp,\n            })}\n            type=\"button\"\n            data-label=\"stepper-minus\"\n          >\n            <MinusIcon />\n          </Button>\n          <div className=\"cobalt-Stepper__ContentWrapper\">\n            {children ? children(this.state.value) : this.state.value}\n            <input type=\"hidden\" name={name} value={this.state.value} />\n          </div>\n          <Button\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === max}\n            {...(!disabled && {\n              onPointerDown: () => this.onPointerDown(this.onIncrement),\n              onPointerUp: this.onPointerUp,\n              onPointerLeave: this.onPointerUp,\n            })}\n            type=\"button\"\n            data-label=\"stepper-plus\"\n          >\n            <PlusIcon />\n          </Button>\n        </div>\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n  children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n  return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport type React from \"react\"\nimport { PureComponent } from \"react\"\nimport Button from \"../Buttons/Button\"\nimport { MinusIcon, PlusIcon } from \"../Icon\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport type { FormElement } from \"./form\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n  value: number,\n  min: number | undefined,\n  max: number | undefined,\n) => {\n  let enforcedValue = value\n  if (typeof max !== \"undefined\") {\n    enforcedValue = Math.min(enforcedValue, max)\n  }\n  if (typeof min !== \"undefined\") {\n    enforcedValue = Math.max(enforcedValue, min)\n  }\n  return enforcedValue\n}\n\ntype Props = {\n  value: number\n  name?: string\n  disabled?: boolean\n  min?: number\n  max?: number\n  step: number\n  onChange?: (value: number) => void\n  children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n  value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n\n    if (props.step < 0)\n      throw new Error(\"Incorrect step value. Can't be below zero\")\n\n    this.onDecrement = this.onDecrement.bind(this)\n    this.onIncrement = this.onIncrement.bind(this)\n    this.changeValue = this.changeValue.bind(this)\n    this.onPointerDown = this.onPointerDown.bind(this)\n    this.onPointerUp = this.onPointerUp.bind(this)\n\n    this.state = {\n      value: enforceInRange(props.value, props.min, props.max),\n    }\n  }\n\n  timeout: ReturnType<typeof setTimeout> | null = null\n  interval: ReturnType<typeof setInterval> | null = null\n\n  componentDidUpdate(_prevProps: Props, prevState: State) {\n    if (prevState.value !== this.state.value) {\n      this.changeValue(this.state.value)\n    } else if (this.props.value !== this.state.value) {\n      this.changeValue(this.props.value)\n    }\n  }\n\n  onDecrement = () => {\n    ;(this.props.min !== null || this.state.value > this.props.min) &&\n      this.changeValue(\n        parseFloat((this.state.value - this.props.step).toFixed(10)),\n      )\n  }\n\n  onIncrement = () => {\n    ;(this.props.max !== null || this.state.value < this.props.max) &&\n      this.changeValue(\n        parseFloat((this.state.value + this.props.step).toFixed(10)),\n      )\n  }\n\n  onPointerDown = (callback: () => void) => {\n    callback()\n    this.timeout && clearTimeout(this.timeout)\n    this.timeout = setTimeout(() => {\n      this.interval && clearInterval(this.interval)\n      this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n    }, AUTO_CHANGE_TIMEOUT_IN_MS)\n  }\n\n  onPointerUp = () => {\n    if (this.interval) {\n      clearInterval(this.interval)\n      this.interval = null\n    }\n    this.timeout && clearTimeout(this.timeout)\n  }\n\n  changeValue = (value: number) => {\n    this.setState(\n      {\n        value: enforceInRange(value, this.props.min, this.props.max),\n      },\n      () => {\n        this.props.onChange?.(this.state.value)\n      },\n    )\n  }\n\n  render() {\n    const { name, status, disabled, min, max, children } = this.props\n\n    return (\n      <div\n        className={classNames(\"cobalt-Stepper\", {\n          \"cobalt-Stepper--disabled\": disabled,\n          \"cobalt-Stepper--success\": status === \"success\",\n          \"cobalt-Stepper--error\": status === \"error\",\n        })}\n      >\n        <div className=\"cobalt-Stepper__Wrapper\">\n          <Button\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === min}\n            {...(!disabled && {\n              onPointerDown: () => this.onPointerDown(this.onDecrement),\n              onPointerUp: this.onPointerUp,\n              onPointerLeave: this.onPointerUp,\n            })}\n            type=\"button\"\n            data-label=\"stepper-minus\"\n          >\n            <MinusIcon />\n          </Button>\n          <div className=\"cobalt-Stepper__ContentWrapper\">\n            {children ? children(this.state.value) : this.state.value}\n            <input type=\"hidden\" name={name} value={this.state.value} />\n          </div>\n          <Button\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === max}\n            {...(!disabled && {\n              onPointerDown: () => this.onPointerDown(this.onIncrement),\n              onPointerUp: this.onPointerUp,\n              onPointerLeave: this.onPointerUp,\n            })}\n            type=\"button\"\n            data-label=\"stepper-plus\"\n          >\n            <PlusIcon />\n          </Button>\n        </div>\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n  children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n  return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["_jsx","classNames","_jsxs"],"mappings":"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"}

package/components/Form/TagsInput.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { TagsInput as TagsInput$1 } from '@ark-ui/react';
 import cx from 'classnames';
 import '../Icon/index.js';
@@ -7,22 +7,12 @@ import CloseIcon from '../Icon/__generated__/CloseIcon.js';
 
 const TagsInput = ({ status, forwardedRef, value, onValueChange, tags, onTagsChange, defaultTags, defaultValue, placeholder, id, disabled, readOnly, ...restProps }) => {
     const hasDeleteTrigger = !disabled && !readOnly;
-    return (React.createElement("div", { className: "cobalt-TagsField" },
-        React.createElement(TagsInput$1.Root, { ids: { input: id }, onInputValueChange: (details) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(details.inputValue), onValueChange: (details) => onTagsChange === null || onTagsChange === void 0 ? void 0 : onTagsChange(details.value), defaultValue: defaultTags, defaultInputValue: defaultValue, className: cx("cobalt-TagsField__InputContainer", {
+    return (jsx("div", { className: "cobalt-TagsField", children: jsxs(TagsInput$1.Root, { ids: { input: id }, onInputValueChange: (details) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(details.inputValue), onValueChange: (details) => onTagsChange === null || onTagsChange === void 0 ? void 0 : onTagsChange(details.value), defaultValue: defaultTags, defaultInputValue: defaultValue, className: cx("cobalt-TagsField__InputContainer", {
                 "cobalt-TagsField__InputContainer--success": status === "success",
                 "cobalt-TagsField__InputContainer--error": status === "error",
-            }), value: tags, inputValue: value, disabled: disabled, readOnly: readOnly, addOnPaste: true, ...restProps },
-            React.createElement(TagsInput$1.Context, null, (tagsInput) => (React.createElement(React.Fragment, null,
-                React.createElement(TagsInput$1.Control, { className: "cobalt-TagsField__Tags" }, tagsInput.value.map((tagValue, index) => (React.createElement(TagsInput$1.Item, { key: tagValue, index: index, value: tagValue },
-                    React.createElement(TagsInput$1.ItemPreview, { className: cx("cobalt-Tag cobalt-TagsField__Tag", {
-                            "c-pr-none": hasDeleteTrigger,
-                        }) },
-                        React.createElement(TagsInput$1.ItemText, null, tagValue),
-                        hasDeleteTrigger && (React.createElement(TagsInput$1.ItemDeleteTrigger, { className: "cobalt-TagsField__TagDeleteTrigger" },
-                            React.createElement(CloseIcon, { size: 16 })))),
-                    React.createElement(TagsInput$1.ItemInput, null))))),
-                React.createElement(TagsInput$1.Input, { className: "cobalt-TagsField__Input", placeholder: placeholder })))),
-            React.createElement(TagsInput$1.HiddenInput, { ref: forwardedRef }))));
+            }), value: tags, inputValue: value, disabled: disabled, readOnly: readOnly, addOnPaste: true, ...restProps, children: [jsx(TagsInput$1.Context, { children: (tagsInput) => (jsxs(Fragment, { children: [jsx(TagsInput$1.Control, { className: "cobalt-TagsField__Tags", children: tagsInput.value.map((tagValue, index) => (jsxs(TagsInput$1.Item, { index: index, value: tagValue, children: [jsxs(TagsInput$1.ItemPreview, { className: cx("cobalt-Tag cobalt-TagsField__Tag", {
+                                                "c-pr-none": hasDeleteTrigger,
+                                            }), children: [jsx(TagsInput$1.ItemText, { children: tagValue }), hasDeleteTrigger && (jsx(TagsInput$1.ItemDeleteTrigger, { className: "cobalt-TagsField__TagDeleteTrigger", children: jsx(CloseIcon, { size: 16 }) }))] }), jsx(TagsInput$1.ItemInput, {})] }, tagValue))) }), jsx(TagsInput$1.Input, { className: "cobalt-TagsField__Input", placeholder: placeholder })] })) }), jsx(TagsInput$1.HiddenInput, { ref: forwardedRef })] }) }));
 };
 TagsInput.displayName = "TagsInputRaw";
 const wrappedComponent = withFieldLabelAndHint(TagsInput);