@simplybusiness/mobius 4.16.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # Changelog
 
+## 5.0.0
+
+### Major Changes
+
+- 93b9c39: ### Breaking Change
+
+  External margins removed from the following components:
+
+  - `Accordion`
+  - `Alert`
+  - `Checkbox`
+  - `ErrorMessage`
+  - `List`
+  - `NumberField`
+  - `Radio`
+  - `Select`
+  - `TextArea`
+  - `TextField`
+
+  ### Why
+
+  Having external margins on a component can make it difficult to compose components together. By removing these margins, it allows for more flexibility when composing components together.
+
+  ### How to Update
+
+  Spacing can be added back by using a `<Box />` component with the appropriate padding props.
+
+- 8525e04: Use BEM for CSS classes
+
+### Minor Changes
+
+- 7e166e1: Add `<Stack />` component
+
+### Patch Changes
+
+- 61126b3: Use Mobius icon in `<ErrorMessage>`; fix `<Button>` default to `isLoading` change affecting width
+- 27ff678: Add Thumbtack theme
+- 5cfd1e7: Add Contractorplus theme; DRY up CSS in partner themes
+- Updated dependencies [4631011]
+- Updated dependencies [6c2d415]
+  - @simplybusiness/icons@4.14.0
+
+## 4.16.1
+
+### Patch Changes
+
+- 2e7ab01: Colocate CSS files and component source
+
 ## 4.16.0
 
 ### Minor Changes

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

