@simplybusiness/mobius 4.16.0 → 5.0.0

package/dist/cjs/components/Divider/Divider.js

@@ -16,14 +16,14 @@ function _interop_require_default(obj) {
     };
 }
 const Divider = ({ "aria-orientation": ariaOrientation = "horizontal", className, ...rest })=>{
-    const classes = (0, _dedupe.default)("mobius", "mobius/Divider", className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-divider", className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: classes,
         role: "separator",
         "aria-orientation": ariaOrientation,
         ...rest,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            className: "mobius/DividerInner"
+            className: "mobius-divider__inner"
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { AriaAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface DividerProps extends DOMProps {\n  className?: string;\n  \"aria-orientation\"?: AriaAttributes[\"aria-orientation\"];\n}\n\nconst Divider = ({\n  \"aria-orientation\": ariaOrientation = \"horizontal\",\n  className,\n  ...rest\n}: DividerProps) => {\n  const classes = classNames(\"mobius\", \"mobius/Divider\", className);\n\n  return (\n    <div\n      className={classes}\n      role=\"separator\"\n      aria-orientation={ariaOrientation}\n      {...rest}\n    >\n      <div className=\"mobius/DividerInner\" />\n    </div>\n  );\n};\n\nDivider.displayName = \"Divider\";\nexport { Divider };\n"],"names":["Divider","ariaOrientation","className","rest","classes","classNames","div","role","aria-orientation","displayName"],"mappings":";;;;+BA6BSA;;;eAAAA;;;;+DA7Bc;;;;;;AASvB,MAAMA,UAAU,CAAC,EACf,oBAAoBC,kBAAkB,YAAY,EAClDC,SAAS,EACT,GAAGC,MACU;IACb,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,kBAAkBH;IAEvD,qBACE,qBAACI;QACCJ,WAAWE;QACXG,MAAK;QACLC,oBAAkBP;QACjB,GAAGE,IAAI;kBAER,cAAA,qBAACG;YAAIJ,WAAU;;;AAGrB;AAEAF,QAAQS,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { AriaAttributes } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface DividerProps extends DOMProps {\n  className?: string;\n  \"aria-orientation\"?: AriaAttributes[\"aria-orientation\"];\n}\n\nconst Divider = ({\n  \"aria-orientation\": ariaOrientation = \"horizontal\",\n  className,\n  ...rest\n}: DividerProps) => {\n  const classes = classNames(\"mobius\", \"mobius-divider\", className);\n\n  return (\n    <div\n      className={classes}\n      role=\"separator\"\n      aria-orientation={ariaOrientation}\n      {...rest}\n    >\n      <div className=\"mobius-divider__inner\" />\n    </div>\n  );\n};\n\nDivider.displayName = \"Divider\";\nexport { Divider };\n"],"names":["Divider","ariaOrientation","className","rest","classes","classNames","div","role","aria-orientation","displayName"],"mappings":";;;;+BA6BSA;;;eAAAA;;;;+DA7Bc;;;;;;AASvB,MAAMA,UAAU,CAAC,EACf,oBAAoBC,kBAAkB,YAAY,EAClDC,SAAS,EACT,GAAGC,MACU;IACb,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,kBAAkBH;IAEvD,qBACE,qBAACI;QACCJ,WAAWE;QACXG,MAAK;QACLC,oBAAkBP;QACjB,GAAGE,IAAI;kBAER,cAAA,qBAACG;YAAIJ,WAAU;;;AAGrB;AAEAF,QAAQS,WAAW,GAAG"}

package/dist/cjs/components/Drawer/Content.js

@@ -13,7 +13,7 @@ const _react = require("react");
 const Content = /*#__PURE__*/ (0, _react.forwardRef)(({ children, ...otherProps }, ref)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         ref: ref,
         ...otherProps,
-        className: "mobius/DrawerContent",
+        className: "mobius-drawer__content",
         children: children
     }));
 Content.displayName = "Content";

package/dist/cjs/components/Drawer/Content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/Content.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type DivRef = Ref<HTMLDivElement>;\nexport type DivElementType = HTMLDivElement;\nexport interface ContentProps\n  extends DOMProps,\n    RefAttributes<DivElementType>,\n    PropsWithChildren {}\n\nconst Content = forwardRef(\n  ({ children, ...otherProps }: ContentProps, ref: DivRef) => (\n    <div ref={ref} {...otherProps} className=\"mobius/DrawerContent\">\n      {children}\n    </div>\n  ),\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["Content","forwardRef","children","otherProps","ref","div","className","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnByD;AAUlE,MAAMA,wBAAUC,IAAAA,iBAAU,EACxB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAA0B,EAAEC,oBAC1C,qBAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCJ;;AAKPF,QAAQO,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Drawer/Content.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type DivRef = Ref<HTMLDivElement>;\nexport type DivElementType = HTMLDivElement;\nexport interface ContentProps\n  extends DOMProps,\n    RefAttributes<DivElementType>,\n    PropsWithChildren {}\n\nconst Content = forwardRef(\n  ({ children, ...otherProps }: ContentProps, ref: DivRef) => (\n    <div ref={ref} {...otherProps} className=\"mobius-drawer__content\">\n      {children}\n    </div>\n  ),\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["Content","forwardRef","children","otherProps","ref","div","className","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnByD;AAUlE,MAAMA,wBAAUC,IAAAA,iBAAU,EACxB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAA0B,EAAEC,oBAC1C,qBAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCJ;;AAKPF,QAAQO,WAAW,GAAG"}

package/dist/cjs/components/Drawer/Drawer.js

@@ -37,7 +37,7 @@ const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         }
     });
     const hiddenId = `screen-reader-announce-${(0, _react.useId)()}`;
-    const dialogClasses = (0, _dedupe.default)("mobius", "mobius/Drawer", `--${direction}`, className, {
+    const dialogClasses = (0, _dedupe.default)("mobius", "mobius-drawer", `--${direction}`, className, {
         "--should-transition": shouldTransition
     });
     (0, _react.useEffect)(()=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Ref,\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { mergeRefs, supportsDialog } from \"../../utils\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport { DrawerProps } from \"./types\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--drawer-transition-duration\";\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const [shouldTransition, setShouldTransition] = useState(false);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: true,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n  const hiddenId = `screen-reader-announce-${useId()}`;\n\n  const dialogClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": shouldTransition,\n    },\n  );\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      id={useId()}\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={dialogClasses}\n      aria-describedby={hiddenId}\n    >\n      <VisuallyHidden>\n        <div id={hiddenId}>{announce}</div>\n      </VisuallyHidden>\n      <DrawerContext.Provider value={contextValue}>\n        {children}\n      </DrawerContext.Provider>\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","dialogRef","useRef","shouldTransition","setShouldTransition","useState","close","useDialog","transition","isEnabled","CSSVariable","hiddenId","useId","dialogClasses","classNames","useEffect","supportsDialog","contextValue","useMemo","dialog","id","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","DrawerContext","Provider","value","displayName"],"mappings":"AAAA;;;;;+BAyFSA;;;eAAAA;;;;+DAvFc;uBAShB;uBACmB;uBACgB;gCACX;+BACD;;;;;;AAM9B,MAAMC,0BAA0B;AAEhC,MAAMD,uBAASE,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,YAAYC,IAAAA,aAAM,EAA2B;IACnD,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EAAC;IACzD,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1Bf,KAAKS;QACLR;QACAK;QACAC;QACAS,YAAY;YACVC,WAAW;YACXC,aAAarB;QACf;IACF;IACA,MAAMsB,WAAW,CAAC,uBAAuB,EAAEC,IAAAA,YAAK,IAAG,CAAC;IAEpD,MAAMC,gBAAgBC,IAAAA,eAAU,EAC9B,UACA,iBACA,CAAC,EAAE,EAAElB,UAAU,CAAC,EAChBF,WACA;QACE,uBAAuBS;IACzB;IAGFY,IAAAA,gBAAS,EAAC;QACRX,oBAAoBY,IAAAA,qBAAc;IACpC,GAAG,EAAE;IAEL,MAAMC,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACLnB,SAASO;YACTX;QACF,CAAA,GACA;QAACW;QAAOX;KAAW;IAGrB,qBACE,sBAACwB;QACCC,IAAIR,IAAAA,YAAK;QACTpB,KAAK6B,IAAAA,gBAAS,EAAC;YAACpB;YAAWT;SAAI;QAC/B8B,UAAUhB;QACVZ,WAAWmB;QACXU,oBAAkBZ;;0BAElB,qBAACa,8BAAc;0BACb,cAAA,qBAACC;oBAAIL,IAAIT;8BAAWd;;;0BAEtB,qBAAC6B,4BAAa,CAACC,QAAQ;gBAACC,OAAOX;0BAC5BjB;;;;AAIT;AAEAZ,OAAOyC,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Ref,\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { mergeRefs, supportsDialog } from \"../../utils\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport { DrawerProps } from \"./types\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--drawer-transition-duration\";\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const [shouldTransition, setShouldTransition] = useState(false);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: true,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n  const hiddenId = `screen-reader-announce-${useId()}`;\n\n  const dialogClasses = classNames(\n    \"mobius\",\n    \"mobius-drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": shouldTransition,\n    },\n  );\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      id={useId()}\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={dialogClasses}\n      aria-describedby={hiddenId}\n    >\n      <VisuallyHidden>\n        <div id={hiddenId}>{announce}</div>\n      </VisuallyHidden>\n      <DrawerContext.Provider value={contextValue}>\n        {children}\n      </DrawerContext.Provider>\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","dialogRef","useRef","shouldTransition","setShouldTransition","useState","close","useDialog","transition","isEnabled","CSSVariable","hiddenId","useId","dialogClasses","classNames","useEffect","supportsDialog","contextValue","useMemo","dialog","id","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","DrawerContext","Provider","value","displayName"],"mappings":"AAAA;;;;;+BAyFSA;;;eAAAA;;;;+DAvFc;uBAShB;uBACmB;uBACgB;gCACX;+BACD;;;;;;AAM9B,MAAMC,0BAA0B;AAEhC,MAAMD,uBAASE,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,YAAYC,IAAAA,aAAM,EAA2B;IACnD,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EAAC;IACzD,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1Bf,KAAKS;QACLR;QACAK;QACAC;QACAS,YAAY;YACVC,WAAW;YACXC,aAAarB;QACf;IACF;IACA,MAAMsB,WAAW,CAAC,uBAAuB,EAAEC,IAAAA,YAAK,IAAG,CAAC;IAEpD,MAAMC,gBAAgBC,IAAAA,eAAU,EAC9B,UACA,iBACA,CAAC,EAAE,EAAElB,UAAU,CAAC,EAChBF,WACA;QACE,uBAAuBS;IACzB;IAGFY,IAAAA,gBAAS,EAAC;QACRX,oBAAoBY,IAAAA,qBAAc;IACpC,GAAG,EAAE;IAEL,MAAMC,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACLnB,SAASO;YACTX;QACF,CAAA,GACA;QAACW;QAAOX;KAAW;IAGrB,qBACE,sBAACwB;QACCC,IAAIR,IAAAA,YAAK;QACTpB,KAAK6B,IAAAA,gBAAS,EAAC;YAACpB;YAAWT;SAAI;QAC/B8B,UAAUhB;QACVZ,WAAWmB;QACXU,oBAAkBZ;;0BAElB,qBAACa,8BAAc;0BACb,cAAA,qBAACC;oBAAIL,IAAIT;8BAAWd;;;0BAEtB,qBAAC6B,4BAAa,CAACC,QAAQ;gBAACC,OAAOX;0BAC5BjB;;;;AAIT;AAEAZ,OAAOyC,WAAW,GAAG"}

package/dist/cjs/components/Drawer/Header.js

