@simplybusiness/mobius 9.2.0 → 9.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 9.3.1
+
+### Patch Changes
+
+- 48558ae: Fix CSS cascade-order bugs in ErrorMessage, Popover, and Modal by bumping overriding selectors to specificity (0,2,0) using compound selectors, ensuring styles win regardless of CSS chunk load order
+
+## 9.3.0
+
+### Minor Changes
+
+- be86128: **BREAKING (themes):** Theme packages no longer bundle component CSS. `theme-core` and `theme-simplybusiness` now contain only base styles (fonts, variables, icons, animations). Partner themes no longer re-import `theme-simplybusiness` — apps must import the base theme separately alongside partner themes.
+
+  Component CSS imports have moved into individual component TSX files. Apps with a CSS-capable bundler (webpack, rspack, vite) will automatically include only the CSS for components they use.
+
 ## 9.2.0
 
 ### Minor Changes

package/dist/cjs/components/Accordion/Accordion.js

@@ -0,0 +1,398 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Accordion/Accordion.tsx
+var Accordion_exports = {};
+__export(Accordion_exports, {
+  Accordion: () => Accordion
+});
+module.exports = __toCommonJS(Accordion_exports);
+var import_dedupe4 = __toESM(require("classnames/dedupe"));
+var import_react = require("react");
+var import_mobius_hooks = require("@simplybusiness/mobius-hooks");
+
+// src/components/Accordion/AccordionLink.tsx
+var import_dedupe3 = __toESM(require("classnames/dedupe"));
+
+// src/components/Flex/Flex.tsx
+var import_dedupe = __toESM(require("classnames/dedupe"));
+
+// src/utils/filterUndefinedProps.ts
+var filterUndefinedProps = (props) => {
+  const filteredProps = {};
+  Object.keys(props).forEach((key) => {
+    if (props[key] !== void 0) {
+      filteredProps[key] = props[key];
+    }
+  });
+  return filteredProps;
+};
+
+// src/utils/getSpacingValue.ts
+var getSpacingValue = (padding) => {
+  if (typeof padding === "string") {
+    return `var(--size-${padding})`;
+  }
+  if (typeof padding === "number") {
+    return `${padding}px`;
+  }
+  return void 0;
+};
+
+// src/components/Flex/propUtils.ts
+var buildFlexStyles = (props) => {
+  const {
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap
+  } = props;
+  const styleProps = {
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap: getSpacingValue(gap),
+    columnGap: getSpacingValue(columnGap),
+    rowGap: getSpacingValue(rowGap)
+  };
+  return filterUndefinedProps(styleProps);
+};
+var splitProps = (props) => {
+  const {
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+    ...otherProps
+  } = props;
+  return [
+    {
+      flexDirection,
+      flexWrap,
+      flexGrow,
+      flex,
+      justifyContent,
+      alignItems,
+      alignContent,
+      gap,
+      rowGap,
+      columnGap
+    },
+    otherProps
+  ];
+};
+
+// src/components/Flex/Flex.tsx
+var import_Flex = require("@simplybusiness/mobius/src/components/Flex/Flex.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Flex = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    style,
+    className,
+    ...otherProps
+  } = props;
+  const classes = (0, import_dedupe.default)("mobius", "mobius-flex", className);
+  const [styleProps, restProps] = splitProps(otherProps);
+  const flexStyles = buildFlexStyles(styleProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Element,
+    {
+      ref,
+      style: {
+        ...flexStyles,
+        ...style
+      },
+      className: classes,
+      ...restProps
+    }
+  );
+};
+Flex.displayName = "Flex";
+
+// src/components/Icon/Icon.tsx
+var import_dedupe2 = __toESM(require("classnames/dedupe"));
+var import_Icon = require("@simplybusiness/mobius/src/components/Icon/Icon.css");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ICON_PREFIX = "mobius-icon";
+var capitaliseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+function Icon({
+  ref,
+  icon,
+  className,
+  size = "xs",
+  color,
+  fixedWidth,
+  spin,
+  spinReverse,
+  title,
+  ...otherProps
+}) {
+  if (!icon) {
+    throw new Error("Must specify icon object");
+  }
+  const classes = (0, import_dedupe2.default)(
+    "mobius",
+    "mobius-icon",
+    `svg-inline--${ICON_PREFIX}`,
+    `--size-${size}`,
+    className,
+    {
+      [`${ICON_PREFIX}-fw`]: fixedWidth,
+      [`${ICON_PREFIX}-spin`]: spin || spinReverse,
+      [`${ICON_PREFIX}-spin-reverse`]: spinReverse
+    }
+  );
+  const { iconName, width, height, svgPathData } = icon;
+  const formattedIconName = iconName.split("-").join(" ");
+  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;
+  const titleText = title || defaultTitle;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      ref,
+      focusable: "false",
+      "data-icon": iconName,
+      className: classes,
+      role: "img",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${width} ${height}`,
+      style: { color },
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: titleText }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", d: svgPathData })
+      ]
+    }
+  );
+}
+
+// src/components/Accordion/AccordionLink.tsx
+var import_icons = require("@simplybusiness/icons");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AccordionLink = ({
+  text,
+  elementType: LinkElement = "span",
+  toggle,
+  onClick,
+  headerChildren,
+  ariaExpanded,
+  accordionId,
+  contentId
+}) => {
+  const linkClasses = (0, import_dedupe3.default)("mobius-accordion__link", {
+    "--is-open": ariaExpanded
+  });
+  const iconClasses = (0, import_dedupe3.default)("mobius-accordion__link-icon", {
+    "--is-open": ariaExpanded
+  });
+  const handleOnClick = (e) => {
+    if (onClick) {
+      onClick(e);
+    }
+    toggle();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      toggle();
+    }
+  };
+  if (headerChildren) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      Flex,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        className: "mobius-accordion__header",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              id: accordionId,
+              className: linkClasses,
+              onClick: handleOnClick,
+              onKeyDown: handleKeyDown,
+              role: "button",
+              tabIndex: 0,
+              "aria-expanded": !!ariaExpanded,
+              "aria-controls": contentId,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkElement, { className: "mobius-accordion__link-text", children: text }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon: import_icons.chevronDown, className: iconClasses })
+              ]
+            }
+          ),
+          headerChildren
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      id: accordionId,
+      className: linkClasses,
+      onClick: handleOnClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": !!ariaExpanded,
+      "aria-controls": contentId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkElement, { className: "mobius-accordion__link-text", children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon: import_icons.chevronDown, className: iconClasses })
+      ]
+    }
+  );
+};
+
+// src/components/Accordion/Accordion.tsx
+var import_Accordion = require("@simplybusiness/mobius/src/components/Accordion/Accordion.css");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Accordion = ({ ref, ...props }) => {
+  const {
+    showText = "See more",
+    hideText = "See less",
+    headerPosition = "top",
+    startOpen = false,
+    linkElementType,
+    onClick,
+    onOpen,
+    onClose,
+    onChange = () => {
+    },
+    headerChildren,
+    ...rest
+  } = props;
+  const [accordionState, setAccordionState] = (0, import_react.useState)({
+    open: startOpen,
+    withAnimation: false
+  });
+  const prefersReducedMotion = (0, import_mobius_hooks.usePrefersReducedMotion)();
+  const containerClasses = (0, import_dedupe4.default)(
+    "mobius",
+    "mobius-accordion",
+    props.className,
+    {
+      "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
+      "--is-open": accordionState.open
+    }
+  );
+  const contentContainerClasses = (0, import_dedupe4.default)(
+    "mobius-accordion__content-container",
+    {
+      "--is-open": accordionState.open
+    }
+  );
+  const contentClasses = (0, import_dedupe4.default)("mobius-accordion__content", {
+    "--is-open": accordionState.open
+  });
+  const linkText = accordionState.open ? hideText : showText;
+  const handleChange = () => {
+    if (!accordionState.open && onOpen) {
+      onOpen();
+    }
+    if (accordionState.open && onClose) {
+      onClose();
+    }
+    if (onChange) {
+      onChange(!accordionState.open);
+    }
+    setAccordionState({
+      open: !accordionState.open,
+      withAnimation: true
+    });
+  };
+  (0, import_react.useEffect)(() => {
+    setAccordionState({
+      open: startOpen,
+      withAnimation: true
+    });
+  }, [startOpen]);
+  const baseId = (0, import_react.useId)();
+  const accordionId = `accordion-header-${baseId}`;
+  const contentId = `accordion-panel-${baseId}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, ...rest, className: containerClasses, children: [
+    headerPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      AccordionLink,
+      {
+        text: linkText,
+        elementType: linkElementType,
+        toggle: handleChange,
+        onClick,
+        ariaExpanded: accordionState.open,
+        headerChildren,
+        accordionId,
+        contentId
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        id: contentId,
+        className: contentContainerClasses,
+        "aria-hidden": !accordionState.open,
+        "aria-labelledby": accordionId,
+        role: "region",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: contentClasses, children: props.children })
+      }
+    ),
+    headerPosition === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      AccordionLink,
+      {
+        text: linkText,
+        toggle: handleChange,
+        onClick,
+        ariaExpanded: accordionState.open,
+        headerChildren,
+        accordionId,
+        contentId
+      }
+    )
+  ] });
+};
+Accordion.displayName = "Accordion";
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Accordion/Accordion.tsx", "../../../../src/components/Accordion/AccordionLink.tsx", "../../../../src/components/Flex/Flex.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/getSpacingValue.ts", "../../../../src/components/Flex/propUtils.ts", "../../../../src/components/Icon/Icon.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport { useEffect, useState, useId } from \"react\";\nimport { usePrefersReducedMotion } from \"@simplybusiness/mobius-hooks\";\nimport type { DOMProps } from \"../../types\";\n\nimport type {\n  AccordionElementType,\n  AccordionLinkElementType,\n} from \"./AccordionLink\";\nimport { AccordionLink } from \"./AccordionLink\";\nimport \"./Accordion.css\";\n\nexport interface AccordionProps\n  extends DOMProps, RefAttributes<AccordionElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Link text to show accordion content */\n  showText?: string | ReactNode;\n  /** Link text to hide accordion content */\n  hideText?: string | ReactNode;\n  /** Whether header is above or below content */\n  headerPosition?: \"top\" | \"bottom\";\n  /** Whether to expand the accordion initially */\n  startOpen?: boolean | undefined;\n  /** Semantic heading for title link (default is span) */\n  linkElementType?: AccordionLinkElementType;\n  /** Callback that fires when the accordion link is clicked (fires before toggle) */\n  onClick?: (e?: React.MouseEvent) => void;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Callback that fires each time the accordion state changes */\n  onChange?: (state: boolean) => void;\n  children?: ReactNode;\n  headerChildren?: ReactNode;\n}\n\nexport const Accordion = ({ ref, ...props }: AccordionProps) => {\n  const {\n    showText = \"See more\",\n    hideText = \"See less\",\n    headerPosition = \"top\",\n    startOpen = false,\n    linkElementType,\n    onClick,\n    onOpen,\n    onClose,\n    onChange = () => {},\n    headerChildren,\n    ...rest\n  } = props;\n\n  const [accordionState, setAccordionState] = useState({\n    open: startOpen,\n    withAnimation: false,\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius-accordion\",\n    props.className,\n    {\n      \"--should-animate\": accordionState.withAnimation && !prefersReducedMotion,\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentContainerClasses = classNames(\n    \"mobius-accordion__content-container\",\n    {\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentClasses = classNames(\"mobius-accordion__content\", {\n    \"--is-open\": accordionState.open,\n  });\n\n  const linkText = accordionState.open ? hideText : showText;\n\n  const handleChange = () => {\n    // Fire events\n    if (!accordionState.open && onOpen) {\n      onOpen();\n    }\n    if (accordionState.open && onClose) {\n      onClose();\n    }\n    if (onChange) {\n      onChange(!accordionState.open);\n    }\n    setAccordionState({\n      open: !accordionState.open,\n      withAnimation: true,\n    });\n  };\n\n  useEffect(() => {\n    setAccordionState({\n      open: startOpen,\n      withAnimation: true,\n    });\n  }, [startOpen]);\n\n  // Generate unique IDs for accessibility\n  const baseId = useId();\n  const accordionId = `accordion-header-${baseId}`;\n  const contentId = `accordion-panel-${baseId}`;\n\n  return (\n    <div ref={ref} {...rest} className={containerClasses}>\n      {headerPosition === \"top\" && (\n        <AccordionLink\n          text={linkText}\n          elementType={linkElementType}\n          toggle={handleChange}\n          onClick={onClick}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n          accordionId={accordionId}\n          contentId={contentId}\n        />\n      )}\n      <div\n        id={contentId}\n        className={contentContainerClasses}\n        aria-hidden={!accordionState.open}\n        aria-labelledby={accordionId}\n        role=\"region\"\n      >\n        <div className={contentClasses}>{props.children}</div>\n      </div>\n      {headerPosition === \"bottom\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          onClick={onClick}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n          accordionId={accordionId}\n          contentId={contentId}\n        />\n      )}\n    </div>\n  );\n};\n\nAccordion.displayName = \"Accordion\";\n", "import type { KeyboardEvent, ReactNode } from \"react\";\nimport type { DOMProps } from \"../../types\";\nimport classNames from \"classnames/dedupe\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\nimport { chevronDown } from \"@simplybusiness/icons\";\n\nexport type AccordionLinkElementType =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"span\";\nexport type AccordionElementType = HTMLDivElement;\n\nexport interface AccordionLinkProps extends DOMProps {\n  text: string | ReactNode;\n  elementType?: AccordionLinkElementType;\n  onClick?: (e?: React.MouseEvent) => void;\n  toggle: () => void;\n  headerChildren?: ReactNode;\n  ariaExpanded: boolean | undefined;\n  accordionId: string;\n  contentId: string;\n}\n\nexport const AccordionLink = ({\n  text,\n  elementType: LinkElement = \"span\",\n  toggle,\n  onClick,\n  headerChildren,\n  ariaExpanded,\n  accordionId,\n  contentId,\n}: AccordionLinkProps) => {\n  const linkClasses = classNames(\"mobius-accordion__link\", {\n    \"--is-open\": ariaExpanded,\n  });\n  const iconClasses = classNames(\"mobius-accordion__link-icon\", {\n    \"--is-open\": ariaExpanded,\n  });\n  const handleOnClick = (e?: React.MouseEvent): void => {\n    if (onClick) {\n      onClick(e);\n    }\n    toggle();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \" || e.key === \"Enter\") {\n      toggle();\n    }\n  };\n\n  if (headerChildren) {\n    return (\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className=\"mobius-accordion__header\"\n      >\n        <div\n          id={accordionId}\n          className={linkClasses}\n          onClick={handleOnClick}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n          aria-expanded={!!ariaExpanded}\n          aria-controls={contentId}\n        >\n          <LinkElement className=\"mobius-accordion__link-text\">\n            {text}\n          </LinkElement>\n          <Icon icon={chevronDown} className={iconClasses} />\n        </div>\n        {headerChildren}\n      </Flex>\n    );\n  }\n\n  return (\n    <div\n      id={accordionId}\n      className={linkClasses}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-expanded={!!ariaExpanded}\n      aria-controls={contentId}\n    >\n      <LinkElement className=\"mobius-accordion__link-text\">{text}</LinkElement>\n      <Icon icon={chevronDown} className={iconClasses} />\n    </div>\n  );\n};\n", "import classNames from \"classnames/dedupe\";\nimport type { FlexProps } from \"./types\";\nimport { buildFlexStyles, splitProps } from \"./propUtils\";\nimport \"./Flex.css\";\n\nconst Flex = ({ ref, ...props }: FlexProps) => {\n  const {\n    elementType: Element = \"div\",\n    style,\n    className,\n    ...otherProps\n  } = props;\n  const classes = classNames(\"mobius\", \"mobius-flex\", className);\n\n  const [styleProps, restProps] = splitProps(otherProps);\n  const flexStyles = buildFlexStyles(styleProps);\n\n  return (\n    <Element\n      ref={ref}\n      style={{\n        ...flexStyles,\n        ...style,\n      }}\n      className={classes}\n      {...restProps}\n    />\n  );\n};\n\nFlex.displayName = \"Flex\";\nexport { Flex };\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", "import { getSpacingValue } from \"../../utils\";\nimport { filterUndefinedProps } from \"../../utils/filterUndefinedProps\";\nimport type { FlexNonStyleProps, FlexProps, FlexStyleProps } from \"./types\";\n\nexport const buildFlexStyles = (props: FlexStyleProps) => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n  } = props;\n\n  const styleProps = {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap: getSpacingValue(gap),\n    columnGap: getSpacingValue(columnGap),\n    rowGap: getSpacingValue(rowGap),\n  };\n\n  return filterUndefinedProps(styleProps);\n};\n\nexport const splitProps = (\n  props: FlexProps,\n): [FlexStyleProps, FlexNonStyleProps] => {\n  const {\n    flexDirection,\n    flexWrap,\n    flexGrow,\n    flex,\n    justifyContent,\n    alignItems,\n    alignContent,\n    gap,\n    rowGap,\n    columnGap,\n    ...otherProps\n  } = props;\n\n  return [\n    {\n      flexDirection,\n      flexWrap,\n      flexGrow,\n      flex,\n      justifyContent,\n      alignItems,\n      alignContent,\n      gap,\n      rowGap,\n      columnGap,\n    },\n    otherProps,\n  ];\n};\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"],
+  "mappings": "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",
+  "names": ["import_dedupe", "import_dedupe", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames"]
+}