@@ -22,10 +22,10 @@ function _interop_require_default(obj) {
     };
 }
 const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=>{
-    const linkClasses = (0, _dedupe.default)("mobius/AccordionLink", {
+    const linkClasses = (0, _dedupe.default)("mobius-accordion__link", {
         "--is-open": ariaExpanded
     });
-    const iconClasses = (0, _dedupe.default)("mobius/AccordionLinkIcon", {
+    const iconClasses = (0, _dedupe.default)("mobius-accordion__link-icon", {
         "--is-open": ariaExpanded
     });
     const handleOnClick = ()=>{
@@ -43,7 +43,7 @@ const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Flex.Flex, {
             justifyContent: "space-between",
             alignItems: "center",
-            className: "mobius/AccordionHeader",
+            className: "mobius-accordion__header",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                     className: linkClasses,
@@ -54,7 +54,7 @@ const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=
                     "aria-expanded": !!ariaExpanded,
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            className: "mobius/AccordionLinkText",
+                            className: "mobius-accordion__link-text",
                             children: text
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
@@ -76,7 +76,7 @@ const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=
         "aria-expanded": !!ariaExpanded,
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                className: "mobius/AccordionLinkText",
+                className: "mobius-accordion__link-text",
                 children: text
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
@@ -93,14 +93,14 @@ const Accordion = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         withAnimation: false
     });
     const prefersReducedMotion = (0, _usePrefersReducedMotion.usePrefersReducedMotion)();
-    const containerClasses = (0, _dedupe.default)("mobius", "mobius/Accordion", props.className, {
+    const containerClasses = (0, _dedupe.default)("mobius", "mobius-accordion", props.className, {
         "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
         "--is-open": accordionState.open
     });
-    const contentContainerClasses = (0, _dedupe.default)("mobius/AccordionContentContainer", {
+    const contentContainerClasses = (0, _dedupe.default)("mobius-accordion__content-container", {
         "--is-open": accordionState.open
     });
-    const contentClasses = (0, _dedupe.default)("mobius/AccordionContent", {
+    const contentClasses = (0, _dedupe.default)("mobius-accordion__content", {
         "--is-open": accordionState.open
     });
     const linkText = accordionState.open ? hideText : showText;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\n\nexport type AccordionElementType = HTMLDivElement;\nexport type AccordionRef = Ref<AccordionElementType>;\nexport interface AccordionLinkProps extends DOMProps {\n  /** Link text to show accordion content */\n  text?: string;\n  onClick?: () => void;\n  toggle: () => void;\n  headerChildren?: ReactNode;\n  ariaExpanded: boolean | undefined;\n}\n\nconst AccordionLink = ({\n  text,\n  toggle,\n  onClick,\n  headerChildren,\n  ariaExpanded,\n}: AccordionLinkProps) => {\n  const linkClasses = classNames(\"mobius/AccordionLink\", {\n    \"--is-open\": ariaExpanded,\n  });\n  const iconClasses = classNames(\"mobius/AccordionLinkIcon\", {\n    \"--is-open\": ariaExpanded,\n  });\n\n  const handleOnClick = (): void => {\n    if (onClick) {\n      onClick();\n    }\n    toggle();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \" || e.key === \"Enter\") {\n      toggle();\n    }\n  };\n\n  if (headerChildren) {\n    return (\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className=\"mobius/AccordionHeader\"\n      >\n        <div\n          className={linkClasses}\n          onClick={handleOnClick}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n          aria-expanded={!!ariaExpanded}\n        >\n          <span className=\"mobius/AccordionLinkText\">{text}</span>\n          <Icon icon={chevronDown} className={iconClasses} />\n        </div>\n        {headerChildren}\n      </Flex>\n    );\n  }\n\n  return (\n    <div\n      className={linkClasses}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-expanded={!!ariaExpanded}\n    >\n      <span className=\"mobius/AccordionLinkText\">{text}</span>\n      <Icon icon={chevronDown} className={iconClasses} />\n    </div>\n  );\n};\n\nexport interface AccordionProps\n  extends DOMProps,\n    RefAttributes<AccordionElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Link text to show accordion content */\n  showText?: string;\n  /** Link text to hide accordion content */\n  hideText?: string;\n  /** Whether header is above or below content */\n  headerPosition?: \"top\" | \"bottom\";\n  /** Whether to expand the accordion initially */\n  startOpen?: boolean | undefined;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Callback that fires each time the accordion state changes */\n  onChange?: (state: boolean) => void;\n  children?: ReactNode;\n  headerChildren?: ReactNode;\n}\n\nexport const Accordion: ForwardedRefComponent<\n  AccordionProps,\n  AccordionElementType\n> = forwardRef((props: AccordionProps, ref: AccordionRef) => {\n  const {\n    showText = \"See more\",\n    hideText = \"See less\",\n    headerPosition = \"top\",\n    startOpen = false,\n    onOpen,\n    onClose,\n    onChange = () => {},\n    headerChildren,\n    ...rest\n  } = props;\n  const [accordionState, setAccordionState] = useState({\n    open: true,\n    withAnimation: false,\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/Accordion\",\n    props.className,\n    {\n      \"--should-animate\": accordionState.withAnimation && !prefersReducedMotion,\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentContainerClasses = classNames(\n    \"mobius/AccordionContentContainer\",\n    {\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentClasses = classNames(\"mobius/AccordionContent\", {\n    \"--is-open\": accordionState.open,\n  });\n  const linkText = accordionState.open ? hideText : showText;\n\n  const handleChange = () => {\n    // Fire events\n    if (!accordionState.open && onOpen) {\n      onOpen();\n    }\n    if (accordionState.open && onClose) {\n      onClose();\n    }\n    if (onChange) {\n      onChange(!accordionState.open);\n    }\n    setAccordionState({\n      open: !accordionState.open,\n      withAnimation: true,\n    });\n  };\n\n  useEffect(() => {\n    setAccordionState({\n      open: startOpen,\n      withAnimation: false,\n    });\n  }, [startOpen]);\n\n  return (\n    <div ref={ref} {...rest} className={containerClasses}>\n      {headerPosition === \"top\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n      <div\n        className={contentContainerClasses}\n        aria-hidden={!accordionState.open}\n      >\n        <div className={contentClasses}>{props.children}</div>\n      </div>\n      {headerPosition === \"bottom\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["Accordion","AccordionLink","text","toggle","onClick","headerChildren","ariaExpanded","linkClasses","classNames","iconClasses","handleOnClick","handleKeyDown","e","key","Flex","justifyContent","alignItems","className","div","onKeyDown","role","tabIndex","aria-expanded","span","Icon","icon","chevronDown","forwardRef","props","ref","showText","hideText","headerPosition","startOpen","onOpen","onClose","onChange","rest","accordionState","setAccordionState","useState","open","withAnimation","prefersReducedMotion","usePrefersReducedMotion","containerClasses","contentContainerClasses","contentClasses","linkText","handleChange","useEffect","aria-hidden","children"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\n\nexport type AccordionElementType = HTMLDivElement;\nexport type AccordionRef = Ref<AccordionElementType>;\nexport interface AccordionLinkProps extends DOMProps {\n  /** Link text to show accordion content */\n  text?: string;\n  onClick?: () => void;\n  toggle: () => void;\n  headerChildren?: ReactNode;\n  ariaExpanded: boolean | undefined;\n}\n\nconst AccordionLink = ({\n  text,\n  toggle,\n  onClick,\n  headerChildren,\n  ariaExpanded,\n}: AccordionLinkProps) => {\n  const linkClasses = classNames(\"mobius-accordion__link\", {\n    \"--is-open\": ariaExpanded,\n  });\n  const iconClasses = classNames(\"mobius-accordion__link-icon\", {\n    \"--is-open\": ariaExpanded,\n  });\n\n  const handleOnClick = (): void => {\n    if (onClick) {\n      onClick();\n    }\n    toggle();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \" || e.key === \"Enter\") {\n      toggle();\n    }\n  };\n\n  if (headerChildren) {\n    return (\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className=\"mobius-accordion__header\"\n      >\n        <div\n          className={linkClasses}\n          onClick={handleOnClick}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n          aria-expanded={!!ariaExpanded}\n        >\n          <span className=\"mobius-accordion__link-text\">{text}</span>\n          <Icon icon={chevronDown} className={iconClasses} />\n        </div>\n        {headerChildren}\n      </Flex>\n    );\n  }\n\n  return (\n    <div\n      className={linkClasses}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-expanded={!!ariaExpanded}\n    >\n      <span className=\"mobius-accordion__link-text\">{text}</span>\n      <Icon icon={chevronDown} className={iconClasses} />\n    </div>\n  );\n};\n\nexport interface AccordionProps\n  extends DOMProps,\n    RefAttributes<AccordionElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Link text to show accordion content */\n  showText?: string;\n  /** Link text to hide accordion content */\n  hideText?: string;\n  /** Whether header is above or below content */\n  headerPosition?: \"top\" | \"bottom\";\n  /** Whether to expand the accordion initially */\n  startOpen?: boolean | undefined;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Callback that fires each time the accordion state changes */\n  onChange?: (state: boolean) => void;\n  children?: ReactNode;\n  headerChildren?: ReactNode;\n}\n\nexport const Accordion: ForwardedRefComponent<\n  AccordionProps,\n  AccordionElementType\n> = forwardRef((props: AccordionProps, ref: AccordionRef) => {\n  const {\n    showText = \"See more\",\n    hideText = \"See less\",\n    headerPosition = \"top\",\n    startOpen = false,\n    onOpen,\n    onClose,\n    onChange = () => {},\n    headerChildren,\n    ...rest\n  } = props;\n  const [accordionState, setAccordionState] = useState({\n    open: true,\n    withAnimation: false,\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius-accordion\",\n    props.className,\n    {\n      \"--should-animate\": accordionState.withAnimation && !prefersReducedMotion,\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentContainerClasses = classNames(\n    \"mobius-accordion__content-container\",\n    {\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentClasses = classNames(\"mobius-accordion__content\", {\n    \"--is-open\": accordionState.open,\n  });\n  const linkText = accordionState.open ? hideText : showText;\n\n  const handleChange = () => {\n    // Fire events\n    if (!accordionState.open && onOpen) {\n      onOpen();\n    }\n    if (accordionState.open && onClose) {\n      onClose();\n    }\n    if (onChange) {\n      onChange(!accordionState.open);\n    }\n    setAccordionState({\n      open: !accordionState.open,\n      withAnimation: true,\n    });\n  };\n\n  useEffect(() => {\n    setAccordionState({\n      open: startOpen,\n      withAnimation: false,\n    });\n  }, [startOpen]);\n\n  return (\n    <div ref={ref} {...rest} className={containerClasses}>\n      {headerPosition === \"top\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n      <div\n        className={contentContainerClasses}\n        aria-hidden={!accordionState.open}\n      >\n        <div className={contentClasses}>{props.children}</div>\n      </div>\n      {headerPosition === \"bottom\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["Accordion","AccordionLink","text","toggle","onClick","headerChildren","ariaExpanded","linkClasses","classNames","iconClasses","handleOnClick","handleKeyDown","e","key","Flex","justifyContent","alignItems","className","div","onKeyDown","role","tabIndex","aria-expanded","span","Icon","icon","chevronDown","forwardRef","props","ref","showText","hideText","headerPosition","startOpen","onOpen","onClose","onChange","rest","accordionState","setAccordionState","useState","open","withAnimation","prefersReducedMotion","usePrefersReducedMotion","containerClasses","contentContainerClasses","contentClasses","linkText","handleChange","useEffect","aria-hidden","children"],"mappings":"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"}

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

@@ -21,7 +21,7 @@ function _interop_require_default(obj) {
 const Alert = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { elementType: Element = "div", variant = "info", show = true, header, children, ...otherProps } = props;
     if (!show) return null;
-    const classes = (0, _dedupe.default)("mobius", "mobius/Alert", {
+    const classes = (0, _dedupe.default)("mobius", "mobius-alert", {
         "--info": variant === "info",
         "--success": variant === "success",
         "--warning": variant === "warning",
@@ -34,9 +34,9 @@ const Alert = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         warning: _icons.warning,
         error: _icons.error
     };
-    const headerClasses = (0, _dedupe.default)("mobius", "mobius/AlertHeader");
-    const iconClasses = (0, _dedupe.default)("mobius", "mobius/AlertIcon");
-    const contentClasses = (0, _dedupe.default)("mobius", "mobius/AlertContent");
+    const headerClasses = (0, _dedupe.default)("mobius", "mobius-alert__header");
+    const iconClasses = (0, _dedupe.default)("mobius", "mobius-alert__icon");
+    const contentClasses = (0, _dedupe.default)("mobius", "mobius-alert__content");
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Element, {
         ref: ref,
         role: "alert",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { circleInfo, circleTick, error, warning } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Icon } from \"../Icon\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  variant?: \"info\" | \"success\" | \"warning\" | \"error\";\n  show?: boolean;\n  header?: string;\n}\n\nexport type AlertRef = Ref<AlertElementType>;\n\nconst Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(\n  (props: AlertProps, ref: AlertRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant = \"info\",\n      show = true,\n      header,\n      children,\n      ...otherProps\n    } = props;\n\n    if (!show) return null;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Alert\",\n      {\n        \"--info\": variant === \"info\",\n        \"--success\": variant === \"success\",\n        \"--warning\": variant === \"warning\",\n        \"--error\": variant === \"error\",\n        \"--has-header\": header,\n      },\n      otherProps.className,\n    );\n    const icon = {\n      info: circleInfo,\n      success: circleTick,\n      warning,\n      error,\n    };\n\n    const headerClasses = classNames(\"mobius\", \"mobius/AlertHeader\");\n    const iconClasses = classNames(\"mobius\", \"mobius/AlertIcon\");\n    const contentClasses = classNames(\"mobius\", \"mobius/AlertContent\");\n\n    return (\n      <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n        <span className={iconClasses}>\n          <Icon icon={icon[variant]} />\n        </span>\n        <div>\n          {header && <p className={headerClasses}>{header}</p>}\n          <div className={contentClasses}>{children}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n"],"names":["Alert","forwardRef","props","ref","elementType","Element","variant","show","header","children","otherProps","classes","classNames","className","icon","info","circleInfo","success","circleTick","warning","error","headerClasses","iconClasses","contentClasses","role","span","Icon","div","p","displayName"],"mappings":";;;;+BAwESA;;;eAAAA;;;;uBAxE8C;+DAChC;uBACmC;sBAGrC;;;;;;AAgBrB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CAACC,OAAmBC;IAClB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,UAAU,MAAM,EAChBC,OAAO,IAAI,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,YACJ,GAAGR;IAEJ,IAAI,CAACK,MAAM,OAAO;IAElB,MAAMI,UAAUC,IAAAA,eAAU,EACxB,UACA,gBACA;QACE,UAAUN,YAAY;QACtB,aAAaA,YAAY;QACzB,aAAaA,YAAY;QACzB,WAAWA,YAAY;QACvB,gBAAgBE;IAClB,GACAE,WAAWG,SAAS;IAEtB,MAAMC,OAAO;QACXC,MAAMC,iBAAU;QAChBC,SAASC,iBAAU;QACnBC,SAAAA,cAAO;QACPC,OAAAA,YAAK;IACP;IAEA,MAAMC,gBAAgBT,IAAAA,eAAU,EAAC,UAAU;IAC3C,MAAMU,cAAcV,IAAAA,eAAU,EAAC,UAAU;IACzC,MAAMW,iBAAiBX,IAAAA,eAAU,EAAC,UAAU;IAE5C,qBACE,sBAACP;QAAQF,KAAKA;QAAKqB,MAAK;QAAS,GAAGd,UAAU;QAAEG,WAAWF;;0BACzD,qBAACc;gBAAKZ,WAAWS;0BACf,cAAA,qBAACI,UAAI;oBAACZ,MAAMA,IAAI,CAACR,QAAQ;;;0BAE3B,sBAACqB;;oBACEnB,wBAAU,qBAACoB;wBAAEf,WAAWQ;kCAAgBb;;kCACzC,qBAACmB;wBAAId,WAAWU;kCAAiBd;;;;;;AAIzC;AAGFT,MAAM6B,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { circleInfo, circleTick, error, warning } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Icon } from \"../Icon\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  variant?: \"info\" | \"success\" | \"warning\" | \"error\";\n  show?: boolean;\n  header?: string;\n}\n\nexport type AlertRef = Ref<AlertElementType>;\n\nconst Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(\n  (props: AlertProps, ref: AlertRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant = \"info\",\n      show = true,\n      header,\n      children,\n      ...otherProps\n    } = props;\n\n    if (!show) return null;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius-alert\",\n      {\n        \"--info\": variant === \"info\",\n        \"--success\": variant === \"success\",\n        \"--warning\": variant === \"warning\",\n        \"--error\": variant === \"error\",\n        \"--has-header\": header,\n      },\n      otherProps.className,\n    );\n    const icon = {\n      info: circleInfo,\n      success: circleTick,\n      warning,\n      error,\n    };\n\n    const headerClasses = classNames(\"mobius\", \"mobius-alert__header\");\n    const iconClasses = classNames(\"mobius\", \"mobius-alert__icon\");\n    const contentClasses = classNames(\"mobius\", \"mobius-alert__content\");\n\n    return (\n      <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n        <span className={iconClasses}>\n          <Icon icon={icon[variant]} />\n        </span>\n        <div>\n          {header && <p className={headerClasses}>{header}</p>}\n          <div className={contentClasses}>{children}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n"],"names":["Alert","forwardRef","props","ref","elementType","Element","variant","show","header","children","otherProps","classes","classNames","className","icon","info","circleInfo","success","circleTick","warning","error","headerClasses","iconClasses","contentClasses","role","span","Icon","div","p","displayName"],"mappings":";;;;+BAwESA;;;eAAAA;;;;uBAxE8C;+DAChC;uBACmC;sBAGrC;;;;;;AAgBrB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CAACC,OAAmBC;IAClB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,UAAU,MAAM,EAChBC,OAAO,IAAI,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,YACJ,GAAGR;IAEJ,IAAI,CAACK,MAAM,OAAO;IAElB,MAAMI,UAAUC,IAAAA,eAAU,EACxB,UACA,gBACA;QACE,UAAUN,YAAY;QACtB,aAAaA,YAAY;QACzB,aAAaA,YAAY;QACzB,WAAWA,YAAY;QACvB,gBAAgBE;IAClB,GACAE,WAAWG,SAAS;IAEtB,MAAMC,OAAO;QACXC,MAAMC,iBAAU;QAChBC,SAASC,iBAAU;QACnBC,SAAAA,cAAO;QACPC,OAAAA,YAAK;IACP;IAEA,MAAMC,gBAAgBT,IAAAA,eAAU,EAAC,UAAU;IAC3C,MAAMU,cAAcV,IAAAA,eAAU,EAAC,UAAU;IACzC,MAAMW,iBAAiBX,IAAAA,eAAU,EAAC,UAAU;IAE5C,qBACE,sBAACP;QAAQF,KAAKA;QAAKqB,MAAK;QAAS,GAAGd,UAAU;QAAEG,WAAWF;;0BACzD,qBAACc;gBAAKZ,WAAWS;0BACf,cAAA,qBAACI,UAAI;oBAACZ,MAAMA,IAAI,CAACR,QAAQ;;;0BAE3B,sBAACqB;;oBACEnB,wBAAU,qBAACoB;wBAAEf,WAAWQ;kCAAgBb;;kCACzC,qBAACmB;wBAAId,WAAWU;kCAAiBd;;;;;;AAIzC;AAGFT,MAAM6B,WAAW,GAAG"}

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

@@ -19,7 +19,7 @@ function _interop_require_default(obj) {
 }
 const Box = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { elementType: Element = "div", padding, paddingX, paddingInline, paddingInlineStart, paddingInlineEnd, paddingY, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingTop, paddingRight, paddingBottom, paddingLeft, minWidth, minHeight, maxWidth, maxHeight, width, height, style, ...otherProps } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/Box", otherProps.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-box", otherProps.className);
     const styleProps = (0, _utils.filterUndefinedProps)({
         padding: (0, _utils.getSpacingValue)(padding),
         paddingInline: (0, _utils.getSpacingValue)(paddingInline || paddingX),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { Ref, forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { BoxElementType, BoxProps } from \"./types\";\nimport { getSpacingValue, filterUndefinedProps } from \"../../utils\";\n\nexport type BoxRef = Ref<BoxElementType>;\n\nconst Box: ForwardedRefComponent<BoxProps, BoxElementType> = forwardRef(\n  (props: BoxProps, ref: BoxRef) => {\n    const {\n      elementType: Element = \"div\",\n      padding,\n      paddingX,\n      paddingInline,\n      paddingInlineStart,\n      paddingInlineEnd,\n      paddingY,\n      paddingBlock,\n      paddingBlockStart,\n      paddingBlockEnd,\n      paddingTop,\n      paddingRight,\n      paddingBottom,\n      paddingLeft,\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      width,\n      height,\n      style,\n      ...otherProps\n    } = props;\n\n    const classes = classNames(\"mobius\", \"mobius/Box\", otherProps.className);\n\n    const styleProps = filterUndefinedProps({\n      padding: getSpacingValue(padding),\n      paddingInline: getSpacingValue(paddingInline || paddingX),\n      paddingBlock: getSpacingValue(paddingBlock || paddingY),\n      paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n      paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n      paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n      paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      width,\n      height,\n      ...style,\n    });\n\n    return (\n      <Element\n        ref={ref}\n        style={styleProps}\n        {...otherProps}\n        className={classes}\n      />\n    );\n  },\n);\n\nBox.displayName = \"Box\";\nexport { Box };\n"],"names":["Box","forwardRef","props","ref","elementType","Element","padding","paddingX","paddingInline","paddingInlineStart","paddingInlineEnd","paddingY","paddingBlock","paddingBlockStart","paddingBlockEnd","paddingTop","paddingRight","paddingBottom","paddingLeft","minWidth","minHeight","maxWidth","maxHeight","width","height","style","otherProps","classes","classNames","className","styleProps","filterUndefinedProps","getSpacingValue","displayName"],"mappings":";;;;+BAkESA;;;eAAAA;;;;uBAlEuB;+DACT;uBAG+B;;;;;;AAItD,MAAMA,oBAAuDC,IAAAA,iBAAU,EACrE,CAACC,OAAiBC;IAChB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,kBAAkB,EAClBC,gBAAgB,EAChBC,QAAQ,EACRC,YAAY,EACZC,iBAAiB,EACjBC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,KAAK,EACL,GAAGC,YACJ,GAAGxB;IAEJ,MAAMyB,UAAUC,IAAAA,eAAU,EAAC,UAAU,cAAcF,WAAWG,SAAS;IAEvE,MAAMC,aAAaC,IAAAA,2BAAoB,EAAC;QACtCzB,SAAS0B,IAAAA,sBAAe,EAAC1B;QACzBE,eAAewB,IAAAA,sBAAe,EAACxB,iBAAiBD;QAChDK,cAAcoB,IAAAA,sBAAe,EAACpB,gBAAgBD;QAC9CI,YAAYiB,IAAAA,sBAAe,EAACjB,cAAcF;QAC1CG,cAAcgB,IAAAA,sBAAe,EAAChB,gBAAgBN;QAC9CO,eAAee,IAAAA,sBAAe,EAACf,iBAAiBH;QAChDI,aAAac,IAAAA,sBAAe,EAACd,eAAeT;QAC5CU;QACAC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGC,KAAK;IACV;IAEA,qBACE,qBAACpB;QACCF,KAAKA;QACLsB,OAAOK;QACN,GAAGJ,UAAU;QACdG,WAAWF;;AAGjB;AAGF3B,IAAIiC,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import { Ref, forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { BoxElementType, BoxProps } from \"./types\";\nimport { getSpacingValue, filterUndefinedProps } from \"../../utils\";\n\nexport type BoxRef = Ref<BoxElementType>;\n\nconst Box: ForwardedRefComponent<BoxProps, BoxElementType> = forwardRef(\n  (props: BoxProps, ref: BoxRef) => {\n    const {\n      elementType: Element = \"div\",\n      padding,\n      paddingX,\n      paddingInline,\n      paddingInlineStart,\n      paddingInlineEnd,\n      paddingY,\n      paddingBlock,\n      paddingBlockStart,\n      paddingBlockEnd,\n      paddingTop,\n      paddingRight,\n      paddingBottom,\n      paddingLeft,\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      width,\n      height,\n      style,\n      ...otherProps\n    } = props;\n\n    const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n    const styleProps = filterUndefinedProps({\n      padding: getSpacingValue(padding),\n      paddingInline: getSpacingValue(paddingInline || paddingX),\n      paddingBlock: getSpacingValue(paddingBlock || paddingY),\n      paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n      paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n      paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n      paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      width,\n      height,\n      ...style,\n    });\n\n    return (\n      <Element\n        ref={ref}\n        style={styleProps}\n        {...otherProps}\n        className={classes}\n      />\n    );\n  },\n);\n\nBox.displayName = \"Box\";\nexport { Box };\n"],"names":["Box","forwardRef","props","ref","elementType","Element","padding","paddingX","paddingInline","paddingInlineStart","paddingInlineEnd","paddingY","paddingBlock","paddingBlockStart","paddingBlockEnd","paddingTop","paddingRight","paddingBottom","paddingLeft","minWidth","minHeight","maxWidth","maxHeight","width","height","style","otherProps","classes","classNames","className","styleProps","filterUndefinedProps","getSpacingValue","displayName"],"mappings":";;;;+BAkESA;;;eAAAA;;;;uBAlEuB;+DACT;uBAG+B;;;;;;AAItD,MAAMA,oBAAuDC,IAAAA,iBAAU,EACrE,CAACC,OAAiBC;IAChB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,kBAAkB,EAClBC,gBAAgB,EAChBC,QAAQ,EACRC,YAAY,EACZC,iBAAiB,EACjBC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,KAAK,EACL,GAAGC,YACJ,GAAGxB;IAEJ,MAAMyB,UAAUC,IAAAA,eAAU,EAAC,UAAU,cAAcF,WAAWG,SAAS;IAEvE,MAAMC,aAAaC,IAAAA,2BAAoB,EAAC;QACtCzB,SAAS0B,IAAAA,sBAAe,EAAC1B;QACzBE,eAAewB,IAAAA,sBAAe,EAACxB,iBAAiBD;QAChDK,cAAcoB,IAAAA,sBAAe,EAACpB,gBAAgBD;QAC9CI,YAAYiB,IAAAA,sBAAe,EAACjB,cAAcF;QAC1CG,cAAcgB,IAAAA,sBAAe,EAAChB,gBAAgBN;QAC9CO,eAAee,IAAAA,sBAAe,EAACf,iBAAiBH;QAChDI,aAAac,IAAAA,sBAAe,EAACd,eAAeT;QAC5CU;QACAC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGC,KAAK;IACV;IAEA,qBACE,qBAACpB;QACCF,KAAKA;QACLsB,OAAOK;QACN,GAAGJ,UAAU;QACdG,WAAWF;;AAGjB;AAGF3B,IAAIiC,WAAW,GAAG"}

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

@@ -20,7 +20,7 @@ function _interop_require_default(obj) {
 }
 const BreadcrumbItem = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { isDisabled = false, isCurrent = false, "aria-current": ariaCurrent = "page", children, separator = /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.Box, {
-        className: "mobius/BreadcrumbSeparator",
+        className: "mobius-breadcrumb__separator",
         "aria-hidden": "true",
         children: ">"
     }), ...otherProps } = props;
@@ -32,7 +32,7 @@ const BreadcrumbItem = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         }
     };
     // Reshape class name and apply to outer element
-    const classes = (0, _dedupe.default)("mobius", "mobius/BreadcrumbItem", props.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-breadcrumb__item", props.className);
     const child = typeof children === "string" ? /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
         ...itemProps,
         children: children

package/dist/cjs/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":["BreadcrumbItem","forwardRef","props","ref","isDisabled","isCurrent","ariaCurrent","children","separator","Box","className","aria-hidden","otherProps","itemProps","undefined","classes","classNames","child","span","Children","only","li","cloneElement","displayName"],"mappings":"AAAA;;;;;+BAmFSA;;;eAAAA;;;;uBA1EF;+DACgB;qBAGH;;;;;;AAuBpB,MAAMA,+BAGFC,IAAAA,iBAAU,EAAC,CAACC,OAA4BC;IAC1C,MAAM,EACJC,aAAa,KAAK,EAClBC,YAAY,KAAK,EACjB,gBAAgBC,cAAc,MAAM,EACpCC,QAAQ,EACRC,0BACE,qBAACC,QAAG;QAACC,WAAU;QAA6BC,eAAY;kBACrD;MAEJ,EACD,GAAGC,YACJ,GAAGV;IACJ,MAAM,EAAEW,SAAS,EAAE,GAAG;QACpBA,WAAW;YACT,gBAAgBR,YAAYC,cAAcQ;YAC1C,iBAAiBV,cAAcC;YAC/B,GAAGO,UAAU;QACf;IACF;IAEA,gDAAgD;IAChD,MAAMG,UAAUC,IAAAA,eAAU,EACxB,UACA,yBACAd,MAAMQ,SAAS;IAGjB,MAAMO,QACJ,OAAOV,aAAa,yBAClB,qBAACW;QAAM,GAAGL,SAAS;kBAAGN;SAErBY,eAAQ,CAACC,IAAI,CAACb;IAGnB,qBACE,sBAACc;QAAGX,WAAWK;;0BACZO,IAAAA,mBAAY,EAACL,OAAO;gBAAE,GAAGA,MAAMf,KAAK;gBAAE,GAAGW,SAAS;gBAAEV;YAAI;YACxD,CAACD,MAAMG,SAAS,IAAIG;;;AAG3B;AAEAR,eAAeuB,WAAW,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":["BreadcrumbItem","forwardRef","props","ref","isDisabled","isCurrent","ariaCurrent","children","separator","Box","className","aria-hidden","otherProps","itemProps","undefined","classes","classNames","child","span","Children","only","li","cloneElement","displayName"],"mappings":"AAAA;;;;;+BAmFSA;;;eAAAA;;;;uBA1EF;+DACgB;qBAGH;;;;;;AAuBpB,MAAMA,+BAGFC,IAAAA,iBAAU,EAAC,CAACC,OAA4BC;IAC1C,MAAM,EACJC,aAAa,KAAK,EAClBC,YAAY,KAAK,EACjB,gBAAgBC,cAAc,MAAM,EACpCC,QAAQ,EACRC,0BACE,qBAACC,QAAG;QAACC,WAAU;QAA+BC,eAAY;kBACvD;MAEJ,EACD,GAAGC,YACJ,GAAGV;IACJ,MAAM,EAAEW,SAAS,EAAE,GAAG;QACpBA,WAAW;YACT,gBAAgBR,YAAYC,cAAcQ;YAC1C,iBAAiBV,cAAcC;YAC/B,GAAGO,UAAU;QACf;IACF;IAEA,gDAAgD;IAChD,MAAMG,UAAUC,IAAAA,eAAU,EACxB,UACA,2BACAd,MAAMQ,SAAS;IAGjB,MAAMO,QACJ,OAAOV,aAAa,yBAClB,qBAACW;QAAM,GAAGL,SAAS;kBAAGN;SAErBY,eAAQ,CAACC,IAAI,CAACb;IAGnB,qBACE,sBAACc;QAAGX,WAAWK;;0BACZO,IAAAA,mBAAY,EAACL,OAAO;gBAAE,GAAGA,MAAMf,KAAK;gBAAE,GAAGW,SAAS;gBAAEV;YAAI;YACxD,CAACD,MAAMG,SAAS,IAAIG;;;AAG3B;AAEAR,eAAeuB,WAAW,GAAG"}

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

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

package/dist/cjs/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":["Breadcrumbs","forwardRef","props","ref","ariaLabel","navProps","children","otherProps","childArray","Children","toArray","classes","classNames","className","nav","ul","map","child","i","cloneElement","isCurrent","length","displayName"],"mappings":"AAAA;;;;;+BAwDSA;;;eAAAA;;;;uBA9CF;+DACgB;;;;;;AAevB,MAAMA,4BAGFC,IAAAA,iBAAU,EAAC,CAACC,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,aAAaC,eAAQ,CAACC,OAAO,CAACJ;IAEpC,gDAAgD;IAChD,MAAMK,UAAUC,IAAAA,eAAU,EACxB,UACA,qBACAL,WAAWM,SAAS;IAGtB,qBACE,qBAACC;QAAIX,KAAKA;QAAM,GAAGI,UAAU;QAAG,GAAGF,QAAQ;QAAEQ,WAAWF;kBACtD,cAAA,qBAACI;sBACEP,WAAWQ,GAAG,CAAC,CAACC,OAAOC,kBACtBC,IAAAA,mBAAY,EAACF,OAAuB;oBAClCG,WAAWF,MAAMV,WAAWa,MAAM,GAAG;gBACvC;;;AAKV;AAEArB,YAAYsB,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":["Breadcrumbs","forwardRef","props","ref","ariaLabel","navProps","children","otherProps","childArray","Children","toArray","classes","classNames","className","nav","ul","map","child","i","cloneElement","isCurrent","length","displayName"],"mappings":"AAAA;;;;;+BAwDSA;;;eAAAA;;;;uBA9CF;+DACgB;;;;;;AAevB,MAAMA,4BAGFC,IAAAA,iBAAU,EAAC,CAACC,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,aAAaC,eAAQ,CAACC,OAAO,CAACJ;IAEpC,gDAAgD;IAChD,MAAMK,UAAUC,IAAAA,eAAU,EACxB,UACA,qBACAL,WAAWM,SAAS;IAGtB,qBACE,qBAACC;QAAIX,KAAKA;QAAM,GAAGI,UAAU;QAAG,GAAGF,QAAQ;QAAEQ,WAAWF;kBACtD,cAAA,qBAACI;sBACEP,WAAWQ,GAAG,CAAC,CAACC,OAAOC,kBACtBC,IAAAA,mBAAY,EAACF,OAAuB;oBAClCG,WAAWF,MAAMV,WAAWa,MAAM,GAAG;gBACvC;;;AAKV;AAEArB,YAAYsB,WAAW,GAAG"}

package/dist/cjs/components/Button/Button.js

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

package/dist/cjs/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":["Button","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","useButton","useDeprecationWarning","getVariant","type","buttonVariant","classes","classNames","className","Loading","Success","displayName"],"mappings":"AAAA;;;;;+BAyGSA;;;eAAAA;;;;uBAvGiD;+DACnC;yBAGC;2BACkB;uBACJ;yBACd;;;;;;AAkCxB,MAAMA,uBACJC,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,oBAAS,EAACd;IAElCe,IAAAA,4BAAqB,EAAC;QACpB,qBAAqBP,YAAY;QACjC,2BAA2BA,YAAY;IACzC;IAEA,8CAA8C;IAC9C,MAAMQ,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOT;IACT;IAEA,MAAMU,gBAAgBF,WAAWR;IAEjC,gDAAgD;IAChD,MAAMW,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEF,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAET,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWS,SAAS;IAEtBT,WAAWS,SAAS,GAAGF;IAEvB,qBACE,sBAACf;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;;YACjDN,0BAAY,qBAACgB,gBAAO,QAAMpB,YAAYA;YACtCK,aAAa,CAACD,2BAAa,qBAACiB,gBAAO;;;AAG1C;AAEFzB,OAAO0B,WAAW,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":["Button","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","useButton","useDeprecationWarning","getVariant","type","buttonVariant","classes","classNames","className","Loading","Success","displayName"],"mappings":"AAAA;;;;;+BAyGSA;;;eAAAA;;;;uBAvG6D;+DAC/C;yBAGC;2BACkB;uBACJ;yBACd;;;;;;AAkCxB,MAAMA,uBACJC,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,oBAAS,EAACd;IAElCe,IAAAA,4BAAqB,EAAC;QACpB,qBAAqBP,YAAY;QACjC,2BAA2BA,YAAY;IACzC;IAEA,8CAA8C;IAC9C,MAAMQ,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOT;IACT;IAEA,MAAMU,gBAAgBF,WAAWR;IAEjC,gDAAgD;IAChD,MAAMW,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEF,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAET,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWS,SAAS;IAEtBT,WAAWS,SAAS,GAAGF;IAEvB,qBACE,sBAACf;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;;YACjDN,0BAAY,qBAACgB,gBAAO;0BAAEpB;iBAAsBA;YAC5CK,aAAa,CAACD,2BAAa,qBAACiB,gBAAO;;;AAG1C;AAEFzB,OAAO0B,WAAW,GAAG"}

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

@@ -11,20 +11,26 @@ Object.defineProperty(exports, "Loading", {
 const _jsxruntime = require("react/jsx-runtime");
 const _icons = require("@simplybusiness/icons");
 const _Icon = require("../Icon");
-const Loading = ()=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+const _VisuallyHidden = require("../VisuallyHidden");
+const Loading = (props)=>{
+    const { children } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "mobius/ButtonIconWrapper",
+                className: "mobius-button__icon-wrapper",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
                     icon: _icons.loading,
-                    spin: true
+                    spin: true,
+                    size: "md"
                 })
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                className: "mobius/LoadingText",
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                className: "mobius-button__loading-text",
                 children: "Loading"
-            })
+            }),
+            children
         ]
     });
+};
 
 //# sourceMappingURL=Loading.js.map

package/dist/cjs/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","div","className","Icon","icon","loading","spin","span"],"mappings":";;;;+BAYSA;;;eAAAA;;;;uBAZe;sBACH;AAErB,MAAMA,UAAU,kBACd;;0BACE,qBAACC;gBAAIC,WAAU;0BACb,cAAA,qBAACC,UAAI;oBAACC,MAAMC,cAAO;oBAAEC,IAAI;;;0BAE3B,qBAACC;gBAAKL,WAAU;0BAAqB"}
+{"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","props","children","div","className","Icon","icon","loading","spin","size","VisuallyHidden"],"mappings":";;;;+BAyBSA;;;eAAAA;;;;uBAxBe;sBACH;gCACU;AAM/B,MAAMA,UAAU,CAACC;IACf,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,qBACE;;0BACE,qBAACE;gBAAIC,WAAU;0BACb,cAAA,qBAACC,UAAI;oBAACC,MAAMC,cAAO;oBAAEC,IAAI;oBAACC,MAAK;;;0BAEjC,qBAACC,8BAAc;gBAACN,WAAU;0BAA8B;;YAGvDF;;;AAGP"}

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

@@ -15,13 +15,14 @@ const _VisuallyHidden = require("../VisuallyHidden");
 const Success = ()=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "mobius/ButtonIconWrapper",
+                className: "mobius-button__icon-wrapper",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
-                    icon: _icons.tick
+                    icon: _icons.tick,
+                    size: "md"
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
-                className: "mobius/SuccessText",
+                className: "mobius-button__success-text",
                 children: "Success"
             })
         ]

