@simplybusiness/mobius 4.10.1 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 4.11.0
+
+### Minor Changes
+
+- e9a6c03: Align `<Checkbox>`, `<TextField>` and `<Button>` default styles with Figma
+
+### Patch Changes
+
+- Updated dependencies [e9a6c03]
+  - @simplybusiness/icons@4.11.0
+
 ## 4.10.1
 
 ### Patch Changes

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

@@ -15,6 +15,7 @@ const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedup
 const _Loading = require("./Loading");
 const _useButton = require("../../hooks/useButton");
 const _hooks = require("../../hooks");
+const _Success = require("./Success");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -47,11 +48,14 @@ const Button = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         "--is-success": isSuccess && !isLoading
     }, otherProps.className);
     otherProps.className = classes;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Component, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Component, {
         ref: ref,
         ...buttonProps,
         ...otherProps,
-        children: isLoading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.Loading, {}) : children && children
+        children: [
+            isLoading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.Loading, {}) : children && children,
+            isSuccess && !isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Success.Success, {})
+        ]
     });
 });
 Button.displayName = "Button";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\nimport { useDeprecationWarning } from \"../../hooks\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    useDeprecationWarning({\n      \"variant 'inverse'\": variant === \"inverse\",\n      \"variant 'inverse-ghost'\": variant === \"inverse-ghost\",\n    });\n\n    // Map deprecated variants to alternative ones\n    const getVariant = (type: Variant) => {\n      if (type === \"inverse\") {\n        return \"basic\";\n      }\n\n      if (type === \"inverse-ghost\") {\n        return \"secondary\";\n      }\n\n      return variant;\n    };\n\n    const buttonVariant = getVariant(variant);\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${buttonVariant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["Button","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","useButton","useDeprecationWarning","getVariant","type","buttonVariant","classes","classNames","className","Loading","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAuGSA;;;eAAAA;;;;uBArGiD;+DACnC;yBAGC;2BACkB;uBACJ;;;;;;AAkCtC,MAAMA,uBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACX,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGZ;IACJ,MAAM,EAAEa,WAAW,EAAE,GAAGC,IAAAA,oBAAS,EAACd;IAElCe,IAAAA,4BAAqB,EAAC;QACpB,qBAAqBP,YAAY;QACjC,2BAA2BA,YAAY;IACzC;IAEA,8CAA8C;IAC9C,MAAMQ,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOT;IACT;IAEA,MAAMU,gBAAgBF,WAAWR;IAEjC,gDAAgD;IAChD,MAAMW,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEF,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAET,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWS,SAAS;IAEtBT,WAAWS,SAAS,GAAGF;IAEvB,qBACE,qBAACf;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;kBACjDN,0BAAY,qBAACgB,gBAAO,QAAMpB,YAAYA;;AAG7C;AAEFJ,OAAOyB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\nimport { useDeprecationWarning } from \"../../hooks\";\nimport { Success } from \"./Success\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    useDeprecationWarning({\n      \"variant 'inverse'\": variant === \"inverse\",\n      \"variant 'inverse-ghost'\": variant === \"inverse-ghost\",\n    });\n\n    // Map deprecated variants to alternative ones\n    const getVariant = (type: Variant) => {\n      if (type === \"inverse\") {\n        return \"basic\";\n      }\n\n      if (type === \"inverse-ghost\") {\n        return \"secondary\";\n      }\n\n      return variant;\n    };\n\n    const buttonVariant = getVariant(variant);\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${buttonVariant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n        {isSuccess && !isLoading && <Success />}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["Button","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","useButton","useDeprecationWarning","getVariant","type","buttonVariant","classes","classNames","className","Loading","Success","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAyGSA;;;eAAAA;;;;uBAvGiD;+DACnC;yBAGC;2BACkB;uBACJ;yBACd;;;;;;AAkCxB,MAAMA,uBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACX,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGZ;IACJ,MAAM,EAAEa,WAAW,EAAE,GAAGC,IAAAA,oBAAS,EAACd;IAElCe,IAAAA,4BAAqB,EAAC;QACpB,qBAAqBP,YAAY;QACjC,2BAA2BA,YAAY;IACzC;IAEA,8CAA8C;IAC9C,MAAMQ,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOT;IACT;IAEA,MAAMU,gBAAgBF,WAAWR;IAEjC,gDAAgD;IAChD,MAAMW,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEF,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAET,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWS,SAAS;IAEtBT,WAAWS,SAAS,GAAGF;IAEvB,qBACE,sBAACf;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;;YACjDN,0BAAY,qBAACgB,gBAAO,QAAMpB,YAAYA;YACtCK,aAAa,CAACD,2BAAa,qBAACiB,gBAAO;;;AAG1C;AAEFzB,OAAO0B,WAAW,GAAG"}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Success", {
+    enumerable: true,
+    get: function() {
+        return Success;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _icons = require("@simplybusiness/icons");
+const _Icon = require("../Icon");
+const _VisuallyHidden = require("../VisuallyHidden");
+const Success = ()=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "mobius/ButtonIconWrapper",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
+                    icon: _icons.tick
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                className: "mobius/SuccessText",
+                children: "Success"
+            })
+        ]
+    });
+
+//# sourceMappingURL=Success.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Button/Success.tsx"],"sourcesContent":["import { tick } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nconst Success = () => (\n  <>\n    <div className=\"mobius/ButtonIconWrapper\">\n      <Icon icon={tick} />\n    </div>\n    <VisuallyHidden className=\"mobius/SuccessText\">Success</VisuallyHidden>\n  </>\n);\n\nexport { Success };\n"],"names":["Success","div","className","Icon","icon","tick","VisuallyHidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaSA;;;eAAAA;;;;uBAbY;sBACA;gCACU;AAE/B,MAAMA,UAAU,kBACd;;0BACE,qBAACC;gBAAIC,WAAU;0BACb,cAAA,qBAACC,UAAI;oBAACC,MAAMC,WAAI;;;0BAElB,qBAACC,8BAAc;gBAACJ,WAAU;0BAAqB"}

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

@@ -12,9 +12,11 @@ Object.defineProperty(exports, "Checkbox", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _icons = require("@simplybusiness/icons");
 const _ErrorMessage = require("../ErrorMessage");
 const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
 const _hooks = require("../../hooks");
+const _Icon = require("../Icon");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -30,15 +32,16 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         validationState,
         isInvalid
     });
