@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/FileInput.js

@@ -0,0 +1,206 @@
+import { jsxs as R, jsx as m } from "react/jsx-runtime";
+import S, { useState as g } from "react";
+import { n as c } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { P as t } from "./index-Ds9PUTwb.js";
+import { f as y, b as r, h as V, a as x, g as p } from "./utils-DEke8iwo.js";
+import { u as _ } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const B = c.label`
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: ${(e) => y(e.theme, e.size)};
+  max-height: ${(e) => y(e.theme, e.size)};
+  background-color: ${(e) => r(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "background"
+)};
+  border-radius: 8px;
+  ${(e) => e.focused === !0 && e.readOnly !== !0 ? V(e.theme) : ""}
+`, D = c.input`
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+`, L = c.div`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  padding: 0.625rem 0.75rem;
+  ${(e) => x(e.theme, "Input", e.size, "enabled")}
+  color: ${(e) => r(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  "enabled",
+  "prefix"
+)};
+  cursor: ${(e) => e.disabled === !0 ? "default" : "pointer"};
+  background-color: ${(e) => r(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "background"
+)};
+  border: 1px solid
+    ${(e) => r(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "border"
+)};
+  border-radius: 8px 0 0 8px;
+
+  ${(e) => e.disabled === !0 ? p(e.theme) : ""}
+`, U = c.input`
+  width: 100%;
+  appearance: none;
+  outline: none;
+  padding: 0.625rem 0.75rem;
+  ${(e) => x(e.theme, "Input", e.size, "enabled")}
+  border: 1px solid
+    ${(e) => r(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "border"
+)};
+  border-radius: 0 8px 8px 0;
+  border-left: transparent;
+  color: ${(e) => r(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  "enabled",
+  "text"
+)};
+
+  background-color: ${(e) => r(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "background"
+)};
+  color: ${(e) => r(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  "enabled",
+  "text"
+)};
+
+  ${(e) => e.disabled === !0 ? p(e.theme) : ""}
+`, W = S.forwardRef((e, $) => {
+  const {
+    className: I = "",
+    style: C = {},
+    onChange: i,
+    onFocus: d,
+    onBlur: s,
+    disabled: l,
+    readOnly: f,
+    multiple: w = !1,
+    accept: z = "",
+    label: O = "Choose File",
+    color: F = "primary",
+    size: k = "small",
+    ...v
+  } = e, T = _(), [o, N] = g([]), [b, h] = g(!1);
+  var u = { theme: T, size: k, color: F, disabled: l, focused: b };
+  const j = () => {
+    if (o.length > 0) {
+      var n = "";
+      for (const a in o)
+        n += a == o.length - 1 ? `${o[a].name}` : `${o[a].name}, `;
+      return n;
+    }
+    return "";
+  };
+  return /* @__PURE__ */ R(
+    B,
+    {
+      ...u,
+      className: I,
+      style: C,
+      focused: b,
+      readOnly: f,
+      children: [
+        /* @__PURE__ */ m(
+          D,
+          {
+            ...u,
+            accept: z,
+            multiple: w,
+            ref: $,
+            onChange: l || f ? () => {
+            } : (n) => {
+              var a = [];
+              if (n.target.files && n.target.files.length > 0)
+                for (const P of n.target.files)
+                  a.push(P);
+              else a = [];
+              N(a), i && (i == null || i(n, a));
+            },
+            type: "file",
+            onFocus: (n) => {
+              l || h(!0), d && !l && (d == null || d(n));
+            },
+            onBlur: (n) => {
+              l || h(!1), s && !l && (s == null || s(n));
+            },
+            ...v
+          }
+        ),
+        /* @__PURE__ */ m(L, { ...u, children: O }),
+        /* @__PURE__ */ m(
+          U,
+          {
+            tabIndex: -1,
+            ...u,
+            onChange: () => {
+            },
+            value: j()
+          }
+        )
+      ]
+    }
+  );
+});
+W.propTypes = {
+  id: t.any,
+  disabled: t.bool,
+  readOnly: t.bool,
+  multiple: t.bool,
+  accept: t.string,
+  label: t.oneOfType([t.string, t.element]),
+  tabIndex: t.number,
+  //-------------------------
+  onChange: t.func,
+  onFocus: t.func,
+  onBlur: t.func,
+  //-------------------------
+  className: t.string,
+  style: t.object,
+  size: t.oneOf(["small", "medium", "large"]),
+  color: t.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  W as default
+};