package/dist/cjs/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":["Success","div","className","Icon","icon","tick","VisuallyHidden"],"mappings":";;;;+BAaSA;;;eAAAA;;;;uBAbY;sBACA;gCACU;AAE/B,MAAMA,UAAU,kBACd;;0BACE,qBAACC;gBAAIC,WAAU;0BACb,cAAA,qBAACC,UAAI;oBAACC,MAAMC,WAAI;;;0BAElB,qBAACC,8BAAc;gBAACJ,WAAU;0BAAqB"}
+{"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":["Success","div","className","Icon","icon","tick","size","VisuallyHidden"],"mappings":";;;;+BAeSA;;;eAAAA;;;;uBAfY;sBACA;gCACU;AAE/B,MAAMA,UAAU,kBACd;;0BACE,qBAACC;gBAAIC,WAAU;0BACb,cAAA,qBAACC,UAAI;oBAACC,MAAMC,WAAI;oBAAEC,MAAK;;;0BAEzB,qBAACC,8BAAc;gBAACL,WAAU;0BAA8B"}

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -17,6 +17,7 @@ const _ErrorMessage = require("../ErrorMessage");
 const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
 const _hooks = require("../../hooks");
 const _Icon = require("../Icon");
+const _Stack = require("../Stack");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -39,9 +40,10 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     }, validationClasses);
     // Append an additional wrapper class name to differenitate from input
