autoforma 1.0.0

package/storybook-static/assets/AutoForm.stories-CtOmRKOV.js

@@ -0,0 +1,164 @@
+import{j as t}from"./jsx-runtime-D_zvdyIk.js";import{u as Be,m as Ee,f as T,b as w,c as He,d as j,e as ee,U as Ge,g as ze,h as Me,i as oe,j as we,k as ne,l as Ue,n as Le,S as We,o as ce,A as Se,G as S,a as Te,B as z,F as Re,p as qe,q as Je,M as Ye,T as Xe}from"./AutoForm-CEr4m2za.js";import{u as Qe,r as U,j as X}from"./get-contrast-color-Db6nT3bs.js";import{r as de}from"./index-D4lIrffr.js";import{r as Ze}from"./index-BQQLSK9g.js";import"./index-DsJinFGm.js";function ue(e,n){return o=>{if(typeof o!="string"||o.trim().length===0)throw new Error(n);return`${e}-${o}`}}function Z(e,n){let o=e;for(;(o=o.parentElement)&&!o.matches(n););return o}function Ke(e,n,o){for(let r=e-1;r>=0;r-=1)if(!n[r].disabled)return r;if(o){for(let r=n.length-1;r>-1;r-=1)if(!n[r].disabled)return r}return e}function eo(e,n,o){for(let r=e+1;r<n.length;r+=1)if(!n[r].disabled)return r;if(o){for(let r=0;r<n.length;r+=1)if(!n[r].disabled)return r}return e}function oo(e,n,o){return Z(e,o)===Z(n,o)}function no({parentSelector:e,siblingSelector:n,onKeyDown:o,loop:r=!0,activateOnFocus:c=!1,dir:l="rtl",orientation:m}){return i=>{var b;o==null||o(i);const a=Array.from(((b=Z(i.currentTarget,e))==null?void 0:b.querySelectorAll(n))||[]).filter(f=>oo(i.currentTarget,f,e)),d=a.findIndex(f=>i.currentTarget===f),s=eo(d,a,r),h=Ke(d,a,r);switch(i.key){case"ArrowRight":break;case"ArrowLeft":break;case"ArrowUp":{i.stopPropagation(),i.preventDefault(),a[h].focus(),c&&a[h].click();break}case"ArrowDown":{i.stopPropagation(),i.preventDefault(),a[s].focus(),c&&a[s].click();break}case"Home":{i.stopPropagation(),i.preventDefault(),!a[0].disabled&&a[0].focus();break}case"End":{i.stopPropagation(),i.preventDefault();const f=a.length-1;!a[f].disabled&&a[f].focus();break}}}}function Ie(e,n){return Array.isArray(e)?[...e].reduce((o,r)=>({...o,...Ie(r,n)}),{}):typeof e=="function"?e(n):e??{}}function to(e){if(!e||typeof e=="string")return 0;const n=e/36;return Math.round((4+15*n**.25+n/5)*10)}function Q(e){return e!=null&&e.current?e.current.scrollHeight:"auto"}const F=typeof window<"u"&&window.requestAnimationFrame;function ro({transitionDuration:e,transitionTimingFunction:n="ease",onTransitionEnd:o=()=>{},opened:r}){const c=de.useRef(null),l=0,m={display:"none",height:0,overflow:"hidden"},[i,a]=de.useState(r?{}:m),d=u=>{Ze.flushSync(()=>a(u))},s=u=>{d(y=>({...y,...u}))};function h(u){const y=e||to(u);return{transition:`height ${y}ms ${n}, opacity ${y}ms ${n}`}}Be(()=>{typeof F=="function"&&F(r?()=>{s({willChange:"height",display:"block",overflow:"hidden"}),F(()=>{const u=Q(c);s({...h(u),height:u})})}:()=>{const u=Q(c);s({...h(u),willChange:"height",height:u}),F(()=>s({height:l,overflow:"hidden"}))})},[r]);const b=u=>{if(!(u.target!==c.current||u.propertyName!=="height"))if(r){const y=Q(c);y===i.height?d({}):s({height:y}),o()}else i.height===l&&(d(m),o())};function f({style:u={},refKey:y="ref",...p}={}){const x=p[y];return{"aria-hidden":!r,...p,[y]:Ee(c,x),onTransitionEnd:b,style:{boxSizing:"border-box",...u,...i}}}return f}const ao={transitionDuration:200,transitionTimingFunction:"ease",animateOpacity:!0},Pe=T((e,n)=>{const{children:o,in:r,transitionDuration:c,transitionTimingFunction:l,style:m,onTransitionEnd:i,animateOpacity:a,...d}=w("Collapse",ao,e),s=Qe(),h=He(),f=(s.respectReducedMotion?h:!1)?0:c,u=ro({opened:r,transitionDuration:f,transitionTimingFunction:l,onTransitionEnd:i});return f===0?r?t.jsx(j,{...d,children:o}):null:t.jsx(j,{...u({style:{opacity:r||!a?1:0,transition:a?`opacity ${f}ms ${l}`:"none",...Ie(m,s)},ref:n,...d}),children:o})});Pe.displayName="@mantine/core/Collapse";const[io,te]=ee("Accordion component was not found in the tree"),[so,Ne]=ee("Accordion.Item component was not found in the tree");var V={root:"m_9bdbb667",panel:"m_df78851f",content:"m_4ba554d4",itemTitle:"m_8fa820a0",control:"m_4ba585b8","control--default":"m_6939a5e9","control--contained":"m_4271d21b",label:"m_df3ffa0f",chevron:"m_3f35ae96",icon:"m_9bd771fe",item:"m_9bd7b098","item--default":"m_fe19b709","item--contained":"m_1f921b3b","item--filled":"m_2cdf939a","item--separated":"m_9f59b069"};const lo={},re=T((e,n)=>{const{classNames:o,className:r,style:c,styles:l,vars:m,chevron:i,icon:a,onClick:d,onKeyDown:s,children:h,disabled:b,mod:f,...u}=w("AccordionControl",lo,e),{value:y}=Ne(),p=te(),x=p.isItemActive(y),$=typeof p.order=="number",D=`h${p.order}`,P=t.jsxs(Ge,{...u,...p.getStyles("control",{className:r,classNames:o,style:c,styles:l,variant:p.variant}),unstyled:p.unstyled,mod:["accordion-control",{active:x,"chevron-position":p.chevronPosition,disabled:b},f],ref:n,onClick:I=>{d==null||d(I),p.onChange(y)},type:"button",disabled:b,"aria-expanded":x,"aria-controls":p.getRegionId(y),id:p.getControlId(y),onKeyDown:no({siblingSelector:"[data-accordion-control]",parentSelector:"[data-accordion]",activateOnFocus:!1,loop:p.loop,orientation:"vertical",onKeyDown:s}),children:[t.jsx(j,{component:"span",mod:{rotate:!p.disableChevronRotation&&x,position:p.chevronPosition},...p.getStyles("chevron",{classNames:o,styles:l}),children:i||p.chevron}),t.jsx("span",{...p.getStyles("label",{classNames:o,styles:l}),children:h}),a&&t.jsx(j,{component:"span",mod:{"chevron-position":p.chevronPosition},...p.getStyles("icon",{classNames:o,styles:l}),children:a})]});return $?t.jsx(D,{...p.getStyles("itemTitle",{classNames:o,styles:l}),children:P}):P});re.displayName="@mantine/core/AccordionControl";re.classes=V;const co={},ae=T((e,n)=>{const{classNames:o,className:r,style:c,styles:l,vars:m,value:i,mod:a,...d}=w("AccordionItem",co,e),s=te();return t.jsx(so,{value:{value:i},children:t.jsx(j,{ref:n,mod:[{active:s.isItemActive(i)},a],...s.getStyles("item",{className:r,classNames:o,styles:l,style:c,variant:s.variant}),...d})})});ae.displayName="@mantine/core/AccordionItem";ae.classes=V;const uo={},ie=T((e,n)=>{const{classNames:o,className:r,style:c,styles:l,vars:m,children:i,...a}=w("AccordionPanel",uo,e),{value:d}=Ne(),s=te();return t.jsx(Pe,{ref:n,...s.getStyles("panel",{className:r,classNames:o,style:c,styles:l}),...a,in:s.isItemActive(d),transitionDuration:s.transitionDuration??200,role:"region",id:s.getRegionId(d),"aria-labelledby":s.getControlId(d),children:t.jsx("div",{...s.getStyles("content",{classNames:o,styles:l}),children:i})})});ie.displayName="@mantine/core/AccordionPanel";ie.classes=V;const mo={multiple:!1,disableChevronRotation:!1,chevronPosition:"right",variant:"default",chevron:t.jsx(we,{})},ho=ne((e,{transitionDuration:n,chevronSize:o,radius:r})=>({root:{"--accordion-transition-duration":n===void 0?void 0:`${n}ms`,"--accordion-chevron-size":o===void 0?void 0:U(o),"--accordion-radius":r===void 0?void 0:Ue(r)}}));function v(e){const n=w("Accordion",mo,e),{classNames:o,className:r,style:c,styles:l,unstyled:m,vars:i,children:a,multiple:d,value:s,defaultValue:h,onChange:b,id:f,loop:u,transitionDuration:y,disableChevronRotation:p,chevronPosition:x,chevronSize:$,order:D,chevron:P,variant:I,radius:L,...W}=n,N=ze(f),[C,q]=Me({value:s,defaultValue:h,finalValue:d?[]:null,onChange:b}),J=A=>Array.isArray(C)?C.includes(A):A===C,Y=A=>{const $e=Array.isArray(C)?C.includes(A)?C.filter(De=>De!==A):[...C,A]:A===C?null:A;q($e)},O=oe({name:"Accordion",classes:V,props:n,className:r,style:c,classNames:o,styles:l,unstyled:m,vars:i,varsResolver:ho});return t.jsx(io,{value:{isItemActive:J,onChange:Y,getControlId:ue(`${N}-control`,"Accordion.Item component was rendered with invalid value or without value"),getRegionId:ue(`${N}-panel`,"Accordion.Item component was rendered with invalid value or without value"),transitionDuration:y,disableChevronRotation:p,chevronPosition:x,order:D,chevron:P,loop:u,getStyles:O,variant:I,unstyled:m},children:t.jsx(j,{...O("root"),id:N,...W,variant:I,"data-accordion":!0,children:a})})}const fo=e=>e;v.extend=fo;v.withProps=Le(v);v.classes=V;v.displayName="@mantine/core/Accordion";v.Item=ae;v.Panel=ie;v.Control=re;v.Chevron=we;const[po,bo]=ee("Table component was not found in the tree");var k={table:"m_b23fa0ef",th:"m_4e7aa4f3",tr:"m_4e7aa4fd",td:"m_4e7aa4ef",tbody:"m_b2404537",thead:"m_b242d975",caption:"m_9e5a3ac7",scrollContainer:"m_a100c15",scrollContainerInner:"m_62259741"};function go(e,n){if(!n)return;const o={};return n.columnBorder&&e.withColumnBorders&&(o["data-with-column-border"]=!0),n.rowBorder&&e.withRowBorders&&(o["data-with-row-border"]=!0),n.striped&&e.striped&&(o["data-striped"]=e.striped),n.highlightOnHover&&e.highlightOnHover&&(o["data-hover"]=!0),n.captionSide&&e.captionSide&&(o["data-side"]=e.captionSide),n.stickyHeader&&e.stickyHeader&&(o["data-sticky"]=!0),o}function R(e,n){const o=`Table${e.charAt(0).toUpperCase()}${e.slice(1)}`,r=T((c,l)=>{const m=w(o,{},c),{classNames:i,className:a,style:d,styles:s,...h}=m,b=bo();return t.jsx(j,{component:e,ref:l,...go(b,n),...b.getStyles(e,{className:a,classNames:i,style:d,styles:s,props:m}),...h})});return r.displayName=`@mantine/core/${o}`,r.classes=k,r}const K=R("th",{columnBorder:!0}),Oe=R("td",{columnBorder:!0}),M=R("tr",{rowBorder:!0,striped:!0,highlightOnHover:!0}),Fe=R("thead",{stickyHeader:!0}),_e=R("tbody"),Ve=R("tfoot"),ke=R("caption",{captionSide:!0});function se({data:e}){return t.jsxs(t.Fragment,{children:[e.caption&&t.jsx(ke,{children:e.caption}),e.head&&t.jsx(Fe,{children:t.jsx(M,{children:e.head.map((n,o)=>t.jsx(K,{children:n},o))})}),e.body&&t.jsx(_e,{children:e.body.map((n,o)=>t.jsx(M,{children:n.map((r,c)=>t.jsx(Oe,{children:r},c))},o))}),e.foot&&t.jsx(Ve,{children:t.jsx(M,{children:e.foot.map((n,o)=>t.jsx(K,{children:n},o))})})]})}se.displayName="@mantine/core/TableDataRenderer";const yo={type:"scrollarea"},vo=ne((e,{minWidth:n,maxHeight:o,type:r})=>({scrollContainer:{"--table-min-width":U(n),"--table-max-height":U(o),"--table-overflow":r==="native"?"auto":void 0}})),le=T((e,n)=>{const o=w("TableScrollContainer",yo,e),{classNames:r,className:c,style:l,styles:m,unstyled:i,vars:a,children:d,minWidth:s,maxHeight:h,type:b,...f}=o,u=oe({name:"TableScrollContainer",classes:k,props:o,className:c,style:l,classNames:r,styles:m,unstyled:i,vars:a,varsResolver:vo,rootSelector:"scrollContainer"});return t.jsx(j,{component:b==="scrollarea"?We:"div",...b==="scrollarea"?h?{offsetScrollbars:"xy"}:{offsetScrollbars:"x"}:{},ref:n,...u("scrollContainer"),...f,children:t.jsx("div",{...u("scrollContainerInner"),children:d})})});le.classes=k;le.displayName="@mantine/core/TableScrollContainer";const xo={withRowBorders:!0,verticalSpacing:7},Co=ne((e,{layout:n,captionSide:o,horizontalSpacing:r,verticalSpacing:c,borderColor:l,stripedColor:m,highlightOnHoverColor:i,striped:a,highlightOnHover:d,stickyHeaderOffset:s,stickyHeader:h})=>({table:{"--table-layout":n,"--table-caption-side":o,"--table-horizontal-spacing":ce(r),"--table-vertical-spacing":ce(c),"--table-border-color":l?X(l,e):void 0,"--table-striped-color":a&&m?X(m,e):void 0,"--table-highlight-on-hover-color":d&&i?X(i,e):void 0,"--table-sticky-header-offset":h?U(s):void 0}})),g=T((e,n)=>{const o=w("Table",xo,e),{classNames:r,className:c,style:l,styles:m,unstyled:i,vars:a,horizontalSpacing:d,verticalSpacing:s,captionSide:h,stripedColor:b,highlightOnHoverColor:f,striped:u,highlightOnHover:y,withColumnBorders:p,withRowBorders:x,withTableBorder:$,borderColor:D,layout:P,variant:I,data:L,children:W,stickyHeader:N,stickyHeaderOffset:C,mod:q,tabularNums:J,...Y}=o,O=oe({name:"Table",props:o,className:c,style:l,classes:k,classNames:r,styles:m,unstyled:i,rootSelector:"table",vars:a,varsResolver:Co});return t.jsx(po,{value:{getStyles:O,stickyHeader:N,striped:u===!0?"odd":u||void 0,highlightOnHover:y,withColumnBorders:p,withRowBorders:x,captionSide:h||"bottom"},children:t.jsx(j,{component:"table",variant:I,ref:n,mod:[{"data-with-table-border":$,"data-tabular-nums":J},q],...O("table"),...Y,children:W||!!L&&t.jsx(se,{data:L})})})});g.classes=k;g.displayName="@mantine/core/Table";g.Td=Oe;g.Th=K;g.Tr=M;g.Thead=Fe;g.Tbody=_e;g.Tfoot=Ve;g.Caption=ke;g.ScrollContainer=le;g.DataRenderer=se;const _=[{type:"check",label:"Enabled",name:"enabled",initialValue:!0},{type:"object",name:"personalInformation",label:"Personal Information",fields:[{type:"text",name:"firstName",label:"First Name",initialValue:"Saji"},{type:"text",name:"lastName",label:"Last Name",initialValue:"Nael"},{type:"select",name:"gender",label:"Gender",data:[{label:"Male",value:"male"},{label:"Female",value:"female"}],initialValue:"male"}]},{type:"object",name:"accountInformation",label:"Account Information",fields:[{type:"text",name:"username",label:"Username",initialValue:"saji-nael"},{type:"text",name:"email",label:"Email",initialValue:"saji.nael.98@gmail.com"},{type:"date",name:"dateOfJoin",label:"Date Of Join",initialValue:new Date}]},{type:"object",name:"contactInformation",label:"Contact Information",fields:[{type:"array",name:"phones",label:"Phones",fields:[{type:"text",name:"phoneNo",label:"Phone NO"}]}]}],jo=[..._.slice(0,3),{..._[3],fields:[{..._[3].fields[0],required:!0}]}],No={title:"components/AutoForm",component:Se,tags:["autodocs"],args:{onSubmit:e=>alert(JSON.stringify(e,null,2)),schema:_,container:(e,n,o)=>t.jsxs(t.Fragment,{children:[t.jsx(S,{children:e}),!o&&t.jsx(Te,{justify:"flex-end",children:t.jsx(z,{onClick:n,children:"Submit"})})]}),fieldContainer:(e,n)=>t.jsx(S.Col,{span:{base:12,md:n.type==="object"?12:6},children:e})},argTypes:{values:{description:"Initial form values. Useful for editing or setting default values.",control:!1},schema:{description:"Array of field definitions used to render the form. Each item defines one input field.",control:!1},onSubmit:{description:"Function called with form values when the form is submitted.",control:!1},container:{description:"Function that receives the rendered form and the onSubmit handler. Used to wrap the form with layout and controls.",control:!1},fieldContainer:{description:"Optional function to wrap each individual field with custom layout or styling.",control:!1},customRender:{description:"Optional custom render function to override the default field rendering based on field type.",control:!1},validate:{description:"Optional validation logic. Receives values and returns an object with field errors or nulls.",control:!1},readOnly:{description:"If true, all fields will be rendered in read-only mode.",control:{type:"boolean"}},onFieldChange:{description:"Optional function triggered on field change. You can return modified values dynamically.",control:!1}},parameters:{docs:{description:{component:`
+### 📄 AutoForm
+
+\`AutoForm\` is a dynamic, schema-driven form component designed for full control and customization.
+
+---
+
+### 🧩 AutoFormProps Overview
+
+| Prop             | Type                                                                 | Description |
+|------------------|----------------------------------------------------------------------|-------------|
+| \`schema\`         | \`FieldSchema[]\`                                                      | Array of field definitions |
+| \`onSubmit\`       | \`(values: Record<string, any>) => void\`                             | Called when form is submitted |
+| \`values\`         | \`Record<string, any>\`                                                | Initial values |
+| \`readOnly\`       | \`true?\`                                                              | Makes the form non-editable |
+| \`validate\`       | \`FormValidateInput<Record<string, any>>\`                            | Optional validation function |
+| \`onFieldChange\`  | \`(name, value, values) => Record<string, any>\`                       | Callback when a field changes |
+| \`container\`      | \`(formNode, onSubmit, readOnly) => React.ReactNode\`                  | Customize the outer layout of the form |
+| \`fieldContainer\` | \`(fieldNode, fieldSchema) => React.ReactNode\`                       | Customize how each field is rendered |
+| \`customRender\`   | \`(field, value, error, onChange, values, options, readOnly) => JSX\` | Advanced per-field rendering |
+
+---
+
+### 🧱 Layout Customization
+
+#### 🔲 \`container\`
+
+Use the \`container\` prop to wrap the full form, including layout, submit buttons, etc.
+
+#### 🔳 \`fieldContainer\`
+
+With \`fieldContainer\`, you can wrap **each field** with your own layout:
+
+\`\`\`tsx
+fieldContainer: (field, fieldSchema) => (
+  <Grid.Col span={{ base: 12, md: fieldSchema.type === 'object' ? 12 : 6 }}>
+    {field}
+  </Grid.Col>
+)
+\`\`\`
+
+This allows **full control per field** — spacing, layout, responsiveness, etc.
+
+---
+
+### 🧠 Advanced Rendering with \`customRender\`
+
+\`customRender\` gives you full control over how a field is rendered.
+
+#### 📦 Example
+
+\`\`\`tsx
+customRender: (field, objValue, error, onObjChange, formValues, options, readOnly) => {
+  if (field.type === 'object') {
+    return (
+      <Accordion defaultValue={field.name}>
+        <Accordion.Item value={field.name}>
+          <Accordion.Control>{field.label}</Accordion.Control>
+          <Accordion.Panel>
+            <Grid>
+              {field.fields?.map((childField) => {
+                function onChange(name: string, value: any) {
+                  objValue[name] = value;
+                  onObjChange(field.name, objValue);
+                }
+
+                if (childField.name === 'phones') {
+                  return (
+                    <CustomPhoneList
+                      key={childField.name}
+                      field={childField}
+                      value={objValue[childField.name]}
+                      onChange={onChange}
+                      error={error}
+                      formValues={formValues}
+                      options={options}
+                      readOnly={readOnly}
+                    />
+                  );
+                }
+
+                return (
+                  <Grid.Col key={childField.name} span={6}>
+                    <FieldRender
+                      field={childField}
+                      formValues={formValues}
+                      value={objValue[childField.name]}
+                      onChange={onChange}
+                      readOnly={readOnly}
+                    />
+                  </Grid.Col>
+                );
+              })}
+            </Grid>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    );
+  }
+  return null;
+}
+\`\`\`
+
+You can use this to:
+- Nest fields inside custom layouts
+- Open modals, drawers, or complex editors
+- Show/hide fields dynamically
+- Render fields as fully custom components
+
+---
+        `}}}},B={},E={args:{readOnly:!0}},H={args:{schema:jo,validate:{contactInformation:{phones:{phoneNo:e=>/^(059|056)\d{7}$/.test(e)?null:"Invalid phone number. It must be exactly 10 digits long and start with '059' or '056'."}}}}},G={args:{schema:_,customRender:(e,n,o,r,c,l,m)=>{var i;return e.type==="object"?t.jsx(S.Col,{span:12,children:t.jsx(v,{defaultValue:e.name,variant:"contained",children:t.jsxs(v.Item,{value:e.name,children:[t.jsx(v.Control,{children:e.label}),t.jsx(v.Panel,{children:t.jsx(S,{children:(i=e.fields)==null?void 0:i.map(a=>{const d=(s,h)=>{n[s]=h,r(a.name,n)};return a.name==="phones"?t.jsx(Ao,{error:o,field:a,formValues:c,onChange:d,value:n[a.name],options:l,readOnly:m},a.name):t.jsx(S.Col,{span:{base:12,md:a.type==="object"?12:6},children:t.jsx(Re,{field:a,formValues:c,value:n[a.name],error:void 0,readOnly:m,onChange:d})},a.name)})})})]})})}):null}}},Ao=e=>{const[n,{open:o,close:r}]=qe(!1),{error:c,field:l,formValues:m,onChange:i,value:a,options:d,readOnly:s}=e,h=Je(l.name,i,a);return t.jsx(t.Fragment,{children:t.jsx(Re,{field:l,formValues:m,onChange:i,value:a,error:c,readOnly:s,customRender:()=>t.jsxs(t.Fragment,{children:[t.jsx(Ye,{title:"Add Phone",onClose:r,opened:n,children:t.jsx(Se,{schema:l.fields,fieldContainer:(b,f)=>t.jsx(S.Col,{span:{base:12,md:f.type==="object"?12:6},children:b}),container:(b,f,u)=>t.jsxs(t.Fragment,{children:[t.jsx(S,{children:b}),!u&&t.jsx(Te,{justify:"flex-end",children:t.jsx(z,{onClick:f,children:"Submit"})})]}),onSubmit:b=>{h==null||h.addElement(b),r()}})}),t.jsx(z,{onClick:o,mb:"md",children:"Add Phone"}),a.length>0?t.jsxs(g,{withColumnBorders:!0,withRowBorders:!0,withTableBorder:!0,striped:!0,children:[t.jsx(g.Thead,{children:t.jsxs(g.Tr,{children:[t.jsx(g.Th,{children:"Phone NO."}),t.jsx(g.Th,{children:"Action"})]})}),t.jsx(g.Tbody,{children:a.map((b,f)=>t.jsxs(g.Tr,{children:[t.jsx(g.Td,{children:b.phoneNo}),t.jsx(g.Td,{children:t.jsx(z,{variant:"light",size:"xs",color:"red",onClick:()=>h.removeElement(f),children:"Delete"})})]},f))})]}):t.jsx(Xe,{children:"No phones are inserted"})]})})})};var me,he,fe;B.parameters={...B.parameters,docs:{...(me=B.parameters)==null?void 0:me.docs,source:{originalSource:"{}",...(fe=(he=B.parameters)==null?void 0:he.docs)==null?void 0:fe.source}}};var pe,be,ge;E.parameters={...E.parameters,docs:{...(pe=E.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+  args: {
+    readOnly: true
+  }
+}`,...(ge=(be=E.parameters)==null?void 0:be.docs)==null?void 0:ge.source}}};var ye,ve,xe;H.parameters={...H.parameters,docs:{...(ye=H.parameters)==null?void 0:ye.docs,source:{originalSource:`{
+  args: {
+    schema: schemaWithValidation,
+    validate: {
+      contactInformation: {
+        phones: {
+          phoneNo: (value: string) => {
+            const regex = /^(059|056)\\d{7}$/;
+            return regex.test(value) ? null : "Invalid phone number. It must be exactly 10 digits long and start with '059' or '056'.";
+          }
+        }
+      }
+    }
+  }
+}`,...(xe=(ve=H.parameters)==null?void 0:ve.docs)==null?void 0:xe.source}}};var Ce,je,Ae;G.parameters={...G.parameters,docs:{...(Ce=G.parameters)==null?void 0:Ce.docs,source:{originalSource:`{
+  args: {
+    schema,
+    customRender: (field, objValue, error, onObjChange, formValues, options, readOnly) => {
+      if (field.type === 'object') {
+        return <Grid.Col span={12}>\r
+            <Accordion defaultValue={field.name} variant="contained">\r
+              <Accordion.Item value={field.name}>\r
+                <Accordion.Control>{field.label}</Accordion.Control>\r
+                <Accordion.Panel>\r
+                  <Grid>\r
+                    {field.fields?.map(field => {
+                    const onChange = (name: string, value: any) => {
+                      objValue[name] = value;
+                      onObjChange(field.name, objValue);
+                    };
+                    if (field.name === 'phones') {
+                      return <CustomPhoneList key={field.name} error={error} field={field} formValues={formValues} onChange={onChange} value={objValue[field.name]} options={options} readOnly={readOnly} />;
+                    }
+                    return <Grid.Col key={field.name} span={{
+                      base: 12,
+                      md: field.type === 'object' ? 12 : 6
+                    }}>\r
+                          <FieldRender field={field} formValues={formValues} value={objValue[field.name]} error={undefined} readOnly={readOnly} onChange={onChange} />\r
+                        </Grid.Col>;
+                  })}\r
+                  </Grid>\r
+                </Accordion.Panel>\r
+              </Accordion.Item>\r
+            </Accordion>\r
+          </Grid.Col>;
+      }
+      return null;
+    }
+  }
+}`,...(Ae=(je=G.parameters)==null?void 0:je.docs)==null?void 0:Ae.source}}};const Oo=["Standard","ReadOnly","FormValidation","CustomizedForm"];export{G as CustomizedForm,H as FormValidation,E as ReadOnly,B as Standard,Oo as __namedExportsOrder,No as default};

package/storybook-static/assets/Color-YHDXOIA2-pc5-Ao7n.js

@@ -0,0 +1 @@
+import{d as ce,v as M,C as J,g as he,_ as fe,S as de,M as ge,a as be,b as q}from"./DocsRenderer-CFRXHY34-D-_1VvMG.js";import{r as p,R as m}from"./index-D4lIrffr.js";import"./iframe-CzpwBD2i.js";import"./jsx-runtime-D_zvdyIk.js";import"./index-BQQLSK9g.js";import"./index-DsJinFGm.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./react-18-Dhjvimrl.js";var me=q({"../../node_modules/color-name/index.js"(n,o){o.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),Q=q({"../../node_modules/color-convert/conversions.js"(n,o){var c=me(),h={};for(let e of Object.keys(c))h[c[e]]=e;var i={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};o.exports=i;for(let e of Object.keys(i)){if(!("channels"in i[e]))throw new Error("missing channels property: "+e);if(!("labels"in i[e]))throw new Error("missing channel labels property: "+e);if(i[e].labels.length!==i[e].channels)throw new Error("channel and label counts mismatch: "+e);let{channels:t,labels:r}=i[e];delete i[e].channels,delete i[e].labels,Object.defineProperty(i[e],"channels",{value:t}),Object.defineProperty(i[e],"labels",{value:r})}i.rgb.hsl=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255,l=Math.min(t,r,a),u=Math.max(t,r,a),s=u-l,f,g;u===l?f=0:t===u?f=(r-a)/s:r===u?f=2+(a-t)/s:a===u&&(f=4+(t-r)/s),f=Math.min(f*60,360),f<0&&(f+=360);let b=(l+u)/2;return u===l?g=0:b<=.5?g=s/(u+l):g=s/(2-u-l),[f,g*100,b*100]},i.rgb.hsv=function(e){let t,r,a,l,u,s=e[0]/255,f=e[1]/255,g=e[2]/255,b=Math.max(s,f,g),y=b-Math.min(s,f,g),v=function(w){return(b-w)/6/y+1/2};return y===0?(l=0,u=0):(u=y/b,t=v(s),r=v(f),a=v(g),s===b?l=a-r:f===b?l=1/3+t-a:g===b&&(l=2/3+r-t),l<0?l+=1:l>1&&(l-=1)),[l*360,u*100,b*100]},i.rgb.hwb=function(e){let t=e[0],r=e[1],a=e[2],l=i.rgb.hsl(e)[0],u=1/255*Math.min(t,Math.min(r,a));return a=1-1/255*Math.max(t,Math.max(r,a)),[l,u*100,a*100]},i.rgb.cmyk=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255,l=Math.min(1-t,1-r,1-a),u=(1-t-l)/(1-l)||0,s=(1-r-l)/(1-l)||0,f=(1-a-l)/(1-l)||0;return[u*100,s*100,f*100,l*100]};function d(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}i.rgb.keyword=function(e){let t=h[e];if(t)return t;let r=1/0,a;for(let l of Object.keys(c)){let u=c[l],s=d(e,u);s<r&&(r=s,a=l)}return a},i.keyword.rgb=function(e){return c[e]},i.rgb.xyz=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255;t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92,a=a>.04045?((a+.055)/1.055)**2.4:a/12.92;let l=t*.4124+r*.3576+a*.1805,u=t*.2126+r*.7152+a*.0722,s=t*.0193+r*.1192+a*.9505;return[l*100,u*100,s*100]},i.rgb.lab=function(e){let t=i.rgb.xyz(e),r=t[0],a=t[1],l=t[2];r/=95.047,a/=100,l/=108.883,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,l=l>.008856?l**(1/3):7.787*l+16/116;let u=116*a-16,s=500*(r-a),f=200*(a-l);return[u,s,f]},i.hsl.rgb=function(e){let t=e[0]/360,r=e[1]/100,a=e[2]/100,l,u,s;if(r===0)return s=a*255,[s,s,s];a<.5?l=a*(1+r):l=a+r-a*r;let f=2*a-l,g=[0,0,0];for(let b=0;b<3;b++)u=t+1/3*-(b-1),u<0&&u++,u>1&&u--,6*u<1?s=f+(l-f)*6*u:2*u<1?s=l:3*u<2?s=f+(l-f)*(2/3-u)*6:s=f,g[b]=s*255;return g},i.hsl.hsv=function(e){let t=e[0],r=e[1]/100,a=e[2]/100,l=r,u=Math.max(a,.01);a*=2,r*=a<=1?a:2-a,l*=u<=1?u:2-u;let s=(a+r)/2,f=a===0?2*l/(u+l):2*r/(a+r);return[t,f*100,s*100]},i.hsv.rgb=function(e){let t=e[0]/60,r=e[1]/100,a=e[2]/100,l=Math.floor(t)%6,u=t-Math.floor(t),s=255*a*(1-r),f=255*a*(1-r*u),g=255*a*(1-r*(1-u));switch(a*=255,l){case 0:return[a,g,s];case 1:return[f,a,s];case 2:return[s,a,g];case 3:return[s,f,a];case 4:return[g,s,a];case 5:return[a,s,f]}},i.hsv.hsl=function(e){let t=e[0],r=e[1]/100,a=e[2]/100,l=Math.max(a,.01),u,s;s=(2-r)*a;let f=(2-r)*l;return u=r*l,u/=f<=1?f:2-f,u=u||0,s/=2,[t,u*100,s*100]},i.hwb.rgb=function(e){let t=e[0]/360,r=e[1]/100,a=e[2]/100,l=r+a,u;l>1&&(r/=l,a/=l);let s=Math.floor(6*t),f=1-a;u=6*t-s,(s&1)!==0&&(u=1-u);let g=r+u*(f-r),b,y,v;switch(s){default:case 6:case 0:b=f,y=g,v=r;break;case 1:b=g,y=f,v=r;break;case 2:b=r,y=f,v=g;break;case 3:b=r,y=g,v=f;break;case 4:b=g,y=r,v=f;break;case 5:b=f,y=r,v=g;break}return[b*255,y*255,v*255]},i.cmyk.rgb=function(e){let t=e[0]/100,r=e[1]/100,a=e[2]/100,l=e[3]/100,u=1-Math.min(1,t*(1-l)+l),s=1-Math.min(1,r*(1-l)+l),f=1-Math.min(1,a*(1-l)+l);return[u*255,s*255,f*255]},i.xyz.rgb=function(e){let t=e[0]/100,r=e[1]/100,a=e[2]/100,l,u,s;return l=t*3.2406+r*-1.5372+a*-.4986,u=t*-.9689+r*1.8758+a*.0415,s=t*.0557+r*-.204+a*1.057,l=l>.0031308?1.055*l**(1/2.4)-.055:l*12.92,u=u>.0031308?1.055*u**(1/2.4)-.055:u*12.92,s=s>.0031308?1.055*s**(1/2.4)-.055:s*12.92,l=Math.min(Math.max(0,l),1),u=Math.min(Math.max(0,u),1),s=Math.min(Math.max(0,s),1),[l*255,u*255,s*255]},i.xyz.lab=function(e){let t=e[0],r=e[1],a=e[2];t/=95.047,r/=100,a/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116;let l=116*r-16,u=500*(t-r),s=200*(r-a);return[l,u,s]},i.lab.xyz=function(e){let t=e[0],r=e[1],a=e[2],l,u,s;u=(t+16)/116,l=r/500+u,s=u-a/200;let f=u**3,g=l**3,b=s**3;return u=f>.008856?f:(u-16/116)/7.787,l=g>.008856?g:(l-16/116)/7.787,s=b>.008856?b:(s-16/116)/7.787,l*=95.047,u*=100,s*=108.883,[l,u,s]},i.lab.lch=function(e){let t=e[0],r=e[1],a=e[2],l;l=Math.atan2(a,r)*360/2/Math.PI,l<0&&(l+=360);let u=Math.sqrt(r*r+a*a);return[t,u,l]},i.lch.lab=function(e){let t=e[0],r=e[1],a=e[2]/360*2*Math.PI,l=r*Math.cos(a),u=r*Math.sin(a);return[t,l,u]},i.rgb.ansi16=function(e,t=null){let[r,a,l]=e,u=t===null?i.rgb.hsv(e)[2]:t;if(u=Math.round(u/50),u===0)return 30;let s=30+(Math.round(l/255)<<2|Math.round(a/255)<<1|Math.round(r/255));return u===2&&(s+=60),s},i.hsv.ansi16=function(e){return i.rgb.ansi16(i.hsv.rgb(e),e[2])},i.rgb.ansi256=function(e){let t=e[0],r=e[1],a=e[2];return t===r&&r===a?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(r/255*5)+Math.round(a/255*5)},i.ansi16.rgb=function(e){let t=e%10;if(t===0||t===7)return e>50&&(t+=3.5),t=t/10.5*255,[t,t,t];let r=(~~(e>50)+1)*.5,a=(t&1)*r*255,l=(t>>1&1)*r*255,u=(t>>2&1)*r*255;return[a,l,u]},i.ansi256.rgb=function(e){if(e>=232){let u=(e-232)*10+8;return[u,u,u]}e-=16;let t,r=Math.floor(e/36)/5*255,a=Math.floor((t=e%36)/6)/5*255,l=t%6/5*255;return[r,a,l]},i.rgb.hex=function(e){let t=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return"000000".substring(t.length)+t},i.hex.rgb=function(e){let t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];let r=t[0];t[0].length===3&&(r=r.split("").map(f=>f+f).join(""));let a=parseInt(r,16),l=a>>16&255,u=a>>8&255,s=a&255;return[l,u,s]},i.rgb.hcg=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255,l=Math.max(Math.max(t,r),a),u=Math.min(Math.min(t,r),a),s=l-u,f,g;return s<1?f=u/(1-s):f=0,s<=0?g=0:l===t?g=(r-a)/s%6:l===r?g=2+(a-t)/s:g=4+(t-r)/s,g/=6,g%=1,[g*360,s*100,f*100]},i.hsl.hcg=function(e){let t=e[1]/100,r=e[2]/100,a=r<.5?2*t*r:2*t*(1-r),l=0;return a<1&&(l=(r-.5*a)/(1-a)),[e[0],a*100,l*100]},i.hsv.hcg=function(e){let t=e[1]/100,r=e[2]/100,a=t*r,l=0;return a<1&&(l=(r-a)/(1-a)),[e[0],a*100,l*100]},i.hcg.rgb=function(e){let t=e[0]/360,r=e[1]/100,a=e[2]/100;if(r===0)return[a*255,a*255,a*255];let l=[0,0,0],u=t%1*6,s=u%1,f=1-s,g=0;switch(Math.floor(u)){case 0:l[0]=1,l[1]=s,l[2]=0;break;case 1:l[0]=f,l[1]=1,l[2]=0;break;case 2:l[0]=0,l[1]=1,l[2]=s;break;case 3:l[0]=0,l[1]=f,l[2]=1;break;case 4:l[0]=s,l[1]=0,l[2]=1;break;default:l[0]=1,l[1]=0,l[2]=f}return g=(1-r)*a,[(r*l[0]+g)*255,(r*l[1]+g)*255,(r*l[2]+g)*255]},i.hcg.hsv=function(e){let t=e[1]/100,r=e[2]/100,a=t+r*(1-t),l=0;return a>0&&(l=t/a),[e[0],l*100,a*100]},i.hcg.hsl=function(e){let t=e[1]/100,r=e[2]/100*(1-t)+.5*t,a=0;return r>0&&r<.5?a=t/(2*r):r>=.5&&r<1&&(a=t/(2*(1-r))),[e[0],a*100,r*100]},i.hcg.hwb=function(e){let t=e[1]/100,r=e[2]/100,a=t+r*(1-t);return[e[0],(a-t)*100,(1-a)*100]},i.hwb.hcg=function(e){let t=e[1]/100,r=1-e[2]/100,a=r-t,l=0;return a<1&&(l=(r-a)/(1-a)),[e[0],a*100,l*100]},i.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},i.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},i.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},i.gray.hsl=function(e){return[0,0,e[0]]},i.gray.hsv=i.gray.hsl,i.gray.hwb=function(e){return[0,100,e[0]]},i.gray.cmyk=function(e){return[0,0,0,e[0]]},i.gray.lab=function(e){return[e[0],0,0]},i.gray.hex=function(e){let t=Math.round(e[0]/100*255)&255,r=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return"000000".substring(r.length)+r},i.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),ve=q({"../../node_modules/color-convert/route.js"(n,o){var c=Q();function h(){let t={},r=Object.keys(c);for(let a=r.length,l=0;l<a;l++)t[r[l]]={distance:-1,parent:null};return t}function i(t){let r=h(),a=[t];for(r[t].distance=0;a.length;){let l=a.pop(),u=Object.keys(c[l]);for(let s=u.length,f=0;f<s;f++){let g=u[f],b=r[g];b.distance===-1&&(b.distance=r[l].distance+1,b.parent=l,a.unshift(g))}}return r}function d(t,r){return function(a){return r(t(a))}}function e(t,r){let a=[r[t].parent,t],l=c[r[t].parent][t],u=r[t].parent;for(;r[u].parent;)a.unshift(r[u].parent),l=d(c[r[u].parent][u],l),u=r[u].parent;return l.conversion=a,l}o.exports=function(t){let r=i(t),a={},l=Object.keys(r);for(let u=l.length,s=0;s<u;s++){let f=l[s];r[f].parent!==null&&(a[f]=e(f,r))}return a}}}),pe=q({"../../node_modules/color-convert/index.js"(n,o){var c=Q(),h=ve(),i={},d=Object.keys(c);function e(r){let a=function(...l){let u=l[0];return u==null?u:(u.length>1&&(l=u),r(l))};return"conversion"in r&&(a.conversion=r.conversion),a}function t(r){let a=function(...l){let u=l[0];if(u==null)return u;u.length>1&&(l=u);let s=r(l);if(typeof s=="object")for(let f=s.length,g=0;g<f;g++)s[g]=Math.round(s[g]);return s};return"conversion"in r&&(a.conversion=r.conversion),a}d.forEach(r=>{i[r]={},Object.defineProperty(i[r],"channels",{value:c[r].channels}),Object.defineProperty(i[r],"labels",{value:c[r].labels});let a=h(r);Object.keys(a).forEach(l=>{let u=a[l];i[r][l]=t(u),i[r][l].raw=e(u)})}),o.exports=i}}),_=be(pe());function C(){return(C=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var c=arguments[o];for(var h in c)Object.prototype.hasOwnProperty.call(c,h)&&(n[h]=c[h])}return n}).apply(this,arguments)}function V(n,o){if(n==null)return{};var c,h,i={},d=Object.keys(n);for(h=0;h<d.length;h++)o.indexOf(c=d[h])>=0||(i[c]=n[c]);return i}function L(n){var o=p.useRef(n),c=p.useRef(function(h){o.current&&o.current(h)});return o.current=n,c.current}var S=function(n,o,c){return o===void 0&&(o=0),c===void 0&&(c=1),n>c?c:n<o?o:n},O=function(n){return"touches"in n},B=function(n){return n&&n.ownerDocument.defaultView||self},T=function(n,o,c){var h=n.getBoundingClientRect(),i=O(o)?function(d,e){for(var t=0;t<d.length;t++)if(d[t].identifier===e)return d[t];return d[0]}(o.touches,c):o;return{left:S((i.pageX-(h.left+B(n).pageXOffset))/h.width),top:S((i.pageY-(h.top+B(n).pageYOffset))/h.height)}},W=function(n){!O(n)&&n.preventDefault()},G=m.memo(function(n){var o=n.onMove,c=n.onKey,h=V(n,["onMove","onKey"]),i=p.useRef(null),d=L(o),e=L(c),t=p.useRef(null),r=p.useRef(!1),a=p.useMemo(function(){var f=function(y){W(y),(O(y)?y.touches.length>0:y.buttons>0)&&i.current?d(T(i.current,y,t.current)):b(!1)},g=function(){return b(!1)};function b(y){var v=r.current,w=B(i.current),E=y?w.addEventListener:w.removeEventListener;E(v?"touchmove":"mousemove",f),E(v?"touchend":"mouseup",g)}return[function(y){var v=y.nativeEvent,w=i.current;if(w&&(W(v),!function(k,P){return P&&!O(k)}(v,r.current)&&w)){if(O(v)){r.current=!0;var E=v.changedTouches||[];E.length&&(t.current=E[0].identifier)}w.focus(),d(T(w,v,t.current)),b(!0)}},function(y){var v=y.which||y.keyCode;v<37||v>40||(y.preventDefault(),e({left:v===39?.05:v===37?-.05:0,top:v===40?.05:v===38?-.05:0}))},b]},[e,d]),l=a[0],u=a[1],s=a[2];return p.useEffect(function(){return s},[s]),m.createElement("div",C({},h,{onTouchStart:l,onMouseDown:l,className:"react-colorful__interactive",ref:i,onKeyDown:u,tabIndex:0,role:"slider"}))}),N=function(n){return n.filter(Boolean).join(" ")},F=function(n){var o=n.color,c=n.left,h=n.top,i=h===void 0?.5:h,d=N(["react-colorful__pointer",n.className]);return m.createElement("div",{className:d,style:{top:100*i+"%",left:100*c+"%"}},m.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:o}}))},x=function(n,o,c){return o===void 0&&(o=0),c===void 0&&(c=Math.pow(10,o)),Math.round(c*n)/c},ye={grad:.9,turn:360,rad:360/(2*Math.PI)},xe=function(n){return re(X(n))},X=function(n){return n[0]==="#"&&(n=n.substring(1)),n.length<6?{r:parseInt(n[0]+n[0],16),g:parseInt(n[1]+n[1],16),b:parseInt(n[2]+n[2],16),a:n.length===4?x(parseInt(n[3]+n[3],16)/255,2):1}:{r:parseInt(n.substring(0,2),16),g:parseInt(n.substring(2,4),16),b:parseInt(n.substring(4,6),16),a:n.length===8?x(parseInt(n.substring(6,8),16)/255,2):1}},we=function(n,o){return o===void 0&&(o="deg"),Number(n)*(ye[o]||1)},ke=function(n){var o=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(n);return o?_e({h:we(o[1],o[2]),s:Number(o[3]),l:Number(o[4]),a:o[5]===void 0?1:Number(o[5])/(o[6]?100:1)}):{h:0,s:0,v:0,a:1}},_e=function(n){var o=n.s,c=n.l;return{h:n.h,s:(o*=(c<50?c:100-c)/100)>0?2*o/(c+o)*100:0,v:c+o,a:n.a}},Ee=function(n){return Ce(ee(n))},Z=function(n){var o=n.s,c=n.v,h=n.a,i=(200-o)*c/100;return{h:x(n.h),s:x(i>0&&i<200?o*c/100/(i<=100?i:200-i)*100:0),l:x(i/2),a:x(h,2)}},K=function(n){var o=Z(n);return"hsl("+o.h+", "+o.s+"%, "+o.l+"%)"},I=function(n){var o=Z(n);return"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")"},ee=function(n){var o=n.h,c=n.s,h=n.v,i=n.a;o=o/360*6,c/=100,h/=100;var d=Math.floor(o),e=h*(1-c),t=h*(1-(o-d)*c),r=h*(1-(1-o+d)*c),a=d%6;return{r:x(255*[h,t,e,e,r,h][a]),g:x(255*[r,h,h,t,e,e][a]),b:x(255*[e,e,r,h,h,t][a]),a:x(i,2)}},Me=function(n){var o=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(n);return o?re({r:Number(o[1])/(o[2]?100/255:1),g:Number(o[3])/(o[4]?100/255:1),b:Number(o[5])/(o[6]?100/255:1),a:o[7]===void 0?1:Number(o[7])/(o[8]?100:1)}):{h:0,s:0,v:0,a:1}},j=function(n){var o=n.toString(16);return o.length<2?"0"+o:o},Ce=function(n){var o=n.r,c=n.g,h=n.b,i=n.a,d=i<1?j(x(255*i)):"";return"#"+j(o)+j(c)+j(h)+d},re=function(n){var o=n.r,c=n.g,h=n.b,i=n.a,d=Math.max(o,c,h),e=d-Math.min(o,c,h),t=e?d===o?(c-h)/e:d===c?2+(h-o)/e:4+(o-c)/e:0;return{h:x(60*(t<0?t+6:t)),s:x(d?e/d*100:0),v:x(d/255*100),a:i}},te=m.memo(function(n){var o=n.hue,c=n.onChange,h=N(["react-colorful__hue",n.className]);return m.createElement("div",{className:h},m.createElement(G,{onMove:function(i){c({h:360*i.left})},onKey:function(i){c({h:S(o+360*i.left,0,360)})},"aria-label":"Hue","aria-valuenow":x(o),"aria-valuemax":"360","aria-valuemin":"0"},m.createElement(F,{className:"react-colorful__hue-pointer",left:o/360,color:K({h:o,s:100,v:100,a:1})})))}),ne=m.memo(function(n){var o=n.hsva,c=n.onChange,h={backgroundColor:K({h:o.h,s:100,v:100,a:1})};return m.createElement("div",{className:"react-colorful__saturation",style:h},m.createElement(G,{onMove:function(i){c({s:100*i.left,v:100-100*i.top})},onKey:function(i){c({s:S(o.s+100*i.left,0,100),v:S(o.v-100*i.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+x(o.s)+"%, Brightness "+x(o.v)+"%"},m.createElement(F,{className:"react-colorful__saturation-pointer",top:1-o.v/100,left:o.s/100,color:K(o)})))}),ae=function(n,o){if(n===o)return!0;for(var c in n)if(n[c]!==o[c])return!1;return!0},le=function(n,o){return n.replace(/\s/g,"")===o.replace(/\s/g,"")},$e=function(n,o){return n.toLowerCase()===o.toLowerCase()||ae(X(n),X(o))};function oe(n,o,c){var h=L(c),i=p.useState(function(){return n.toHsva(o)}),d=i[0],e=i[1],t=p.useRef({color:o,hsva:d});p.useEffect(function(){if(!n.equal(o,t.current.color)){var a=n.toHsva(o);t.current={hsva:a,color:o},e(a)}},[o,n]),p.useEffect(function(){var a;ae(d,t.current.hsva)||n.equal(a=n.fromHsva(d),t.current.color)||(t.current={hsva:d,color:a},h(a))},[d,n,h]);var r=p.useCallback(function(a){e(function(l){return Object.assign({},l,a)})},[]);return[d,r]}var Se=typeof window<"u"?p.useLayoutEffect:p.useEffect,Oe=function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},A=new Map,ue=function(n){Se(function(){var o=n.current?n.current.ownerDocument:document;if(o!==void 0&&!A.has(o)){var c=o.createElement("style");c.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,A.set(o,c);var h=Oe();h&&c.setAttribute("nonce",h),o.head.appendChild(c)}},[])},Ne=function(n){var o=n.className,c=n.colorModel,h=n.color,i=h===void 0?c.defaultColor:h,d=n.onChange,e=V(n,["className","colorModel","color","onChange"]),t=p.useRef(null);ue(t);var r=oe(c,i,d),a=r[0],l=r[1],u=N(["react-colorful",o]);return m.createElement("div",C({},e,{ref:t,className:u}),m.createElement(ne,{hsva:a,onChange:l}),m.createElement(te,{hue:a.h,onChange:l,className:"react-colorful__last-control"}))},je={defaultColor:"000",toHsva:xe,fromHsva:function(n){return Ee({h:n.h,s:n.s,v:n.v,a:1})},equal:$e},Re=function(n){return m.createElement(Ne,C({},n,{colorModel:je}))},ze=function(n){var o=n.className,c=n.hsva,h=n.onChange,i={backgroundImage:"linear-gradient(90deg, "+I(Object.assign({},c,{a:0}))+", "+I(Object.assign({},c,{a:1}))+")"},d=N(["react-colorful__alpha",o]),e=x(100*c.a);return m.createElement("div",{className:d},m.createElement("div",{className:"react-colorful__alpha-gradient",style:i}),m.createElement(G,{onMove:function(t){h({a:t.left})},onKey:function(t){h({a:S(c.a+t.left)})},"aria-label":"Alpha","aria-valuetext":e+"%","aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100"},m.createElement(F,{className:"react-colorful__alpha-pointer",left:c.a,color:I(c)})))},ie=function(n){var o=n.className,c=n.colorModel,h=n.color,i=h===void 0?c.defaultColor:h,d=n.onChange,e=V(n,["className","colorModel","color","onChange"]),t=p.useRef(null);ue(t);var r=oe(c,i,d),a=r[0],l=r[1],u=N(["react-colorful",o]);return m.createElement("div",C({},e,{ref:t,className:u}),m.createElement(ne,{hsva:a,onChange:l}),m.createElement(te,{hue:a.h,onChange:l}),m.createElement(ze,{hsva:a,onChange:l,className:"react-colorful__last-control"}))},Ie={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:ke,fromHsva:I,equal:le},He=function(n){return m.createElement(ie,C({},n,{colorModel:Ie}))},qe={defaultColor:"rgba(0, 0, 0, 1)",toHsva:Me,fromHsva:function(n){var o=ee(n);return"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")"},equal:le},Pe=function(n){return m.createElement(ie,C({},n,{colorModel:qe}))},Le=M.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),Be=M(J)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),Xe=M.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Ke=M(fe)(({theme:n})=>({fontFamily:n.typography.fonts.base})),De=M.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Ve=M.div(({theme:n,active:o})=>({width:16,height:16,boxShadow:o?`${n.appBorderColor} 0 0 0 1px inset, ${n.textMutedColor}50 0 0 0 4px`:`${n.appBorderColor} 0 0 0 1px inset`,borderRadius:n.appBorderRadius})),Ge=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,U=({value:n,style:o,...c})=>{let h=`linear-gradient(${n}, ${n}), ${Ge}, linear-gradient(#fff, #fff)`;return m.createElement(Ve,{...c,style:{...o,backgroundImage:h}})},Fe=M(de.Input)(({theme:n,readOnly:o})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:n.typography.fonts.base})),Te=M(ge)(({theme:n})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:n.input.color})),se=(n=>(n.RGB="rgb",n.HSL="hsl",n.HEX="hex",n))(se||{}),R=Object.values(se),We=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Ae=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Ue=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,D=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Ye=/^\s*#?([0-9a-f]{3})\s*$/i,Je={hex:Re,rgb:Pe,hsl:He},z={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},Y=n=>{let o=n==null?void 0:n.match(We);if(!o)return[0,0,0,1];let[,c,h,i,d=1]=o;return[c,h,i,d].map(Number)},$=n=>{if(!n)return;let o=!0;if(Ae.test(n)){let[e,t,r,a]=Y(n),[l,u,s]=_.default.rgb.hsl([e,t,r])||[0,0,0];return{valid:o,value:n,keyword:_.default.rgb.keyword([e,t,r]),colorSpace:"rgb",rgb:n,hsl:`hsla(${l}, ${u}%, ${s}%, ${a})`,hex:`#${_.default.rgb.hex([e,t,r]).toLowerCase()}`}}if(Ue.test(n)){let[e,t,r,a]=Y(n),[l,u,s]=_.default.hsl.rgb([e,t,r])||[0,0,0];return{valid:o,value:n,keyword:_.default.hsl.keyword([e,t,r]),colorSpace:"hsl",rgb:`rgba(${l}, ${u}, ${s}, ${a})`,hsl:n,hex:`#${_.default.hsl.hex([e,t,r]).toLowerCase()}`}}let c=n.replace("#",""),h=_.default.keyword.rgb(c)||_.default.hex.rgb(c),i=_.default.rgb.hsl(h),d=n;if(/[^#a-f0-9]/i.test(n)?d=c:D.test(n)&&(d=`#${c}`),d.startsWith("#"))o=D.test(d);else try{_.default.keyword.hex(d)}catch{o=!1}return{valid:o,value:d,keyword:_.default.rgb.keyword(h),colorSpace:"hex",rgb:`rgba(${h[0]}, ${h[1]}, ${h[2]}, 1)`,hsl:`hsla(${i[0]}, ${i[1]}%, ${i[2]}%, 1)`,hex:d}},Qe=(n,o,c)=>{if(!n||!(o!=null&&o.valid))return z[c];if(c!=="hex")return(o==null?void 0:o[c])||z[c];if(!o.hex.startsWith("#"))try{return`#${_.default.keyword.hex(o.hex)}`}catch{return z.hex}let h=o.hex.match(Ye);if(!h)return D.test(o.hex)?o.hex:z.hex;let[i,d,e]=h[1].split("");return`#${i}${i}${d}${d}${e}${e}`},Ze=(n,o)=>{let[c,h]=p.useState(n||""),[i,d]=p.useState(()=>$(c)),[e,t]=p.useState((i==null?void 0:i.colorSpace)||"hex");p.useEffect(()=>{let u=n||"",s=$(u);h(u),d(s),t((s==null?void 0:s.colorSpace)||"hex")},[n]);let r=p.useMemo(()=>Qe(c,i,e).toLowerCase(),[c,i,e]),a=p.useCallback(u=>{let s=$(u),f=(s==null?void 0:s.value)||u||"";h(f),f===""&&(d(void 0),o(void 0)),s&&(d(s),t(s.colorSpace),o(s.value))},[o]),l=p.useCallback(()=>{let u=R.indexOf(e)+1;u>=R.length&&(u=0),t(R[u]);let s=(i==null?void 0:i[R[u]])||"";h(s),o(s)},[i,e,o]);return{value:c,realValue:r,updateValue:a,color:i,colorSpace:e,cycleColorSpace:l}},H=n=>n.replace(/\s*/,"").toLowerCase(),er=(n,o,c)=>{let[h,i]=p.useState(o!=null&&o.valid?[o]:[]);p.useEffect(()=>{o===void 0&&i([])},[o]);let d=p.useMemo(()=>(n||[]).map(t=>typeof t=="string"?$(t):t.title?{...$(t.color),keyword:t.title}:$(t.color)).concat(h).filter(Boolean).slice(-27),[n,h]),e=p.useCallback(t=>{t!=null&&t.valid&&(d.some(r=>H(r[c])===H(t[c]))||i(r=>r.concat(t)))},[c,d]);return{presets:d,addPreset:e}},rr=({name:n,value:o,onChange:c,onFocus:h,onBlur:i,presetColors:d,startOpen:e=!1,argType:t})=>{var E;let r=p.useCallback(ce(c,200),[c]),{value:a,realValue:l,updateValue:u,color:s,colorSpace:f,cycleColorSpace:g}=Ze(o,r),{presets:b,addPreset:y}=er(d,s,f),v=Je[f],w=!!((E=t==null?void 0:t.table)!=null&&E.readonly);return m.createElement(Le,{"aria-readonly":w},m.createElement(Be,{startOpen:e,trigger:w?[null]:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>y(s),tooltip:m.createElement(Xe,null,m.createElement(v,{color:l==="transparent"?"#000000":l,onChange:u,onFocus:h,onBlur:i}),b.length>0&&m.createElement(De,null,b.map((k,P)=>m.createElement(J,{key:`${k.value}-${P}`,hasChrome:!1,tooltip:m.createElement(Ke,{note:k.keyword||k.value})},m.createElement(U,{value:k[f],active:s&&H(k[f])===H(s[f]),onClick:()=>u(k.value)})))))},m.createElement(U,{value:l,style:{margin:4}})),m.createElement(Fe,{id:he(n),value:a,onChange:k=>u(k.target.value),onFocus:k=>k.target.select(),readOnly:w,placeholder:"Choose color..."}),a?m.createElement(Te,{onClick:g}):null)},hr=rr;export{rr as ColorControl,hr as default};