-    const checkboxClasses = (0, _dedupe.default)({
+    const sharedClasses = (0, _dedupe.default)({
         "--is-disabled": isDisabled,
         "--is-selected": selected,
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     }, validationClasses, className);
     // Append an additional wrapper class name to differenitate from input
-    const wrapperClasses = (0, _dedupe.default)("mobius", "mobius/Checkbox", checkboxClasses);
-    const inputClasses = (0, _dedupe.default)("mobius/CheckboxInput", checkboxClasses);
+    const wrapperClasses = (0, _dedupe.default)("mobius", "mobius/Checkbox", sharedClasses);
+    const inputClasses = (0, _dedupe.default)("mobius/CheckboxInput", sharedClasses);
+    const iconClasses = (0, _dedupe.default)("mobius/CheckboxIcon", sharedClasses);
     const errorMessageId = (0, _react.useId)();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = (0, _spaceDelimitedList.spaceDelimitedList)([
@@ -68,13 +71,13 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
-                id: labelId,
                 className: wrapperClasses,
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
                         "aria-describedby": describedBy,
                         "aria-errormessage": shouldErrorMessageShow,
                         "aria-invalid": isInvalid,
+                        "aria-labelledby": labelId,
                         readOnly: isReadOnly,
                         disabled: isDisabled,
                         ref: refObj,
@@ -89,7 +92,13 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         value: value,
                         ...rest
                     }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
+                        icon: selected ? _icons.squareTick : _icons.square,
+                        size: "md",
+                        className: iconClasses
+                    }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        id: labelId,
                         className: "mobius/CheckboxLabel",
                         children: label
                     })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const checkboxClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\n    \"mobius\",\n    \"mobius/Checkbox\",\n    checkboxClasses,\n  );\n  const inputClasses = classNames(\"mobius/CheckboxInput\", checkboxClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label id={labelId} className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          value={value}\n          {...rest}\n        />\n        <span className=\"mobius/CheckboxLabel\">{label}</span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","validationClasses","useValidationClasses","checkboxClasses","classNames","wrapperClasses","inputClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","span","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAkBaA;;;eAAAA;;;;uBARN;+DACgB;8BACM;oCAGM;uBACE;;;;;;AAE9B,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAUP;IAClD,MAAMQ,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASpB,OAAOkB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CnB;QACAC;IACF;IACA,MAAMmB,kBAAkBC,IAAAA,eAAU,EAChC;QACE,iBAAiBvB;QACjB,iBAAiBY;QACjB,iBAAiB,OAAOX,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAmB,mBACAf;IAEF,sEAAsE;IACtE,MAAMmB,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD;IAEF,MAAMG,eAAeF,IAAAA,eAAU,EAAC,wBAAwBD;IACxD,MAAMI,iBAAiBP,IAAAA,YAAK;IAC5B,MAAMQ,yBAAyBrB,eAAeoB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAjB;KACD;IACD,MAAMqB,UAAUZ,IAAAA,YAAK;IAErB,MAAMa,cAAc;QAClBnB,YAAY,CAACD;IACf;IAEA,MAAMqB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI9B,UAAU;YACZA,SAAS8B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,sBAACjC;gBAAMD,IAAIiC;gBAAS1B,WAAWmB;;kCAC7B,qBAACgB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAAcxC;wBACdyC,UAAUpC;wBACVqC,UAAU7C;wBACVH,KAAKoB;wBACLZ,WAAWoB;wBACXqB,SAASb;wBACT7B,UAAUiC;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgB1C;wBAChB2C,UAAUjD;wBACVH,IAAIA,MAAMoB;wBACVT,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAACwC;wBAAK9C,WAAU;kCAAwBN;;;;0BAE1C,qBAACqD,0BAAY;gBAACtD,IAAI4B;gBAAgBpB,cAAcA;;;;AAGtD"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChangeEvent,\n  forwardRef,\n  useRef,\n  useState,\n  KeyboardEvent,\n  MouseEvent,\n  useId,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { squareTick, square } from \"@simplybusiness/icons\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { CheckboxElementType, CheckboxProps, CheckboxRef } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\n\nexport const Checkbox: ForwardedRefComponent<\n  CheckboxProps,\n  CheckboxElementType\n> = forwardRef((props: CheckboxProps, ref: CheckboxRef) => {\n  const {\n    id,\n    label,\n    isDisabled,\n    isRequired,\n    validationState,\n    isInvalid,\n    onChange,\n    className,\n    errorMessage,\n    defaultSelected = false,\n    isReadOnly,\n    value,\n    [\"aria-describedby\"]: ariaDescribedBy,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<boolean>(defaultSelected);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const refObj = ref || fallbackRef;\n  const inputId = useId();\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const sharedClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n    validationClasses,\n    className,\n  );\n  // Append an additional wrapper class name to differenitate from input\n  const wrapperClasses = classNames(\"mobius\", \"mobius/Checkbox\", sharedClasses);\n  const inputClasses = classNames(\"mobius/CheckboxInput\", sharedClasses);\n  const iconClasses = classNames(\"mobius/CheckboxIcon\", sharedClasses);\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n  const labelId = useId();\n\n  const toggleState = () => {\n    setSelected(!selected);\n  };\n\n  const handleClick = (event: MouseEvent<CheckboxElementType>) => {\n    const isMouseEvent = event.clientX;\n\n    if (isMouseEvent) {\n      toggleState();\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      toggleState();\n    }\n  };\n\n  return (\n    <>\n      <label className={wrapperClasses}>\n        <input\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          aria-labelledby={labelId}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          ref={refObj}\n          className={inputClasses}\n          onClick={handleClick}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          type=\"checkbox\"\n          defaultChecked={defaultSelected}\n          required={isRequired}\n          id={id || inputId}\n          value={value}\n          {...rest}\n        />\n        <Icon\n          icon={selected ? squareTick : square}\n          size=\"md\"\n          className={iconClasses}\n        />\n        <span id={labelId} className=\"mobius/CheckboxLabel\">\n          {label}\n        </span>\n      </label>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </>\n  );\n});\n"],"names":["Checkbox","forwardRef","props","ref","id","label","isDisabled","isRequired","validationState","isInvalid","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","validationClasses","useValidationClasses","sharedClasses","classNames","wrapperClasses","inputClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","toggleState","handleClick","event","isMouseEvent","clientX","handleChange","handleKeyDown","code","input","aria-describedby","aria-errormessage","aria-invalid","aria-labelledby","readOnly","disabled","onClick","onKeyDown","type","defaultChecked","required","Icon","icon","squareTick","square","size","span","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAoBaA;;;eAAAA;;;;uBAVN;+DACgB;uBACY;8BACN;oCAGM;uBACE;sBAChB;;;;;;AAEd,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAUP;IAClD,MAAMQ,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASpB,OAAOkB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CnB;QACAC;IACF;IACA,MAAMmB,gBAAgBC,IAAAA,eAAU,EAC9B;QACE,iBAAiBvB;QACjB,iBAAiBY;QACjB,iBAAiB,OAAOX,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAmB,mBACAf;IAEF,sEAAsE;IACtE,MAAMmB,iBAAiBD,IAAAA,eAAU,EAAC,UAAU,mBAAmBD;IAC/D,MAAMG,eAAeF,IAAAA,eAAU,EAAC,wBAAwBD;IACxD,MAAMI,cAAcH,IAAAA,eAAU,EAAC,uBAAuBD;IACtD,MAAMK,iBAAiBR,IAAAA,YAAK;IAC5B,MAAMS,yBAAyBtB,eAAeqB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAlB;KACD;IACD,MAAMsB,UAAUb,IAAAA,YAAK;IAErB,MAAMc,cAAc;QAClBpB,YAAY,CAACD;IACf;IAEA,MAAMsB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI/B,UAAU;YACZA,SAAS+B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,sBAAClC;gBAAMM,WAAWmB;;kCAChB,qBAACiB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAAczC;wBACd0C,mBAAiBb;wBACjBc,UAAUtC;wBACVuC,UAAU/C;wBACVH,KAAKoB;wBACLZ,WAAWoB;wBACXuB,SAASd;wBACT9B,UAAUkC;wBACVW,WAAWV;wBACXW,MAAK;wBACLC,gBAAgB5C;wBAChB6C,UAAUnD;wBACVH,IAAIA,MAAMoB;wBACVT,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAAC0C,UAAI;wBACHC,MAAM1C,WAAW2C,iBAAU,GAAGC,aAAM;wBACpCC,MAAK;wBACLpD,WAAWqB;;kCAEb,qBAACgC;wBAAK5D,IAAIkC;wBAAS3B,WAAU;kCAC1BN;;;;0BAGL,qBAAC4D,0BAAY;gBAAC7D,IAAI6B;gBAAgBrB,cAAcA;;;;AAGtD"}

