@simplybusiness/mobius 4.16.0 → 5.0.0

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

@@ -5,7 +5,7 @@ import classNames from "classnames/dedupe";
 import { Box } from "../Box";
 const BreadcrumbItem = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { isDisabled = false, isCurrent = false, "aria-current": ariaCurrent = "page", children, separator = /*#__PURE__*/ _jsx(Box, {
-        className: "mobius/BreadcrumbSeparator",
+        className: "mobius-breadcrumb__separator",
         "aria-hidden": "true",
         children: ">"
     }), ...otherProps } = props;
@@ -17,7 +17,7 @@ const BreadcrumbItem = /*#__PURE__*/ forwardRef((props, ref)=>{
         }
     };
     // Reshape class name and apply to outer element
-    const classes = classNames("mobius", "mobius/BreadcrumbItem", props.className);
+    const classes = classNames("mobius", "mobius-breadcrumb__item", props.className);
     const child = typeof children === "string" ? /*#__PURE__*/ _jsx("span", {
         ...itemProps,
         children: children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  ReactNode,\n  ReactElement,\n  cloneElement,\n  Children,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Box } from \"../Box\";\n\nexport type BreadcrumbItemElementType = HTMLLIElement;\n\nexport interface BreadcrumbItemProps extends DOMProps {\n  \"aria-current\"?:\n    | \"page\"\n    | \"step\"\n    | \"location\"\n    | \"date\"\n    | \"time\"\n    | boolean\n    | \"true\"\n    | \"false\";\n  isDisabled?: boolean;\n  isCurrent?: boolean;\n  separator?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\nexport type BreadcrumbItemRef = Ref<BreadcrumbItemElementType>;\n\nconst BreadcrumbItem: ForwardedRefComponent<\n  BreadcrumbItemProps,\n  BreadcrumbItemElementType\n> = forwardRef((props: BreadcrumbItemProps, ref: BreadcrumbItemRef) => {\n  const {\n    isDisabled = false,\n    isCurrent = false,\n    \"aria-current\": ariaCurrent = \"page\",\n    children,\n    separator = (\n      <Box className=\"mobius/BreadcrumbSeparator\" aria-hidden=\"true\">\n        {\">\"}\n      </Box>\n    ),\n    ...otherProps\n  } = props;\n  const { itemProps } = {\n    itemProps: {\n      \"aria-current\": isCurrent ? ariaCurrent : undefined,\n      \"aria-disabled\": isDisabled || isCurrent,\n      ...otherProps,\n    },\n  };\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/BreadcrumbItem\",\n    props.className,\n  );\n\n  const child =\n    typeof children === \"string\" ? (\n      <span {...itemProps}>{children}</span>\n    ) : (\n      (Children.only(children) as ReactElement)\n    );\n\n  return (\n    <li className={classes}>\n      {cloneElement(child, { ...child.props, ...itemProps, ref })}\n      {!props.isCurrent && separator}\n    </li>\n  );\n});\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\nexport { BreadcrumbItem };\n"],"names":["forwardRef","cloneElement","Children","classNames","Box","BreadcrumbItem","props","ref","isDisabled","isCurrent","ariaCurrent","children","separator","className","aria-hidden","otherProps","itemProps","undefined","classes","child","span","only","li","displayName"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EAGVC,YAAY,EACZC,QAAQ,QACH,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,GAAG,QAAQ,SAAS;AAuB7B,MAAMC,+BAGFL,WAAW,CAACM,OAA4BC;IAC1C,MAAM,EACJC,aAAa,KAAK,EAClBC,YAAY,KAAK,EACjB,gBAAgBC,cAAc,MAAM,EACpCC,QAAQ,EACRC,0BACE,KAACR;QAAIS,WAAU;QAA6BC,eAAY;kBACrD;MAEJ,EACD,GAAGC,YACJ,GAAGT;IACJ,MAAM,EAAEU,SAAS,EAAE,GAAG;QACpBA,WAAW;YACT,gBAAgBP,YAAYC,cAAcO;YAC1C,iBAAiBT,cAAcC;YAC/B,GAAGM,UAAU;QACf;IACF;IAEA,gDAAgD;IAChD,MAAMG,UAAUf,WACd,UACA,yBACAG,MAAMO,SAAS;IAGjB,MAAMM,QACJ,OAAOR,aAAa,yBAClB,KAACS;QAAM,GAAGJ,SAAS;kBAAGL;SAErBT,SAASmB,IAAI,CAACV;IAGnB,qBACE,MAACW;QAAGT,WAAWK;;0BACZjB,aAAakB,OAAO;gBAAE,GAAGA,MAAMb,KAAK;gBAAE,GAAGU,SAAS;gBAAET;YAAI;YACxD,CAACD,MAAMG,SAAS,IAAIG;;;AAG3B;AAEAP,eAAekB,WAAW,GAAG;AAC7B,SAASlB,cAAc,GAAG"}
+{"version":3,"sources":["../../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  ReactNode,\n  ReactElement,\n  cloneElement,\n  Children,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Box } from \"../Box\";\n\nexport type BreadcrumbItemElementType = HTMLLIElement;\n\nexport interface BreadcrumbItemProps extends DOMProps {\n  \"aria-current\"?:\n    | \"page\"\n    | \"step\"\n    | \"location\"\n    | \"date\"\n    | \"time\"\n    | boolean\n    | \"true\"\n    | \"false\";\n  isDisabled?: boolean;\n  isCurrent?: boolean;\n  separator?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\nexport type BreadcrumbItemRef = Ref<BreadcrumbItemElementType>;\n\nconst BreadcrumbItem: ForwardedRefComponent<\n  BreadcrumbItemProps,\n  BreadcrumbItemElementType\n> = forwardRef((props: BreadcrumbItemProps, ref: BreadcrumbItemRef) => {\n  const {\n    isDisabled = false,\n    isCurrent = false,\n    \"aria-current\": ariaCurrent = \"page\",\n    children,\n    separator = (\n      <Box className=\"mobius-breadcrumb__separator\" aria-hidden=\"true\">\n        {\">\"}\n      </Box>\n    ),\n    ...otherProps\n  } = props;\n  const { itemProps } = {\n    itemProps: {\n      \"aria-current\": isCurrent ? ariaCurrent : undefined,\n      \"aria-disabled\": isDisabled || isCurrent,\n      ...otherProps,\n    },\n  };\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-breadcrumb__item\",\n    props.className,\n  );\n\n  const child =\n    typeof children === \"string\" ? (\n      <span {...itemProps}>{children}</span>\n    ) : (\n      (Children.only(children) as ReactElement)\n    );\n\n  return (\n    <li className={classes}>\n      {cloneElement(child, { ...child.props, ...itemProps, ref })}\n      {!props.isCurrent && separator}\n    </li>\n  );\n});\n\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\nexport { BreadcrumbItem };\n"],"names":["forwardRef","cloneElement","Children","classNames","Box","BreadcrumbItem","props","ref","isDisabled","isCurrent","ariaCurrent","children","separator","className","aria-hidden","otherProps","itemProps","undefined","classes","child","span","only","li","displayName"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EAGVC,YAAY,EACZC,QAAQ,QACH,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,GAAG,QAAQ,SAAS;AAuB7B,MAAMC,+BAGFL,WAAW,CAACM,OAA4BC;IAC1C,MAAM,EACJC,aAAa,KAAK,EAClBC,YAAY,KAAK,EACjB,gBAAgBC,cAAc,MAAM,EACpCC,QAAQ,EACRC,0BACE,KAACR;QAAIS,WAAU;QAA+BC,eAAY;kBACvD;MAEJ,EACD,GAAGC,YACJ,GAAGT;IACJ,MAAM,EAAEU,SAAS,EAAE,GAAG;QACpBA,WAAW;YACT,gBAAgBP,YAAYC,cAAcO;YAC1C,iBAAiBT,cAAcC;YAC/B,GAAGM,UAAU;QACf;IACF;IAEA,gDAAgD;IAChD,MAAMG,UAAUf,WACd,UACA,2BACAG,MAAMO,SAAS;IAGjB,MAAMM,QACJ,OAAOR,aAAa,yBAClB,KAACS;QAAM,GAAGJ,SAAS;kBAAGL;SAErBT,SAASmB,IAAI,CAACV;IAGnB,qBACE,MAACW;QAAGT,WAAWK;;0BACZjB,aAAakB,OAAO;gBAAE,GAAGA,MAAMb,KAAK;gBAAE,GAAGU,SAAS;gBAAET;YAAI;YACxD,CAACD,MAAMG,SAAS,IAAIG;;;AAG3B;AAEAP,eAAekB,WAAW,GAAG;AAC7B,SAASlB,cAAc,GAAG"}

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -12,7 +12,7 @@ const Breadcrumbs = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { children, ...otherProps } = props;
     const childArray = Children.toArray(children);
     // Reshape class name and apply to outer element
-    const classes = classNames("mobius", "mobius/Breadcrumb", otherProps.className);
+    const classes = classNames("mobius", "mobius-breadcrumb", otherProps.className);
     return /*#__PURE__*/ _jsx("nav", {
         ref: ref,
         ...otherProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  Children,\n  cloneElement,\n  ReactElement,\n  RefAttributes,\n  ReactNode,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type BreadcrumbsElementType = HTMLUListElement;\n\nexport interface BreadcrumbsProps\n  extends RefAttributes<BreadcrumbsElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children?: ReactNode;\n  \"aria-label\"?: string;\n}\n\nexport type BreadcrumbsRef = Ref<BreadcrumbsElementType>;\n\nconst Breadcrumbs: ForwardedRefComponent<\n  BreadcrumbsProps,\n  BreadcrumbsElementType\n> = forwardRef((props: BreadcrumbsProps, ref: BreadcrumbsRef) => {\n  const { \"aria-label\": ariaLabel = \"Breadcrumbs\" } = props;\n  const { navProps } = { navProps: { \"aria-label\": ariaLabel } };\n  const { children, ...otherProps } = props;\n  const childArray = Children.toArray(children);\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/Breadcrumb\",\n    otherProps.className,\n  );\n\n  return (\n    <nav ref={ref} {...otherProps} {...navProps} className={classes}>\n      <ul>\n        {childArray.map((child, i) =>\n          cloneElement(child as ReactElement, {\n            isCurrent: i === childArray.length - 1,\n          }),\n        )}\n      </ul>\n    </nav>\n  );\n});\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\nexport { Breadcrumbs };\n"],"names":["forwardRef","Children","cloneElement","classNames","Breadcrumbs","props","ref","ariaLabel","navProps","children","otherProps","childArray","toArray","classes","className","nav","ul","map","child","i","isCurrent","length","displayName"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,QAAQ,EACRC,YAAY,QAIP,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAe3C,MAAMC,4BAGFJ,WAAW,CAACK,OAAyBC;IACvC,MAAM,EAAE,cAAcC,YAAY,aAAa,EAAE,GAAGF;IACpD,MAAM,EAAEG,QAAQ,EAAE,GAAG;QAAEA,UAAU;YAAE,cAAcD;QAAU;IAAE;IAC7D,MAAM,EAAEE,QAAQ,EAAE,GAAGC,YAAY,GAAGL;IACpC,MAAMM,aAAaV,SAASW,OAAO,CAACH;IAEpC,gDAAgD;IAChD,MAAMI,UAAUV,WACd,UACA,qBACAO,WAAWI,SAAS;IAGtB,qBACE,KAACC;QAAIT,KAAKA;QAAM,GAAGI,UAAU;QAAG,GAAGF,QAAQ;QAAEM,WAAWD;kBACtD,cAAA,KAACG;sBACEL,WAAWM,GAAG,CAAC,CAACC,OAAOC,kBACtBjB,aAAagB,OAAuB;oBAClCE,WAAWD,MAAMR,WAAWU,MAAM,GAAG;gBACvC;;;AAKV;AAEAjB,YAAYkB,WAAW,GAAG;AAC1B,SAASlB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Ref,\n  forwardRef,\n  Children,\n  cloneElement,\n  ReactElement,\n  RefAttributes,\n  ReactNode,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type BreadcrumbsElementType = HTMLUListElement;\n\nexport interface BreadcrumbsProps\n  extends RefAttributes<BreadcrumbsElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  children?: ReactNode;\n  \"aria-label\"?: string;\n}\n\nexport type BreadcrumbsRef = Ref<BreadcrumbsElementType>;\n\nconst Breadcrumbs: ForwardedRefComponent<\n  BreadcrumbsProps,\n  BreadcrumbsElementType\n> = forwardRef((props: BreadcrumbsProps, ref: BreadcrumbsRef) => {\n  const { \"aria-label\": ariaLabel = \"Breadcrumbs\" } = props;\n  const { navProps } = { navProps: { \"aria-label\": ariaLabel } };\n  const { children, ...otherProps } = props;\n  const childArray = Children.toArray(children);\n\n  // Reshape class name and apply to outer element\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-breadcrumb\",\n    otherProps.className,\n  );\n\n  return (\n    <nav ref={ref} {...otherProps} {...navProps} className={classes}>\n      <ul>\n        {childArray.map((child, i) =>\n          cloneElement(child as ReactElement, {\n            isCurrent: i === childArray.length - 1,\n          }),\n        )}\n      </ul>\n    </nav>\n  );\n});\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\nexport { Breadcrumbs };\n"],"names":["forwardRef","Children","cloneElement","classNames","Breadcrumbs","props","ref","ariaLabel","navProps","children","otherProps","childArray","toArray","classes","className","nav","ul","map","child","i","isCurrent","length","displayName"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,QAAQ,EACRC,YAAY,QAIP,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAe3C,MAAMC,4BAGFJ,WAAW,CAACK,OAAyBC;IACvC,MAAM,EAAE,cAAcC,YAAY,aAAa,EAAE,GAAGF;IACpD,MAAM,EAAEG,QAAQ,EAAE,GAAG;QAAEA,UAAU;YAAE,cAAcD;QAAU;IAAE;IAC7D,MAAM,EAAEE,QAAQ,EAAE,GAAGC,YAAY,GAAGL;IACpC,MAAMM,aAAaV,SAASW,OAAO,CAACH;IAEpC,gDAAgD;IAChD,MAAMI,UAAUV,WACd,UACA,qBACAO,WAAWI,SAAS;IAGtB,qBACE,KAACC;QAAIT,KAAKA;QAAM,GAAGI,UAAU;QAAG,GAAGF,QAAQ;QAAEM,WAAWD;kBACtD,cAAA,KAACG;sBACEL,WAAWM,GAAG,CAAC,CAACC,OAAOC,kBACtBjB,aAAagB,OAAuB;oBAClCE,WAAWD,MAAMR,WAAWU,MAAM,GAAG;gBACvC;;;AAKV;AAEAjB,YAAYkB,WAAW,GAAG;AAC1B,SAASlB,WAAW,GAAG"}

package/dist/esm/components/Button/Button.js

@@ -27,7 +27,7 @@ const Button = /*#__PURE__*/ forwardRef((props, ref)=>{
     };
     const buttonVariant = getVariant(variant);
     // Reshape class name and apply to outer element
-    const classes = classNames("mobius", "mobius/Button", `--variant-${buttonVariant}`, `--size-${size}`, {
+    const classes = classNames("mobius", "mobius-button", `--variant-${buttonVariant}`, `--size-${size}`, {
         "--is-disabled": isDisabled,
         "--is-loading": isLoading,
         "--is-success": isSuccess && !isLoading
@@ -38,7 +38,9 @@ const Button = /*#__PURE__*/ forwardRef((props, ref)=>{
         ...buttonProps,
         ...otherProps,
         children: [
-            isLoading ? /*#__PURE__*/ _jsx(Loading, {}) : children && children,
+            isLoading ? /*#__PURE__*/ _jsx(Loading, {
+                children: children
+            }) : children,
             isSuccess && !isLoading && /*#__PURE__*/ _jsx(Success, {})
         ]
     });

package/dist/esm/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\nimport { useDeprecationWarning } from \"../../hooks\";\nimport { Success } from \"./Success\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    useDeprecationWarning({\n      \"variant 'inverse'\": variant === \"inverse\",\n      \"variant 'inverse-ghost'\": variant === \"inverse-ghost\",\n    });\n\n    // Map deprecated variants to alternative ones\n    const getVariant = (type: Variant) => {\n      if (type === \"inverse\") {\n        return \"basic\";\n      }\n\n      if (type === \"inverse-ghost\") {\n        return \"secondary\";\n      }\n\n      return variant;\n    };\n\n    const buttonVariant = getVariant(variant);\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${buttonVariant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n        {isSuccess && !isLoading && <Success />}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["forwardRef","classNames","Loading","useButton","useDeprecationWarning","Success","Button","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","getVariant","type","buttonVariant","classes","className","displayName"],"mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAAyBC,SAAS,QAAQ,wBAAwB;AAClE,SAASC,qBAAqB,QAAQ,cAAc;AACpD,SAASC,OAAO,QAAQ,YAAY;AAkCpC,MAAMC,uBACJN,WAAW,CAACO,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACX,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGZ;IACJ,MAAM,EAAEa,WAAW,EAAE,GAAGjB,UAAUI;IAElCH,sBAAsB;QACpB,qBAAqBW,YAAY;QACjC,2BAA2BA,YAAY;IACzC;IAEA,8CAA8C;IAC9C,MAAMM,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOP;IACT;IAEA,MAAMQ,gBAAgBF,WAAWN;IAEjC,gDAAgD;IAChD,MAAMS,UAAUvB,WACd,UACA,iBACA,CAAC,UAAU,EAAEsB,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAEP,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWM,SAAS;IAEtBN,WAAWM,SAAS,GAAGD;IAEvB,qBACE,MAACb;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;;YACjDN,0BAAY,KAACX,eAAaO,YAAYA;YACtCK,aAAa,CAACD,2BAAa,KAACR;;;AAGnC;AAEFC,OAAOoB,WAAW,GAAG;AACrB,SAASpB,MAAM,GAAG"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode, MouseEvent } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\nimport { useDeprecationWarning } from \"../../hooks\";\nimport { Success } from \"./Success\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    useDeprecationWarning({\n      \"variant 'inverse'\": variant === \"inverse\",\n      \"variant 'inverse-ghost'\": variant === \"inverse-ghost\",\n    });\n\n    // Map deprecated variants to alternative ones\n    const getVariant = (type: Variant) => {\n      if (type === \"inverse\") {\n        return \"basic\";\n      }\n\n      if (type === \"inverse-ghost\") {\n        return \"secondary\";\n      }\n\n      return variant;\n    };\n\n    const buttonVariant = getVariant(variant);\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius-button\",\n      `--variant-${buttonVariant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading>{children}</Loading> : children}\n        {isSuccess && !isLoading && <Success />}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["forwardRef","classNames","Loading","useButton","useDeprecationWarning","Success","Button","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","getVariant","type","buttonVariant","classes","className","displayName"],"mappings":"AAAA;;AAEA,SAAcA,UAAU,QAA8C,QAAQ;AAC9E,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAAyBC,SAAS,QAAQ,wBAAwB;AAClE,SAASC,qBAAqB,QAAQ,cAAc;AACpD,SAASC,OAAO,QAAQ,YAAY;AAkCpC,MAAMC,uBACJN,WAAW,CAACO,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACX,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGZ;IACJ,MAAM,EAAEa,WAAW,EAAE,GAAGjB,UAAUI;IAElCH,sBAAsB;QACpB,qBAAqBW,YAAY;QACjC,2BAA2BA,YAAY;IACzC;IAEA,8CAA8C;IAC9C,MAAMM,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOP;IACT;IAEA,MAAMQ,gBAAgBF,WAAWN;IAEjC,gDAAgD;IAChD,MAAMS,UAAUvB,WACd,UACA,iBACA,CAAC,UAAU,EAAEsB,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAEP,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWM,SAAS;IAEtBN,WAAWM,SAAS,GAAGD;IAEvB,qBACE,MAACb;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;;YACjDN,0BAAY,KAACX;0BAASO;iBAAsBA;YAC5CK,aAAa,CAACD,2BAAa,KAACR;;;AAGnC;AAEFC,OAAOoB,WAAW,GAAG;AACrB,SAASpB,MAAM,GAAG"}

package/dist/esm/components/Button/Loading.js

@@ -1,21 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { loading } from "@simplybusiness/icons";
 import { Icon } from "../Icon";
-const Loading = ()=>/*#__PURE__*/ _jsxs(_Fragment, {
+import { VisuallyHidden } from "../VisuallyHidden";
+const Loading = (props)=>{
+    const { children } = props;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx("div", {
-                className: "mobius/ButtonIconWrapper",
+                className: "mobius-button__icon-wrapper",
                 children: /*#__PURE__*/ _jsx(Icon, {
                     icon: loading,
-                    spin: true
+                    spin: true,
+                    size: "md"
                 })
             }),
-            /*#__PURE__*/ _jsx("span", {
-                className: "mobius/LoadingText",
+            /*#__PURE__*/ _jsx(VisuallyHidden, {
+                className: "mobius-button__loading-text",
                 children: "Loading"
-            })
+            }),
+            children
         ]
     });
+};
 export { Loading };
 
 //# sourceMappingURL=Loading.js.map

package/dist/esm/components/Button/Loading.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Loading.tsx"],"sourcesContent":["import { loading } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\n\nconst Loading = () => (\n  <>\n    <div className=\"mobius/ButtonIconWrapper\">\n      <Icon icon={loading} spin />\n    </div>\n    <span className=\"mobius/LoadingText\">Loading</span>\n  </>\n);\n\nexport { Loading };\n"],"names":["loading","Icon","Loading","div","className","icon","spin","span"],"mappings":";AAAA,SAASA,OAAO,QAAQ,wBAAwB;AAChD,SAASC,IAAI,QAAQ,UAAU;AAE/B,MAAMC,UAAU,kBACd;;0BACE,KAACC;gBAAIC,WAAU;0BACb,cAAA,KAACH;oBAAKI,MAAML;oBAASM,IAAI;;;0BAE3B,KAACC;gBAAKH,WAAU;0BAAqB;;;;AAIzC,SAASF,OAAO,GAAG"}
+{"version":3,"sources":["../../../../src/components/Button/Loading.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { loading } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\ntype LoadingProps = {\n  children: ReactNode;\n};\n\nconst Loading = (props: LoadingProps) => {\n  const { children } = props;\n\n  return (\n    <>\n      <div className=\"mobius-button__icon-wrapper\">\n        <Icon icon={loading} spin size=\"md\" />\n      </div>\n      <VisuallyHidden className=\"mobius-button__loading-text\">\n        Loading\n      </VisuallyHidden>\n      {children}\n    </>\n  );\n};\n\nexport { Loading };\n"],"names":["loading","Icon","VisuallyHidden","Loading","props","children","div","className","icon","spin","size"],"mappings":";AACA,SAASA,OAAO,QAAQ,wBAAwB;AAChD,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,cAAc,QAAQ,oBAAoB;AAMnD,MAAMC,UAAU,CAACC;IACf,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,qBACE;;0BACE,KAACE;gBAAIC,WAAU;0BACb,cAAA,KAACN;oBAAKO,MAAMR;oBAASS,IAAI;oBAACC,MAAK;;;0BAEjC,KAACR;gBAAeK,WAAU;0BAA8B;;YAGvDF;;;AAGP;AAEA,SAASF,OAAO,GAAG"}

package/dist/esm/components/Button/Success.js

@@ -5,13 +5,14 @@ import { VisuallyHidden } from "../VisuallyHidden";
 const Success = ()=>/*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx("div", {
-                className: "mobius/ButtonIconWrapper",
+                className: "mobius-button__icon-wrapper",
                 children: /*#__PURE__*/ _jsx(Icon, {
-                    icon: tick
+                    icon: tick,
+                    size: "md"
                 })
             }),
             /*#__PURE__*/ _jsx(VisuallyHidden, {
-                className: "mobius/SuccessText",
+                className: "mobius-button__success-text",
                 children: "Success"
             })
         ]

package/dist/esm/components/Button/Success.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Success.tsx"],"sourcesContent":["import { tick } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nconst Success = () => (\n  <>\n    <div className=\"mobius/ButtonIconWrapper\">\n      <Icon icon={tick} />\n    </div>\n    <VisuallyHidden className=\"mobius/SuccessText\">Success</VisuallyHidden>\n  </>\n);\n\nexport { Success };\n"],"names":["tick","Icon","VisuallyHidden","Success","div","className","icon"],"mappings":";AAAA,SAASA,IAAI,QAAQ,wBAAwB;AAC7C,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,cAAc,QAAQ,oBAAoB;AAEnD,MAAMC,UAAU,kBACd;;0BACE,KAACC;gBAAIC,WAAU;0BACb,cAAA,KAACJ;oBAAKK,MAAMN;;;0BAEd,KAACE;gBAAeG,WAAU;0BAAqB;;;;AAInD,SAASF,OAAO,GAAG"}
+{"version":3,"sources":["../../../../src/components/Button/Success.tsx"],"sourcesContent":["import { tick } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nconst Success = () => (\n  <>\n    <div className=\"mobius-button__icon-wrapper\">\n      <Icon icon={tick} size=\"md\" />\n    </div>\n    <VisuallyHidden className=\"mobius-button__success-text\">\n      Success\n    </VisuallyHidden>\n  </>\n);\n\nexport { Success };\n"],"names":["tick","Icon","VisuallyHidden","Success","div","className","icon","size"],"mappings":";AAAA,SAASA,IAAI,QAAQ,wBAAwB;AAC7C,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,cAAc,QAAQ,oBAAoB;AAEnD,MAAMC,UAAU,kBACd;;0BACE,KAACC;gBAAIC,WAAU;0BACb,cAAA,KAACJ;oBAAKK,MAAMN;oBAAMO,MAAK;;;0BAEzB,KAACL;gBAAeG,WAAU;0BAA8B;;;;AAM5D,SAASF,OAAO,GAAG"}

package/dist/esm/components/Checkbox/Checkbox.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useId } from "react";
 import classNames from "classnames/dedupe";
 import { squareTick, square } from "@simplybusiness/icons";
@@ -7,6 +7,7 @@ import { ErrorMessage } from "../ErrorMessage";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { useValidationClasses } from "../../hooks";
 import { Icon } from "../Icon";
+import { Stack } from "../Stack";
 export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, defaultSelected = false, isReadOnly, name, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
     const [selected, setSelected] = useState(defaultSelected);
@@ -24,9 +25,10 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     }, validationClasses);
     // Append an additional wrapper class name to differenitate from input
-    const wrapperClasses = classNames("mobius", "mobius/Checkbox", sharedClasses, className);
-    const inputClasses = classNames("mobius/CheckboxInput", sharedClasses);
-    const iconClasses = classNames("mobius/CheckboxIcon", sharedClasses);
+    const wrapperClasses = classNames("mobius", "mobius-checkbox", sharedClasses, className);
+    const labelClasses = classNames("mobius-checkbox__label", sharedClasses);
+    const inputClasses = classNames("mobius-checkbox__input", sharedClasses);
+    const iconClasses = classNames("mobius-checkbox__icon", sharedClasses);
     const errorMessageId = useId();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = spaceDelimitedList([
@@ -53,10 +55,12 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
             toggleState();
         }
     };
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: "xs",
+        className: wrapperClasses,
         children: [
             /*#__PURE__*/ _jsxs("label", {
-                className: wrapperClasses,
+                className: labelClasses,
                 children: [
                     /*#__PURE__*/ _jsx("input", {
                         "aria-describedby": describedBy,
@@ -85,7 +89,7 @@ export const Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
                     }),
                     /*#__PURE__*/ _jsx("span", {
                         id: labelId,
-                        className: "mobius/CheckboxLabel",
+                        className: "mobius-checkbox__visible-label",
                         children: label
                     })
                 ]

package/dist/esm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    name,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    sharedClasses,\n    className,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", sharedClasses);\n  const iconClasses = classNames(\"mobius/CheckboxIcon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          name={name}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={selected ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius/CheckboxLabel\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["forwardRef","useRef","useState","useId","classNames","squareTick","square","ErrorMessage","spaceDelimitedList","useValidationClasses","Icon","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","name","value","ariaDescribedBy","rest","selected","setSelected","fallbackRef","refObj","inputId","validationClasses","sharedClasses","wrapperClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","icon","size","span"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,QAAQ,EAGRC,KAAK,QACA,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,MAAM,QAAQ,wBAAwB;AAC3D,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,IAAI,QAAQ,UAAU;AAE/B,OAAO,MAAMC,yBAGTX,WAAW,CAACY,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,IAAI,EACJC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGhB;IACJ,MAAM,CAACiB,UAAUC,YAAY,GAAG5B,SAAkBqB;IAClD,MAAMQ,cAAc9B,OAAyB;IAC7C,MAAM+B,SAASnB,OAAOkB;IACtB,MAAME,UAAU9B;IAChB,MAAM+B,oBAAoBzB,qBAAqB;QAC7CS;QACAC;IACF;IACA,MAAMgB,gBAAgB/B,WACpB;QACE,iBAAiBY;QACjB,iBAAiBa;QACjB,iBAAiB,OAAOZ,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAiB;IAEF,sEAAsE;IACtE,MAAME,iBAAiBhC,WACrB,UACA,mBACA+B,eACAd;IAEF,MAAMgB,eAAejC,WAAW,wBAAwB+B;IACxD,MAAMG,cAAclC,WAAW,uBAAuB+B;IACtD,MAAMI,iBAAiBpC;IACvB,MAAMqC,yBAAyBlB,eAAeiB,iBAAiBE;IAC/D,MAAMC,cAAclC,mBAAmB;QACrCgC;QACAb;KACD;IACD,MAAMgB,UAAUxC;IAEhB,MAAMyC,cAAc;QAClBd,YAAY,CAACD;IACf;IAEA,MAAMgB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI1B,UAAU;YACZA,SAAS0B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,MAAC7B;gBAAMM,WAAWe;;kCAChB,KAACgB;wBACCC,oBAAkBX;wBAClBY,qBAAmBd;wBACnBe,gBAAcpC;wBACdqC,mBAAiBb;wBACjBc,UAAUjC;wBACVkC,UAAU1C;wBACVH,KAAKmB;wBACLX,WAAWgB;wBACXsB,SAASd;wBACTzB,UAAU6B;wBACVW,WAAWV;wBACXW,MAAK;wBACLC,gBAAgBvC;wBAChBwC,UAAU9C;wBACVH,IAAIA,MAAMmB;wBACVR,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,KAAClB;wBACCsD,MAAMnC,WAAWxB,aAAaC;wBAC9B2D,MAAK;wBACL5C,WAAWiB;;kCAEb,KAAC4B;wBAAKpD,IAAI6B;wBAAStB,WAAU;kCAC1BN;;;;0BAGL,KAACR;gBAAaO,IAAIyB;gBAAgBjB,cAAcA;;;;AAGtD,GAAG"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\nimport { Stack } from \"../Stack\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    name,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox\",\n    sharedClasses,\n    className,\n  );\n  const labelClasses = classNames(\"mobius-checkbox__label\", sharedClasses);\n  const inputClasses = classNames(\"mobius-checkbox__input\", sharedClasses);\n  const iconClasses = classNames(\"mobius-checkbox__icon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <Stack gap=\"xs\" className={wrapperClasses}>\n      <label className={labelClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          name={name}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={selected ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius-checkbox__visible-label\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </Stack>\n  );\n});\n"],"names":["forwardRef","useRef","useState","useId","classNames","squareTick","square","ErrorMessage","spaceDelimitedList","useValidationClasses","Icon","Stack","Checkbox","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","name","value","ariaDescribedBy","rest","selected","setSelected","fallbackRef","refObj","inputId","validationClasses","sharedClasses","wrapperClasses","labelClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","gap","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","icon","size","span"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,MAAM,EACNC,QAAQ,EAGRC,KAAK,QACA,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,MAAM,QAAQ,wBAAwB;AAC3D,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,KAAK,QAAQ,WAAW;AAEjC,OAAO,MAAMC,yBAGTZ,WAAW,CAACa,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,IAAI,EACJC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGhB;IACJ,MAAM,CAACiB,UAAUC,YAAY,GAAG7B,SAAkBsB;IAClD,MAAMQ,cAAc/B,OAAyB;IAC7C,MAAMgC,SAASnB,OAAOkB;IACtB,MAAME,UAAU/B;IAChB,MAAMgC,oBAAoB1B,qBAAqB;QAC7CU;QACAC;IACF;IACA,MAAMgB,gBAAgBhC,WACpB;QACE,iBAAiBa;QACjB,iBAAiBa;QACjB,iBAAiB,OAAOZ,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAiB;IAEF,sEAAsE;IACtE,MAAME,iBAAiBjC,WACrB,UACA,mBACAgC,eACAd;IAEF,MAAMgB,eAAelC,WAAW,0BAA0BgC;IAC1D,MAAMG,eAAenC,WAAW,0BAA0BgC;IAC1D,MAAMI,cAAcpC,WAAW,yBAAyBgC;IACxD,MAAMK,iBAAiBtC;IACvB,MAAMuC,yBAAyBnB,eAAekB,iBAAiBE;IAC/D,MAAMC,cAAcpC,mBAAmB;QACrCkC;QACAd;KACD;IACD,MAAMiB,UAAU1C;IAEhB,MAAM2C,cAAc;QAClBf,YAAY,CAACD;IACf;IAEA,MAAMiB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI3B,UAAU;YACZA,SAAS2B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE,MAACnC;QAAM2C,KAAI;QAAKhC,WAAWe;;0BACzB,MAACrB;gBAAMM,WAAWgB;;kCAChB,KAACiB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAActC;wBACduC,mBAAiBd;wBACjBe,UAAUnC;wBACVoC,UAAU5C;wBACVH,KAAKmB;wBACLX,WAAWiB;wBACXuB,SAASf;wBACT1B,UAAU8B;wBACVY,WAAWX;wBACXY,MAAK;wBACLC,gBAAgBzC;wBAChB0C,UAAUhD;wBACVH,IAAIA,MAAMmB;wBACVR,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,KAACnB;wBACCyD,MAAMrC,WAAWzB,aAAaC;wBAC9B8D,MAAK;wBACL9C,WAAWkB;;kCAEb,KAAC6B;wBAAKtD,IAAI8B;wBAASvB,WAAU;kCAC1BN;;;;0BAGL,KAACT;gBAAaQ,IAAI0B;gBAAgBlB,cAAcA;;;;AAGtD,GAAG"}

package/dist/esm/components/Checkbox/CheckboxGroup.js

@@ -9,7 +9,7 @@ import { useValidationClasses } from "../../hooks";
 export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
     const [selected, setSelected] = useState(defaultValue);
-    const checkboxGroupClasses = classNames("mobius", "mobius/CheckboxGroup", className, {
+    const checkboxGroupClasses = classNames("mobius", "mobius-checkbox-group", className, {
         "--is-horizontal": orientation === "horizontal",
         "--is-vertical": orientation === "vertical",
         "--is-required": typeof isRequired === "boolean" && isRequired,
@@ -66,7 +66,7 @@ export const CheckboxGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
                 children: label
             }),
             /*#__PURE__*/ _jsx("div", {
-                className: "mobius/CheckboxWrapper",
+                className: "mobius-checkbox-group__wrapper",
                 children: Children.map(children, (child)=>{
                     if (/*#__PURE__*/ isValidElement(child)) {
                         return /*#__PURE__*/ cloneElement(child, {

package/dist/esm/components/Checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/CheckboxGroup\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/CheckboxWrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              isInvalid,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["Children","forwardRef","cloneElement","isValidElement","useId","useState","useEffect","classNames","Label","ErrorMessage","spaceDelimitedList","useValidationClasses","CheckboxGroup","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","checkboxGroupClasses","validationClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","handleChange","event","target","value","checked","filter","item","div","aria-labelledby","role","style","count","elementType","id","map","child","defaultSelected","includes"],"mappings":"AAAA;;AAEA,SACEA,QAAQ,EACRC,UAAU,EAEVC,YAAY,EACZC,cAAc,EACdC,KAAK,EAELC,QAAQ,EACRC,SAAS,QACJ,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAQ3C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AAEnD,OAAO,MAAMC,8BAGTX,WAAW,CAACY,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGzB,SAAmBoB;IACnD,MAAMM,uBAAuBxB,WAC3B,UACA,wBACAe,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOH,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMe,oBAAoBrB,qBAAqB;QAC7CO;QACAC;IACF;IACA,MAAMc,eAAe1B,WACnB;QACE,iBAAiBS;IACnB,GACAgB;IAEF,MAAME,iBAAiB9B;IACvB,MAAM+B,yBAAyBZ,eAAeW,iBAAiBE;IAC/D,MAAMC,cAAc3B,mBAAmB;QACrCyB;QACAtB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMyB,UAAUlC;IAEhB,MAAMmC,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZb,YAAYD,SAASe,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXb,YAAY;mBAAID;gBAAUa;aAAM;QAClC;IACF;IAEApC,UAAU;QACR,IAAIe,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,MAACyB;QACE,GAAGlB,IAAI;QACRmB,mBAAiBlC,KAAK,CAAC,kBAAkB,IAAIyB;QAC7CxB,KAAKA;QACLQ,WAAWS;QACXiB,MAAK;QACLC,OACE;YACE,4BAA4BtB,eAAe3B,SAASkD,KAAK,CAAC1B;QAC5D;;YAGDT,uBACC,KAACP;gBAAM2C,aAAY;gBAAOC,IAAId;gBAAShB,WAAWW;0BAC/ClB;;0BAGL,KAAC+B;gBAAIxB,WAAU;0BACZtB,SAASqD,GAAG,CAAC7B,UAAU8B,CAAAA;oBACtB,kBAAInD,eAAemD,QAAQ;wBACzB,qBAAOpD,aAAaoD,OAAuB;4BACzCtC;4BACAC;4BACAS;4BACAP;4BACAoC,iBAAiB1B,SAAS2B,QAAQ,CAACF,MAAMzC,KAAK,CAAC6B,KAAK;4BACpDrB,UAAUkB;4BACV,oBAAoBF;wBACtB;oBACF;oBAEA,OAAOiB;gBACT;;YAED/B,8BACC,KAACd;gBAAa2C,IAAIlB;gBAAgBX,cAAcA;;;;AAIxD,GAAG"}
+{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius-checkbox-group\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius-checkbox-group__wrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              isInvalid,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["Children","forwardRef","cloneElement","isValidElement","useId","useState","useEffect","classNames","Label","ErrorMessage","spaceDelimitedList","useValidationClasses","CheckboxGroup","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","checkboxGroupClasses","validationClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","labelId","handleChange","event","target","value","checked","filter","item","div","aria-labelledby","role","style","count","elementType","id","map","child","defaultSelected","includes"],"mappings":"AAAA;;AAEA,SACEA,QAAQ,EACRC,UAAU,EAEVC,YAAY,EACZC,cAAc,EACdC,KAAK,EAELC,QAAQ,EACRC,SAAS,QACJ,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAQ3C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,oBAAoB,QAAQ,cAAc;AAEnD,OAAO,MAAMC,8BAGTX,WAAW,CAACY,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGzB,SAAmBoB;IACnD,MAAMM,uBAAuBxB,WAC3B,UACA,yBACAe,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOH,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMe,oBAAoBrB,qBAAqB;QAC7CO;QACAC;IACF;IACA,MAAMc,eAAe1B,WACnB;QACE,iBAAiBS;IACnB,GACAgB;IAEF,MAAME,iBAAiB9B;IACvB,MAAM+B,yBAAyBZ,eAAeW,iBAAiBE;IAC/D,MAAMC,cAAc3B,mBAAmB;QACrCyB;QACAtB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMyB,UAAUlC;IAEhB,MAAMmC,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZb,YAAYD,SAASe,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXb,YAAY;mBAAID;gBAAUa;aAAM;QAClC;IACF;IAEApC,UAAU;QACR,IAAIe,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,MAACyB;QACE,GAAGlB,IAAI;QACRmB,mBAAiBlC,KAAK,CAAC,kBAAkB,IAAIyB;QAC7CxB,KAAKA;QACLQ,WAAWS;QACXiB,MAAK;QACLC,OACE;YACE,4BAA4BtB,eAAe3B,SAASkD,KAAK,CAAC1B;QAC5D;;YAGDT,uBACC,KAACP;gBAAM2C,aAAY;gBAAOC,IAAId;gBAAShB,WAAWW;0BAC/ClB;;0BAGL,KAAC+B;gBAAIxB,WAAU;0BACZtB,SAASqD,GAAG,CAAC7B,UAAU8B,CAAAA;oBACtB,kBAAInD,eAAemD,QAAQ;wBACzB,qBAAOpD,aAAaoD,OAAuB;4BACzCtC;4BACAC;4BACAS;4BACAP;4BACAoC,iBAAiB1B,SAAS2B,QAAQ,CAACF,MAAMzC,KAAK,CAAC6B,KAAK;4BACpDrB,UAAUkB;4BACV,oBAAoBF;wBACtB;oBACF;oBAEA,OAAOiB;gBACT;;YAED/B,8BACC,KAACd;gBAAa2C,IAAIlB;gBAAgBX,cAAcA;;;;AAIxD,GAAG"}

package/dist/esm/components/Container/Container.js

@@ -4,7 +4,7 @@ import classNames from "classnames/dedupe";
 import { sizeClasses } from "../../utils";
 const Container = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { elementType: Element = "div", size = "md", ...otherProps } = props;
-    const classes = classNames("mobius", "mobius/Container", sizeClasses(size), otherProps.className);
+    const classes = classNames("mobius", "mobius-container", sizeClasses(size), otherProps.className);
     return /*#__PURE__*/ _jsx(Element, {
         ref: ref,
         ...otherProps,

package/dist/esm/components/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import {\n  forwardRef,\n  Ref,\n  RefAttributes,\n  ReactNode,\n  ElementType,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type ContainerElementType = HTMLElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: string | ElementType;\n  size?: SizeType;\n  children?: ReactNode;\n  style?: CSSProperties;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", size = \"md\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Container\",\n      sizeClasses(size),\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["forwardRef","classNames","sizeClasses","Container","props","ref","elementType","Element","size","otherProps","classes","className","displayName"],"mappings":";AAAA,SACEA,UAAU,QAML,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAI3C,SAASC,WAAW,QAAQ,cAAc;AAkB1C,MAAMC,0BACJH,WAAW,CAACI,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,OAAO,IAAI,EAAE,GAAGC,YAAY,GAAGL;IAErE,MAAMM,UAAUT,WACd,UACA,oBACAC,YAAYM,OACZC,WAAWE,SAAS;IAGtB,qBAAO,KAACJ;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEE,WAAWD;;AACvD;AAEFP,UAAUS,WAAW,GAAG;AACxB,SAAST,SAAS,GAAG"}
+{"version":3,"sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import {\n  forwardRef,\n  Ref,\n  RefAttributes,\n  ReactNode,\n  ElementType,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type ContainerElementType = HTMLElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: string | ElementType;\n  size?: SizeType;\n  children?: ReactNode;\n  style?: CSSProperties;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", size = \"md\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius-container\",\n      sizeClasses(size),\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["forwardRef","classNames","sizeClasses","Container","props","ref","elementType","Element","size","otherProps","classes","className","displayName"],"mappings":";AAAA,SACEA,UAAU,QAML,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAI3C,SAASC,WAAW,QAAQ,cAAc;AAkB1C,MAAMC,0BACJH,WAAW,CAACI,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,OAAO,IAAI,EAAE,GAAGC,YAAY,GAAGL;IAErE,MAAMM,UAAUT,WACd,UACA,oBACAC,YAAYM,OACZC,WAAWE,SAAS;IAGtB,qBAAO,KAACJ;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEE,WAAWD;;AACvD;AAEFP,UAAUS,WAAW,GAAG;AACxB,SAAST,SAAS,GAAG"}

package/dist/esm/components/Divider/Divider.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
 const Divider = ({ "aria-orientation": ariaOrientation = "horizontal", className, ...rest })=>{
-    const classes = classNames("mobius", "mobius/Divider", className);
+    const classes = classNames("mobius", "mobius-divider", className);
     return /*#__PURE__*/ _jsx("div", {
         className: classes,
         role: "separator",
         "aria-orientation": ariaOrientation,
         ...rest,
         children: /*#__PURE__*/ _jsx("div", {
-            className: "mobius/DividerInner"
+            className: "mobius-divider__inner"
         })
     });
 };

package/dist/esm/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":["classNames","Divider","ariaOrientation","className","rest","classes","div","role","aria-orientation","displayName"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAS3C,MAAMC,UAAU,CAAC,EACf,oBAAoBC,kBAAkB,YAAY,EAClDC,SAAS,EACT,GAAGC,MACU;IACb,MAAMC,UAAUL,WAAW,UAAU,kBAAkBG;IAEvD,qBACE,KAACG;QACCH,WAAWE;QACXE,MAAK;QACLC,oBAAkBN;QACjB,GAAGE,IAAI;kBAER,cAAA,KAACE;YAAIH,WAAU;;;AAGrB;AAEAF,QAAQQ,WAAW,GAAG;AACtB,SAASR,OAAO,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":["classNames","Divider","ariaOrientation","className","rest","classes","div","role","aria-orientation","displayName"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAS3C,MAAMC,UAAU,CAAC,EACf,oBAAoBC,kBAAkB,YAAY,EAClDC,SAAS,EACT,GAAGC,MACU;IACb,MAAMC,UAAUL,WAAW,UAAU,kBAAkBG;IAEvD,qBACE,KAACG;QACCH,WAAWE;QACXE,MAAK;QACLC,oBAAkBN;QACjB,GAAGE,IAAI;kBAER,cAAA,KAACE;YAAIH,WAAU;;;AAGrB;AAEAF,QAAQQ,WAAW,GAAG;AACtB,SAASR,OAAO,GAAG"}

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

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 const Content = /*#__PURE__*/ forwardRef(({ children, ...otherProps }, ref)=>/*#__PURE__*/ _jsx("div", {
         ref: ref,
         ...otherProps,
-        className: "mobius/DrawerContent",
+        className: "mobius-drawer__content",
         children: children
     }));
 Content.displayName = "Content";

package/dist/esm/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":["forwardRef","Content","children","otherProps","ref","div","className","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAU1E,MAAMC,wBAAUD,WACd,CAAC,EAAEE,QAAQ,EAAE,GAAGC,YAA0B,EAAEC,oBAC1C,KAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCJ;;AAKPD,QAAQM,WAAW,GAAG;AACtB,SAASN,OAAO,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":["forwardRef","Content","children","otherProps","ref","div","className","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAU1E,MAAMC,wBAAUD,WACd,CAAC,EAAEE,QAAQ,EAAE,GAAGC,YAA0B,EAAEC,oBAC1C,KAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCJ;;AAKPD,QAAQM,WAAW,GAAG;AACtB,SAASN,OAAO,GAAG"}

package/dist/esm/components/Drawer/Drawer.js

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

package/dist/esm/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":["classNames","forwardRef","useEffect","useId","useMemo","useRef","useState","useDialog","mergeRefs","supportsDialog","VisuallyHidden","DrawerContext","TRANSITION_CSS_VARIABLE","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","dialogRef","shouldTransition","setShouldTransition","close","transition","isEnabled","CSSVariable","hiddenId","dialogClasses","contextValue","dialog","id","onCancel","aria-describedby","div","Provider","value","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAEEC,UAAU,EACVC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,SAAS,EAAEC,cAAc,QAAQ,cAAc;AACxD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,aAAa,QAAQ,kBAAkB;AAMhD,MAAMC,0BAA0B;AAEhC,MAAMC,uBAASZ,WAAW,CAACa,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,YAAYnB,OAAiC;IACnD,MAAM,CAACoB,kBAAkBC,oBAAoB,GAAGpB,SAAS;IACzD,MAAM,EAAEqB,KAAK,EAAE,GAAGpB,UAAU;QAC1BQ,KAAKS;QACLR;QACAK;QACAC;QACAM,YAAY;YACVC,WAAW;YACXC,aAAalB;QACf;IACF;IACA,MAAMmB,WAAW,CAAC,uBAAuB,EAAE5B,QAAQ,CAAC;IAEpD,MAAM6B,gBAAgBhC,WACpB,UACA,iBACA,CAAC,EAAE,EAAEmB,UAAU,CAAC,EAChBF,WACA;QACE,uBAAuBQ;IACzB;IAGFvB,UAAU;QACRwB,oBAAoBjB;IACtB,GAAG,EAAE;IAEL,MAAMwB,eAAe7B,QACnB,IAAO,CAAA;YACLkB,SAASK;YACTT;QACF,CAAA,GACA;QAACS;QAAOT;KAAW;IAGrB,qBACE,MAACgB;QACCC,IAAIhC;QACJY,KAAKP,UAAU;YAACgB;YAAWT;SAAI;QAC/BqB,UAAUT;QACVV,WAAWe;QACXK,oBAAkBN;;0BAElB,KAACrB;0BACC,cAAA,KAAC4B;oBAAIH,IAAIJ;8BAAWX;;;0BAEtB,KAACT,cAAc4B,QAAQ;gBAACC,OAAOP;0BAC5BV;;;;AAIT;AAEAV,OAAO4B,WAAW,GAAG;AACrB,SAAS5B,MAAM,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":["classNames","forwardRef","useEffect","useId","useMemo","useRef","useState","useDialog","mergeRefs","supportsDialog","VisuallyHidden","DrawerContext","TRANSITION_CSS_VARIABLE","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","dialogRef","shouldTransition","setShouldTransition","close","transition","isEnabled","CSSVariable","hiddenId","dialogClasses","contextValue","dialog","id","onCancel","aria-describedby","div","Provider","value","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAEEC,UAAU,EACVC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,SAAS,EAAEC,cAAc,QAAQ,cAAc;AACxD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,aAAa,QAAQ,kBAAkB;AAMhD,MAAMC,0BAA0B;AAEhC,MAAMC,uBAASZ,WAAW,CAACa,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,YAAYnB,OAAiC;IACnD,MAAM,CAACoB,kBAAkBC,oBAAoB,GAAGpB,SAAS;IACzD,MAAM,EAAEqB,KAAK,EAAE,GAAGpB,UAAU;QAC1BQ,KAAKS;QACLR;QACAK;QACAC;QACAM,YAAY;YACVC,WAAW;YACXC,aAAalB;QACf;IACF;IACA,MAAMmB,WAAW,CAAC,uBAAuB,EAAE5B,QAAQ,CAAC;IAEpD,MAAM6B,gBAAgBhC,WACpB,UACA,iBACA,CAAC,EAAE,EAAEmB,UAAU,CAAC,EAChBF,WACA;QACE,uBAAuBQ;IACzB;IAGFvB,UAAU;QACRwB,oBAAoBjB;IACtB,GAAG,EAAE;IAEL,MAAMwB,eAAe7B,QACnB,IAAO,CAAA;YACLkB,SAASK;YACTT;QACF,CAAA,GACA;QAACS;QAAOT;KAAW;IAGrB,qBACE,MAACgB;QACCC,IAAIhC;QACJY,KAAKP,UAAU;YAACgB;YAAWT;SAAI;QAC/BqB,UAAUT;QACVV,WAAWe;QACXK,oBAAkBN;;0BAElB,KAACrB;0BACC,cAAA,KAAC4B;oBAAIH,IAAIJ;8BAAWX;;;0BAEtB,KAACT,cAAc4B,QAAQ;gBAACC,OAAOP;0BAC5BV;;;;AAIT;AAEAV,OAAO4B,WAAW,GAAG;AACrB,SAAS5B,MAAM,GAAG"}

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

@@ -9,14 +9,14 @@ const Header = /*#__PURE__*/ forwardRef(({ children, ...otherProps }, ref)=>{
     return /*#__PURE__*/ _jsxs("header", {
         ref: ref,
         ...otherProps,
-        className: "mobius/DrawerHeader",
+        className: "mobius-drawer__header",
         children: [
             children,
             /*#__PURE__*/ _jsxs(Button, {
                 "aria-label": "Close",
                 variant: "basic",
                 onPress: onClose,
-                className: "mobius/DrawerClose",
+                className: "mobius-drawer__close",
                 size: "sm",
                 children: [
                     /*#__PURE__*/ _jsx(Icon, {

package/dist/esm/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":["forwardRef","cross","Button","Icon","useDrawer","Header","children","otherProps","ref","onClose","closeLabel","header","className","aria-label","variant","onPress","size","icon","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,SAAS,QAAQ,cAAc;AAUxC,MAAMC,uBAASL,WACb,CAAC,EAAEM,QAAQ,EAAE,GAAGC,YAAyB,EAAEC;IACzC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGN;IAEhC,qBACE,MAACO;QAAOH,KAAKA;QAAM,GAAGD,UAAU;QAAEK,WAAU;;YACzCN;0BACD,MAACJ;gBACCW,cAAW;gBACXC,SAAQ;gBACRC,SAASN;gBACTG,WAAU;gBACVI,MAAK;;kCAEL,KAACb;wBAAKc,MAAMhB;;oBAAS;oBAAES;;;;;AAI/B;AAGFL,OAAOa,WAAW,GAAG;AACrB,SAASb,MAAM,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":["forwardRef","cross","Button","Icon","useDrawer","Header","children","otherProps","ref","onClose","closeLabel","header","className","aria-label","variant","onPress","size","icon","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,SAAS,QAAQ,cAAc;AAUxC,MAAMC,uBAASL,WACb,CAAC,EAAEM,QAAQ,EAAE,GAAGC,YAAyB,EAAEC;IACzC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGN;IAEhC,qBACE,MAACO;QAAOH,KAAKA;QAAM,GAAGD,UAAU;QAAEK,WAAU;;YACzCN;0BACD,MAACJ;gBACCW,cAAW;gBACXC,SAAQ;gBACRC,SAASN;gBACTG,WAAU;gBACVI,MAAK;;kCAEL,KAACb;wBAAKc,MAAMhB;;oBAAS;oBAAES;;;;;AAI/B;AAGFL,OAAOa,WAAW,GAAG;AACrB,SAASb,MAAM,GAAG"}

package/dist/esm/components/DropdownMenu/DropdownMenu.js

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

package/dist/esm/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":["forwardRef","Children","isValidElement","cloneElement","useState","useDropdownMenu","classNames","Button","DropdownMenu","props","ref","elementType","Element","trigger","label","children","otherProps","activeId","setActiveId","numberOfItems","count","buttonProps","itemProps","isOpen","open","setIsOpen","classes","className","triggerClasses","listClasses","handleChildClick","onClick","index","ul","role","map","child","active","displayName"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EAGVC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,QAAQ,QAEH,QAAQ;AACf,OAAOC,qBAAqB,sCAAsC;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,MAAM,QAAQ,YAAY;AAsBnC,MAAMC,6BAGFR,WAAW,CAACS,OAA0BC;IACxC,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,QAAQ,MAAM,EACdC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAM,CAACQ,UAAUC,YAAY,GAAGd,SAAwB;IACxD,MAAMe,gBAAgBlB,SAASmB,KAAK,CAACL;IACrC,MAAM,EACJM,WAAW,EACXC,SAAS,EACTC,QAAQC,IAAI,EACZC,SAAS,EACV,GAAGpB,gBAAgBc;IAEpB,MAAMO,UAAUpB,WACd,UACA,uBACAU,WAAWW,SAAS;IAEtB,MAAMC,iBAAiBtB,WAAW,UAAU;IAC5C,MAAMuB,cAAcvB,WAAW,UAAU,2BAA2B;QAClE,aAAakB;IACf;IAEA,MAAMM,mBAAmB,CAAC,EAAEC,OAAO,EAAmB,EAAEC;QACtDd,YAAYc;QACZP,UAAU;QAEV,IAAIM,SAAS;YACXA;QACF;IACF;IAEA,qBACE,MAACnB;QAAQF,KAAKA;QAAM,GAAGM,UAAU;QAAEW,WAAWD;;YAC3Cb,wBACCV,aAAaU,SAAS;gBACpBc,WAAWC;gBACXJ;gBACAV;gBACA,GAAGO,WAAW;YAChB,mBAEA,KAACd;gBAAOoB,WAAWC;gBAAiB,GAAGP,WAAW;0BAC/CP;;0BAGL,KAACmB;gBAAGN,WAAWE;gBAAaK,MAAK;0BAC9BjC,SAASkC,GAAG,CAACpB,UAAU,CAACqB,OAAOJ;oBAC9B,kBAAI9B,eAAekC,QAAQ;wBACzB,qBAAOjC,aAAaiC,OAAO;4BACzBL,SAAS,IAAMD,iBAAiBM,MAAM3B,KAAK,EAAEuB;4BAC7CK,QAAQL,UAAUf;4BAClB,GAAGK,SAAS,CAACU,MAAM;wBACrB;oBACF;oBAEA,OAAOI;gBACT;;;;AAIR;AAEA5B,aAAa8B,WAAW,GAAG;AAC3B,SAAS9B,YAAY,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":["forwardRef","Children","isValidElement","cloneElement","useState","useDropdownMenu","classNames","Button","DropdownMenu","props","ref","elementType","Element","trigger","label","children","otherProps","activeId","setActiveId","numberOfItems","count","buttonProps","itemProps","isOpen","open","setIsOpen","classes","className","triggerClasses","listClasses","handleChildClick","onClick","index","ul","role","map","child","active","displayName"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EAGVC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,QAAQ,QAEH,QAAQ;AACf,OAAOC,qBAAqB,sCAAsC;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,MAAM,QAAQ,YAAY;AAsBnC,MAAMC,6BAGFR,WAAW,CAACS,OAA0BC;IACxC,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,QAAQ,MAAM,EACdC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAM,CAACQ,UAAUC,YAAY,GAAGd,SAAwB;IACxD,MAAMe,gBAAgBlB,SAASmB,KAAK,CAACL;IACrC,MAAM,EACJM,WAAW,EACXC,SAAS,EACTC,QAAQC,IAAI,EACZC,SAAS,EACV,GAAGpB,gBAAgBc;IAEpB,MAAMO,UAAUpB,WACd,UACA,wBACAU,WAAWW,SAAS;IAEtB,MAAMC,iBAAiBtB,WAAW,UAAU;IAC5C,MAAMuB,cAAcvB,WAAW,UAAU,8BAA8B;QACrE,aAAakB;IACf;IAEA,MAAMM,mBAAmB,CAAC,EAAEC,OAAO,EAAmB,EAAEC;QACtDd,YAAYc;QACZP,UAAU;QAEV,IAAIM,SAAS;YACXA;QACF;IACF;IAEA,qBACE,MAACnB;QAAQF,KAAKA;QAAM,GAAGM,UAAU;QAAEW,WAAWD;;YAC3Cb,wBACCV,aAAaU,SAAS;gBACpBc,WAAWC;gBACXJ;gBACAV;gBACA,GAAGO,WAAW;YAChB,mBAEA,KAACd;gBAAOoB,WAAWC;gBAAiB,GAAGP,WAAW;0BAC/CP;;0BAGL,KAACmB;gBAAGN,WAAWE;gBAAaK,MAAK;0BAC9BjC,SAASkC,GAAG,CAACpB,UAAU,CAACqB,OAAOJ;oBAC9B,kBAAI9B,eAAekC,QAAQ;wBACzB,qBAAOjC,aAAaiC,OAAO;4BACzBL,SAAS,IAAMD,iBAAiBM,MAAM3B,KAAK,EAAEuB;4BAC7CK,QAAQL,UAAUf;4BAClB,GAAGK,SAAS,CAACU,MAAM;wBACrB;oBACF;oBAEA,OAAOI;gBACT;;;;AAIR;AAEA5B,aAAa8B,WAAW,GAAG;AAC3B,SAAS9B,YAAY,GAAG"}

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

@@ -3,7 +3,7 @@ import { forwardRef, cloneElement, isValidElement, Children } from "react";
 import classNames from "classnames/dedupe";
 const Item = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { elementType: Element = "li", active, onClick, children, ...otherProps } = props;
-    const classes = classNames("mobius", "mobius/DropdownMenuItem", {
+    const classes = classNames("mobius", "mobius-dropdown-menu__item", {
         "--is-active": active
     }, otherProps.className);
     return /*#__PURE__*/ _jsx(Element, {

package/dist/esm/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":["forwardRef","cloneElement","isValidElement","Children","classNames","Item","props","ref","elementType","Element","active","onClick","children","otherProps","classes","className","map","child","childClasses","span","displayName"],"mappings":";AAAA,SAEEA,UAAU,EAGVC,YAAY,EAEZC,cAAc,EACdC,QAAQ,QACH,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAiB3C,MAAMC,qBAA0DL,WAC9D,CAACM,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,IAAI,EAC3BC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAMQ,UAAUV,WACd,UACA,2BACA;QAAE,eAAeM;IAAO,GACxBG,WAAWE,SAAS;IAGtB,qBACE,KAACN;QAAQF,KAAKA;QAAKI,SAASA;QAAU,GAAGE,UAAU;kBAChDV,SAASa,GAAG,CAACJ,UAAUK,CAAAA;YACtB,kBAAIf,eAAee,QAAQ;gBACzB,MAAMC,eAAed,WAAWa,MAAMX,KAAK,CAACS,SAAS,EAAED;gBACvD,qBAAOb,aAAagB,OAAuB;oBACzCF,WAAWG;gBACb;YACF;YAEA,qBAAO,KAACC;gBAAKJ,WAAWD;0BAAUG;;QACpC;;AAGN;AAGFZ,KAAKe,WAAW,GAAG;AACnB,SAASf,IAAI,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":["forwardRef","cloneElement","isValidElement","Children","classNames","Item","props","ref","elementType","Element","active","onClick","children","otherProps","classes","className","map","child","childClasses","span","displayName"],"mappings":";AAAA,SAEEA,UAAU,EAGVC,YAAY,EAEZC,cAAc,EACdC,QAAQ,QACH,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAiB3C,MAAMC,qBAA0DL,WAC9D,CAACM,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,IAAI,EAC3BC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAMQ,UAAUV,WACd,UACA,8BACA;QAAE,eAAeM;IAAO,GACxBG,WAAWE,SAAS;IAGtB,qBACE,KAACN;QAAQF,KAAKA;QAAKI,SAASA;QAAU,GAAGE,UAAU;kBAChDV,SAASa,GAAG,CAACJ,UAAUK,CAAAA;YACtB,kBAAIf,eAAee,QAAQ;gBACzB,MAAMC,eAAed,WAAWa,MAAMX,KAAK,CAACS,SAAS,EAAED;gBACvD,qBAAOb,aAAagB,OAAuB;oBACzCF,WAAWG;gBACb;YACF;YAEA,qBAAO,KAACC;gBAAKJ,WAAWD;0BAAUG;;QACpC;;AAGN;AAGFZ,KAAKe,WAAW,GAAG;AACnB,SAASf,IAAI,GAAG"}

package/dist/esm/components/ErrorMessage/ErrorMessage.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
+import { error } from "@simplybusiness/icons";
 import { Text } from "../Text";
+import { Icon } from "../Icon";
 export const ErrorMessage = ({ id, errorMessage, className })=>{
-    const classes = classNames("mobius", "mobius/ErrorMessage", className);
+    const classes = classNames("mobius", "mobius-error-message", className);
     if (!errorMessage) return null;
     return /*#__PURE__*/ _jsxs("div", {
         id: id,
         className: classes,
         "data-testid": "ErrorMessage",
         children: [
-            /*#__PURE__*/ _jsx("span", {
-                className: "mobius/ErrorIcon"
+            /*#__PURE__*/ _jsx(Icon, {
+                icon: error,
+                className: "mobius-error-message__icon"
             }),
             /*#__PURE__*/ _jsx(Text, {
                 elementType: "span",
-                className: "mobius/ErrorText",
+                className: "mobius-error-message__text",
                 children: errorMessage
             })
         ]

package/dist/esm/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":["classNames","Text","ErrorMessage","id","errorMessage","className","classes","div","data-testid","span","elementType","displayName"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAASC,IAAI,QAAQ,UAAU;AAQ/B,OAAO,MAAMC,eAAe,CAAC,EAC3BC,EAAE,EACFC,YAAY,EACZC,SAAS,EACS;IAClB,MAAMC,UAAUN,WAAW,UAAU,uBAAuBK;IAE5D,IAAI,CAACD,cAAc,OAAO;IAE1B,qBACE,MAACG;QAAIJ,IAAIA;QAAIE,WAAWC;QAASE,eAAY;;0BAC3C,KAACC;gBAAKJ,WAAU;;0BAChB,KAACJ;gBAAKS,aAAY;gBAAOL,WAAU;0BAChCD;;;;AAIT,EAAE;AAEFF,aAAaS,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":["classNames","error","Text","Icon","ErrorMessage","id","errorMessage","className","classes","div","data-testid","icon","elementType","displayName"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,IAAI,QAAQ,UAAU;AAQ/B,OAAO,MAAMC,eAAe,CAAC,EAC3BC,EAAE,EACFC,YAAY,EACZC,SAAS,EACS;IAClB,MAAMC,UAAUR,WAAW,UAAU,wBAAwBO;IAE7D,IAAI,CAACD,cAAc,OAAO;IAE1B,qBACE,MAACG;QAAIJ,IAAIA;QAAIE,WAAWC;QAASE,eAAY;;0BAC3C,KAACP;gBAAKQ,MAAMV;gBAAOM,WAAU;;0BAC7B,KAACL;gBAAKU,aAAY;gBAAOL,WAAU;0BAChCD;;;;AAIT,EAAE;AAEFF,aAAaS,WAAW,GAAG"}