fictoan-react 1.0.0-alpha.2 → 1.0.0-alpha.5

package/dist/components/Element/Tags.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("./Element.cjs");function t(){return t=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},t.apply(this,arguments)}var o=function(o){return e.forwardRef((function(n,i){return e.createElement(r.Element,t({as:o,ref:i},n))}))},n=o("div"),i=o("article"),s=o("aside"),a=o("body"),c=o("footer"),p=o("header"),u=o("main"),l=o("nav"),d=o("section");exports.Article=i,exports.Aside=s,exports.Body=a,exports.Div=n,exports.Footer=c,exports.Header=p,exports.Main=u,exports.Nav=l,exports.Section=d;

package/dist/components/Element/Tags.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ElementProps } from "./constants";
+export declare const Div: React.ForwardRefExoticComponent<ElementProps<{}> & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Article: React.ForwardRefExoticComponent<ElementProps<{}> & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Aside: React.ForwardRefExoticComponent<ElementProps<{}> & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Body: React.ForwardRefExoticComponent<ElementProps<{}> & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Footer: React.ForwardRefExoticComponent<ElementProps<{}> & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Header: React.ForwardRefExoticComponent<ElementProps<{}> & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Main: React.ForwardRefExoticComponent<ElementProps<{}> & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Nav: React.ForwardRefExoticComponent<ElementProps<{}> & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Section: React.ForwardRefExoticComponent<ElementProps<{}> & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;

package/dist/components/Element/Tags.js

@@ -0,0 +1,28 @@
+import r from "react";
+import { Element as e } from "./Element.js";
+function t() {
+  return t = Object.assign ? Object.assign.bind() : function(r2) {
+    for (var e2 = 1; e2 < arguments.length; e2++) {
+      var t2 = arguments[e2];
+      for (var n2 in t2)
+        Object.prototype.hasOwnProperty.call(t2, n2) && (r2[n2] = t2[n2]);
+    }
+    return r2;
+  }, t.apply(this, arguments);
+}
+var n = function(n2) {
+  return r.forwardRef(function(o2, a2) {
+    return r.createElement(e, t({ as: n2, ref: a2 }, o2));
+  });
+}, o = n("div"), a = n("article"), i = n("aside"), c = n("body"), f = n("footer"), s = n("header"), p = n("main"), u = n("nav"), l = n("section");
+export {
+  a as Article,
+  i as Aside,
+  c as Body,
+  o as Div,
+  f as Footer,
+  s as Header,
+  p as Main,
+  u as Nav,
+  l as Section
+};

package/dist/components/Element/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Element.cjs");require("react"),exports.Element=e.Element;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Element.cjs"),r=require("./Tags.cjs");require("react"),exports.Element=e.Element,exports.Article=r.Article,exports.Aside=r.Aside,exports.Body=r.Body,exports.Div=r.Div,exports.Footer=r.Footer,exports.Header=r.Header,exports.Main=r.Main,exports.Nav=r.Nav,exports.Section=r.Section;

package/dist/components/Element/index.d.ts

@@ -1,2 +1,3 @@
 export { Element } from "./Element";
+export { Div, Article, Aside, Body, Footer, Header, Main, Nav, Section } from "./Tags";
 export type { ElementProps } from "./constants";

package/dist/components/Element/index.js

@@ -1,5 +1,15 @@
 import { Element } from "./Element.js";
+import { Article, Aside, Body, Div, Footer, Header, Main, Nav, Section } from "./Tags.js";
 import "react";
 export {
-  Element
+  Article,
+  Aside,
+  Body,
+  Div,
+  Element,
+  Footer,
+  Header,
+  Main,
+  Nav,
+  Section
 };