-    const wrapperClasses = (0, _dedupe.default)("mobius", "mobius/Checkbox", sharedClasses, className);
-    const inputClasses = (0, _dedupe.default)("mobius/CheckboxInput", sharedClasses);
-    const iconClasses = (0, _dedupe.default)("mobius/CheckboxIcon", sharedClasses);
+    const wrapperClasses = (0, _dedupe.default)("mobius", "mobius-checkbox", sharedClasses, className);
+    const labelClasses = (0, _dedupe.default)("mobius-checkbox__label", sharedClasses);
+    const inputClasses = (0, _dedupe.default)("mobius-checkbox__input", sharedClasses);
+    const iconClasses = (0, _dedupe.default)("mobius-checkbox__icon", sharedClasses);
     const errorMessageId = (0, _react.useId)();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = (0, _spaceDelimitedList.spaceDelimitedList)([
@@ -68,10 +70,12 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             toggleState();
         }
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.Stack, {
+        gap: "xs",
+        className: wrapperClasses,
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
-                className: wrapperClasses,
+                className: labelClasses,
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
                         "aria-describedby": describedBy,
@@ -100,7 +104,7 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         id: labelId,
-                        className: "mobius/CheckboxLabel",
+                        className: "mobius-checkbox__visible-label",
                         children: label
                     })
                 ]

