@loadsmart/loadsmart-ui 8.0.1 → 8.0.3

package/dist/index.js

@@ -1079,10 +1079,7 @@ const TextHidden = styled.span.withConfig({
   displayName: "TextHidden",
   componentId: "ls-ui__sc-1540wdq-7"
 })`transform:scale(0);`;
-const StyledLoadingDots = styled(LoadingDots).attrs({
-  "aria-label": void 0,
-  role: "presentation"
-}).withConfig({
+const StyledLoadingDots = styled(LoadingDots).withConfig({
   displayName: "StyledLoadingDots",
   componentId: "ls-ui__sc-1540wdq-8"
 })`position:absolute;left:0;display:flex;align-items:center;justify-content:center;width:100%;`;
@@ -1092,7 +1089,7 @@ const ButtonLoadingDots = ({
 }) => {
   const buttonLightVariants = /* @__PURE__ */ new Set(["secondary", "warning", "icon", "tertiary"]);
   const loadingDotsVariant = buttonLightVariants.has(buttonVariant) ? "dark" : "light";
-  return /* @__PURE__ */ React__default.createElement(StyledLoadingDots, { ...remainingProps, variant: loadingDotsVariant });
+  return /* @__PURE__ */ React__default.createElement(StyledLoadingDots, { ...remainingProps, variant: loadingDotsVariant, "aria-label": "", role: "presentation" });
 };
 function ButtonChildrenWrapper({
   loading: loading2,
@@ -1953,10 +1950,10 @@ const StyledLi = styled.li.withConfig({
   weight: "breadcrumbs-font-weight"
 })} position:relative;display:inline-flex;align-items:center;font-weight:${conditional({
   "breadcrumbs-font-weight": whenProps({
-    active: false
+    $active: false
   }),
   "breadcrumbs-font-weight--active": whenProps({
-    active: true
+    $active: true
   })
 })};font-size:${getToken("breadcrumbs-font-size")};line-height:${getToken("breadcrumbs-font-height")};& + &{margin:0 0 0 ${getToken("breadcrumbs-spacing-x")};}&:not(:only-child):not(:last-child)::after{position:absolute;left:calc(100% + 14px);font-weight:${getToken("font-weight-bold")};font-size:${getToken("breadcrumbs-font-size")};line-height:${getToken("breadcrumbs-font-height")};content:'/';}`;
 function getWrappedLabel(props) {
@@ -1982,7 +1979,7 @@ function Breadcrumb({
 }) {
   return /* @__PURE__ */ React__default.createElement(StyledLi, { className: clsx({
     "is-active": active
-  }), label, "data-testid": "breadcrumb", active }, getWrappedLabel({
+  }), "data-testid": "breadcrumb", $active: active }, getWrappedLabel({
     label,
     url,
     active,
@@ -2714,17 +2711,17 @@ const StyledLabel = styled.label.withConfig({
   })
 })};cursor:pointer;position:relative;bottom:-2px;border-bottom-width:2px;border-bottom-style:solid;border-color:${conditional({
   "color-transparent": whenProps({
-    active: false
+    $active: false
   }),
   "color-primary": whenProps({
-    active: true
+    $active: true
   })
 })};color:${conditional({
   "color-neutral": whenProps({
-    active: false
+    $active: false
   }),
   "neutral-darker": whenProps({
-    active: true
+    $active: true
   })
 })};${Leading$7} + ${Children$2}{margin:${conditional({
   "0": whenProps({
@@ -2775,7 +2772,7 @@ function TabsItem({
   }, [activeTab, name, setActiveTab, isDefault]);
   return /* @__PURE__ */ React__default.createElement(StyledListItem, { role: "tab", "aria-selected": isActive ? "true" : "false" }, /* @__PURE__ */ React__default.createElement(StyledLabel, { className: clsx({
     "is-disabled": disabled
-  }, className), active: activeTab === name, direction }, /* @__PURE__ */ React__default.createElement("input", { ...props, value: name, checked: isActive, disabled, type: "radio", name: tabId, onChange: handleSelect, hidden: true }), leading && /* @__PURE__ */ React__default.createElement(Leading$7, null, leading), children && /* @__PURE__ */ React__default.createElement(Children$2, null, children)));
+  }, className), $active: activeTab === name, direction }, /* @__PURE__ */ React__default.createElement("input", { ...props, value: name, checked: isActive, disabled, type: "radio", name: tabId, onChange: handleSelect, hidden: true }), leading && /* @__PURE__ */ React__default.createElement(Leading$7, null, leading), children && /* @__PURE__ */ React__default.createElement(Children$2, null, children)));
 }
 const PanelsItemsWrapper = styled.div.withConfig({
   displayName: "PanelsItemsWrapper",
@@ -2926,10 +2923,10 @@ const StyledWrapper$1 = styled.article.withConfig({
   componentId: "ls-ui__sc-19rt34n-0"
 })`background:${getToken("color-neutral-white")};border:1px solid ${conditional({
   "color-neutral-light": whenProps({
-    open: false
+    $open: false
   }),
   "color-accent": whenProps({
-    open: true
+    $open: true
   })
 })};border-radius:${getToken("border-radius-s")};${hoverableStyle`
     border-color: ${getToken("color-accent")};
@@ -2941,10 +2938,10 @@ const StyledToggle = styled.button.withConfig({
   height: "font-height-2"
 })} ${transitionStyle()} display:flex;flex-direction:row;justify-content:flex-start;align-items:center;font-size:${getToken("font-size-3")};font-weight:${conditional({
   "font-weight-regular": whenProps({
-    open: false
+    $open: false
   }),
   "font-weight-bold": whenProps({
-    open: true
+    $open: true
   })
 })};text-align:left;cursor:pointer;color:${getToken("color-neutral-darker")};background-color:${getToken("color-transparent")};border-radius:${getToken("border-radius-s")};border:none;box-sizing:border-box;padding:${getToken("space-s")} ${getToken("space-m")};width:100%;${hoverableStyle`
     background: ${getToken("color-neutral-lighter")};
@@ -2959,31 +2956,31 @@ const StyledContent = styled.section.withConfig({
   weight: "font-weight-medium"
 })} padding-left:${conditional({
   "0": whenProps({
-    open: false
+    $open: false
   }),
   "space-m": whenProps({
-    open: true
+    $open: true
   })
 })};padding-right:${conditional({
   "0": whenProps({
-    open: false
+    $open: false
   }),
   "space-m": whenProps({
-    open: true
+    $open: true
   })
 })};padding-top:${conditional({
   "0": whenProps({
-    open: false
+    $open: false
   }),
   "space-xl": whenProps({
-    open: true
+    $open: true
   })
 })};padding-bottom:${conditional({
   "0": whenProps({
-    open: false
+    $open: false
   }),
   "space-s": whenProps({
-    open: true
+    $open: true
   })
 })};overflow-x:hidden;overflow-y:auto;`;
 const HiddenInput$2 = styled.input.withConfig({
@@ -3016,7 +3013,7 @@ function AccordionWrapper({
   ...others
 }) {
   const [open] = useAccordionContext();
-  return /* @__PURE__ */ React__default.createElement(StyledWrapper$1, { "data-testid": "accordion", open, ...others }, children);
+  return /* @__PURE__ */ React__default.createElement(StyledWrapper$1, { "data-testid": "accordion", $open: open, ...others }, children);
 }
 function AccordionToggle({
   leading,
@@ -3025,14 +3022,14 @@ function AccordionToggle({
 }) {
   const [open, toggle] = useAccordionContext();
   const trailing = propsTrailing === void 0 ? /* @__PURE__ */ React__default.createElement(ToggleIndicator, { open }) : propsTrailing;
-  return /* @__PURE__ */ React__default.createElement(StyledToggle, { open, onClick: toggle, type: "button", "data-testid": "accordion-toggle" }, leading && /* @__PURE__ */ React__default.createElement(Leading$5, { "data-testid": "accordion-toggle-leading" }, isFunction(leading) ? leading(open) : leading), /* @__PURE__ */ React__default.createElement(Children$1, null, children), trailing && /* @__PURE__ */ React__default.createElement(Trailing$1, { "data-testid": "accordion-toggle-trailing" }, isFunction(trailing) ? trailing(open) : trailing));
+  return /* @__PURE__ */ React__default.createElement(StyledToggle, { $open: open, onClick: toggle, type: "button", "data-testid": "accordion-toggle" }, leading && /* @__PURE__ */ React__default.createElement(Leading$5, { "data-testid": "accordion-toggle-leading" }, isFunction(leading) ? leading(open) : leading), /* @__PURE__ */ React__default.createElement(Children$1, null, children), trailing && /* @__PURE__ */ React__default.createElement(Trailing$1, { "data-testid": "accordion-toggle-trailing" }, isFunction(trailing) ? trailing(open) : trailing));
 }
 function AccordionBody({
   children,
   ...props
 }) {
   const [open] = useAccordionContext();
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(HiddenInput$2, { type: "checkbox", checked: open, onChange: identity }), /* @__PURE__ */ React__default.createElement(StyledContent, { open, className: clsx({
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(HiddenInput$2, { type: "checkbox", checked: open, onChange: identity }), /* @__PURE__ */ React__default.createElement(StyledContent, { $open: open, className: clsx({
     "is-open": open
   }), "aria-hidden": !open ? "true" : "false", "data-testid": "accordion-content", ...props }, children));
 }
@@ -3337,6 +3334,9 @@ function BannerActionLarge({
   } }, /* @__PURE__ */ React__default.createElement(Icon$1, { name: "close", size: 16 })));
 }
 const Text$1 = styled.span.withConfig({
+  shouldForwardProp: (prop2) => !["variant", "italic", "color"].includes(prop2)
+}).withConfig({
+  displayName: "Text",
   componentId: "ls-ui__sc-zt0drp-0"
 })`${({
   variant,
@@ -3351,10 +3351,10 @@ const ModalWrapper = styled.div.withConfig({
   componentId: "ls-ui__sc-1cr3d2v-0"
 })`position:fixed;top:0;left:0;z-index:${getToken("z-index-overlay")};display:${conditional({
   flex: whenProps({
-    open: true
+    $open: true
   }),
   none: whenProps({
-    open: false
+    $open: false
   })
 })};align-items:center;justify-content:center;width:100%;height:100%;background:${getToken("modal-overlay-background")};`;
 const HeaderWrapper = styled.div.withConfig({
@@ -3371,10 +3371,8 @@ const Content$1 = styled.div.withConfig({
   displayName: "Content",
   componentId: "ls-ui__sc-1cr3d2v-3"
 })`background:white;border-radius:${getToken("border-radius-s")};box-shadow:${getToken("shadow-modal")};padding:${getToken("space-xl")};margin:0 auto;position:relative;outline:none;z-index:${getToken("z-index-modal")};${({
-  fullscreen
-}) => fullscreen && css`position:absolute;top:0;left:0;width:100%;height:100vh;`} ${({
-  fullscreen
-}) => !fullscreen && css`position:relative;left:auto;width:80%;max-width:${conditional({
+  $fullscreen
+}) => $fullscreen && css`position:absolute;top:0;left:0;width:100%;height:100vh;`} ${(props) => !props.$fullscreen && css`position:relative;left:auto;width:80%;max-width:${conditional({
   "modal-small-max-width": whenProps({
     scale: "small"
   }),
@@ -3399,7 +3397,7 @@ function Modal({
   onOverlayClick = () => null,
   ...others
 }) {
-  return ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement(ModalWrapper, { open, fullscreen, onClick: onOverlayClick, "data-testid": "modal-overlay", ...others }, /* @__PURE__ */ React__default.createElement(Content$1, { role: "dialog", "aria-modal": "true", fullscreen, scale, onClick: (e) => {
+  return ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement(ModalWrapper, { $open: open, $fullscreen: fullscreen, onClick: onOverlayClick, "data-testid": "modal-overlay", ...others }, /* @__PURE__ */ React__default.createElement(Content$1, { role: "dialog", "aria-modal": "true", $fullscreen: fullscreen, scale, onClick: (e) => {
     e.stopPropagation();
   } }, children)), document.body);
 }
@@ -3934,6 +3932,8 @@ function Pagination(props) {
   return /* @__PURE__ */ React__default.createElement("nav", { "aria-label": "pagination navigation", ...others }, /* @__PURE__ */ React__default.createElement(Layout.Group, { space: "none", align: "center" }, items.map((item) => /* @__PURE__ */ React__default.createElement(PaginationItem, { key: `${item.itemType}${item.page || ""}`, ...item }))));
 }
 const Bar = styled.div.withConfig({
+  shouldForwardProp: (prop2) => !["rounded"].includes(prop2)
+}).withConfig({
   displayName: "Bar",
   componentId: "ls-ui__sc-15bfvuo-0"
 })`align-items:center;display:flex;flex-grow:0;flex-shrink:1;justify-content:center;overflow:hidden;width:100%;position:relative;height:${getToken("progressbar-height")};${({
@@ -3995,10 +3995,10 @@ const SwitchWrapper = styled.label.withConfig({
   })
 })};background-color:${conditional({
   "switch-inactive-background-color": whenProps({
-    active: false
+    $active: false
   }),
   "switch-active-background-color": whenProps({
-    active: true
+    $active: true
   })
 })};border-radius:${conditional({
   "switch-border-radius": whenProps({
@@ -4010,10 +4010,10 @@ const SwitchWrapper = styled.label.withConfig({
 })};${hoverableStyle`
     background: ${conditional({
   "switch-inactive-background-color--hover": whenProps({
-    active: false
+    $active: false
   }),
   "switch-active-background-color--hover": whenProps({
-    active: true
+    $active: true
   })
 })};
   `} ${focusableStyle`
@@ -4024,39 +4024,39 @@ const SwitchWrapper = styled.label.withConfig({
 const Slider = styled.span.withConfig({
   displayName: "Slider",
   componentId: "ls-ui__sc-i2tbp1-1"
-})`position:absolute;top:0;right:0;bottom:0;left:0;:before{position:absolute;bottom:${conditional({
+})`position:absolute;top:0;right:0;bottom:0;left:0;&:before{position:absolute;bottom:${conditional({
   "switch-slider-y": whenProps({
     scale: "default",
-    active: false
+    $active: false
   }),
   "switch-slider-active-y": whenProps({
     scale: "default",
-    active: true
+    $active: true
   }),
   "switch-slider-large-y": whenProps({
     scale: "large",
-    active: false
+    $active: false
   }),
   "switch-slider-large-active-y": whenProps({
     scale: "large",
-    active: true
+    $active: true
   })
 })};left:${conditional({
   "switch-slider-x": whenProps({
     scale: "default",
-    active: false
+    $active: false
   }),
   "switch-slider-active-x": whenProps({
     scale: "default",
-    active: true
+    $active: true
   }),
   "switch-slider-large-x": whenProps({
     scale: "large",
-    active: false
+    $active: false
   }),
   "switch-slider-large-active-x": whenProps({
     scale: "large",
-    active: true
+    $active: true
   })
 })};width:${conditional({
   "switch-slider-size": whenProps({
@@ -4153,9 +4153,9 @@ function Switch({
   scale = "default",
   ...others
 }) {
-  return /* @__PURE__ */ React__default.createElement(SwitchWrapper, { htmlFor: name, title: active ? "active" : "inactive", active, className: clsx(className, {
+  return /* @__PURE__ */ React__default.createElement(SwitchWrapper, { htmlFor: name, title: active ? "active" : "inactive", $active: active, className: clsx(className, {
     "is-disabled": disabled
-  }), scale }, active ? /* @__PURE__ */ React__default.createElement(ActiveIcon, { name: "check", scale, "data-testid": "switch-icon-active" }) : /* @__PURE__ */ React__default.createElement(InactiveIcon, { name: "close", scale, "data-testid": "switch-icon-inactive" }), /* @__PURE__ */ React__default.createElement(Slider, { active, scale }), /* @__PURE__ */ React__default.createElement(HiddenInput$1, { type: "checkbox", ...others, id: name, name, checked: active, disabled, onChange: onToggle }));
+  }), scale }, active ? /* @__PURE__ */ React__default.createElement(ActiveIcon, { name: "check", scale, "data-testid": "switch-icon-active" }) : /* @__PURE__ */ React__default.createElement(InactiveIcon, { name: "close", scale, "data-testid": "switch-icon-inactive" }), /* @__PURE__ */ React__default.createElement(Slider, { $active: active, scale }), /* @__PURE__ */ React__default.createElement(HiddenInput$1, { type: "checkbox", ...others, id: name, name, checked: active, disabled, onChange: onToggle }));
 }
 const StyledTag = styled.span.withConfig({
   displayName: "StyledTag",
@@ -4727,24 +4727,24 @@ const StepConnector = styled.span.withConfig({
   componentId: "ls-ui__sc-2f98mi-0"
 })`position:absolute;top:${conditional({
   "steps-conector-top": whenProps({
-    complete: false
+    $complete: false
   }),
   "steps-conector-top--complete": whenProps({
-    complete: true
+    $complete: true
   })
 })};right:calc(-50% + ${getToken("steps-indicator-size")} / 2);left:calc(50% + ${getToken("steps-indicator-size")} / 2);z-index:0;height:${conditional({
   "steps-conector-height": whenProps({
-    complete: false
+    $complete: false
   }),
   "steps-conector-height--complete": whenProps({
-    complete: true
+    $complete: true
   })
 })};background:${conditional({
   "steps-progress-step-background-color": whenProps({
-    complete: false
+    $complete: false
   }),
   "steps-progress-step-background-color--complete": whenProps({
-    complete: true
+    $complete: true
   })
 })};`;
 const ProgressStepWrapper = styled.li.withConfig({
@@ -4763,39 +4763,39 @@ const StepIndicator = styled.span.withConfig({
   height: "steps-indicator-size"
 })} font-size:${getToken("font-size-4")};height:${getToken("steps-indicator-size")};width:${getToken("steps-indicator-size")};display:flex;justify-content:center;align-items:center;border-width:2px;border-style:solid;border-color:${conditional({
   "steps-progress-step-background-color--complete": whenProps([{
-    current: true,
-    complete: [true, false]
+    $current: true,
+    $complete: [true, false]
   }, {
-    current: false,
-    complete: true
+    $current: false,
+    $complete: true
   }]),
   "steps-progress-step-background-color": whenProps({
-    current: false,
-    complete: false
+    $current: false,
+    $complete: false
   })
 })};border-radius:${getToken("border-radius-circle")};background:${conditional({
   "steps-progress-step-background-color--complete": whenProps([{
-    current: false,
-    complete: true
+    $current: false,
+    $complete: true
   }]),
   "color-neutral-white": whenProps([{
-    current: true,
-    complete: [true, false]
+    $current: true,
+    $complete: [true, false]
   }, {
-    current: false,
-    complete: false
+    $current: false,
+    $complete: false
   }])
 })};color:${conditional({
   "steps-progress-step-background-color": whenProps({
-    current: false,
-    complete: false
+    $current: false,
+    $complete: false
   }),
   "color-neutral-white": whenProps({
-    current: false,
-    complete: true
+    $current: false,
+    $complete: true
   }),
   "steps-progress-step-background-color--complete": whenProps({
-    current: true
+    $current: true
   })
 })};`;
 const StepLabel = styled.span.withConfig({
@@ -4805,21 +4805,21 @@ const StepLabel = styled.span.withConfig({
   height: "font-height-2"
 })} position:relative;font-weight:${conditional({
   "font-weight-medium": whenProps({
-    current: false
+    $current: false
   }),
   "font-weight-bold": whenProps({
-    current: true
+    $current: true
   })
 })};color:${conditional({
   "color-neutral-darker": whenProps([{
-    current: true
+    $current: true
   }, {
-    current: false,
-    complete: true
+    $current: false,
+    $complete: true
   }]),
   "color-neutral": whenProps({
-    current: false,
-    complete: false
+    $current: false,
+    $complete: false
   })
 })};font-size:${getToken("font-size-4")};display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;margin:${getToken("space-xs")} 0 0 0;`;
 function ProgressStep(props) {
@@ -4831,7 +4831,7 @@ function ProgressStep(props) {
   return /* @__PURE__ */ React__default.createElement(ProgressStepWrapper, null, /* @__PURE__ */ React__default.createElement(ProgressStepContainer, { "data-testid": "steps-timeline-entry", className: clsx({
     "is-current": current,
     "is-complete": step.complete
-  }) }, /* @__PURE__ */ React__default.createElement(StepIndicator, { "aria-hidden": "true", current, complete: step.complete }, indicator), /* @__PURE__ */ React__default.createElement(StepLabel, { current, complete: step.complete }, step.label), /* @__PURE__ */ React__default.createElement(StepConnector, { complete: step.complete })));
+  }) }, /* @__PURE__ */ React__default.createElement(StepIndicator, { "aria-hidden": "true", $current: current, $complete: step.complete }, indicator), /* @__PURE__ */ React__default.createElement(StepLabel, { $current: current, $complete: step.complete }, step.label), /* @__PURE__ */ React__default.createElement(StepConnector, { $complete: step.complete })));
 }
 const ProgressWrapper = styled.ol.withConfig({
   displayName: "ProgressWrapper",
@@ -5023,8 +5023,8 @@ const Container$7 = styled.div.withConfig({
   displayName: "Container",
   componentId: "ls-ui__sc-6522t2-4"
 })`display:flex;flex:1;flex-direction:column;line-height:${getToken("card-font-height")};${({
-  flagged
-}) => flagged && css`${CardSeparator}{margin-left:calc(-1 * ${getToken("space-s")});}`}`;
+  $flagged
+}) => $flagged && css`${CardSeparator}{margin-left:calc(-1 * ${getToken("space-s")});}`}`;
 const Flag = styled.span.withConfig({
   displayName: "Flag",
   componentId: "ls-ui__sc-6522t2-5"
@@ -5048,7 +5048,7 @@ function Card({
   children,
   ...others
 }) {
-  return /* @__PURE__ */ React__default.createElement(Wrapper$4, { ...others }, flagged && /* @__PURE__ */ React__default.createElement(Flag, { status, "aria-label": status }), /* @__PURE__ */ React__default.createElement(Container$7, { flagged }, children));
+  return /* @__PURE__ */ React__default.createElement(Wrapper$4, { ...others }, flagged && /* @__PURE__ */ React__default.createElement(Flag, { status, "aria-label": status }), /* @__PURE__ */ React__default.createElement(Container$7, { $flagged: flagged }, children));
 }
 Card.Title = CardTitle;
 Card.Subtitle = CardSubtitle;
@@ -5233,7 +5233,7 @@ function useClickOutside(container, callback, disabled = false) {
 }
 const dropdownExpandedStyle = css`&[aria-expanded='true']{color:${getToken("dropdown-trigger-expanded-color")};}`;
 const triggerButtonAttrs = (props) => {
-  const outlined = typeof props.outlined === "boolean" ? props.outlined : true;
+  const outlined = typeof props.$outlined === "boolean" ? props.$outlined : true;
   if (outlined) {
     return props;
   }
@@ -5247,26 +5247,26 @@ const TriggerButton$1 = styled(SelectorButton).attrs(triggerButtonAttrs).withCon
   componentId: "ls-ui__sc-6t3pzz-0"
 })`flex:1;justify-content:flex-start;border:none;height:${getToken("dropdown-trigger-height")};text-transform:${conditional({
   capitalize: whenProps({
-    outlined: false,
+    $outlined: false,
     variant: "tertiary"
   }),
   uppercase: whenProps({
-    outlined: true
+    $outlined: true
   })
 })};font-weight:${conditional({
   "font-weight-regular": whenProps({
-    outlined: false
+    $outlined: false
   })
 })};${hoverableStyle`
       border-color: ${conditional({
   "color-transparent": whenProps({
-    outlined: false
+    $outlined: false
   })
 })};
 
       font-weight: ${conditional({
   "font-weight-bold": whenProps({
-    outlined: false
+    $outlined: false
   })
 })};
 
@@ -5274,19 +5274,19 @@ const TriggerButton$1 = styled(SelectorButton).attrs(triggerButtonAttrs).withCon
     `} ${focusableStyle`
       box-shadow: ${conditional({
   none: whenProps({
-    outlined: false
+    $outlined: false
   })
 })};
 
       background-color: ${conditional({
   "color-transparent": whenProps({
-    outlined: false
+    $outlined: false
   })
 })};
 
       font-weight: ${conditional({
   "font-weight-bold": whenProps({
-    outlined: false
+    $outlined: false
   })
 })};
 
@@ -5294,9 +5294,9 @@ const TriggerButton$1 = styled(SelectorButton).attrs(triggerButtonAttrs).withCon
       ${dropdownExpandedStyle}
     `} ${({
   children,
-  outlined
+  $outlined
 }) => {
-  if (!outlined && typeof children === "string") {
+  if (!$outlined && typeof children === "string") {
     return css`& > span:first-child{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;text-decoration:none;}& > span:first-child::after{height:0;overflow:hidden;font-weight:${getToken("font-weight-bold")};visibility:hidden;content:'${children}';content:'${children}' / '';user-select:none;pointer-events:none;@media speech{display:none;}}`;
   }
 }}`;
@@ -5416,6 +5416,7 @@ function DropdownTriggerButton(props) {
   const {
     children,
     onClick,
+    outlined = true,
     ...others
   } = props;
   const handleClick = (e) => {
@@ -5429,7 +5430,7 @@ function DropdownTriggerButton(props) {
     }
     return children;
   }
-  return /* @__PURE__ */ React__default.createElement(TriggerButton$1, { trailing: /* @__PURE__ */ React__default.createElement(Caret$1, { $rotate: expanded }), onClick: handleClick, ...others, type: "button", "aria-haspopup": "true", "aria-expanded": expanded, "aria-disabled": disabled, disabled }, renderChildren());
+  return /* @__PURE__ */ React__default.createElement(TriggerButton$1, { $outlined: outlined, trailing: /* @__PURE__ */ React__default.createElement(Caret$1, { $rotate: expanded }), onClick: handleClick, ...others, type: "button", "aria-haspopup": "true", "aria-expanded": expanded, "aria-disabled": disabled, disabled }, renderChildren());
 }
 function DropdownTriggerHandle(props) {
   const {
@@ -5554,6 +5555,10 @@ function GenericDropdown(props) {
     expandDisabled = false,
     onBlur,
     position,
+    align: _align,
+    // Filter out props that shouldn't be on the div
+    outlined: _outlined,
+    scale: _scale,
     ...others
   } = props;
   const contextValue = useMemo(() => ({
@@ -5574,7 +5579,11 @@ function GenericDropdown(props) {
   return /* @__PURE__ */ React__default.createElement(DropdownWrapper, { ...others, role: "menubar", ref }, /* @__PURE__ */ React__default.createElement(DropdownContext.Provider, { value: contextValue }, /* @__PURE__ */ React__default.createElement(HiddenCloseButton, { disabled, onClick: toggle }, "Close"), /* @__PURE__ */ React__default.createElement(Popover, { strategy: "fixed", position, align }, children)));
 }
 function Dropdown(props) {
-  const dropdownProps = useDropdown(props);
+  const {
+    expand: _expand,
+    collapse: _collapse,
+    ...dropdownProps
+  } = useDropdown(props);
   return /* @__PURE__ */ React__default.createElement(GenericDropdown, { ...props, ...dropdownProps });
 }
 Dropdown.Trigger = DropdownTrigger;
@@ -6470,7 +6479,9 @@ function MenuBaseItem({
 const StyledMenuItem = styled(({
   url,
   ...props
-}) => /* @__PURE__ */ React__default.createElement(MenuBaseItem, { as: url ? "a" : "button", ...props })).withConfig({
+}) => /* @__PURE__ */ React__default.createElement(MenuBaseItem, { ...url ? {
+  as: "a"
+} : {}, ...props })).withConfig({
   displayName: "StyledMenuItem",
   componentId: "ls-ui__sc-1hll5gm-0"
 })`${hoverableStyle`
@@ -6545,18 +6556,12 @@ function MenuExpandable({
       return React__default.cloneElement(child, {
         key: label,
         tabIndex: expanded ? 0 : -1,
-        ariaHidden: !expanded
+        "aria-hidden": !expanded
       });
     }
     return child;
   })))));
 }
-function styledCompounds(Parent, compounds) {
-  for (const key of Object.keys(compounds)) {
-    Parent[key] = compounds[key];
-  }
-  return Parent;
-}
 const MenuTitle = styled.div.withConfig({
   displayName: "MenuTitle",
   componentId: "ls-ui__sc-j93g9w-0"
@@ -6579,7 +6584,7 @@ const StyledMenu = /* @__PURE__ */ styled(Menu$1).withConfig({
   displayName: "StyledMenu",
   componentId: "ls-ui__sc-j93g9w-1"
 })({});
-const Menu$2 = styledCompounds(StyledMenu, {
+const Menu$2 = Object.assign(StyledMenu, {
   Item: MenuItem$1,
   SubItem: MenuLink$2
 });
@@ -6651,10 +6656,10 @@ const StyledAside = styled.aside.withConfig({
   componentId: "ls-ui__sc-bplcbg-0"
 })`position:fixed;top:0;left:0;z-index:${getToken("z-index-overlay")};display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:${getToken("modal-overlay-background")};visibility:${conditional({
   visible: whenProps({
-    open: true
+    $open: true
   }),
   hidden: whenProps({
-    open: false
+    $open: false
   })
 })};`;
 const CloseButton = styled(CloseButton$3).withConfig({
@@ -6666,10 +6671,10 @@ const StyledSection = styled.section.withConfig({
   componentId: "ls-ui__sc-bplcbg-2"
 })`position:fixed;top:0;right:0;display:flex;flex-direction:column;justify-content:space-between;width:40vw;height:100%;background-color:${getToken("color-neutral-lightest")};border-radius:${getToken("border-radius-s")};box-shadow:${getToken("shadow-modal")};transform:${conditional({
   "translateX(100%)": whenProps({
-    open: false
+    $open: false
   }),
   "translateX(0px)": whenProps({
-    open: true
+    $open: true
   })
 })};${transitionStyle({
   property: "transform",
@@ -6743,7 +6748,7 @@ function Drawer({
       };
     }
   }, [onClickOutside]);
-  return ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement(StyledAside, { open: !invisible, ref }, /* @__PURE__ */ React__default.createElement(StyledSection, { ...others, className, open, onTransitionEnd: handleTransitionEnd, role: "dialog", "aria-modal": "true", "aria-label": "drawer" }, Boolean(onClose) && /* @__PURE__ */ React__default.createElement(CloseButton, { onClick: onClose, "aria-label": "close" }), children)), document.body);
+  return ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement(StyledAside, { $open: !invisible, ref }, /* @__PURE__ */ React__default.createElement(StyledSection, { ...others, className, $open: open, onTransitionEnd: handleTransitionEnd, role: "dialog", "aria-modal": "true", "aria-label": "drawer" }, Boolean(onClose) && /* @__PURE__ */ React__default.createElement(CloseButton, { onClick: onClose, "aria-label": "close" }), children)), document.body);
 }
 Drawer.Header = DrawerHeader;
 Drawer.Body = DrawerBody;
@@ -6942,10 +6947,10 @@ const StyledTableHeadCell = styled.th.withConfig({
   componentId: "ls-ui__sc-1b5focj-4"
 })`${StyledCell} font-family:${getToken("font-family-default")};font-weight:${getToken("font-weight-bold")};text-transform:capitalize;cursor:${conditional({
   pointer: whenProps({
-    clickable: true
+    $clickable: true
   }),
   normal: whenProps({
-    clickable: false
+    $clickable: false
   })
 })};`;
 const StyledTableHead = styled.thead.withConfig({
@@ -6957,30 +6962,30 @@ const StyledTableRow = styled.tr.withConfig({
   componentId: "ls-ui__sc-1b5focj-6"
 })`${StyledTableHead} > &{background-color:${getToken("color-neutral-lightest")};}${StyledTableFoot} > &{background-color:${getToken("color-neutral-lightest")};}background-color:${conditional({
   "table-row-selected-color": whenProps({
-    selected: true
+    $selected: true
   }),
   "color-neutral-white": whenProps({
-    selected: false
+    $selected: false
   })
 })};${hoverableStyle`
     background-color: ${conditional({
   "table-row-selected-color": whenProps({
-    selected: true
+    $selected: true
   })
 })} !important;
   `} border-color:${getToken("color-neutral-lighter")};border-width:1px;border-top-style:solid;border-right-style:solid;border-left-style:solid;border-bottom-style:${conditional({
   solid: whenProps({
-    isExpanded: false
+    $isExpanded: false
   }),
   hidden: whenProps({
-    isExpanded: true
+    $isExpanded: true
   })
 })};box-shadow:${conditional({
   "0px 3px 3px 0px #C1CED9": whenProps({
-    isExpanded: true
+    $isExpanded: true
   }),
   none: whenProps({
-    isExpanded: false
+    $isExpanded: false
   })
 })};${StyledTableBody} > &{${hoverableStyle`
       background-color: ${getToken("color-neutral-lighter")};
@@ -7122,7 +7127,7 @@ function TableRow({
   ...others
 }) {
   const selected = useIsRowSelected(children);
-  return /* @__PURE__ */ React__default.createElement(StyledTableRow, { ...others, selected, isExpanded: false }, children);
+  return /* @__PURE__ */ React__default.createElement(StyledTableRow, { ...others, $selected: selected, $isExpanded: false }, children);
 }
 function ExpandableTableRow({
   expandableContent,
@@ -7149,7 +7154,7 @@ function ExpandableTableRow({
     onExpandedChange?.(!open);
     setOpenState(!open);
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(StyledTableRow, { ...others, onClick: toggle, isExpanded, selected }, /* @__PURE__ */ React__default.createElement(TableCell, null, expandableContent && leading), children), isExpanded && /* @__PURE__ */ React__default.createElement(StyledExpandableContentRow, null, /* @__PURE__ */ React__default.createElement(StyledTableCell, { colSpan }, expandableContent)));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(StyledTableRow, { ...others, onClick: toggle, $isExpanded: isExpanded, $selected: selected }, /* @__PURE__ */ React__default.createElement(TableCell, null, expandableContent && leading), children), isExpanded && /* @__PURE__ */ React__default.createElement(StyledExpandableContentRow, null, /* @__PURE__ */ React__default.createElement(StyledTableCell, { colSpan }, expandableContent)));
 }
 function TableHeadCell({
   alignment = "left",
@@ -7157,7 +7162,7 @@ function TableHeadCell({
   onClick,
   ...others
 }) {
-  return /* @__PURE__ */ React__default.createElement(StyledTableHeadCell, { clickable: onClick != null, alignment, onClick, ...others }, /* @__PURE__ */ React__default.createElement(Layout.Group, { space: "xs", align: "center" }, children));
+  return /* @__PURE__ */ React__default.createElement(StyledTableHeadCell, { $clickable: onClick != null, alignment, onClick, ...others }, /* @__PURE__ */ React__default.createElement(Layout.Group, { space: "xs", align: "center" }, children));
 }
 const ActionsWrapper = styled.div.withConfig({
   displayName: "ActionsWrapper",
@@ -7318,6 +7323,8 @@ function MenuItemDropdown(props) {
   return /* @__PURE__ */ React__default.createElement(MenuDropdown, { align: "end", key: label }, /* @__PURE__ */ React__default.createElement(Popover.Reference, null, /* @__PURE__ */ React__default.createElement(MenuDropdownLabel, null, /* @__PURE__ */ React__default.createElement(Ellipsizable, { $max: 120, id: labelId }, label), /* @__PURE__ */ React__default.createElement(MenuDropdownTrigger, { ...rest, tabIndex: 0, "aria-labelledby": labelId }))), /* @__PURE__ */ React__default.createElement(DropdownMenu$2, null, children));
 }
 const MenuLink = styled(BaseLink).withConfig({
+  shouldForwardProp: (prop2) => prop2 !== "hasIcon"
+}).withConfig({
   displayName: "MenuLink",
   componentId: "ls-ui__sc-1vff5xv-0"
 })`${typography("body-bold")} color:${conditional({
@@ -8863,24 +8870,24 @@ const DropZoneWrapper = styled((props) => /* @__PURE__ */ React__default.createE
   property: "border-color, box-shadow, opacity"
 })} cursor:pointer;background-color:${getToken("color-neutral-white")};border-radius:${getToken("border-radius-s")};border:2px dashed;border-color:${conditional({
   "color-neutral-light": whenProps({
-    error: false
+    $error: false
   }),
   "color-danger": whenProps({
     disabled: false,
-    error: true
+    $error: true
   })
 })};padding:${getToken("space-l")} ${getToken("space-3xl")};text-align:center;${hoverableStyle`
     border-color: ${conditional({
   "color-accent": whenProps({
     disabled: false,
-    error: false
+    $error: false
   })
 })};
   `} ${focusableStyle`
     border-color: ${conditional({
   "color-accent": whenProps({
     disabled: false,
-    error: false
+    $error: false
   })
 })};
     box-shadow: ${getToken("shadow-glow-primary")};
@@ -8964,7 +8971,7 @@ const DropZone = ({
   return /* @__PURE__ */ React__default.createElement(DropZoneWrapper, { space: "m", align: "center", justify: "center", className: clsx(className, {
     "is-disabled": disabled,
     "is-focused": isDragging
-  }), disabled, error, tabIndex: 0, role: "button", "aria-pressed": "false", onKeyPress, onDrop, onDragStart, onDragOver, onDragLeave }, (renderCustomContent || renderDefaultContent)({
+  }), disabled, $error: error, tabIndex: 0, role: "button", "aria-pressed": "false", onKeyPress, onDrop, onDragStart, onDragOver, onDragLeave }, (renderCustomContent || renderDefaultContent)({
     isDragging
   }), /* @__PURE__ */ React__default.createElement(HiddenInput, { onInput: onChangeInput, type: "file", ref: inputRef, accept: accept ? toArray(accept).join(",") : void 0, disabled, multiple, ...props }));
 };