package/dist/components/Form/BaseInputComponent/BaseInputComponent.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../Element/Element.cjs"),r=require("../InputLabel/InputLabel.cjs"),a=require("../FormItem/FormItem.cjs");var n=["as","className","label","helpText","errorText","iconLeft","iconRight","validateThis","classNames"];function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},l.apply(this,arguments)}var s=e.forwardRef((function(s,c){var i=s.as,o=s.className,m=s.label,u=s.helpText,p=s.errorText,f=s.iconLeft,b=s.iconRight,h=s.validateThis,E=s.classNames,v=function(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},l=Object.keys(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(s,n);return e.createElement(a.FormItem,{required:v.required},e.createElement(t.Element,l({as:i,ref:c,classNames:[o||"",f?"with-icon-left":"",b?"with-icon-right":"",h?"validate-this":""].concat(E||[])},v)),f&&e.createElement(t.Element,{as:"span",className:"icon-left"},f),b&&e.createElement(t.Element,{as:"span",className:"icon-right"},b),m&&e.createElement(r.InputLabel,{label:m,htmlFor:v.id}),(u||p)&&e.createElement(t.Element,{as:"div",className:"info-section vertically-center-items",marginTop:"nano"},u&&e.createElement(t.Element,{as:"span",className:"help-text"},u),p&&e.createElement(t.Element,{as:"span",className:"error-text"},p)))}));exports.BaseInputComponent=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../Element/Element.cjs"),r=require("../InputLabel/InputLabel.cjs"),a=require("../FormItem/FormItem.cjs");var n=["as","className","label","helpText","errorText","iconLeft","iconRight","validateThis","classNames"];function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},l.apply(this,arguments)}var s=e.forwardRef((function(s,c){var i=s.as,o=s.className,m=s.label,u=s.helpText,p=s.errorText,f=s.iconLeft,b=s.iconRight,h=s.validateThis,E=s.classNames,v=function(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},l=Object.keys(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(s,n);return e.createElement(a.FormItem,{"data-form-item":!0,required:v.required},e.createElement(t.Element,l({as:i,ref:c,classNames:[o||"",f?"with-icon-left":"",b?"with-icon-right":"",h?"validate-this":""].concat(E||[])},v)),f&&e.createElement(t.Element,{as:"span",className:"icon-left"},f),b&&e.createElement(t.Element,{as:"span",className:"icon-right"},b),m&&e.createElement(r.InputLabel,{label:m,htmlFor:v.id}),(u||p)&&e.createElement(t.Element,{as:"div",className:"info-section vertically-center-items",marginTop:"nano"},u&&e.createElement(t.Element,{as:"span",className:"help-text"},u),p&&e.createElement(t.Element,{as:"span",className:"error-text"},p)))}));exports.BaseInputComponent=s;

package/dist/components/Form/BaseInputComponent/BaseInputComponent.js

@@ -32,8 +32,8 @@ function s(e2, t2) {
   return n2;
 }
 var i = /* @__PURE__ */ e.forwardRef(function(i2, o) {
-  var c = i2.as, m = i2.className, f = i2.label, p = i2.helpText, u = i2.errorText, h = i2.iconLeft, b = i2.iconRight, v = i2.validateThis, g = i2.classNames, O = s(i2, n);
-  return e.createElement(a, { required: O.required }, /* @__PURE__ */ e.createElement(t, l({ as: c, ref: o, classNames: [m || "", h ? "with-icon-left" : "", b ? "with-icon-right" : "", v ? "validate-this" : ""].concat(g || []) }, O)), h && /* @__PURE__ */ e.createElement(t, { as: "span", className: "icon-left" }, h), b && /* @__PURE__ */ e.createElement(t, { as: "span", className: "icon-right" }, b), f && /* @__PURE__ */ e.createElement(r, { label: f, htmlFor: O.id }), (p || u) && /* @__PURE__ */ e.createElement(t, { as: "div", className: "info-section vertically-center-items", marginTop: "nano" }, p && /* @__PURE__ */ e.createElement(t, { as: "span", className: "help-text" }, p), u && /* @__PURE__ */ e.createElement(t, { as: "span", className: "error-text" }, u)));
+  var c = i2.as, m = i2.className, f = i2.label, p = i2.helpText, u = i2.errorText, h = i2.iconLeft, b = i2.iconRight, v = i2.validateThis, d = i2.classNames, g = s(i2, n);
+  return e.createElement(a, { "data-form-item": true, required: g.required }, /* @__PURE__ */ e.createElement(t, l({ as: c, ref: o, classNames: [m || "", h ? "with-icon-left" : "", b ? "with-icon-right" : "", v ? "validate-this" : ""].concat(d || []) }, g)), h && /* @__PURE__ */ e.createElement(t, { as: "span", className: "icon-left" }, h), b && /* @__PURE__ */ e.createElement(t, { as: "span", className: "icon-right" }, b), f && /* @__PURE__ */ e.createElement(r, { label: f, htmlFor: g.id }), (p || u) && /* @__PURE__ */ e.createElement(t, { as: "div", className: "info-section vertically-center-items", marginTop: "nano" }, p && /* @__PURE__ */ e.createElement(t, { as: "span", className: "help-text" }, p), u && /* @__PURE__ */ e.createElement(t, { as: "span", className: "error-text" }, u)));
 });
 export {
   i as BaseInputComponent

package/dist/components/Form/{CheckBox/CheckBox.cjs → Checkbox/Checkbox.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../Element/Element.cjs"),r=require("../BaseInputComponent/BaseInputComponent.cjs");function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}require("../InputLabel/InputLabel.cjs"),require("../FormItem/FormItem.cjs");var o=e.forwardRef((function(o,a){var c=n({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(o),o));return e.createElement(t.Element,{as:"div","data-checkbox":!0,ref:a},e.createElement(r.BaseInputComponent,n({as:"input",type:"checkbox"},c)))}));exports.CheckBox=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../Element/Element.cjs"),r=require("../BaseInputComponent/BaseInputComponent.cjs");function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}require("../InputLabel/InputLabel.cjs"),require("../FormItem/FormItem.cjs");var o=e.forwardRef((function(o,a){var c=n({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(o),o));return e.createElement(t.Element,{as:"div","data-checkbox":!0,ref:a},e.createElement(r.BaseInputComponent,n({as:"input",type:"checkbox"},c)))}));exports.Checkbox=o;

package/dist/components/Form/{CheckBox/CheckBox.d.ts → Checkbox/Checkbox.d.ts}

@@ -2,4 +2,4 @@ import React from "react";
 import { BaseInputComponentProps } from "../BaseInputComponent/constants";
 export type CheckboxElementType = HTMLInputElement;
 export type CheckboxProps = Omit<BaseInputComponentProps<CheckboxElementType>, "as">;
-export declare const CheckBox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Form/{CheckBox/CheckBox.js → Checkbox/Checkbox.js}

@@ -21,5 +21,5 @@ var o = /* @__PURE__ */ t.forwardRef(function(o2, a) {
   return t.createElement(e, { as: "div", "data-checkbox": true, ref: a }, /* @__PURE__ */ t.createElement(r, n({ as: "input", type: "checkbox" }, p)));
 });
 export {
-  o as CheckBox
+  o as Checkbox
 };

package/dist/components/Form/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./Checkbox";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;

package/dist/components/Form/{FormWrapper/FormWrapper.cjs → Form/Form.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../Element/Element.cjs"),t=require("../../Callout/Callout.cjs"),n=require("./FormGenerator.cjs");require("../../Row/Row.cjs"),require("../../Portion/Portion.cjs"),require("../InputLabel/InputLabel.cjs"),require("../InputField/InputField.cjs"),require("../BaseInputComponent/BaseInputComponent.cjs"),require("../FormItem/FormItem.cjs"),require("../InputField/FileUpload.cjs"),require("../CheckBox/CheckBox.cjs"),require("../CheckBox/Switch.cjs"),require("../RadioButton/RadioButton.cjs"),require("../RadioButton/RadioGroup.cjs"),require("../Select/Select.cjs"),require("../TextArea/TextArea.cjs");var o=["spacing","fields","onFieldsChange","children","errorText"];function i(){return i=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},i.apply(this,arguments)}var a=e.forwardRef((function(a,u){var c=a.spacing,l=void 0===c?"small":c,s=a.fields,p=a.onFieldsChange,j=a.children,d=a.errorText,f=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(a,o),m=[];return l&&m.push("spacing-".concat(l)),s&&s.length>0&&(j=[n.generateFormThroughConfig(s,p,l),j]),e.createElement(r.Element,i({as:"form","data-form-wrapper":!0,ref:u,classNames:m},f),j,d&&e.createElement(t.Callout,{kind:"error"},d))}));exports.FormWrapper=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../Element/Element.cjs"),t=require("../../Callout/Callout.cjs"),n=require("./FormGenerator.cjs");require("../../Row/Row.cjs"),require("../../Portion/Portion.cjs"),require("../InputLabel/InputLabel.cjs"),require("../InputField/InputField.cjs"),require("../BaseInputComponent/BaseInputComponent.cjs"),require("../FormItem/FormItem.cjs"),require("../InputField/FileUpload.cjs"),require("../Checkbox/Checkbox.cjs"),require("../Checkbox/Switch.cjs"),require("../RadioButton/RadioButton.cjs"),require("../RadioButton/RadioGroup.cjs"),require("../Select/Select.cjs"),require("../TextArea/TextArea.cjs");var o=["spacing","fields","onFieldsChange","children","errorText"];function i(){return i=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},i.apply(this,arguments)}var u=e.forwardRef((function(u,a){var c=u.spacing,l=void 0===c?"small":c,s=u.fields,p=u.onFieldsChange,j=u.children,d=u.errorText,f=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(u,o),m=[];return l&&m.push("spacing-".concat(l)),s&&s.length>0&&(j=[n.generateFormThroughConfig(s,p,l),j]),e.createElement(r.Element,i({as:"form","data-form":!0,ref:a,classNames:m},f),j,d&&e.createElement(t.Callout,{kind:"error"},d))}));exports.Form=u;