package/dist/cjs/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":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","name","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","validationClasses","useValidationClasses","sharedClasses","classNames","wrapperClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","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","icon","squareTick","square","size","span","ErrorMessage"],"mappings":"AAAA;;;;;+BAoBaA;;;eAAAA;;;;uBAVN;+DACgB;uBACY;8BACN;oCAGM;uBACE;sBAChB;;;;;;AAEd,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,eAAQ,EAAUR;IAClD,MAAMS,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASrB,OAAOmB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CpB;QACAC;IACF;IACA,MAAMoB,gBAAgBC,IAAAA,eAAU,EAC9B;QACE,iBAAiBxB;QACjB,iBAAiBa;QACjB,iBAAiB,OAAOZ,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAoB;IAEF,sEAAsE;IACtE,MAAMI,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD,eACAlB;IAEF,MAAMqB,eAAeF,IAAAA,eAAU,EAAC,wBAAwBD;IACxD,MAAMI,cAAcH,IAAAA,eAAU,EAAC,uBAAuBD;IACtD,MAAMK,iBAAiBR,IAAAA,YAAK;IAC5B,MAAMS,yBAAyBvB,eAAesB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAlB;KACD;IACD,MAAMsB,UAAUb,IAAAA,YAAK;IAErB,MAAMc,cAAc;QAClBpB,YAAY,CAACD;IACf;IAEA,MAAMsB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAIhC,UAAU;YACZA,SAASgC;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,sBAACnC;gBAAMM,WAAWoB;;kCAChB,qBAACiB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAAc1C;wBACd2C,mBAAiBb;wBACjBc,UAAUvC;wBACVwC,UAAUhD;wBACVH,KAAKqB;wBACLb,WAAWqB;wBACXuB,SAASd;wBACT/B,UAAUmC;wBACVW,WAAWV;wBACXW,MAAK;wBACLC,gBAAgB7C;wBAChB8C,UAAUpD;wBACVH,IAAIA,MAAMqB;wBACVV,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAAC0C,UAAI;wBACHC,MAAM1C,WAAW2C,iBAAU,GAAGC,aAAM;wBACpCC,MAAK;wBACLrD,WAAWsB;;kCAEb,qBAACgC;wBAAK7D,IAAImC;wBAAS5B,WAAU;kCAC1BN;;;;0BAGL,qBAAC6D,0BAAY;gBAAC9D,IAAI8B;gBAAgBtB,cAAcA;;;;AAGtD"}
+{"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":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","name","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","validationClasses","useValidationClasses","sharedClasses","classNames","wrapperClasses","labelClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","Stack","gap","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","Icon","icon","squareTick","square","size","span","ErrorMessage"],"mappings":"AAAA;;;;;+BAqBaA;;;eAAAA;;;;uBAXN;+DACgB;uBACY;8BACN;oCAGM;uBACE;sBAChB;uBACC;;;;;;AAEf,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,eAAQ,EAAUR;IAClD,MAAMS,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASrB,OAAOmB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CpB;QACAC;IACF;IACA,MAAMoB,gBAAgBC,IAAAA,eAAU,EAC9B;QACE,iBAAiBxB;QACjB,iBAAiBa;QACjB,iBAAiB,OAAOZ,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAoB;IAEF,sEAAsE;IACtE,MAAMI,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD,eACAlB;IAEF,MAAMqB,eAAeF,IAAAA,eAAU,EAAC,0BAA0BD;IAC1D,MAAMI,eAAeH,IAAAA,eAAU,EAAC,0BAA0BD;IAC1D,MAAMK,cAAcJ,IAAAA,eAAU,EAAC,yBAAyBD;IACxD,MAAMM,iBAAiBT,IAAAA,YAAK;IAC5B,MAAMU,yBAAyBxB,eAAeuB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAnB;KACD;IACD,MAAMuB,UAAUd,IAAAA,YAAK;IAErB,MAAMe,cAAc;QAClBrB,YAAY,CAACD;IACf;IAEA,MAAMuB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAIjC,UAAU;YACZA,SAASiC;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE,sBAACQ,YAAK;QAACC,KAAI;QAAKvC,WAAWoB;;0BACzB,sBAAC1B;gBAAMM,WAAWqB;;kCAChB,qBAACmB;wBACCC,oBAAkBd;wBAClBe,qBAAmBjB;wBACnBkB,gBAAc7C;wBACd8C,mBAAiBf;wBACjBgB,UAAU1C;wBACV2C,UAAUnD;wBACVH,KAAKqB;wBACLb,WAAWsB;wBACXyB,SAAShB;wBACThC,UAAUoC;wBACVa,WAAWZ;wBACXa,MAAK;wBACLC,gBAAgBhD;wBAChBiD,UAAUvD;wBACVH,IAAIA,MAAMqB;wBACVV,MAAMA;wBACNC,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAAC6C,UAAI;wBACHC,MAAM7C,WAAW8C,iBAAU,GAAGC,aAAM;wBACpCC,MAAK;wBACLxD,WAAWuB;;kCAEb,qBAACkC;wBAAKhE,IAAIoC;wBAAS7B,WAAU;kCAC1BN;;;;0BAGL,qBAACgE,0BAAY;gBAACjE,IAAI+B;gBAAgBvB,cAAcA;;;;AAGtD"}

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

@@ -24,7 +24,7 @@ function _interop_require_default(obj) {
 const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
     const [selected, setSelected] = (0, _react.useState)(defaultValue);
-    const checkboxGroupClasses = (0, _dedupe.default)("mobius", "mobius/CheckboxGroup", className, {
+    const checkboxGroupClasses = (0, _dedupe.default)("mobius", "mobius-checkbox-group", className, {
         "--is-horizontal": orientation === "horizontal",
         "--is-vertical": orientation === "vertical",
         "--is-required": typeof isRequired === "boolean" && isRequired,
@@ -81,7 +81,7 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 children: label
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "mobius/CheckboxWrapper",
+                className: "mobius-checkbox-group__wrapper",
                 children: _react.Children.map(children, (child)=>{
                     if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
                         return /*#__PURE__*/ (0, _react.cloneElement)(child, {

package/dist/cjs/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":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","validationClasses","useValidationClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","target","value","checked","filter","item","useEffect","div","aria-labelledby","role","style","Children","count","Label","elementType","id","map","child","isValidElement","cloneElement","defaultSelected","includes","ErrorMessage"],"mappings":"AAAA;;;;;+BA0BaA;;;eAAAA;;;;uBAdN;+DACgB;uBAQD;8BACO;oCACM;uBACE;;;;;;AAE9B,MAAMA,8BAGTC,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,eAAQ,EAAWN;IACnD,MAAMO,uBAAuBC,IAAAA,eAAU,EACrC,UACA,wBACAX,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOH,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMiB,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CjB;QACAC;IACF;IACA,MAAMiB,eAAeH,IAAAA,eAAU,EAC7B;QACE,iBAAiBjB;IACnB,GACAkB;IAEF,MAAMG,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBhB,eAAec,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA1B,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM8B,UAAUL,IAAAA,YAAK;IAErB,MAAMM,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZlB,YAAYD,SAASoB,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXlB,YAAY;mBAAID;gBAAUkB;aAAM;QAClC;IACF;IAEAI,IAAAA,gBAAS,EAAC;QACR,IAAI9B,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,sBAAC+B;QACE,GAAGxB,IAAI;QACRyB,mBAAiBxC,KAAK,CAAC,kBAAkB,IAAI8B;QAC7C7B,KAAKA;QACLQ,WAAWU;QACXsB,MAAK;QACLC,OACE;YACE,4BAA4B5B,eAAe6B,eAAQ,CAACC,KAAK,CAACjC;QAC5D;;YAGDT,uBACC,qBAAC2C,YAAK;gBAACC,aAAY;gBAAOC,IAAIjB;gBAASrB,WAAWc;0BAC/CrB;;0BAGL,qBAACqC;gBAAI9B,WAAU;0BACZkC,eAAQ,CAACK,GAAG,CAACrC,UAAUsC,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC9C;4BACAC;4BACAS;4BACAP;4BACA8C,iBAAiBpC,SAASqC,QAAQ,CAACJ,MAAMjD,KAAK,CAACkC,KAAK;4BACpD1B,UAAUuB;4BACV,oBAAoBH;wBACtB;oBACF;oBAEA,OAAOqB;gBACT;;YAEDvC,8BACC,qBAAC4C,0BAAY;gBAACP,IAAIvB;gBAAgBd,cAAcA;;;;AAIxD"}
+{"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":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","validationClasses","useValidationClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","target","value","checked","filter","item","useEffect","div","aria-labelledby","role","style","Children","count","Label","elementType","id","map","child","isValidElement","cloneElement","defaultSelected","includes","ErrorMessage"],"mappings":"AAAA;;;;;+BA0BaA;;;eAAAA;;;;uBAdN;+DACgB;uBAQD;8BACO;oCACM;uBACE;;;;;;AAE9B,MAAMA,8BAGTC,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,eAAQ,EAAWN;IACnD,MAAMO,uBAAuBC,IAAAA,eAAU,EACrC,UACA,yBACAX,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOH,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMiB,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CjB;QACAC;IACF;IACA,MAAMiB,eAAeH,IAAAA,eAAU,EAC7B;QACE,iBAAiBjB;IACnB,GACAkB;IAEF,MAAMG,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBhB,eAAec,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA1B,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM8B,UAAUL,IAAAA,YAAK;IAErB,MAAMM,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZlB,YAAYD,SAASoB,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXlB,YAAY;mBAAID;gBAAUkB;aAAM;QAClC;IACF;IAEAI,IAAAA,gBAAS,EAAC;QACR,IAAI9B,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,sBAAC+B;QACE,GAAGxB,IAAI;QACRyB,mBAAiBxC,KAAK,CAAC,kBAAkB,IAAI8B;QAC7C7B,KAAKA;QACLQ,WAAWU;QACXsB,MAAK;QACLC,OACE;YACE,4BAA4B5B,eAAe6B,eAAQ,CAACC,KAAK,CAACjC;QAC5D;;YAGDT,uBACC,qBAAC2C,YAAK;gBAACC,aAAY;gBAAOC,IAAIjB;gBAASrB,WAAWc;0BAC/CrB;;0BAGL,qBAACqC;gBAAI9B,WAAU;0BACZkC,eAAQ,CAACK,GAAG,CAACrC,UAAUsC,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC9C;4BACAC;4BACAS;4BACAP;4BACA8C,iBAAiBpC,SAASqC,QAAQ,CAACJ,MAAMjD,KAAK,CAACkC,KAAK;4BACpD1B,UAAUuB;4BACV,oBAAoBH;wBACtB;oBACF;oBAEA,OAAOqB;gBACT;;YAEDvC,8BACC,qBAAC4C,0BAAY;gBAACP,IAAIvB;gBAAgBd,cAAcA;;;;AAIxD"}

package/dist/cjs/components/Container/Container.js

@@ -19,7 +19,7 @@ function _interop_require_default(obj) {
 }
 const Container = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { elementType: Element = "div", size = "md", ...otherProps } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/Container", (0, _utils.sizeClasses)(size), otherProps.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-container", (0, _utils.sizeClasses)(size), otherProps.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {
         ref: ref,
         ...otherProps,

package/dist/cjs/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":["Container","forwardRef","props","ref","elementType","Element","size","otherProps","classes","classNames","sizeClasses","className","displayName"],"mappings":";;;;+BA6CSA;;;eAAAA;;;;uBAtCF;+DACgB;uBAIK;;;;;;AAkB5B,MAAMA,0BACJC,IAAAA,iBAAU,EAAC,CAACC,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,OAAO,IAAI,EAAE,GAAGC,YAAY,GAAGL;IAErE,MAAMM,UAAUC,IAAAA,eAAU,EACxB,UACA,oBACAC,IAAAA,kBAAW,EAACJ,OACZC,WAAWI,SAAS;IAGtB,qBAAO,qBAACN;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEI,WAAWH;;AACvD;AAEFR,UAAUY,WAAW,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":["Container","forwardRef","props","ref","elementType","Element","size","otherProps","classes","classNames","sizeClasses","className","displayName"],"mappings":";;;;+BA6CSA;;;eAAAA;;;;uBAtCF;+DACgB;uBAIK;;;;;;AAkB5B,MAAMA,0BACJC,IAAAA,iBAAU,EAAC,CAACC,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,OAAO,IAAI,EAAE,GAAGC,YAAY,GAAGL;IAErE,MAAMM,UAAUC,IAAAA,eAAU,EACxB,UACA,oBACAC,IAAAA,kBAAW,EAACJ,OACZC,WAAWI,SAAS;IAGtB,qBAAO,qBAACN;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEI,WAAWH;;AACvD;AAEFR,UAAUY,WAAW,GAAG"}