@hyphen/hyphen-components 8.0.1 → 9.0.0-beta.1

package/dist/hyphen-components.esm.js

@@ -186,18 +186,6 @@ function getDimensionCss(dimension, value) {
   };
 }
 
-// src/lib/getElementType.ts
-function getElementType(Component, props, getDefault) {
-  const { defaultProps = {} } = Component;
-  if (props.as && props.as !== defaultProps.as) return props.as;
-  if (getDefault) {
-    const computedDefault = getDefault();
-    if (computedDefault) return computedDefault;
-  }
-  if (props.href) return "a";
-  return defaultProps.as || "div";
-}
-
 // src/components/Box/Box.module.scss
 var Box_module_default = { "box-transition": "box-transition__sKpxg" };
 
@@ -208,9 +196,9 @@ var AUTO_FONT_COLOR_BACKGROUNDS = [
   "danger",
   "info"
 ];
-var Box = forwardRef(
-  ({
-    as = "div",
+var BoxBaseComponent = (props, ref) => {
+  const {
+    as,
     alignItems = void 0,
     alignContent = void 0,
     alignSelf = void 0,
@@ -255,256 +243,259 @@ var Box = forwardRef(
     wordBreak = void 0,
     zIndex = void 0,
     ...restProps
-  }, ref) => {
-    const heightCss = getDimensionCss("h", height);
-    const widthCss = getDimensionCss("w", width);
-    const maxHeightCss = getDimensionCss("mh", maxHeight);
-    const maxWidthCss = getDimensionCss("mw", maxWidth);
-    const minHeightCss = getDimensionCss("minh", minHeight);
-    const minWidthCss = getDimensionCss("minw", minWidth);
-    const finalColor = color ?? (background === "inverse" ? "inverse" : AUTO_FONT_COLOR_BACKGROUNDS.includes(background) ? "grey" : void 0);
-    const isFlexBox = typeof display === "string" && display.includes("flex");
-    const flexDirectionClasses = isFlexBox ? generateResponsiveClasses("flex-direction", direction) : null;
-    const cssPropertyMap = {
-      color: {
-        classPrefix: "font-color",
-        transformer: generateResponsiveClasses
-      },
-      background: {
-        classPrefix: "background-color",
-        transformer: generateResponsiveClasses
-      },
-      borderColor: {
-        classPrefix: "border-color",
-        transformer: generateResponsiveClasses
-      },
-      borderWidth: {
-        classPrefix: "border-width",
-        transformer: cssShorthandToClasses
-      },
-      shadow: { classPrefix: "shadow", transformer: generateResponsiveClasses },
-      fontSize: {
-        classPrefix: "font-size",
-        transformer: generateResponsiveClasses
-      }
-    };
-    const getStatefulClasses = (stateKey, values) => values ? Object.entries(values).map(
-      ([key, value]) => cssPropertyMap[key].transformer(
-        `${stateKey}:${cssPropertyMap[key].classPrefix}`,
-        value
-      )
-      // eslint-disable-line max-len
-    ) : void 0;
-    const hoverClasses = getStatefulClasses("hover", hover);
-    const focusClasses = getStatefulClasses("focus", focus);
-    const boxClasses = classNames(
-      className,
-      cssShorthandToClasses("m", margin),
-      cssShorthandToClasses("p", padding),
-      cssShorthandToClasses("br", radius),
-      cssShorthandToClasses("g", gap),
-      cssShorthandToClasses("cg", columnGap),
-      cssShorthandToClasses("rg", rowGap),
-      heightCss.classes,
-      maxHeightCss.classes,
-      minHeightCss.classes,
-      maxWidthCss.classes,
-      minWidthCss.classes,
-      widthCss.classes,
-      flexDirectionClasses,
-      generateResponsiveClasses("display", display),
-      generateResponsiveClasses("justify-content", justifyContent),
-      generateResponsiveClasses("align-items", alignItems),
-      generateResponsiveClasses("align-content", alignContent),
-      generateResponsiveClasses("align-self", alignSelf),
-      generateResponsiveClasses("font-family", fontFamily),
-      generateResponsiveClasses("font-size", fontSize),
-      generateResponsiveClasses("overflow", overflow),
-      generateResponsiveClasses("shadow", shadow),
-      generateResponsiveClasses("flex", flex),
-      cssShorthandToClasses("bw", borderWidth),
-      generateResponsiveClasses("font-weight", fontWeight),
-      generateResponsiveClasses("text-align", textAlign),
-      generateResponsiveClasses("transform", textTransform),
-      generateResponsiveClasses("text-wrap", textWrap),
-      generateResponsiveClasses("position", position),
-      generateResponsiveClasses("z-index", zIndex),
-      generateResponsiveClasses("whitespace", whiteSpace),
-      generateResponsiveClasses("break", wordBreak),
-      ...hoverClasses ?? [],
-      ...focusClasses ?? [],
-      {
-        "flex-wrap": isFlexBox && wrap,
-        "flex-nowrap": isFlexBox && wrap === false,
-        [`background-color-${background}`]: background,
-        [`font-color-${finalColor}`]: finalColor,
-        [`border-color-${borderColor}`]: borderColor,
-        [`cursor-${cursor}`]: cursor,
-        [Box_module_default["box-transition"]]: hover || focus
-      }
-    );
-    const boxStyles = {
-      ...style,
-      ...heightCss.styles,
-      ...maxHeightCss.styles,
-      ...maxWidthCss.styles,
-      ...widthCss.styles,
-      ...minHeightCss.styles,
-      ...minWidthCss.styles
-    };
-    const generateChildGapDirection = () => {
-      let childGapDirection = {};
-      const getChildGapMarginDirection = (d) => {
-        let marginDirection = "";
-        if (d?.includes("row")) marginDirection = "right";
-        else if (d?.includes("column")) marginDirection = "bottom";
-        return marginDirection;
-      };
-      if (typeof direction === "string") {
-        childGapDirection = {
-          base: getChildGapMarginDirection(direction)
-        };
-      } else if (typeof direction === "object" && direction !== null) {
-        childGapDirection = Object.keys(direction).reduce(
-          (acc, curr) => ({
-            ...acc,
-            [curr]: getChildGapMarginDirection(
-              direction[curr]
-            )
-          }),
-          {}
-        );
-      }
-      return childGapDirection;
-    };
-    const generateChildGap = () => {
-      let childGapObj = {};
-      if (typeof childGap === "string") {
-        childGapObj = { base: childGap };
-      } else if (typeof childGap === "object" && childGap !== null) {
-        childGapObj = { ...childGap };
-      }
-      return childGapObj;
+  } = props;
+  const heightCss = getDimensionCss("h", height);
+  const widthCss = getDimensionCss("w", width);
+  const maxHeightCss = getDimensionCss("mh", maxHeight);
+  const maxWidthCss = getDimensionCss("mw", maxWidth);
+  const minHeightCss = getDimensionCss("minh", minHeight);
+  const minWidthCss = getDimensionCss("minw", minWidth);
+  const finalColor = color ?? (background === "inverse" ? "inverse" : background && AUTO_FONT_COLOR_BACKGROUNDS.includes(background) ? "grey" : void 0);
+  const isFlexBox = typeof display === "string" && display.includes("flex");
+  const flexDirectionClasses = isFlexBox ? generateResponsiveClasses("flex-direction", direction) : null;
+  const cssPropertyMap = {
+    color: {
+      classPrefix: "font-color",
+      transformer: generateResponsiveClasses
+    },
+    background: {
+      classPrefix: "background-color",
+      transformer: generateResponsiveClasses
+    },
+    borderColor: {
+      classPrefix: "border-color",
+      transformer: generateResponsiveClasses
+    },
+    borderWidth: {
+      classPrefix: "border-width",
+      transformer: cssShorthandToClasses
+    },
+    shadow: { classPrefix: "shadow", transformer: generateResponsiveClasses },
+    fontSize: {
+      classPrefix: "font-size",
+      transformer: generateResponsiveClasses
+    }
+  };
+  const getStatefulClasses = (stateKey, values) => values ? Object.entries(values).map(
+    ([key, value]) => cssPropertyMap[key].transformer(
+      `${stateKey}:${cssPropertyMap[key].classPrefix}`,
+      value
+    )
+    // eslint-disable-line max-len
+  ) : void 0;
+  const hoverClasses = getStatefulClasses("hover", hover);
+  const focusClasses = getStatefulClasses("focus", focus);
+  const boxClasses = classNames(
+    className,
+    cssShorthandToClasses("m", margin),
+    cssShorthandToClasses("p", padding),
+    cssShorthandToClasses("br", radius),
+    cssShorthandToClasses("g", gap),
+    cssShorthandToClasses("cg", columnGap),
+    cssShorthandToClasses("rg", rowGap),
+    heightCss.classes,
+    maxHeightCss.classes,
+    minHeightCss.classes,
+    maxWidthCss.classes,
+    minWidthCss.classes,
+    widthCss.classes,
+    flexDirectionClasses,
+    generateResponsiveClasses("display", display),
+    generateResponsiveClasses("justify-content", justifyContent),
+    generateResponsiveClasses("align-items", alignItems),
+    generateResponsiveClasses("align-content", alignContent),
+    generateResponsiveClasses("align-self", alignSelf),
+    generateResponsiveClasses("font-family", fontFamily),
+    generateResponsiveClasses("font-size", fontSize),
+    generateResponsiveClasses("overflow", overflow),
+    generateResponsiveClasses("shadow", shadow),
+    generateResponsiveClasses("flex", flex),
+    cssShorthandToClasses("bw", borderWidth),
+    generateResponsiveClasses("font-weight", fontWeight),
+    generateResponsiveClasses("text-align", textAlign),
+    generateResponsiveClasses("transform", textTransform),
+    generateResponsiveClasses("text-wrap", textWrap),
+    generateResponsiveClasses("position", position),
+    generateResponsiveClasses("z-index", zIndex),
+    generateResponsiveClasses("whitespace", whiteSpace),
+    generateResponsiveClasses("break", wordBreak),
+    ...hoverClasses ?? [],
+    ...focusClasses ?? [],
+    {
+      "flex-wrap": isFlexBox && wrap,
+      "flex-nowrap": isFlexBox && wrap === false,
+      [`background-color-${background}`]: background,
+      [`font-color-${finalColor}`]: finalColor,
+      [`border-color-${borderColor}`]: borderColor,
+      [`cursor-${cursor}`]: cursor,
+      [Box_module_default["box-transition"]]: hover || focus
+    }
+  );
+  const boxStyles = {
+    ...style,
+    ...heightCss.styles,
+    ...maxHeightCss.styles,
+    ...maxWidthCss.styles,
+    ...widthCss.styles,
+    ...minHeightCss.styles,
+    ...minWidthCss.styles
+  };
+  const generateChildGapDirection = () => {
+    let childGapDirection = {};
+    const getChildGapMarginDirection = (d) => {
+      let marginDirection = "";
+      if (d?.includes("row")) marginDirection = "right";
+      else if (d?.includes("column")) marginDirection = "bottom";
+      return marginDirection;
     };
-    const childGapClasses = [];
-    if (childGap && direction) {
-      const childGapDirection = generateChildGapDirection();
-      const childGapValues = generateChildGap();
-      const breakpoints = [
-        "hd",
-        "desktop",
-        "tablet",
-        "base"
-      ];
-      const findMatchingBreakpoint = (responsiveObj, key) => {
-        const index = breakpoints.findIndex((breakpoint) => breakpoint === key);
-        let value = "";
-        value = responsiveObj[key];
-        if (!value)
-          return findMatchingBreakpoint(responsiveObj, breakpoints[index + 1]);
-        return value;
+    if (typeof direction === "string") {
+      childGapDirection = {
+        base: getChildGapMarginDirection(direction)
       };
-      breakpoints.forEach((breakpoint) => {
-        const foundDirection = findMatchingBreakpoint(
-          childGapDirection,
-          breakpoint
-        );
-        const foundChildGap = findMatchingBreakpoint(
-          childGapValues,
-          breakpoint
-        );
-        const classSuffix = breakpoint === "base" ? "" : `-${breakpoint}`;
-        const oppositeDirection = foundDirection === "bottom" ? "right" : "bottom";
-        childGapClasses.push(
-          `m-${foundDirection}-${foundChildGap}${classSuffix}`
-        );
-        childGapClasses.push(`m-${oppositeDirection}-0${classSuffix}`);
-      });
+    } else if (typeof direction === "object" && direction !== null) {
+      childGapDirection = Object.keys(direction).reduce(
+        (acc, curr) => ({
+          ...acc,
+          [curr]: getChildGapMarginDirection(
+            direction[curr]
+          )
+        }),
+        {}
+      );
     }
-    const decorateChildren = (child, i, array) => {
-      if (i === array.length - 1 || !child || typeof child === "string" || typeof child === "number") {
-        return child;
-      }
-      const childClasses = classNames(child.props?.className, [
-        ...Array.from(new Set(childGapClasses))
-      ]);
-      return cloneElement(child, {
-        className: childClasses,
-        key: child.key ?? i
-      });
+    return childGapDirection;
+  };
+  const generateChildGap = () => {
+    let childGapObj = {};
+    if (typeof childGap === "string") {
+      childGapObj = { base: childGap };
+    } else if (typeof childGap === "object" && childGap !== null) {
+      childGapObj = { ...childGap };
+    }
+    return childGapObj;
+  };
+  const childGapClasses = [];
+  if (childGap && direction) {
+    const childGapDirection = generateChildGapDirection();
+    const childGapValues = generateChildGap();
+    const breakpoints = [
+      "hd",
+      "desktop",
+      "tablet",
+      "base"
+    ];
+    const findMatchingBreakpoint = (responsiveObj, key) => {
+      const index = breakpoints.findIndex((breakpoint) => breakpoint === key);
+      let value = "";
+      value = responsiveObj[key];
+      if (!value)
+        return findMatchingBreakpoint(responsiveObj, breakpoints[index + 1]);
+      return value;
     };
-    let decoratedChildren = Children.toArray(children).filter(
-      (child) => child !== null
-    );
-    if (childGapClasses && decoratedChildren.length > 1) {
-      decoratedChildren = decoratedChildren.map(
-        (value, index, array) => decorateChildren(
-          value,
-          // eslint-disable-line @typescript-eslint/no-explicit-any
-          index,
-          array
-          // eslint-disable-line @typescript-eslint/no-explicit-any
-        )
+    breakpoints.forEach((breakpoint) => {
+      const foundDirection = findMatchingBreakpoint(
+        childGapDirection,
+        breakpoint
+      );
+      const foundChildGap = findMatchingBreakpoint(
+        childGapValues,
+        breakpoint
+      );
+      const classSuffix = breakpoint === "base" ? "" : `-${breakpoint}`;
+      const oppositeDirection = foundDirection === "bottom" ? "right" : "bottom";
+      childGapClasses.push(
+        `m-${foundDirection}-${foundChildGap}${classSuffix}`
       );
+      childGapClasses.push(`m-${oppositeDirection}-0${classSuffix}`);
+    });
+  }
+  const decorateChildren = (child, i, array) => {
+    if (i === array.length - 1 || !child || typeof child === "string" || typeof child === "number") {
+      return child;
     }
-    const element = getElementType(Box, { as });
-    return createElement(
-      element,
-      {
-        className: boxClasses,
-        style: boxStyles,
-        ref,
-        ...restProps
-      },
-      children !== null && children !== void 0 ? decoratedChildren : null
+    const childClasses = classNames(child.props?.className, [
+      ...Array.from(new Set(childGapClasses))
+    ]);
+    return cloneElement(child, {
+      className: childClasses,
+      key: child.key ?? i
+    });
+  };
+  let decoratedChildren = Children.toArray(children).filter(
+    (child) => child !== null
+  );
+  if (childGapClasses && decoratedChildren.length > 1) {
+    decoratedChildren = decoratedChildren.map(
+      (value, index, array) => decorateChildren(
+        value,
+        // eslint-disable-line @typescript-eslint/no-explicit-any
+        index,
+        array
+        // eslint-disable-line @typescript-eslint/no-explicit-any
+      )
     );
   }
-);
+  const element = as ?? "div";
+  return createElement(
+    element,
+    {
+      className: boxClasses,
+      style: boxStyles,
+      ref,
+      ...restProps
+    },
+    children !== null && children !== void 0 ? decoratedChildren : null
+  );
+};
+var Box = forwardRef(BoxBaseComponent);
 Box.displayName = "Box";
-var boxPropsKeys = [
-  "as",
-  "alignItems",
-  "alignContent",
-  "alignSelf",
-  "background",
-  "borderColor",
-  "borderWidth",
-  "className",
-  "childGap",
-  "children",
-  "color",
-  "columnGap",
-  "cursor",
-  "direction",
-  "display",
-  "flex",
-  "focus",
-  "fontFamily",
-  "fontSize",
-  "fontWeight",
-  "gap",
-  "height",
-  "hover",
-  "justifyContent",
-  "margin",
-  "maxHeight",
-  "minHeight",
-  "maxWidth",
-  "minWidth",
-  "overflow",
-  "padding",
-  "position",
-  "radius",
-  "rowGap",
-  "shadow",
-  "style",
-  "textAlign",
-  "textTransform",
-  "textWrap",
-  "wrap",
-  "width",
-  "zIndex"
-];
+var boxPropsKeyMap = {
+  as: true,
+  alignItems: true,
+  alignContent: true,
+  alignSelf: true,
+  background: true,
+  borderColor: true,
+  borderWidth: true,
+  className: true,
+  childGap: true,
+  children: true,
+  color: true,
+  columnGap: true,
+  cursor: true,
+  direction: true,
+  display: true,
+  flex: true,
+  focus: true,
+  fontFamily: true,
+  fontSize: true,
+  fontWeight: true,
+  gap: true,
+  height: true,
+  hover: true,
+  justifyContent: true,
+  margin: true,
+  maxHeight: true,
+  minHeight: true,
+  maxWidth: true,
+  minWidth: true,
+  overflow: true,
+  padding: true,
+  position: true,
+  radius: true,
+  rowGap: true,
+  shadow: true,
+  style: true,
+  textAlign: true,
+  textTransform: true,
+  textWrap: true,
+  whiteSpace: true,
+  wrap: true,
+  width: true,
+  wordBreak: true,
+  zIndex: true
+};
+var boxPropsKeys = Object.keys(boxPropsKeyMap);
 
 // src/components/Icon/Icon.tsx
 import React, { forwardRef as forwardRef2 } from "react";
@@ -647,7 +638,10 @@ import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 var AspectRatio = AspectRatioPrimitive.Root;
 
 // src/components/Badge/Badge.tsx
-import React3, { Children as Children2, forwardRef as forwardRef3 } from "react";
+import React3, {
+  Children as Children2,
+  forwardRef as forwardRef3
+} from "react";
 import classNames4 from "classnames";
 
 // src/components/Badge/Badge.module.scss
@@ -664,8 +658,8 @@ var renderBadgeChildren = (children) => Children2.map(
   children,
   (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ React3.createElement("span", { className: Badge_module_default.label }, child) : child
 );
-var Badge = forwardRef3(
-  ({
+var BadgeBaseComponent = (props, ref) => {
+  const {
     className = "",
     color = "grey",
     radius = "full",
@@ -673,33 +667,34 @@ var Badge = forwardRef3(
     size = "md",
     children,
     ...restProps
-  }, ref) => {
-    const responsiveClasses = generateResponsiveClasses("size", size).map(
-      (c) => Badge_module_default[c]
-    );
-    const hue = BADGE_COLOR_ALIASES[color] ?? color;
-    const badgeClasses = classNames4(
-      Badge_module_default.badge,
-      className,
-      responsiveClasses,
-      Badge_module_default[variant],
-      Badge_module_default[`color-${hue}`],
-      Badge_module_default[`radius-${radius}`]
-    );
-    return /* @__PURE__ */ React3.createElement(
-      Box,
-      {
-        ref,
-        className: badgeClasses,
-        display: "inline-flex",
-        alignItems: "center",
-        direction: "row",
-        ...restProps
-      },
-      renderBadgeChildren(children)
-    );
+  } = props;
+  const responsiveClasses = generateResponsiveClasses("size", size).map(
+    (c) => Badge_module_default[c]
+  );
+  const hue = BADGE_COLOR_ALIASES[color] ?? color;
+  const badgeClasses = classNames4(
+    Badge_module_default.badge,
+    className,
+    responsiveClasses,
+    Badge_module_default[variant],
+    Badge_module_default[`color-${hue}`],
+    Badge_module_default[`radius-${radius}`]
+  );
+  const boxProps = {
+    className: badgeClasses,
+    display: "inline-flex",
+    alignItems: "center",
+    direction: "row",
+    ...restProps
+  };
+  const badgeChildren = renderBadgeChildren(children);
+  if (boxProps.as) {
+    const boxPropsWithAs = boxProps;
+    return /* @__PURE__ */ React3.createElement(Box, { ref, ...boxPropsWithAs }, badgeChildren);
   }
-);
+  return /* @__PURE__ */ React3.createElement(Box, { ref, ...boxProps }, badgeChildren);
+};
+var Badge = forwardRef3(BadgeBaseComponent);
 Badge.displayName = "Badge";
 
 // src/components/Button/Button.tsx
@@ -1072,6 +1067,18 @@ var HEADING_DEFAULT_SIZE_MAP = {
 // src/components/Heading/Heading.tsx
 import classNames8 from "classnames";
 
+// src/lib/getElementType.ts
+function getElementType(Component, props, getDefault) {
+  const { defaultProps = {} } = Component;
+  if (props.as && props.as !== defaultProps.as) return props.as;
+  if (getDefault) {
+    const computedDefault = getDefault();
+    if (computedDefault) return computedDefault;
+  }
+  if (props.href) return "a";
+  return defaultProps.as || "div";
+}
+
 // src/components/Heading/Heading.module.scss
 var Heading_module_default = { "heading": "heading__Jti1g" };
 
@@ -1255,6 +1262,7 @@ var Checkbox = React12.forwardRef(
     isChecked,
     label,
     labelledby,
+    name = void 0,
     onChange,
     error = false,
     isDisabled = false,
@@ -1288,6 +1296,7 @@ var Checkbox = React12.forwardRef(
       "aria-labelledby": labelledby,
       "aria-required": isRequired,
       id,
+      name,
       checked: !!isChecked,
       disabled: isDisabled,
       onBlur: handleBlur,
@@ -1296,7 +1305,7 @@ var Checkbox = React12.forwardRef(
       required: isRequired,
       type: "checkbox",
       ref: inputRef,
-      ...value && { value }
+      ...value !== void 0 && { value }
     };
     const responsiveClasses = generateResponsiveClasses("size", size);
     const containerClasses = classNames10(
@@ -1474,10 +1483,12 @@ var CheckboxInput = ({
   isDisabled = false,
   isIndeterminate = false,
   isRequired = false,
+  name = void 0,
   onBlur = void 0,
   onFocus = void 0,
   requiredIndicator = " *",
   size = "md",
+  value = void 0,
   ...restProps
 }) => {
   const handleBlur = (event) => {
@@ -1494,11 +1505,13 @@ var CheckboxInput = ({
     isChecked: !!isChecked,
     isDisabled,
     isIndeterminate,
+    name,
     onBlur: handleBlur,
     onChange: handleChange,
     onFocus: handleFocus,
     isRequired,
     size,
+    value,
     label,
     className: classNames14(
       "hyphen-components__variables__form-control",
@@ -2060,6 +2073,7 @@ var FormikCheckboxInput = ({
     ...props,
     id,
     label,
+    name,
     error: getIn(touched, name) && getIn(errors, name),
     isChecked: value,
     onBlur,
@@ -2504,6 +2518,8 @@ function SelectInput(props) {
     placeholder = void 0,
     requiredIndicator = " *",
     size = "md",
+    cacheOptions,
+    defaultOptions,
     ...restProps
   } = props;
   const handleChange = (values) => {
@@ -2542,7 +2558,11 @@ function SelectInput(props) {
   };
   const ClearIndicator = (props2) => /* @__PURE__ */ React27.createElement(components.ClearIndicator, { ...props2 }, /* @__PURE__ */ React27.createElement(Icon, { name: "remove" }));
   const Component = isCreatable && isAsync ? AsyncCreatableSelect : isCreatable ? CreatableSelect : isAsync ? AsyncSelect : Select;
-  const selectOptions = isAsync ? { loadOptions: options } : { options };
+  const selectOptions = isAsync ? {
+    loadOptions: options,
+    cacheOptions,
+    defaultOptions
+  } : { options };
   return /* @__PURE__ */ React27.createElement(Box, { width: "100%", className: wrapperClasses }, label && !hideLabel && /* @__PURE__ */ React27.createElement(FormLabel, { ...labelProps }, label), /* @__PURE__ */ React27.createElement(
     Component,
     {
@@ -2580,11 +2600,8 @@ var FormikSelectInput = ({
   field: { name, onBlur, onChange: formikOnChange, value },
   form: { touched, errors },
   onChange,
-  id,
-  label,
-  options,
   error: errorProp,
-  ...props
+  ...selectProps
 }) => {
   let errorMessage;
   const error = errorProp ?? (getIn3(touched, name) && getIn3(errors, name));
@@ -2596,15 +2613,12 @@ var FormikSelectInput = ({
   return /* @__PURE__ */ React28.createElement(
     SelectInput,
     {
-      id,
-      label,
-      options,
+      ...selectProps,
       name,
       onBlur,
       onChange: onChange ?? formikOnChange,
       value,
-      error: errorMessage,
-      ...props
+      error: errorMessage
     }
   );
 };
@@ -2795,8 +2809,7 @@ var TextareaInputInset = forwardRef8(
     requiredIndicator = " *",
     resize = "vertical",
     rows = 5,
-    size = "md",
-    type = "text"
+    size = "md"
   }, ref) => {
     const responsiveClasses = generateResponsiveClasses("size", size);
     const inputWrapperClasses = classNames22(
@@ -2829,7 +2842,6 @@ var TextareaInputInset = forwardRef8(
       placeholder,
       required: isRequired,
       rows,
-      type,
       value
     };
     return /* @__PURE__ */ React31.createElement(Box, { width: "100", ref, className }, /* @__PURE__ */ React31.createElement(
@@ -3055,6 +3067,7 @@ var SelectInputNative = ({
   helpText,
   error,
   id,
+  inputProps = {},
   isDisabled,
   isRequired,
   name,
@@ -3066,6 +3079,15 @@ var SelectInputNative = ({
   size = "md",
   ...restProps
 }) => {
+  const isBoxProp = (key) => boxPropsKeys.includes(key);
+  const formControlProps = Object.fromEntries(
+    Object.entries(restProps).filter(([key]) => isBoxProp(key))
+  );
+  const selectProps = Object.fromEntries(
+    Object.entries(restProps).filter(([key]) => !isBoxProp(key))
+  );
+  const selectIsDisabled = isDisabled || selectProps.disabled;
+  const selectIsRequired = isRequired || selectProps.required;
   const placeholderOption = {
     value: "",
     label: placeholder,
@@ -3081,7 +3103,7 @@ var SelectInputNative = ({
     SelectInputNative_module_default["select-input-native-wrapper"],
     ...responsiveClasses.map((className) => SelectInputNative_module_default[className]),
     {
-      [SelectInputNative_module_default.disabled]: isDisabled,
+      [SelectInputNative_module_default.disabled]: selectIsDisabled,
       [SelectInputNative_module_default.error]: error
     }
   );
@@ -3093,26 +3115,28 @@ var SelectInputNative = ({
       id,
       error,
       helpText,
-      isDisabled,
-      isRequired,
+      isDisabled: selectIsDisabled,
+      isRequired: selectIsRequired,
       requiredIndicator,
-      ...restProps
+      ...formControlProps
     },
     /* @__PURE__ */ React35.createElement(Box, { className: selectWrapperClasses }, /* @__PURE__ */ React35.createElement(
       Box,
       {
         as: "select",
+        ...inputProps,
+        ...selectProps,
         "aria-label": label,
         "aria-labelledby": label && !hideLabel ? `${id}Label` : void 0,
-        "aria-required": isRequired,
+        "aria-required": selectIsRequired,
         value: value ?? "",
         onChange,
         color: !value ? "disabled" : "base",
         autoFocus,
-        disabled: isDisabled,
+        disabled: selectIsDisabled,
         name,
         id,
-        required: isRequired
+        required: selectIsRequired
       },
       optionsWithPlaceholder.map((option) => /* @__PURE__ */ React35.createElement(
         Box,
@@ -3576,7 +3600,7 @@ var Switch = ({
     alignItems: helpText ? "flex-start" : "center",
     isFieldRequired: isRequired,
     requiredIndicator,
-    size
+    ...typeof size === "string" && { size }
   };
   return /* @__PURE__ */ React43.createElement(Box, { className }, /* @__PURE__ */ React43.createElement(Box, { className: wrapperClasses }, /* @__PURE__ */ React43.createElement(FormLabel, { ...labelProps }, /* @__PURE__ */ React43.createElement("input", { ...inputProps }), /* @__PURE__ */ React43.createElement(
     "span",
@@ -3912,14 +3936,14 @@ var ModalBaseComponent = forwardRef12(
       /* @__PURE__ */ React51.createElement(RemoveScroll2, { allowPinchZoom, enabled: isOpen }, /* @__PURE__ */ React51.createElement(Box, { ref }, /* @__PURE__ */ React51.createElement(
         ReactModal2,
         {
+          ...restProps,
           isOpen,
           overlayClassName: overlayClassnames,
           className: contentClassnames,
           onRequestClose: onDismiss,
           ariaHideApp: false,
           parentSelector: parentElement ? () => parentElement : void 0,
-          style: { content: { ...maxWidthCss.styles, ...style } },
-          ...restProps
+          style: { content: { ...maxWidthCss.styles, ...style } }
         },
         /* @__PURE__ */ React51.createElement(
           Box,
@@ -5133,17 +5157,28 @@ var TableRow = ({
     { [TableRow_module_default.hoverable]: isHoverable },
     className
   );
+  const isRenderableCell = (value) => {
+    if (value === null || value === void 0) return true;
+    const valueType = typeof value;
+    if (valueType === "string" || valueType === "number" || valueType === "boolean") {
+      return true;
+    }
+    if (Array.isArray(value)) return value.every(isRenderableCell);
+    return React61.isValidElement(value);
+  };
   const renderCellContent = (column) => {
     if (column.render) {
-      const cellValue = column.dataKey && row ? row[column.dataKey] : void 0;
-      return column.render(cellValue, row, rowIndex);
+      const cellValue2 = column.dataKey && row ? row[column.dataKey] : void 0;
+      return column.render(cellValue2, row, rowIndex);
     }
-    return column.dataKey && row ? row[column.dataKey] : null;
+    const cellValue = column.dataKey && row ? row[column.dataKey] : null;
+    return isRenderableCell(cellValue) ? cellValue : null;
   };
   const getCellClassName = (column) => {
     if (column.cellClassName) {
       if (typeof column.cellClassName === "function") {
-        return column.cellClassName(column, row, rowIndex);
+        const cellValue = column.dataKey && row ? row[column.dataKey] : void 0;
+        return column.cellClassName(cellValue, row, rowIndex);
       }
       return column.cellClassName;
     }
@@ -5190,6 +5225,7 @@ var TableRow = ({
 var TableBody = ({
   columns,
   rows,
+  rowKey,
   align = "left",
   className = "",
   emptyCellPlaceholder = "",
@@ -5207,6 +5243,13 @@ var TableBody = ({
     },
     className
   );
+  const getRowKey = (row, rowIndex) => {
+    const keyValue = row?.[rowKey];
+    if (typeof keyValue === "string" || typeof keyValue === "number" || typeof keyValue === "bigint") {
+      return `row-key-${String(keyValue)}`;
+    }
+    return `row-index-${rowIndex}`;
+  };
   return /* @__PURE__ */ React62.createElement("tbody", { className: tableBodyClasses }, rows.map((row, rowIndex) => /* @__PURE__ */ React62.createElement(
     TableRow,
     {
@@ -5214,7 +5257,7 @@ var TableBody = ({
       row,
       rowIndex,
       align,
-      key: rowIndex,
+      key: getRowKey(row, rowIndex),
       emptyCellPlaceholder,
       truncateOverflow,
       isBorderless,