package/dist/components/Form/Form/Form.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { CommonAndHTMLProps, SpacingTypes } from "../../Element/constants";
+import { FormFieldsConfig } from "./FormGenerator";
+export interface FormCustomProps {
+    spacing?: SpacingTypes;
+    fields?: FormFieldsConfig[];
+    onFieldsChange?: React.FormEventHandler;
+    errorText?: string;
+}
+export type FormElementType = HTMLFormElement;
+export type FormProps = Omit<CommonAndHTMLProps<FormElementType>, keyof FormCustomProps> & FormCustomProps;
+export declare const Form: React.ForwardRefExoticComponent<Omit<CommonAndHTMLProps<HTMLFormElement>, keyof FormCustomProps> & FormCustomProps & React.RefAttributes<HTMLFormElement>>;

package/dist/components/Form/Form/Form.js

@@ -0,0 +1,53 @@
+import t from "react";
+import { Element as r } from "../../Element/Element.js";
+import { Callout as e } from "../../Callout/Callout.js";
+import { generateFormThroughConfig as o } from "./FormGenerator.js";
+import "../../Row/Row.js";
+import "../../Portion/Portion.js";
+import "../InputLabel/InputLabel.js";
+import "../InputField/InputField.js";
+import "../BaseInputComponent/BaseInputComponent.js";
+import "../FormItem/FormItem.js";
+import "../InputField/FileUpload.js";
+import "../Checkbox/Checkbox.js";
+import "../Checkbox/Switch.js";
+import "../RadioButton/RadioButton.js";
+import "../RadioButton/RadioGroup.js";
+import "../Select/Select.js";
+import "../TextArea/TextArea.js";
+var n = ["spacing", "fields", "onFieldsChange", "children", "errorText"];
+function i() {
+  return i = Object.assign ? Object.assign.bind() : function(t2) {
+    for (var r2 = 1; r2 < arguments.length; r2++) {
+      var e2 = arguments[r2];
+      for (var o2 in e2)
+        Object.prototype.hasOwnProperty.call(e2, o2) && (t2[o2] = e2[o2]);
+    }
+    return t2;
+  }, i.apply(this, arguments);
+}
+function a(t2, r2) {
+  if (null == t2)
+    return {};
+  var e2, o2, n2 = function(t3, r3) {
+    if (null == t3)
+      return {};
+    var e3, o3, n3 = {}, i3 = Object.keys(t3);
+    for (o3 = 0; o3 < i3.length; o3++)
+      e3 = i3[o3], r3.indexOf(e3) >= 0 || (n3[e3] = t3[e3]);
+    return n3;
+  }(t2, r2);
+  if (Object.getOwnPropertySymbols) {
+    var i2 = Object.getOwnPropertySymbols(t2);
+    for (o2 = 0; o2 < i2.length; o2++)
+      e2 = i2[o2], r2.indexOf(e2) >= 0 || Object.prototype.propertyIsEnumerable.call(t2, e2) && (n2[e2] = t2[e2]);
+  }
+  return n2;
+}
+var p = /* @__PURE__ */ t.forwardRef(function(p2, l) {
+  var s = p2.spacing, m = void 0 === s ? "small" : s, c = p2.fields, u = p2.onFieldsChange, f = p2.children, j = p2.errorText, d = a(p2, n), b = [];
+  return m && b.push("spacing-".concat(m)), c && c.length > 0 && (f = [o(c, u, m), f]), /* @__PURE__ */ t.createElement(r, i({ as: "form", "data-form": true, ref: l, classNames: b }, d), f, j && /* @__PURE__ */ t.createElement(e, { kind: "error" }, j));
+});
+export {
+  p as Form
+};

package/dist/components/Form/{FormWrapper/FormWrapper.stories.d.ts → Form/Form.stories.d.ts}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { FormWrapper } from "./FormWrapper";
-declare const meta: Meta<typeof FormWrapper>;
+import { Form } from "./Form";
+declare const meta: Meta<typeof Form>;
 export default meta;
-type Story = StoryObj<typeof FormWrapper>;
+type Story = StoryObj<typeof Form>;
 export declare const Default: Story;
 export declare const UsingFieldsProp: Story;

