@simplybusiness/mobius 4.16.0 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  CompositionEvent,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { UseLabelProps, useLabel, useValidationClasses } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Validation } from \"../../types\";\n\nexport type NumberFieldElementType = HTMLInputElement;\n\nexport interface NumberFieldProps\n  extends DOMProps,\n    Validation,\n    UseLabelProps,\n    RefAttributes<NumberFieldElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** The smallest value allowed for the input. */\n  minValue?: number;\n  /** The largest value allowed for the input. */\n  maxValue?: number;\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number; // ??\n  /** The default value (uncontrolled). */\n  defaultValue?: number;\n  /** Handler that is called when the value changes. */\n  onChange?: (event: ChangeEvent<NumberFieldElementType>) => void;\n  /** Temporary text that occupies the text input when it is empty. */\n  placeholder?: string;\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string | undefined;\n}\n\nexport type NumberFieldRef = Ref<NumberFieldElementType>;\n\nexport const NumberField: ForwardedRefComponent<\n  NumberFieldProps,\n  NumberFieldElementType\n> = forwardRef((props: NumberFieldProps, ref: NumberFieldRef) => {\n  const {\n    id,\n    isDisabled,\n    isRequired,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    errorMessage,\n    validationState,\n    isInvalid,\n    isReadOnly,\n    minValue,\n    maxValue,\n    step,\n    placeholder,\n    defaultValue = 0,\n    onChange,\n  } = props;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [value, setValue] = useState<number>(defaultValue);\n  const valueWithoutLeadingZero = value.toString().replace(/^0+/, \"\");\n  const optional = typeof isRequired === \"boolean\" && !isRequired;\n  const required = typeof isRequired === \"boolean\" && isRequired;\n\n  const { labelProps, fieldProps } = useLabel({\n    id,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n  });\n\n  const containerClasses = classNames(\"mobius/NumberField\", className, {\n    \"--is-optional\": optional,\n  });\n\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n\n  const inputClasses = classNames(\n    \"mobius/NumberFieldInput\",\n    className,\n    {\n      \"--is-required\": required,\n      \"--is-optional\": optional,\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const labelClasses = classNames(\n    \"mobius/NumberFieldLabel\",\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n\n  const handleChange = (event: ChangeEvent<NumberFieldElementType>) => {\n    // Only allow change between min and max values\n    const enteredValue = Number(event.target.value);\n    if (\n      (minValue && enteredValue < minValue) ||\n      (maxValue && enteredValue > maxValue)\n    ) {\n      return;\n    }\n    setValue(enteredValue);\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  // Only allow numeric input\n  const handleBeforeInput = (\n    event: CompositionEvent<NumberFieldElementType>,\n  ) => {\n    const allowedChars = /[\\d]/;\n\n    if (event.data && !allowedChars.test(event.data)) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  return (\n    <div className={containerClasses}>\n      {label && (\n        <Label {...labelProps} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/NumberFieldInputWrapper\">\n        <input\n          {...fieldProps}\n          ref={inputRef || ref}\n          className={inputClasses}\n          type=\"number\"\n          onChange={handleChange}\n          onBeforeInput={handleBeforeInput}\n          max={maxValue}\n          min={minValue}\n          step={step}\n          value={valueWithoutLeadingZero}\n          placeholder={placeholder}\n          required={required}\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck=\"false\"\n        />\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </div>\n  );\n});\n"],"names":["classNames","forwardRef","useId","useRef","useState","useLabel","useValidationClasses","spaceDelimitedList","ErrorMessage","Label","NumberField","props","ref","id","isDisabled","isRequired","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","className","errorMessage","validationState","isInvalid","isReadOnly","minValue","maxValue","step","placeholder","defaultValue","onChange","inputRef","value","setValue","valueWithoutLeadingZero","toString","replace","optional","required","labelProps","fieldProps","containerClasses","validationClasses","inputClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","handleChange","event","enteredValue","Number","target","handleBeforeInput","allowedChars","data","test","preventDefault","stopPropagation","div","input","type","onBeforeInput","max","min","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","autoComplete","autoCorrect","spellCheck"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  CompositionEvent,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { UseLabelProps, useLabel, useValidationClasses } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Validation } from \"../../types\";\nimport { Stack } from \"../Stack\";\n\nexport type NumberFieldElementType = HTMLInputElement;\n\nexport interface NumberFieldProps\n  extends DOMProps,\n    Validation,\n    UseLabelProps,\n    RefAttributes<NumberFieldElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** The smallest value allowed for the input. */\n  minValue?: number;\n  /** The largest value allowed for the input. */\n  maxValue?: number;\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number; // ??\n  /** The default value (uncontrolled). */\n  defaultValue?: number;\n  /** Handler that is called when the value changes. */\n  onChange?: (event: ChangeEvent<NumberFieldElementType>) => void;\n  /** Temporary text that occupies the text input when it is empty. */\n  placeholder?: string;\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string | undefined;\n}\n\nexport type NumberFieldRef = Ref<NumberFieldElementType>;\n\nexport const NumberField: ForwardedRefComponent<\n  NumberFieldProps,\n  NumberFieldElementType\n> = forwardRef((props: NumberFieldProps, ref: NumberFieldRef) => {\n  const {\n    id,\n    isDisabled,\n    isRequired,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    errorMessage,\n    validationState,\n    isInvalid,\n    isReadOnly,\n    minValue,\n    maxValue,\n    step,\n    placeholder,\n    defaultValue = 0,\n    onChange,\n  } = props;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [value, setValue] = useState<number>(defaultValue);\n  const valueWithoutLeadingZero = value.toString().replace(/^0+/, \"\");\n  const optional = typeof isRequired === \"boolean\" && !isRequired;\n  const required = typeof isRequired === \"boolean\" && isRequired;\n\n  const { labelProps, fieldProps } = useLabel({\n    id,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n  });\n\n  const containerClasses = classNames(\"mobius-number-field\", className, {\n    \"--is-optional\": optional,\n  });\n\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n\n  const inputClasses = classNames(\n    \"mobius-number-field__input\",\n    className,\n    {\n      \"--is-required\": required,\n      \"--is-optional\": optional,\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const labelClasses = classNames(\n    \"mobius-number-field__label\",\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n\n  const handleChange = (event: ChangeEvent<NumberFieldElementType>) => {\n    // Only allow change between min and max values\n    const enteredValue = Number(event.target.value);\n    if (\n      (minValue && enteredValue < minValue) ||\n      (maxValue && enteredValue > maxValue)\n    ) {\n      return;\n    }\n    setValue(enteredValue);\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  // Only allow numeric input\n  const handleBeforeInput = (\n    event: CompositionEvent<NumberFieldElementType>,\n  ) => {\n    const allowedChars = /[\\d]/;\n\n    if (event.data && !allowedChars.test(event.data)) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  return (\n    <Stack gap=\"xs\" className={containerClasses}>\n      {label && (\n        <Label {...labelProps} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius-number-field__input-wrapper\">\n        <input\n          {...fieldProps}\n          ref={inputRef || ref}\n          className={inputClasses}\n          type=\"number\"\n          onChange={handleChange}\n          onBeforeInput={handleBeforeInput}\n          max={maxValue}\n          min={minValue}\n          step={step}\n          value={valueWithoutLeadingZero}\n          placeholder={placeholder}\n          required={required}\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck=\"false\"\n        />\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </Stack>\n  );\n});\n"],"names":["classNames","forwardRef","useId","useRef","useState","useLabel","useValidationClasses","spaceDelimitedList","ErrorMessage","Label","Stack","NumberField","props","ref","id","isDisabled","isRequired","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","className","errorMessage","validationState","isInvalid","isReadOnly","minValue","maxValue","step","placeholder","defaultValue","onChange","inputRef","value","setValue","valueWithoutLeadingZero","toString","replace","optional","required","labelProps","fieldProps","containerClasses","validationClasses","inputClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","handleChange","event","enteredValue","Number","target","handleBeforeInput","allowedChars","data","test","preventDefault","stopPropagation","gap","div","input","type","onBeforeInput","max","min","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","autoComplete","autoCorrect","spellCheck"],"mappings":"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"}

package/dist/esm/components/PasswordField/PasswordField.js

@@ -8,7 +8,7 @@ import { ShowHideButton } from "./ShowHideButton";
 export const PasswordField = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
     const [show, setShow] = useState(false);
     const type = show ? "text" : "password";
