@simplybusiness/mobius 4.8.7 → 4.9.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 4.9.0
+
+### Minor Changes
+
+- 13c6553: Bump dependencies (minor and patch)
+
+### Patch Changes
+
+- Updated dependencies [13c6553]
+  - @simplybusiness/icons@4.8.0
+
+## 4.8.8
+
+### Patch Changes
+
+- 2392b6b: Fix handling of `isInvalid` prop; remove internal use of `validationState`
+- 09bc11f: Docs for theme ADR
+
 ## 4.8.7
 
 ### Patch Changes

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

@@ -3,18 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    Button: function() {
+Object.defineProperty(exports, "Button", {
+    enumerable: true,
+    get: function() {
         return Button;
-    },
-    VARIANT_DEPRECATION_WARNING: function() {
-        return VARIANT_DEPRECATION_WARNING;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -22,23 +14,21 @@ const _react = require("react");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _Loading = require("./Loading");
 const _useButton = require("../../hooks/useButton");
+const _hooks = require("../../hooks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-let HAS_DEPRECATION_WARNING_SHOWN = false;
-const VARIANT_DEPRECATION_WARNING = "Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.";
 const Button = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "md", // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onPress, // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onClick, ...otherProps } = props;
     const { buttonProps } = (0, _useButton.useButton)(props);
-    if ((variant === "inverse" || variant === "inverse-ghost") && !HAS_DEPRECATION_WARNING_SHOWN) {
-        // eslint-disable-next-line no-console
-        console.warn(VARIANT_DEPRECATION_WARNING);
-        HAS_DEPRECATION_WARNING_SHOWN = true;
-    }
+    (0, _hooks.useDeprecationWarning)({
+        "variant 'inverse'": variant === "inverse",
+        "variant 'inverse-ghost'": variant === "inverse-ghost"
+    });
     // Map deprecated variants to alternative ones
     const getVariant = (type)=>{
         if (type === "inverse") {

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\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport const VARIANT_DEPRECATION_WARNING =\n  \"Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.\";\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    if (\n      (variant === \"inverse\" || variant === \"inverse-ghost\") &&\n      !HAS_DEPRECATION_WARNING_SHOWN\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(VARIANT_DEPRECATION_WARNING);\n      HAS_DEPRECATION_WARNING_SHOWN = true;\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","VARIANT_DEPRECATION_WARNING","HAS_DEPRECATION_WARNING_SHOWN","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","useButton","console","warn","getVariant","type","buttonVariant","classes","classNames","className","Loading","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;;;;;;;;IA+GSA,MAAM;eAANA;;IApGIC,2BAA2B;eAA3BA;;;;uBAT6C;+DACnC;yBAGC;2BACkB;;;;;;AAE1C,IAAIC,gCAAgC;AAE7B,MAAMD,8BACX;AAkCF,MAAMD,uBACJG,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;IAElC,IACE,AAACQ,CAAAA,YAAY,aAAaA,YAAY,eAAc,KACpD,CAACV,+BACD;QACA,sCAAsC;QACtCiB,QAAQC,IAAI,CAACnB;QACbC,gCAAgC;IAClC;IAEA,8CAA8C;IAC9C,MAAMmB,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOV;IACT;IAEA,MAAMW,gBAAgBF,WAAWT;IAEjC,gDAAgD;IAChD,MAAMY,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEF,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAEV,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWU,SAAS;IAEtBV,WAAWU,SAAS,GAAGF;IAEvB,qBACE,qBAAChB;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;kBACjDN,0BAAY,qBAACiB,gBAAO,QAAMrB,YAAYA;;AAG7C;AAEFN,OAAO4B,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\";\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"}

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

@@ -14,25 +14,28 @@ const _react = require("react");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _ErrorMessage = require("../ErrorMessage");
 const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
+const _hooks = require("../../hooks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { id, label, isDisabled, isRequired, validationState, onChange, className, errorMessage, defaultSelected = false, isReadOnly, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
+    const { id, label, isDisabled, isRequired, validationState, isInvalid, onChange, className, errorMessage, defaultSelected = false, isReadOnly, value, ["aria-describedby"]: ariaDescribedBy, ...rest } = props;
     const [selected, setSelected] = (0, _react.useState)(defaultSelected);
     const fallbackRef = (0, _react.useRef)(null);
     const refObj = ref || fallbackRef;
     const inputId = (0, _react.useId)();
+    const validationClasses = (0, _hooks.useValidationClasses)({
+        validationState,
+        isInvalid
+    });
     const checkboxClasses = (0, _dedupe.default)({
         "--is-disabled": isDisabled,
         "--is-selected": selected,
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
-    }, className);
+    }, 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);
@@ -71,7 +74,7 @@ const Checkbox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
                         "aria-describedby": describedBy,
                         "aria-errormessage": shouldErrorMessageShow,
-                        "aria-invalid": validationState === "invalid",
+                        "aria-invalid": isInvalid,
                         readOnly: isReadOnly,
                         disabled: isDisabled,
                         ref: refObj,

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\";\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    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 checkboxClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": selected,\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\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={validationState === \"invalid\"}\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","onChange","className","errorMessage","defaultSelected","isReadOnly","value","ariaDescribedBy","rest","selected","setSelected","useState","fallbackRef","useRef","refObj","inputId","useId","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;;;;;+BAiBaA;;;eAAAA;;;;uBAPN;+DACgB;8BACM;oCAGM;;;;;;AAE5B,MAAMA,yBAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAsBC;IACpC,MAAM,EACJC,EAAE,EACFC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,KAAK,EACL,CAAC,mBAAmB,EAAEC,eAAe,EACrC,GAAGC,MACJ,GAAGd;IACJ,MAAM,CAACe,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAUP;IAClD,MAAMQ,cAAcC,IAAAA,aAAM,EAAmB;IAC7C,MAAMC,SAASnB,OAAOiB;IACtB,MAAMG,UAAUC,IAAAA,YAAK;IACrB,MAAMC,kBAAkBC,IAAAA,eAAU,EAChC;QACE,iBAAiBpB;QACjB,iBAAiBW;QACjB,cAAcT,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOD,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD,GACAG;IAEF,sEAAsE;IACtE,MAAMiB,iBAAiBD,IAAAA,eAAU,EAC/B,UACA,mBACAD;IAEF,MAAMG,eAAeF,IAAAA,eAAU,EAAC,wBAAwBD;IACxD,MAAMI,iBAAiBL,IAAAA,YAAK;IAC5B,MAAMM,yBAAyBnB,eAAekB,iBAAiBE;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAf;KACD;IACD,MAAMmB,UAAUV,IAAAA,YAAK;IAErB,MAAMW,cAAc;QAClBjB,YAAY,CAACD;IACf;IAEA,MAAMmB,cAAc,CAACC;QACnB,MAAMC,eAAeD,MAAME,OAAO;QAElC,IAAID,cAAc;YAChBH;QACF;IACF;IAEA,MAAMK,eAAe,CAACH;QACpB,IAAI5B,UAAU;YACZA,SAAS4B;QACX;IACF;IAEA,MAAMI,gBAAgB,CAACJ;QACrB,IAAIA,MAAMK,IAAI,KAAK,SAAS;YAC1BP;QACF;IACF;IAEA,qBACE;;0BACE,sBAAC9B;gBAAMD,IAAI8B;gBAASxB,WAAWiB;;kCAC7B,qBAACgB;wBACCC,oBAAkBZ;wBAClBa,qBAAmBf;wBACnBgB,gBAActC,oBAAoB;wBAClCuC,UAAUlC;wBACVmC,UAAU1C;wBACVH,KAAKmB;wBACLZ,WAAWkB;wBACXqB,SAASb;wBACT3B,UAAU+B;wBACVU,WAAWT;wBACXU,MAAK;wBACLC,gBAAgBxC;wBAChByC,UAAU9C;wBACVH,IAAIA,MAAMmB;wBACVT,OAAOA;wBACN,GAAGE,IAAI;;kCAEV,qBAACsC;wBAAK5C,WAAU;kCAAwBL;;;;0BAE1C,qBAACkD,0BAAY;gBAACnD,IAAIyB;gBAAgBlB,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 { 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"}

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

@@ -15,13 +15,14 @@ const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedup
 const _Label = require("../Label");
 const _ErrorMessage = require("../ErrorMessage");
 const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
+const _hooks = require("../../hooks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { label, isDisabled = false, isRequired, validationState, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
+    const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", onChange, className, errorMessage, children, defaultValue = [], isReadOnly, itemsPerRow, ...rest } = props;
     const [selected, setSelected] = (0, _react.useState)(defaultValue);
     const checkboxGroupClasses = (0, _dedupe.default)("mobius", "mobius/CheckboxGroup", className, {
         "--is-horizontal": orientation === "horizontal",
@@ -29,11 +30,13 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     });
+    const validationClasses = (0, _hooks.useValidationClasses)({
+        validationState,
+        isInvalid
+    });
     const labelClasses = (0, _dedupe.default)({
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-disabled": isDisabled
-    });
+    }, validationClasses);
     const errorMessageId = (0, _react.useId)();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = (0, _spaceDelimitedList.spaceDelimitedList)([
@@ -85,7 +88,7 @@ const CheckboxGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                             isDisabled,
                             isRequired,
                             isReadOnly,
-                            validationState,
+                            isInvalid,
                             defaultSelected: selected.includes(child.props.value),
                             onChange: handleChange,
                             "aria-describedby": describedBy

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/CheckboxGroup\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const labelClasses = classNames({\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/CheckboxWrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              validationState,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","target","value","checked","filter","item","useEffect","div","aria-labelledby","role","style","Children","count","Label","elementType","id","map","child","isValidElement","cloneElement","defaultSelected","includes","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAyBaA;;;eAAAA;;;;uBAbN;+DACgB;uBAQD;8BACO;oCACM;;;;;;AAE5B,MAAMA,8BAGTC,IAAAA,iBAAU,EAAC,CAACC,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGd;IACJ,MAAM,CAACe,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAWN;IACnD,MAAMO,uBAAuBC,IAAAA,eAAU,EACrC,UACA,wBACAX,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOF,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMgB,eAAeD,IAAAA,eAAU,EAAC;QAC9B,cAAcd,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBF;IACnB;IACA,MAAMkB,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBd,eAAeY,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAvB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM2B,UAAUL,IAAAA,YAAK;IAErB,MAAMM,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZhB,YAAYD,SAASkB,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXhB,YAAY;mBAAID;gBAAUgB;aAAM;QAClC;IACF;IAEAI,IAAAA,gBAAS,EAAC;QACR,IAAI5B,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,sBAAC6B;QACE,GAAGtB,IAAI;QACRuB,mBAAiBrC,KAAK,CAAC,kBAAkB,IAAI2B;QAC7C1B,KAAKA;QACLO,WAAWU;QACXoB,MAAK;QACLC,OACE;YACE,4BAA4B1B,eAAe2B,eAAQ,CAACC,KAAK,CAAC/B;QAC5D;;YAGDR,uBACC,qBAACwC,YAAK;gBAACC,aAAY;gBAAOC,IAAIjB;gBAASnB,WAAWY;0BAC/ClB;;0BAGL,qBAACkC;gBAAI5B,WAAU;0BACZgC,eAAQ,CAACK,GAAG,CAACnC,UAAUoC,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC3C;4BACAC;4BACAQ;4BACAP;4BACA4C,iBAAiBlC,SAASmC,QAAQ,CAACJ,MAAM9C,KAAK,CAAC+B,KAAK;4BACpDxB,UAAUqB;4BACV,oBAAoBH;wBACtB;oBACF;oBAEA,OAAOqB;gBACT;;YAEDrC,8BACC,qBAAC0C,0BAAY;gBAACP,IAAIvB;gBAAgBZ,cAAcA;;;;AAIxD"}
+{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  useId,\n  ChangeEvent,\n  useState,\n  useEffect,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport {\n  CheckboxElementType,\n  CheckboxGroupElementType,\n  CheckboxGroupProps,\n  CheckboxGroupRef,\n} from \"./types\";\nimport { Label } from \"../Label\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport const CheckboxGroup: ForwardedRefComponent<\n  CheckboxGroupProps,\n  CheckboxGroupElementType\n> = forwardRef((props: CheckboxGroupProps, ref: CheckboxGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    onChange,\n    className,\n    errorMessage,\n    children,\n    defaultValue = [],\n    isReadOnly,\n    itemsPerRow,\n    ...rest\n  } = props;\n  const [selected, setSelected] = useState<string[]>(defaultValue);\n  const checkboxGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/CheckboxGroup\",\n    className,\n    {\n      \"--is-horizontal\": orientation === \"horizontal\",\n      \"--is-vertical\": orientation === \"vertical\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    },\n  );\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  const handleChange = (event: ChangeEvent<CheckboxElementType>) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    if (!checked) {\n      setSelected(selected.filter(item => item !== value));\n    }\n\n    if (checked) {\n      setSelected([...selected, value]);\n    }\n  };\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selected);\n    }\n  }, [selected, onChange]);\n\n  return (\n    <div\n      {...rest}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      ref={ref}\n      className={checkboxGroupClasses}\n      role=\"group\"\n      style={\n        {\n          \"--checkbox-items-per-row\": itemsPerRow || Children.count(children),\n        } as React.CSSProperties\n      }\n    >\n      {label && (\n        <Label elementType=\"span\" id={labelId} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/CheckboxWrapper\">\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement, {\n              isDisabled,\n              isRequired,\n              isReadOnly,\n              isInvalid,\n              defaultSelected: selected.includes(child.props.value),\n              onChange: handleChange,\n              \"aria-describedby\": describedBy,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      {errorMessage && (\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      )}\n    </div>\n  );\n});\n"],"names":["CheckboxGroup","forwardRef","props","ref","label","isDisabled","isRequired","validationState","isInvalid","orientation","onChange","className","errorMessage","children","defaultValue","isReadOnly","itemsPerRow","rest","selected","setSelected","useState","checkboxGroupClasses","classNames","validationClasses","useValidationClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","labelId","handleChange","event","target","value","checked","filter","item","useEffect","div","aria-labelledby","role","style","Children","count","Label","elementType","id","map","child","isValidElement","cloneElement","defaultSelected","includes","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BA0BaA;;;eAAAA;;;;uBAdN;+DACgB;uBAQD;8BACO;oCACM;uBACE;;;;;;AAE9B,MAAMA,8BAGTC,IAAAA,iBAAU,EAAC,CAACC,OAA2BC;IACzC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EAAE,EACjBC,UAAU,EACVC,WAAW,EACX,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAAWN;IACnD,MAAMO,uBAAuBC,IAAAA,eAAU,EACrC,UACA,wBACAX,WACA;QACE,mBAAmBF,gBAAgB;QACnC,iBAAiBA,gBAAgB;QACjC,iBAAiB,OAAOH,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEF,MAAMiB,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CjB;QACAC;IACF;IACA,MAAMiB,eAAeH,IAAAA,eAAU,EAC7B;QACE,iBAAiBjB;IACnB,GACAkB;IAEF,MAAMG,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBhB,eAAec,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA1B,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM8B,UAAUL,IAAAA,YAAK;IAErB,MAAMM,eAAe,CAACC;QACpB,MAAM,EACJC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,EAAE,EAC3B,GAAGH;QAEJ,IAAI,CAACG,SAAS;YACZlB,YAAYD,SAASoB,MAAM,CAACC,CAAAA,OAAQA,SAASH;QAC/C;QAEA,IAAIC,SAAS;YACXlB,YAAY;mBAAID;gBAAUkB;aAAM;QAClC;IACF;IAEAI,IAAAA,gBAAS,EAAC;QACR,IAAI9B,UAAU;YACZA,SAASQ;QACX;IACF,GAAG;QAACA;QAAUR;KAAS;IAEvB,qBACE,sBAAC+B;QACE,GAAGxB,IAAI;QACRyB,mBAAiBxC,KAAK,CAAC,kBAAkB,IAAI8B;QAC7C7B,KAAKA;QACLQ,WAAWU;QACXsB,MAAK;QACLC,OACE;YACE,4BAA4B5B,eAAe6B,eAAQ,CAACC,KAAK,CAACjC;QAC5D;;YAGDT,uBACC,qBAAC2C,YAAK;gBAACC,aAAY;gBAAOC,IAAIjB;gBAASrB,WAAWc;0BAC/CrB;;0BAGL,qBAACqC;gBAAI9B,WAAU;0BACZkC,eAAQ,CAACK,GAAG,CAACrC,UAAUsC,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC9C;4BACAC;4BACAS;4BACAP;4BACA8C,iBAAiBpC,SAASqC,QAAQ,CAACJ,MAAMjD,KAAK,CAACkC,KAAK;4BACpD1B,UAAUuB;4BACV,oBAAoBH;wBACtB;oBACF;oBAEA,OAAOqB;gBACT;;YAEDvC,8BACC,qBAAC4C,0BAAY;gBAACP,IAAIvB;gBAAgBd,cAAcA;;;;AAIxD"}

package/dist/cjs/components/Modal/Modal.js

@@ -16,6 +16,7 @@ const _polyfilltests = require("../../utils/polyfill-tests");
 const _utils = require("../../utils");
 const _ModalContext = require("./ModalContext");
 const _hooks = require("../../hooks");
+const _useDeprecationWarning = require("../../hooks/useDeprecationWarning");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -25,14 +26,13 @@ const TRANSITION_CSS_VARIABLE = "--modal-transition-duration";
 const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { isOpen, onClose, onOpen, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
     size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector } = props;
-    const hasWarnedAboutMissingLabels = (0, _react.useRef)(false);
-    // Handle deprecated props
-    if (!hasWarnedAboutMissingLabels.current) {
-        if (size || appElement || preventCloseOnEsc || shouldFocusAfterRender || parentSelector) {
-            console.warn(`Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`);
-            hasWarnedAboutMissingLabels.current = true;
-        }
-    }
+    (0, _useDeprecationWarning.useDeprecationWarning)({
+        size,
+        appElement,
+        preventCloseOnEsc,
+        shouldFocusAfterRender,
+        parentSelector
+    });
     const shouldTransition = (0, _polyfilltests.supportsDialog)();
     const dialogRef = (0, _react.useRef)(null);
     const { close } = (0, _hooks.useDialog)({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useMemo, useRef } from \"react\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\nimport { ModalContext } from \"./ModalContext\";\nimport { useDialog } from \"../../hooks\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const shouldTransition = supportsDialog();\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","useRef","current","console","warn","shouldTransition","supportsDialog","dialogRef","close","useDialog","transition","isEnabled","CSSVariable","modalClasses","classNames","contextValue","useMemo","dialog","mergeRefs","onCancel","ModalContext","Provider","value","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAiGSA;;;eAAAA;;;;+DA/Fc;uBAC0B;+BAClB;uBAEL;8BACG;uBACH;;;;;;AAK1B,MAAMC,0BAA0B;AAEhC,MAAMD,sBAAQE,IAAAA,iBAAU,EAAC,CAACC,OAAmBC;IAC3C,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;IACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACf,GAAGd;IACJ,MAAMe,8BAA8BC,IAAAA,aAAM,EAAU;IACpD,0BAA0B;IAC1B,IAAI,CAACD,4BAA4BE,OAAO,EAAE;QACxC,IACEP,QACAC,cACAC,qBACAC,0BACAC,gBACA;YACAI,QAAQC,IAAI,CACV,CAAC,yJAAyJ,CAAC;YAE7JJ,4BAA4BE,OAAO,GAAG;QACxC;IACF;IAEA,MAAMG,mBAAmBC,IAAAA,6BAAc;IACvC,MAAMC,YAAYN,IAAAA,aAAM,EAA2B;IACnD,MAAM,EAAEO,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1BvB,KAAKqB;QACLpB;QACAE;QACAD;QACAsB,YAAY;YACVC,WAAW,CAAC,CAACjB;YACbkB,aAAa7B;QACf;IACF;IAEA,MAAM8B,eAAeC,IAAAA,eAAU,EAC7B,UACA,gBACA;QACE,uBAAuB,CAACT;QACxB,uBAAuBA,oBAAoBX;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMwB,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACL5B,SAASoB;YACThB;QACF,CAAA,GACA;QAACgB;QAAOhB;KAAW;IAGrB,qBACE,qBAACyB;QACC/B,KAAKgC,IAAAA,gBAAS,EAAC;YAACX;YAAWrB;SAAI;QAC/BiC,UAAUX;QACVjB,WAAWsB;kBAEX,cAAA,qBAACO,0BAAY,CAACC,QAAQ;YAACC,OAAOP;sBAC3BzB;;;AAIT;AAEAR,MAAMyC,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useMemo, useRef } from \"react\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\nimport { ModalContext } from \"./ModalContext\";\nimport { useDialog } from \"../../hooks\";\nimport { useDeprecationWarning } from \"../../hooks/useDeprecationWarning\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n\n  useDeprecationWarning({\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  });\n\n  const shouldTransition = supportsDialog();\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","useDeprecationWarning","shouldTransition","supportsDialog","dialogRef","useRef","close","useDialog","transition","isEnabled","CSSVariable","modalClasses","classNames","contextValue","useMemo","dialog","mergeRefs","onCancel","ModalContext","Provider","value","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BA0FSA;;;eAAAA;;;;+DAxFc;uBAC0B;+BAClB;uBAEL;8BACG;uBACH;uCACY;;;;;;AAKtC,MAAMC,0BAA0B;AAEhC,MAAMD,sBAAQE,IAAAA,iBAAU,EAAC,CAACC,OAAmBC;IAC3C,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;IACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACf,GAAGd;IAEJe,IAAAA,4CAAqB,EAAC;QACpBL;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAME,mBAAmBC,IAAAA,6BAAc;IACvC,MAAMC,YAAYC,IAAAA,aAAM,EAA2B;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1BpB,KAAKiB;QACLhB;QACAE;QACAD;QACAmB,YAAY;YACVC,WAAW,CAAC,CAACd;YACbe,aAAa1B;QACf;IACF;IAEA,MAAM2B,eAAeC,IAAAA,eAAU,EAC7B,UACA,gBACA;QACE,uBAAuB,CAACV;QACxB,uBAAuBA,oBAAoBP;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMqB,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACLzB,SAASiB;YACTb;QACF,CAAA,GACA;QAACa;QAAOb;KAAW;IAGrB,qBACE,qBAACsB;QACC5B,KAAK6B,IAAAA,gBAAS,EAAC;YAACZ;YAAWjB;SAAI;QAC/B8B,UAAUX;QACVd,WAAWmB;kBAEX,cAAA,qBAACO,0BAAY,CAACC,QAAQ;YAACC,OAAOP;sBAC3BtB;;;AAIT;AAEAR,MAAMsC,WAAW,GAAG"}

package/dist/cjs/components/NumberField/NumberField.js

@@ -22,7 +22,7 @@ function _interop_require_default(obj) {
     };
 }
 const NumberField = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { id, isDisabled, isRequired, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, errorMessage, validationState, isReadOnly, minValue, maxValue, step, placeholder, defaultValue = 0, onChange } = props;
+    const { id, isDisabled, isRequired, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, errorMessage, validationState, isInvalid, isReadOnly, minValue, maxValue, step, placeholder, defaultValue = 0, onChange } = props;
     const inputRef = (0, _react.useRef)(null);
     const [value, setValue] = (0, _react.useState)(defaultValue);
     const valueWithoutLeadingZero = value.toString().replace(/^0+/, "");
@@ -37,18 +37,18 @@ const NumberField = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const containerClasses = (0, _dedupe.default)("mobius/NumberField", className, {
         "--is-optional": optional
     });
+    const validationClasses = (0, _hooks.useValidationClasses)({
+        validationState,
+        isInvalid
+    });
     const inputClasses = (0, _dedupe.default)("mobius/NumberFieldInput", className, {
         "--is-required": required,
         "--is-optional": optional,
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-disabled": isDisabled
-    });
+    }, validationClasses);
     const labelClasses = (0, _dedupe.default)("mobius/NumberFieldLabel", {
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-disabled": isDisabled
-    });
+    }, validationClasses);
     const errorMessageId = (0, _react.useId)();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = (0, _spaceDelimitedList.spaceDelimitedList)([
@@ -99,7 +99,7 @@ const NumberField = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                     required: required,
                     "aria-describedby": describedBy,
                     "aria-errormessage": shouldErrorMessageShow,
-                    "aria-invalid": validationState === "invalid",
+                    "aria-invalid": isInvalid,
                     readOnly: isReadOnly,
                     disabled: isDisabled,
                     autoComplete: "off",

package/dist/cjs/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 } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type NumberFieldElementType = HTMLInputElement;\n\nexport interface NumberFieldProps\n  extends DOMProps,\n    UseLabelProps,\n    RefAttributes<NumberFieldElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  validationState?: \"valid\" | \"invalid\" | undefined;\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    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 inputClasses = classNames(\"mobius/NumberFieldInput\", className, {\n    \"--is-required\": required,\n    \"--is-optional\": optional,\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n\n  const labelClasses = classNames(\"mobius/NumberFieldLabel\", {\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\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={validationState === \"invalid\"}\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":["NumberField","forwardRef","props","ref","id","isDisabled","isRequired","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","className","errorMessage","validationState","isReadOnly","minValue","maxValue","step","placeholder","defaultValue","onChange","inputRef","useRef","value","setValue","useState","valueWithoutLeadingZero","toString","replace","optional","required","labelProps","fieldProps","useLabel","containerClasses","classNames","inputClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","handleChange","event","enteredValue","Number","target","handleBeforeInput","allowedChars","data","test","preventDefault","stopPropagation","div","Label","input","type","onBeforeInput","max","min","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","autoComplete","autoCorrect","spellCheck","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAwDaA;;;eAAAA;;;;+DAtDU;uBAUhB;uBAEiC;oCAEL;8BACN;uBACP;;;;;;AAsCf,MAAMA,4BAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAyBC;IACvC,MAAM,EACJC,EAAE,EACFC,UAAU,EACVC,UAAU,EACVC,KAAK,EACL,cAAcC,SAAS,EACvB,mBAAmBC,cAAc,EACjC,oBAAoBC,eAAe,EACnCC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,UAAU,EACVC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,WAAW,EACXC,eAAe,CAAC,EAChBC,QAAQ,EACT,GAAGlB;IACJ,MAAMmB,WAAWC,IAAAA,aAAM,EAA0B;IACjD,MAAM,CAACC,OAAOC,SAAS,GAAGC,IAAAA,eAAQ,EAASN;IAC3C,MAAMO,0BAA0BH,MAAMI,QAAQ,GAAGC,OAAO,CAAC,OAAO;IAChE,MAAMC,WAAW,OAAOvB,eAAe,aAAa,CAACA;IACrD,MAAMwB,WAAW,OAAOxB,eAAe,aAAaA;IAEpD,MAAM,EAAEyB,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,eAAQ,EAAC;QAC1C7B;QACAG;QACA,cAAcC;QACd,mBAAmBC;IACrB;IAEA,MAAMyB,mBAAmBC,IAAAA,eAAU,EAAC,sBAAsBxB,WAAW;QACnE,iBAAiBkB;IACnB;IAEA,MAAMO,eAAeD,IAAAA,eAAU,EAAC,2BAA2BxB,WAAW;QACpE,iBAAiBmB;QACjB,iBAAiBD;QACjB,cAAchB,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBR;IACnB;IAEA,MAAMgC,eAAeF,IAAAA,eAAU,EAAC,2BAA2B;QACzD,cAActB,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiBR;IACnB;IAEA,MAAMiC,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyB5B,eAAe0B,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA9B;KACD;IAED,MAAMkC,eAAe,CAACC;QACpB,+CAA+C;QAC/C,MAAMC,eAAeC,OAAOF,MAAMG,MAAM,CAACzB,KAAK;QAC9C,IACE,AAACR,YAAY+B,eAAe/B,YAC3BC,YAAY8B,eAAe9B,UAC5B;YACA;QACF;QACAQ,SAASsB;QACT,IAAI1B,UAAU;YACZA,SAASyB;QACX;IACF;IAEA,2BAA2B;IAC3B,MAAMI,oBAAoB,CACxBJ;QAEA,MAAMK,eAAe;QAErB,IAAIL,MAAMM,IAAI,IAAI,CAACD,aAAaE,IAAI,CAACP,MAAMM,IAAI,GAAG;YAChDN,MAAMQ,cAAc;YACpBR,MAAMS,eAAe;QACvB;IACF;IAEA,qBACE,sBAACC;QAAI5C,WAAWuB;;YACb3B,uBACC,qBAACiD,YAAK;gBAAE,GAAGzB,UAAU;gBAAEpB,WAAW0B;0BAC/B9B;;0BAGL,qBAACgD;gBAAI5C,WAAU;0BACb,cAAA,qBAAC8C;oBACE,GAAGzB,UAAU;oBACd7B,KAAKkB,YAAYlB;oBACjBQ,WAAWyB;oBACXsB,MAAK;oBACLtC,UAAUwB;oBACVe,eAAeV;oBACfW,KAAK5C;oBACL6C,KAAK9C;oBACLE,MAAMA;oBACNM,OAAOG;oBACPR,aAAaA;oBACbY,UAAUA;oBACVgC,oBAAkBpB;oBAClBqB,qBAAmBvB;oBACnBwB,gBAAcnD,oBAAoB;oBAClCoD,UAAUnD;oBACVoD,UAAU7D;oBACV8D,cAAa;oBACbC,aAAY;oBACZC,YAAW;;;0BAGf,qBAACC,0BAAY;gBAAClE,IAAIkC;gBAAgB1B,cAAcA;;;;AAGtD"}
+{"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":["NumberField","forwardRef","props","ref","id","isDisabled","isRequired","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","className","errorMessage","validationState","isInvalid","isReadOnly","minValue","maxValue","step","placeholder","defaultValue","onChange","inputRef","useRef","value","setValue","useState","valueWithoutLeadingZero","toString","replace","optional","required","labelProps","fieldProps","useLabel","containerClasses","classNames","validationClasses","useValidationClasses","inputClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","handleChange","event","enteredValue","Number","target","handleBeforeInput","allowedChars","data","test","preventDefault","stopPropagation","div","Label","input","type","onBeforeInput","max","min","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","autoComplete","autoCorrect","spellCheck","ErrorMessage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;+BAyDaA;;;eAAAA;;;;+DAvDU;uBAUhB;uBAEuD;oCAE3B;8BACN;uBACP;;;;;;AAuCf,MAAMA,4BAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAyBC;IACvC,MAAM,EACJC,EAAE,EACFC,UAAU,EACVC,UAAU,EACVC,KAAK,EACL,cAAcC,SAAS,EACvB,mBAAmBC,cAAc,EACjC,oBAAoBC,eAAe,EACnCC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,WAAW,EACXC,eAAe,CAAC,EAChBC,QAAQ,EACT,GAAGnB;IACJ,MAAMoB,WAAWC,IAAAA,aAAM,EAA0B;IACjD,MAAM,CAACC,OAAOC,SAAS,GAAGC,IAAAA,eAAQ,EAASN;IAC3C,MAAMO,0BAA0BH,MAAMI,QAAQ,GAAGC,OAAO,CAAC,OAAO;IAChE,MAAMC,WAAW,OAAOxB,eAAe,aAAa,CAACA;IACrD,MAAMyB,WAAW,OAAOzB,eAAe,aAAaA;IAEpD,MAAM,EAAE0B,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,eAAQ,EAAC;QAC1C9B;QACAG;QACA,cAAcC;QACd,mBAAmBC;IACrB;IAEA,MAAM0B,mBAAmBC,IAAAA,eAAU,EAAC,sBAAsBzB,WAAW;QACnE,iBAAiBmB;IACnB;IAEA,MAAMO,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CzB;QACAC;IACF;IAEA,MAAMyB,eAAeH,IAAAA,eAAU,EAC7B,2BACAzB,WACA;QACE,iBAAiBoB;QACjB,iBAAiBD;QACjB,iBAAiBzB;IACnB,GACAgC;IAGF,MAAMG,eAAeJ,IAAAA,eAAU,EAC7B,2BACA;QACE,iBAAiB/B;IACnB,GACAgC;IAGF,MAAMI,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyB/B,eAAe6B,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAjC;KACD;IAED,MAAMqC,eAAe,CAACC;QACpB,+CAA+C;QAC/C,MAAMC,eAAeC,OAAOF,MAAMG,MAAM,CAAC3B,KAAK;QAC9C,IACE,AAACR,YAAYiC,eAAejC,YAC3BC,YAAYgC,eAAehC,UAC5B;YACA;QACF;QACAQ,SAASwB;QACT,IAAI5B,UAAU;YACZA,SAAS2B;QACX;IACF;IAEA,2BAA2B;IAC3B,MAAMI,oBAAoB,CACxBJ;QAEA,MAAMK,eAAe;QAErB,IAAIL,MAAMM,IAAI,IAAI,CAACD,aAAaE,IAAI,CAACP,MAAMM,IAAI,GAAG;YAChDN,MAAMQ,cAAc;YACpBR,MAAMS,eAAe;QACvB;IACF;IAEA,qBACE,sBAACC;QAAI/C,WAAWwB;;YACb5B,uBACC,qBAACoD,YAAK;gBAAE,GAAG3B,UAAU;gBAAErB,WAAW6B;0BAC/BjC;;0BAGL,qBAACmD;gBAAI/C,WAAU;0BACb,cAAA,qBAACiD;oBACE,GAAG3B,UAAU;oBACd9B,KAAKmB,YAAYnB;oBACjBQ,WAAW4B;oBACXsB,MAAK;oBACLxC,UAAU0B;oBACVe,eAAeV;oBACfW,KAAK9C;oBACL+C,KAAKhD;oBACLE,MAAMA;oBACNM,OAAOG;oBACPR,aAAaA;oBACbY,UAAUA;oBACVkC,oBAAkBpB;oBAClBqB,qBAAmBvB;oBACnBwB,gBAAcrD;oBACdsD,UAAUrD;oBACVsD,UAAUhE;oBACViE,cAAa;oBACbC,aAAY;oBACZC,YAAW;;;0BAGf,qBAACC,0BAAY;gBAACrE,IAAIqC;gBAAgB7B,cAAcA;;;;AAGtD"}

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

@@ -15,6 +15,7 @@ const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedup
 const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
 const _ErrorMessage = require("../ErrorMessage");
 const _Label = require("../Label");
+const _hooks = require("../../hooks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -29,23 +30,25 @@ const getDefaultVal = (children, defaultValue)=>{
     return "";
 };
 const RadioGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { label, isDisabled = false, isRequired, validationState, orientation = "vertical", className, errorMessage, children, defaultValue, isReadOnly, name, onChange, ...rest } = props;
+    const { label, isDisabled = false, isRequired, validationState, isInvalid, orientation = "vertical", className, errorMessage, children, defaultValue, isReadOnly, name, onChange, ...rest } = props;
     const defaultSelected = getDefaultVal(children, defaultValue);
     const [selected, setSelected] = (0, _react.useState)(defaultSelected);
+    const validationClasses = (0, _hooks.useValidationClasses)({
+        validationState,
+        isInvalid
+    });
     const radioClasses = {
         "--is-disabled": isDisabled,
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired,
         [`--is-${orientation}`]: true,
         [className || ""]: true
     };
-    const radioGroupClasses = (0, _dedupe.default)("mobius", "mobius/RadioGroup", radioClasses);
+    const radioGroupClasses = (0, _dedupe.default)("mobius", "mobius/RadioGroup", radioClasses, validationClasses);
     const radioWrapperClasses = (0, _dedupe.default)("mobius/RadioWrapper", {
         [`--is-${orientation}`]: true
     });
-    const labelClasses = (0, _dedupe.default)(radioClasses);
+    const labelClasses = (0, _dedupe.default)(radioClasses, validationClasses);
     const errorMessageId = (0, _react.useId)();
     const defaultNameAttrId = (0, _react.useId)();
     const nameAttribute = name || defaultNameAttrId;
@@ -60,7 +63,7 @@ const RadioGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         "aria-describedby": props["aria-describedby"],
         "aria-disabled": isDisabled,
         "aria-errormessage": shouldErrorMessageShow,
-        "aria-invalid": validationState === "invalid",
+        "aria-invalid": isInvalid,
         "aria-label": props["aria-label"],
         "aria-labelledby": props["aria-labelledby"] || labelId,
         "aria-orientation": orientation,

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\";\n\nexport type RadioGroupElementType = HTMLDivElement;\n\nexport interface RadioGroupProps\n  extends DOMProps,\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 the input should display its \"valid\" or \"invalid\" visual styling.\n  validationState?: \"valid\" | \"invalid\";\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    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 radioClasses = {\n    \"--is-disabled\": isDisabled,\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\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  );\n  const radioWrapperClasses = classNames(\"mobius/RadioWrapper\", {\n    [`--is-${orientation}`]: true,\n  });\n  const labelClasses = classNames(radioClasses);\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={validationState === \"invalid\"}\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","orientation","className","errorMessage","isReadOnly","name","onChange","rest","defaultSelected","selected","setSelected","useState","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;;;;;+BAyKSA;;;eAAAA;;;;uBA5JF;+DACgB;oCAIY;8BACN;uBACP;;;;;;AA2CtB,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,cAAc,UAAU,EACxBC,SAAS,EACTC,YAAY,EACZjB,QAAQ,EACRC,YAAY,EACZiB,UAAU,EACVC,IAAI,EACJC,QAAQ,EACR,GAAGC,MACJ,GAAGd;IACJ,MAAMe,kBAAkBvB,cAAcC,UAAUC;IAChD,MAAM,CAACsB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAASH;IACjD,MAAMI,eAAe;QACnB,iBAAiBd;QACjB,cAAcE,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOD,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;QACrD,CAAC,CAAC,KAAK,EAAEE,YAAY,CAAC,CAAC,EAAE;QACzB,CAACC,aAAa,GAAG,EAAE;IACrB;IACA,MAAMW,oBAAoBC,IAAAA,eAAU,EAClC,UACA,qBACAF;IAEF,MAAMG,sBAAsBD,IAAAA,eAAU,EAAC,uBAAuB;QAC5D,CAAC,CAAC,KAAK,EAAEb,YAAY,CAAC,CAAC,EAAE;IAC3B;IACA,MAAMe,eAAeF,IAAAA,eAAU,EAACF;IAChC,MAAMK,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,oBAAoBD,IAAAA,YAAK;IAC/B,MAAME,gBAAgBf,QAAQc;IAC9B,MAAME,yBAAyBlB,eAAec,iBAAiBK;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA5B,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMgC,UAAUP,IAAAA,YAAK;IAErB,qBACE,sBAACQ;QACE,GAAGnB,IAAI;QACRoB,oBAAkBlC,KAAK,CAAC,mBAAmB;QAC3CmC,iBAAe9B;QACf+B,qBAAmBR;QACnBS,gBAAc9B,oBAAoB;QAClC+B,cAAYtC,KAAK,CAAC,aAAa;QAC/BuC,mBAAiBvC,KAAK,CAAC,kBAAkB,IAAIgC;QAC7CQ,oBAAkBhC;QAClBiC,iBAAe9B;QACf+B,iBAAepC;QACfH,KAAKA;QACLM,WAAWW;QACXuB,MAAK;;YAEJvC,uBACC,qBAACwC,YAAK;gBAACC,SAASjC;gBAAMkC,IAAId;gBAASvB,WAAWc;0BAC3CnB;;0BAGL,qBAAC6B;gBAAIxB,WAAWa;0BACbyB,eAAQ,CAACC,GAAG,CAACvD,UAAUwD,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzCzC;4BACA4C,eAAe/C;4BACfO,MAAMe;4BACNX;4BACAC;4BACAX;4BACA,oBAAoBwB;4BACpBjB;wBACF;oBACF;oBAEA,OAAOoC;gBACT;;0BAEF,qBAACI,0BAAY;gBAACP,IAAItB;gBAAgBd,cAAcA;;;;AAGtD;AAEAnB,WAAW+D,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={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"}

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

@@ -17,28 +17,32 @@ const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
 const _ErrorMessage = require("../ErrorMessage");
 const _Flex = require("../Flex");
 const _Label = require("../Label");
+const _hooks = require("../../hooks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const Select = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { label, onChange, validationState, errorMessage, isDisabled = false, isRequired, ...otherProps } = props;
+    const { label, onChange, validationState, isInvalid, errorMessage, isDisabled = false, isRequired, ...otherProps } = props;
     const { labelProps, fieldProps } = (0, _useLabel.useLabel)({
         label,
         ...otherProps
     });
+    const validationClasses = (0, _hooks.useValidationClasses)({
+        validationState,
+        isInvalid
+    });
     const stateClasses = {
         "--is-disabled": isDisabled,
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     };
-    const wrapperClasses = (0, _dedupe.default)("mobius/SelectWrapper", stateClasses, otherProps.className);
-    const selectClasses = (0, _dedupe.default)("mobius/Select", stateClasses, otherProps.className);
-    const labelClasses = (0, _dedupe.default)("mobius/Label", stateClasses, otherProps.className);
-    const iconClasses = (0, _dedupe.default)("mobius/SelectIcon", stateClasses);
+    const sharedClasses = (0, _dedupe.default)(validationClasses, stateClasses);
+    const wrapperClasses = (0, _dedupe.default)("mobius/SelectWrapper", sharedClasses, otherProps.className);
+    const selectClasses = (0, _dedupe.default)("mobius/Select", sharedClasses, otherProps.className);
+    const labelClasses = (0, _dedupe.default)("mobius/Label", sharedClasses, otherProps.className);
+    const iconClasses = (0, _dedupe.default)("mobius/SelectIcon", sharedClasses);
     const errorMessageId = (0, _react.useId)();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = (0, _spaceDelimitedList.spaceDelimitedList)([

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\";\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      errorMessage,\n      isDisabled = false,\n      isRequired,\n      ...otherProps\n    } = props;\n\n    const { labelProps, fieldProps } = useLabel({\n      label,\n      ...otherProps,\n    });\n\n    const stateClasses = {\n      \"--is-disabled\": isDisabled,\n      \"--is-valid\": validationState === \"valid\",\n      \"--is-invalid\": validationState === \"invalid\",\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    };\n\n    const wrapperClasses = classNames(\n      \"mobius/SelectWrapper\",\n      stateClasses,\n      otherProps.className,\n    );\n    const selectClasses = classNames(\n      \"mobius/Select\",\n      stateClasses,\n      otherProps.className,\n    );\n    const labelClasses = classNames(\n      \"mobius/Label\",\n      stateClasses,\n      otherProps.className,\n    );\n    const iconClasses = classNames(\"mobius/SelectIcon\", stateClasses);\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","errorMessage","isDisabled","isRequired","otherProps","labelProps","fieldProps","useLabel","stateClasses","wrapperClasses","classNames","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;;;;;+BA2HSA;;;eAAAA;;;;+DAzHc;uBAQhB;0BACiC;oCAGL;8BACN;sBACR;uBACC;;;;;;AAsBtB,MAAMA,uBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,eAAe,EACfC,YAAY,EACZC,aAAa,KAAK,EAClBC,UAAU,EACV,GAAGC,YACJ,GAAGR;IAEJ,MAAM,EAAES,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,kBAAQ,EAAC;QAC1CT;QACA,GAAGM,UAAU;IACf;IAEA,MAAMI,eAAe;QACnB,iBAAiBN;QACjB,cAAcF,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOG,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEA,MAAMM,iBAAiBC,IAAAA,eAAU,EAC/B,wBACAF,cACAJ,WAAWO,SAAS;IAEtB,MAAMC,gBAAgBF,IAAAA,eAAU,EAC9B,iBACAF,cACAJ,WAAWO,SAAS;IAEtB,MAAME,eAAeH,IAAAA,eAAU,EAC7B,gBACAF,cACAJ,WAAWO,SAAS;IAEtB,MAAMG,cAAcJ,IAAAA,eAAU,EAAC,qBAAqBF;IACpD,MAAMO,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyBhB,eAAec,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACArB,KAAK,CAAC,mBAAmB;KAC1B;IAED,MAAMyB,eAAe,CAACC;QACpB,IAAIvB,UAAU;YACZA,SAASuB;QACX;IACF;IAEA,qBACE,sBAACC,UAAI;QAACC,eAAc;QAASb,WAAU;;YACpCb,uBACC,qBAAC2B,YAAK;gBAAE,GAAGpB,UAAU;gBAAEM,WAAWE;0BAC/Bf;;0BAGL,sBAAC4B;gBAAIf,WAAWF;;kCACd,qBAACkB;wBACE,GAAGvB,UAAU;wBACb,GAAGE,UAAU;wBACdT,KAAKA;wBACL+B,UAAU;wBACVjB,WAAWC;wBACXiB,UAAU3B;wBACV4B,gBAAc,CAAC,CAAC7B;wBAChB8B,oBAAkBZ;wBAClBa,iBAAe7B;wBACfJ,UAAUsB;;kCAEZ,qBAACY;wBAAKtB,WAAWG;;;;YAElBb,8BACC,qBAACiC,0BAAY;gBAACC,IAAIpB;gBAAgBd,cAAcA;;;;AAIxD;AAEFP,OAAO0C,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 { 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"}