package/dist/components/Form/{FormWrapper → Form}/FormGenerator.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../Element/Element.cjs"),r=require("../../Row/Row.cjs"),n=require("../../Portion/Portion.cjs"),o=require("../InputLabel/InputLabel.cjs"),a=require("../InputField/InputField.cjs"),i=require("../InputField/FileUpload.cjs"),l=require("../CheckBox/CheckBox.cjs"),u=require("../CheckBox/Switch.cjs"),p=require("../RadioButton/RadioButton.cjs"),c=require("../RadioButton/RadioGroup.cjs"),s=require("../Select/Select.cjs"),d=require("../TextArea/TextArea.cjs");require("../BaseInputComponent/BaseInputComponent.cjs"),require("../FormItem/FormItem.cjs");var b=["as"],S=["desktopSpan","tabletLandscapeSpan","tabletPortraitSpan","mobileSpan","isHorizontal"];function j(){return j=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},j.apply(this,arguments)}function m(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var f={CheckBox:l.CheckBox,Switch:u.Switch,InputField:a.InputField,FileUpload:i.FileUpload,InputLabel:o.InputLabel,RadioButton:p.RadioButton,RadioGroup:c.RadioGroup,Select:s.Select,TextArea:d.TextArea,Empty:"div"},h=function(r,n){var o=r.as,i=m(r,b);return e.createElement(t.Element,j({as:f[o]||a.InputField},i,{isFullWidth:!0,onChange:n}))};exports.generateFormThroughConfig=function(t,o,a){var i=[];for(var l in t){var u=t[l],p=u.desktopSpan,c=u.tabletLandscapeSpan,s=u.tabletPortraitSpan,d=u.mobileSpan,b=u.isHorizontal,f=m(u,S),g={desktopSpan:p,tabletLandscapeSpan:c,tabletPortraitSpan:s,mobileSpan:d,isHorizontal:b};i.push(e.createElement(n.Portion,j({},g,{key:"fields-".concat(l)}),h(f,o)))}return e.createElement(r.Row,{layout:"grid",gutters:a},i)};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../Element/Element.cjs"),r=require("../../Row/Row.cjs"),n=require("../../Portion/Portion.cjs"),o=require("../InputLabel/InputLabel.cjs"),a=require("../InputField/InputField.cjs"),i=require("../InputField/FileUpload.cjs"),l=require("../Checkbox/Checkbox.cjs"),u=require("../Checkbox/Switch.cjs"),p=require("../RadioButton/RadioButton.cjs"),c=require("../RadioButton/RadioGroup.cjs"),s=require("../Select/Select.cjs"),d=require("../TextArea/TextArea.cjs");require("../BaseInputComponent/BaseInputComponent.cjs"),require("../FormItem/FormItem.cjs");var b=["as"],S=["desktopSpan","tabletLandscapeSpan","tabletPortraitSpan","mobileSpan","isHorizontal"];function j(){return j=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},j.apply(this,arguments)}function m(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var f={Checkbox:l.Checkbox,Switch:u.Switch,InputField:a.InputField,FileUpload:i.FileUpload,InputLabel:o.InputLabel,RadioButton:p.RadioButton,RadioGroup:c.RadioGroup,Select:s.Select,TextArea:d.TextArea,Empty:"div"},h=function(r,n){var o=r.as,i=m(r,b);return e.createElement(t.Element,j({as:f[o]||a.InputField},i,{isFullWidth:!0,onChange:n}))};exports.generateFormThroughConfig=function(t,o,a){var i=[];for(var l in t){var u=t[l],p=u.desktopSpan,c=u.tabletLandscapeSpan,s=u.tabletPortraitSpan,d=u.mobileSpan,b=u.isHorizontal,f=m(u,S),g={desktopSpan:p,tabletLandscapeSpan:c,tabletPortraitSpan:s,mobileSpan:d,isHorizontal:b};i.push(e.createElement(n.Portion,j({},g,{key:"fields-".concat(l)}),h(f,o)))}return e.createElement(r.Row,{layout:"grid",gutters:a},i)};

package/dist/components/Form/{FormWrapper → Form}/FormGenerator.js

@@ -5,24 +5,24 @@ import { Portion as r } from "../../Portion/Portion.js";
 import { InputLabel as n } from "../InputLabel/InputLabel.js";
 import { InputField as a } from "../InputField/InputField.js";
 import { FileUpload as i } from "../InputField/FileUpload.js";
-import { CheckBox as p } from "../CheckBox/CheckBox.js";
-import { Switch as l } from "../CheckBox/Switch.js";
+import { Checkbox as p } from "../Checkbox/Checkbox.js";
+import { Switch as l } from "../Checkbox/Switch.js";
 import { RadioButton as m } from "../RadioButton/RadioButton.js";
 import { RadioGroup as s } from "../RadioButton/RadioGroup.js";
 import { Select as u } from "../Select/Select.js";
 import { TextArea as c } from "../TextArea/TextArea.js";
 import "../BaseInputComponent/BaseInputComponent.js";
 import "../FormItem/FormItem.js";
-var f = ["as"], d = ["desktopSpan", "tabletLandscapeSpan", "tabletPortraitSpan", "mobileSpan", "isHorizontal"];
-function b() {
-  return b = Object.assign ? Object.assign.bind() : function(t2) {
+var f = ["as"], b = ["desktopSpan", "tabletLandscapeSpan", "tabletPortraitSpan", "mobileSpan", "isHorizontal"];
+function d() {
+  return d = Object.assign ? Object.assign.bind() : function(t2) {
     for (var e2 = 1; e2 < arguments.length; e2++) {
       var o2 = arguments[e2];
       for (var r2 in o2)
         Object.prototype.hasOwnProperty.call(o2, r2) && (t2[r2] = o2[r2]);
     }
     return t2;
-  }, b.apply(this, arguments);
+  }, d.apply(this, arguments);
 }
 function j(t2, e2) {
   if (null == t2)
@@ -42,14 +42,14 @@ function j(t2, e2) {
   }
   return n2;
 }
-var S = { CheckBox: p, Switch: l, InputField: a, FileUpload: i, InputLabel: n, RadioButton: m, RadioGroup: s, Select: u, TextArea: c, Empty: "div" }, h = function(o2, r2) {
+var S = { Checkbox: p, Switch: l, InputField: a, FileUpload: i, InputLabel: n, RadioButton: m, RadioGroup: s, Select: u, TextArea: c, Empty: "div" }, h = function(o2, r2) {
   var n2 = o2.as, i2 = j(o2, f);
-  return t.createElement(e, b({ as: S[n2] || a }, i2, { isFullWidth: true, onChange: r2 }));
+  return t.createElement(e, d({ as: S[n2] || a }, i2, { isFullWidth: true, onChange: r2 }));
 }, v = function(e2, n2, a2) {
   var i2 = [];
   for (var p2 in e2) {
-    var l2 = e2[p2], m2 = l2.desktopSpan, s2 = l2.tabletLandscapeSpan, u2 = l2.tabletPortraitSpan, c2 = l2.mobileSpan, f2 = l2.isHorizontal, S2 = j(l2, d), v2 = { desktopSpan: m2, tabletLandscapeSpan: s2, tabletPortraitSpan: u2, mobileSpan: c2, isHorizontal: f2 };
-    i2.push(/* @__PURE__ */ t.createElement(r, b({}, v2, { key: "fields-".concat(p2) }), h(S2, n2)));
+    var l2 = e2[p2], m2 = l2.desktopSpan, s2 = l2.tabletLandscapeSpan, u2 = l2.tabletPortraitSpan, c2 = l2.mobileSpan, f2 = l2.isHorizontal, S2 = j(l2, b), v2 = { desktopSpan: m2, tabletLandscapeSpan: s2, tabletPortraitSpan: u2, mobileSpan: c2, isHorizontal: f2 };
+    i2.push(/* @__PURE__ */ t.createElement(r, d({}, v2, { key: "fields-".concat(p2) }), h(S2, n2)));
   }
   return t.createElement(o, { layout: "grid", gutters: a2 }, i2);
 };

package/dist/components/Form/FormItemGroup/FormItemGroup.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { CommonAndHTMLProps } from "../../Element/constants";
+import { CommonAndHTMLProps, SpacingTypes } from "../../Element/constants";
 export interface FormItemGroupCustomProps {
     isJoint?: boolean;
     retainLayout?: boolean;
-    spacing?: string;
+    spacing?: SpacingTypes;
 }
 export type FormItemGroupElementType = HTMLDivElement;
 export type FormItemGroupProps = Omit<CommonAndHTMLProps<FormItemGroupElementType>, keyof FormItemGroupCustomProps> & FormItemGroupCustomProps;

package/dist/components/Form/InputField/InputField.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../BaseInputComponent/BaseInputComponent.cjs");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},r.apply(this,arguments)}require("../../Element/Element.cjs"),require("../InputLabel/InputLabel.cjs"),require("../FormItem/FormItem.cjs");var n=e.forwardRef((function(n,o){var u=r({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(n),n));return e.createElement(t.BaseInputComponent,r({as:"input","data-input":!0,ref:o,placeholder:" "},u))}));exports.InputField=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../BaseInputComponent/BaseInputComponent.cjs");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},r.apply(this,arguments)}require("../../Element/Element.cjs"),require("../InputLabel/InputLabel.cjs"),require("../FormItem/FormItem.cjs");var n=e.forwardRef((function(n,o){var u=r({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(n),n));return e.createElement(t.BaseInputComponent,r({as:"input","data-input-field":!0,ref:o,placeholder:" "},u))}));exports.InputField=n;

