no-frills-ui 0.0.14-rc.3 → 0.0.14-rc.4

package/dist/index.js

@@ -252,23 +252,23 @@ const getThemeValue = (key)=>{
 };
 
 const Ellipsis = /*#__PURE__*/ styled("span", {
-    target: "eot8j4m0",
+    target: "e10k0igo0",
     label: "Ellipsis"
 })("white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;");
 const Header$1 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m1",
+    target: "e10k0igo1",
     label: "Header"
 })("padding:10px 15px;line-height:26px;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";font-size:16px;font-weight:bold;");
 const Body$1 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m2",
+    target: "e10k0igo2",
     label: "Body"
-})("padding:0 15px;margin:20px 0;flex:1;overflow:visible;");
+})("padding:0 15px;margin:20px 0;flex:1;overflow:visible;display:flow-root;");
 const Footer$1 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m3",
+    target: "e10k0igo3",
     label: "Footer"
 })("padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:flex;justify-content:flex-end;");
 const ErrorContainer$7 = /*#__PURE__*/ styled("div", {
-    target: "eot8j4m4",
+    target: "e10k0igo4",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;");
 
@@ -310,9 +310,9 @@ const BadgeSpan = /*#__PURE__*/ styled("span", {
 const Badge = /*#__PURE__*/ React.forwardRef(BadgeComponent);
 
 const StyledCard = /*#__PURE__*/ styled("div", {
-    target: "e9lfq9w0",
+    target: "e7s3yg90",
     label: "StyledCard"
-})("border-radius:10px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";", (props)=>props.elevated ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};` : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`, "    margin:5px;overflow:auto;position:relative;");
+})("border-radius:10px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";", (props)=>props.elevated ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};` : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`, "    margin:5px;overflow:visible;display:flow-root;position:relative;");
 /**
  * Card Component
  * @param props - Component props
@@ -326,35 +326,35 @@ const StyledCard = /*#__PURE__*/ styled("div", {
 const Card = /*#__PURE__*/ React.forwardRef(CardComponent);
 
 const Step$1 = /*#__PURE__*/ styled(Card, {
-    target: "ex87x7i0",
+    target: "e1vu5oed0",
     label: "Step"
-})("transition:all 0.6s ease;overflow:visible;", (props)=>props.open && `margin: 20px 5px;`);
+})("transition:all 0.6s ease;overflow:visible;display:flow-root;", (props)=>props.open && `margin: 20px 5px;`);
 const StepHeader = /*#__PURE__*/ styled("button", {
-    target: "ex87x7i1",
+    target: "e1vu5oed1",
     label: "StepHeader"
 })("padding:20px 15px;display:flex;justify-content:space-between;background:none;border:none;border-radius:10px;width:100%;font-size:inherit;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus-visible{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}& input{appearance:none;margin:0;}", (props)=>props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`, " ", (props)=>props.open && `border-radius: 10px 10px 0 0;`, " ", (props)=>props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`);
 const HeaderContainer = /*#__PURE__*/ styled("div", {
-    target: "ex87x7i2",
+    target: "e1vu5oed2",
     label: "HeaderContainer"
 })("display:flex;align-items:center;min-width:40px;& svg{vertical-align:top;margin-right:10px;fill:", (props)=>props.open ? getThemeValue(THEME_NAME.PRIMARY) : props.completed ? getThemeValue(THEME_NAME.SUCCESS) : getThemeValue(THEME_NAME.LIGHT_GREY), ";transform:", (props)=>props.open ? 'scale(0.8)' : 'scale(0.6)', ";transition:all 0.3s ease;min-width:24px;}");
 const ExpandContainer = /*#__PURE__*/ styled("div", {
-    target: "ex87x7i3",
+    target: "e1vu5oed3",
     label: "ExpandContainer"
 })("display:flex;align-items:center;& svg{vertical-align:top;margin-right:10px;transition:all 0.6s ease;fill:currentColor;}", (props)=>props.open ? `& svg { transform: rotate(180deg); }` : '');
 const StepBody = /*#__PURE__*/ styled("div", {
-    target: "ex87x7i4",
+    target: "e1vu5oed4",
     label: "StepBody"
 })("transition:all 0.6s ease;overflow:hidden;height:", (props)=>props.height || 0, "px;");
 const AccordionBadge = /*#__PURE__*/ styled(Badge, {
-    target: "ex87x7i5",
+    target: "e1vu5oed5",
     label: "AccordionBadge"
 })("margin-right:15px;");
 const AccordionStepBody = /*#__PURE__*/ styled("div", {
-    target: "ex87x7i6",
+    target: "e1vu5oed6",
     label: "AccordionStepBody"
 })("padding:20px 15px;");
 const AccordionStepFooter = /*#__PURE__*/ styled("div", {
-    target: "ex87x7i7",
+    target: "e1vu5oed7",
     label: "AccordionStepFooter"
 })("display:flex;justify-content:flex-end;padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";");
 /**
@@ -3185,9 +3185,9 @@ Drawer.defaultProps = {
 };
 
 const Container$3 = /*#__PURE__*/ styled("div", {
-    target: "e1m58trk0",
+    target: "e1t79jfh0",
     label: "Container"
-})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:first-of-type,& > label:first-of-type input,& > label:first-of-type select,& > *:first-of-type label,& > *:first-of-type input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
+})("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:nth-child(1 of:not(style)),& > label:nth-child(1 of:not(style)) input,& > label:nth-child(1 of:not(style)) select,& > *:nth-child(1 of:not(style)) label,& > *:nth-child(1 of:not(style)) input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
         border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
         & > button, & > label {
@@ -3195,7 +3195,7 @@ const Container$3 = /*#__PURE__*/ styled("div", {
         }
     ` : '');
 const ErrorContainer = /*#__PURE__*/ styled("div", {
-    target: "e1m58trk1",
+    target: "e1t79jfh1",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";margin-left:8px;font-size:12px;");
 /**
@@ -3807,11 +3807,15 @@ const DEFAULT_DURATION$1 = 5000;
      */ this.destroy = (position)=>{
             const container = this.containers.get(position);
             if (container) {
-                container.root.unmount();
-                if (document.body.contains(container.div)) {
-                    document.body.removeChild(container.div);
-                }
-                this.containers.delete(position);
+                // Defer unmount to avoid trying to synchronously unmount a root
+                // while React is already rendering which can cause a race.
+                setTimeout(()=>{
+                    container.root.unmount();
+                    if (document.body.contains(container.div)) {
+                        document.body.removeChild(container.div);
+                    }
+                    this.containers.delete(position);
+                }, 0);
             }
         };
     }
@@ -4111,15 +4115,15 @@ const getBackgroundColor = (type)=>{
     }
 };
 const ToastContainer = /*#__PURE__*/ styled(Card, {
-    target: "e1bc14ug0",
+    target: "eb8x2sp0",
     label: "ToastContainer"
 })("box-sizing:border-box;border-radius:3px;padding:12px;background-color:", (props)=>getBackgroundColor(props.type), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";margin:20px;font-size:14px;line-height:20px;transform:translateY(100%);transition:transform 0.3s ease;width:344px;display:flex;align-items:center;position:relative;& svg{width:20px;height:20px;fill:currentColor;}@media (max-width:480px){&{margin:0;width:100vw;border-radius:0;}}.nf-layer-enter &{transform:translateY(0%);}");
 const TextContainer = /*#__PURE__*/ styled("div", {
-    target: "e1bc14ug1",
+    target: "eb8x2sp1",
     label: "TextContainer"
 })("flex:1;");
 const CloseContainer = /*#__PURE__*/ styled("button", {
-    target: "e1bc14ug2",
+    target: "eb8x2sp2",
     label: "CloseContainer"
 })("background-color:transparent;color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";padding:6px 10px;border:none;border-radius:3px;text-transform:uppercase;cursor:pointer;&:focus{background-color:rgba(255,255,255,0.1);}");
 const DEFAULT_DURATION = 2000;
@@ -4181,7 +4185,9 @@ class Toast {
             })
         });
         const Component = this.toast[0];
-        this.root = client.createRoot(this.element);
+        if (!this.root) {
+            this.root = client.createRoot(this.element);
+        }
         this.root.render(/*#__PURE__*/ jsxRuntime.jsx(Component, {}));
         this.timeout = setTimeout(()=>{
             this.remove();