package/dist/cjs/components/Progress/Progress.js

@@ -13,6 +13,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _react = require("react");
 const _Label = require("../Label");
+const _VisuallyHidden = require("../VisuallyHidden");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -33,13 +34,31 @@ const sanitizedValue = (value, defaultValue)=>{
     const numberValue = parseFloat(value);
     return Number.isNaN(numberValue) ? defaultValue : numberValue;
 };
+const getLabelComponent = (label, progressLabelId, showLabel)=>{
+    if (showLabel) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
+            id: progressLabelId,
+            className: "mobius/ProgressLabel",
+            elementType: "span",
+            children: label
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
+            id: progressLabelId,
+            className: "mobius/ProgressLabel",
+            elementType: "span",
+            children: label
+        })
+    });
+};
 const DEFAULT_VALUE = 0;
 const DEFAULT_MIN_VALUE = 0;
 const DEFAULT_MAX_VALUE = 100;
 const Progress = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const progressId = (0, _react.useId)();
     const progressLabelId = (0, _react.useId)();
-    const { id, label, showValueLabel = !!label, valueFormatter, variant = "primary", className } = props;
+    const { id, label, showLabel = true, showValueLabel = !!label, valueFormatter, variant = "primary", className } = props;
     let { value, minValue, maxValue } = props;
     value = sanitizedValue(value, DEFAULT_VALUE);
     minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);
@@ -63,6 +82,7 @@ const Progress = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     progressBarProps["aria-valuemax"] = maxValue.toString();
     progressBarProps["aria-valuenow"] = value.toString();
     progressBarProps["aria-valuetext"] = valueFormatter instanceof Function ? valueFormatter(value, minValue, maxValue) : barWidth;
+    const labelComponent = getLabelComponent(label, progressLabelId, showLabel);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         id: id || progressId,
         ...progressBarProps,
@@ -71,12 +91,7 @@ const Progress = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         role: "progressbar",
         "aria-labelledby": progressLabelId,
         children: [
-            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
-                id: progressLabelId,
-                className: "mobius/ProgressLabel",
-                elementType: "span",
-                children: label
-            }),
+            labelComponent,
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: "mobius/ProgressTrack",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
@@ -94,11 +109,6 @@ const Progress = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         ]
     });
 });
-Progress.defaultProps = {
-    value: DEFAULT_VALUE,
-    minValue: DEFAULT_MIN_VALUE,
-    maxValue: DEFAULT_MAX_VALUE
-};
 Progress.displayName = "Progress";
 
 //# sourceMappingURL=Progress.js.map