package/dist/components/Form/InputField/InputField.js

@@ -18,7 +18,7 @@ var n = /* @__PURE__ */ t.forwardRef(function(n2, o) {
     if (null == t2)
       throw new TypeError("Cannot destructure " + t2);
   }(n2), n2));
-  return t.createElement(r, e({ as: "input", "data-input": true, ref: o, placeholder: " " }, a));
+  return t.createElement(r, e({ as: "input", "data-input-field": true, ref: o, placeholder: " " }, a));
 });
 export {
   n as InputField

package/dist/components/Form/PinInputField/PinInputField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../Row/Row.cjs"),r=require("../InputField/InputField.cjs");function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}require("../../Element/Element.cjs"),require("../BaseInputComponent/BaseInputComponent.cjs"),require("../InputLabel/InputLabel.cjs"),require("../FormItem/FormItem.cjs");var o=["numberOfFields","onChange","type","mask","isOTP","autoFocus","pasteFromClipboard","spacing","focusFirstInputOnReset"];function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function i(e){return function(e){if(Array.isArray(e))return p(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||s(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t,r){var o;return o=function(e,t){if("object"!=n(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!=n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(t),(t="symbol"==n(o)?o:String(o))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,u,i,l=[],a=!0,c=!1;try{if(u=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;a=!1}else for(;!(a=(n=u.call(r)).done)&&(l.push(n.value),l.length!==t);a=!0);}catch(f){c=!0,o=f}finally{try{if(!a&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(c)throw o}}return l}}(e,t)||s(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){if(e){if("string"==typeof e)return p(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?p(e,t):void 0}}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function y(e,t){return("alphanumeric"===t?/^[a-zA-Z0-9]+$/i:/^[0-9]+$/).test(e)}var b=e.forwardRef((function(n,l){var c=n.numberOfFields,s=n.onChange,p=n.type,b=void 0===p?"number":p,m=n.mask,v=void 0!==m&&m,d=n.isOTP,g=void 0!==d&&d,h=n.autoFocus,O=void 0!==h&&h,j=n.pasteFromClipboard,S=void 0===j?"enabled":j,w=n.spacing,A=void 0===w?"small":w,I=n.focusFirstInputOnReset,P=void 0===I||I,F=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(n,o),k=e.useRef(null),C=f(e.useState([]),2),E=C[0],R=C[1],x=f(e.useState([]),2),T=x[0],q=x[1],D=f(e.useState(!0),2),B=D[0],L=D[1],M=f(e.useState(-1),2),$=M[0],z=M[1],H=e.useCallback((function(e){var t,r=E[e];null==r||null===(t=r.current)||void 0===t||t.focus()}),[E]);e.useEffect((function(){R((function(t){return Array(c).fill(0).map((function(r,n){var o,u=t[n]||e.createRef();return O&&0===n&&(null===(o=u.current)||void 0===o||o.focus()),u}))}))}),[c,O]),e.useImperativeHandle(l,(function(){return a(a({},k.current),{},{reset:function(){U()}})}),[E]);var K=e.useCallback((function(e){if(B){var t=e+1<c?e+1:null;t&&H(t)}}),[H,c,B]),U=e.useCallback((function(){q(Array(c).fill("")),null==s||s(""),P&&(H(0),z(0))}),[c,s,H,P]),Z=e.useCallback((function(e,t){var r=i(T);r[t]=e,q(r),null==s||s(r.join("")),""!==e&&r.length===c&&r.every((function(e){return null!=e&&""!==e}))&&t==c-1||(L(!0),K(t))}),[K,c,s,T]),G=function(){z(-1)};return e.createElement(t.Row,u({layout:"flexbox","data-pin-input-field":!0,gutters:A,ref:k},F),i(Array(c)).map((function(t,n){return e.createElement(r.InputField,{key:n,ref:E[n],type:v?"password":"number"===b?"tel":"text",inputMode:"number"===b?"numeric":"text",onChange:function(e){return function(e,t){var r=e.currentTarget.value,n=T[t];if(""!==r)if(r.length>1&&t<c-1){if(y(r,b)){var o=[];o=""==n?r.split("").filter((function(e,r){return t+r<c})):e.currentTarget.selectionEnd===r.length?r.split("").filter((function(e,r){return r>0&&t+r-1<c})):r.split("").filter((function(e,n){return n<r.length-1&&t+n<c})),q((function(e){return e.map((function(e,r){return r>=t&&r<t+o.length?o[r-t]:e}))})),H(t+o.length<c?t+o.length:c-1),null==s||s(o.join(""))}}else{var u=r;(null==n?void 0:n.length)>0&&(n[0]===r.charAt(0)?u=r.charAt(1):n[0]===r.charAt(1)&&(u=r.charAt(0))),y(u,b)&&Z(u,t)}else Z("",t)}(e,n)},onKeyDown:function(e){return function(e,t){if("Backspace"===e.key)if(""===e.target.value){if(t>0){var r=t-1;Z("",r),H(r),L(!0)}}else L(!1);else if("Escape"===e.key){var n;null===(n=E[t].current)||void 0===n||n.blur(),G()}else"ArrowRight"===e.key?t<c-1&&H(t+1):"ArrowLeft"===e.key&&t>0&&H(t-1)}(e,n)},onFocus:function(e){z(n)},onSelect:function(e){return t=e.target,void setTimeout((function(){t.setSelectionRange(t.value.length,t.value.length)}),0);var t},onBlur:G,placeholder:$!==n?"⦁":void 0,autoComplete:g?"one-time-code":"off",value:T[n]||"",autoFocus:O&&0===n,onCopy:function(e){return"disabled"===S&&e.preventDefault()},onPaste:function(e){return"disabled"===S&&e.preventDefault()}})})))}));exports.PinInputField=b;

package/dist/components/Form/PinInputField/PinInputField.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { CommonAndHTMLProps, SpacingTypes } from "../../Element/constants";
+type PinInputFieldCustomProps = {
+    numberOfFields: number;
+    onChange?: (value: string) => void;
+    type?: "alphanumeric" | "number";
+    mask?: boolean;
+    isOTP?: boolean;
+    autoFocus?: boolean;
+    pasteFromClipboard?: "enabled" | "disabled";
+    spacing?: SpacingTypes;
+    focusFirstInputOnReset?: boolean;
+};
+export type PinInputFieldElementType = HTMLDivElement & {
+    reset: () => void;
+};
+export type PinInputFieldProps = Omit<CommonAndHTMLProps<PinInputFieldElementType>, keyof PinInputFieldCustomProps> & PinInputFieldCustomProps;
+export declare const PinInputField: React.ForwardRefExoticComponent<Omit<CommonAndHTMLProps<PinInputFieldElementType>, keyof PinInputFieldCustomProps> & PinInputFieldCustomProps & React.RefAttributes<PinInputFieldElementType>>;
+export {};

package/dist/components/Form/PinInputField/PinInputField.js

@@ -0,0 +1,237 @@
+import t, { useRef as e, useState as r, useCallback as n, useEffect as o, createRef as i, useImperativeHandle as u } from "react";
+import { Row as l } from "../../Row/Row.js";
+import { InputField as a } from "../InputField/InputField.js";
+import "../../Element/Element.js";
+import "../BaseInputComponent/BaseInputComponent.js";
+import "../InputLabel/InputLabel.js";
+import "../FormItem/FormItem.js";
+function c(t2) {
+  return (c = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t3) {
+    return typeof t3;
+  } : function(t3) {
+    return t3 && "function" == typeof Symbol && t3.constructor === Symbol && t3 !== Symbol.prototype ? "symbol" : typeof t3;
+  })(t2);
+}
+var f = ["numberOfFields", "onChange", "type", "mask", "isOTP", "autoFocus", "pasteFromClipboard", "spacing", "focusFirstInputOnReset"];
+function s() {
+  return s = Object.assign ? Object.assign.bind() : function(t2) {
+    for (var e2 = 1; e2 < arguments.length; e2++) {
+      var r2 = arguments[e2];
+      for (var n2 in r2)
+        Object.prototype.hasOwnProperty.call(r2, n2) && (t2[n2] = r2[n2]);
+    }
+    return t2;
+  }, s.apply(this, arguments);
+}
+function p(t2) {
+  return function(t3) {
+    if (Array.isArray(t3))
+      return g(t3);
+  }(t2) || function(t3) {
+    if ("undefined" != typeof Symbol && null != t3[Symbol.iterator] || null != t3["@@iterator"])
+      return Array.from(t3);
+  }(t2) || d(t2) || function() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }();
+}
+function y(t2, e2) {
+  var r2 = Object.keys(t2);
+  if (Object.getOwnPropertySymbols) {
+    var n2 = Object.getOwnPropertySymbols(t2);
+    e2 && (n2 = n2.filter(function(e3) {
+      return Object.getOwnPropertyDescriptor(t2, e3).enumerable;
+    })), r2.push.apply(r2, n2);
+  }
+  return r2;
+}
+function m(t2) {
+  for (var e2 = 1; e2 < arguments.length; e2++) {
+    var r2 = null != arguments[e2] ? arguments[e2] : {};
+    e2 % 2 ? y(Object(r2), true).forEach(function(e3) {
+      b(t2, e3, r2[e3]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t2, Object.getOwnPropertyDescriptors(r2)) : y(Object(r2)).forEach(function(e3) {
+      Object.defineProperty(t2, e3, Object.getOwnPropertyDescriptor(r2, e3));
+    });
+  }
+  return t2;
+}
+function b(t2, e2, r2) {
+  var n2;
+  return n2 = function(t3, e3) {
+    if ("object" != c(t3) || !t3)
+      return t3;
+    var r3 = t3[Symbol.toPrimitive];
+    if (void 0 !== r3) {
+      var n3 = r3.call(t3, e3 || "default");
+      if ("object" != c(n3))
+        return n3;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === e3 ? String : Number)(t3);
+  }(e2, "string"), (e2 = "symbol" == c(n2) ? n2 : String(n2)) in t2 ? Object.defineProperty(t2, e2, { value: r2, enumerable: true, configurable: true, writable: true }) : t2[e2] = r2, t2;
+}
+function v(t2, e2) {
+  return function(t3) {
+    if (Array.isArray(t3))
+      return t3;
+  }(t2) || function(t3, e3) {
+    var r2 = null == t3 ? null : "undefined" != typeof Symbol && t3[Symbol.iterator] || t3["@@iterator"];
+    if (null != r2) {
+      var n2, o2, i2, u2, l2 = [], a2 = true, c2 = false;
+      try {
+        if (i2 = (r2 = r2.call(t3)).next, 0 === e3) {
+          if (Object(r2) !== r2)
+            return;
+          a2 = false;
+        } else
+          for (; !(a2 = (n2 = i2.call(r2)).done) && (l2.push(n2.value), l2.length !== e3); a2 = true)
+            ;
+      } catch (t4) {
+        c2 = true, o2 = t4;
+      } finally {
+        try {
+          if (!a2 && null != r2.return && (u2 = r2.return(), Object(u2) !== u2))
+            return;
+        } finally {
+          if (c2)
+            throw o2;
+        }
+      }
+      return l2;
+    }
+  }(t2, e2) || d(t2, e2) || function() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }();
+}
+function d(t2, e2) {
+  if (t2) {
+    if ("string" == typeof t2)
+      return g(t2, e2);
+    var r2 = Object.prototype.toString.call(t2).slice(8, -1);
+    return "Object" === r2 && t2.constructor && (r2 = t2.constructor.name), "Map" === r2 || "Set" === r2 ? Array.from(t2) : "Arguments" === r2 || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r2) ? g(t2, e2) : void 0;
+  }
+}
+function g(t2, e2) {
+  (null == e2 || e2 > t2.length) && (e2 = t2.length);
+  for (var r2 = 0, n2 = new Array(e2); r2 < e2; r2++)
+    n2[r2] = t2[r2];
+  return n2;
+}
+function h(t2, e2) {
+  if (null == t2)
+    return {};
+  var r2, n2, o2 = function(t3, e3) {
+    if (null == t3)
+      return {};
+    var r3, n3, o3 = {}, i3 = Object.keys(t3);
+    for (n3 = 0; n3 < i3.length; n3++)
+      r3 = i3[n3], e3.indexOf(r3) >= 0 || (o3[r3] = t3[r3]);
+    return o3;
+  }(t2, e2);
+  if (Object.getOwnPropertySymbols) {
+    var i2 = Object.getOwnPropertySymbols(t2);
+    for (n2 = 0; n2 < i2.length; n2++)
+      r2 = i2[n2], e2.indexOf(r2) >= 0 || Object.prototype.propertyIsEnumerable.call(t2, r2) && (o2[r2] = t2[r2]);
+  }
+  return o2;
+}
+function O(t2, e2) {
+  return ("alphanumeric" === e2 ? /^[a-zA-Z0-9]+$/i : /^[0-9]+$/).test(t2);
+}
+var j = /* @__PURE__ */ t.forwardRef(function(c2, y2) {
+  var b2 = c2.numberOfFields, d2 = c2.onChange, g2 = c2.type, j2 = void 0 === g2 ? "number" : g2, w = c2.mask, S = void 0 !== w && w, A = c2.isOTP, P = void 0 !== A && A, I = c2.autoFocus, F = void 0 !== I && I, E = c2.pasteFromClipboard, k = void 0 === E ? "enabled" : E, C = c2.spacing, x = void 0 === C ? "small" : C, T = c2.focusFirstInputOnReset, D = void 0 === T || T, R = h(c2, f), B = e(null), L = v(r([]), 2), $ = L[0], M = L[1], z = v(r([]), 2), K = z[0], N = z[1], U = v(r(true), 2), Z = U[0], q = U[1], G = v(r(-1), 2), H = G[0], J = G[1], Q = n(function(t2) {
+    var e2, r2 = $[t2];
+    null == r2 || null === (e2 = r2.current) || void 0 === e2 || e2.focus();
+  }, [$]);
+  o(function() {
+    M(function(t2) {
+      return Array(b2).fill(0).map(function(e2, r2) {
+        var n2, o2 = t2[r2] || /* @__PURE__ */ i();
+        F && 0 === r2 && (null === (n2 = o2.current) || void 0 === n2 || n2.focus());
+        return o2;
+      });
+    });
+  }, [b2, F]), u(y2, function() {
+    return m(m({}, B.current), {}, { reset: function() {
+      W();
+    } });
+  }, [$]);
+  var V = n(function(t2) {
+    if (Z) {
+      var e2 = t2 + 1 < b2 ? t2 + 1 : null;
+      e2 && Q(e2);
+    }
+  }, [Q, b2, Z]), W = n(function() {
+    N(Array(b2).fill("")), null == d2 || d2(""), D && (Q(0), J(0));
+  }, [b2, d2, Q, D]), X = n(function(t2, e2) {
+    var r2 = p(K);
+    r2[e2] = t2, N(r2), null == d2 || d2(r2.join("")), "" !== t2 && r2.length === b2 && r2.every(function(t3) {
+      return null != t3 && "" !== t3;
+    }) && e2 == b2 - 1 || (q(true), V(e2));
+  }, [V, b2, d2, K]), Y = function() {
+    J(-1);
+  };
+  return t.createElement(l, s({ layout: "flexbox", "data-pin-input-field": true, gutters: x, ref: B }, R), p(Array(b2)).map(function(e2, r2) {
+    return t.createElement(a, { key: r2, ref: $[r2], type: S ? "password" : "number" === j2 ? "tel" : "text", inputMode: "number" === j2 ? "numeric" : "text", onChange: function(t2) {
+      return function(t3, e3) {
+        var r3 = t3.currentTarget.value, n2 = K[e3];
+        if ("" !== r3)
+          if (r3.length > 1 && e3 < b2 - 1) {
+            if (O(r3, j2)) {
+              var o2 = [];
+              o2 = "" == n2 ? r3.split("").filter(function(t4, r4) {
+                return e3 + r4 < b2;
+              }) : t3.currentTarget.selectionEnd === r3.length ? r3.split("").filter(function(t4, r4) {
+                return r4 > 0 && e3 + r4 - 1 < b2;
+              }) : r3.split("").filter(function(t4, n3) {
+                return n3 < r3.length - 1 && e3 + n3 < b2;
+              }), N(function(t4) {
+                return t4.map(function(t5, r4) {
+                  return r4 >= e3 && r4 < e3 + o2.length ? o2[r4 - e3] : t5;
+                });
+              }), Q(e3 + o2.length < b2 ? e3 + o2.length : b2 - 1), null == d2 || d2(o2.join(""));
+            }
+          } else {
+            var i2 = r3;
+            (null == n2 ? void 0 : n2.length) > 0 && (n2[0] === r3.charAt(0) ? i2 = r3.charAt(1) : n2[0] === r3.charAt(1) && (i2 = r3.charAt(0))), O(i2, j2) && X(i2, e3);
+          }
+        else
+          X("", e3);
+      }(t2, r2);
+    }, onKeyDown: function(t2) {
+      return function(t3, e3) {
+        if ("Backspace" === t3.key)
+          if ("" === t3.target.value) {
+            if (e3 > 0) {
+              var r3 = e3 - 1;
+              X("", r3), Q(r3), q(true);
+            }
+          } else
+            q(false);
+        else if ("Escape" === t3.key) {
+          var n2;
+          null === (n2 = $[e3].current) || void 0 === n2 || n2.blur(), Y();
+        } else
+          "ArrowRight" === t3.key ? e3 < b2 - 1 && Q(e3 + 1) : "ArrowLeft" === t3.key && e3 > 0 && Q(e3 - 1);
+      }(t2, r2);
+    }, onFocus: function(t2) {
+      return function(t3, e3) {
+        J(e3);
+      }(0, r2);
+    }, onSelect: function(t2) {
+      return function(t3) {
+        var e3 = t3.target;
+        setTimeout(function() {
+          e3.setSelectionRange(e3.value.length, e3.value.length);
+        }, 0);
+      }(t2);
+    }, onBlur: Y, placeholder: H !== r2 ? "⦁" : void 0, autoComplete: P ? "one-time-code" : "off", value: K[r2] || "", autoFocus: F && 0 === r2, onCopy: function(t2) {
+      return "disabled" === k && t2.preventDefault();
+    }, onPaste: function(t2) {
+      return "disabled" === k && t2.preventDefault();
+    } });
+  }));
+});
+export {
+  j as PinInputField
+};