-    const classes = classNames("mobius/PasswordField", className);
+    const classes = classNames("mobius-password-field", className);
     const localRef = useRef(null);
     const handleShowHideButtonClick = ()=>{
         var _localRef_current;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { forwardRef, useState, useRef } from \"react\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport {\n  TextField,\n  type TextFieldProps,\n  type TextFieldRef,\n  type TextFieldElementType,\n} from \"../TextField\";\nimport { ShowHideButton } from \"./ShowHideButton\";\n\nexport interface PasswordFieldProps extends TextFieldProps {}\n\nexport type PasswordFieldRef = TextFieldRef;\n\nexport const PasswordField = forwardRef(\n  ({ className, ...props }: PasswordFieldProps, ref: TextFieldRef) => {\n    const [show, setShow] = useState(false);\n    const type = show ? \"text\" : \"password\";\n    const classes = classNames(\"mobius/PasswordField\", className);\n    const localRef = useRef<TextFieldElementType>(null);\n\n    const handleShowHideButtonClick = () => {\n      setShow(oldShow => !oldShow);\n      localRef.current?.focus();\n    };\n\n    return (\n      <TextField\n        ref={mergeRefs([localRef, ref])}\n        className={classes}\n        {...props}\n        type={type}\n        suffixInside={\n          <ShowHideButton onClick={handleShowHideButtonClick} show={show} />\n        }\n      />\n    );\n  },\n);\n"],"names":["classNames","forwardRef","useState","useRef","mergeRefs","TextField","ShowHideButton","PasswordField","className","props","ref","show","setShow","type","classes","localRef","handleShowHideButtonClick","oldShow","current","focus","suffixInside","onClick"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,QAAQ;AACrD,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SACEC,SAAS,QAIJ,eAAe;AACtB,SAASC,cAAc,QAAQ,mBAAmB;AAMlD,OAAO,MAAMC,8BAAgBN,WAC3B,CAAC,EAAEO,SAAS,EAAE,GAAGC,OAA2B,EAAEC;IAC5C,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAAS;IACjC,MAAMW,OAAOF,OAAO,SAAS;IAC7B,MAAMG,UAAUd,WAAW,wBAAwBQ;IACnD,MAAMO,WAAWZ,OAA6B;IAE9C,MAAMa,4BAA4B;YAEhCD;QADAH,QAAQK,CAAAA,UAAW,CAACA;SACpBF,oBAAAA,SAASG,OAAO,cAAhBH,wCAAAA,kBAAkBI,KAAK;IACzB;IAEA,qBACE,KAACd;QACCK,KAAKN,UAAU;YAACW;YAAUL;SAAI;QAC9BF,WAAWM;QACV,GAAGL,KAAK;QACTI,MAAMA;QACNO,4BACE,KAACd;YAAee,SAASL;YAA2BL,MAAMA;;;AAIlE,GACA"}
+{"version":3,"sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { forwardRef, useState, useRef } from \"react\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport {\n  TextField,\n  type TextFieldProps,\n  type TextFieldRef,\n  type TextFieldElementType,\n} from \"../TextField\";\nimport { ShowHideButton } from \"./ShowHideButton\";\n\nexport interface PasswordFieldProps extends TextFieldProps {}\n\nexport type PasswordFieldRef = TextFieldRef;\n\nexport const PasswordField = forwardRef(\n  ({ className, ...props }: PasswordFieldProps, ref: TextFieldRef) => {\n    const [show, setShow] = useState(false);\n    const type = show ? \"text\" : \"password\";\n    const classes = classNames(\"mobius-password-field\", className);\n    const localRef = useRef<TextFieldElementType>(null);\n\n    const handleShowHideButtonClick = () => {\n      setShow(oldShow => !oldShow);\n      localRef.current?.focus();\n    };\n\n    return (\n      <TextField\n        ref={mergeRefs([localRef, ref])}\n        className={classes}\n        {...props}\n        type={type}\n        suffixInside={\n          <ShowHideButton onClick={handleShowHideButtonClick} show={show} />\n        }\n      />\n    );\n  },\n);\n"],"names":["classNames","forwardRef","useState","useRef","mergeRefs","TextField","ShowHideButton","PasswordField","className","props","ref","show","setShow","type","classes","localRef","handleShowHideButtonClick","oldShow","current","focus","suffixInside","onClick"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,QAAQ;AACrD,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SACEC,SAAS,QAIJ,eAAe;AACtB,SAASC,cAAc,QAAQ,mBAAmB;AAMlD,OAAO,MAAMC,8BAAgBN,WAC3B,CAAC,EAAEO,SAAS,EAAE,GAAGC,OAA2B,EAAEC;IAC5C,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAAS;IACjC,MAAMW,OAAOF,OAAO,SAAS;IAC7B,MAAMG,UAAUd,WAAW,yBAAyBQ;IACpD,MAAMO,WAAWZ,OAA6B;IAE9C,MAAMa,4BAA4B;YAEhCD;QADAH,QAAQK,CAAAA,UAAW,CAACA;SACpBF,oBAAAA,SAASG,OAAO,cAAhBH,wCAAAA,kBAAkBI,KAAK;IACzB;IAEA,qBACE,KAACd;QACCK,KAAKN,UAAU;YAACW;YAAUL;SAAI;QAC9BF,WAAWM;QACV,GAAGL,KAAK;QACTI,MAAMA;QACNO,4BACE,KAACd;YAAee,SAASL;YAA2BL,MAAMA;;;AAIlE,GACA"}

package/dist/esm/components/PasswordField/ShowHideButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ShowHideButton = ({ show = false, onClick })=>/*#__PURE__*/ _jsx("button", {
-        className: "mobius/PasswordFieldShowButton",
+        className: "mobius-password-field__show-button",
         type: "button",
         onClick: (e)=>{
             e.preventDefault();

package/dist/esm/components/PasswordField/ShowHideButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PasswordField/ShowHideButton.tsx"],"sourcesContent":["export interface ShowHideButtonProps {\n  show?: boolean;\n  onClick: () => void;\n}\n\nexport const ShowHideButton = ({\n  show = false,\n  onClick,\n}: ShowHideButtonProps) => (\n  <button\n    className=\"mobius/PasswordFieldShowButton\"\n    type=\"button\"\n    onClick={e => {\n      e.preventDefault();\n      onClick();\n    }}\n    aria-label={`${show ? \"Hide\" : \"Show\"} password`}\n    data-testid=\"show-hide-button\"\n  >\n    {show ? \"hide\" : \"show\"}\n  </button>\n);\n"],"names":["ShowHideButton","show","onClick","button","className","type","e","preventDefault","aria-label","data-testid"],"mappings":";AAKA,OAAO,MAAMA,iBAAiB,CAAC,EAC7BC,OAAO,KAAK,EACZC,OAAO,EACa,iBACpB,KAACC;QACCC,WAAU;QACVC,MAAK;QACLH,SAASI,CAAAA;YACPA,EAAEC,cAAc;YAChBL;QACF;QACAM,cAAY,CAAC,EAAEP,OAAO,SAAS,OAAO,SAAS,CAAC;QAChDQ,eAAY;kBAEXR,OAAO,SAAS;OAEnB"}
+{"version":3,"sources":["../../../../src/components/PasswordField/ShowHideButton.tsx"],"sourcesContent":["export interface ShowHideButtonProps {\n  show?: boolean;\n  onClick: () => void;\n}\n\nexport const ShowHideButton = ({\n  show = false,\n  onClick,\n}: ShowHideButtonProps) => (\n  <button\n    className=\"mobius-password-field__show-button\"\n    type=\"button\"\n    onClick={e => {\n      e.preventDefault();\n      onClick();\n    }}\n    aria-label={`${show ? \"Hide\" : \"Show\"} password`}\n    data-testid=\"show-hide-button\"\n  >\n    {show ? \"hide\" : \"show\"}\n  </button>\n);\n"],"names":["ShowHideButton","show","onClick","button","className","type","e","preventDefault","aria-label","data-testid"],"mappings":";AAKA,OAAO,MAAMA,iBAAiB,CAAC,EAC7BC,OAAO,KAAK,EACZC,OAAO,EACa,iBACpB,KAACC;QACCC,WAAU;QACVC,MAAK;QACLH,SAASI,CAAAA;YACPA,EAAEC,cAAc;YAChBL;QACF;QACAM,cAAY,CAAC,EAAEP,OAAO,SAAS,OAAO,SAAS,CAAC;QAChDQ,eAAY;kBAEXR,OAAO,SAAS;OAEnB"}

package/dist/esm/components/Popover/Popover.js

@@ -39,7 +39,7 @@ export const Popover = (props)=>{
     const { getReferenceProps, getFloatingProps } = useInteractions([
         dismiss
     ]);
-    const containerClasses = classNames("mobius", "mobius/PopoverContainer", className);
+    const containerClasses = classNames("mobius", "mobius-popover__container", className);
     const toggleVisibility = ()=>{
         if (isOpen) {
             setIsOpen(false);
@@ -51,7 +51,7 @@ export const Popover = (props)=>{
     };
     const triggerComponent = /*#__PURE__*/ cloneElement(trigger, {
         ref: refs.setReference,
-        className: classNames(trigger.props.className, "mobius/PopoverToggle"),
+        className: classNames(trigger.props.className, "mobius-popover__toggle"),
         onClick: toggleVisibility,
         ...getReferenceProps()
     });
@@ -72,25 +72,25 @@ export const Popover = (props)=>{
                 ...getFloatingProps(),
                 children: [
                     /*#__PURE__*/ _jsxs("div", {
-                        className: "mobius/Popover",
+                        className: "mobius-popover",
                         children: [
                             /*#__PURE__*/ _jsx("header", {
-                                className: "mobius/PopoverHeader",
+                                className: "mobius-popover__header",
                                 children: /*#__PURE__*/ _jsx(Button, {
                                     type: "button",
-                                    className: "mobius/PopoverCloseButton",
+                                    className: "mobius-popover__close-button",
                                     onClick: toggleVisibility,
                                     "aria-label": "Close",
                                     variant: "ghost",
                                     children: /*#__PURE__*/ _jsx(Icon, {
                                         icon: cross,
                                         size: "md",
-                                        className: "mobius/PopoverCloseIcon"
+                                        className: "mobius-popover__close-icon"
                                     })
                                 })
                             }),
                             /*#__PURE__*/ _jsx("div", {
-                                className: "mobius/PopoverBody",
+                                className: "mobius-popover__body",
                                 children: children
                             })
                         ]
@@ -99,7 +99,7 @@ export const Popover = (props)=>{
                         ref: arrowRef,
                         context: context,
                         width: 20,
-                        className: "mobius/PopoverArrowIcon"
+                        className: "mobius-popover__arrow-icon"
                     })
                 ]
             })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\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  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/PopoverContainer\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius/PopoverToggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius/Popover\">\n            <header className=\"mobius/PopoverHeader\">\n              <Button\n                type=\"button\"\n                className=\"mobius/PopoverCloseButton\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius/PopoverCloseIcon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius/PopoverBody\">{children}</div>\n          </div>\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            width={20}\n            className=\"mobius/PopoverArrowIcon\"\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["FloatingArrow","arrow","autoUpdate","flip","offset","shift","useDismiss","useFloating","useInteractions","cross","classNames","cloneElement","useRef","useState","useWindowEvent","Button","Icon","OFFSET_FROM_CONTENT_DEFAULT","Popover","props","trigger","children","onOpen","onClose","className","arrowRef","isOpen","setIsOpen","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","element","dismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","containerClasses","toggleVisibility","triggerComponent","ref","setReference","onClick","e","key","preventDefault","stopPropagation","div","setFloating","style","header","type","aria-label","variant","icon","size","width"],"mappings":";AAAA,SACEA,aAAa,EACbC,KAAK,EACLC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,eAAe,QACV,qBAAqB;AAC5B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,OAAOC,gBAAgB,aAAa;AACpC,SAKEC,YAAY,EACZC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,SAASC,cAAc,QAAQ,cAAc;AAE7C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAmB/B,MAAMC,8BAA8B;AAEpC,OAAO,MAAMC,UAAU,CAACC;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWb,OAAO;IACxB,MAAM,CAACc,QAAQC,UAAU,GAAGd,SAAS;IACrC,MAAM,EAAEe,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGvB,YAAY;QACpDwB,MAAML;QACNM,cAAcL;QACdM,sBAAsB/B;QACtBgC,YAAY;YACVjC,MAAM;gBACJkC,SAASV;YACX;YACArB,OAAOa;YACPZ;YACAF;SACD;IACH;IACA,MAAMiC,UAAU9B,WAAWwB,SAAS;QAClCO,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASZ,KAAKa,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjBpB,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEuB,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGvC,gBAAgB;QAAC4B;KAAQ;IAEzE,MAAMY,mBAAmBtC,WACvB,UACA,2BACAc;IAGF,MAAMyB,mBAAmB;QACvB,IAAIvB,QAAQ;YACVC,UAAU;YACVJ,oBAAAA,8BAAAA;YACA;QACF;QAEAI,UAAU;QACVL,mBAAAA,6BAAAA;IACF;IAEA,MAAM4B,iCAAmBvC,aAAaS,SAAS;QAC7C+B,KAAKvB,KAAKwB,YAAY;QACtB5B,WAAWd,WAAWU,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/C6B,SAASJ;QACT,GAAGH,mBAAmB;IACxB;IAEAhC,eAAe,WAAWwC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtBhC,oBAAAA,8BAAAA;YACA+B,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGP;YACAxB,wBACC,MAACgC;gBACClC,WAAWwB;gBACXG,KAAKvB,KAAK+B,WAAW;gBACrBC,OAAO/B;gBACN,GAAGkB,kBAAkB;;kCAEtB,MAACW;wBAAIlC,WAAU;;0CACb,KAACqC;gCAAOrC,WAAU;0CAChB,cAAA,KAACT;oCACC+C,MAAK;oCACLtC,WAAU;oCACV6B,SAASJ;oCACTc,cAAW;oCACXC,SAAQ;8CAER,cAAA,KAAChD;wCACCiD,MAAMxD;wCACNyD,MAAK;wCACL1C,WAAU;;;;0CAIhB,KAACkC;gCAAIlC,WAAU;0CAAsBH;;;;kCAEvC,KAACrB;wBACCmD,KAAK1B;wBACLK,SAASA;wBACTqC,OAAO;wBACP3C,WAAU;;;;;;AAMtB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\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  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius-popover__container\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius-popover__toggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius-popover\">\n            <header className=\"mobius-popover__header\">\n              <Button\n                type=\"button\"\n                className=\"mobius-popover__close-button\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius-popover__close-icon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius-popover__body\">{children}</div>\n          </div>\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            width={20}\n            className=\"mobius-popover__arrow-icon\"\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["FloatingArrow","arrow","autoUpdate","flip","offset","shift","useDismiss","useFloating","useInteractions","cross","classNames","cloneElement","useRef","useState","useWindowEvent","Button","Icon","OFFSET_FROM_CONTENT_DEFAULT","Popover","props","trigger","children","onOpen","onClose","className","arrowRef","isOpen","setIsOpen","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","element","dismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","containerClasses","toggleVisibility","triggerComponent","ref","setReference","onClick","e","key","preventDefault","stopPropagation","div","setFloating","style","header","type","aria-label","variant","icon","size","width"],"mappings":";AAAA,SACEA,aAAa,EACbC,KAAK,EACLC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,eAAe,QACV,qBAAqB;AAC5B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,OAAOC,gBAAgB,aAAa;AACpC,SAKEC,YAAY,EACZC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,SAASC,cAAc,QAAQ,cAAc;AAE7C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAmB/B,MAAMC,8BAA8B;AAEpC,OAAO,MAAMC,UAAU,CAACC;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWb,OAAO;IACxB,MAAM,CAACc,QAAQC,UAAU,GAAGd,SAAS;IACrC,MAAM,EAAEe,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGvB,YAAY;QACpDwB,MAAML;QACNM,cAAcL;QACdM,sBAAsB/B;QACtBgC,YAAY;YACVjC,MAAM;gBACJkC,SAASV;YACX;YACArB,OAAOa;YACPZ;YACAF;SACD;IACH;IACA,MAAMiC,UAAU9B,WAAWwB,SAAS;QAClCO,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASZ,KAAKa,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjBpB,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEuB,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGvC,gBAAgB;QAAC4B;KAAQ;IAEzE,MAAMY,mBAAmBtC,WACvB,UACA,6BACAc;IAGF,MAAMyB,mBAAmB;QACvB,IAAIvB,QAAQ;YACVC,UAAU;YACVJ,oBAAAA,8BAAAA;YACA;QACF;QAEAI,UAAU;QACVL,mBAAAA,6BAAAA;IACF;IAEA,MAAM4B,iCAAmBvC,aAAaS,SAAS;QAC7C+B,KAAKvB,KAAKwB,YAAY;QACtB5B,WAAWd,WAAWU,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/C6B,SAASJ;QACT,GAAGH,mBAAmB;IACxB;IAEAhC,eAAe,WAAWwC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtBhC,oBAAAA,8BAAAA;YACA+B,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGP;YACAxB,wBACC,MAACgC;gBACClC,WAAWwB;gBACXG,KAAKvB,KAAK+B,WAAW;gBACrBC,OAAO/B;gBACN,GAAGkB,kBAAkB;;kCAEtB,MAACW;wBAAIlC,WAAU;;0CACb,KAACqC;gCAAOrC,WAAU;0CAChB,cAAA,KAACT;oCACC+C,MAAK;oCACLtC,WAAU;oCACV6B,SAASJ;oCACTc,cAAW;oCACXC,SAAQ;8CAER,cAAA,KAAChD;wCACCiD,MAAMxD;wCACNyD,MAAK;wCACL1C,WAAU;;;;0CAIhB,KAACkC;gCAAIlC,WAAU;0CAAwBH;;;;kCAEzC,KAACrB;wBACCmD,KAAK1B;wBACLK,SAASA;wBACTqC,OAAO;wBACP3C,WAAU;;;;;;AAMtB,EAAE"}

package/dist/esm/components/Progress/Progress.js

@@ -23,7 +23,7 @@ const getLabelComponent = (label, progressLabelId, showLabel)=>{
     if (showLabel) {
         return /*#__PURE__*/ _jsx(Label, {
             id: progressLabelId,
-            className: "mobius/ProgressLabel",
+            className: "mobius-progress__label",
             elementType: "span",
             children: label
         });
@@ -31,7 +31,7 @@ const getLabelComponent = (label, progressLabelId, showLabel)=>{
     return /*#__PURE__*/ _jsx(VisuallyHidden, {
         children: /*#__PURE__*/ _jsx(Label, {
             id: progressLabelId,
-            className: "mobius/ProgressLabel",
+            className: "mobius-progress__label",
             elementType: "span",
             children: label
         })
@@ -57,7 +57,7 @@ const Progress = /*#__PURE__*/ forwardRef((props, ref)=>{
     const clamp = (num, min, max)=>Math.min(Math.max(num, min), max);
     const percentage = clamp(Math.round((value - minValue) / (maxValue - minValue) * 100), 0, 100);
     const barWidth = `${percentage}%`;
-    const classes = classNames("mobius", "mobius/Progress", className, {
+    const classes = classNames("mobius", "mobius-progress", className, {
         "--is-primary": variant === "primary",
         "--is-secondary": variant === "secondary"
     });
@@ -78,9 +78,9 @@ const Progress = /*#__PURE__*/ forwardRef((props, ref)=>{
         children: [
             labelComponent,
             /*#__PURE__*/ _jsx("div", {
-                className: "mobius/ProgressTrack",
+                className: "mobius-progress__track",
                 children: /*#__PURE__*/ _jsx("div", {
-                    className: "mobius/ProgressBar",
+                    className: "mobius-progress__bar",
                     style: {
                         width: barWidth
                     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint no-console: \"off\" */\nimport type { AriaProgressBarProps } from \"@react-types/progress\";\nimport classNames from \"classnames/dedupe\";\nimport { ReactNode, Ref, RefAttributes, forwardRef, useId } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Label } from \"../Label\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nexport type ProgressElementType = HTMLDivElement;\n\nexport interface ProgressProps\n  extends Omit<AriaProgressBarProps, \"label\">,\n    DOMProps,\n    RefAttributes<ProgressElementType> {\n  label: ReactNode;\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  id?: string;\n  className?: string;\n  showLabel?: boolean;\n  showValueLabel?: boolean;\n  variant?: \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\";\n  value?: number;\n  minValue?: number;\n  maxValue?: number;\n  valueFormatter?: (\n    value: number,\n    minValue: number,\n    maxValue: number,\n  ) => string;\n}\n\nexport type ProgressRef = Ref<ProgressElementType>;\n\nfunction warnAboutInvalidValues(\n  value: number,\n  minValue: number,\n  maxValue: number,\n) {\n  if (minValue > maxValue) {\n    console.warn(\"minValue is greater than maxValue\");\n  }\n  if (value < minValue) {\n    console.warn(\"Progress value is less than minValue\");\n  }\n  if (value > maxValue) {\n    console.warn(\"Progress value is greater than maxValue\");\n  }\n}\n\nconst sanitizedValue = (\n  value: number | undefined,\n  defaultValue: number,\n): number => {\n  const numberValue = parseFloat(value as any);\n  return Number.isNaN(numberValue) ? defaultValue : numberValue;\n};\n\nconst getLabelComponent = (\n  label: ReactNode,\n  progressLabelId: string,\n  showLabel: boolean,\n) => {\n  if (showLabel) {\n    return (\n      <Label\n        id={progressLabelId}\n        className=\"mobius/ProgressLabel\"\n        elementType=\"span\"\n      >\n        {label}\n      </Label>\n    );\n  }\n\n  return (\n    <VisuallyHidden>\n      <Label\n        id={progressLabelId}\n        className=\"mobius/ProgressLabel\"\n        elementType=\"span\"\n      >\n        {label}\n      </Label>\n    </VisuallyHidden>\n  );\n};\n\nconst DEFAULT_VALUE = 0;\nconst DEFAULT_MIN_VALUE = 0;\nconst DEFAULT_MAX_VALUE = 100;\n\nconst Progress: ForwardedRefComponent<ProgressProps, ProgressElementType> =\n  forwardRef((props: ProgressProps, ref: ProgressRef) => {\n    const progressId = useId();\n    const progressLabelId = useId();\n    const {\n      id,\n      label,\n      showLabel = true,\n      showValueLabel = !!label,\n      valueFormatter,\n      variant = \"primary\",\n      className,\n    } = props;\n\n    let { value, minValue, maxValue } = props;\n\n    value = sanitizedValue(value, DEFAULT_VALUE);\n    minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);\n    maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);\n\n    // Will never happen but lets appease the typescript gods\n    if (\n      value === undefined ||\n      minValue === undefined ||\n      maxValue === undefined\n    ) {\n      return null;\n    }\n\n    warnAboutInvalidValues(value, minValue, maxValue);\n\n    // Calculate the width of the progress bar as a percentage\n    const clamp = (num: number, min: number, max: number): number =>\n      Math.min(Math.max(num, min), max);\n    const percentage = clamp(\n      Math.round(((value - minValue) / (maxValue - minValue)) * 100),\n      0,\n      100,\n    );\n    const barWidth = `${percentage}%`;\n\n    const classes = classNames(\"mobius\", \"mobius/Progress\", className, {\n      \"--is-primary\": variant === \"primary\",\n      \"--is-secondary\": variant === \"secondary\",\n    });\n\n    // Set progress aria values\n    const progressBarProps: Record<string, string> = {};\n    progressBarProps[\"aria-valuemin\"] = minValue.toString();\n    progressBarProps[\"aria-valuemax\"] = maxValue.toString();\n    progressBarProps[\"aria-valuenow\"] = value.toString();\n    progressBarProps[\"aria-valuetext\"] =\n      valueFormatter instanceof Function\n        ? valueFormatter(value, minValue, maxValue!)\n        : barWidth;\n    const labelComponent = getLabelComponent(label, progressLabelId, showLabel);\n\n    return (\n      <div\n        id={id || progressId}\n        {...progressBarProps}\n        ref={ref}\n        className={classes}\n        role=\"progressbar\"\n        aria-labelledby={progressLabelId}\n      >\n        {labelComponent}\n        <div className=\"mobius/ProgressTrack\">\n          <div className=\"mobius/ProgressBar\" style={{ width: barWidth }} />\n        </div>\n        {showValueLabel && (\n          <Label data-testid=\"value-label\" elementType=\"span\">\n            {progressBarProps[\"aria-valuetext\"]}\n          </Label>\n        )}\n      </div>\n    );\n  });\n\nProgress.displayName = \"Progress\";\nexport { Progress };\n"],"names":["classNames","forwardRef","useId","Label","VisuallyHidden","warnAboutInvalidValues","value","minValue","maxValue","console","warn","sanitizedValue","defaultValue","numberValue","parseFloat","Number","isNaN","getLabelComponent","label","progressLabelId","showLabel","id","className","elementType","DEFAULT_VALUE","DEFAULT_MIN_VALUE","DEFAULT_MAX_VALUE","Progress","props","ref","progressId","showValueLabel","valueFormatter","variant","undefined","clamp","num","min","max","Math","percentage","round","barWidth","classes","progressBarProps","toString","Function","labelComponent","div","role","aria-labelledby","style","width","data-testid","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint no-console: \"off\" */\nimport type { AriaProgressBarProps } from \"@react-types/progress\";\nimport classNames from \"classnames/dedupe\";\nimport { ReactNode, Ref, RefAttributes, forwardRef, useId } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Label } from \"../Label\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nexport type ProgressElementType = HTMLDivElement;\n\nexport interface ProgressProps\n  extends Omit<AriaProgressBarProps, \"label\">,\n    DOMProps,\n    RefAttributes<ProgressElementType> {\n  label: ReactNode;\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  id?: string;\n  className?: string;\n  showLabel?: boolean;\n  showValueLabel?: boolean;\n  variant?: \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\";\n  value?: number;\n  minValue?: number;\n  maxValue?: number;\n  valueFormatter?: (\n    value: number,\n    minValue: number,\n    maxValue: number,\n  ) => string;\n}\n\nexport type ProgressRef = Ref<ProgressElementType>;\n\nfunction warnAboutInvalidValues(\n  value: number,\n  minValue: number,\n  maxValue: number,\n) {\n  if (minValue > maxValue) {\n    console.warn(\"minValue is greater than maxValue\");\n  }\n  if (value < minValue) {\n    console.warn(\"Progress value is less than minValue\");\n  }\n  if (value > maxValue) {\n    console.warn(\"Progress value is greater than maxValue\");\n  }\n}\n\nconst sanitizedValue = (\n  value: number | undefined,\n  defaultValue: number,\n): number => {\n  const numberValue = parseFloat(value as any);\n  return Number.isNaN(numberValue) ? defaultValue : numberValue;\n};\n\nconst getLabelComponent = (\n  label: ReactNode,\n  progressLabelId: string,\n  showLabel: boolean,\n) => {\n  if (showLabel) {\n    return (\n      <Label\n        id={progressLabelId}\n        className=\"mobius-progress__label\"\n        elementType=\"span\"\n      >\n        {label}\n      </Label>\n    );\n  }\n\n  return (\n    <VisuallyHidden>\n      <Label\n        id={progressLabelId}\n        className=\"mobius-progress__label\"\n        elementType=\"span\"\n      >\n        {label}\n      </Label>\n    </VisuallyHidden>\n  );\n};\n\nconst DEFAULT_VALUE = 0;\nconst DEFAULT_MIN_VALUE = 0;\nconst DEFAULT_MAX_VALUE = 100;\n\nconst Progress: ForwardedRefComponent<ProgressProps, ProgressElementType> =\n  forwardRef((props: ProgressProps, ref: ProgressRef) => {\n    const progressId = useId();\n    const progressLabelId = useId();\n    const {\n      id,\n      label,\n      showLabel = true,\n      showValueLabel = !!label,\n      valueFormatter,\n      variant = \"primary\",\n      className,\n    } = props;\n\n    let { value, minValue, maxValue } = props;\n\n    value = sanitizedValue(value, DEFAULT_VALUE);\n    minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);\n    maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);\n\n    // Will never happen but lets appease the typescript gods\n    if (\n      value === undefined ||\n      minValue === undefined ||\n      maxValue === undefined\n    ) {\n      return null;\n    }\n\n    warnAboutInvalidValues(value, minValue, maxValue);\n\n    // Calculate the width of the progress bar as a percentage\n    const clamp = (num: number, min: number, max: number): number =>\n      Math.min(Math.max(num, min), max);\n    const percentage = clamp(\n      Math.round(((value - minValue) / (maxValue - minValue)) * 100),\n      0,\n      100,\n    );\n    const barWidth = `${percentage}%`;\n\n    const classes = classNames(\"mobius\", \"mobius-progress\", className, {\n      \"--is-primary\": variant === \"primary\",\n      \"--is-secondary\": variant === \"secondary\",\n    });\n\n    // Set progress aria values\n    const progressBarProps: Record<string, string> = {};\n    progressBarProps[\"aria-valuemin\"] = minValue.toString();\n    progressBarProps[\"aria-valuemax\"] = maxValue.toString();\n    progressBarProps[\"aria-valuenow\"] = value.toString();\n    progressBarProps[\"aria-valuetext\"] =\n      valueFormatter instanceof Function\n        ? valueFormatter(value, minValue, maxValue!)\n        : barWidth;\n    const labelComponent = getLabelComponent(label, progressLabelId, showLabel);\n\n    return (\n      <div\n        id={id || progressId}\n        {...progressBarProps}\n        ref={ref}\n        className={classes}\n        role=\"progressbar\"\n        aria-labelledby={progressLabelId}\n      >\n        {labelComponent}\n        <div className=\"mobius-progress__track\">\n          <div className=\"mobius-progress__bar\" style={{ width: barWidth }} />\n        </div>\n        {showValueLabel && (\n          <Label data-testid=\"value-label\" elementType=\"span\">\n            {progressBarProps[\"aria-valuetext\"]}\n          </Label>\n        )}\n      </div>\n    );\n  });\n\nProgress.displayName = \"Progress\";\nexport { Progress };\n"],"names":["classNames","forwardRef","useId","Label","VisuallyHidden","warnAboutInvalidValues","value","minValue","maxValue","console","warn","sanitizedValue","defaultValue","numberValue","parseFloat","Number","isNaN","getLabelComponent","label","progressLabelId","showLabel","id","className","elementType","DEFAULT_VALUE","DEFAULT_MIN_VALUE","DEFAULT_MAX_VALUE","Progress","props","ref","progressId","showValueLabel","valueFormatter","variant","undefined","clamp","num","min","max","Math","percentage","round","barWidth","classes","progressBarProps","toString","Function","labelComponent","div","role","aria-labelledby","style","width","data-testid","displayName"],"mappings":"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"}

package/dist/esm/components/Radio/Radio.js

@@ -15,8 +15,8 @@ const Radio = /*#__PURE__*/ forwardRef((props, ref)=>{
         "--is-multiline": !!isMultiline,
         "--is-required": isRequired
     };
-    const containerClasses = classNames("mobius/RadioLabel", radioClasses, className);
-    const inputClasses = classNames("mobius/RadioInput", radioClasses);
+    const containerClasses = classNames("mobius-radio__label", radioClasses, className);
+    const inputClasses = classNames("mobius-radio__input", radioClasses);
     const handleClick = (event)=>{
         if (onChange) {
             onChange(event);
@@ -50,19 +50,19 @@ const Radio = /*#__PURE__*/ forwardRef((props, ref)=>{
                         ...rest
                     }),
                     isMultiline ? /*#__PURE__*/ _jsxs("div", {
-                        className: "mobius/RadioContentMultiline",
+                        className: "mobius-radio__content--multiline",
                         children: [
                             /*#__PURE__*/ _jsx("div", {
-                                className: "mobius/RadioContentFirstLine",
+                                className: "mobius-radio__content-first-line",
                                 children: label
                             }),
                             /*#__PURE__*/ _jsx("div", {
-                                className: "mobius/RadioExtraContent",
+                                className: "mobius-radio__extra-content",
                                 children: children
                             })
                         ]
                     }) : /*#__PURE__*/ _jsx("div", {
-                        className: "mobius/RadioContent",
+                        className: "mobius-radio__content",
                         children: label || children
                     })
                 ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { MouseEvent, ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type RadioElementType = HTMLInputElement;\n\nexport type AriaRadioProps = {\n  /**\n   * Defines a string value that labels the current element.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Identifies the element (or elements) that labels the current element.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * Identifies the element (or elements) that provide a detailed, extended description for the object.\n   */\n  \"aria-details\"?: string;\n};\n\nexport interface RadioProps\n  extends DOMProps,\n    AriaRadioProps,\n    RefAttributes<RadioElementType> {\n  children?: ReactNode;\n  className?: string;\n  label?: ReactNode;\n  errorMessage?: string;\n  value: string;\n  isDisabled?: boolean;\n  onChange?: (event: HTMLElementEvent<RadioElementType>) => void;\n  defaultChecked?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  name?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n  isRequired?: boolean;\n}\n\nexport type RadioRef = Ref<RadioElementType>;\n\nconst Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(\n  (props: RadioProps, ref: RadioRef) => {\n    const {\n      children,\n      value,\n      label,\n      className,\n      isDisabled,\n      errorMessage,\n      onChange,\n      defaultChecked,\n      groupDisabled,\n      name,\n      selected,\n      setSelected,\n      isRequired,\n      ...otherProps\n    } = props;\n    const realDisabled = groupDisabled || isDisabled;\n    const isMultiline = label && children;\n    const isDefaultSelected = selected === value || defaultChecked;\n    const radioClasses = {\n      \"--is-disabled\": realDisabled,\n      \"--is-selected\": selected === value,\n      \"--is-multiline\": !!isMultiline,\n      \"--is-required\": isRequired,\n    };\n    const containerClasses = classNames(\n      \"mobius/RadioLabel\",\n      radioClasses,\n      className,\n    );\n    const inputClasses = classNames(\"mobius/RadioInput\", radioClasses);\n\n    const handleClick = (event: MouseEvent<RadioElementType>) => {\n      if (onChange) {\n        onChange(event as unknown as HTMLElementEvent<RadioElementType>);\n      }\n      if (setSelected) {\n        setSelected(event.currentTarget.value);\n      }\n    };\n\n    // Exlucde props that are passed via cloneElement in `<RadioGroup />`\n    const {\n      // @ts-ignore\n      // eslint-disable-next-line\n      orientation,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      \"aria-describedby\": _ariaDescribedBy,\n      ...rest\n    } = otherProps;\n\n    return (\n      <>\n        <Label className={containerClasses}>\n          <input\n            aria-describedby={otherProps[\"aria-describedby\"]}\n            disabled={realDisabled}\n            ref={ref}\n            className={inputClasses}\n            onClick={handleClick}\n            value={value}\n            tabIndex={0}\n            type=\"radio\"\n            defaultChecked={isDefaultSelected}\n            name={name}\n            required={isRequired}\n            {...rest}\n          />\n          {isMultiline ? (\n            <div className=\"mobius/RadioContentMultiline\">\n              <div className=\"mobius/RadioContentFirstLine\">{label}</div>\n              <div className=\"mobius/RadioExtraContent\">{children}</div>\n            </div>\n          ) : (\n            <div className=\"mobius/RadioContent\">{label || children}</div>\n          )}\n        </Label>\n        {errorMessage && <ErrorMessage errorMessage={errorMessage} />}\n      </>\n    );\n  },\n);\n\nRadio.displayName = \"Radio\";\nexport { Radio };\n"],"names":["classNames","forwardRef","ErrorMessage","Label","Radio","props","ref","children","value","label","className","isDisabled","errorMessage","onChange","defaultChecked","groupDisabled","name","selected","setSelected","isRequired","otherProps","realDisabled","isMultiline","isDefaultSelected","radioClasses","containerClasses","inputClasses","handleClick","event","currentTarget","orientation","_ariaDescribedBy","rest","input","aria-describedby","disabled","onClick","tabIndex","type","required","div","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAoDC,UAAU,QAAQ,QAAQ;AAI9E,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AAwDjC,MAAMC,sBAA6DH,WACjE,CAACI,OAAmBC;IAClB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACV,GAAGC,YACJ,GAAGf;IACJ,MAAMgB,eAAeN,iBAAiBJ;IACtC,MAAMW,cAAcb,SAASF;IAC7B,MAAMgB,oBAAoBN,aAAaT,SAASM;IAChD,MAAMU,eAAe;QACnB,iBAAiBH;QACjB,iBAAiBJ,aAAaT;QAC9B,kBAAkB,CAAC,CAACc;QACpB,iBAAiBH;IACnB;IACA,MAAMM,mBAAmBzB,WACvB,qBACAwB,cACAd;IAEF,MAAMgB,eAAe1B,WAAW,qBAAqBwB;IAErD,MAAMG,cAAc,CAACC;QACnB,IAAIf,UAAU;YACZA,SAASe;QACX;QACA,IAAIV,aAAa;YACfA,YAAYU,MAAMC,aAAa,CAACrB,KAAK;QACvC;IACF;IAEA,qEAAqE;IACrE,MAAM,EACJ,aAAa;IACb,2BAA2B;IAC3BsB,WAAW,EACX,6DAA6D;IAC7D,oBAAoBC,gBAAgB,EACpC,GAAGC,MACJ,GAAGZ;IAEJ,qBACE;;0BACE,MAACjB;gBAAMO,WAAWe;;kCAChB,KAACQ;wBACCC,oBAAkBd,UAAU,CAAC,mBAAmB;wBAChDe,UAAUd;wBACVf,KAAKA;wBACLI,WAAWgB;wBACXU,SAAST;wBACTnB,OAAOA;wBACP6B,UAAU;wBACVC,MAAK;wBACLxB,gBAAgBS;wBAChBP,MAAMA;wBACNuB,UAAUpB;wBACT,GAAGa,IAAI;;oBAETV,4BACC,MAACkB;wBAAI9B,WAAU;;0CACb,KAAC8B;gCAAI9B,WAAU;0CAAgCD;;0CAC/C,KAAC+B;gCAAI9B,WAAU;0CAA4BH;;;uCAG7C,KAACiC;wBAAI9B,WAAU;kCAAuBD,SAASF;;;;YAGlDK,8BAAgB,KAACV;gBAAaU,cAAcA;;;;AAGnD;AAGFR,MAAMqC,WAAW,GAAG;AACpB,SAASrC,KAAK,GAAG"}
+{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { MouseEvent, ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type RadioElementType = HTMLInputElement;\n\nexport type AriaRadioProps = {\n  /**\n   * Defines a string value that labels the current element.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Identifies the element (or elements) that labels the current element.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * Identifies the element (or elements) that provide a detailed, extended description for the object.\n   */\n  \"aria-details\"?: string;\n};\n\nexport interface RadioProps\n  extends DOMProps,\n    AriaRadioProps,\n    RefAttributes<RadioElementType> {\n  children?: ReactNode;\n  className?: string;\n  label?: ReactNode;\n  errorMessage?: string;\n  value: string;\n  isDisabled?: boolean;\n  onChange?: (event: HTMLElementEvent<RadioElementType>) => void;\n  defaultChecked?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  name?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n  isRequired?: boolean;\n}\n\nexport type RadioRef = Ref<RadioElementType>;\n\nconst Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(\n  (props: RadioProps, ref: RadioRef) => {\n    const {\n      children,\n      value,\n      label,\n      className,\n      isDisabled,\n      errorMessage,\n      onChange,\n      defaultChecked,\n      groupDisabled,\n      name,\n      selected,\n      setSelected,\n      isRequired,\n      ...otherProps\n    } = props;\n    const realDisabled = groupDisabled || isDisabled;\n    const isMultiline = label && children;\n    const isDefaultSelected = selected === value || defaultChecked;\n    const radioClasses = {\n      \"--is-disabled\": realDisabled,\n      \"--is-selected\": selected === value,\n      \"--is-multiline\": !!isMultiline,\n      \"--is-required\": isRequired,\n    };\n    const containerClasses = classNames(\n      \"mobius-radio__label\",\n      radioClasses,\n      className,\n    );\n    const inputClasses = classNames(\"mobius-radio__input\", radioClasses);\n\n    const handleClick = (event: MouseEvent<RadioElementType>) => {\n      if (onChange) {\n        onChange(event as unknown as HTMLElementEvent<RadioElementType>);\n      }\n      if (setSelected) {\n        setSelected(event.currentTarget.value);\n      }\n    };\n\n    // Exlucde props that are passed via cloneElement in `<RadioGroup />`\n    const {\n      // @ts-ignore\n      // eslint-disable-next-line\n      orientation,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      \"aria-describedby\": _ariaDescribedBy,\n      ...rest\n    } = otherProps;\n\n    return (\n      <>\n        <Label className={containerClasses}>\n          <input\n            aria-describedby={otherProps[\"aria-describedby\"]}\n            disabled={realDisabled}\n            ref={ref}\n            className={inputClasses}\n            onClick={handleClick}\n            value={value}\n            tabIndex={0}\n            type=\"radio\"\n            defaultChecked={isDefaultSelected}\n            name={name}\n            required={isRequired}\n            {...rest}\n          />\n          {isMultiline ? (\n            <div className=\"mobius-radio__content--multiline\">\n              <div className=\"mobius-radio__content-first-line\">{label}</div>\n              <div className=\"mobius-radio__extra-content\">{children}</div>\n            </div>\n          ) : (\n            <div className=\"mobius-radio__content\">{label || children}</div>\n          )}\n        </Label>\n        {errorMessage && <ErrorMessage errorMessage={errorMessage} />}\n      </>\n    );\n  },\n);\n\nRadio.displayName = \"Radio\";\nexport { Radio };\n"],"names":["classNames","forwardRef","ErrorMessage","Label","Radio","props","ref","children","value","label","className","isDisabled","errorMessage","onChange","defaultChecked","groupDisabled","name","selected","setSelected","isRequired","otherProps","realDisabled","isMultiline","isDefaultSelected","radioClasses","containerClasses","inputClasses","handleClick","event","currentTarget","orientation","_ariaDescribedBy","rest","input","aria-describedby","disabled","onClick","tabIndex","type","required","div","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAoDC,UAAU,QAAQ,QAAQ;AAI9E,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AAwDjC,MAAMC,sBAA6DH,WACjE,CAACI,OAAmBC;IAClB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACV,GAAGC,YACJ,GAAGf;IACJ,MAAMgB,eAAeN,iBAAiBJ;IACtC,MAAMW,cAAcb,SAASF;IAC7B,MAAMgB,oBAAoBN,aAAaT,SAASM;IAChD,MAAMU,eAAe;QACnB,iBAAiBH;QACjB,iBAAiBJ,aAAaT;QAC9B,kBAAkB,CAAC,CAACc;QACpB,iBAAiBH;IACnB;IACA,MAAMM,mBAAmBzB,WACvB,uBACAwB,cACAd;IAEF,MAAMgB,eAAe1B,WAAW,uBAAuBwB;IAEvD,MAAMG,cAAc,CAACC;QACnB,IAAIf,UAAU;YACZA,SAASe;QACX;QACA,IAAIV,aAAa;YACfA,YAAYU,MAAMC,aAAa,CAACrB,KAAK;QACvC;IACF;IAEA,qEAAqE;IACrE,MAAM,EACJ,aAAa;IACb,2BAA2B;IAC3BsB,WAAW,EACX,6DAA6D;IAC7D,oBAAoBC,gBAAgB,EACpC,GAAGC,MACJ,GAAGZ;IAEJ,qBACE;;0BACE,MAACjB;gBAAMO,WAAWe;;kCAChB,KAACQ;wBACCC,oBAAkBd,UAAU,CAAC,mBAAmB;wBAChDe,UAAUd;wBACVf,KAAKA;wBACLI,WAAWgB;wBACXU,SAAST;wBACTnB,OAAOA;wBACP6B,UAAU;wBACVC,MAAK;wBACLxB,gBAAgBS;wBAChBP,MAAMA;wBACNuB,UAAUpB;wBACT,GAAGa,IAAI;;oBAETV,4BACC,MAACkB;wBAAI9B,WAAU;;0CACb,KAAC8B;gCAAI9B,WAAU;0CAAoCD;;0CACnD,KAAC+B;gCAAI9B,WAAU;0CAA+BH;;;uCAGhD,KAACiC;wBAAI9B,WAAU;kCAAyBD,SAASF;;;;YAGpDK,8BAAgB,KAACV;gBAAaU,cAAcA;;;;AAGnD;AAGFR,MAAMqC,WAAW,GAAG;AACpB,SAASrC,KAAK,GAAG"}

package/dist/esm/components/Radio/RadioGroup.js

@@ -6,6 +6,7 @@ import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
 import { useValidationClasses } from "../../hooks";
+import { Stack } from "../Stack";
 const getDefaultVal = (children, defaultValue)=>{
     if (Array.isArray(children) && defaultValue) {
         const option = children === null || children === void 0 ? void 0 : children.find((item)=>item.props.value === defaultValue);
@@ -29,8 +30,8 @@ const RadioGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
         [`--is-${orientation}`]: true,
         [className || ""]: true
     };
-    const radioGroupClasses = classNames("mobius", "mobius/RadioGroup", radioClasses, validationClasses);
-    const radioWrapperClasses = classNames("mobius/RadioWrapper", {
+    const radioGroupClasses = classNames("mobius", "mobius-radio-group", radioClasses, validationClasses);
+    const radioWrapperClasses = classNames("mobius-radio__wrapper", {
         [`--is-${orientation}`]: true
     });
     const labelClasses = classNames(radioClasses, validationClasses);
@@ -43,7 +44,7 @@ const RadioGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
         props["aria-describedby"]
     ]);
     const labelId = useId();
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsx("div", {
         ...rest,
         "aria-describedby": describedBy,
         "aria-disabled": isDisabled,
@@ -57,36 +58,39 @@ const RadioGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
         ref: ref,
         className: radioGroupClasses,
         role: "radiogroup",
-        children: [
-            label && /*#__PURE__*/ _jsx(Label, {
-                htmlFor: name,
-                id: labelId,
-                className: labelClasses,
-                children: label
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: radioWrapperClasses,
-                children: Children.map(children, (child)=>{
-                    if (/*#__PURE__*/ isValidElement(child)) {
-                        return /*#__PURE__*/ cloneElement(child, {
-                            orientation,
-                            groupDisabled: isDisabled,
-                            name: nameAttribute,
-                            selected,
-                            setSelected,
-                            isRequired,
-                            "aria-describedby": describedBy,
-                            onChange
-                        });
-                    }
-                    return child;
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            gap: "xs",
+            children: [
+                label && /*#__PURE__*/ _jsx(Label, {
+                    htmlFor: name,
+                    id: labelId,
+                    className: labelClasses,
+                    children: label
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: radioWrapperClasses,
+                    children: Children.map(children, (child)=>{
+                        if (/*#__PURE__*/ isValidElement(child)) {
+                            return /*#__PURE__*/ cloneElement(child, {
+                                orientation,
+                                groupDisabled: isDisabled,
+                                name: nameAttribute,
+                                selected,
+                                setSelected,
+                                isRequired,
+                                "aria-describedby": describedBy,
+                                onChange
+                            });
+                        }
+                        return child;
+                    })
+                }),
+                /*#__PURE__*/ _jsx(ErrorMessage, {
+                    id: errorMessageId,
+                    errorMessage: errorMessage
                 })
-            }),
-            /*#__PURE__*/ _jsx(ErrorMessage, {
-                id: errorMessageId,
-                errorMessage: errorMessage
-            })
-        ]
+            ]
+        })
     });
 });
 RadioGroup.displayName = "RadioGroup";

package/dist/esm/components/Radio/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/RadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useId,\n  useState,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Validation } from \"../../types\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport type RadioGroupElementType = HTMLDivElement;\n\nexport interface RadioGroupProps\n  extends DOMProps,\n    Validation,\n    RefAttributes<RadioGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  errorMessage?: string;\n  // Callback that fires when select changes\n  onChange?: (event: HTMLElementEvent<HTMLInputElement>) => void;\n  // Defines a string value that labels the current element.\n  \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n  name?: string;\n}\n\nexport type RadioGroupRef = Ref<RadioGroupElementType>;\n\nconst getDefaultVal = (children: ReactNode, defaultValue?: string) => {\n  if (Array.isArray(children) && defaultValue) {\n    const option = children?.find(item => item.props.value === defaultValue);\n\n    if (!option) return \"\";\n\n    return option.props.value;\n  }\n\n  return \"\";\n};\n\nconst RadioGroup: ForwardedRefComponent<\n  RadioGroupProps,\n  RadioGroupElementType\n> = forwardRef((props: RadioGroupProps, ref: RadioGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    className,\n    errorMessage,\n    children,\n    defaultValue,\n    isReadOnly,\n    name,\n    onChange,\n    ...rest\n  } = props;\n  const defaultSelected = getDefaultVal(children, defaultValue);\n  const [selected, setSelected] = useState<string>(defaultSelected);\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const radioClasses = {\n    \"--is-disabled\": isDisabled,\n    \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n    \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    [`--is-${orientation}`]: true,\n    [className || \"\"]: true,\n  };\n  const radioGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/RadioGroup\",\n    radioClasses,\n    validationClasses,\n  );\n  const radioWrapperClasses = classNames(\"mobius/RadioWrapper\", {\n    [`--is-${orientation}`]: true,\n  });\n  const labelClasses = classNames(radioClasses, validationClasses);\n  const errorMessageId = useId();\n  const defaultNameAttrId = useId();\n  const nameAttribute = name || defaultNameAttrId;\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  return (\n    <div\n      {...rest}\n      aria-describedby={describedBy}\n      aria-disabled={isDisabled}\n      aria-errormessage={shouldErrorMessageShow}\n      aria-invalid={isInvalid}\n      aria-label={props[\"aria-label\"]}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      aria-orientation={orientation}\n      aria-readonly={isReadOnly}\n      aria-required={isRequired}\n      ref={ref}\n      className={radioGroupClasses}\n      role=\"radiogroup\"\n    >\n      {label && (\n        <Label htmlFor={name} id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className={radioWrapperClasses}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              orientation,\n              groupDisabled: isDisabled,\n              name: nameAttribute,\n              selected,\n              setSelected,\n              isRequired,\n              \"aria-describedby\": describedBy,\n              onChange,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </div>\n  );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\nexport { RadioGroup };\n"],"names":["Children","cloneElement","forwardRef","isValidElement","useId","useState","classNames","spaceDelimitedList","ErrorMessage","Label","useValidationClasses","getDefaultVal","children","defaultValue","Array","isArray","option","find","item","props","value","RadioGroup","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","className","errorMessage","isReadOnly","name","onChange","rest","defaultSelected","selected","setSelected","validationClasses","radioClasses","radioGroupClasses","radioWrapperClasses","labelClasses","errorMessageId","defaultNameAttrId","nameAttribute","shouldErrorMessageShow","undefined","describedBy","labelId","div","aria-describedby","aria-disabled","aria-errormessage","aria-invalid","aria-label","aria-labelledby","aria-orientation","aria-readonly","aria-required","role","htmlFor","id","map","child","groupDisabled","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Radio/RadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useId,\n  useState,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Validation } from \"../../types\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Stack } from \"../Stack\";\n\nexport type RadioGroupElementType = HTMLDivElement;\n\nexport interface RadioGroupProps\n  extends DOMProps,\n    Validation,\n    RefAttributes<RadioGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  errorMessage?: string;\n  // Callback that fires when select changes\n  onChange?: (event: HTMLElementEvent<HTMLInputElement>) => void;\n  // Defines a string value that labels the current element.\n  \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n  name?: string;\n}\n\nexport type RadioGroupRef = Ref<RadioGroupElementType>;\n\nconst getDefaultVal = (children: ReactNode, defaultValue?: string) => {\n  if (Array.isArray(children) && defaultValue) {\n    const option = children?.find(item => item.props.value === defaultValue);\n\n    if (!option) return \"\";\n\n    return option.props.value;\n  }\n\n  return \"\";\n};\n\nconst RadioGroup: ForwardedRefComponent<\n  RadioGroupProps,\n  RadioGroupElementType\n> = forwardRef((props: RadioGroupProps, ref: RadioGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    className,\n    errorMessage,\n    children,\n    defaultValue,\n    isReadOnly,\n    name,\n    onChange,\n    ...rest\n  } = props;\n  const defaultSelected = getDefaultVal(children, defaultValue);\n  const [selected, setSelected] = useState<string>(defaultSelected);\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const radioClasses = {\n    \"--is-disabled\": isDisabled,\n    \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n    \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    [`--is-${orientation}`]: true,\n    [className || \"\"]: true,\n  };\n  const radioGroupClasses = classNames(\n    \"mobius\",\n    \"mobius-radio-group\",\n    radioClasses,\n    validationClasses,\n  );\n  const radioWrapperClasses = classNames(\"mobius-radio__wrapper\", {\n    [`--is-${orientation}`]: true,\n  });\n  const labelClasses = classNames(radioClasses, validationClasses);\n  const errorMessageId = useId();\n  const defaultNameAttrId = useId();\n  const nameAttribute = name || defaultNameAttrId;\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  return (\n    <div\n      {...rest}\n      aria-describedby={describedBy}\n      aria-disabled={isDisabled}\n      aria-errormessage={shouldErrorMessageShow}\n      aria-invalid={isInvalid}\n      aria-label={props[\"aria-label\"]}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      aria-orientation={orientation}\n      aria-readonly={isReadOnly}\n      aria-required={isRequired}\n      ref={ref}\n      className={radioGroupClasses}\n      role=\"radiogroup\"\n    >\n      <Stack gap=\"xs\">\n        {label && (\n          <Label htmlFor={name} id={labelId} className={labelClasses}>\n            {label}\n          </Label>\n        )}\n        <div className={radioWrapperClasses}>\n          {Children.map(children, child => {\n            if (isValidElement(child)) {\n              return cloneElement(child as ReactElement, {\n                orientation,\n                groupDisabled: isDisabled,\n                name: nameAttribute,\n                selected,\n                setSelected,\n                isRequired,\n                \"aria-describedby\": describedBy,\n                onChange,\n              });\n            }\n\n            return child;\n          })}\n        </div>\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      </Stack>\n    </div>\n  );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\nexport { RadioGroup };\n"],"names":["Children","cloneElement","forwardRef","isValidElement","useId","useState","classNames","spaceDelimitedList","ErrorMessage","Label","useValidationClasses","Stack","getDefaultVal","children","defaultValue","Array","isArray","option","find","item","props","value","RadioGroup","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","className","errorMessage","isReadOnly","name","onChange","rest","defaultSelected","selected","setSelected","validationClasses","radioClasses","radioGroupClasses","radioWrapperClasses","labelClasses","errorMessageId","defaultNameAttrId","nameAttribute","shouldErrorMessageShow","undefined","describedBy","labelId","div","aria-describedby","aria-disabled","aria-errormessage","aria-invalid","aria-label","aria-labelledby","aria-orientation","aria-readonly","aria-required","role","gap","htmlFor","id","map","child","groupDisabled","displayName"],"mappings":"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"}

package/dist/esm/components/SVG/SVG.js

@@ -3,7 +3,7 @@ import { forwardRef, Children } from "react";
 import classNames from "classnames/dedupe";
 const SVG = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { children, className, ...otherProps } = props;
-    const classes = classNames("mobius", "mobius/SVG", className);
+    const classes = classNames("mobius", "mobius-svg", className);
     const svgNode = Children.only(children);
     // Remove originalType and mdxType props
     const { children: svgChildren, viewBox, xmlns } = svgNode.props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SVG/SVG.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {\n  children: React.ReactElement<React.SVGProps<SVGSVGElement>>;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport type SVGRef = Ref<SVGSVGElement>;\n\nconst SVG: ForwardedRefComponent<SVGProps, SVGSVGElement> = forwardRef(\n  (props: SVGProps, ref: SVGRef) => {\n    const { children, className, ...otherProps } = props;\n\n    const classes = classNames(\"mobius\", \"mobius/SVG\", className);\n    const svgNode = Children.only(children);\n    // Remove originalType and mdxType props\n    const { children: svgChildren, viewBox, xmlns } = svgNode.props;\n\n    return (\n      <svg\n        viewBox={viewBox}\n        xmlns={xmlns}\n        ref={ref}\n        {...otherProps}\n        className={classes}\n      >\n        {svgChildren}\n      </svg>\n    );\n  },\n);\n\nSVG.displayName = \"SVG\";\nexport { SVG };\n"],"names":["forwardRef","Children","classNames","SVG","props","ref","children","className","otherProps","classes","svgNode","only","svgChildren","viewBox","xmlns","svg","displayName"],"mappings":";AAAA,SAAcA,UAAU,EAAiBC,QAAQ,QAAQ,QAAQ;AACjE,OAAOC,gBAAgB,oBAAoB;AAY3C,MAAMC,oBAAsDH,WAC1D,CAACI,OAAiBC;IAChB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,YAAY,GAAGJ;IAE/C,MAAMK,UAAUP,WAAW,UAAU,cAAcK;IACnD,MAAMG,UAAUT,SAASU,IAAI,CAACL;IAC9B,wCAAwC;IACxC,MAAM,EAAEA,UAAUM,WAAW,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGJ,QAAQN,KAAK;IAE/D,qBACE,KAACW;QACCF,SAASA;QACTC,OAAOA;QACPT,KAAKA;QACJ,GAAGG,UAAU;QACdD,WAAWE;kBAEVG;;AAGP;AAGFT,IAAIa,WAAW,GAAG;AAClB,SAASb,GAAG,GAAG"}
+{"version":3,"sources":["../../../../src/components/SVG/SVG.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {\n  children: React.ReactElement<React.SVGProps<SVGSVGElement>>;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport type SVGRef = Ref<SVGSVGElement>;\n\nconst SVG: ForwardedRefComponent<SVGProps, SVGSVGElement> = forwardRef(\n  (props: SVGProps, ref: SVGRef) => {\n    const { children, className, ...otherProps } = props;\n\n    const classes = classNames(\"mobius\", \"mobius-svg\", className);\n    const svgNode = Children.only(children);\n    // Remove originalType and mdxType props\n    const { children: svgChildren, viewBox, xmlns } = svgNode.props;\n\n    return (\n      <svg\n        viewBox={viewBox}\n        xmlns={xmlns}\n        ref={ref}\n        {...otherProps}\n        className={classes}\n      >\n        {svgChildren}\n      </svg>\n    );\n  },\n);\n\nSVG.displayName = \"SVG\";\nexport { SVG };\n"],"names":["forwardRef","Children","classNames","SVG","props","ref","children","className","otherProps","classes","svgNode","only","svgChildren","viewBox","xmlns","svg","displayName"],"mappings":";AAAA,SAAcA,UAAU,EAAiBC,QAAQ,QAAQ,QAAQ;AACjE,OAAOC,gBAAgB,oBAAoB;AAY3C,MAAMC,oBAAsDH,WAC1D,CAACI,OAAiBC;IAChB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,YAAY,GAAGJ;IAE/C,MAAMK,UAAUP,WAAW,UAAU,cAAcK;IACnD,MAAMG,UAAUT,SAASU,IAAI,CAACL;IAC9B,wCAAwC;IACxC,MAAM,EAAEA,UAAUM,WAAW,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGJ,QAAQN,KAAK;IAE/D,qBACE,KAACW;QACCF,SAASA;QACTC,OAAOA;QACPT,KAAKA;QACJ,GAAGG,UAAU;QACdD,WAAWE;kBAEVG;;AAGP;AAGFT,IAAIa,WAAW,GAAG;AAClB,SAASb,GAAG,GAAG"}

package/dist/esm/components/Segment/Segment.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
 const Segment = (props)=>{
     const { heading, children, colour, inverted, className, ...rest } = props;
-    const classes = classNames("mobius", "mobius/Segment", colour, {
+    const classes = classNames("mobius", "mobius-segment", colour, {
         inverted
     }, className);
     return /*#__PURE__*/ _jsxs("div", {
@@ -10,7 +10,7 @@ const Segment = (props)=>{
         ...rest,
         children: [
             heading && /*#__PURE__*/ _jsx("div", {
-                className: "mobius/SegmentHeading",
+                className: "mobius-segment__heading",
                 children: heading
             }),
             children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Segment/Segment.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface SegmentProps extends DOMProps {\n  className?: string;\n  heading?: string;\n  /** Background colour for Segment */\n  colour?: \"subtle\" | \"primary\" | \"secondary\";\n  /** When inverted, text is white.  Use on darker backgrounds. */\n  inverted?: boolean;\n  children?: ReactNode;\n}\n\nconst Segment = (props: SegmentProps) => {\n  const { heading, children, colour, inverted, className, ...rest } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/Segment\",\n    colour,\n    { inverted },\n    className,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {heading && <div className=\"mobius/SegmentHeading\">{heading}</div>}\n      {children}\n    </div>\n  );\n};\n\nSegment.displayName = \"Segment\";\nexport { Segment };\n"],"names":["classNames","Segment","props","heading","children","colour","inverted","className","rest","classes","div","displayName"],"mappings":";AACA,OAAOA,gBAAgB,oBAAoB;AAa3C,MAAMC,UAAU,CAACC;IACf,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGN;IAEpE,MAAMO,UAAUT,WACd,UACA,kBACAK,QACA;QAAEC;IAAS,GACXC;IAGF,qBACE,MAACG;QAAIH,WAAWE;QAAU,GAAGD,IAAI;;YAC9BL,yBAAW,KAACO;gBAAIH,WAAU;0BAAyBJ;;YACnDC;;;AAGP;AAEAH,QAAQU,WAAW,GAAG;AACtB,SAASV,OAAO,GAAG"}
+{"version":3,"sources":["../../../../src/components/Segment/Segment.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface SegmentProps extends DOMProps {\n  className?: string;\n  heading?: string;\n  /** Background colour for Segment */\n  colour?: \"subtle\" | \"primary\" | \"secondary\";\n  /** When inverted, text is white.  Use on darker backgrounds. */\n  inverted?: boolean;\n  children?: ReactNode;\n}\n\nconst Segment = (props: SegmentProps) => {\n  const { heading, children, colour, inverted, className, ...rest } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-segment\",\n    colour,\n    { inverted },\n    className,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {heading && <div className=\"mobius-segment__heading\">{heading}</div>}\n      {children}\n    </div>\n  );\n};\n\nSegment.displayName = \"Segment\";\nexport { Segment };\n"],"names":["classNames","Segment","props","heading","children","colour","inverted","className","rest","classes","div","displayName"],"mappings":";AACA,OAAOA,gBAAgB,oBAAoB;AAa3C,MAAMC,UAAU,CAACC;IACf,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGN;IAEpE,MAAMO,UAAUT,WACd,UACA,kBACAK,QACA;QAAEC;IAAS,GACXC;IAGF,qBACE,MAACG;QAAIH,WAAWE;QAAU,GAAGD,IAAI;;YAC9BL,yBAAW,KAACO;gBAAIH,WAAU;0BAA2BJ;;YACrDC;;;AAGP;AAEAH,QAAQU,WAAW,GAAG;AACtB,SAASV,OAAO,GAAG"}

package/dist/esm/components/Segment/SegmentGroup.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
 const SegmentGroup = (props)=>{
-    const { children, horizontal, margin, className, ...rest } = props;
-    const marginClass = margin ? `margin-${margin}` : "";
-    const classes = classNames("mobius", "mobius/SegmentGroup", className, {
-        horizontal
-    }, marginClass);
+    const { children, horizontal, gap, className, ...rest } = props;
+    const gapClass = gap ? `gap-${gap}` : "";
+    const classes = classNames("mobius", "mobius-segment-group", className, {
+        "--is-horizontal": horizontal
+    }, gapClass);
     return /*#__PURE__*/ _jsx("div", {
         className: classes,
         ...rest,

package/dist/esm/components/Segment/SegmentGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Segment/SegmentGroup.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface SegmentGroupProps extends DOMProps {\n  className?: string;\n  horizontal?: boolean;\n  margin?: \"size-xs\" | \"size-s\" | \"size-m\" | \"size-l\" | \"size-xl\" | \"size-xxl\";\n  children?: ReactNode;\n}\n\nconst SegmentGroup = (props: SegmentGroupProps) => {\n  const { children, horizontal, margin, className, ...rest } = props;\n\n  const marginClass = margin ? `margin-${margin}` : \"\";\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/SegmentGroup\",\n    className,\n    { horizontal },\n    marginClass,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nSegmentGroup.displayName = \"SegmentGroup\";\nexport { SegmentGroup };\n"],"names":["classNames","SegmentGroup","props","children","horizontal","margin","className","rest","marginClass","classes","div","displayName"],"mappings":";AACA,OAAOA,gBAAgB,oBAAoB;AAU3C,MAAMC,eAAe,CAACC;IACpB,MAAM,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGL;IAE7D,MAAMM,cAAcH,SAAS,CAAC,OAAO,EAAEA,OAAO,CAAC,GAAG;IAClD,MAAMI,UAAUT,WACd,UACA,uBACAM,WACA;QAAEF;IAAW,GACbI;IAGF,qBACE,KAACE;QAAIJ,WAAWG;QAAU,GAAGF,IAAI;kBAC9BJ;;AAGP;AAEAF,aAAaU,WAAW,GAAG;AAC3B,SAASV,YAAY,GAAG"}
+{"version":3,"sources":["../../../../src/components/Segment/SegmentGroup.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface SegmentGroupProps extends DOMProps {\n  className?: string;\n  horizontal?: boolean;\n  gap?: \"size-xs\" | \"size-s\" | \"size-m\" | \"size-l\" | \"size-xl\" | \"size-xxl\";\n  children?: ReactNode;\n}\n\nconst SegmentGroup = (props: SegmentGroupProps) => {\n  const { children, horizontal, gap, className, ...rest } = props;\n\n  const gapClass = gap ? `gap-${gap}` : \"\";\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-segment-group\",\n    className,\n    { \"--is-horizontal\": horizontal },\n    gapClass,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nSegmentGroup.displayName = \"SegmentGroup\";\nexport { SegmentGroup };\n"],"names":["classNames","SegmentGroup","props","children","horizontal","gap","className","rest","gapClass","classes","div","displayName"],"mappings":";AACA,OAAOA,gBAAgB,oBAAoB;AAU3C,MAAMC,eAAe,CAACC;IACpB,MAAM,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,GAAG,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGL;IAE1D,MAAMM,WAAWH,MAAM,CAAC,IAAI,EAAEA,IAAI,CAAC,GAAG;IACtC,MAAMI,UAAUT,WACd,UACA,wBACAM,WACA;QAAE,mBAAmBF;IAAW,GAChCI;IAGF,qBACE,KAACE;QAAIJ,WAAWG;QAAU,GAAGF,IAAI;kBAC9BJ;;AAGP;AAEAF,aAAaU,WAAW,GAAG;AAC3B,SAASV,YAAY,GAAG"}