package/dist/cjs/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\";\n\nexport type ProgressElementType = HTMLDivElement;\n\nexport interface ProgressProps\n  extends AriaProgressBarProps,\n    DOMProps,\n    RefAttributes<ProgressElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  id?: string;\n  className?: string;\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 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      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\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        {label && (\n          <Label\n            id={progressLabelId}\n            className=\"mobius/ProgressLabel\"\n            elementType=\"span\"\n          >\n            {label}\n          </Label>\n        )}\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.defaultProps = {\n  value: DEFAULT_VALUE,\n  minValue: DEFAULT_MIN_VALUE,\n  maxValue: DEFAULT_MAX_VALUE,\n};\n\nProgress.displayName = \"Progress\";\nexport { Progress };\n"],"names":["Progress","warnAboutInvalidValues","value","minValue","maxValue","console","warn","sanitizedValue","defaultValue","numberValue","parseFloat","Number","isNaN","DEFAULT_VALUE","DEFAULT_MIN_VALUE","DEFAULT_MAX_VALUE","forwardRef","props","ref","progressId","useId","progressLabelId","id","label","showValueLabel","valueFormatter","variant","className","undefined","clamp","num","min","max","Math","percentage","round","barWidth","classes","classNames","progressBarProps","toString","Function","div","role","aria-labelledby","Label","elementType","style","width","data-testid","defaultProps","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BA0JSA;;;eAAAA;;;;+DAtJc;uBAC0C;uBAG3C;;;;;;AA0BtB,SAASC,uBACPC,KAAa,EACbC,QAAgB,EAChBC,QAAgB;IAEhB,IAAID,WAAWC,UAAU;QACvBC,QAAQC,IAAI,CAAC;IACf;IACA,IAAIJ,QAAQC,UAAU;QACpBE,QAAQC,IAAI,CAAC;IACf;IACA,IAAIJ,QAAQE,UAAU;QACpBC,QAAQC,IAAI,CAAC;IACf;AACF;AAEA,MAAMC,iBAAiB,CACrBL,OACAM;IAEA,MAAMC,cAAcC,WAAWR;IAC/B,OAAOS,OAAOC,KAAK,CAACH,eAAeD,eAAeC;AACpD;AAEA,MAAMI,gBAAgB;AACtB,MAAMC,oBAAoB;AAC1B,MAAMC,oBAAoB;AAE1B,MAAMf,yBACJgB,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IAChC,MAAMC,aAAaC,IAAAA,YAAK;IACxB,MAAMC,kBAAkBD,IAAAA,YAAK;IAC7B,MAAM,EACJE,EAAE,EACFC,KAAK,EACLC,iBAAiB,CAAC,CAACD,KAAK,EACxBE,cAAc,EACdC,UAAU,SAAS,EACnBC,SAAS,EACV,GAAGV;IAEJ,IAAI,EAAEf,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGa;IAEpCf,QAAQK,eAAeL,OAAOW;IAC9BV,WAAWI,eAAeJ,UAAUW;IACpCV,WAAWG,eAAeH,UAAUW;IAEpC,yDAAyD;IACzD,IACEb,UAAU0B,aACVzB,aAAayB,aACbxB,aAAawB,WACb;QACA,OAAO;IACT;IAEA3B,uBAAuBC,OAAOC,UAAUC;IAExC,0DAA0D;IAC1D,MAAMyB,QAAQ,CAACC,KAAaC,KAAaC,MACvCC,KAAKF,GAAG,CAACE,KAAKD,GAAG,CAACF,KAAKC,MAAMC;IAC/B,MAAME,aAAaL,MACjBI,KAAKE,KAAK,CAAC,AAAEjC,CAAAA,QAAQC,QAAO,IAAMC,CAAAA,WAAWD,QAAO,IAAM,MAC1D,GACA;IAEF,MAAMiC,WAAW,CAAC,EAAEF,WAAW,CAAC,CAAC;IAEjC,MAAMG,UAAUC,IAAAA,eAAU,EAAC,UAAU,mBAAmBX,WAAW;QACjE,gBAAgBD,YAAY;QAC5B,kBAAkBA,YAAY;IAChC;IAEA,2BAA2B;IAC3B,MAAMa,mBAA2C,CAAC;IAClDA,gBAAgB,CAAC,gBAAgB,GAAGpC,SAASqC,QAAQ;IACrDD,gBAAgB,CAAC,gBAAgB,GAAGnC,SAASoC,QAAQ;IACrDD,gBAAgB,CAAC,gBAAgB,GAAGrC,MAAMsC,QAAQ;IAClDD,gBAAgB,CAAC,iBAAiB,GAChCd,0BAA0BgB,WACtBhB,eAAevB,OAAOC,UAAUC,YAChCgC;IAEN,qBACE,sBAACM;QACCpB,IAAIA,MAAMH;QACT,GAAGoB,gBAAgB;QACpBrB,KAAKA;QACLS,WAAWU;QACXM,MAAK;QACLC,mBAAiBvB;;YAEhBE,uBACC,qBAACsB,YAAK;gBACJvB,IAAID;gBACJM,WAAU;gBACVmB,aAAY;0BAEXvB;;0BAGL,qBAACmB;gBAAIf,WAAU;0BACb,cAAA,qBAACe;oBAAIf,WAAU;oBAAqBoB,OAAO;wBAAEC,OAAOZ;oBAAS;;;YAE9DZ,gCACC,qBAACqB,YAAK;gBAACI,eAAY;gBAAcH,aAAY;0BAC1CP,gBAAgB,CAAC,iBAAiB;;;;AAK7C;AAEFvC,SAASkD,YAAY,GAAG;IACtBhD,OAAOW;IACPV,UAAUW;IACVV,UAAUW;AACZ;AAEAf,SAASmD,WAAW,GAAG"}
+{"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":["Progress","warnAboutInvalidValues","value","minValue","maxValue","console","warn","sanitizedValue","defaultValue","numberValue","parseFloat","Number","isNaN","getLabelComponent","label","progressLabelId","showLabel","Label","id","className","elementType","VisuallyHidden","DEFAULT_VALUE","DEFAULT_MIN_VALUE","DEFAULT_MAX_VALUE","forwardRef","props","ref","progressId","useId","showValueLabel","valueFormatter","variant","undefined","clamp","num","min","max","Math","percentage","round","barWidth","classes","classNames","progressBarProps","toString","Function","labelComponent","div","role","aria-labelledby","style","width","data-testid","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BA+KSA;;;eAAAA;;;;+DA3Kc;uBAC0C;uBAG3C;gCACS;;;;;;AA4B/B,SAASC,uBACPC,KAAa,EACbC,QAAgB,EAChBC,QAAgB;IAEhB,IAAID,WAAWC,UAAU;QACvBC,QAAQC,IAAI,CAAC;IACf;IACA,IAAIJ,QAAQC,UAAU;QACpBE,QAAQC,IAAI,CAAC;IACf;IACA,IAAIJ,QAAQE,UAAU;QACpBC,QAAQC,IAAI,CAAC;IACf;AACF;AAEA,MAAMC,iBAAiB,CACrBL,OACAM;IAEA,MAAMC,cAAcC,WAAWR;IAC/B,OAAOS,OAAOC,KAAK,CAACH,eAAeD,eAAeC;AACpD;AAEA,MAAMI,oBAAoB,CACxBC,OACAC,iBACAC;IAEA,IAAIA,WAAW;QACb,qBACE,qBAACC,YAAK;YACJC,IAAIH;YACJI,WAAU;YACVC,aAAY;sBAEXN;;IAGP;IAEA,qBACE,qBAACO,8BAAc;kBACb,cAAA,qBAACJ,YAAK;YACJC,IAAIH;YACJI,WAAU;YACVC,aAAY;sBAEXN;;;AAIT;AAEA,MAAMQ,gBAAgB;AACtB,MAAMC,oBAAoB;AAC1B,MAAMC,oBAAoB;AAE1B,MAAMxB,yBACJyB,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IAChC,MAAMC,aAAaC,IAAAA,YAAK;IACxB,MAAMd,kBAAkBc,IAAAA,YAAK;IAC7B,MAAM,EACJX,EAAE,EACFJ,KAAK,EACLE,YAAY,IAAI,EAChBc,iBAAiB,CAAC,CAAChB,KAAK,EACxBiB,cAAc,EACdC,UAAU,SAAS,EACnBb,SAAS,EACV,GAAGO;IAEJ,IAAI,EAAExB,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGsB;IAEpCxB,QAAQK,eAAeL,OAAOoB;IAC9BnB,WAAWI,eAAeJ,UAAUoB;IACpCnB,WAAWG,eAAeH,UAAUoB;IAEpC,yDAAyD;IACzD,IACEtB,UAAU+B,aACV9B,aAAa8B,aACb7B,aAAa6B,WACb;QACA,OAAO;IACT;IAEAhC,uBAAuBC,OAAOC,UAAUC;IAExC,0DAA0D;IAC1D,MAAM8B,QAAQ,CAACC,KAAaC,KAAaC,MACvCC,KAAKF,GAAG,CAACE,KAAKD,GAAG,CAACF,KAAKC,MAAMC;IAC/B,MAAME,aAAaL,MACjBI,KAAKE,KAAK,CAAC,AAAEtC,CAAAA,QAAQC,QAAO,IAAMC,CAAAA,WAAWD,QAAO,IAAM,MAC1D,GACA;IAEF,MAAMsC,WAAW,CAAC,EAAEF,WAAW,CAAC,CAAC;IAEjC,MAAMG,UAAUC,IAAAA,eAAU,EAAC,UAAU,mBAAmBxB,WAAW;QACjE,gBAAgBa,YAAY;QAC5B,kBAAkBA,YAAY;IAChC;IAEA,2BAA2B;IAC3B,MAAMY,mBAA2C,CAAC;IAClDA,gBAAgB,CAAC,gBAAgB,GAAGzC,SAAS0C,QAAQ;IACrDD,gBAAgB,CAAC,gBAAgB,GAAGxC,SAASyC,QAAQ;IACrDD,gBAAgB,CAAC,gBAAgB,GAAG1C,MAAM2C,QAAQ;IAClDD,gBAAgB,CAAC,iBAAiB,GAChCb,0BAA0Be,WACtBf,eAAe7B,OAAOC,UAAUC,YAChCqC;IACN,MAAMM,iBAAiBlC,kBAAkBC,OAAOC,iBAAiBC;IAEjE,qBACE,sBAACgC;QACC9B,IAAIA,MAAMU;QACT,GAAGgB,gBAAgB;QACpBjB,KAAKA;QACLR,WAAWuB;QACXO,MAAK;QACLC,mBAAiBnC;;YAEhBgC;0BACD,qBAACC;gBAAI7B,WAAU;0BACb,cAAA,qBAAC6B;oBAAI7B,WAAU;oBAAqBgC,OAAO;wBAAEC,OAAOX;oBAAS;;;YAE9DX,gCACC,qBAACb,YAAK;gBAACoC,eAAY;gBAAcjC,aAAY;0BAC1CwB,gBAAgB,CAAC,iBAAiB;;;;AAK7C;AAEF5C,SAASsD,WAAW,GAAG"}

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

@@ -60,7 +60,7 @@ const RadioGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const labelId = (0, _react.useId)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         ...rest,
-        "aria-describedby": props["aria-describedby"],
+        "aria-describedby": describedBy,
         "aria-disabled": isDisabled,
         "aria-errormessage": shouldErrorMessageShow,
         "aria-invalid": isInvalid,

package/dist/cjs/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={props[\"aria-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":["RadioGroup","getDefaultVal","children","defaultValue","Array","isArray","option","find","item","props","value","forwardRef","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","className","errorMessage","isReadOnly","name","onChange","rest","defaultSelected","selected","setSelected","useState","validationClasses","useValidationClasses","radioClasses","radioGroupClasses","classNames","radioWrapperClasses","labelClasses","errorMessageId","useId","defaultNameAttrId","nameAttribute","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","div","aria-describedby","aria-disabled","aria-errormessage","aria-invalid","aria-label","aria-labelledby","aria-orientation","aria-readonly","aria-required","role","Label","htmlFor","id","Children","map","child","isValidElement","cloneElement","groupDisabled","ErrorMessage","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BA8KSA;;;eAAAA;;;;uBAjKF;+DACgB;oCAIY;8BACN;uBACP;uBAEe;;;;;;AA0CrC,MAAMC,gBAAgB,CAACC,UAAqBC;IAC1C,IAAIC,MAAMC,OAAO,CAACH,aAAaC,cAAc;QAC3C,MAAMG,SAASJ,qBAAAA,+BAAAA,SAAUK,IAAI,CAACC,CAAAA,OAAQA,KAAKC,KAAK,CAACC,KAAK,KAAKP;QAE3D,IAAI,CAACG,QAAQ,OAAO;QAEpB,OAAOA,OAAOG,KAAK,CAACC,KAAK;IAC3B;IAEA,OAAO;AACT;AAEA,MAAMV,2BAGFW,IAAAA,iBAAU,EAAC,CAACF,OAAwBG;IACtC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,SAAS,EACTC,YAAY,EACZlB,QAAQ,EACRC,YAAY,EACZkB,UAAU,EACVC,IAAI,EACJC,QAAQ,EACR,GAAGC,MACJ,GAAGf;IACJ,MAAMgB,kBAAkBxB,cAAcC,UAAUC;IAChD,MAAM,CAACuB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAASH;IACjD,MAAMI,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7Cd;QACAC;IACF;IACA,MAAMc,eAAe;QACnB,iBAAiBjB;QACjB,iBAAiB,OAAOC,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;QACrD,CAAC,CAAC,KAAK,EAAEG,YAAY,CAAC,CAAC,EAAE;QACzB,CAACC,aAAa,GAAG,EAAE;IACrB;IACA,MAAMa,oBAAoBC,IAAAA,eAAU,EAClC,UACA,qBACAF,cACAF;IAEF,MAAMK,sBAAsBD,IAAAA,eAAU,EAAC,uBAAuB;QAC5D,CAAC,CAAC,KAAK,EAAEf,YAAY,CAAC,CAAC,EAAE;IAC3B;IACA,MAAMiB,eAAeF,IAAAA,eAAU,EAACF,cAAcF;IAC9C,MAAMO,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,oBAAoBD,IAAAA,YAAK;IAC/B,MAAME,gBAAgBjB,QAAQgB;IAC9B,MAAME,yBAAyBpB,eAAegB,iBAAiBK;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA/B,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMmC,UAAUP,IAAAA,YAAK;IAErB,qBACE,sBAACQ;QACE,GAAGrB,IAAI;QACRsB,oBAAkBrC,KAAK,CAAC,mBAAmB;QAC3CsC,iBAAejC;QACfkC,qBAAmBR;QACnBS,gBAAchC;QACdiC,cAAYzC,KAAK,CAAC,aAAa;QAC/B0C,mBAAiB1C,KAAK,CAAC,kBAAkB,IAAImC;QAC7CQ,oBAAkBlC;QAClBmC,iBAAehC;QACfiC,iBAAevC;QACfH,KAAKA;QACLO,WAAWa;QACXuB,MAAK;;YAEJ1C,uBACC,qBAAC2C,YAAK;gBAACC,SAASnC;gBAAMoC,IAAId;gBAASzB,WAAWgB;0BAC3CtB;;0BAGL,qBAACgC;gBAAI1B,WAAWe;0BACbyB,eAAQ,CAACC,GAAG,CAAC1D,UAAU2D,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC3C;4BACA8C,eAAelD;4BACfQ,MAAMiB;4BACNb;4BACAC;4BACAZ;4BACA,oBAAoB2B;4BACpBnB;wBACF;oBACF;oBAEA,OAAOsC;gBACT;;0BAEF,qBAACI,0BAAY;gBAACP,IAAItB;gBAAgBhB,cAAcA;;;;AAGtD;AAEApB,WAAWkE,WAAW,GAAG"}
+{"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":["RadioGroup","getDefaultVal","children","defaultValue","Array","isArray","option","find","item","props","value","forwardRef","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","className","errorMessage","isReadOnly","name","onChange","rest","defaultSelected","selected","setSelected","useState","validationClasses","useValidationClasses","radioClasses","radioGroupClasses","classNames","radioWrapperClasses","labelClasses","errorMessageId","useId","defaultNameAttrId","nameAttribute","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","div","aria-describedby","aria-disabled","aria-errormessage","aria-invalid","aria-label","aria-labelledby","aria-orientation","aria-readonly","aria-required","role","Label","htmlFor","id","Children","map","child","isValidElement","cloneElement","groupDisabled","ErrorMessage","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BA8KSA;;;eAAAA;;;;uBAjKF;+DACgB;oCAIY;8BACN;uBACP;uBAEe;;;;;;AA0CrC,MAAMC,gBAAgB,CAACC,UAAqBC;IAC1C,IAAIC,MAAMC,OAAO,CAACH,aAAaC,cAAc;QAC3C,MAAMG,SAASJ,qBAAAA,+BAAAA,SAAUK,IAAI,CAACC,CAAAA,OAAQA,KAAKC,KAAK,CAACC,KAAK,KAAKP;QAE3D,IAAI,CAACG,QAAQ,OAAO;QAEpB,OAAOA,OAAOG,KAAK,CAACC,KAAK;IAC3B;IAEA,OAAO;AACT;AAEA,MAAMV,2BAGFW,IAAAA,iBAAU,EAAC,CAACF,OAAwBG;IACtC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,SAAS,EACTC,YAAY,EACZlB,QAAQ,EACRC,YAAY,EACZkB,UAAU,EACVC,IAAI,EACJC,QAAQ,EACR,GAAGC,MACJ,GAAGf;IACJ,MAAMgB,kBAAkBxB,cAAcC,UAAUC;IAChD,MAAM,CAACuB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAASH;IACjD,MAAMI,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7Cd;QACAC;IACF;IACA,MAAMc,eAAe;QACnB,iBAAiBjB;QACjB,iBAAiB,OAAOC,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;QACrD,CAAC,CAAC,KAAK,EAAEG,YAAY,CAAC,CAAC,EAAE;QACzB,CAACC,aAAa,GAAG,EAAE;IACrB;IACA,MAAMa,oBAAoBC,IAAAA,eAAU,EAClC,UACA,qBACAF,cACAF;IAEF,MAAMK,sBAAsBD,IAAAA,eAAU,EAAC,uBAAuB;QAC5D,CAAC,CAAC,KAAK,EAAEf,YAAY,CAAC,CAAC,EAAE;IAC3B;IACA,MAAMiB,eAAeF,IAAAA,eAAU,EAACF,cAAcF;IAC9C,MAAMO,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,oBAAoBD,IAAAA,YAAK;IAC/B,MAAME,gBAAgBjB,QAAQgB;IAC9B,MAAME,yBAAyBpB,eAAegB,iBAAiBK;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA/B,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMmC,UAAUP,IAAAA,YAAK;IAErB,qBACE,sBAACQ;QACE,GAAGrB,IAAI;QACRsB,oBAAkBJ;QAClBK,iBAAejC;QACfkC,qBAAmBR;QACnBS,gBAAchC;QACdiC,cAAYzC,KAAK,CAAC,aAAa;QAC/B0C,mBAAiB1C,KAAK,CAAC,kBAAkB,IAAImC;QAC7CQ,oBAAkBlC;QAClBmC,iBAAehC;QACfiC,iBAAevC;QACfH,KAAKA;QACLO,WAAWa;QACXuB,MAAK;;YAEJ1C,uBACC,qBAAC2C,YAAK;gBAACC,SAASnC;gBAAMoC,IAAId;gBAASzB,WAAWgB;0BAC3CtB;;0BAGL,qBAACgC;gBAAI1B,WAAWe;0BACbyB,eAAQ,CAACC,GAAG,CAAC1D,UAAU2D,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC3C;4BACA8C,eAAelD;4BACfQ,MAAMiB;4BACNb;4BACAC;4BACAZ;4BACA,oBAAoB2B;4BACpBnB;wBACF;oBACF;oBAEA,OAAOsC;gBACT;;0BAEF,qBAACI,0BAAY;gBAACP,IAAItB;gBAAgBhB,cAAcA;;;;AAGtD;AAEApB,WAAWkE,WAAW,GAAG"}

package/dist/cjs/components/Select/Select.js

@@ -12,12 +12,14 @@ Object.defineProperty(exports, "Select", {
 const _jsxruntime = require("react/jsx-runtime");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _react = require("react");
+const _icons = require("@simplybusiness/icons");
 const _useLabel = require("../../hooks/useLabel");
 const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
 const _ErrorMessage = require("../ErrorMessage");
 const _Flex = require("../Flex");
 const _Label = require("../Label");
 const _hooks = require("../../hooks");
+const _Icon = require("../Icon");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -79,7 +81,10 @@ const Select = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         onChange: handleChange
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        className: iconClasses
+                        className: iconClasses,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
+                            icon: _icons.chevronDown
+                        })
                     })
                 ]
             }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  ReactElement,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n} from \"react\";\nimport { UseLabelProps, useLabel } from \"../../hooks/useLabel\";\nimport { DOMProps, Validation } from \"../../types\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Flex } from \"../Flex\";\nimport { Label } from \"../Label\";\nimport { OptionProps } from \"../Option\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport type SelectElementType = HTMLSelectElement;\nexport interface SelectProps\n  extends UseLabelProps,\n    Validation,\n    DOMProps,\n    RefAttributes<SelectElementType> {\n  name?: string;\n  onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;\n  value?: string;\n  defaultValue?: string;\n  className?: string;\n  errorMessage?: string;\n  children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;\n  \"aria-describedby\"?: string;\n  isDisabled?: boolean;\n}\n\nexport type SelectRef = Ref<SelectElementType>;\n\nconst Select: ForwardedRefComponent<SelectProps, SelectElementType> =\n  forwardRef((props: SelectProps, ref: SelectRef) => {\n    const {\n      label,\n      onChange,\n      validationState,\n      isInvalid,\n      errorMessage,\n      isDisabled = false,\n      isRequired,\n      ...otherProps\n    } = props;\n\n    const { labelProps, fieldProps } = useLabel({\n      label,\n      ...otherProps,\n    });\n\n    const validationClasses = useValidationClasses({\n      validationState,\n      isInvalid,\n    });\n\n    const stateClasses = {\n      \"--is-disabled\": isDisabled,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    };\n\n    const sharedClasses = classNames(validationClasses, stateClasses);\n\n    const wrapperClasses = classNames(\n      \"mobius/SelectWrapper\",\n      sharedClasses,\n      otherProps.className,\n    );\n    const selectClasses = classNames(\n      \"mobius/Select\",\n      sharedClasses,\n      otherProps.className,\n    );\n    const labelClasses = classNames(\n      \"mobius/Label\",\n      sharedClasses,\n      otherProps.className,\n    );\n    const iconClasses = classNames(\"mobius/SelectIcon\", sharedClasses);\n    const errorMessageId = useId();\n    const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n    const describedBy = spaceDelimitedList([\n      shouldErrorMessageShow,\n      props[\"aria-describedby\"],\n    ]);\n\n    const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      if (onChange) {\n        onChange(e);\n      }\n    };\n\n    return (\n      <Flex flexDirection=\"column\" className=\"mobius mobius/SelectOuter\">\n        {label && (\n          <Label {...labelProps} className={labelClasses}>\n            {label}\n          </Label>\n        )}\n        <div className={wrapperClasses}>\n          <select\n            {...otherProps}\n            {...fieldProps}\n            ref={ref}\n            multiple={false}\n            className={selectClasses}\n            disabled={isDisabled}\n            aria-invalid={!!errorMessage}\n            aria-describedby={describedBy}\n            aria-required={isRequired}\n            onChange={handleChange}\n          />\n          <span className={iconClasses} />\n        </div>\n        {errorMessage && (\n          <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n        )}\n      </Flex>\n    );\n  });\n\nSelect.displayName = \"Select\";\nexport { Select };\n"],"names":["Select","forwardRef","props","ref","label","onChange","validationState","isInvalid","errorMessage","isDisabled","isRequired","otherProps","labelProps","fieldProps","useLabel","validationClasses","useValidationClasses","stateClasses","sharedClasses","classNames","wrapperClasses","className","selectClasses","labelClasses","iconClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","handleChange","e","Flex","flexDirection","Label","div","select","multiple","disabled","aria-invalid","aria-describedby","aria-required","span","ErrorMessage","id","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAkISA;;;eAAAA;;;;+DAhIc;uBAQhB;0BACiC;oCAGL;8BACN;sBACR;uBACC;uBAEe;;;;;;AAqBrC,MAAMA,uBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,eAAe,EACfC,SAAS,EACTC,YAAY,EACZC,aAAa,KAAK,EAClBC,UAAU,EACV,GAAGC,YACJ,GAAGT;IAEJ,MAAM,EAAEU,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,kBAAQ,EAAC;QAC1CV;QACA,GAAGO,UAAU;IACf;IAEA,MAAMI,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CV;QACAC;IACF;IAEA,MAAMU,eAAe;QACnB,iBAAiBR;QACjB,iBAAiB,OAAOC,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEA,MAAMQ,gBAAgBC,IAAAA,eAAU,EAACJ,mBAAmBE;IAEpD,MAAMG,iBAAiBD,IAAAA,eAAU,EAC/B,wBACAD,eACAP,WAAWU,SAAS;IAEtB,MAAMC,gBAAgBH,IAAAA,eAAU,EAC9B,iBACAD,eACAP,WAAWU,SAAS;IAEtB,MAAME,eAAeJ,IAAAA,eAAU,EAC7B,gBACAD,eACAP,WAAWU,SAAS;IAEtB,MAAMG,cAAcL,IAAAA,eAAU,EAAC,qBAAqBD;IACpD,MAAMO,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBnB,eAAeiB,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAzB,KAAK,CAAC,mBAAmB;KAC1B;IAED,MAAM6B,eAAe,CAACC;QACpB,IAAI3B,UAAU;YACZA,SAAS2B;QACX;IACF;IAEA,qBACE,sBAACC,UAAI;QAACC,eAAc;QAASb,WAAU;;YACpCjB,uBACC,qBAAC+B,YAAK;gBAAE,GAAGvB,UAAU;gBAAES,WAAWE;0BAC/BnB;;0BAGL,sBAACgC;gBAAIf,WAAWD;;kCACd,qBAACiB;wBACE,GAAG1B,UAAU;wBACb,GAAGE,UAAU;wBACdV,KAAKA;wBACLmC,UAAU;wBACVjB,WAAWC;wBACXiB,UAAU9B;wBACV+B,gBAAc,CAAC,CAAChC;wBAChBiC,oBAAkBZ;wBAClBa,iBAAehC;wBACfL,UAAU0B;;kCAEZ,qBAACY;wBAAKtB,WAAWG;;;;YAElBhB,8BACC,qBAACoC,0BAAY;gBAACC,IAAIpB;gBAAgBjB,cAAcA;;;;AAIxD;AAEFR,OAAO8C,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  ReactElement,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n} from \"react\";\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport { UseLabelProps, useLabel } from \"../../hooks/useLabel\";\nimport { DOMProps, Validation } from \"../../types\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Flex } from \"../Flex\";\nimport { Label } from \"../Label\";\nimport { OptionProps } from \"../Option\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Icon } from \"../Icon\";\n\nexport type SelectElementType = HTMLSelectElement;\nexport interface SelectProps\n  extends UseLabelProps,\n    Validation,\n    DOMProps,\n    RefAttributes<SelectElementType> {\n  name?: string;\n  onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;\n  value?: string;\n  defaultValue?: string;\n  className?: string;\n  errorMessage?: string;\n  children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;\n  \"aria-describedby\"?: string;\n  isDisabled?: boolean;\n}\n\nexport type SelectRef = Ref<SelectElementType>;\n\nconst Select: ForwardedRefComponent<SelectProps, SelectElementType> =\n  forwardRef((props: SelectProps, ref: SelectRef) => {\n    const {\n      label,\n      onChange,\n      validationState,\n      isInvalid,\n      errorMessage,\n      isDisabled = false,\n      isRequired,\n      ...otherProps\n    } = props;\n\n    const { labelProps, fieldProps } = useLabel({\n      label,\n      ...otherProps,\n    });\n\n    const validationClasses = useValidationClasses({\n      validationState,\n      isInvalid,\n    });\n\n    const stateClasses = {\n      \"--is-disabled\": isDisabled,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    };\n\n    const sharedClasses = classNames(validationClasses, stateClasses);\n\n    const wrapperClasses = classNames(\n      \"mobius/SelectWrapper\",\n      sharedClasses,\n      otherProps.className,\n    );\n    const selectClasses = classNames(\n      \"mobius/Select\",\n      sharedClasses,\n      otherProps.className,\n    );\n    const labelClasses = classNames(\n      \"mobius/Label\",\n      sharedClasses,\n      otherProps.className,\n    );\n    const iconClasses = classNames(\"mobius/SelectIcon\", sharedClasses);\n    const errorMessageId = useId();\n    const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n    const describedBy = spaceDelimitedList([\n      shouldErrorMessageShow,\n      props[\"aria-describedby\"],\n    ]);\n\n    const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      if (onChange) {\n        onChange(e);\n      }\n    };\n\n    return (\n      <Flex flexDirection=\"column\" className=\"mobius mobius/SelectOuter\">\n        {label && (\n          <Label {...labelProps} className={labelClasses}>\n            {label}\n          </Label>\n        )}\n        <div className={wrapperClasses}>\n          <select\n            {...otherProps}\n            {...fieldProps}\n            ref={ref}\n            multiple={false}\n            className={selectClasses}\n            disabled={isDisabled}\n            aria-invalid={!!errorMessage}\n            aria-describedby={describedBy}\n            aria-required={isRequired}\n            onChange={handleChange}\n          />\n          <span className={iconClasses}>\n            <Icon icon={chevronDown} />\n          </span>\n        </div>\n        {errorMessage && (\n          <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n        )}\n      </Flex>\n    );\n  });\n\nSelect.displayName = \"Select\";\nexport { Select };\n"],"names":["Select","forwardRef","props","ref","label","onChange","validationState","isInvalid","errorMessage","isDisabled","isRequired","otherProps","labelProps","fieldProps","useLabel","validationClasses","useValidationClasses","stateClasses","sharedClasses","classNames","wrapperClasses","className","selectClasses","labelClasses","iconClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","handleChange","e","Flex","flexDirection","Label","div","select","multiple","disabled","aria-invalid","aria-describedby","aria-required","span","Icon","icon","chevronDown","ErrorMessage","id","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAsISA;;;eAAAA;;;;+DApIc;uBAQhB;uBACqB;0BACY;oCAGL;8BACN;sBACR;uBACC;uBAEe;sBAChB;;;;;;AAqBrB,MAAMA,uBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,eAAe,EACfC,SAAS,EACTC,YAAY,EACZC,aAAa,KAAK,EAClBC,UAAU,EACV,GAAGC,YACJ,GAAGT;IAEJ,MAAM,EAAEU,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,kBAAQ,EAAC;QAC1CV;QACA,GAAGO,UAAU;IACf;IAEA,MAAMI,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CV;QACAC;IACF;IAEA,MAAMU,eAAe;QACnB,iBAAiBR;QACjB,iBAAiB,OAAOC,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEA,MAAMQ,gBAAgBC,IAAAA,eAAU,EAACJ,mBAAmBE;IAEpD,MAAMG,iBAAiBD,IAAAA,eAAU,EAC/B,wBACAD,eACAP,WAAWU,SAAS;IAEtB,MAAMC,gBAAgBH,IAAAA,eAAU,EAC9B,iBACAD,eACAP,WAAWU,SAAS;IAEtB,MAAME,eAAeJ,IAAAA,eAAU,EAC7B,gBACAD,eACAP,WAAWU,SAAS;IAEtB,MAAMG,cAAcL,IAAAA,eAAU,EAAC,qBAAqBD;IACpD,MAAMO,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBnB,eAAeiB,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAzB,KAAK,CAAC,mBAAmB;KAC1B;IAED,MAAM6B,eAAe,CAACC;QACpB,IAAI3B,UAAU;YACZA,SAAS2B;QACX;IACF;IAEA,qBACE,sBAACC,UAAI;QAACC,eAAc;QAASb,WAAU;;YACpCjB,uBACC,qBAAC+B,YAAK;gBAAE,GAAGvB,UAAU;gBAAES,WAAWE;0BAC/BnB;;0BAGL,sBAACgC;gBAAIf,WAAWD;;kCACd,qBAACiB;wBACE,GAAG1B,UAAU;wBACb,GAAGE,UAAU;wBACdV,KAAKA;wBACLmC,UAAU;wBACVjB,WAAWC;wBACXiB,UAAU9B;wBACV+B,gBAAc,CAAC,CAAChC;wBAChBiC,oBAAkBZ;wBAClBa,iBAAehC;wBACfL,UAAU0B;;kCAEZ,qBAACY;wBAAKtB,WAAWG;kCACf,cAAA,qBAACoB,UAAI;4BAACC,MAAMC,kBAAW;;;;;YAG1BtC,8BACC,qBAACuC,0BAAY;gBAACC,IAAIvB;gBAAgBjB,cAAcA;;;;AAIxD;AAEFR,OAAOiD,WAAW,GAAG"}