package/dist/components/Form/PinInputField/PinInputField.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { PinInputField } from "./PinInputField";
+declare const meta: Meta<typeof PinInputField>;
+export default meta;
+type Story = StoryObj<typeof PinInputField>;
+export declare const Default: Story;

package/dist/components/Form/PinInputField/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PinInputField.cjs");require("react"),require("../../Row/Row.cjs"),require("../../Element/Element.cjs"),require("../InputField/InputField.cjs"),require("../BaseInputComponent/BaseInputComponent.cjs"),require("../InputLabel/InputLabel.cjs"),require("../FormItem/FormItem.cjs"),exports.PinInputField=e.PinInputField;

package/dist/components/Form/PinInputField/index.d.ts

@@ -0,0 +1 @@
+export { PinInputField, type PinInputFieldProps, type PinInputFieldElementType } from "./PinInputField";

package/dist/components/Form/PinInputField/index.js

@@ -0,0 +1,11 @@
+import { PinInputField } from "./PinInputField.js";
+import "react";
+import "../../Row/Row.js";
+import "../../Element/Element.js";
+import "../InputField/InputField.js";
+import "../BaseInputComponent/BaseInputComponent.js";
+import "../InputLabel/InputLabel.js";
+import "../FormItem/FormItem.js";
+export {
+  PinInputField
+};