@@ -19,14 +19,14 @@ const Header = /*#__PURE__*/ (0, _react.forwardRef)(({ children, ...otherProps }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("header", {
         ref: ref,
         ...otherProps,
-        className: "mobius/DrawerHeader",
+        className: "mobius-drawer__header",
         children: [
             children,
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Button.Button, {
                 "aria-label": "Close",
                 variant: "basic",
                 onPress: onClose,
-                className: "mobius/DrawerClose",
+                className: "mobius-drawer__close",
                 size: "sm",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {

package/dist/cjs/components/Drawer/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/Header.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { useDrawer } from \"./useDrawer\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType>,\n    PropsWithChildren {}\n\nconst Header = forwardRef(\n  ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {\n    const { onClose, closeLabel } = useDrawer();\n\n    return (\n      <header ref={ref} {...otherProps} className=\"mobius/DrawerHeader\">\n        {children}\n        <Button\n          aria-label=\"Close\"\n          variant=\"basic\"\n          onPress={onClose}\n          className=\"mobius/DrawerClose\"\n          size=\"sm\"\n        >\n          <Icon icon={cross} /> {closeLabel}\n        </Button>\n      </header>\n    );\n  },\n);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["Header","forwardRef","children","otherProps","ref","onClose","closeLabel","useDrawer","header","className","Button","aria-label","variant","onPress","size","Icon","icon","cross","displayName"],"mappings":";;;;+BAsCSA;;;eAAAA;;;;uBAtCyD;uBAE5C;wBAEC;sBACF;2BACK;AAU1B,MAAMA,uBAASC,IAAAA,iBAAU,EACvB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAAyB,EAAEC;IACzC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,IAAAA,oBAAS;IAEzC,qBACE,sBAACC;QAAOJ,KAAKA;QAAM,GAAGD,UAAU;QAAEM,WAAU;;YACzCP;0BACD,sBAACQ,cAAM;gBACLC,cAAW;gBACXC,SAAQ;gBACRC,SAASR;gBACTI,WAAU;gBACVK,MAAK;;kCAEL,qBAACC,UAAI;wBAACC,MAAMC,YAAK;;oBAAI;oBAAEX;;;;;AAI/B;AAGFN,OAAOkB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Drawer/Header.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { useDrawer } from \"./useDrawer\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType>,\n    PropsWithChildren {}\n\nconst Header = forwardRef(\n  ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {\n    const { onClose, closeLabel } = useDrawer();\n\n    return (\n      <header ref={ref} {...otherProps} className=\"mobius-drawer__header\">\n        {children}\n        <Button\n          aria-label=\"Close\"\n          variant=\"basic\"\n          onPress={onClose}\n          className=\"mobius-drawer__close\"\n          size=\"sm\"\n        >\n          <Icon icon={cross} /> {closeLabel}\n        </Button>\n      </header>\n    );\n  },\n);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["Header","forwardRef","children","otherProps","ref","onClose","closeLabel","useDrawer","header","className","Button","aria-label","variant","onPress","size","Icon","icon","cross","displayName"],"mappings":";;;;+BAsCSA;;;eAAAA;;;;uBAtCyD;uBAE5C;wBAEC;sBACF;2BACK;AAU1B,MAAMA,uBAASC,IAAAA,iBAAU,EACvB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAAyB,EAAEC;IACzC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,IAAAA,oBAAS;IAEzC,qBACE,sBAACC;QAAOJ,KAAKA;QAAM,GAAGD,UAAU;QAAEM,WAAU;;YACzCP;0BACD,sBAACQ,cAAM;gBACLC,cAAW;gBACXC,SAAQ;gBACRC,SAASR;gBACTI,WAAU;gBACVK,MAAK;;kCAEL,qBAACC,UAAI;wBAACC,MAAMC,YAAK;;oBAAI;oBAAEX;;;;;AAI/B;AAGFN,OAAOkB,WAAW,GAAG"}

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -24,9 +24,9 @@ const DropdownMenu = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const [activeId, setActiveId] = (0, _react.useState)(null);
     const numberOfItems = _react.Children.count(children);
     const { buttonProps, itemProps, isOpen: open, setIsOpen } = (0, _reactaccessibledropdownmenuhook.default)(numberOfItems);
-    const classes = (0, _dedupe.default)("mobius", "mobius/DropdownMenu", otherProps.className);
-    const triggerClasses = (0, _dedupe.default)("mobius", "mobius/DropdownMenuTrigger");
-    const listClasses = (0, _dedupe.default)("mobius", "mobius/DropdownMenuList", {
+    const classes = (0, _dedupe.default)("mobius", "mobius-dropdown-menu", otherProps.className);
+    const triggerClasses = (0, _dedupe.default)("mobius", "mobius-dropdown-menu__trigger");
+    const listClasses = (0, _dedupe.default)("mobius", "mobius-dropdown-menu__list", {
         "--is-open": open
     });
     const handleChildClick = ({ onClick }, index)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  RefAttributes,\n  ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n  useState,\n  ReactElement,\n} from \"react\";\nimport useDropdownMenu from \"react-accessible-dropdown-menu-hook\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nimport { Button } from \"../Button\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type DropdownMenuElementType = HTMLElement;\n\nexport interface DropdownMenuProps\n  extends DOMProps,\n    RefAttributes<DropdownMenuElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  label?: string;\n  trigger?: ReactElement;\n}\n\nexport type DropdownMenuRef = Ref<DropdownMenuElementType>;\n\ntype ChildClickProps = {\n  onClick?: () => void;\n};\n\nconst DropdownMenu: ForwardedRefComponent<\n  DropdownMenuProps,\n  DropdownMenuElementType\n> = forwardRef((props: DropdownMenuProps, ref: DropdownMenuRef) => {\n  const {\n    elementType: Element = \"nav\",\n    trigger,\n    label = \"Menu\",\n    children,\n    ...otherProps\n  } = props;\n  const [activeId, setActiveId] = useState<number | null>(null);\n  const numberOfItems = Children.count(children);\n  const {\n    buttonProps,\n    itemProps,\n    isOpen: open,\n    setIsOpen,\n  } = useDropdownMenu(numberOfItems);\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/DropdownMenu\",\n    otherProps.className,\n  );\n  const triggerClasses = classNames(\"mobius\", \"mobius/DropdownMenuTrigger\");\n  const listClasses = classNames(\"mobius\", \"mobius/DropdownMenuList\", {\n    \"--is-open\": open,\n  });\n\n  const handleChildClick = ({ onClick }: ChildClickProps, index: number) => {\n    setActiveId(index);\n    setIsOpen(false);\n\n    if (onClick) {\n      onClick();\n    }\n  };\n\n  return (\n    <Element ref={ref} {...otherProps} className={classes}>\n      {trigger ? (\n        cloneElement(trigger, {\n          className: triggerClasses,\n          open,\n          label,\n          ...buttonProps,\n        })\n      ) : (\n        <Button className={triggerClasses} {...buttonProps}>\n          {label}\n        </Button>\n      )}\n      <ul className={listClasses} role=\"menu\">\n        {Children.map(children, (child, index) => {\n          if (isValidElement(child)) {\n            return cloneElement(child, {\n              onClick: () => handleChildClick(child.props, index),\n              active: index === activeId,\n              ...itemProps[index],\n            } as any);\n          }\n\n          return child;\n        })}\n      </ul>\n    </Element>\n  );\n});\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n"],"names":["DropdownMenu","forwardRef","props","ref","elementType","Element","trigger","label","children","otherProps","activeId","setActiveId","useState","numberOfItems","Children","count","buttonProps","itemProps","isOpen","open","setIsOpen","useDropdownMenu","classes","classNames","className","triggerClasses","listClasses","handleChildClick","onClick","index","cloneElement","Button","ul","role","map","child","isValidElement","active","displayName"],"mappings":"AAAA;;;;;+BA8GSA;;;eAAAA;;;;uBAlGF;wFACqB;+DACL;wBAGA;;;;;;AAsBvB,MAAMA,6BAGFC,IAAAA,iBAAU,EAAC,CAACC,OAA0BC;IACxC,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,QAAQ,MAAM,EACdC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAM,CAACQ,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAgB;IACxD,MAAMC,gBAAgBC,eAAQ,CAACC,KAAK,CAACP;IACrC,MAAM,EACJQ,WAAW,EACXC,SAAS,EACTC,QAAQC,IAAI,EACZC,SAAS,EACV,GAAGC,IAAAA,wCAAe,EAACR;IAEpB,MAAMS,UAAUC,IAAAA,eAAU,EACxB,UACA,uBACAd,WAAWe,SAAS;IAEtB,MAAMC,iBAAiBF,IAAAA,eAAU,EAAC,UAAU;IAC5C,MAAMG,cAAcH,IAAAA,eAAU,EAAC,UAAU,2BAA2B;QAClE,aAAaJ;IACf;IAEA,MAAMQ,mBAAmB,CAAC,EAAEC,OAAO,EAAmB,EAAEC;QACtDlB,YAAYkB;QACZT,UAAU;QAEV,IAAIQ,SAAS;YACXA;QACF;IACF;IAEA,qBACE,sBAACvB;QAAQF,KAAKA;QAAM,GAAGM,UAAU;QAAEe,WAAWF;;YAC3ChB,wBACCwB,IAAAA,mBAAY,EAACxB,SAAS;gBACpBkB,WAAWC;gBACXN;gBACAZ;gBACA,GAAGS,WAAW;YAChB,mBAEA,qBAACe,cAAM;gBAACP,WAAWC;gBAAiB,GAAGT,WAAW;0BAC/CT;;0BAGL,qBAACyB;gBAAGR,WAAWE;gBAAaO,MAAK;0BAC9BnB,eAAQ,CAACoB,GAAG,CAAC1B,UAAU,CAAC2B,OAAON;oBAC9B,kBAAIO,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOL,IAAAA,mBAAY,EAACK,OAAO;4BACzBP,SAAS,IAAMD,iBAAiBQ,MAAMjC,KAAK,EAAE2B;4BAC7CQ,QAAQR,UAAUnB;4BAClB,GAAGO,SAAS,CAACY,MAAM;wBACrB;oBACF;oBAEA,OAAOM;gBACT;;;;AAIR;AAEAnC,aAAasC,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  RefAttributes,\n  ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n  useState,\n  ReactElement,\n} from \"react\";\nimport useDropdownMenu from \"react-accessible-dropdown-menu-hook\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nimport { Button } from \"../Button\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type DropdownMenuElementType = HTMLElement;\n\nexport interface DropdownMenuProps\n  extends DOMProps,\n    RefAttributes<DropdownMenuElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  label?: string;\n  trigger?: ReactElement;\n}\n\nexport type DropdownMenuRef = Ref<DropdownMenuElementType>;\n\ntype ChildClickProps = {\n  onClick?: () => void;\n};\n\nconst DropdownMenu: ForwardedRefComponent<\n  DropdownMenuProps,\n  DropdownMenuElementType\n> = forwardRef((props: DropdownMenuProps, ref: DropdownMenuRef) => {\n  const {\n    elementType: Element = \"nav\",\n    trigger,\n    label = \"Menu\",\n    children,\n    ...otherProps\n  } = props;\n  const [activeId, setActiveId] = useState<number | null>(null);\n  const numberOfItems = Children.count(children);\n  const {\n    buttonProps,\n    itemProps,\n    isOpen: open,\n    setIsOpen,\n  } = useDropdownMenu(numberOfItems);\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-dropdown-menu\",\n    otherProps.className,\n  );\n  const triggerClasses = classNames(\"mobius\", \"mobius-dropdown-menu__trigger\");\n  const listClasses = classNames(\"mobius\", \"mobius-dropdown-menu__list\", {\n    \"--is-open\": open,\n  });\n\n  const handleChildClick = ({ onClick }: ChildClickProps, index: number) => {\n    setActiveId(index);\n    setIsOpen(false);\n\n    if (onClick) {\n      onClick();\n    }\n  };\n\n  return (\n    <Element ref={ref} {...otherProps} className={classes}>\n      {trigger ? (\n        cloneElement(trigger, {\n          className: triggerClasses,\n          open,\n          label,\n          ...buttonProps,\n        })\n      ) : (\n        <Button className={triggerClasses} {...buttonProps}>\n          {label}\n        </Button>\n      )}\n      <ul className={listClasses} role=\"menu\">\n        {Children.map(children, (child, index) => {\n          if (isValidElement(child)) {\n            return cloneElement(child, {\n              onClick: () => handleChildClick(child.props, index),\n              active: index === activeId,\n              ...itemProps[index],\n            } as any);\n          }\n\n          return child;\n        })}\n      </ul>\n    </Element>\n  );\n});\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n"],"names":["DropdownMenu","forwardRef","props","ref","elementType","Element","trigger","label","children","otherProps","activeId","setActiveId","useState","numberOfItems","Children","count","buttonProps","itemProps","isOpen","open","setIsOpen","useDropdownMenu","classes","classNames","className","triggerClasses","listClasses","handleChildClick","onClick","index","cloneElement","Button","ul","role","map","child","isValidElement","active","displayName"],"mappings":"AAAA;;;;;+BA8GSA;;;eAAAA;;;;uBAlGF;wFACqB;+DACL;wBAGA;;;;;;AAsBvB,MAAMA,6BAGFC,IAAAA,iBAAU,EAAC,CAACC,OAA0BC;IACxC,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,QAAQ,MAAM,EACdC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAM,CAACQ,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAgB;IACxD,MAAMC,gBAAgBC,eAAQ,CAACC,KAAK,CAACP;IACrC,MAAM,EACJQ,WAAW,EACXC,SAAS,EACTC,QAAQC,IAAI,EACZC,SAAS,EACV,GAAGC,IAAAA,wCAAe,EAACR;IAEpB,MAAMS,UAAUC,IAAAA,eAAU,EACxB,UACA,wBACAd,WAAWe,SAAS;IAEtB,MAAMC,iBAAiBF,IAAAA,eAAU,EAAC,UAAU;IAC5C,MAAMG,cAAcH,IAAAA,eAAU,EAAC,UAAU,8BAA8B;QACrE,aAAaJ;IACf;IAEA,MAAMQ,mBAAmB,CAAC,EAAEC,OAAO,EAAmB,EAAEC;QACtDlB,YAAYkB;QACZT,UAAU;QAEV,IAAIQ,SAAS;YACXA;QACF;IACF;IAEA,qBACE,sBAACvB;QAAQF,KAAKA;QAAM,GAAGM,UAAU;QAAEe,WAAWF;;YAC3ChB,wBACCwB,IAAAA,mBAAY,EAACxB,SAAS;gBACpBkB,WAAWC;gBACXN;gBACAZ;gBACA,GAAGS,WAAW;YAChB,mBAEA,qBAACe,cAAM;gBAACP,WAAWC;gBAAiB,GAAGT,WAAW;0BAC/CT;;0BAGL,qBAACyB;gBAAGR,WAAWE;gBAAaO,MAAK;0BAC9BnB,eAAQ,CAACoB,GAAG,CAAC1B,UAAU,CAAC2B,OAAON;oBAC9B,kBAAIO,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOL,IAAAA,mBAAY,EAACK,OAAO;4BACzBP,SAAS,IAAMD,iBAAiBQ,MAAMjC,KAAK,EAAE2B;4BAC7CQ,QAAQR,UAAUnB;4BAClB,GAAGO,SAAS,CAACY,MAAM;wBACrB;oBACF;oBAEA,OAAOM;gBACT;;;;AAIR;AAEAnC,aAAasC,WAAW,GAAG"}

package/dist/cjs/components/DropdownMenu/Item.js

@@ -18,7 +18,7 @@ function _interop_require_default(obj) {
 }
 const Item = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { elementType: Element = "li", active, onClick, children, ...otherProps } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/DropdownMenuItem", {
+    const classes = (0, _dedupe.default)("mobius", "mobius-dropdown-menu__item", {
         "--is-active": active
     }, otherProps.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {

package/dist/cjs/components/DropdownMenu/Item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DropdownMenu/Item.tsx"],"sourcesContent":["import {\n  Ref,\n  forwardRef,\n  RefAttributes,\n  ReactNode,\n  cloneElement,\n  ReactElement,\n  isValidElement,\n  Children,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n  elementType?: string | React.ElementType;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  active?: boolean;\n  children?: ReactNode;\n  onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(\n  (props: ItemProps, ref: ItemRef) => {\n    const {\n      elementType: Element = \"li\",\n      active,\n      onClick,\n      children,\n      ...otherProps\n    } = props;\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/DropdownMenuItem\",\n      { \"--is-active\": active },\n      otherProps.className,\n    );\n\n    return (\n      <Element ref={ref} onClick={onClick} {...otherProps}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            const childClasses = classNames(child.props.className, classes);\n            return cloneElement(child as ReactElement, {\n              className: childClasses,\n            });\n          }\n\n          return <span className={classes}>{child}</span>;\n        })}\n      </Element>\n    );\n  },\n);\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],"names":["Item","forwardRef","props","ref","elementType","Element","active","onClick","children","otherProps","classes","classNames","className","Children","map","child","isValidElement","childClasses","cloneElement","span","displayName"],"mappings":";;;;+BA6DSA;;;eAAAA;;;;uBApDF;+DACgB;;;;;;AAiBvB,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,IAAI,EAC3BC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAMQ,UAAUC,IAAAA,eAAU,EACxB,UACA,2BACA;QAAE,eAAeL;IAAO,GACxBG,WAAWG,SAAS;IAGtB,qBACE,qBAACP;QAAQF,KAAKA;QAAKI,SAASA;QAAU,GAAGE,UAAU;kBAChDI,eAAQ,CAACC,GAAG,CAACN,UAAUO,CAAAA;YACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;gBACzB,MAAME,eAAeN,IAAAA,eAAU,EAACI,MAAMb,KAAK,CAACU,SAAS,EAAEF;gBACvD,qBAAOQ,IAAAA,mBAAY,EAACH,OAAuB;oBACzCH,WAAWK;gBACb;YACF;YAEA,qBAAO,qBAACE;gBAAKP,WAAWF;0BAAUK;;QACpC;;AAGN;AAGFf,KAAKoB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/DropdownMenu/Item.tsx"],"sourcesContent":["import {\n  Ref,\n  forwardRef,\n  RefAttributes,\n  ReactNode,\n  cloneElement,\n  ReactElement,\n  isValidElement,\n  Children,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n  elementType?: string | React.ElementType;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  active?: boolean;\n  children?: ReactNode;\n  onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(\n  (props: ItemProps, ref: ItemRef) => {\n    const {\n      elementType: Element = \"li\",\n      active,\n      onClick,\n      children,\n      ...otherProps\n    } = props;\n    const classes = classNames(\n      \"mobius\",\n      \"mobius-dropdown-menu__item\",\n      { \"--is-active\": active },\n      otherProps.className,\n    );\n\n    return (\n      <Element ref={ref} onClick={onClick} {...otherProps}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            const childClasses = classNames(child.props.className, classes);\n            return cloneElement(child as ReactElement, {\n              className: childClasses,\n            });\n          }\n\n          return <span className={classes}>{child}</span>;\n        })}\n      </Element>\n    );\n  },\n);\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],"names":["Item","forwardRef","props","ref","elementType","Element","active","onClick","children","otherProps","classes","classNames","className","Children","map","child","isValidElement","childClasses","cloneElement","span","displayName"],"mappings":";;;;+BA6DSA;;;eAAAA;;;;uBApDF;+DACgB;;;;;;AAiBvB,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,IAAI,EAC3BC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAMQ,UAAUC,IAAAA,eAAU,EACxB,UACA,8BACA;QAAE,eAAeL;IAAO,GACxBG,WAAWG,SAAS;IAGtB,qBACE,qBAACP;QAAQF,KAAKA;QAAKI,SAASA;QAAU,GAAGE,UAAU;kBAChDI,eAAQ,CAACC,GAAG,CAACN,UAAUO,CAAAA;YACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;gBACzB,MAAME,eAAeN,IAAAA,eAAU,EAACI,MAAMb,KAAK,CAACU,SAAS,EAAEF;gBACvD,qBAAOQ,IAAAA,mBAAY,EAACH,OAAuB;oBACzCH,WAAWK;gBACb;YACF;YAEA,qBAAO,qBAACE;gBAAKP,WAAWF;0BAAUK;;QACpC;;AAGN;AAGFf,KAAKoB,WAAW,GAAG"}

package/dist/cjs/components/ErrorMessage/ErrorMessage.js

@@ -10,26 +10,29 @@ Object.defineProperty(exports, "ErrorMessage", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _icons = require("@simplybusiness/icons");
 const _Text = require("../Text");
+const _Icon = require("../Icon");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const ErrorMessage = ({ id, errorMessage, className })=>{
-    const classes = (0, _dedupe.default)("mobius", "mobius/ErrorMessage", className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-error-message", className);
     if (!errorMessage) return null;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         id: id,
         className: classes,
         "data-testid": "ErrorMessage",
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                className: "mobius/ErrorIcon"
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
+                icon: _icons.error,
+                className: "mobius-error-message__icon"
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.Text, {
                 elementType: "span",
-                className: "mobius/ErrorText",
+                className: "mobius-error-message__text",
                 children: errorMessage
             })
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ErrorMessage/ErrorMessage.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { Text } from \"../Text\";\n\nexport interface ErrorMessageProps {\n  errorMessage?: string;\n  id?: string;\n  className?: string;\n}\n\nexport const ErrorMessage = ({\n  id,\n  errorMessage,\n  className,\n}: ErrorMessageProps) => {\n  const classes = classNames(\"mobius\", \"mobius/ErrorMessage\", className);\n\n  if (!errorMessage) return null;\n\n  return (\n    <div id={id} className={classes} data-testid=\"ErrorMessage\">\n      <span className=\"mobius/ErrorIcon\" />\n      <Text elementType=\"span\" className=\"mobius/ErrorText\">\n        {errorMessage}\n      </Text>\n    </div>\n  );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n"],"names":["ErrorMessage","id","errorMessage","className","classes","classNames","div","data-testid","span","Text","elementType","displayName"],"mappings":";;;;+BASaA;;;eAAAA;;;;+DATU;sBACF;;;;;;AAQd,MAAMA,eAAe,CAAC,EAC3BC,EAAE,EACFC,YAAY,EACZC,SAAS,EACS;IAClB,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,uBAAuBF;IAE5D,IAAI,CAACD,cAAc,OAAO;IAE1B,qBACE,sBAACI;QAAIL,IAAIA;QAAIE,WAAWC;QAASG,eAAY;;0BAC3C,qBAACC;gBAAKL,WAAU;;0BAChB,qBAACM,UAAI;gBAACC,aAAY;gBAAOP,WAAU;0BAChCD;;;;AAIT;AAEAF,aAAaW,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ErrorMessage/ErrorMessage.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { error } from \"@simplybusiness/icons\";\nimport { Text } from \"../Text\";\nimport { Icon } from \"../Icon\";\n\nexport interface ErrorMessageProps {\n  errorMessage?: string;\n  id?: string;\n  className?: string;\n}\n\nexport const ErrorMessage = ({\n  id,\n  errorMessage,\n  className,\n}: ErrorMessageProps) => {\n  const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n  if (!errorMessage) return null;\n\n  return (\n    <div id={id} className={classes} data-testid=\"ErrorMessage\">\n      <Icon icon={error} className=\"mobius-error-message__icon\" />\n      <Text elementType=\"span\" className=\"mobius-error-message__text\">\n        {errorMessage}\n      </Text>\n    </div>\n  );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n"],"names":["ErrorMessage","id","errorMessage","className","classes","classNames","div","data-testid","Icon","icon","error","Text","elementType","displayName"],"mappings":";;;;+BAWaA;;;eAAAA;;;;+DAXU;uBACD;sBACD;sBACA;;;;;;AAQd,MAAMA,eAAe,CAAC,EAC3BC,EAAE,EACFC,YAAY,EACZC,SAAS,EACS;IAClB,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,wBAAwBF;IAE7D,IAAI,CAACD,cAAc,OAAO;IAE1B,qBACE,sBAACI;QAAIL,IAAIA;QAAIE,WAAWC;QAASG,eAAY;;0BAC3C,qBAACC,UAAI;gBAACC,MAAMC,YAAK;gBAAEP,WAAU;;0BAC7B,qBAACQ,UAAI;gBAACC,aAAY;gBAAOT,WAAU;0BAChCD;;;;AAIT;AAEAF,aAAaa,WAAW,GAAG"}

package/dist/cjs/components/Fieldset/Fieldset.js

@@ -43,9 +43,9 @@ const useFieldset = (props)=>{
 const Fieldset = /*#__PURE__*/ (0, _react.forwardRef)((props, _ref)=>{
     const { children, legend, legendComponent = /*#__PURE__*/ (0, _jsxruntime.jsx)("legend", {}), ...otherProps } = props;
     const { legendProps, containerProps } = useFieldset(props);
-    const classes = (0, _dedupe.default)("mobius", "mobius/Fieldset", props.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-fieldset", props.className);
     // Set class on legend
-    legendProps.className = "mobius/Legend";
+    legendProps.className = "mobius-fieldset__legend";
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Flex.Flex, {
         ...containerProps,
         ...otherProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  useId,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Flex } from \"../Flex\";\n\nexport type LegendProps = {\n  id?: string;\n  className?: string;\n};\n\ntype ContainerProps = {\n  \"aria-labelledby\"?: string;\n  role: string;\n};\n\nconst useFieldset = (\n  props: FieldsetProps,\n): { legendProps: LegendProps; containerProps: ContainerProps } => {\n  const { legend } = props;\n\n  let legendProps: LegendProps = {};\n  let containerProps: ContainerProps = {\n    role: \"group\",\n  };\n\n  const legendId = useId();\n  if (legend) {\n    legendProps = {\n      ...legendProps,\n      id: legendId,\n    };\n    containerProps = {\n      ...containerProps,\n      \"aria-labelledby\": legendId,\n    };\n  }\n\n  return {\n    legendProps,\n    containerProps,\n  };\n};\n\nexport type FieldsetElementType = HTMLDivElement;\nexport interface FieldsetProps\n  extends DOMProps,\n    RefAttributes<FieldsetElementType> {\n  legend?: string;\n  children: ReactNode;\n  className?: string;\n  legendComponent?: ReactElement<any>;\n}\n\nexport type FieldsetRef = Ref<FieldsetElementType>;\n\nconst Fieldset: ForwardedRefComponent<FieldsetProps, FieldsetElementType> =\n  forwardRef((props: FieldsetProps, _ref: FieldsetRef) => {\n    const {\n      children,\n      legend,\n      legendComponent = <legend />,\n      ...otherProps\n    } = props;\n\n    const { legendProps, containerProps } = useFieldset(props);\n\n    const classes = classNames(\"mobius\", \"mobius/Fieldset\", props.className);\n\n    // Set class on legend\n    legendProps.className = \"mobius/Legend\";\n\n    return (\n      <Flex {...containerProps} {...otherProps} className={classes}>\n        {legend && cloneElement(legendComponent, { ...legendProps }, [legend])}\n        {children}\n      </Flex>\n    );\n  });\n\nFieldset.displayName = \"Fieldset\";\nexport { Fieldset };\n"],"names":["Fieldset","useFieldset","props","legend","legendProps","containerProps","role","legendId","useId","id","forwardRef","_ref","children","legendComponent","otherProps","classes","classNames","className","Flex","cloneElement","displayName"],"mappings":"AAAA;;;;;+BA2FSA;;;eAAAA;;;;+DAzFc;uBAShB;sBAGc;;;;;;AAYrB,MAAMC,cAAc,CAClBC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGD;IAEnB,IAAIE,cAA2B,CAAC;IAChC,IAAIC,iBAAiC;QACnCC,MAAM;IACR;IAEA,MAAMC,WAAWC,IAAAA,YAAK;IACtB,IAAIL,QAAQ;QACVC,cAAc;YACZ,GAAGA,WAAW;YACdK,IAAIF;QACN;QACAF,iBAAiB;YACf,GAAGA,cAAc;YACjB,mBAAmBE;QACrB;IACF;IAEA,OAAO;QACLH;QACAC;IACF;AACF;AAcA,MAAML,yBACJU,IAAAA,iBAAU,EAAC,CAACR,OAAsBS;IAChC,MAAM,EACJC,QAAQ,EACRT,MAAM,EACNU,gCAAkB,qBAACV,aAAS,EAC5B,GAAGW,YACJ,GAAGZ;IAEJ,MAAM,EAAEE,WAAW,EAAEC,cAAc,EAAE,GAAGJ,YAAYC;IAEpD,MAAMa,UAAUC,IAAAA,eAAU,EAAC,UAAU,mBAAmBd,MAAMe,SAAS;IAEvE,sBAAsB;IACtBb,YAAYa,SAAS,GAAG;IAExB,qBACE,sBAACC,UAAI;QAAE,GAAGb,cAAc;QAAG,GAAGS,UAAU;QAAEG,WAAWF;;YAClDZ,wBAAUgB,IAAAA,mBAAY,EAACN,iBAAiB;gBAAE,GAAGT,WAAW;YAAC,GAAG;gBAACD;aAAO;YACpES;;;AAGP;AAEFZ,SAASoB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  useId,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Flex } from \"../Flex\";\n\nexport type LegendProps = {\n  id?: string;\n  className?: string;\n};\n\ntype ContainerProps = {\n  \"aria-labelledby\"?: string;\n  role: string;\n};\n\nconst useFieldset = (\n  props: FieldsetProps,\n): { legendProps: LegendProps; containerProps: ContainerProps } => {\n  const { legend } = props;\n\n  let legendProps: LegendProps = {};\n  let containerProps: ContainerProps = {\n    role: \"group\",\n  };\n\n  const legendId = useId();\n  if (legend) {\n    legendProps = {\n      ...legendProps,\n      id: legendId,\n    };\n    containerProps = {\n      ...containerProps,\n      \"aria-labelledby\": legendId,\n    };\n  }\n\n  return {\n    legendProps,\n    containerProps,\n  };\n};\n\nexport type FieldsetElementType = HTMLDivElement;\nexport interface FieldsetProps\n  extends DOMProps,\n    RefAttributes<FieldsetElementType> {\n  legend?: string;\n  children: ReactNode;\n  className?: string;\n  legendComponent?: ReactElement<any>;\n}\n\nexport type FieldsetRef = Ref<FieldsetElementType>;\n\nconst Fieldset: ForwardedRefComponent<FieldsetProps, FieldsetElementType> =\n  forwardRef((props: FieldsetProps, _ref: FieldsetRef) => {\n    const {\n      children,\n      legend,\n      legendComponent = <legend />,\n      ...otherProps\n    } = props;\n\n    const { legendProps, containerProps } = useFieldset(props);\n\n    const classes = classNames(\"mobius\", \"mobius-fieldset\", props.className);\n\n    // Set class on legend\n    legendProps.className = \"mobius-fieldset__legend\";\n\n    return (\n      <Flex {...containerProps} {...otherProps} className={classes}>\n        {legend && cloneElement(legendComponent, { ...legendProps }, [legend])}\n        {children}\n      </Flex>\n    );\n  });\n\nFieldset.displayName = \"Fieldset\";\nexport { Fieldset };\n"],"names":["Fieldset","useFieldset","props","legend","legendProps","containerProps","role","legendId","useId","id","forwardRef","_ref","children","legendComponent","otherProps","classes","classNames","className","Flex","cloneElement","displayName"],"mappings":"AAAA;;;;;+BA2FSA;;;eAAAA;;;;+DAzFc;uBAShB;sBAGc;;;;;;AAYrB,MAAMC,cAAc,CAClBC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGD;IAEnB,IAAIE,cAA2B,CAAC;IAChC,IAAIC,iBAAiC;QACnCC,MAAM;IACR;IAEA,MAAMC,WAAWC,IAAAA,YAAK;IACtB,IAAIL,QAAQ;QACVC,cAAc;YACZ,GAAGA,WAAW;YACdK,IAAIF;QACN;QACAF,iBAAiB;YACf,GAAGA,cAAc;YACjB,mBAAmBE;QACrB;IACF;IAEA,OAAO;QACLH;QACAC;IACF;AACF;AAcA,MAAML,yBACJU,IAAAA,iBAAU,EAAC,CAACR,OAAsBS;IAChC,MAAM,EACJC,QAAQ,EACRT,MAAM,EACNU,gCAAkB,qBAACV,aAAS,EAC5B,GAAGW,YACJ,GAAGZ;IAEJ,MAAM,EAAEE,WAAW,EAAEC,cAAc,EAAE,GAAGJ,YAAYC;IAEpD,MAAMa,UAAUC,IAAAA,eAAU,EAAC,UAAU,mBAAmBd,MAAMe,SAAS;IAEvE,sBAAsB;IACtBb,YAAYa,SAAS,GAAG;IAExB,qBACE,sBAACC,UAAI;QAAE,GAAGb,cAAc;QAAG,GAAGS,UAAU;QAAEG,WAAWF;;YAClDZ,wBAAUgB,IAAAA,mBAAY,EAACN,iBAAiB;gBAAE,GAAGT,WAAW;YAAC,GAAG;gBAACD;aAAO;YACpES;;;AAGP;AAEFZ,SAASoB,WAAW,GAAG"}

package/dist/cjs/components/Flex/Flex.js

@@ -19,7 +19,7 @@ function _interop_require_default(obj) {
 }
 const Flex = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { elementType: Element = "div", style, className, ...otherProps } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/Flex", className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-flex", className);
     const [styleProps, restProps] = (0, _propUtils.splitProps)(otherProps);
     const flexStyles = (0, _propUtils.buildFlexStyles)(styleProps);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { FlexElementType, FlexProps, FlexRef } from \"./types\";\nimport { buildFlexStyles, splitProps } from \"./propUtils\";\n\nconst Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(\n  (props: FlexProps, ref: FlexRef) => {\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);\n\nFlex.displayName = \"Flex\";\nexport { Flex };\n"],"names":["Flex","forwardRef","props","ref","elementType","Element","style","className","otherProps","classes","classNames","styleProps","restProps","splitProps","flexStyles","buildFlexStyles","displayName"],"mappings":";;;;+BAkCSA;;;eAAAA;;;;uBAlCkB;+DACJ;2BAGqB;;;;;;AAE5C,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,KAAK,EACLC,SAAS,EACT,GAAGC,YACJ,GAAGN;IACJ,MAAMO,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeH;IAEpD,MAAM,CAACI,YAAYC,UAAU,GAAGC,IAAAA,qBAAU,EAACL;IAC3C,MAAMM,aAAaC,IAAAA,0BAAe,EAACJ;IAEnC,qBACE,qBAACN;QACCF,KAAKA;QACLG,OAAO;YACL,GAAGQ,UAAU;YACb,GAAGR,KAAK;QACV;QACAC,WAAWE;QACV,GAAGG,SAAS;;AAGnB;AAGFZ,KAAKgB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { FlexElementType, FlexProps, FlexRef } from \"./types\";\nimport { buildFlexStyles, splitProps } from \"./propUtils\";\n\nconst Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(\n  (props: FlexProps, ref: FlexRef) => {\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);\n\nFlex.displayName = \"Flex\";\nexport { Flex };\n"],"names":["Flex","forwardRef","props","ref","elementType","Element","style","className","otherProps","classes","classNames","styleProps","restProps","splitProps","flexStyles","buildFlexStyles","displayName"],"mappings":";;;;+BAkCSA;;;eAAAA;;;;uBAlCkB;+DACJ;2BAGqB;;;;;;AAE5C,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,KAAK,EACLC,SAAS,EACT,GAAGC,YACJ,GAAGN;IACJ,MAAMO,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeH;IAEpD,MAAM,CAACI,YAAYC,UAAU,GAAGC,IAAAA,qBAAU,EAACL;IAC3C,MAAMM,aAAaC,IAAAA,0BAAe,EAACJ;IAEnC,qBACE,qBAACN;QACCF,KAAKA;QACLG,OAAO;YACL,GAAGQ,UAAU;YACb,GAAGR,KAAK;QACV;QACAC,WAAWE;QACV,GAAGG,SAAS;;AAGnB;AAGFZ,KAAKgB,WAAW,GAAG"}

package/dist/cjs/components/Grid/Grid.js

@@ -19,7 +19,7 @@ function _interop_require_default(obj) {
 }
 const Grid = /*#__PURE__*/ (0, _react.forwardRef)((props, _ref)=>{
     const { columns = 12, gap, columnGap, rowGap, alignContent, alignItems, justifyContent, justifyItems, className, style, ...rest } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/Grid", className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-grid", className);
     const styles = (0, _utils.filterUndefinedProps)({
         boxSizing: "border-box",
         display: "grid",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import {\n  Ref,\n  forwardRef,\n  ReactNode,\n  RefAttributes,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { filterUndefinedProps, getSpacingValue } from \"../../utils\";\nimport { SpacingType } from \"../../types\";\n\nexport type GridElementType = HTMLDivElement;\n\nexport interface GridProps extends RefAttributes<GridElementType>, DOMProps {\n  children?: ReactNode;\n  /** The number of columns */\n  columns?: number;\n  /** How big a gap between the columns and rows */\n  gap?: SpacingType;\n  /** How big a gap between the columns */\n  columnGap?: SpacingType;\n  /** How big a gap between the rows */\n  rowGap?: SpacingType;\n  /** Aligns the grid along the block (column) axis */\n  alignContent?:\n    | \"center\"\n    | \"space-around\"\n    | \"space-between\"\n    | \"space-evenly\"\n    | \"stretch\";\n  /** Aligns the grid along the inline (row) axis */\n  justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-around\"\n    | \"space-between\"\n    | \"space-evenly\";\n  /** Aligns grid items along the block (column) axis  */\n  alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" | \"baseline\";\n  /** Aligns grid items along the inline (row) axis  */\n  justifyItems?: \"start\" | \"end\" | \"center\" | \"stretch\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport type GridRef = Ref<GridElementType>;\n\nconst Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(\n  (props: GridProps, _ref: GridRef) => {\n    const {\n      columns = 12,\n      gap,\n      columnGap,\n      rowGap,\n      alignContent,\n      alignItems,\n      justifyContent,\n      justifyItems,\n      className,\n      style,\n      ...rest\n    } = props;\n    const classes = classNames(\"mobius\", \"mobius/Grid\", className);\n\n    const styles: CSSProperties = filterUndefinedProps({\n      boxSizing: \"border-box\",\n      display: \"grid\",\n      gridTemplateColumns: `repeat(${columns}, 1fr)`,\n      gap: getSpacingValue(gap),\n      columnGap: getSpacingValue(columnGap),\n      rowGap: getSpacingValue(rowGap),\n      alignContent,\n      alignItems,\n      justifyContent,\n      justifyItems,\n      ...style,\n    });\n\n    return <div style={styles} className={classes} {...rest} />;\n  },\n);\n\nGrid.displayName = \"Grid\";\nexport { Grid };\n"],"names":["Grid","forwardRef","props","_ref","columns","gap","columnGap","rowGap","alignContent","alignItems","justifyContent","justifyItems","className","style","rest","classes","classNames","styles","filterUndefinedProps","boxSizing","display","gridTemplateColumns","getSpacingValue","div","displayName"],"mappings":";;;;+BAuFSA;;;eAAAA;;;;uBAjFF;+DACgB;uBAG+B;;;;;;AAyCtD,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,UAAU,EAAE,EACZC,GAAG,EACHC,SAAS,EACTC,MAAM,EACNC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,YAAY,EACZC,SAAS,EACTC,KAAK,EACL,GAAGC,MACJ,GAAGZ;IACJ,MAAMa,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeJ;IAEpD,MAAMK,SAAwBC,IAAAA,2BAAoB,EAAC;QACjDC,WAAW;QACXC,SAAS;QACTC,qBAAqB,CAAC,OAAO,EAAEjB,QAAQ,MAAM,CAAC;QAC9CC,KAAKiB,IAAAA,sBAAe,EAACjB;QACrBC,WAAWgB,IAAAA,sBAAe,EAAChB;QAC3BC,QAAQe,IAAAA,sBAAe,EAACf;QACxBC;QACAC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;IAEA,qBAAO,qBAACU;QAAIV,OAAOI;QAAQL,WAAWG;QAAU,GAAGD,IAAI;;AACzD;AAGFd,KAAKwB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import {\n  Ref,\n  forwardRef,\n  ReactNode,\n  RefAttributes,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { filterUndefinedProps, getSpacingValue } from \"../../utils\";\nimport { SpacingType } from \"../../types\";\n\nexport type GridElementType = HTMLDivElement;\n\nexport interface GridProps extends RefAttributes<GridElementType>, DOMProps {\n  children?: ReactNode;\n  /** The number of columns */\n  columns?: number;\n  /** How big a gap between the columns and rows */\n  gap?: SpacingType;\n  /** How big a gap between the columns */\n  columnGap?: SpacingType;\n  /** How big a gap between the rows */\n  rowGap?: SpacingType;\n  /** Aligns the grid along the block (column) axis */\n  alignContent?:\n    | \"center\"\n    | \"space-around\"\n    | \"space-between\"\n    | \"space-evenly\"\n    | \"stretch\";\n  /** Aligns the grid along the inline (row) axis */\n  justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"space-around\"\n    | \"space-between\"\n    | \"space-evenly\";\n  /** Aligns grid items along the block (column) axis  */\n  alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" | \"baseline\";\n  /** Aligns grid items along the inline (row) axis  */\n  justifyItems?: \"start\" | \"end\" | \"center\" | \"stretch\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport type GridRef = Ref<GridElementType>;\n\nconst Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(\n  (props: GridProps, _ref: GridRef) => {\n    const {\n      columns = 12,\n      gap,\n      columnGap,\n      rowGap,\n      alignContent,\n      alignItems,\n      justifyContent,\n      justifyItems,\n      className,\n      style,\n      ...rest\n    } = props;\n    const classes = classNames(\"mobius\", \"mobius-grid\", className);\n\n    const styles: CSSProperties = filterUndefinedProps({\n      boxSizing: \"border-box\",\n      display: \"grid\",\n      gridTemplateColumns: `repeat(${columns}, 1fr)`,\n      gap: getSpacingValue(gap),\n      columnGap: getSpacingValue(columnGap),\n      rowGap: getSpacingValue(rowGap),\n      alignContent,\n      alignItems,\n      justifyContent,\n      justifyItems,\n      ...style,\n    });\n\n    return <div style={styles} className={classes} {...rest} />;\n  },\n);\n\nGrid.displayName = \"Grid\";\nexport { Grid };\n"],"names":["Grid","forwardRef","props","_ref","columns","gap","columnGap","rowGap","alignContent","alignItems","justifyContent","justifyItems","className","style","rest","classes","classNames","styles","filterUndefinedProps","boxSizing","display","gridTemplateColumns","getSpacingValue","div","displayName"],"mappings":";;;;+BAuFSA;;;eAAAA;;;;uBAjFF;+DACgB;uBAG+B;;;;;;AAyCtD,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,UAAU,EAAE,EACZC,GAAG,EACHC,SAAS,EACTC,MAAM,EACNC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,YAAY,EACZC,SAAS,EACTC,KAAK,EACL,GAAGC,MACJ,GAAGZ;IACJ,MAAMa,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeJ;IAEpD,MAAMK,SAAwBC,IAAAA,2BAAoB,EAAC;QACjDC,WAAW;QACXC,SAAS;QACTC,qBAAqB,CAAC,OAAO,EAAEjB,QAAQ,MAAM,CAAC;QAC9CC,KAAKiB,IAAAA,sBAAe,EAACjB;QACrBC,WAAWgB,IAAAA,sBAAe,EAAChB;QAC3BC,QAAQe,IAAAA,sBAAe,EAACf;QACxBC;QACAC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;IAEA,qBAAO,qBAACU;QAAIV,OAAOI;QAAQL,WAAWG;QAAU,GAAGD,IAAI;;AACzD;AAGFd,KAAKwB,WAAW,GAAG"}

package/dist/cjs/components/Grid/Item.js

@@ -50,7 +50,7 @@ const GridItem = /*#__PURE__*/ (0, _react.forwardRef)((props, _ref)=>{
         xxl
     });
     const [responsiveSpan, setResponsiveSpan] = (0, _react.useState)();
-    const classes = (0, _dedupe.default)("mobius/GridItem", className);
+    const classes = (0, _dedupe.default)("mobius-grid__item", className);
     (0, _react.useEffect)(()=>{
         // @ts-expect-error
         setResponsiveSpan(breakpointMap[breakpointSize]);

package/dist/cjs/components/Grid/Item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Grid/Item.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  RefAttributes,\n  useEffect,\n  useState,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\n\nexport type GridItemElementType = HTMLDivElement;\n\nexport interface GridItemProps\n  extends RefAttributes<GridItemElementType>,\n    DOMProps {\n  /** How many columns the item spans */\n  span?: number | number[];\n  /** React children */\n  children?: React.ReactNode;\n  /** How many columns the item spans on the smallest breakpoint */\n  xs?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n  /** How many columns the item spans on the largest breakpoint */\n  xxl?: number;\n  /** Aligns the grid item along the block (column) axis */\n  alignSelf?: \"center\" | \"start\" | \"end\" | \"stretch\";\n  /** Aligns the grid item along the inline (row) axis */\n  justifySelf?: \"center\" | \"start\" | \"end\" | \"stretch\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport const getBreakpointMap = (config: Partial<Record<SizeType, number>>) =>\n  Object.entries(config).reduce((prev, [key, value]) => {\n    const previous = Object.values(prev);\n    const lastDefined = previous[previous.length - 1];\n    return { ...prev, [key]: value || lastDefined };\n  }, {});\n\nexport type GridItemRef = Ref<GridItemElementType>;\n\nexport const DEFAULT_SPAN = 12;\n\nconst GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType> =\n  forwardRef((props: GridItemProps, _ref: GridItemRef) => {\n    const {\n      breakpoint: { size: breakpointSize },\n    } = useBreakpoint();\n    const {\n      span,\n      xs = Array.isArray(span) ? DEFAULT_SPAN : span,\n      sm,\n      md,\n      lg,\n      xl,\n      xxl,\n      alignSelf,\n      justifySelf,\n      className,\n      ...rest\n    } = props;\n    const breakpointMap = getBreakpointMap({\n      xs,\n      sm,\n      md,\n      lg,\n      xl,\n      xxl,\n    });\n    const [responsiveSpan, setResponsiveSpan] = useState();\n    const classes = classNames(\"mobius/GridItem\", className);\n\n    useEffect(() => {\n      // @ts-expect-error\n      setResponsiveSpan(breakpointMap[breakpointSize]);\n    }, [breakpointSize, breakpointMap]);\n\n    const styles: CSSProperties = {\n      gridColumn: responsiveSpan ? `span ${responsiveSpan}` : undefined,\n      alignSelf,\n      justifySelf,\n    };\n\n    return <div style={{ ...styles }} className={classes} {...rest} />;\n  });\n\nGridItem.displayName = \"GridItem\";\nexport { GridItem };\n"],"names":["DEFAULT_SPAN","GridItem","getBreakpointMap","config","Object","entries","reduce","prev","key","value","previous","values","lastDefined","length","forwardRef","props","_ref","breakpoint","size","breakpointSize","useBreakpoint","span","xs","Array","isArray","sm","md","lg","xl","xxl","alignSelf","justifySelf","className","rest","breakpointMap","responsiveSpan","setResponsiveSpan","useState","classes","classNames","useEffect","styles","gridColumn","undefined","div","style","displayName"],"mappings":"AAAA;;;;;;;;;;;;IAkDaA,YAAY;eAAZA;;IA8CJC,QAAQ;eAARA;;IAvDIC,gBAAgB;eAAhBA;;;;uBAhCN;+DACgB;uBAEO;;;;;;AA6BvB,MAAMA,mBAAmB,CAACC,SAC/BC,OAAOC,OAAO,CAACF,QAAQG,MAAM,CAAC,CAACC,MAAM,CAACC,KAAKC,MAAM;QAC/C,MAAMC,WAAWN,OAAOO,MAAM,CAACJ;QAC/B,MAAMK,cAAcF,QAAQ,CAACA,SAASG,MAAM,GAAG,EAAE;QACjD,OAAO;YAAE,GAAGN,IAAI;YAAE,CAACC,IAAI,EAAEC,SAASG;QAAY;IAChD,GAAG,CAAC;AAIC,MAAMZ,eAAe;AAE5B,MAAMC,yBACJa,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IAChC,MAAM,EACJC,YAAY,EAAEC,MAAMC,cAAc,EAAE,EACrC,GAAGC,IAAAA,oBAAa;IACjB,MAAM,EACJC,IAAI,EACJC,KAAKC,MAAMC,OAAO,CAACH,QAAQrB,eAAeqB,IAAI,EAC9CI,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,GAAG,EACHC,SAAS,EACTC,WAAW,EACXC,SAAS,EACT,GAAGC,MACJ,GAAGlB;IACJ,MAAMmB,gBAAgBhC,iBAAiB;QACrCoB;QACAG;QACAC;QACAC;QACAC;QACAC;IACF;IACA,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGC,IAAAA,eAAQ;IACpD,MAAMC,UAAUC,IAAAA,eAAU,EAAC,mBAAmBP;IAE9CQ,IAAAA,gBAAS,EAAC;QACR,mBAAmB;QACnBJ,kBAAkBF,aAAa,CAACf,eAAe;IACjD,GAAG;QAACA;QAAgBe;KAAc;IAElC,MAAMO,SAAwB;QAC5BC,YAAYP,iBAAiB,CAAC,KAAK,EAAEA,eAAe,CAAC,GAAGQ;QACxDb;QACAC;IACF;IAEA,qBAAO,qBAACa;QAAIC,OAAO;YAAE,GAAGJ,MAAM;QAAC;QAAGT,WAAWM;QAAU,GAAGL,IAAI;;AAChE;AAEFhC,SAAS6C,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Grid/Item.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  RefAttributes,\n  useEffect,\n  useState,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\n\nexport type GridItemElementType = HTMLDivElement;\n\nexport interface GridItemProps\n  extends RefAttributes<GridItemElementType>,\n    DOMProps {\n  /** How many columns the item spans */\n  span?: number | number[];\n  /** React children */\n  children?: React.ReactNode;\n  /** How many columns the item spans on the smallest breakpoint */\n  xs?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n  /** How many columns the item spans on the largest breakpoint */\n  xxl?: number;\n  /** Aligns the grid item along the block (column) axis */\n  alignSelf?: \"center\" | \"start\" | \"end\" | \"stretch\";\n  /** Aligns the grid item along the inline (row) axis */\n  justifySelf?: \"center\" | \"start\" | \"end\" | \"stretch\";\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport const getBreakpointMap = (config: Partial<Record<SizeType, number>>) =>\n  Object.entries(config).reduce((prev, [key, value]) => {\n    const previous = Object.values(prev);\n    const lastDefined = previous[previous.length - 1];\n    return { ...prev, [key]: value || lastDefined };\n  }, {});\n\nexport type GridItemRef = Ref<GridItemElementType>;\n\nexport const DEFAULT_SPAN = 12;\n\nconst GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType> =\n  forwardRef((props: GridItemProps, _ref: GridItemRef) => {\n    const {\n      breakpoint: { size: breakpointSize },\n    } = useBreakpoint();\n    const {\n      span,\n      xs = Array.isArray(span) ? DEFAULT_SPAN : span,\n      sm,\n      md,\n      lg,\n      xl,\n      xxl,\n      alignSelf,\n      justifySelf,\n      className,\n      ...rest\n    } = props;\n    const breakpointMap = getBreakpointMap({\n      xs,\n      sm,\n      md,\n      lg,\n      xl,\n      xxl,\n    });\n    const [responsiveSpan, setResponsiveSpan] = useState();\n    const classes = classNames(\"mobius-grid__item\", className);\n\n    useEffect(() => {\n      // @ts-expect-error\n      setResponsiveSpan(breakpointMap[breakpointSize]);\n    }, [breakpointSize, breakpointMap]);\n\n    const styles: CSSProperties = {\n      gridColumn: responsiveSpan ? `span ${responsiveSpan}` : undefined,\n      alignSelf,\n      justifySelf,\n    };\n\n    return <div style={{ ...styles }} className={classes} {...rest} />;\n  });\n\nGridItem.displayName = \"GridItem\";\nexport { GridItem };\n"],"names":["DEFAULT_SPAN","GridItem","getBreakpointMap","config","Object","entries","reduce","prev","key","value","previous","values","lastDefined","length","forwardRef","props","_ref","breakpoint","size","breakpointSize","useBreakpoint","span","xs","Array","isArray","sm","md","lg","xl","xxl","alignSelf","justifySelf","className","rest","breakpointMap","responsiveSpan","setResponsiveSpan","useState","classes","classNames","useEffect","styles","gridColumn","undefined","div","style","displayName"],"mappings":"AAAA;;;;;;;;;;;;IAkDaA,YAAY;eAAZA;;IA8CJC,QAAQ;eAARA;;IAvDIC,gBAAgB;eAAhBA;;;;uBAhCN;+DACgB;uBAEO;;;;;;AA6BvB,MAAMA,mBAAmB,CAACC,SAC/BC,OAAOC,OAAO,CAACF,QAAQG,MAAM,CAAC,CAACC,MAAM,CAACC,KAAKC,MAAM;QAC/C,MAAMC,WAAWN,OAAOO,MAAM,CAACJ;QAC/B,MAAMK,cAAcF,QAAQ,CAACA,SAASG,MAAM,GAAG,EAAE;QACjD,OAAO;YAAE,GAAGN,IAAI;YAAE,CAACC,IAAI,EAAEC,SAASG;QAAY;IAChD,GAAG,CAAC;AAIC,MAAMZ,eAAe;AAE5B,MAAMC,yBACJa,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IAChC,MAAM,EACJC,YAAY,EAAEC,MAAMC,cAAc,EAAE,EACrC,GAAGC,IAAAA,oBAAa;IACjB,MAAM,EACJC,IAAI,EACJC,KAAKC,MAAMC,OAAO,CAACH,QAAQrB,eAAeqB,IAAI,EAC9CI,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,GAAG,EACHC,SAAS,EACTC,WAAW,EACXC,SAAS,EACT,GAAGC,MACJ,GAAGlB;IACJ,MAAMmB,gBAAgBhC,iBAAiB;QACrCoB;QACAG;QACAC;QACAC;QACAC;QACAC;IACF;IACA,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGC,IAAAA,eAAQ;IACpD,MAAMC,UAAUC,IAAAA,eAAU,EAAC,qBAAqBP;IAEhDQ,IAAAA,gBAAS,EAAC;QACR,mBAAmB;QACnBJ,kBAAkBF,aAAa,CAACf,eAAe;IACjD,GAAG;QAACA;QAAgBe;KAAc;IAElC,MAAMO,SAAwB;QAC5BC,YAAYP,iBAAiB,CAAC,KAAK,EAAEA,eAAe,CAAC,GAAGQ;QACxDb;QACAC;IACF;IAEA,qBAAO,qBAACa;QAAIC,OAAO;YAAE,GAAGJ,MAAM;QAAC;QAAGT,WAAWM;QAAU,GAAGL,IAAI;;AAChE;AAEFhC,SAAS6C,WAAW,GAAG"}

package/dist/cjs/components/Icon/Icon.js

@@ -21,7 +21,7 @@ function Icon({ icon, className, size = "xs", color, fixedWidth, spin, spinRever
     if (!icon) {
         throw new Error("Must specify icon object");
     }
-    const classes = (0, _dedupe.default)("mobius", "mobius/Icon", `svg-inline--${ICON_PREFIX}`, `--size-${size}`, className, {
+    const classes = (0, _dedupe.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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { IconProps } from \"./types\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\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      aria-hidden=\"true\"\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"],"names":["Icon","ICON_PREFIX","capitaliseFirstLetter","str","charAt","toUpperCase","slice","icon","className","size","color","fixedWidth","spin","spinReverse","title","otherProps","Error","classes","classNames","iconName","width","height","svgPathData","formattedIconName","split","join","defaultTitle","titleText","svg","aria-hidden","focusable","data-icon","role","xmlns","viewBox","style","path","fill","d"],"mappings":";;;;+BAQgBA;;;eAAAA;;;;+DARO;;;;;;AAGvB,MAAMC,cAAc;AAEpB,MAAMC,wBAAwB,CAACC,MAC7BA,IAAIC,MAAM,CAAC,GAAGC,WAAW,KAAKF,IAAIG,KAAK,CAAC;AAEnC,SAASN,KAAK,EACnBO,IAAI,EACJC,SAAS,EACTC,OAAO,IAAI,EACXC,KAAK,EACLC,UAAU,EACVC,IAAI,EACJC,WAAW,EACXC,KAAK,EACL,GAAGC,YACO;IACV,IAAI,CAACR,MAAM;QACT,MAAM,IAAIS,MAAM;IAClB;IAEA,MAAMC,UAAUC,IAAAA,eAAU,EACxB,UACA,eACA,CAAC,YAAY,EAAEjB,YAAY,CAAC,EAC5B,CAAC,OAAO,EAAEQ,KAAK,CAAC,EAChBD,WACA;QACE,CAAC,CAAC,EAAEP,YAAY,GAAG,CAAC,CAAC,EAAEU;QACvB,CAAC,CAAC,EAAEV,YAAY,KAAK,CAAC,CAAC,EAAEW,QAAQC;QACjC,CAAC,CAAC,EAAEZ,YAAY,aAAa,CAAC,CAAC,EAAEY;IACnC;IAGF,MAAM,EAAEM,QAAQ,EAAEC,KAAK,EAAEC,MAAM,EAAEC,WAAW,EAAE,GAAGf;IACjD,MAAMgB,oBAAoBJ,SAASK,KAAK,CAAC,KAAKC,IAAI,CAAC;IAEnD,MAAMC,eAAe,CAAC,EAAExB,sBAAsBqB,mBAAmB,KAAK,CAAC;IACvE,MAAMI,YAAYb,SAASY;IAE3B,qBACE,sBAACE;QACCC,eAAY;QACZC,WAAU;QACVC,aAAWZ;QACXX,WAAWS;QACXe,MAAK;QACLC,OAAM;QACNC,SAAS,CAAC,IAAI,EAAEd,MAAM,CAAC,EAAEC,OAAO,CAAC;QACjCc,OAAO;YAAEzB;QAAM;QACd,GAAGK,UAAU;;0BAEd,qBAACD;0BAAOa;;0BACR,qBAACS;gBAAKC,MAAK;gBAAeC,GAAGhB;;;;AAGnC"}
+{"version":3,"sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { IconProps } from \"./types\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\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      aria-hidden=\"true\"\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"],"names":["Icon","ICON_PREFIX","capitaliseFirstLetter","str","charAt","toUpperCase","slice","icon","className","size","color","fixedWidth","spin","spinReverse","title","otherProps","Error","classes","classNames","iconName","width","height","svgPathData","formattedIconName","split","join","defaultTitle","titleText","svg","aria-hidden","focusable","data-icon","role","xmlns","viewBox","style","path","fill","d"],"mappings":";;;;+BAQgBA;;;eAAAA;;;;+DARO;;;;;;AAGvB,MAAMC,cAAc;AAEpB,MAAMC,wBAAwB,CAACC,MAC7BA,IAAIC,MAAM,CAAC,GAAGC,WAAW,KAAKF,IAAIG,KAAK,CAAC;AAEnC,SAASN,KAAK,EACnBO,IAAI,EACJC,SAAS,EACTC,OAAO,IAAI,EACXC,KAAK,EACLC,UAAU,EACVC,IAAI,EACJC,WAAW,EACXC,KAAK,EACL,GAAGC,YACO;IACV,IAAI,CAACR,MAAM;QACT,MAAM,IAAIS,MAAM;IAClB;IAEA,MAAMC,UAAUC,IAAAA,eAAU,EACxB,UACA,eACA,CAAC,YAAY,EAAEjB,YAAY,CAAC,EAC5B,CAAC,OAAO,EAAEQ,KAAK,CAAC,EAChBD,WACA;QACE,CAAC,CAAC,EAAEP,YAAY,GAAG,CAAC,CAAC,EAAEU;QACvB,CAAC,CAAC,EAAEV,YAAY,KAAK,CAAC,CAAC,EAAEW,QAAQC;QACjC,CAAC,CAAC,EAAEZ,YAAY,aAAa,CAAC,CAAC,EAAEY;IACnC;IAGF,MAAM,EAAEM,QAAQ,EAAEC,KAAK,EAAEC,MAAM,EAAEC,WAAW,EAAE,GAAGf;IACjD,MAAMgB,oBAAoBJ,SAASK,KAAK,CAAC,KAAKC,IAAI,CAAC;IAEnD,MAAMC,eAAe,CAAC,EAAExB,sBAAsBqB,mBAAmB,KAAK,CAAC;IACvE,MAAMI,YAAYb,SAASY;IAE3B,qBACE,sBAACE;QACCC,eAAY;QACZC,WAAU;QACVC,aAAWZ;QACXX,WAAWS;QACXe,MAAK;QACLC,OAAM;QACNC,SAAS,CAAC,IAAI,EAAEd,MAAM,CAAC,EAAEC,OAAO,CAAC;QACjCc,OAAO;YAAEzB;QAAM;QACd,GAAGK,UAAU;;0BAEd,qBAACD;0BAAOa;;0BACR,qBAACS;gBAAKC,MAAK;gBAAeC,GAAGhB;;;;AAGnC"}

package/dist/cjs/components/Image/Image.js

@@ -17,7 +17,7 @@ function _interop_require_default(obj) {
     };
 }
 const Image = /*#__PURE__*/ (0, _react.forwardRef)(({ alt, elementType: Component = "img", ...otherProps }, ref)=>{
-    const classes = (0, _dedupe.default)("mobius", "mobius/Image", otherProps.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-image", otherProps.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Component, {
         alt: alt,
         ref: ref,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import { forwardRef, RefAttributes, Ref } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type IntrinsicImage = Omit<\n  JSX.IntrinsicElements[\"img\"],\n  \"css\" | \"width\" | \"height\" | \"color\"\n> &\n  RefAttributes<HTMLImageElement>;\n\nexport interface ImageProps extends DOMProps, IntrinsicImage {\n  /** HTML element for the Box */\n  elementType?: React.ElementType;\n  /** Alternative text for accessibility */\n  alt: string;\n  /** Path to image asset */\n  src: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type ImageRef = Ref<HTMLImageElement>;\n\nconst Image: ForwardedRefComponent<ImageProps, HTMLImageElement> = forwardRef(\n  (\n    { alt, elementType: Component = \"img\", ...otherProps }: ImageProps,\n    ref: ImageRef,\n  ) => {\n    const classes = classNames(\"mobius\", \"mobius/Image\", otherProps.className);\n\n    return (\n      <Component alt={alt} ref={ref} {...otherProps} className={classes} />\n    );\n  },\n);\n\nImage.displayName = \"Image\";\nexport { Image };\n"],"names":["Image","forwardRef","alt","elementType","Component","otherProps","ref","classes","classNames","className","displayName"],"mappings":";;;;+BAsCSA;;;eAAAA;;;;uBAtCsC;+DACxB;;;;;;AAuBvB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CACE,EAAEC,GAAG,EAAEC,aAAaC,YAAY,KAAK,EAAE,GAAGC,YAAwB,EAClEC;IAEA,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,gBAAgBH,WAAWI,SAAS;IAEzE,qBACE,qBAACL;QAAUF,KAAKA;QAAKI,KAAKA;QAAM,GAAGD,UAAU;QAAEI,WAAWF;;AAE9D;AAGFP,MAAMU,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import { forwardRef, RefAttributes, Ref } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type IntrinsicImage = Omit<\n  JSX.IntrinsicElements[\"img\"],\n  \"css\" | \"width\" | \"height\" | \"color\"\n> &\n  RefAttributes<HTMLImageElement>;\n\nexport interface ImageProps extends DOMProps, IntrinsicImage {\n  /** HTML element for the Box */\n  elementType?: React.ElementType;\n  /** Alternative text for accessibility */\n  alt: string;\n  /** Path to image asset */\n  src: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type ImageRef = Ref<HTMLImageElement>;\n\nconst Image: ForwardedRefComponent<ImageProps, HTMLImageElement> = forwardRef(\n  (\n    { alt, elementType: Component = \"img\", ...otherProps }: ImageProps,\n    ref: ImageRef,\n  ) => {\n    const classes = classNames(\"mobius\", \"mobius-image\", otherProps.className);\n\n    return (\n      <Component alt={alt} ref={ref} {...otherProps} className={classes} />\n    );\n  },\n);\n\nImage.displayName = \"Image\";\nexport { Image };\n"],"names":["Image","forwardRef","alt","elementType","Component","otherProps","ref","classes","classNames","className","displayName"],"mappings":";;;;+BAsCSA;;;eAAAA;;;;uBAtCsC;+DACxB;;;;;;AAuBvB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CACE,EAAEC,GAAG,EAAEC,aAAaC,YAAY,KAAK,EAAE,GAAGC,YAAwB,EAClEC;IAEA,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,gBAAgBH,WAAWI,SAAS;IAEzE,qBACE,qBAACL;QAAUF,KAAKA;QAAKI,KAAKA;QAAM,GAAGD,UAAU;QAAEI,WAAWF;;AAE9D;AAGFP,MAAMU,WAAW,GAAG"}

package/dist/cjs/components/Label/Label.js

@@ -18,7 +18,7 @@ function _interop_require_default(obj) {
 }
 const Label = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { elementType: Element = "label", children, ...otherProps } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/Label", props.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-label", props.className);
     otherProps.className = classes;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {
         ref: ref,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import { forwardRef, ReactNode, Ref, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n  JSX.IntrinsicElements[\"label\"],\n  \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n  extends IntrinsicLabel,\n    DOMProps,\n    RefAttributes<LabelElementType> {\n  children?: ReactNode;\n  className?: string;\n  elementType?: \"label\" | \"span\";\n}\n\nexport type LabelRef = Ref<LabelElementType>;\n\nconst Label: ForwardedRefComponent<LabelProps, LabelElementType> = forwardRef(\n  (props: LabelProps, ref: LabelRef) => {\n    const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n    const classes = classNames(\"mobius\", \"mobius/Label\", props.className);\n    otherProps.className = classes;\n\n    return (\n      <Element ref={ref} {...otherProps} className={classes}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nLabel.displayName = \"Label\";\nexport { Label };\n"],"names":["Label","forwardRef","props","ref","elementType","Element","children","otherProps","classes","classNames","className","displayName"],"mappings":";;;;+BAsCSA;;;eAAAA;;;;uBAtCiD;+DACnC;;;;;;AAqBvB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CAACC,OAAmBC;IAClB,MAAM,EAAEC,aAAaC,UAAU,OAAO,EAAEC,QAAQ,EAAE,GAAGC,YAAY,GAAGL;IAEpE,MAAMM,UAAUC,IAAAA,eAAU,EAAC,UAAU,gBAAgBP,MAAMQ,SAAS;IACpEH,WAAWG,SAAS,GAAGF;IAEvB,qBACE,qBAACH;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEG,WAAWF;kBAC3CF;;AAGP;AAGFN,MAAMW,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import { forwardRef, ReactNode, Ref, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n  JSX.IntrinsicElements[\"label\"],\n  \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n  extends IntrinsicLabel,\n    DOMProps,\n    RefAttributes<LabelElementType> {\n  children?: ReactNode;\n  className?: string;\n  elementType?: \"label\" | \"span\";\n}\n\nexport type LabelRef = Ref<LabelElementType>;\n\nconst Label: ForwardedRefComponent<LabelProps, LabelElementType> = forwardRef(\n  (props: LabelProps, ref: LabelRef) => {\n    const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n    const classes = classNames(\"mobius\", \"mobius-label\", props.className);\n    otherProps.className = classes;\n\n    return (\n      <Element ref={ref} {...otherProps} className={classes}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nLabel.displayName = \"Label\";\nexport { Label };\n"],"names":["Label","forwardRef","props","ref","elementType","Element","children","otherProps","classes","classNames","className","displayName"],"mappings":";;;;+BAsCSA;;;eAAAA;;;;uBAtCiD;+DACnC;;;;;;AAqBvB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CAACC,OAAmBC;IAClB,MAAM,EAAEC,aAAaC,UAAU,OAAO,EAAEC,QAAQ,EAAE,GAAGC,YAAY,GAAGL;IAEpE,MAAMM,UAAUC,IAAAA,eAAU,EAAC,UAAU,gBAAgBP,MAAMQ,SAAS;IACpEH,WAAWG,SAAS,GAAGF;IAEvB,qBACE,qBAACH;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEG,WAAWF;kBAC3CF;;AAGP;AAGFN,MAAMW,WAAW,GAAG"}

package/dist/cjs/components/Link/Link.js

@@ -66,7 +66,7 @@ const Link = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         ...style,
         ...isDisabled && disabledStyles
     };
-    const classes = (0, _dedupe.default)("mobius", "mobius/Link", className, {
+    const classes = (0, _dedupe.default)("mobius", "mobius-link", className, {
         "--is-disabled": isDisabled
     });
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Component, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  Ref,\n  HTMLAttributeAnchorTarget,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type LinkElementType = HTMLAnchorElement;\n\nexport interface LinkProps {\n  id?: string;\n  children?: React.ReactNode;\n  /** Path to link resource or page */\n  href?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  title?: string;\n  style?: React.CSSProperties;\n  referrerPolicy?: ReferrerPolicy;\n  download?: boolean | string;\n  rel?: string;\n  target?: HTMLAttributeAnchorTarget;\n  isDisabled?: boolean;\n  onClick?: () => void;\n  to?: unknown;\n  elementType?: React.ElementType;\n}\n\nexport type LinkRef = Ref<LinkElementType>;\n\nconst Link: ForwardedRefComponent<LinkProps, LinkElementType> = forwardRef(\n  (props: LinkProps, ref: LinkRef) => {\n    const {\n      isDisabled = false,\n      elementType: Component = \"a\",\n      style,\n      className,\n      ...otherProps\n    } = props;\n\n    const disabledStyles: CSSProperties = {\n      pointerEvents: \"none\",\n    };\n\n    const styles = { ...style, ...(isDisabled && disabledStyles) };\n    const classes = classNames(\"mobius\", \"mobius/Link\", className, {\n      \"--is-disabled\": isDisabled,\n    });\n\n    return (\n      <Component\n        ref={ref}\n        style={styles}\n        className={classes}\n        aria-disabled={isDisabled}\n        {...otherProps}\n      >\n        {props.children}\n      </Component>\n    );\n  },\n);\n\nLink.displayName = \"Link\";\nexport { Link };\n"],"names":["Link","forwardRef","props","ref","isDisabled","elementType","Component","style","className","otherProps","disabledStyles","pointerEvents","styles","classes","classNames","aria-disabled","children","displayName"],"mappings":";;;;+BAkESA;;;eAAAA;;;;+DA7DF;+DACgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BvB,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,aAAa,KAAK,EAClBC,aAAaC,YAAY,GAAG,EAC5BC,KAAK,EACLC,SAAS,EACT,GAAGC,YACJ,GAAGP;IAEJ,MAAMQ,iBAAgC;QACpCC,eAAe;IACjB;IAEA,MAAMC,SAAS;QAAE,GAAGL,KAAK;QAAE,GAAIH,cAAcM,cAAc;IAAE;IAC7D,MAAMG,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeN,WAAW;QAC7D,iBAAiBJ;IACnB;IAEA,qBACE,qBAACE;QACCH,KAAKA;QACLI,OAAOK;QACPJ,WAAWK;QACXE,iBAAeX;QACd,GAAGK,UAAU;kBAEbP,MAAMc,QAAQ;;AAGrB;AAGFhB,KAAKiB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  Ref,\n  HTMLAttributeAnchorTarget,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type LinkElementType = HTMLAnchorElement;\n\nexport interface LinkProps {\n  id?: string;\n  children?: React.ReactNode;\n  /** Path to link resource or page */\n  href?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  title?: string;\n  style?: React.CSSProperties;\n  referrerPolicy?: ReferrerPolicy;\n  download?: boolean | string;\n  rel?: string;\n  target?: HTMLAttributeAnchorTarget;\n  isDisabled?: boolean;\n  onClick?: () => void;\n  to?: unknown;\n  elementType?: React.ElementType;\n}\n\nexport type LinkRef = Ref<LinkElementType>;\n\nconst Link: ForwardedRefComponent<LinkProps, LinkElementType> = forwardRef(\n  (props: LinkProps, ref: LinkRef) => {\n    const {\n      isDisabled = false,\n      elementType: Component = \"a\",\n      style,\n      className,\n      ...otherProps\n    } = props;\n\n    const disabledStyles: CSSProperties = {\n      pointerEvents: \"none\",\n    };\n\n    const styles = { ...style, ...(isDisabled && disabledStyles) };\n    const classes = classNames(\"mobius\", \"mobius-link\", className, {\n      \"--is-disabled\": isDisabled,\n    });\n\n    return (\n      <Component\n        ref={ref}\n        style={styles}\n        className={classes}\n        aria-disabled={isDisabled}\n        {...otherProps}\n      >\n        {props.children}\n      </Component>\n    );\n  },\n);\n\nLink.displayName = \"Link\";\nexport { Link };\n"],"names":["Link","forwardRef","props","ref","isDisabled","elementType","Component","style","className","otherProps","disabledStyles","pointerEvents","styles","classes","classNames","aria-disabled","children","displayName"],"mappings":";;;;+BAkESA;;;eAAAA;;;;+DA7DF;+DACgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BvB,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,aAAa,KAAK,EAClBC,aAAaC,YAAY,GAAG,EAC5BC,KAAK,EACLC,SAAS,EACT,GAAGC,YACJ,GAAGP;IAEJ,MAAMQ,iBAAgC;QACpCC,eAAe;IACjB;IAEA,MAAMC,SAAS;QAAE,GAAGL,KAAK;QAAE,GAAIH,cAAcM,cAAc;IAAE;IAC7D,MAAMG,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeN,WAAW;QAC7D,iBAAiBJ;IACnB;IAEA,qBACE,qBAACE;QACCH,KAAKA;QACLI,OAAOK;QACPJ,WAAWK;QACXE,iBAAeX;QACd,GAAGK,UAAU;kBAEbP,MAAMc,QAAQ;;AAGrB;AAGFhB,KAAKiB,WAAW,GAAG"}

package/dist/cjs/components/LinkButton/LinkButton.js

@@ -20,7 +20,7 @@ function LinkButton({ href, children, className, elementType = "a", ...rest }) {
     if (!href) {
         throw new Error("LinkButton requires a href prop");
     }
-    const classes = (0, _dedupe.default)("mobius", "mobius/LinkButton", className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-link-button", className);
     return(// @ts-expect-error Button only allows elementType of string, not React component
     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button, {
         elementType: elementType,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/LinkButton/LinkButton.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { HTMLAttributeAnchorTarget, MouseEvent } from \"react\";\nimport { Button, ButtonProps } from \"../Button\";\n\nexport interface LinkButtonProps extends Omit<ButtonProps, \"elementType\"> {\n  href: string;\n  title?: string;\n  style?: React.CSSProperties;\n  referrerPolicy?: ReferrerPolicy;\n  download?: boolean | string;\n  rel?: string;\n  target?: HTMLAttributeAnchorTarget;\n  onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n  to?: unknown;\n  elementType?: React.ElementType;\n}\n\nexport function LinkButton({\n  href,\n  children,\n  className,\n  elementType = \"a\",\n  ...rest\n}: LinkButtonProps) {\n  if (!href) {\n    throw new Error(\"LinkButton requires a href prop\");\n  }\n\n  const classes = classNames(\"mobius\", \"mobius/LinkButton\", className);\n\n  return (\n    // @ts-expect-error Button only allows elementType of string, not React component\n    <Button elementType={elementType} href={href} className={classes} {...rest}>\n      {children}\n    </Button>\n  );\n}\n"],"names":["LinkButton","href","children","className","elementType","rest","Error","classes","classNames","Button"],"mappings":";;;;+BAiBgBA;;;eAAAA;;;;+DAjBO;wBAEa;;;;;;AAe7B,SAASA,WAAW,EACzBC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,cAAc,GAAG,EACjB,GAAGC,MACa;IAChB,IAAI,CAACJ,MAAM;QACT,MAAM,IAAIK,MAAM;IAClB;IAEA,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,qBAAqBL;IAE1D,OACE,iFAAiF;kBACjF,qBAACM,cAAM;QAACL,aAAaA;QAAaH,MAAMA;QAAME,WAAWI;QAAU,GAAGF,IAAI;kBACvEH;;AAGP"}
+{"version":3,"sources":["../../../../src/components/LinkButton/LinkButton.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { HTMLAttributeAnchorTarget, MouseEvent } from \"react\";\nimport { Button, ButtonProps } from \"../Button\";\n\nexport interface LinkButtonProps extends Omit<ButtonProps, \"elementType\"> {\n  href: string;\n  title?: string;\n  style?: React.CSSProperties;\n  referrerPolicy?: ReferrerPolicy;\n  download?: boolean | string;\n  rel?: string;\n  target?: HTMLAttributeAnchorTarget;\n  onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n  to?: unknown;\n  elementType?: React.ElementType;\n}\n\nexport function LinkButton({\n  href,\n  children,\n  className,\n  elementType = \"a\",\n  ...rest\n}: LinkButtonProps) {\n  if (!href) {\n    throw new Error(\"LinkButton requires a href prop\");\n  }\n\n  const classes = classNames(\"mobius\", \"mobius-link-button\", className);\n\n  return (\n    // @ts-expect-error Button only allows elementType of string, not React component\n    <Button elementType={elementType} href={href} className={classes} {...rest}>\n      {children}\n    </Button>\n  );\n}\n"],"names":["LinkButton","href","children","className","elementType","rest","Error","classes","classNames","Button"],"mappings":";;;;+BAiBgBA;;;eAAAA;;;;+DAjBO;wBAEa;;;;;;AAe7B,SAASA,WAAW,EACzBC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,cAAc,GAAG,EACjB,GAAGC,MACa;IAChB,IAAI,CAACJ,MAAM;QACT,MAAM,IAAIK,MAAM;IAClB;IAEA,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,sBAAsBL;IAE3D,OACE,iFAAiF;kBACjF,qBAACM,cAAM;QAACL,aAAaA;QAAaH,MAAMA;QAAME,WAAWI;QAAU,GAAGF,IAAI;kBACvEH;;AAGP"}

package/dist/cjs/components/List/List.js

@@ -26,7 +26,7 @@ const List = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         ...restProps,
         reversed: isReversed
     };
-    const classes = (0, _dedupe.default)("mobius", "mobius/List", {
+    const classes = (0, _dedupe.default)("mobius", "mobius-list", {
         "--has-icon": icon,
         [`--is-${liststyletype}`]: liststyletype
     }, otherProps.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import {\n  Ref,\n  Children,\n  cloneElement,\n  forwardRef,\n  ReactNode,\n  RefAttributes,\n  isValidElement,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ListElementType = HTMLOListElement | HTMLUListElement;\nexport type ListStyleType =\n  | \"disc\"\n  | \"circle\"\n  | \"square\"\n  | \"decimal\"\n  | \"georgian\"\n  | \"trad-chinese-informal\"\n  | \"kannada\";\n\nexport interface ListProps extends DOMProps, RefAttributes<ListElementType> {\n  children?: ReactNode;\n  isOrdered?: boolean;\n  isReversed?: boolean;\n  start?: number;\n  liststyletype?: ListStyleType;\n  icon?: ReactNode;\n  className?: string;\n}\n\nexport type ListRef = Ref<ListElementType>;\n\nconst List: ForwardedRefComponent<ListProps, ListElementType> = forwardRef(\n  (props: ListProps, ref: ListRef) => {\n    const Component = props.isOrdered ? \"ol\" : \"ul\";\n    const { children, icon, ...otherProps } = props;\n\n    // Remove props that should not exist on ol or ul element\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { isOrdered, liststyletype, isReversed, ...restProps } = otherProps;\n\n    const mappedProps = {\n      ...restProps,\n      reversed: isReversed,\n    };\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/List\",\n      {\n        \"--has-icon\": icon,\n        [`--is-${liststyletype}`]: liststyletype,\n      },\n      otherProps.className,\n    );\n\n    return (\n      <Component ref={ref as any} {...mappedProps} className={classes}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child, {\n              parentIcon: icon,\n            } as any);\n          }\n\n          return child;\n        })}\n      </Component>\n    );\n  },\n);\n\nList.displayName = \"List\";\nexport { List };\n"],"names":["List","forwardRef","props","ref","Component","isOrdered","children","icon","otherProps","liststyletype","isReversed","restProps","mappedProps","reversed","classes","classNames","className","Children","map","child","isValidElement","cloneElement","parentIcon","displayName"],"mappings":";;;;+BA4ESA;;;eAAAA;;;;uBApEF;+DACgB;;;;;;AA0BvB,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAMC,YAAYF,MAAMG,SAAS,GAAG,OAAO;IAC3C,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,YAAY,GAAGN;IAE1C,yDAAyD;IACzD,6DAA6D;IAC7D,MAAM,EAAEG,SAAS,EAAEI,aAAa,EAAEC,UAAU,EAAE,GAAGC,WAAW,GAAGH;IAE/D,MAAMI,cAAc;QAClB,GAAGD,SAAS;QACZE,UAAUH;IACZ;IAEA,MAAMI,UAAUC,IAAAA,eAAU,EACxB,UACA,eACA;QACE,cAAcR;QACd,CAAC,CAAC,KAAK,EAAEE,cAAc,CAAC,CAAC,EAAEA;IAC7B,GACAD,WAAWQ,SAAS;IAGtB,qBACE,qBAACZ;QAAUD,KAAKA;QAAa,GAAGS,WAAW;QAAEI,WAAWF;kBACrDG,eAAQ,CAACC,GAAG,CAACZ,UAAUa,CAAAA;YACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;gBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;oBACzBG,YAAYf;gBACd;YACF;YAEA,OAAOY;QACT;;AAGN;AAGFnB,KAAKuB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import {\n  Ref,\n  Children,\n  cloneElement,\n  forwardRef,\n  ReactNode,\n  RefAttributes,\n  isValidElement,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ListElementType = HTMLOListElement | HTMLUListElement;\nexport type ListStyleType =\n  | \"disc\"\n  | \"circle\"\n  | \"square\"\n  | \"decimal\"\n  | \"georgian\"\n  | \"trad-chinese-informal\"\n  | \"kannada\";\n\nexport interface ListProps extends DOMProps, RefAttributes<ListElementType> {\n  children?: ReactNode;\n  isOrdered?: boolean;\n  isReversed?: boolean;\n  start?: number;\n  liststyletype?: ListStyleType;\n  icon?: ReactNode;\n  className?: string;\n}\n\nexport type ListRef = Ref<ListElementType>;\n\nconst List: ForwardedRefComponent<ListProps, ListElementType> = forwardRef(\n  (props: ListProps, ref: ListRef) => {\n    const Component = props.isOrdered ? \"ol\" : \"ul\";\n    const { children, icon, ...otherProps } = props;\n\n    // Remove props that should not exist on ol or ul element\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { isOrdered, liststyletype, isReversed, ...restProps } = otherProps;\n\n    const mappedProps = {\n      ...restProps,\n      reversed: isReversed,\n    };\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius-list\",\n      {\n        \"--has-icon\": icon,\n        [`--is-${liststyletype}`]: liststyletype,\n      },\n      otherProps.className,\n    );\n\n    return (\n      <Component ref={ref as any} {...mappedProps} className={classes}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child, {\n              parentIcon: icon,\n            } as any);\n          }\n\n          return child;\n        })}\n      </Component>\n    );\n  },\n);\n\nList.displayName = \"List\";\nexport { List };\n"],"names":["List","forwardRef","props","ref","Component","isOrdered","children","icon","otherProps","liststyletype","isReversed","restProps","mappedProps","reversed","classes","classNames","className","Children","map","child","isValidElement","cloneElement","parentIcon","displayName"],"mappings":";;;;+BA4ESA;;;eAAAA;;;;uBApEF;+DACgB;;;;;;AA0BvB,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAMC,YAAYF,MAAMG,SAAS,GAAG,OAAO;IAC3C,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,YAAY,GAAGN;IAE1C,yDAAyD;IACzD,6DAA6D;IAC7D,MAAM,EAAEG,SAAS,EAAEI,aAAa,EAAEC,UAAU,EAAE,GAAGC,WAAW,GAAGH;IAE/D,MAAMI,cAAc;QAClB,GAAGD,SAAS;QACZE,UAAUH;IACZ;IAEA,MAAMI,UAAUC,IAAAA,eAAU,EACxB,UACA,eACA;QACE,cAAcR;QACd,CAAC,CAAC,KAAK,EAAEE,cAAc,CAAC,CAAC,EAAEA;IAC7B,GACAD,WAAWQ,SAAS;IAGtB,qBACE,qBAACZ;QAAUD,KAAKA;QAAa,GAAGS,WAAW;QAAEI,WAAWF;kBACrDG,eAAQ,CAACC,GAAG,CAACZ,UAAUa,CAAAA;YACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;gBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;oBACzBG,YAAYf;gBACd;YACF;YAEA,OAAOY;QACT;;AAGN;AAGFnB,KAAKuB,WAAW,GAAG"}

package/dist/cjs/components/List/ListItem.js

@@ -19,11 +19,11 @@ function _interop_require_default(obj) {
 const ListItem = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { parentIcon, icon, children, ...otherProps } = props;
     const iconContent = icon || parentIcon;
-    const classes = (0, _dedupe.default)("mobius", "mobius/ListItem", {
+    const classes = (0, _dedupe.default)("mobius", "mobius-list__item", {
         "--has-icon": iconContent
     }, props.className);
-    const contentClasses = (0, _dedupe.default)("mobius", "mobius/ListItemContent");
-    const iconClasses = (0, _dedupe.default)("mobius", "mobius/ListIcon");
+    const contentClasses = (0, _dedupe.default)("mobius", "mobius-list__item-content");
+    const iconClasses = (0, _dedupe.default)("mobius", "mobius-list__icon");
     if (iconContent) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
             ref: ref,

package/dist/cjs/components/List/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/List/ListItem.tsx"],"sourcesContent":["import { Ref, forwardRef, ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ListItemElementType = HTMLLIElement;\nexport interface ListItemProps\n  extends DOMProps,\n    RefAttributes<ListItemElementType> {\n  children?: ReactNode;\n  value?: number;\n  className?: string;\n  parentIcon?: ReactNode;\n  icon?: ReactNode;\n}\n\nexport type ListItemRef = Ref<ListItemElementType>;\n\nconst ListItem: ForwardedRefComponent<ListItemProps, ListItemElementType> =\n  forwardRef((props: ListItemProps, ref: ListItemRef) => {\n    const { parentIcon, icon, children, ...otherProps } = props;\n    const iconContent = icon || parentIcon;\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/ListItem\",\n      {\n        \"--has-icon\": iconContent,\n      },\n      props.className,\n    );\n    const contentClasses = classNames(\"mobius\", \"mobius/ListItemContent\");\n    const iconClasses = classNames(\"mobius\", \"mobius/ListIcon\");\n\n    if (iconContent) {\n      return (\n        <li ref={ref} {...otherProps} className={classes}>\n          <span className={contentClasses}>\n            <span className={iconClasses}>{iconContent}</span>\n            {children}\n          </span>\n        </li>\n      );\n    }\n\n    return (\n      <li ref={ref} {...otherProps} className={classes}>\n        {children}\n      </li>\n    );\n  });\n\nListItem.displayName = \"ListItem\";\nexport { ListItem };\n"],"names":["ListItem","forwardRef","props","ref","parentIcon","icon","children","otherProps","iconContent","classes","classNames","className","contentClasses","iconClasses","li","span","displayName"],"mappings":";;;;+BAoDSA;;;eAAAA;;;;uBApDiD;+DACnC;;;;;;AAiBvB,MAAMA,yBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IAChC,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,YAAY,GAAGL;IACtD,MAAMM,cAAcH,QAAQD;IAC5B,MAAMK,UAAUC,IAAAA,eAAU,EACxB,UACA,mBACA;QACE,cAAcF;IAChB,GACAN,MAAMS,SAAS;IAEjB,MAAMC,iBAAiBF,IAAAA,eAAU,EAAC,UAAU;IAC5C,MAAMG,cAAcH,IAAAA,eAAU,EAAC,UAAU;IAEzC,IAAIF,aAAa;QACf,qBACE,qBAACM;YAAGX,KAAKA;YAAM,GAAGI,UAAU;YAAEI,WAAWF;sBACvC,cAAA,sBAACM;gBAAKJ,WAAWC;;kCACf,qBAACG;wBAAKJ,WAAWE;kCAAcL;;oBAC9BF;;;;IAIT;IAEA,qBACE,qBAACQ;QAAGX,KAAKA;QAAM,GAAGI,UAAU;QAAEI,WAAWF;kBACtCH;;AAGP;AAEFN,SAASgB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/List/ListItem.tsx"],"sourcesContent":["import { Ref, forwardRef, ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ListItemElementType = HTMLLIElement;\nexport interface ListItemProps\n  extends DOMProps,\n    RefAttributes<ListItemElementType> {\n  children?: ReactNode;\n  value?: number;\n  className?: string;\n  parentIcon?: ReactNode;\n  icon?: ReactNode;\n}\n\nexport type ListItemRef = Ref<ListItemElementType>;\n\nconst ListItem: ForwardedRefComponent<ListItemProps, ListItemElementType> =\n  forwardRef((props: ListItemProps, ref: ListItemRef) => {\n    const { parentIcon, icon, children, ...otherProps } = props;\n    const iconContent = icon || parentIcon;\n    const classes = classNames(\n      \"mobius\",\n      \"mobius-list__item\",\n      {\n        \"--has-icon\": iconContent,\n      },\n      props.className,\n    );\n    const contentClasses = classNames(\"mobius\", \"mobius-list__item-content\");\n    const iconClasses = classNames(\"mobius\", \"mobius-list__icon\");\n\n    if (iconContent) {\n      return (\n        <li ref={ref} {...otherProps} className={classes}>\n          <span className={contentClasses}>\n            <span className={iconClasses}>{iconContent}</span>\n            {children}\n          </span>\n        </li>\n      );\n    }\n\n    return (\n      <li ref={ref} {...otherProps} className={classes}>\n        {children}\n      </li>\n    );\n  });\n\nListItem.displayName = \"ListItem\";\nexport { ListItem };\n"],"names":["ListItem","forwardRef","props","ref","parentIcon","icon","children","otherProps","iconContent","classes","classNames","className","contentClasses","iconClasses","li","span","displayName"],"mappings":";;;;+BAoDSA;;;eAAAA;;;;uBApDiD;+DACnC;;;;;;AAiBvB,MAAMA,yBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IAChC,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,YAAY,GAAGL;IACtD,MAAMM,cAAcH,QAAQD;IAC5B,MAAMK,UAAUC,IAAAA,eAAU,EACxB,UACA,qBACA;QACE,cAAcF;IAChB,GACAN,MAAMS,SAAS;IAEjB,MAAMC,iBAAiBF,IAAAA,eAAU,EAAC,UAAU;IAC5C,MAAMG,cAAcH,IAAAA,eAAU,EAAC,UAAU;IAEzC,IAAIF,aAAa;QACf,qBACE,qBAACM;YAAGX,KAAKA;YAAM,GAAGI,UAAU;YAAEI,WAAWF;sBACvC,cAAA,sBAACM;gBAAKJ,WAAWC;;kCACf,qBAACG;wBAAKJ,WAAWE;kCAAcL;;oBAC9BF;;;;IAIT;IAEA,qBACE,qBAACQ;QAAGX,KAAKA;QAAM,GAAGI,UAAU;QAAEI,WAAWF;kBACtCH;;AAGP;AAEFN,SAASgB,WAAW,GAAG"}

package/dist/cjs/components/LoadingIndicator/LoadingIndicator.js

@@ -20,7 +20,7 @@ function _interop_require_default(obj) {
 }
 const LoadingIndicator = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { icon = _icons.loading, ...otherProps } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/LoadingIndicator", otherProps.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-loading-indicator", otherProps.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
         icon: icon,
         spin: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/LoadingIndicator/LoadingIndicator.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { loading } from \"@simplybusiness/icons\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Icon, IconProps } from \"../Icon\";\n\nexport interface LoadingIndicatorProps\n  extends RefAttributes<SVGSVGElement>,\n    IconProps {}\n\nexport type LoadingIndicatorRef = Ref<SVGSVGElement>;\n\nconst LoadingIndicator: ForwardedRefComponent<\n  LoadingIndicatorProps,\n  SVGSVGElement\n> = forwardRef((props: LoadingIndicatorProps, ref: LoadingIndicatorRef) => {\n  const { icon = loading, ...otherProps } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/LoadingIndicator\",\n    otherProps.className,\n  );\n\n  return (\n    <Icon icon={icon} spin ref={ref} {...otherProps} className={classes} />\n  );\n});\n\nLoadingIndicator.displayName = \"LoadingIndicator\";\nexport { LoadingIndicator };\n"],"names":["LoadingIndicator","forwardRef","props","ref","icon","loading","otherProps","classes","classNames","className","Icon","spin","displayName"],"mappings":";;;;+BA8BSA;;;eAAAA;;;;uBA9BsC;+DACxB;uBACC;sBAEQ;;;;;;AAQhC,MAAMA,iCAGFC,IAAAA,iBAAU,EAAC,CAACC,OAA8BC;IAC5C,MAAM,EAAEC,OAAOC,cAAO,EAAE,GAAGC,YAAY,GAAGJ;IAE1C,MAAMK,UAAUC,IAAAA,eAAU,EACxB,UACA,2BACAF,WAAWG,SAAS;IAGtB,qBACE,qBAACC,UAAI;QAACN,MAAMA;QAAMO,IAAI;QAACR,KAAKA;QAAM,GAAGG,UAAU;QAAEG,WAAWF;;AAEhE;AAEAP,iBAAiBY,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/LoadingIndicator/LoadingIndicator.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { loading } from \"@simplybusiness/icons\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Icon, IconProps } from \"../Icon\";\n\nexport interface LoadingIndicatorProps\n  extends RefAttributes<SVGSVGElement>,\n    IconProps {}\n\nexport type LoadingIndicatorRef = Ref<SVGSVGElement>;\n\nconst LoadingIndicator: ForwardedRefComponent<\n  LoadingIndicatorProps,\n  SVGSVGElement\n> = forwardRef((props: LoadingIndicatorProps, ref: LoadingIndicatorRef) => {\n  const { icon = loading, ...otherProps } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-loading-indicator\",\n    otherProps.className,\n  );\n\n  return (\n    <Icon icon={icon} spin ref={ref} {...otherProps} className={classes} />\n  );\n});\n\nLoadingIndicator.displayName = \"LoadingIndicator\";\nexport { LoadingIndicator };\n"],"names":["LoadingIndicator","forwardRef","props","ref","icon","loading","otherProps","classes","classNames","className","Icon","spin","displayName"],"mappings":";;;;+BA8BSA;;;eAAAA;;;;uBA9BsC;+DACxB;uBACC;sBAEQ;;;;;;AAQhC,MAAMA,iCAGFC,IAAAA,iBAAU,EAAC,CAACC,OAA8BC;IAC5C,MAAM,EAAEC,OAAOC,cAAO,EAAE,GAAGC,YAAY,GAAGJ;IAE1C,MAAMK,UAAUC,IAAAA,eAAU,EACxB,UACA,4BACAF,WAAWG,SAAS;IAGtB,qBACE,qBAACC,UAAI;QAACN,MAAMA;QAAMO,IAAI;QAACR,KAAKA;QAAM,GAAGG,UAAU;QAAEG,WAAWF;;AAEhE;AAEAP,iBAAiBY,WAAW,GAAG"}