@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/Toggle.js

@@ -0,0 +1,421 @@
+import { jsxs as S, jsx as g } from "react/jsx-runtime";
+import { useState as P } from "react";
+import { P as t } from "./index-Ds9PUTwb.js";
+import { n as k } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { h as j, b as i, a as f } from "./utils-DEke8iwo.js";
+/* empty css                     */
+import { u as B } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const o = {
+  containerWidth: {
+    small: "2.5rem",
+    medium: "3rem",
+    large: "3.5rem"
+  },
+  containerHeight: {
+    small: "1.5rem",
+    medium: "1.75rem",
+    large: "2rem"
+  },
+  sliderSize: {
+    small: "1rem",
+    medium: "1.25rem",
+    large: "1.5rem"
+  },
+  paddingLeft: {
+    small: "0.5rem",
+    medium: "0.5rem",
+    large: "0.5rem"
+  },
+  slider: {
+    small: "1rem",
+    medium: "1.25rem",
+    large: "1.5rem"
+  },
+  icon: {
+    small: "0.75rem",
+    medium: "0.875rem",
+    large: "1rem"
+  },
+  iconOff: {
+    small: "0.625rem",
+    medium: "0.6875rem",
+    large: "0.75rem"
+  }
+}, F = {
+  checked: {
+    left: {
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem"
+    }
+  }
+}, l = {
+  on: {
+    top: {
+      small: "0.25rem",
+      medium: "0.25rem",
+      large: "0.25rem"
+    },
+    left: {
+      small: "1.375rem",
+      medium: "1.6875rem",
+      large: "2rem"
+    },
+    right: {
+      small: "0.5rem",
+      medium: "0.5rem",
+      large: "0.5rem"
+    }
+  },
+  off: {
+    top: {
+      small: "0.375rem",
+      medium: "0.4375rem",
+      large: "0.5rem"
+    },
+    left: {
+      small: "1.375rem",
+      medium: "1.75rem",
+      large: "2.125rem"
+    },
+    right: {
+      small: "0.5rem",
+      medium: "0.5rem",
+      large: "0.5rem"
+    }
+  }
+}, H = (e) => e == "left" ? "row-reverse" : "row", L = k.label`
+  box-sizing: content-box !important;
+  width: 100%;
+  text-align: left;
+  line-height: 1.5;
+  display: flex;
+  gap: 0.75rem;
+  flex-direction: ${(e) => H(e.labelPosition)};
+  ${(e) => e.spaceBetween == !0 && "justify-content: space-between;"}
+  position: relative;
+  cursor: ${(e) => e.disabled || e.readOnly ? "default" : "pointer"};
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  align-items: center;
+  flex-shrink: 0;
+
+  min-height: ${(e) => e.theme.sizes[e.size]};
+  max-height: ${(e) => e.theme.sizes[e.size]};
+
+  & input:focus:enabled ~ span.toggle-slider {
+    ${(e) => !e.disabled && j(e.theme)};
+  }
+
+  & input:hover:enabled ~ span.toggle-slider {
+    background-color: ${(e) => i(
+  e.theme,
+  "Toggle",
+  null,
+  "hover",
+  "background",
+  "backgroundOpacity"
+)};
+  }
+
+  & input:checked:hover:enabled ~ span.toggle-slider {
+    background-color: ${(e) => i(
+  e.theme,
+  "Toggle",
+  e.color,
+  "hover",
+  "background"
+)};
+  }
+
+  & input {
+    position: absolute;
+    cursor: pointer;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    transition: all 0.2s ease;
+  }
+
+  & input:checked ~ span.toggle-slider {
+    background-color: ${(e) => e.disabled !== !0 ? i(
+  e.theme,
+  "Toggle",
+  e.color,
+  "enabled",
+  "background"
+) : i(
+  e.theme,
+  "Toggle",
+  e.color,
+  "disabled",
+  "background",
+  "backgroundOpacity"
+)};
+    transition: all 0.2s ease;
+    border-radius: 100px;
+    flex-shrink: 0;
+  }
+
+  & input:checked ~ span.toggle-slider:after {
+    opacity: 1;
+    transition: all 0.2s ease-out;
+    box-sizing: content-box;
+    left: ${(e) => F.checked.left[e.size]};
+    position: absolute;
+    border-radius: 100px;
+    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
+    background-color: ${(e) => e.disabled === !0 ? i(
+  e.theme,
+  "ToggleSlider",
+  e.color,
+  "disabled",
+  "background",
+  "backgroundOpacity"
+) : i(
+  e.theme,
+  "ToggleSlider",
+  e.color,
+  "enabled",
+  "background",
+  "backgroundOpacity"
+)};
+  }
+
+  & span.toggle-slider {
+    width: ${(e) => o.containerWidth[e.size]};
+    height: ${(e) => o.containerHeight[e.size]};
+    border-radius: 100px;
+    font-size: ${(e) => o.icon[e.size]};
+    flex-shrink: 0;
+  }
+
+  & span.toggle-slider::after {
+    left: 0.25rem;
+    width: ${(e) => o.slider[e.size]};
+    height: ${(e) => o.slider[e.size]};
+    top: 0.25rem;
+    border-radius: 100px;
+    box-shadow: 1px 1px 0.25rem; rgba(15, 23, 42, 0.16);
+    flex-shrink: 0;
+  }
+
+  & span.toggle-slider::before {
+    content: "${(e) => e.unicodeIcon ? "\\" + e.unicodeIcon : ""}";
+    font-family: FontAwesome;
+    font-weight: 900;
+    width: ${(e) => o.icon[e.size]};
+    text-align: center;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+
+    position: absolute;
+    color: ${(e) => i(
+  e.theme,
+  "ToggleIcon",
+  e.color,
+  "enabled",
+  "text"
+)};
+      flex-shrink: 0;
+    border-radius: 100px;
+    z-index: 2;
+
+    font-size: ${(e) => o.iconOff[e.size]};
+    width: ${(e) => o.iconOff[e.size]};
+
+    top: ${(e) => l.off.top[e.size]};
+    right: ${(e) => l.off.right[e.size]};
+    left: ${(e) => l.off.left[e.size]};
+  }
+
+  & input:checked ~ span.toggle-slider::before {
+    content: "${(e) => e.unicodeIcon ? "\\" + e.unicodeIcon : ""}";
+    font-family: FontAwesome;
+    font-weight: 900;
+    width: ${(e) => o.icon[e.size]};
+    text-align: center;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    flex-shrink: 0;
+    color: ${(e) => i(
+  e.theme,
+  "ToggleIcon",
+  e.color,
+  "enabled",
+  "text"
+)};
+
+    font-size: ${(e) => o.icon[e.size]};
+    width: ${(e) => o.icon[e.size]};
+
+    top: ${(e) => l.on.top[e.size]};
+    right: ${(e) => l.on.right[e.size]};
+    left: ${(e) => l.on.left[e.size]};
+  }
+
+  & span.toggle-slider {
+    position: relative;
+    width: ${(e) => o.containerWidth[e.size]};
+    height: ${(e) => o.containerHeight[e.size]};
+    background-color: ${(e) => e.disabled !== !0 ? i(
+  e.theme,
+  "Toggle",
+  null,
+  "enabled",
+  "background",
+  "backgroundOpacity"
+) : i(
+  e.theme,
+  "Toggle",
+  null,
+  "disabled",
+  "background",
+  "backgroundOpacity"
+)};
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+  }
+
+  & span.toggle-slider:after {
+    content: "";
+    position: absolute;
+    opacity: 1;
+    flex-shrink: 0;
+    background-color: ${(e) => e.disabled === !0 ? i(
+  e.theme,
+  "ToggleSlider",
+  e.color,
+  "disabled",
+  "background",
+  "backgroundOpacity"
+) : i(
+  e.theme,
+  "ToggleSlider",
+  e.color,
+  "enabled",
+  "background",
+  "backgroundOpacity"
+)};
+
+    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
+    transition: all 0.2s ease-out;
+  }
+`, N = k.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 3;
+
+  ${(e) => e.disabled ? f(e.theme, "Toggle", e.size, "disabled") : f(
+  e.theme,
+  "Toggle",
+  e.size,
+  "enabled"
+)};
+`, W = (e) => {
+  const {
+    // id,
+    disabled: s,
+    readOnly: d,
+    value: c,
+    label: m,
+    labelPosition: x = "right",
+    spaceBetween: z,
+    unicodeIcon: $,
+    // tabIndex,
+    //----------------
+    onChange: u,
+    change: A,
+    onFocus: r,
+    onBlur: a,
+    //----------------
+    className: p = "",
+    style: y = {},
+    size: w = "medium",
+    color: O = "primary",
+    ...T
+  } = e, I = B(), [v, h] = P(!1);
+  let b = {
+    theme: I,
+    size: w,
+    color: O,
+    disabled: s,
+    readOnly: d,
+    focused: v,
+    labelPosition: x,
+    spaceBetween: z
+  };
+  function C(n) {
+    s || d || (c === null ? u(n, !1) : u(n, !c));
+  }
+  return /* @__PURE__ */ S(
+    L,
+    {
+      ...b,
+      className: p,
+      style: y,
+      unicodeIcon: $,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ g(
+          "input",
+          {
+            type: "checkbox",
+            checked: c ? "checked" : "",
+            disabled: s,
+            readOnly: d,
+            onChange: C,
+            onFocus: (n) => {
+              h(!0), r && (r == null || r(n));
+            },
+            onBlur: (n) => {
+              h(!1), a && (a == null || a(n));
+            },
+            ...T
+          }
+        ),
+        /* @__PURE__ */ g("span", { tabIndex: -1, className: "toggle-slider" }),
+        m && /* @__PURE__ */ g(N, { tabIndex: -1, title: m, ...b, children: m })
+      ]
+    }
+  );
+};
+W.propTypes = {
+  id: t.any,
+  disabled: t.bool,
+  readOnly: t.bool,
+  label: t.oneOfType([t.element, t.string]),
+  unicodeIcon: t.string,
+  labelPosition: t.oneOf(["right", "left"]),
+  spaceBetween: t.bool,
+  tabIndex: t.number,
+  //-------------------------------
+  onChange: t.func,
+  change: t.func,
+  onFocus: t.func,
+  onBlur: t.func,
+  //-------------------------------
+  style: t.object,
+  className: t.string,
+  size: t.oneOf(["small", "medium", "large"]),
+  color: t.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  W as default
+};

package/dist/TreeMenu.cjs

@@ -0,0 +1,15 @@
+"use strict";const T=require("react/jsx-runtime"),s=require("react"),n=require("./index-DXnSjbfJ.cjs"),c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),w=c.newStyled.div`
+  padding: 0.25rem;
+  gap: ${t=>t.itemsGap};
+  display: flex;
+  flex-direction: column;
+  ${t=>t.widthFitContent==!1&&"min-width: 12.5rem"};
+  height: 100%;
+  justify-content: space-between;
+  & > .start-menu-items-lnc,
+  > .end-menu-items-lnc {
+    display: flex;
+    flex-direction: column;
+    gap: ${t=>t.itemsGap};
+  }
+`,N=s.forwardRef((t,r)=>{const{widthFitContent:M=!1,itemsGap:I="0.25rem",onItemSelected:u=()=>{},className:j="",style:P={},color:o="primary",size:p="small",children:f,...S}=t,i=s.useRef(),g=s.Children.map(f,(e,y)=>{var a,m,E,_,l;if(s.isValidElement(e)&&(e.props.__TYPE__=="MENU_ITEM"||((a=e==null?void 0:e.type)==null?void 0:a.displayName)==="MENU_ITEM"||e.props.__TYPE__=="NESTED_ITEM"||((m=e==null?void 0:e.type)==null?void 0:m.displayName)==="NESTED_ITEM"))return y==0&&e.props.justifyToEnd!==!0?(e.props.ref&&(i.current=r),s.cloneElement(e,{ref:r||i,color:o,size:p,onItemSelected:u})):e.props.justifyToEnd!==!0||e.props.__TYPE__=="NESTED_ITEM"||((E=e==null?void 0:e.type)==null?void 0:E.displayName)==="NESTED_ITEM"?s.cloneElement(e,{color:o,size:p,onItemSelected:u}):void 0;if(((_=e.props)==null?void 0:_.justifyToEnd)==!1||!((l=e.props)!=null&&l.justifyToEnd))return e}),x=s.Children.map(f,(e,y)=>{var a,m,E;if(s.isValidElement(e)&&(e.props.__TYPE__=="MENU_ITEM"||((a=e==null?void 0:e.type)==null?void 0:a.displayName)==="MENU_ITEM"||e.props.__TYPE__=="NESTED_ITEM"||((m=e==null?void 0:e.type)==null?void 0:m.displayName)==="NESTED_ITEM")&&e.props.justifyToEnd==!0)return y==0?(e.props.ref&&(i.current=r),s.cloneElement(e,{ref:r||i,color:e.props.color?e.props.color:o,size:p,onItemSelected:u})):s.cloneElement(e,{color:e.props.color?e.props.color:o,size:p,onItemSelected:u});if(((E=e.props)==null?void 0:E.justifyToEnd)==!0)return e});return T.jsxs(w,{ref:r,widthFitContent:M,itemsGap:I,size:p,color:o,className:"lnc-ui-treemenu "+j,style:P,...S,children:[T.jsx("div",{className:"nested-item-lnc start-menu-items-lnc",children:g}),T.jsx("div",{className:"nested-item-lnc end-menu-items-lnc",children:x})]})});N.propTypes={widthFitContent:n.PropTypes.bool,itemsGap:n.PropTypes.string,onItemSelected:n.PropTypes.func,className:n.PropTypes.string,style:n.PropTypes.object,color:n.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:n.PropTypes.oneOf(["small","medium","large"])};module.exports=N;

package/dist/TreeMenu.js

@@ -0,0 +1,108 @@
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import t, { useRef as C } from "react";
+import { P as s } from "./index-Ds9PUTwb.js";
+import { n as P } from "./emotion-styled.browser.esm-BZSYYThs.js";
+const D = P.div`
+  padding: 0.25rem;
+  gap: ${(r) => r.itemsGap};
+  display: flex;
+  flex-direction: column;
+  ${(r) => r.widthFitContent == !1 && "min-width: 12.5rem"};
+  height: 100%;
+  justify-content: space-between;
+  & > .start-menu-items-lnc,
+  > .end-menu-items-lnc {
+    display: flex;
+    flex-direction: column;
+    gap: ${(r) => r.itemsGap};
+  }
+`, Y = t.forwardRef((r, n) => {
+  const {
+    widthFitContent: N = !1,
+    itemsGap: M = "0.25rem",
+    //----------------
+    onItemSelected: f = () => {
+    },
+    //----------------
+    className: I = "",
+    style: S = {},
+    color: o = "primary",
+    size: p = "small",
+    children: _,
+    ...g
+  } = r, u = C(), j = t.Children.map(_, (e, i) => {
+    var a, m, E, T, y;
+    if (t.isValidElement(e) && (e.props.__TYPE__ == "MENU_ITEM" || ((a = e == null ? void 0 : e.type) == null ? void 0 : a.displayName) === "MENU_ITEM" || e.props.__TYPE__ == "NESTED_ITEM" || ((m = e == null ? void 0 : e.type) == null ? void 0 : m.displayName) === "NESTED_ITEM"))
+      return i == 0 && e.props.justifyToEnd !== !0 ? (e.props.ref && (u.current = n), t.cloneElement(e, {
+        ref: n || u,
+        //needed to focus on navigation
+        color: o,
+        size: p,
+        onItemSelected: f
+      })) : e.props.justifyToEnd !== !0 || e.props.__TYPE__ == "NESTED_ITEM" || ((E = e == null ? void 0 : e.type) == null ? void 0 : E.displayName) === "NESTED_ITEM" ? t.cloneElement(e, {
+        color: o,
+        size: p,
+        onItemSelected: f
+      }) : void 0;
+    if (((T = e.props) == null ? void 0 : T.justifyToEnd) == !1 || !((y = e.props) != null && y.justifyToEnd))
+      return e;
+  }), w = t.Children.map(_, (e, i) => {
+    var a, m, E;
+    if (t.isValidElement(e) && (e.props.__TYPE__ == "MENU_ITEM" || ((a = e == null ? void 0 : e.type) == null ? void 0 : a.displayName) === "MENU_ITEM" || e.props.__TYPE__ == "NESTED_ITEM" || ((m = e == null ? void 0 : e.type) == null ? void 0 : m.displayName) === "NESTED_ITEM") && e.props.justifyToEnd == !0)
+      return i == 0 ? (e.props.ref && (u.current = n), t.cloneElement(e, {
+        ref: n || u,
+        //needed to focus on navigation
+        color: e.props.color ? e.props.color : o,
+        size: p,
+        onItemSelected: f
+      })) : t.cloneElement(e, {
+        color: e.props.color ? e.props.color : o,
+        size: p,
+        onItemSelected: f
+      });
+    if (((E = e.props) == null ? void 0 : E.justifyToEnd) == !0) return e;
+  });
+  return /* @__PURE__ */ x(
+    D,
+    {
+      ref: n,
+      widthFitContent: N,
+      itemsGap: M,
+      size: p,
+      color: o,
+      className: "lnc-ui-treemenu " + I,
+      style: S,
+      ...g,
+      children: [
+        /* @__PURE__ */ l("div", { className: "nested-item-lnc start-menu-items-lnc", children: j }),
+        /* @__PURE__ */ l("div", { className: "nested-item-lnc end-menu-items-lnc", children: w })
+      ]
+    }
+  );
+});
+Y.propTypes = {
+  widthFitContent: s.bool,
+  /**
+   * Gap between Menu Items
+   */
+  itemsGap: s.string,
+  //---------------------------------------------------------------
+  onItemSelected: s.func,
+  //---------------------------------------------------------------
+  className: s.string,
+  style: s.object,
+  color: s.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ]),
+  size: s.oneOf(["small", "medium", "large"])
+};
+export {
+  Y as default
+};

package/dist/TreeMenuSeparator.cjs

@@ -0,0 +1,6 @@
+"use strict";const i=require("react/jsx-runtime"),l=require("react"),r=require("./index-DXnSjbfJ.cjs"),m=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),u=require("./utils-hdRGTsQ7.cjs"),p=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),d=m.newStyled.div`
+  height: 1px;
+  background-color: ${e=>u.getColorRgbaValue(e.theme,"MenuItem","default","enabled","separator")};
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+`,t=l.forwardRef((e,s)=>{const{className:o="",style:n={},...a}=e,c=p.useTheme();return i.jsx(d,{ref:s,theme:c,className:"lnc-ui-separator "+o,style:n,...a})});t.propTypes={className:r.PropTypes.string,style:r.PropTypes.object};module.exports=t;

package/dist/TreeMenuSeparator.js

@@ -0,0 +1,40 @@
+import { jsx as p } from "react/jsx-runtime";
+import l from "react";
+import { P as r } from "./index-Ds9PUTwb.js";
+import { n } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { b as i } from "./utils-DEke8iwo.js";
+import { u as c } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const f = n.div`
+  height: 1px;
+  background-color: ${(e) => i(
+  e.theme,
+  "MenuItem",
+  "default",
+  "enabled",
+  "separator"
+)};
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+`, u = l.forwardRef((e, t) => {
+  const { className: a = "", style: o = {}, ...s } = e, m = c();
+  return /* @__PURE__ */ p(
+    f,
+    {
+      ref: t,
+      theme: m,
+      className: "lnc-ui-separator " + a,
+      style: o,
+      ...s
+    }
+  );
+});
+u.propTypes = {
+  /**
+   * When the separator needs to be set beetween Menu Items that are justified to end, prop needs to be set to `justifyToEnd={true}`
+   */
+  className: r.string,
+  style: r.object
+};
+export {
+  u as default
+};

package/dist/UploadedFile.cjs

@@ -0,0 +1,39 @@
+"use strict";const r=require("react/jsx-runtime"),N=require("react"),s=require("./index-DXnSjbfJ.cjs"),t=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),h=require("./Icon.cjs"),U=require("./ProgressBar.cjs"),m=require("./utils-hdRGTsQ7.cjs"),M=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),w={small:"1.5rem",medium:"1.75rem",large:"2rem"},P={small:"2.25rem",medium:"2.5rem",large:"2.75rem"},O=t.newStyled.div`
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+
+  height: ${e=>e.progress?P[e.size]:w[e.size]};
+  height: ${e=>e.progress?P[e.size]:w[e.size]};
+`,R=t.newStyled.div`
+  color: ${e=>m.getColorRgbaValue(e.theme,"UploadedFile",e.color,"enabled","color")};
+
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1875rem;
+  min-width: 0;
+  flex-shrink: 1;
+  min-height: 0;
+`,_=t.newStyled.div`
+  display: flex;
+  justify-content: space-between;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  ${e=>m.getComponentTypographyCss(e.theme,"UploadedFile",e.size,"enabled")};
+`,E=t.newStyled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${e=>e.onCancel?"pointer":"default"};
+`,W=t.newStyled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: ${e=>e.hasOnClick?"pointer":"default"};
+
+  ${e=>m.getComponentTypographyCss(e.theme,"UploadedFile",e.size,"enabled")};
+`,x=N.forwardRef((e,z)=>{const{id:T,fileName:c="file",fileSize:p=null,showFileSize:C=!1,progressPercentage:n,onFileClick:l=()=>{},onCancel:a=()=>{},size:j="small",color:B="primary",className:F="",style:S={},fileIcon:b="file",cancelIcon:k="times",...d}=e;var i={theme:M.useTheme(),size:j,color:B,progress:n&&n>0};const v=()=>c&&p&&C?`${c} (${$(p,2)})`:c||"";function $(o,y=2){if(o===0)return"0 Bytes";const f=1024,q=y<0?0:y,I=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],g=Math.floor(Math.log(o)/Math.log(f));return parseFloat((o/Math.pow(f,g)).toFixed(q))+" "+I[g]}const u={small:"1rem",medium:"1.25rem",large:"1.5rem"};return r.jsxs(O,{ref:z,id:T,...i,className:"lnc-ui-uploaded-file "+F,style:S,...d,children:[r.jsx(h,{...i,icon:b,sizeInUnits:u[e.size],style:{cursor:l?"pointer":"default"},onClick:o=>l?l(o):null}),r.jsxs(R,{...i,children:[r.jsxs(_,{...i,children:[r.jsx(W,{...i,hasOnClick:!!l,onClick:o=>l?l(o):null,children:v()}),n&&r.jsxs("div",{children:[n,"%"]})]}),(n||n==0)&&r.jsx(U,{progressPercentage:n,style:{height:"0.5rem"},...i})]}),r.jsx(E,{onCancel:a,onClick:a||null,children:r.jsx(h,{...i,icon:k,sizeInUnits:u[e.size],...d})})]})});x.propTypes={id:s.PropTypes.any,fileName:s.PropTypes.string,fileSize:s.PropTypes.oneOfType([s.PropTypes.string,s.PropTypes.number]),showFileSize:s.PropTypes.bool,progressPercentage:s.PropTypes.number,className:s.PropTypes.string,style:s.PropTypes.object,onFileClick:s.PropTypes.func,onCancel:s.PropTypes.func,size:s.PropTypes.oneOf(["small","medium","large"]),color:s.PropTypes.oneOf(["primary","secondary","success","danger","warning","disabled","neutral","information","gray"]),fileIcon:s.PropTypes.string,cancelIcon:s.PropTypes.string};module.exports=x;