package/dist/FlexBox.cjs

@@ -0,0 +1,9 @@
+"use strict";const w=require("react/jsx-runtime"),d=require("react"),y=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./index-DXnSjbfJ.cjs"),f={Row:"row",RowReverse:"row-reverse",Column:"column",ColumnReverse:"column-reverse"},m={NoWrap:"nowrap",Wrap:"wrap",WrapReverse:"wrap-reverse"},x={Start:"flex-start",Center:"center",End:"flex-end",SpaceAround:"space-around",SpaceBetween:"space-between",SpaceEvenly:"space-evenly"},S={Start:"flex-start",Center:"center",Stretch:"stretch",End:"flex-end",Baseline:"baseline"},g=y.newStyled.div`
+  display: flex;
+  flex-direction: ${e=>f[e.direction]};
+  flex-wrap: ${e=>m[e.wrap]};
+  justify-content: ${e=>x[e.justifyContent]};
+  align-items: ${e=>S[e.alignItems]};
+  column-gap: ${e=>e.columnGap?e.columnGap:e.gap};
+  row-gap: ${e=>e.rowGap?e.rowGap:e.gap};
+`,t=d.forwardRef((e,o)=>{const{className:n="",children:a,direction:s="Row",wrap:p="NoWrap",justifyContent:c="Start",alignItems:i="Stretch",gap:l="0",...u}=e;return w.jsx(g,{className:"lnc-flexbox-container "+(n||""),ref:o,wrap:p,gap:l,alignItems:i,direction:s,justifyContent:c,...u,children:a})});t.propTypes={rowGap:r.PropTypes.string,columnGap:r.PropTypes.string,gap:r.PropTypes.string,direction:r.PropTypes.oneOf(["Row","RowReverse","Column","ColumnReverse"]),wrap:r.PropTypes.oneOf(["NoWrap","Wrap","WrapReverse"]),justifyContent:r.PropTypes.oneOf(["Start","Center","End","SpaceAround","SpaceBetween","SpaceEvenly"]),alignItems:r.PropTypes.oneOf(["Start","Center","Stretch","End","Baseline"])};module.exports=t;

package/dist/FlexBox.js

@@ -0,0 +1,97 @@
+import { jsx as f } from "react/jsx-runtime";
+import m from "react";
+import { n as w } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { P as t } from "./index-Ds9PUTwb.js";
+const d = {
+  Row: "row",
+  RowReverse: "row-reverse",
+  Column: "column",
+  ColumnReverse: "column-reverse"
+}, u = {
+  NoWrap: "nowrap",
+  Wrap: "wrap",
+  WrapReverse: "wrap-reverse"
+}, S = {
+  Start: "flex-start",
+  Center: "center",
+  End: "flex-end",
+  SpaceAround: "space-around",
+  SpaceBetween: "space-between",
+  SpaceEvenly: "space-evenly"
+}, x = {
+  Start: "flex-start",
+  Center: "center",
+  Stretch: "stretch",
+  End: "flex-end",
+  Baseline: "baseline"
+}, g = w.div`
+  display: flex;
+  flex-direction: ${(e) => d[e.direction]};
+  flex-wrap: ${(e) => u[e.wrap]};
+  justify-content: ${(e) => S[e.justifyContent]};
+  align-items: ${(e) => x[e.alignItems]};
+  column-gap: ${(e) => e.columnGap ? e.columnGap : e.gap};
+  row-gap: ${(e) => e.rowGap ? e.rowGap : e.gap};
+`, v = m.forwardRef((e, n) => {
+  const {
+    className: r = "",
+    children: a,
+    direction: o = "Row",
+    wrap: s = "NoWrap",
+    justifyContent: c = "Start",
+    alignItems: l = "Stretch",
+    gap: p = "0",
+    ...i
+  } = e;
+  return /* @__PURE__ */ f(
+    g,
+    {
+      className: "lnc-flexbox-container " + (r || ""),
+      ref: n,
+      wrap: s,
+      gap: p,
+      alignItems: l,
+      direction: o,
+      justifyContent: c,
+      ...i,
+      children: a
+    }
+  );
+});
+v.propTypes = {
+  rowGap: t.string,
+  columnGap: t.string,
+  gap: t.string,
+  /**
+   * Controls the direction of items in FlexBox.
+   */
+  direction: t.oneOf(["Row", "RowReverse", "Column", "ColumnReverse"]),
+  /**
+   * Determines whether the FlexBox should wrap, when there is not enough space to display all items in one line.
+   */
+  wrap: t.oneOf(["NoWrap", "Wrap", "WrapReverse"]),
+  /**
+   * Controls how the space is distributed between items along the main-axis.
+   */
+  justifyContent: t.oneOf([
+    "Start",
+    "Center",
+    "End",
+    "SpaceAround",
+    "SpaceBetween",
+    "SpaceEvenly"
+  ]),
+  /**
+   * Controls how the space is distributed between items along the cross-axis.
+   */
+  alignItems: t.oneOf([
+    "Start",
+    "Center",
+    "Stretch",
+    "End",
+    "Baseline"
+  ])
+};
+export {
+  v as default
+};

package/dist/FlexGrid.cjs

@@ -0,0 +1 @@
+"use strict";const P=require("react/jsx-runtime"),r=require("react"),e=require("./index-DXnSjbfJ.cjs"),S=require("./FlexBox.cjs"),d=require("./FlexGridItem.cjs"),t=r.forwardRef((p,o)=>{const{columns:s=12,spacing:c,rowSpacing:i,columnSpacing:a,justifyContent:u="Start",alignItems:y="Stretch",children:l,rest:T}=p,m=r.Children.map(l,n=>{if(!(!r.isValidElement(n)||n.type!=d))return r.cloneElement(n,{columns:s,spacing:c,rowSpacing:i,columnSpacing:a})});return P.jsx(S,{ref:o,wrap:"Wrap",justifyContent:u,alignItems:y,...T,children:m})});t.propTypes={columns:e.PropTypes.number,spacing:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.object]),rowSpacing:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.object]),columnSpacing:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.object]),justifyContent:e.PropTypes.oneOf(["Start","Center","End","SpaceAround","SpaceBetween","SpaceEvenly"]),alignItems:e.PropTypes.oneOf(["Start","Center","Stretch","End","Baseline"])};module.exports=t;

package/dist/FlexGrid.js

@@ -0,0 +1,78 @@
+import { jsx as d } from "react/jsx-runtime";
+import n from "react";
+import { P as e } from "./index-Ds9PUTwb.js";
+import S from "./FlexBox.js";
+import y from "./FlexGridItem.js";
+const g = n.forwardRef((t, o) => {
+  const {
+    columns: p = 12,
+    spacing: a,
+    rowSpacing: c,
+    columnSpacing: m,
+    justifyContent: i = "Start",
+    alignItems: l = "Stretch",
+    children: s,
+    rest: f
+  } = t, u = n.Children.map(s, (r) => {
+    if (!(!n.isValidElement(r) || r.type != y))
+      return n.cloneElement(r, {
+        columns: p,
+        spacing: a,
+        rowSpacing: c,
+        columnSpacing: m
+      });
+  });
+  return /* @__PURE__ */ d(
+    S,
+    {
+      ref: o,
+      wrap: "Wrap",
+      justifyContent: i,
+      alignItems: l,
+      ...f,
+      children: u
+    }
+  );
+});
+g.propTypes = {
+  /**
+   * Number of available grid columns.
+   */
+  columns: e.number,
+  /**
+   * Defines spacing for rows and columns.
+   */
+  spacing: e.oneOfType([e.number, e.object]),
+  /**
+   * Defines row spacing. If this is set, `spacing` property is ignored for this value.
+   */
+  rowSpacing: e.oneOfType([e.number, e.object]),
+  /**
+   * Defines column spacing. If this is set, `spacing` property is ignored for this value.
+   */
+  columnSpacing: e.oneOfType([e.number, e.object]),
+  /**
+   * Controls how the space is distributed between items along the main-axis.
+   */
+  justifyContent: e.oneOf([
+    "Start",
+    "Center",
+    "End",
+    "SpaceAround",
+    "SpaceBetween",
+    "SpaceEvenly"
+  ]),
+  /**
+   * Controls how the space is distributed between items along the cross-axis.
+   */
+  alignItems: e.oneOf([
+    "Start",
+    "Center",
+    "Stretch",
+    "End",
+    "Baseline"
+  ])
+};
+export {
+  g as default
+};

package/dist/FlexGridItem.cjs

@@ -0,0 +1,7 @@
+"use strict";const X=require("react/jsx-runtime"),i=require("react"),n=require("./index-DXnSjbfJ.cjs"),g=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),q=require("./utils-hdRGTsQ7.cjs"),$=g.newStyled.div`
+  ${s=>s.width>0?"":"flex: 1;"}
+  min-width: ${s=>100/s.columns}%;
+  width: ${s=>s.width}%;
+  padding: ${s=>s.rowGap}px ${s=>s.columnGap}px;
+  overflow-wrap: break-word;
+`,y=i.forwardRef((s,x)=>{const{XS:t,S:c,M:o,L:a,XL:m,col:S,columns:e,spacing:l,rowSpacing:p,columnSpacing:u,children:G}=s,d=q.useScreenSize(),[T,k]=i.useState(0),[L,w]=i.useState(0),[P,f]=i.useState(0);i.useEffect(()=>{b()},[e,t,c,o,a,m,S]),i.useEffect(()=>{b(),h()},[d]),i.useEffect(()=>{h()},[l,p,u]);const b=()=>{let r=S?100/(e/S):0;switch(d){case"XS":r=t?100/(e/t):r;break;case"S":r=c?100/(e/c):t?100/(e/t):r;break;case"M":r=o?100/(e/o):c?100/(e/c):t?100/(e/t):r;break;case"L":r=a?100/(e/a):o?100/(e/o):c?100/(e/c):t?100/(e/t):r;break;case"XL":r=m?100/(e/m):a?100/(e/a):o?100/(e/o):c?100/(e/c):t?100/(e/t):r;break}k(r)},h=()=>{l?(w(l),f(l)):(p&&(isNaN(p)?w(p[d]??0):w(p)),u&&(isNaN(u)?f(u[d]??0):f(u)))};return X.jsx($,{ref:x,columns:e,width:T,rowGap:L,columnGap:P,children:G})});y.propTypes={XS:n.PropTypes.number,S:n.PropTypes.number,M:n.PropTypes.number,L:n.PropTypes.number,XL:n.PropTypes.number,col:n.PropTypes.number};module.exports=y;

package/dist/FlexGridItem.js

@@ -0,0 +1,97 @@
+import { jsx as y } from "react/jsx-runtime";
+import N, { useState as S, useEffect as b } from "react";
+import { P as i } from "./index-Ds9PUTwb.js";
+import { n as I } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { u as M } from "./utils-DEke8iwo.js";
+const R = I.div`
+  ${(t) => t.width > 0 ? "" : "flex: 1;"}
+  min-width: ${(t) => 100 / t.columns}%;
+  width: ${(t) => t.width}%;
+  padding: ${(t) => t.rowGap}px ${(t) => t.columnGap}px;
+  overflow-wrap: break-word;
+`, W = N.forwardRef((t, x) => {
+  const {
+    XS: r,
+    S: s,
+    M: a,
+    L: c,
+    XL: d,
+    col: u,
+    columns: e,
+    spacing: p,
+    rowSpacing: n,
+    columnSpacing: m,
+    children: k
+  } = t, l = M(), [L, X] = S(0), [g, f] = S(0), [$, w] = S(0);
+  b(() => {
+    h();
+  }, [e, r, s, a, c, d, u]), b(() => {
+    h(), G();
+  }, [l]), b(() => {
+    G();
+  }, [p, n, m]);
+  const h = () => {
+    let o = u ? 100 / (e / u) : 0;
+    switch (l) {
+      case "XS":
+        o = r ? 100 / (e / r) : o;
+        break;
+      case "S":
+        o = s ? 100 / (e / s) : r ? 100 / (e / r) : o;
+        break;
+      case "M":
+        o = a ? 100 / (e / a) : s ? 100 / (e / s) : r ? 100 / (e / r) : o;
+        break;
+      case "L":
+        o = c ? 100 / (e / c) : a ? 100 / (e / a) : s ? 100 / (e / s) : r ? 100 / (e / r) : o;
+        break;
+      case "XL":
+        o = d ? 100 / (e / d) : c ? 100 / (e / c) : a ? 100 / (e / a) : s ? 100 / (e / s) : r ? 100 / (e / r) : o;
+        break;
+    }
+    X(o);
+  }, G = () => {
+    p ? (f(p), w(p)) : (n && (isNaN(n) ? f(n[l] ?? 0) : f(n)), m && (isNaN(m) ? w(m[l] ?? 0) : w(m)));
+  };
+  return /* @__PURE__ */ y(
+    R,
+    {
+      ref: x,
+      columns: e,
+      width: L,
+      rowGap: g,
+      columnGap: $,
+      children: k
+    }
+  );
+});
+W.propTypes = {
+  /**
+   * Number of columns to take up on XS screens.
+   */
+  XS: i.number,
+  /**
+   * Number of columns to take up on S screens.
+   */
+  S: i.number,
+  /**
+   * Number of columns to take up on M screens.
+   */
+  M: i.number,
+  /**
+   * Number of columns to take up on L screens.
+   */
+  L: i.number,
+  /**
+   * Number of columns to take up on XL screens.
+   */
+  XL: i.number,
+  /**
+   * Number of columns to take up on any screen size.
+   * Defining number on columns for specific screen sizes takes priority over this.
+   */
+  col: i.number
+};
+export {
+  W as default
+};

package/dist/Footer.cjs

@@ -0,0 +1 @@
+"use strict";const n=require("react/jsx-runtime"),i=require("react"),c=require("./index-DXnSjbfJ.cjs"),e=i.forwardRef((r,o)=>{const{children:t,__TYPE__:_="Footer",...s}=r;return n.jsx("footer",{ref:o,...s,children:t})});e.propTypes={__TYPE__:c.PropTypes.string};e.displayName="Footer";module.exports=e;

package/dist/Footer.js

@@ -0,0 +1,18 @@
+import { jsx as s } from "react/jsx-runtime";
+import _ from "react";
+import { P as a } from "./index-Ds9PUTwb.js";
+const o = _.forwardRef((r, t) => {
+  const { children: e, __TYPE__: f = "Footer", ...p } = r;
+  return /* @__PURE__ */ s("footer", { ref: t, ...p, children: e });
+});
+o.propTypes = {
+  /**
+   * Do not override this property.
+   * Should only be used as indicator for type if you are passing custom component.
+   */
+  __TYPE__: a.string
+};
+o.displayName = "Footer";
+export {
+  o as default
+};

package/dist/FormField.cjs

@@ -0,0 +1,11 @@
+"use strict";const s=require("react/jsx-runtime");require("react");const r=require("./index-DXnSjbfJ.cjs"),a=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),o=require("./utils-hdRGTsQ7.cjs"),b=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),g=a.newStyled.label`
+  display: block;
+  margin-bottom: 4px;
+  ${e=>o.getComponentTypographyCss(e.theme,"FormField",e.size,"enabled")}
+  color: ${e=>o.getColorRgbaValue(e.theme,"FormField","primary","enabled","label")};
+`,u=a.newStyled.span`
+  display: block;
+  margin-top: 8px;
+  ${e=>o.getComponentTypographyCss(e.theme,"FormField",e.size,"enabled")}
+  color: ${e=>o.getColorRgbaValue(e.theme,"FormField",e.color,"enabled","text")};
+`,m=e=>{const{size:l="small",color:c="primary",className:d="",style:p={},text:t="",label:n="",children:y,...h}=e,i=b.useTheme();return s.jsxs("div",{style:p,className:"lnc-ui-form-field "+d,children:[n&&s.jsx(g,{theme:i,size:l,children:n}),y,t&&s.jsx(u,{size:l,theme:i,color:c,children:t})]})};m.propTypes={text:r.PropTypes.string,label:r.PropTypes.string,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"]),style:r.PropTypes.object,className:r.PropTypes.string};module.exports=m;

package/dist/FormField.js

@@ -0,0 +1,65 @@
+import { jsxs as b, jsx as s } from "react/jsx-runtime";
+import "react";
+import { P as l } from "./index-Ds9PUTwb.js";
+import { n as m } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { a as i, b as n } from "./utils-DEke8iwo.js";
+import { u as g } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const f = m.label`
+  display: block;
+  margin-bottom: 4px;
+  ${(e) => i(e.theme, "FormField", e.size, "enabled")}
+  color: ${(e) => n(e.theme, "FormField", "primary", "enabled", "label")};
+`, h = m.span`
+  display: block;
+  margin-top: 8px;
+  ${(e) => i(e.theme, "FormField", e.size, "enabled")}
+  color: ${(e) => n(
+  e.theme,
+  "FormField",
+  e.color,
+  "enabled",
+  "text"
+)};
+`, F = (e) => {
+  const {
+    size: r = "small",
+    color: c = "primary",
+    className: d = "",
+    style: p = {},
+    text: o = "",
+    label: t = "",
+    children: y,
+    ...u
+  } = e, a = g();
+  return /* @__PURE__ */ b("div", { style: p, className: "lnc-ui-form-field " + d, children: [
+    t && /* @__PURE__ */ s(f, { theme: a, size: r, children: t }),
+    y,
+    o && /* @__PURE__ */ s(h, { size: r, theme: a, color: c, children: o })
+  ] });
+};
+F.propTypes = {
+  /**
+   * Additional text that appears below the main element.
+   */
+  text: l.string,
+  /**
+   * Label text that appears above the main element.
+   */
+  label: l.string,
+  size: l.oneOf(["small", "medium", "large"]),
+  color: l.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ]),
+  style: l.object,
+  className: l.string
+};
+export {
+  F as default
+};

package/dist/FormView.cjs

@@ -0,0 +1,13 @@
+"use strict";const e=require("react/jsx-runtime"),W=require("react"),r=require("./index-DXnSjbfJ.cjs"),g=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),$=require("./FlexGrid.cjs"),M=require("./FlexGridItem.cjs"),b=require("./Button.cjs"),m=require("./IconButton.cjs"),Y=require("./TextInput.cjs"),U=require("./CheckBoxInput.cjs"),H=require("./RadioGroup.cjs"),J=require("./NumberInput.cjs"),K=require("./DecimalInput.cjs"),L=require("./PasswordInput.cjs"),Q=require("./TextAreaInput.cjs"),X=require("./TimeInput.cjs"),Z=require("./ColorInput.cjs"),z=require("./FileInput.cjs"),ee=require("./RangeSlider.cjs"),x=require("./utils-hdRGTsQ7.cjs"),re=require("./FormField.cjs"),te=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),oe=g.newStyled.div`
+  display: flex;
+  justify-content: space-between;
+`,se=g.newStyled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: ${l=>x.getComponentPropValue(l.theme,"Popover",l.color,"enabled","boxShadow")};
+  border-radius: ${l=>x.getBorderRadiusValueWithUnits(l.theme,l.borderRadius)};
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+  padding: 12px;
+  background-color: ${l=>x.getColorRgbaValue(l.theme,"Popover","default","enabled","bg")};
+`,ne=(l,s,i,n,a,o)=>{var c;switch(l||""){case"text":return e.jsx(Y,{name:i,color:a,size:o,...s,defaultValue:n});case"checkbox":return e.jsx(U,{color:a,size:o,name:i,...s});case"radioGroup":return e.jsx(H,{color:a,size:o,value:n,radioProps:s.radioProps,name:i,items:[...(c=s.items)==null?void 0:c.map(d=>({value:d.value,label:d.label}))]});case"number":return e.jsx(J,{color:a,size:o,name:i,...s,defaultValue:n});case"decimal":return e.jsx(K,{name:i,color:a,size:o,...s,defaultValue:n});case"file":return e.jsx(z,{name:i,color:a,size:o,...s,defaultValue:n});case"password":return e.jsx(L,{name:i,color:a,...s,defaultValue:n});case"textArea":return e.jsx(Q,{name:i,color:a,size:o,...s,defaultValue:n});case"time":return e.jsx(X,{name:i,color:a,size:o,...s,defaultValue:n});case"color":return e.jsx(Z,{name:i,color:a,size:o,...s,defaultValue:n});case"range":return e.jsx(ee,{name:i,color:a,size:o,...s,defaultValue:n});default:return n}},y=W.forwardRef((l,s)=>{const{__TYPE__:i="FORM_VIEW",goToPreviousView:n,id:a,data:o,fields:c=[],errors:d={},flexGridProps:f,goBackText:P="Go back",backActive:j=!0,nextActive:h=!0,previousActive:q=!0,editActive:ae,disableGoBack:k=!1,disableNext:w=!1,disablePrevious:v=!1,disableEdit:ie,disableDiscard:I=!1,disableSave:V=!1,discardText:_="Discard",saveText:S="Save",goToNext:B=()=>{},goToPrevious:F=()=>{},onEdit:le=()=>{},goBack:R=()=>{},onSubmit:A=()=>{},onDiscard:C=()=>{},className:de="",style:ce={},color:p="primary",size:T="small",children:G,...E}=l,N=te.useTheme(),D=(t,u)=>{n&&n(),R(t,u)},O=()=>e.jsx(e.Fragment,{children:G||e.jsx($,{spacing:10,...f,children:c.map((t,u)=>e.jsx(M,{...t,children:e.jsx(re,{label:t.label,text:d[t.accessor],color:d[t.accessor]?"danger":p,size:T,children:t.type=="custom"?t.element:ne(t.type,t.inputProps,t.accessor,o[t.accessor],d[t.accessor]?"danger":p,T)},u)},u))})});return e.jsxs(se,{ref:s,theme:N,color:p,borderRadius:"regular",...E,children:[j&&e.jsx(b,{leadingIcon:"arrow-circle-left",text:P,btnType:"outline",style:{width:"fit-content"},onClick:t=>D(t,o),disabled:k,type:"button"},0),O(),e.jsxs(oe,{children:[e.jsxs("div",{children:[h&&e.jsxs(e.Fragment,{children:[e.jsx(m,{btnType:"outline",icon:"angle-left",disabled:v,onClick:t=>F(o,t),type:"button"}),"  "]}),q&&e.jsx(m,{btnType:"outline",icon:"angle-right",disabled:w,onClick:t=>B(o,t),type:"button"})]}),e.jsxs("div",{children:[e.jsx(b,{leadingIcon:"eraser",btnType:"outline",color:"warning",text:_,disabled:I,onClick:C,type:"button"}),"  ",e.jsx(b,{leadingIcon:"floppy-disk",btnType:"tinted",color:"success",text:S,disabled:V,onClick:A})]})]})]},a)});y.propTypes={__TYPE__:r.PropTypes.string,goBackText:r.PropTypes.string,fields:r.PropTypes.array,data:r.PropTypes.object,errors:r.PropTypes.object,backActive:r.PropTypes.bool,nextActive:r.PropTypes.bool,disableGoBack:r.PropTypes.bool,disableNext:r.PropTypes.bool,disablePrevious:r.PropTypes.bool,previousActive:r.PropTypes.bool,editActive:r.PropTypes.bool,flexGridProps:r.PropTypes.any,disableDiscard:r.PropTypes.bool,disableSave:r.PropTypes.bool,discardText:r.PropTypes.string,saveText:r.PropTypes.string,goToNext:r.PropTypes.func,goToPrevious:r.PropTypes.func,onEdit:r.PropTypes.func,goBack:r.PropTypes.func,onSubmit:r.PropTypes.func,className:r.PropTypes.string,style:r.PropTypes.object,color:r.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:r.PropTypes.oneOf(["small","medium","large"])};y.displayName="FORM_VIEW";module.exports=y;