@simplybusiness/mobius 10.2.0 → 10.3.0

package/dist/cjs/components/Alert/Alert.js

@@ -101,15 +101,18 @@ var import_dedupe2 = __toESM(require("classnames/dedupe"));
 var import_Text = require("@simplybusiness/mobius/src/components/Text/Text.css");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var getElementType = (variant, elementType) => {
-  if (variant) {
-    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+  if (elementType) {
+    return elementType;
   }
-  return elementType || "p";
+  if (variant && ["h1", "h2", "h3", "h4"].includes(variant)) {
+    return variant;
+  }
+  return "p";
 };
-var Text = ({ ref, elementType: Component = "p", ...props }) => {
+var Text = ({ ref, elementType, ...props }) => {
   const { variant, className, spacing, ...otherProps } = props;
-  const elementType = getElementType(variant, Component);
-  const variantType = variant || elementType;
+  const Element = getElementType(variant, elementType);
+  const variantType = variant || Element;
   const classes = (0, import_dedupe2.default)(
     "mobius",
     "mobius-text",
@@ -117,7 +120,7 @@ var Text = ({ ref, elementType: Component = "p", ...props }) => {
     { [`--has-line-height-${spacing}`]: spacing },
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref, ...otherProps, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Element, { ref, ...otherProps, className: classes });
 };
 Text.displayName = "Text";
 

package/dist/cjs/components/Alert/Alert.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Alert/Alert.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx"],
-  "sourcesContent": ["import { circleInfo, circleTick, error, warning } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./Alert.css\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: React.ElementType;\n  variant?: string;\n  show?: boolean;\n  header?: string;\n}\n\ntype AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nfunction isAlertVariant(value: string): value is AlertVariant {\n  return (\n    value === \"info\" ||\n    value === \"success\" ||\n    value === \"warning\" ||\n    value === \"error\"\n  );\n}\n\nconst Alert = ({ ref, ...props }: AlertProps) => {\n  const {\n    elementType: Element = \"div\",\n    variant: variantProp,\n    show = true,\n    header,\n    children,\n    ...otherProps\n  } = props;\n\n  if (!show) return null;\n\n  const variant: AlertVariant =\n    variantProp && isAlertVariant(variantProp) ? variantProp : \"info\";\n\n  const colorValue =\n    variant === \"success\" ? `var(--color-valid)` : `var(--color-${variant})`;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-alert\",\n    {\n      \"--info\": variant === \"info\",\n      \"--success\": variant === \"success\",\n      \"--warning\": variant === \"warning\",\n      \"--error\": variant === \"error\",\n      \"--has-header\": header,\n    },\n    otherProps.className,\n  );\n  const icon = {\n    info: circleInfo,\n    success: circleTick,\n    warning,\n    error,\n  };\n\n  const headerClasses = classNames(\"mobius\", \"mobius-alert__header\");\n  const iconClasses = classNames(\"mobius\", \"mobius-alert__icon\");\n  const contentClasses = classNames(\"mobius\", \"mobius-alert__content\");\n\n  return (\n    <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n      <span className={iconClasses}>\n        <Icon icon={icon[variant]} color={colorValue} />\n      </span>\n      <div>\n        {header && (\n          <TextOrHTML\n            autoDetect\n            htmlElementType=\"span\"\n            className={headerClasses}\n            htmlClassName={headerClasses}\n            text={header}\n          />\n        )}\n        <div className={contentClasses}>{children}</div>\n      </div>\n    </Element>\n  );\n};\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n  ref,\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  title,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n  const formattedIconName = iconName.split(\"-\").join(\" \");\n\n  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n  const titleText = title || defaultTitle;\n\n  return (\n    <svg\n      ref={ref}\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <title>{titleText}</title>\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\n  );\n}\n", "import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nconst isHTML = (text: string) => /^\\s*<[a-z]/i.test(text);\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n  /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n  autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType,\n  textWrapper = false,\n  autoDetect = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const textIsHTML = autoDetect && isHTML(text);\n  const shouldWrapInText = autoDetect\n    ? textWrapper || !textIsHTML\n    : textWrapper;\n  const resolvedElementType = htmlElementType ?? (textIsHTML ? \"div\" : \"span\");\n  const DangerousComponent = resolvedElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (shouldWrapInText) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"body\"\n  | \"small\"\n  | \"legal\"\n  | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n  /** HTML element for the text */\n  elementType?: ElementType;\n  /** Specify font size override */\n  variant?: TextVariantType;\n  /** Specify compact line height override */\n  spacing?: \"loose\" | \"tight\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children: ReactNode;\n  style?: React.CSSProperties;\n}\n\nconst getElementType = (\n  variant: TextVariantType | undefined,\n  elementType: ElementType | undefined,\n) => {\n  if (variant) {\n    return [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant) ? variant : \"p\";\n  }\n  return elementType || \"p\";\n};\n\nconst Text = ({ ref, elementType: Component = \"p\", ...props }: TextProps) => {\n  // Remove non-DOM props from element\n  const { variant, className, spacing, ...otherProps } = props;\n\n  // If a variant is supplied, set the class name and element type\n  const elementType = getElementType(variant, Component);\n  const variantType = variant || elementType;\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n  );\n\n  return <Component ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { circleInfo, circleTick, error, warning } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./Alert.css\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: React.ElementType;\n  variant?: string;\n  show?: boolean;\n  header?: string;\n}\n\ntype AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nfunction isAlertVariant(value: string): value is AlertVariant {\n  return (\n    value === \"info\" ||\n    value === \"success\" ||\n    value === \"warning\" ||\n    value === \"error\"\n  );\n}\n\nconst Alert = ({ ref, ...props }: AlertProps) => {\n  const {\n    elementType: Element = \"div\",\n    variant: variantProp,\n    show = true,\n    header,\n    children,\n    ...otherProps\n  } = props;\n\n  if (!show) return null;\n\n  const variant: AlertVariant =\n    variantProp && isAlertVariant(variantProp) ? variantProp : \"info\";\n\n  const colorValue =\n    variant === \"success\" ? `var(--color-valid)` : `var(--color-${variant})`;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-alert\",\n    {\n      \"--info\": variant === \"info\",\n      \"--success\": variant === \"success\",\n      \"--warning\": variant === \"warning\",\n      \"--error\": variant === \"error\",\n      \"--has-header\": header,\n    },\n    otherProps.className,\n  );\n  const icon = {\n    info: circleInfo,\n    success: circleTick,\n    warning,\n    error,\n  };\n\n  const headerClasses = classNames(\"mobius\", \"mobius-alert__header\");\n  const iconClasses = classNames(\"mobius\", \"mobius-alert__icon\");\n  const contentClasses = classNames(\"mobius\", \"mobius-alert__content\");\n\n  return (\n    <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n      <span className={iconClasses}>\n        <Icon icon={icon[variant]} color={colorValue} />\n      </span>\n      <div>\n        {header && (\n          <TextOrHTML\n            autoDetect\n            htmlElementType=\"span\"\n            className={headerClasses}\n            htmlClassName={headerClasses}\n            text={header}\n          />\n        )}\n        <div className={contentClasses}>{children}</div>\n      </div>\n    </Element>\n  );\n};\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n  ref,\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  title,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n  const formattedIconName = iconName.split(\"-\").join(\" \");\n\n  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n  const titleText = title || defaultTitle;\n\n  return (\n    <svg\n      ref={ref}\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <title>{titleText}</title>\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\n  );\n}\n", "import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nconst isHTML = (text: string) => /^\\s*<[a-z]/i.test(text);\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n  /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n  autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType,\n  textWrapper = false,\n  autoDetect = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const textIsHTML = autoDetect && isHTML(text);\n  const shouldWrapInText = autoDetect\n    ? textWrapper || !textIsHTML\n    : textWrapper;\n  const resolvedElementType = htmlElementType ?? (textIsHTML ? \"div\" : \"span\");\n  const DangerousComponent = resolvedElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (shouldWrapInText) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"body\"\n  | \"small\"\n  | \"legal\"\n  | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n  /** HTML element for the text */\n  elementType?: ElementType;\n  /** Specify font size override */\n  variant?: TextVariantType;\n  /** Specify compact line height override */\n  spacing?: \"loose\" | \"tight\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children: ReactNode;\n  style?: React.CSSProperties;\n}\n\nconst getElementType = (\n  variant: TextVariantType | undefined,\n  elementType: ElementType | undefined,\n): ElementType => {\n  // Explicit elementType always wins\n  if (elementType) {\n    return elementType;\n  }\n  // Infer element from variant\n  if (variant && [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant)) {\n    return variant as ElementType;\n  }\n  return \"p\";\n};\n\nconst Text = ({ ref, elementType, ...props }: TextProps) => {\n  // Remove non-DOM props from element\n  const { variant, className, spacing, ...otherProps } = props;\n\n  // If a variant is supplied, set the class name and element type\n  const Element: ElementType = getElementType(variant, elementType);\n  const variantType = variant || Element;\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n  );\n\n  return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n"],
+  "mappings": "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",
   "names": ["import_dedupe", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "import_jsx_runtime", "classNames"]
 }

package/dist/cjs/components/Alert/index.js

@@ -103,15 +103,18 @@ var import_dedupe2 = __toESM(require("classnames/dedupe"));
 var import_Text = require("@simplybusiness/mobius/src/components/Text/Text.css");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var getElementType = (variant, elementType) => {
-  if (variant) {
-    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+  if (elementType) {
+    return elementType;
   }
-  return elementType || "p";
+  if (variant && ["h1", "h2", "h3", "h4"].includes(variant)) {
+    return variant;
+  }
+  return "p";
 };
-var Text = ({ ref, elementType: Component = "p", ...props }) => {
+var Text = ({ ref, elementType, ...props }) => {
   const { variant, className, spacing, ...otherProps } = props;
-  const elementType = getElementType(variant, Component);
-  const variantType = variant || elementType;
+  const Element = getElementType(variant, elementType);
+  const variantType = variant || Element;
   const classes = (0, import_dedupe2.default)(
     "mobius",
     "mobius-text",
@@ -119,7 +122,7 @@ var Text = ({ ref, elementType: Component = "p", ...props }) => {
     { [`--has-line-height-${spacing}`]: spacing },
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ref, ...otherProps, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Element, { ref, ...otherProps, className: classes });
 };
 Text.displayName = "Text";
 

package/dist/cjs/components/Alert/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Alert/index.tsx", "../../../../src/components/Alert/Alert.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx"],
-  "sourcesContent": ["export * from \"./Alert\";\n", "import { circleInfo, circleTick, error, warning } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./Alert.css\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: React.ElementType;\n  variant?: string;\n  show?: boolean;\n  header?: string;\n}\n\ntype AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nfunction isAlertVariant(value: string): value is AlertVariant {\n  return (\n    value === \"info\" ||\n    value === \"success\" ||\n    value === \"warning\" ||\n    value === \"error\"\n  );\n}\n\nconst Alert = ({ ref, ...props }: AlertProps) => {\n  const {\n    elementType: Element = \"div\",\n    variant: variantProp,\n    show = true,\n    header,\n    children,\n    ...otherProps\n  } = props;\n\n  if (!show) return null;\n\n  const variant: AlertVariant =\n    variantProp && isAlertVariant(variantProp) ? variantProp : \"info\";\n\n  const colorValue =\n    variant === \"success\" ? `var(--color-valid)` : `var(--color-${variant})`;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-alert\",\n    {\n      \"--info\": variant === \"info\",\n      \"--success\": variant === \"success\",\n      \"--warning\": variant === \"warning\",\n      \"--error\": variant === \"error\",\n      \"--has-header\": header,\n    },\n    otherProps.className,\n  );\n  const icon = {\n    info: circleInfo,\n    success: circleTick,\n    warning,\n    error,\n  };\n\n  const headerClasses = classNames(\"mobius\", \"mobius-alert__header\");\n  const iconClasses = classNames(\"mobius\", \"mobius-alert__icon\");\n  const contentClasses = classNames(\"mobius\", \"mobius-alert__content\");\n\n  return (\n    <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n      <span className={iconClasses}>\n        <Icon icon={icon[variant]} color={colorValue} />\n      </span>\n      <div>\n        {header && (\n          <TextOrHTML\n            autoDetect\n            htmlElementType=\"span\"\n            className={headerClasses}\n            htmlClassName={headerClasses}\n            text={header}\n          />\n        )}\n        <div className={contentClasses}>{children}</div>\n      </div>\n    </Element>\n  );\n};\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n  ref,\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  title,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n  const formattedIconName = iconName.split(\"-\").join(\" \");\n\n  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n  const titleText = title || defaultTitle;\n\n  return (\n    <svg\n      ref={ref}\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <title>{titleText}</title>\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\n  );\n}\n", "import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nconst isHTML = (text: string) => /^\\s*<[a-z]/i.test(text);\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n  /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n  autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType,\n  textWrapper = false,\n  autoDetect = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const textIsHTML = autoDetect && isHTML(text);\n  const shouldWrapInText = autoDetect\n    ? textWrapper || !textIsHTML\n    : textWrapper;\n  const resolvedElementType = htmlElementType ?? (textIsHTML ? \"div\" : \"span\");\n  const DangerousComponent = resolvedElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (shouldWrapInText) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"body\"\n  | \"small\"\n  | \"legal\"\n  | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n  /** HTML element for the text */\n  elementType?: ElementType;\n  /** Specify font size override */\n  variant?: TextVariantType;\n  /** Specify compact line height override */\n  spacing?: \"loose\" | \"tight\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children: ReactNode;\n  style?: React.CSSProperties;\n}\n\nconst getElementType = (\n  variant: TextVariantType | undefined,\n  elementType: ElementType | undefined,\n) => {\n  if (variant) {\n    return [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant) ? variant : \"p\";\n  }\n  return elementType || \"p\";\n};\n\nconst Text = ({ ref, elementType: Component = \"p\", ...props }: TextProps) => {\n  // Remove non-DOM props from element\n  const { variant, className, spacing, ...otherProps } = props;\n\n  // If a variant is supplied, set the class name and element type\n  const elementType = getElementType(variant, Component);\n  const variantType = variant || elementType;\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n  );\n\n  return <Component ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n"],
-  "mappings": "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",
+  "sourcesContent": ["export * from \"./Alert\";\n", "import { circleInfo, circleTick, error, warning } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./Alert.css\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: React.ElementType;\n  variant?: string;\n  show?: boolean;\n  header?: string;\n}\n\ntype AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nfunction isAlertVariant(value: string): value is AlertVariant {\n  return (\n    value === \"info\" ||\n    value === \"success\" ||\n    value === \"warning\" ||\n    value === \"error\"\n  );\n}\n\nconst Alert = ({ ref, ...props }: AlertProps) => {\n  const {\n    elementType: Element = \"div\",\n    variant: variantProp,\n    show = true,\n    header,\n    children,\n    ...otherProps\n  } = props;\n\n  if (!show) return null;\n\n  const variant: AlertVariant =\n    variantProp && isAlertVariant(variantProp) ? variantProp : \"info\";\n\n  const colorValue =\n    variant === \"success\" ? `var(--color-valid)` : `var(--color-${variant})`;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-alert\",\n    {\n      \"--info\": variant === \"info\",\n      \"--success\": variant === \"success\",\n      \"--warning\": variant === \"warning\",\n      \"--error\": variant === \"error\",\n      \"--has-header\": header,\n    },\n    otherProps.className,\n  );\n  const icon = {\n    info: circleInfo,\n    success: circleTick,\n    warning,\n    error,\n  };\n\n  const headerClasses = classNames(\"mobius\", \"mobius-alert__header\");\n  const iconClasses = classNames(\"mobius\", \"mobius-alert__icon\");\n  const contentClasses = classNames(\"mobius\", \"mobius-alert__content\");\n\n  return (\n    <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n      <span className={iconClasses}>\n        <Icon icon={icon[variant]} color={colorValue} />\n      </span>\n      <div>\n        {header && (\n          <TextOrHTML\n            autoDetect\n            htmlElementType=\"span\"\n            className={headerClasses}\n            htmlClassName={headerClasses}\n            text={header}\n          />\n        )}\n        <div className={contentClasses}>{children}</div>\n      </div>\n    </Element>\n  );\n};\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n  ref,\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  title,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n  const formattedIconName = iconName.split(\"-\").join(\" \");\n\n  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n  const titleText = title || defaultTitle;\n\n  return (\n    <svg\n      ref={ref}\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <title>{titleText}</title>\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\n  );\n}\n", "import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nconst isHTML = (text: string) => /^\\s*<[a-z]/i.test(text);\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n  /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n  autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType,\n  textWrapper = false,\n  autoDetect = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const textIsHTML = autoDetect && isHTML(text);\n  const shouldWrapInText = autoDetect\n    ? textWrapper || !textIsHTML\n    : textWrapper;\n  const resolvedElementType = htmlElementType ?? (textIsHTML ? \"div\" : \"span\");\n  const DangerousComponent = resolvedElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (shouldWrapInText) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"body\"\n  | \"small\"\n  | \"legal\"\n  | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n  /** HTML element for the text */\n  elementType?: ElementType;\n  /** Specify font size override */\n  variant?: TextVariantType;\n  /** Specify compact line height override */\n  spacing?: \"loose\" | \"tight\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children: ReactNode;\n  style?: React.CSSProperties;\n}\n\nconst getElementType = (\n  variant: TextVariantType | undefined,\n  elementType: ElementType | undefined,\n): ElementType => {\n  // Explicit elementType always wins\n  if (elementType) {\n    return elementType;\n  }\n  // Infer element from variant\n  if (variant && [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant)) {\n    return variant as ElementType;\n  }\n  return \"p\";\n};\n\nconst Text = ({ ref, elementType, ...props }: TextProps) => {\n  // Remove non-DOM props from element\n  const { variant, className, spacing, ...otherProps } = props;\n\n  // If a variant is supplied, set the class name and element type\n  const Element: ElementType = getElementType(variant, elementType);\n  const variantType = variant || Element;\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text\",\n    { [`--is-${variantType}`]: variantType },\n    { [`--has-line-height-${spacing}`]: spacing },\n    className,\n  );\n\n  return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n"],
+  "mappings": "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",
   "names": ["import_dedupe", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "import_jsx_runtime", "classNames"]
 }

package/dist/cjs/components/Box/Box.js

@@ -46,6 +46,18 @@ var filterUndefinedProps = (props) => {
   return filteredProps;
 };
 
+// src/utils/filterUnsetValues.ts
+var filterUnsetValues = (props) => {
+  const filtered = {};
+  Object.keys(props).forEach((key) => {
+    const value = props[key];
+    if (value !== void 0 && value !== null && value !== "") {
+      filtered[key] = value;
+    }
+  });
+  return filtered;
+};
+
 // src/utils/getSpacingValue.ts
 var getSpacingValue = (padding) => {
   if (typeof padding === "string") {
@@ -86,7 +98,7 @@ var Box = ({ ref, ...props }) => {
     ...otherProps
   } = props;
   const classes = (0, import_dedupe.default)("mobius", "mobius-box", otherProps.className);
-  const styleProps = filterUndefinedProps({
+  const fromProps = filterUndefinedProps({
     padding: getSpacingValue(padding),
     paddingInline: getSpacingValue(paddingInline || paddingX),
     paddingBlock: getSpacingValue(paddingBlock || paddingY),
@@ -99,8 +111,11 @@ var Box = ({ ref, ...props }) => {
     maxWidth,
     maxHeight,
     width,
-    height,
-    ...style
+    height
+  });
+  const styleProps = filterUndefinedProps({
+    ...fromProps,
+    ...style ? filterUnsetValues(style) : {}
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
 };

package/dist/cjs/components/Box/Box.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/Box/Box.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/getSpacingValue.ts"],
-  "sourcesContent": ["import classNames from \"classnames/dedupe\";\nimport type { BoxProps } from \"./types\";\nimport { getSpacingValue, filterUndefinedProps } from \"../../utils\";\nimport \"./Box.css\";\n\nconst Box = ({ ref, ...props }: BoxProps) => {\n  const {\n    elementType: Element = \"div\",\n    padding,\n    paddingX,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingY,\n    paddingBlock,\n    paddingBlockStart,\n    paddingBlockEnd,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    style,\n    ...otherProps\n  } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n  const styleProps = filterUndefinedProps({\n    padding: getSpacingValue(padding),\n    paddingInline: getSpacingValue(paddingInline || paddingX),\n    paddingBlock: getSpacingValue(paddingBlock || paddingY),\n    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    ...style,\n  });\n\n  return (\n    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />\n  );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n", "export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n", "import type { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;;;ACAhB,IAAM,uBAAuB,CAAC,UAAmC;AACtE,QAAM,gBAAyC,CAAC;AAChD,SAAO,KAAK,KAAK,EAAE,QAAQ,SAAO;AAChC,QAAI,MAAM,GAAG,MAAM,QAAW;AAC5B,oBAAc,GAAG,IAAI,MAAM,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACD,SAAO;AACT;;;ACNO,IAAM,kBAAkB,CAC7B,YACuB;AACvB,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,cAAc,OAAO;AAAA,EAC9B;AAEA,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,GAAG,OAAO;AAAA,EACnB;AAEA,SAAO;AACT;;;AFXA,iBAAO;AAgDH;AA9CJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM;AAAA,IACJ,aAAa,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAU,cAAAA,SAAW,UAAU,cAAc,WAAW,SAAS;AAEvE,QAAM,aAAa,qBAAqB;AAAA,IACtC,SAAS,gBAAgB,OAAO;AAAA,IAChC,eAAe,gBAAgB,iBAAiB,QAAQ;AAAA,IACxD,cAAc,gBAAgB,gBAAgB,QAAQ;AAAA,IACtD,YAAY,gBAAgB,cAAc,iBAAiB;AAAA,IAC3D,cAAc,gBAAgB,gBAAgB,gBAAgB;AAAA,IAC9D,eAAe,gBAAgB,iBAAiB,eAAe;AAAA,IAC/D,aAAa,gBAAgB,eAAe,kBAAkB;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AAED,SACE,4CAAC,WAAQ,KAAU,OAAO,YAAa,GAAG,YAAY,WAAW,SAAS;AAE9E;AAEA,IAAI,cAAc;",
+  "sources": ["../../../../src/components/Box/Box.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/filterUnsetValues.ts", "../../../../src/utils/getSpacingValue.ts"],
+  "sourcesContent": ["import classNames from \"classnames/dedupe\";\nimport type { BoxProps } from \"./types\";\nimport {\n  filterUndefinedProps,\n  filterUnsetValues,\n  getSpacingValue,\n} from \"../../utils\";\nimport \"./Box.css\";\n\nconst Box = ({ ref, ...props }: BoxProps) => {\n  const {\n    elementType: Element = \"div\",\n    padding,\n    paddingX,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingY,\n    paddingBlock,\n    paddingBlockStart,\n    paddingBlockEnd,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    style,\n    ...otherProps\n  } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n  const fromProps = filterUndefinedProps({\n    padding: getSpacingValue(padding),\n    paddingInline: getSpacingValue(paddingInline || paddingX),\n    paddingBlock: getSpacingValue(paddingBlock || paddingY),\n    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n  });\n\n  const styleProps = filterUndefinedProps({\n    ...fromProps,\n    ...(style ? filterUnsetValues(style as Record<string, unknown>) : {}),\n  });\n\n  return (\n    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />\n  );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n", "export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n", "/**\n * Drops `undefined`, `null`, and empty string entries.\n * Use when merging style objects so \u201Cunset\u201D values from `style` do not override\n * computed values from component props.\n */\nexport const filterUnsetValues = (\n  props: Record<string, unknown>,\n): Record<string, unknown> => {\n  const filtered: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    const value = props[key];\n    if (value !== undefined && value !== null && value !== \"\") {\n      filtered[key] = value;\n    }\n  });\n  return filtered;\n};\n", "import type { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;;;ACAhB,IAAM,uBAAuB,CAAC,UAAmC;AACtE,QAAM,gBAAyC,CAAC;AAChD,SAAO,KAAK,KAAK,EAAE,QAAQ,SAAO;AAChC,QAAI,MAAM,GAAG,MAAM,QAAW;AAC5B,oBAAc,GAAG,IAAI,MAAM,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACD,SAAO;AACT;;;ACHO,IAAM,oBAAoB,CAC/B,UAC4B;AAC5B,QAAM,WAAoC,CAAC;AAC3C,SAAO,KAAK,KAAK,EAAE,QAAQ,SAAO;AAChC,UAAM,QAAQ,MAAM,GAAG;AACvB,QAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AACzD,eAAS,GAAG,IAAI;AAAA,IAClB;AAAA,EACF,CAAC;AACD,SAAO;AACT;;;ACdO,IAAM,kBAAkB,CAC7B,YACuB;AACvB,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,cAAc,OAAO;AAAA,EAC9B;AAEA,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,GAAG,OAAO;AAAA,EACnB;AAEA,SAAO;AACT;;;AHPA,iBAAO;AAoDH;AAlDJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM;AAAA,IACJ,aAAa,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAU,cAAAA,SAAW,UAAU,cAAc,WAAW,SAAS;AAEvE,QAAM,YAAY,qBAAqB;AAAA,IACrC,SAAS,gBAAgB,OAAO;AAAA,IAChC,eAAe,gBAAgB,iBAAiB,QAAQ;AAAA,IACxD,cAAc,gBAAgB,gBAAgB,QAAQ;AAAA,IACtD,YAAY,gBAAgB,cAAc,iBAAiB;AAAA,IAC3D,cAAc,gBAAgB,gBAAgB,gBAAgB;AAAA,IAC9D,eAAe,gBAAgB,iBAAiB,eAAe;AAAA,IAC/D,aAAa,gBAAgB,eAAe,kBAAkB;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,qBAAqB;AAAA,IACtC,GAAG;AAAA,IACH,GAAI,QAAQ,kBAAkB,KAAgC,IAAI,CAAC;AAAA,EACrE,CAAC;AAED,SACE,4CAAC,WAAQ,KAAU,OAAO,YAAa,GAAG,YAAY,WAAW,SAAS;AAE9E;AAEA,IAAI,cAAc;",
   "names": ["classNames"]
 }

package/dist/cjs/components/Box/index.js

@@ -48,6 +48,18 @@ var filterUndefinedProps = (props) => {
   return filteredProps;
 };
 
+// src/utils/filterUnsetValues.ts
+var filterUnsetValues = (props) => {
+  const filtered = {};
+  Object.keys(props).forEach((key) => {
+    const value = props[key];
+    if (value !== void 0 && value !== null && value !== "") {
+      filtered[key] = value;
+    }
+  });
+  return filtered;
+};
+
 // src/utils/getSpacingValue.ts
 var getSpacingValue = (padding) => {
   if (typeof padding === "string") {
@@ -88,7 +100,7 @@ var Box = ({ ref, ...props }) => {
     ...otherProps
   } = props;
   const classes = (0, import_dedupe.default)("mobius", "mobius-box", otherProps.className);
-  const styleProps = filterUndefinedProps({
+  const fromProps = filterUndefinedProps({
     padding: getSpacingValue(padding),
     paddingInline: getSpacingValue(paddingInline || paddingX),
     paddingBlock: getSpacingValue(paddingBlock || paddingY),
@@ -101,8 +113,11 @@ var Box = ({ ref, ...props }) => {
     maxWidth,
     maxHeight,
     width,
-    height,
-    ...style
+    height
+  });
+  const styleProps = filterUndefinedProps({
+    ...fromProps,
+    ...style ? filterUnsetValues(style) : {}
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
 };

package/dist/cjs/components/Box/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/Box/index.tsx", "../../../../src/components/Box/Box.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/getSpacingValue.ts"],
-  "sourcesContent": ["export * from \"./Box\";\n", "import classNames from \"classnames/dedupe\";\nimport type { BoxProps } from \"./types\";\nimport { getSpacingValue, filterUndefinedProps } from \"../../utils\";\nimport \"./Box.css\";\n\nconst Box = ({ ref, ...props }: BoxProps) => {\n  const {\n    elementType: Element = \"div\",\n    padding,\n    paddingX,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingY,\n    paddingBlock,\n    paddingBlockStart,\n    paddingBlockEnd,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    style,\n    ...otherProps\n  } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n  const styleProps = filterUndefinedProps({\n    padding: getSpacingValue(padding),\n    paddingInline: getSpacingValue(paddingInline || paddingX),\n    paddingBlock: getSpacingValue(paddingBlock || paddingY),\n    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    ...style,\n  });\n\n  return (\n    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />\n  );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n", "export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n", "import type { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAAuB;;;ACAhB,IAAM,uBAAuB,CAAC,UAAmC;AACtE,QAAM,gBAAyC,CAAC;AAChD,SAAO,KAAK,KAAK,EAAE,QAAQ,SAAO;AAChC,QAAI,MAAM,GAAG,MAAM,QAAW;AAC5B,oBAAc,GAAG,IAAI,MAAM,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACD,SAAO;AACT;;;ACNO,IAAM,kBAAkB,CAC7B,YACuB;AACvB,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,cAAc,OAAO;AAAA,EAC9B;AAEA,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,GAAG,OAAO;AAAA,EACnB;AAEA,SAAO;AACT;;;AFXA,iBAAO;AAgDH;AA9CJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM;AAAA,IACJ,aAAa,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAU,cAAAA,SAAW,UAAU,cAAc,WAAW,SAAS;AAEvE,QAAM,aAAa,qBAAqB;AAAA,IACtC,SAAS,gBAAgB,OAAO;AAAA,IAChC,eAAe,gBAAgB,iBAAiB,QAAQ;AAAA,IACxD,cAAc,gBAAgB,gBAAgB,QAAQ;AAAA,IACtD,YAAY,gBAAgB,cAAc,iBAAiB;AAAA,IAC3D,cAAc,gBAAgB,gBAAgB,gBAAgB;AAAA,IAC9D,eAAe,gBAAgB,iBAAiB,eAAe;AAAA,IAC/D,aAAa,gBAAgB,eAAe,kBAAkB;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AAED,SACE,4CAAC,WAAQ,KAAU,OAAO,YAAa,GAAG,YAAY,WAAW,SAAS;AAE9E;AAEA,IAAI,cAAc;",
+  "sources": ["../../../../src/components/Box/index.tsx", "../../../../src/components/Box/Box.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/filterUnsetValues.ts", "../../../../src/utils/getSpacingValue.ts"],
+  "sourcesContent": ["export * from \"./Box\";\n", "import classNames from \"classnames/dedupe\";\nimport type { BoxProps } from \"./types\";\nimport {\n  filterUndefinedProps,\n  filterUnsetValues,\n  getSpacingValue,\n} from \"../../utils\";\nimport \"./Box.css\";\n\nconst Box = ({ ref, ...props }: BoxProps) => {\n  const {\n    elementType: Element = \"div\",\n    padding,\n    paddingX,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingY,\n    paddingBlock,\n    paddingBlockStart,\n    paddingBlockEnd,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    style,\n    ...otherProps\n  } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n  const fromProps = filterUndefinedProps({\n    padding: getSpacingValue(padding),\n    paddingInline: getSpacingValue(paddingInline || paddingX),\n    paddingBlock: getSpacingValue(paddingBlock || paddingY),\n    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n  });\n\n  const styleProps = filterUndefinedProps({\n    ...fromProps,\n    ...(style ? filterUnsetValues(style as Record<string, unknown>) : {}),\n  });\n\n  return (\n    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />\n  );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n", "export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n", "/**\n * Drops `undefined`, `null`, and empty string entries.\n * Use when merging style objects so \u201Cunset\u201D values from `style` do not override\n * computed values from component props.\n */\nexport const filterUnsetValues = (\n  props: Record<string, unknown>,\n): Record<string, unknown> => {\n  const filtered: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    const value = props[key];\n    if (value !== undefined && value !== null && value !== \"\") {\n      filtered[key] = value;\n    }\n  });\n  return filtered;\n};\n", "import type { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAAuB;;;ACAhB,IAAM,uBAAuB,CAAC,UAAmC;AACtE,QAAM,gBAAyC,CAAC;AAChD,SAAO,KAAK,KAAK,EAAE,QAAQ,SAAO;AAChC,QAAI,MAAM,GAAG,MAAM,QAAW;AAC5B,oBAAc,GAAG,IAAI,MAAM,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACD,SAAO;AACT;;;ACHO,IAAM,oBAAoB,CAC/B,UAC4B;AAC5B,QAAM,WAAoC,CAAC;AAC3C,SAAO,KAAK,KAAK,EAAE,QAAQ,SAAO;AAChC,UAAM,QAAQ,MAAM,GAAG;AACvB,QAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;AACzD,eAAS,GAAG,IAAI;AAAA,IAClB;AAAA,EACF,CAAC;AACD,SAAO;AACT;;;ACdO,IAAM,kBAAkB,CAC7B,YACuB;AACvB,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,cAAc,OAAO;AAAA,EAC9B;AAEA,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,GAAG,OAAO;AAAA,EACnB;AAEA,SAAO;AACT;;;AHPA,iBAAO;AAoDH;AAlDJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM;AAAA,IACJ,aAAa,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAU,cAAAA,SAAW,UAAU,cAAc,WAAW,SAAS;AAEvE,QAAM,YAAY,qBAAqB;AAAA,IACrC,SAAS,gBAAgB,OAAO;AAAA,IAChC,eAAe,gBAAgB,iBAAiB,QAAQ;AAAA,IACxD,cAAc,gBAAgB,gBAAgB,QAAQ;AAAA,IACtD,YAAY,gBAAgB,cAAc,iBAAiB;AAAA,IAC3D,cAAc,gBAAgB,gBAAgB,gBAAgB;AAAA,IAC9D,eAAe,gBAAgB,iBAAiB,eAAe;AAAA,IAC/D,aAAa,gBAAgB,eAAe,kBAAkB;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,qBAAqB;AAAA,IACtC,GAAG;AAAA,IACH,GAAI,QAAQ,kBAAkB,KAAgC,IAAI,CAAC;AAAA,EACrE,CAAC;AAED,SACE,4CAAC,WAAQ,KAAU,OAAO,YAAa,GAAG,YAAY,WAAW,SAAS;AAE9E;AAEA,IAAI,cAAc;",
   "names": ["classNames"]
 }

package/dist/cjs/components/Breadcrumbs/BreadcrumbItem.js

@@ -51,6 +51,18 @@ var filterUndefinedProps = (props) => {
   return filteredProps;
 };
 
+// src/utils/filterUnsetValues.ts
+var filterUnsetValues = (props) => {
+  const filtered = {};
+  Object.keys(props).forEach((key) => {
+    const value = props[key];
+    if (value !== void 0 && value !== null && value !== "") {
+      filtered[key] = value;
+    }
+  });
+  return filtered;
+};
+
 // src/utils/getSpacingValue.ts
 var getSpacingValue = (padding) => {
   if (typeof padding === "string") {
@@ -91,7 +103,7 @@ var Box = ({ ref, ...props }) => {
     ...otherProps
   } = props;
   const classes = (0, import_dedupe.default)("mobius", "mobius-box", otherProps.className);
-  const styleProps = filterUndefinedProps({
+  const fromProps = filterUndefinedProps({
     padding: getSpacingValue(padding),
     paddingInline: getSpacingValue(paddingInline || paddingX),
     paddingBlock: getSpacingValue(paddingBlock || paddingY),
@@ -104,8 +116,11 @@ var Box = ({ ref, ...props }) => {
     maxWidth,
     maxHeight,
     width,
-    height,
-    ...style
+    height
+  });
+  const styleProps = filterUndefinedProps({
+    ...fromProps,
+    ...style ? filterUnsetValues(style) : {}
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
 };

package/dist/cjs/components/Breadcrumbs/BreadcrumbItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/Breadcrumbs/BreadcrumbItem.tsx", "../../../../src/components/Box/Box.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/getSpacingValue.ts"],
-  "sourcesContent": ["\"use client\";\n\nimport type { ReactNode, ReactElement, RefAttributes } from \"react\";\nimport { cloneElement, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Box } from \"../Box\";\n\nexport type BreadcrumbItemElementType = HTMLLIElement;\n\nexport interface BreadcrumbItemProps\n  extends DOMProps, RefAttributes<BreadcrumbItemElementType> {\n  \"aria-current\"?:\n    | \"page\"\n    | \"step\"\n    | \"location\"\n    | \"date\"\n    | \"time\"\n    | boolean\n    | \"true\"\n    | \"false\";\n  isDisabled?: boolean;\n  isCurrent?: boolean;\n  separator?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\nconst BreadcrumbItem = ({ ref, ...props }: BreadcrumbItemProps) => {\n  const {\n    isDisabled = false,\n    isCurrent = false,\n    \"aria-current\": ariaCurrent = \"page\",\n    children,\n    separator = (\n      <Box className=\"mobius-breadcrumb__separator\" aria-hidden=\"true\">\n        {\">\"}\n      </Box>\n    ),\n    ...otherProps\n  } = props;\n  const { itemProps } = {\n    itemProps: {\n      \"aria-current\": isCurrent ? ariaCurrent : undefined,\n      \"aria-disabled\": isDisabled || isCurrent,\n      ...otherProps,\n    },\n  };\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-breadcrumb__item\",\n    props.className,\n  );\n\n  const child: ReactElement =\n    typeof children === \"string\" ? (\n      <span {...itemProps}>{children}</span>\n    ) : (\n      (Children.only(children) as ReactElement)\n    );\n\n  return (\n    <li className={classes}>\n      {cloneElement(child, {\n        ...(child.props as Record<string, unknown>),\n        ...itemProps,\n        ref,\n      } as Record<string, unknown>)}\n      {!props.isCurrent && separator}\n    </li>\n  );\n};\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\nexport { BreadcrumbItem };\n", "import classNames from \"classnames/dedupe\";\nimport type { BoxProps } from \"./types\";\nimport { getSpacingValue, filterUndefinedProps } from \"../../utils\";\nimport \"./Box.css\";\n\nconst Box = ({ ref, ...props }: BoxProps) => {\n  const {\n    elementType: Element = \"div\",\n    padding,\n    paddingX,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingY,\n    paddingBlock,\n    paddingBlockStart,\n    paddingBlockEnd,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    style,\n    ...otherProps\n  } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n  const styleProps = filterUndefinedProps({\n    padding: getSpacingValue(padding),\n    paddingInline: getSpacingValue(paddingInline || paddingX),\n    paddingBlock: getSpacingValue(paddingBlock || paddingY),\n    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    ...style,\n  });\n\n  return (\n    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />\n  );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n", "export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n", "import type { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAuC;AACvC,IAAAA,iBAAuB;;;ACJvB,oBAAuB;;;ACAhB,IAAM,uBAAuB,CAAC,UAAmC;AACtE,QAAM,gBAAyC,CAAC;AAChD,SAAO,KAAK,KAAK,EAAE,QAAQ,SAAO;AAChC,QAAI,MAAM,GAAG,MAAM,QAAW;AAC5B,oBAAc,GAAG,IAAI,MAAM,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACD,SAAO;AACT;;;ACNO,IAAM,kBAAkB,CAC7B,YACuB;AACvB,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,cAAc,OAAO;AAAA,EAC9B;AAEA,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,GAAG,OAAO;AAAA,EACnB;AAEA,SAAO;AACT;;;AFXA,iBAAO;AAgDH;AA9CJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM;AAAA,IACJ,aAAa,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAU,cAAAC,SAAW,UAAU,cAAc,WAAW,SAAS;AAEvE,QAAM,aAAa,qBAAqB;AAAA,IACtC,SAAS,gBAAgB,OAAO;AAAA,IAChC,eAAe,gBAAgB,iBAAiB,QAAQ;AAAA,IACxD,cAAc,gBAAgB,gBAAgB,QAAQ;AAAA,IACtD,YAAY,gBAAgB,cAAc,iBAAiB;AAAA,IAC3D,cAAc,gBAAgB,gBAAgB,gBAAgB;AAAA,IAC9D,eAAe,gBAAgB,iBAAiB,eAAe;AAAA,IAC/D,aAAa,gBAAgB,eAAe,kBAAkB;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AAED,SACE,4CAAC,WAAQ,KAAU,OAAO,YAAa,GAAG,YAAY,WAAW,SAAS;AAE9E;AAEA,IAAI,cAAc;;;ADpBZ,IAAAC,sBAAA;AAPN,IAAM,iBAAiB,CAAC,EAAE,KAAK,GAAG,MAAM,MAA2B;AACjE,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,gBAAgB,cAAc;AAAA,IAC9B;AAAA,IACA,YACE,6CAAC,OAAI,WAAU,gCAA+B,eAAY,QACvD,eACH;AAAA,IAEF,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,UAAU,IAAI;AAAA,IACpB,WAAW;AAAA,MACT,gBAAgB,YAAY,cAAc;AAAA,MAC1C,iBAAiB,cAAc;AAAA,MAC/B,GAAG;AAAA,IACL;AAAA,EACF;AAGA,QAAM,cAAU,eAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR;AAEA,QAAM,QACJ,OAAO,aAAa,WAClB,6CAAC,UAAM,GAAG,WAAY,UAAS,IAE9B,sBAAS,KAAK,QAAQ;AAG3B,SACE,8CAAC,QAAG,WAAW,SACZ;AAAA,mCAAa,OAAO;AAAA,MACnB,GAAI,MAAM;AAAA,MACV,GAAG;AAAA,MACH;AAAA,IACF,CAA4B;AAAA,IAC3B,CAAC,MAAM,aAAa;AAAA,KACvB;AAEJ;AAEA,eAAe,cAAc;",
+  "sources": ["../../../../src/components/Breadcrumbs/BreadcrumbItem.tsx", "../../../../src/components/Box/Box.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/filterUnsetValues.ts", "../../../../src/utils/getSpacingValue.ts"],
+  "sourcesContent": ["\"use client\";\n\nimport type { ReactNode, ReactElement, RefAttributes } from \"react\";\nimport { cloneElement, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Box } from \"../Box\";\n\nexport type BreadcrumbItemElementType = HTMLLIElement;\n\nexport interface BreadcrumbItemProps\n  extends DOMProps, RefAttributes<BreadcrumbItemElementType> {\n  \"aria-current\"?:\n    | \"page\"\n    | \"step\"\n    | \"location\"\n    | \"date\"\n    | \"time\"\n    | boolean\n    | \"true\"\n    | \"false\";\n  isDisabled?: boolean;\n  isCurrent?: boolean;\n  separator?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\nconst BreadcrumbItem = ({ ref, ...props }: BreadcrumbItemProps) => {\n  const {\n    isDisabled = false,\n    isCurrent = false,\n    \"aria-current\": ariaCurrent = \"page\",\n    children,\n    separator = (\n      <Box className=\"mobius-breadcrumb__separator\" aria-hidden=\"true\">\n        {\">\"}\n      </Box>\n    ),\n    ...otherProps\n  } = props;\n  const { itemProps } = {\n    itemProps: {\n      \"aria-current\": isCurrent ? ariaCurrent : undefined,\n      \"aria-disabled\": isDisabled || isCurrent,\n      ...otherProps,\n    },\n  };\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-breadcrumb__item\",\n    props.className,\n  );\n\n  const child: ReactElement =\n    typeof children === \"string\" ? (\n      <span {...itemProps}>{children}</span>\n    ) : (\n      (Children.only(children) as ReactElement)\n    );\n\n  return (\n    <li className={classes}>\n      {cloneElement(child, {\n        ...(child.props as Record<string, unknown>),\n        ...itemProps,\n        ref,\n      } as Record<string, unknown>)}\n      {!props.isCurrent && separator}\n    </li>\n  );\n};\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\nexport { BreadcrumbItem };\n", "import classNames from \"classnames/dedupe\";\nimport type { BoxProps } from \"./types\";\nimport {\n  filterUndefinedProps,\n  filterUnsetValues,\n  getSpacingValue,\n} from \"../../utils\";\nimport \"./Box.css\";\n\nconst Box = ({ ref, ...props }: BoxProps) => {\n  const {\n    elementType: Element = \"div\",\n    padding,\n    paddingX,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingY,\n    paddingBlock,\n    paddingBlockStart,\n    paddingBlockEnd,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    style,\n    ...otherProps\n  } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n  const fromProps = filterUndefinedProps({\n    padding: getSpacingValue(padding),\n    paddingInline: getSpacingValue(paddingInline || paddingX),\n    paddingBlock: getSpacingValue(paddingBlock || paddingY),\n    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n  });\n\n  const styleProps = filterUndefinedProps({\n    ...fromProps,\n    ...(style ? filterUnsetValues(style as Record<string, unknown>) : {}),\n  });\n\n  return (\n    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />\n  );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n", "export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n", "/**\n * Drops `undefined`, `null`, and empty string entries.\n * Use when merging style objects so \u201Cunset\u201D values from `style` do not override\n * computed values from component props.\n */\nexport const filterUnsetValues = (\n  props: Record<string, unknown>,\n): Record<string, unknown> => {\n  const filtered: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    const value = props[key];\n    if (value !== undefined && value !== null && value !== \"\") {\n      filtered[key] = value;\n    }\n  });\n  return filtered;\n};\n", "import type { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],
+  "mappings": "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",
   "names": ["import_dedupe", "classNames", "import_jsx_runtime", "classNames"]
 }

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],
-  "sourcesContent": ["\"use client\";\n\nimport type { ReactElement, RefAttributes, ReactNode } from \"react\";\nimport { Children, cloneElement } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport \"./Breadcrumbs.css\";\n\nexport type BreadcrumbsElementType = HTMLUListElement;\n\nexport interface BreadcrumbsProps extends RefAttributes<BreadcrumbsElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children?: ReactNode;\n  \"aria-label\"?: string;\n}\n\nconst Breadcrumbs = ({ ref, ...props }: BreadcrumbsProps) => {\n  const { \"aria-label\": ariaLabel = \"Breadcrumbs\" } = props;\n  const { navProps } = { navProps: { \"aria-label\": ariaLabel } };\n  const { children, ...otherProps } = props;\n  const childArray = Children.toArray(children);\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-breadcrumb\",\n    otherProps.className,\n  );\n\n  return (\n    <nav ref={ref} {...otherProps} {...navProps} className={classes}>\n      <ul>\n        {childArray.map((child, i) =>\n          cloneElement(\n            child as ReactElement,\n            {\n              key: i,\n              isCurrent: i === childArray.length - 1,\n            } as { key: number; isCurrent: boolean },\n          ),\n        )}\n      </ul>\n    </nav>\n  );\n};\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\nexport { Breadcrumbs };\n"],
+  "sourcesContent": ["\"use client\";\n\nimport type { ReactElement, RefAttributes, ReactNode } from \"react\";\nimport { Children, cloneElement } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport \"./Breadcrumbs.css\";\n\nexport type BreadcrumbsElementType = HTMLElement;\n\nexport interface BreadcrumbsProps extends RefAttributes<BreadcrumbsElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children?: ReactNode;\n  \"aria-label\"?: string;\n}\n\nconst Breadcrumbs = ({ ref, ...props }: BreadcrumbsProps) => {\n  const { \"aria-label\": ariaLabel = \"Breadcrumbs\" } = props;\n  const { navProps } = { navProps: { \"aria-label\": ariaLabel } };\n  const { children, ...otherProps } = props;\n  const childArray = Children.toArray(children);\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-breadcrumb\",\n    otherProps.className,\n  );\n\n  return (\n    <nav ref={ref} {...otherProps} {...navProps} className={classes}>\n      <ul>\n        {childArray.map((child, i) =>\n          cloneElement(\n            child as ReactElement,\n            {\n              key: i,\n              isCurrent: i === childArray.length - 1,\n            } as { key: number; isCurrent: boolean },\n          ),\n        )}\n      </ul>\n    </nav>\n  );\n};\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\nexport { Breadcrumbs };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAuC;AACvC,oBAAuB;AACvB,yBAAO;AA0BD;AAfN,IAAM,cAAc,CAAC,EAAE,KAAK,GAAG,MAAM,MAAwB;AAC3D,QAAM,EAAE,cAAc,YAAY,cAAc,IAAI;AACpD,QAAM,EAAE,SAAS,IAAI,EAAE,UAAU,EAAE,cAAc,UAAU,EAAE;AAC7D,QAAM,EAAE,UAAU,GAAG,WAAW,IAAI;AACpC,QAAM,aAAa,sBAAS,QAAQ,QAAQ;AAG5C,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACb;AAEA,SACE,4CAAC,SAAI,KAAW,GAAG,YAAa,GAAG,UAAU,WAAW,SACtD,sDAAC,QACE,qBAAW;AAAA,IAAI,CAAC,OAAO,UACtB;AAAA,MACE;AAAA,MACA;AAAA,QACE,KAAK;AAAA,QACL,WAAW,MAAM,WAAW,SAAS;AAAA,MACvC;AAAA,IACF;AAAA,EACF,GACF,GACF;AAEJ;AAEA,YAAY,cAAc;",
   "names": ["classNames"]
 }

package/dist/cjs/components/Breadcrumbs/index.js

@@ -80,6 +80,18 @@ var filterUndefinedProps = (props) => {
   return filteredProps;
 };
 
+// src/utils/filterUnsetValues.ts
+var filterUnsetValues = (props) => {
+  const filtered = {};
+  Object.keys(props).forEach((key) => {
+    const value = props[key];
+    if (value !== void 0 && value !== null && value !== "") {
+      filtered[key] = value;
+    }
+  });
+  return filtered;
+};
+
 // src/utils/getSpacingValue.ts
 var getSpacingValue = (padding) => {
   if (typeof padding === "string") {
@@ -120,7 +132,7 @@ var Box = ({ ref, ...props }) => {
     ...otherProps
   } = props;
   const classes = (0, import_dedupe2.default)("mobius", "mobius-box", otherProps.className);
-  const styleProps = filterUndefinedProps({
+  const fromProps = filterUndefinedProps({
     padding: getSpacingValue(padding),
     paddingInline: getSpacingValue(paddingInline || paddingX),
     paddingBlock: getSpacingValue(paddingBlock || paddingY),
@@ -133,8 +145,11 @@ var Box = ({ ref, ...props }) => {
     maxWidth,
     maxHeight,
     width,
-    height,
-    ...style
+    height
+  });
+  const styleProps = filterUndefinedProps({
+    ...fromProps,
+    ...style ? filterUnsetValues(style) : {}
   });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
 };

package/dist/cjs/components/Breadcrumbs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/components/Breadcrumbs/index.tsx", "../../../../src/components/Breadcrumbs/Breadcrumbs.tsx", "../../../../src/components/Breadcrumbs/BreadcrumbItem.tsx", "../../../../src/components/Box/Box.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/getSpacingValue.ts"],
-  "sourcesContent": ["export * from \"./Breadcrumbs\";\nexport * from \"./BreadcrumbItem\";\n", "\"use client\";\n\nimport type { ReactElement, RefAttributes, ReactNode } from \"react\";\nimport { Children, cloneElement } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport \"./Breadcrumbs.css\";\n\nexport type BreadcrumbsElementType = HTMLUListElement;\n\nexport interface BreadcrumbsProps extends RefAttributes<BreadcrumbsElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children?: ReactNode;\n  \"aria-label\"?: string;\n}\n\nconst Breadcrumbs = ({ ref, ...props }: BreadcrumbsProps) => {\n  const { \"aria-label\": ariaLabel = \"Breadcrumbs\" } = props;\n  const { navProps } = { navProps: { \"aria-label\": ariaLabel } };\n  const { children, ...otherProps } = props;\n  const childArray = Children.toArray(children);\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-breadcrumb\",\n    otherProps.className,\n  );\n\n  return (\n    <nav ref={ref} {...otherProps} {...navProps} className={classes}>\n      <ul>\n        {childArray.map((child, i) =>\n          cloneElement(\n            child as ReactElement,\n            {\n              key: i,\n              isCurrent: i === childArray.length - 1,\n            } as { key: number; isCurrent: boolean },\n          ),\n        )}\n      </ul>\n    </nav>\n  );\n};\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\nexport { Breadcrumbs };\n", "\"use client\";\n\nimport type { ReactNode, ReactElement, RefAttributes } from \"react\";\nimport { cloneElement, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Box } from \"../Box\";\n\nexport type BreadcrumbItemElementType = HTMLLIElement;\n\nexport interface BreadcrumbItemProps\n  extends DOMProps, RefAttributes<BreadcrumbItemElementType> {\n  \"aria-current\"?:\n    | \"page\"\n    | \"step\"\n    | \"location\"\n    | \"date\"\n    | \"time\"\n    | boolean\n    | \"true\"\n    | \"false\";\n  isDisabled?: boolean;\n  isCurrent?: boolean;\n  separator?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\nconst BreadcrumbItem = ({ ref, ...props }: BreadcrumbItemProps) => {\n  const {\n    isDisabled = false,\n    isCurrent = false,\n    \"aria-current\": ariaCurrent = \"page\",\n    children,\n    separator = (\n      <Box className=\"mobius-breadcrumb__separator\" aria-hidden=\"true\">\n        {\">\"}\n      </Box>\n    ),\n    ...otherProps\n  } = props;\n  const { itemProps } = {\n    itemProps: {\n      \"aria-current\": isCurrent ? ariaCurrent : undefined,\n      \"aria-disabled\": isDisabled || isCurrent,\n      ...otherProps,\n    },\n  };\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-breadcrumb__item\",\n    props.className,\n  );\n\n  const child: ReactElement =\n    typeof children === \"string\" ? (\n      <span {...itemProps}>{children}</span>\n    ) : (\n      (Children.only(children) as ReactElement)\n    );\n\n  return (\n    <li className={classes}>\n      {cloneElement(child, {\n        ...(child.props as Record<string, unknown>),\n        ...itemProps,\n        ref,\n      } as Record<string, unknown>)}\n      {!props.isCurrent && separator}\n    </li>\n  );\n};\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\nexport { BreadcrumbItem };\n", "import classNames from \"classnames/dedupe\";\nimport type { BoxProps } from \"./types\";\nimport { getSpacingValue, filterUndefinedProps } from \"../../utils\";\nimport \"./Box.css\";\n\nconst Box = ({ ref, ...props }: BoxProps) => {\n  const {\n    elementType: Element = \"div\",\n    padding,\n    paddingX,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingY,\n    paddingBlock,\n    paddingBlockStart,\n    paddingBlockEnd,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    style,\n    ...otherProps\n  } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n  const styleProps = filterUndefinedProps({\n    padding: getSpacingValue(padding),\n    paddingInline: getSpacingValue(paddingInline || paddingX),\n    paddingBlock: getSpacingValue(paddingBlock || paddingY),\n    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    ...style,\n  });\n\n  return (\n    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />\n  );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n", "export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n", "import type { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],
-  "mappings": "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",
+  "sources": ["../../../../src/components/Breadcrumbs/index.tsx", "../../../../src/components/Breadcrumbs/Breadcrumbs.tsx", "../../../../src/components/Breadcrumbs/BreadcrumbItem.tsx", "../../../../src/components/Box/Box.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/filterUnsetValues.ts", "../../../../src/utils/getSpacingValue.ts"],
+  "sourcesContent": ["export * from \"./Breadcrumbs\";\nexport * from \"./BreadcrumbItem\";\n", "\"use client\";\n\nimport type { ReactElement, RefAttributes, ReactNode } from \"react\";\nimport { Children, cloneElement } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport \"./Breadcrumbs.css\";\n\nexport type BreadcrumbsElementType = HTMLElement;\n\nexport interface BreadcrumbsProps extends RefAttributes<BreadcrumbsElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children?: ReactNode;\n  \"aria-label\"?: string;\n}\n\nconst Breadcrumbs = ({ ref, ...props }: BreadcrumbsProps) => {\n  const { \"aria-label\": ariaLabel = \"Breadcrumbs\" } = props;\n  const { navProps } = { navProps: { \"aria-label\": ariaLabel } };\n  const { children, ...otherProps } = props;\n  const childArray = Children.toArray(children);\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-breadcrumb\",\n    otherProps.className,\n  );\n\n  return (\n    <nav ref={ref} {...otherProps} {...navProps} className={classes}>\n      <ul>\n        {childArray.map((child, i) =>\n          cloneElement(\n            child as ReactElement,\n            {\n              key: i,\n              isCurrent: i === childArray.length - 1,\n            } as { key: number; isCurrent: boolean },\n          ),\n        )}\n      </ul>\n    </nav>\n  );\n};\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\nexport { Breadcrumbs };\n", "\"use client\";\n\nimport type { ReactNode, ReactElement, RefAttributes } from \"react\";\nimport { cloneElement, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Box } from \"../Box\";\n\nexport type BreadcrumbItemElementType = HTMLLIElement;\n\nexport interface BreadcrumbItemProps\n  extends DOMProps, RefAttributes<BreadcrumbItemElementType> {\n  \"aria-current\"?:\n    | \"page\"\n    | \"step\"\n    | \"location\"\n    | \"date\"\n    | \"time\"\n    | boolean\n    | \"true\"\n    | \"false\";\n  isDisabled?: boolean;\n  isCurrent?: boolean;\n  separator?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\nconst BreadcrumbItem = ({ ref, ...props }: BreadcrumbItemProps) => {\n  const {\n    isDisabled = false,\n    isCurrent = false,\n    \"aria-current\": ariaCurrent = \"page\",\n    children,\n    separator = (\n      <Box className=\"mobius-breadcrumb__separator\" aria-hidden=\"true\">\n        {\">\"}\n      </Box>\n    ),\n    ...otherProps\n  } = props;\n  const { itemProps } = {\n    itemProps: {\n      \"aria-current\": isCurrent ? ariaCurrent : undefined,\n      \"aria-disabled\": isDisabled || isCurrent,\n      ...otherProps,\n    },\n  };\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-breadcrumb__item\",\n    props.className,\n  );\n\n  const child: ReactElement =\n    typeof children === \"string\" ? (\n      <span {...itemProps}>{children}</span>\n    ) : (\n      (Children.only(children) as ReactElement)\n    );\n\n  return (\n    <li className={classes}>\n      {cloneElement(child, {\n        ...(child.props as Record<string, unknown>),\n        ...itemProps,\n        ref,\n      } as Record<string, unknown>)}\n      {!props.isCurrent && separator}\n    </li>\n  );\n};\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\nexport { BreadcrumbItem };\n", "import classNames from \"classnames/dedupe\";\nimport type { BoxProps } from \"./types\";\nimport {\n  filterUndefinedProps,\n  filterUnsetValues,\n  getSpacingValue,\n} from \"../../utils\";\nimport \"./Box.css\";\n\nconst Box = ({ ref, ...props }: BoxProps) => {\n  const {\n    elementType: Element = \"div\",\n    padding,\n    paddingX,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingY,\n    paddingBlock,\n    paddingBlockStart,\n    paddingBlockEnd,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    style,\n    ...otherProps\n  } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n  const fromProps = filterUndefinedProps({\n    padding: getSpacingValue(padding),\n    paddingInline: getSpacingValue(paddingInline || paddingX),\n    paddingBlock: getSpacingValue(paddingBlock || paddingY),\n    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n  });\n\n  const styleProps = filterUndefinedProps({\n    ...fromProps,\n    ...(style ? filterUnsetValues(style as Record<string, unknown>) : {}),\n  });\n\n  return (\n    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />\n  );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n", "export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n", "/**\n * Drops `undefined`, `null`, and empty string entries.\n * Use when merging style objects so \u201Cunset\u201D values from `style` do not override\n * computed values from component props.\n */\nexport const filterUnsetValues = (\n  props: Record<string, unknown>,\n): Record<string, unknown> => {\n  const filtered: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    const value = props[key];\n    if (value !== undefined && value !== null && value !== \"\") {\n      filtered[key] = value;\n    }\n  });\n  return filtered;\n};\n", "import type { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],
+  "mappings": "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",
   "names": ["classNames", "import_react", "import_dedupe", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames"]
 }