@simplybusiness/mobius 4.8.6 → 4.8.8

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint no-console: \"off\" */\nimport type { AriaProgressBarProps } from \"@react-types/progress\";\nimport classNames from \"classnames/dedupe\";\nimport { ReactNode, Ref, RefAttributes, forwardRef, useId } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Label } from \"../Label\";\n\nexport type ProgressElementType = HTMLDivElement;\n\nexport interface ProgressProps\n  extends AriaProgressBarProps,\n    DOMProps,\n    RefAttributes<ProgressElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  id?: string;\n  className?: string;\n  showValueLabel?: boolean;\n  variant?: \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\";\n  value?: number;\n  minValue?: number;\n  maxValue?: number;\n  valueFormatter?: (\n    value: number,\n    minValue: number,\n    maxValue: number,\n  ) => string;\n}\n\nexport type ProgressRef = Ref<ProgressElementType>;\n\nfunction warnAboutInvalidValues(\n  value: number,\n  minValue: number,\n  maxValue: number,\n) {\n  if (minValue > maxValue) {\n    console.warn(\"minValue is greater than maxValue\");\n  }\n  if (value < minValue) {\n    console.warn(\"Progress value is less than minValue\");\n  }\n  if (value > maxValue) {\n    console.warn(\"Progress value is greater than maxValue\");\n  }\n}\n\nconst sanitizedValue = (\n  value: number | undefined,\n  defaultValue: number,\n): number => {\n  const numberValue = parseFloat(value as any);\n  return Number.isNaN(numberValue) ? defaultValue : numberValue;\n};\n\nconst DEFAULT_VALUE = 0;\nconst DEFAULT_MIN_VALUE = 0;\nconst DEFAULT_MAX_VALUE = 100;\n\nconst Progress: ForwardedRefComponent<ProgressProps, ProgressElementType> =\n  forwardRef((props: ProgressProps, ref: ProgressRef) => {\n    const progressId = useId();\n    const progressLabelId = useId();\n    const {\n      id,\n      label,\n      showValueLabel = !!label,\n      valueFormatter,\n      variant = \"primary\",\n      className,\n    } = props;\n\n    let { value, minValue, maxValue } = props;\n\n    value = sanitizedValue(value, DEFAULT_VALUE);\n    minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);\n    maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);\n\n    // Will never happen but lets appease the typescript gods\n    if (\n      value === undefined ||\n      minValue === undefined ||\n      maxValue === undefined\n    ) {\n      return null;\n    }\n\n    warnAboutInvalidValues(value, minValue, maxValue);\n\n    // Calculate the width of the progress bar as a percentage\n    const clamp = (num: number, min: number, max: number): number =>\n      Math.min(Math.max(num, min), max);\n    const percentage = clamp(\n      Math.round(((value - minValue) / (maxValue - minValue)) * 100),\n      0,\n      100,\n    );\n    const barWidth = `${percentage}%`;\n\n    const classes = classNames(\"mobius\", \"mobius/Progress\", className, {\n      \"--is-primary\": variant === \"primary\",\n      \"--is-secondary\": variant === \"secondary\",\n    });\n\n    // Set progress aria values\n    const progressBarProps: Record<string, string> = {};\n    progressBarProps[\"aria-valuemin\"] = minValue.toString();\n    progressBarProps[\"aria-valuemax\"] = maxValue.toString();\n    progressBarProps[\"aria-valuenow\"] = value.toString();\n    progressBarProps[\"aria-valuetext\"] =\n      valueFormatter instanceof Function\n        ? valueFormatter(value, minValue, maxValue!)\n        : barWidth;\n\n    return (\n      <div\n        id={id || progressId}\n        {...progressBarProps}\n        ref={ref}\n        className={classes}\n        role=\"progressbar\"\n        aria-labelledby={progressLabelId}\n      >\n        {label && (\n          <Label\n            id={progressLabelId}\n            className=\"mobius/ProgressLabel\"\n            elementType=\"span\"\n          >\n            {label}\n          </Label>\n        )}\n        <div className=\"mobius/ProgressTrack\">\n          <div className=\"mobius/ProgressBar\" style={{ width: barWidth }} />\n        </div>\n        {showValueLabel && (\n          <Label data-testid=\"value-label\" elementType=\"span\">\n            {progressBarProps[\"aria-valuetext\"]}\n          </Label>\n        )}\n      </div>\n    );\n  });\n\nProgress.defaultProps = {\n  value: DEFAULT_VALUE,\n  minValue: DEFAULT_MIN_VALUE,\n  maxValue: DEFAULT_MAX_VALUE,\n};\n\nProgress.displayName = \"Progress\";\nexport { Progress };\n"],"names":["classNames","forwardRef","useId","Label","warnAboutInvalidValues","value","minValue","maxValue","console","warn","sanitizedValue","defaultValue","numberValue","parseFloat","Number","isNaN","DEFAULT_VALUE","DEFAULT_MIN_VALUE","DEFAULT_MAX_VALUE","Progress","props","ref","progressId","progressLabelId","id","label","showValueLabel","valueFormatter","variant","className","undefined","clamp","num","min","max","Math","percentage","round","barWidth","classes","progressBarProps","toString","Function","div","role","aria-labelledby","elementType","style","width","data-testid","defaultProps","displayName"],"mappings":"AAAA;;AAIA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAwCC,UAAU,EAAEC,KAAK,QAAQ,QAAQ;AAGzE,SAASC,KAAK,QAAQ,WAAW;AA0BjC,SAASC,uBACPC,KAAa,EACbC,QAAgB,EAChBC,QAAgB;IAEhB,IAAID,WAAWC,UAAU;QACvBC,QAAQC,IAAI,CAAC;IACf;IACA,IAAIJ,QAAQC,UAAU;QACpBE,QAAQC,IAAI,CAAC;IACf;IACA,IAAIJ,QAAQE,UAAU;QACpBC,QAAQC,IAAI,CAAC;IACf;AACF;AAEA,MAAMC,iBAAiB,CACrBL,OACAM;IAEA,MAAMC,cAAcC,WAAWR;IAC/B,OAAOS,OAAOC,KAAK,CAACH,eAAeD,eAAeC;AACpD;AAEA,MAAMI,gBAAgB;AACtB,MAAMC,oBAAoB;AAC1B,MAAMC,oBAAoB;AAE1B,MAAMC,yBACJlB,WAAW,CAACmB,OAAsBC;IAChC,MAAMC,aAAapB;IACnB,MAAMqB,kBAAkBrB;IACxB,MAAM,EACJsB,EAAE,EACFC,KAAK,EACLC,iBAAiB,CAAC,CAACD,KAAK,EACxBE,cAAc,EACdC,UAAU,SAAS,EACnBC,SAAS,EACV,GAAGT;IAEJ,IAAI,EAAEf,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGa;IAEpCf,QAAQK,eAAeL,OAAOW;IAC9BV,WAAWI,eAAeJ,UAAUW;IACpCV,WAAWG,eAAeH,UAAUW;IAEpC,yDAAyD;IACzD,IACEb,UAAUyB,aACVxB,aAAawB,aACbvB,aAAauB,WACb;QACA,OAAO;IACT;IAEA1B,uBAAuBC,OAAOC,UAAUC;IAExC,0DAA0D;IAC1D,MAAMwB,QAAQ,CAACC,KAAaC,KAAaC,MACvCC,KAAKF,GAAG,CAACE,KAAKD,GAAG,CAACF,KAAKC,MAAMC;IAC/B,MAAME,aAAaL,MACjBI,KAAKE,KAAK,CAAC,AAAEhC,CAAAA,QAAQC,QAAO,IAAMC,CAAAA,WAAWD,QAAO,IAAM,MAC1D,GACA;IAEF,MAAMgC,WAAW,CAAC,EAAEF,WAAW,CAAC,CAAC;IAEjC,MAAMG,UAAUvC,WAAW,UAAU,mBAAmB6B,WAAW;QACjE,gBAAgBD,YAAY;QAC5B,kBAAkBA,YAAY;IAChC;IAEA,2BAA2B;IAC3B,MAAMY,mBAA2C,CAAC;IAClDA,gBAAgB,CAAC,gBAAgB,GAAGlC,SAASmC,QAAQ;IACrDD,gBAAgB,CAAC,gBAAgB,GAAGjC,SAASkC,QAAQ;IACrDD,gBAAgB,CAAC,gBAAgB,GAAGnC,MAAMoC,QAAQ;IAClDD,gBAAgB,CAAC,iBAAiB,GAChCb,0BAA0Be,WACtBf,eAAetB,OAAOC,UAAUC,YAChC+B;IAEN,qBACE,MAACK;QACCnB,IAAIA,MAAMF;QACT,GAAGkB,gBAAgB;QACpBnB,KAAKA;QACLQ,WAAWU;QACXK,MAAK;QACLC,mBAAiBtB;;YAEhBE,uBACC,KAACtB;gBACCqB,IAAID;gBACJM,WAAU;gBACViB,aAAY;0BAEXrB;;0BAGL,KAACkB;gBAAId,WAAU;0BACb,cAAA,KAACc;oBAAId,WAAU;oBAAqBkB,OAAO;wBAAEC,OAAOV;oBAAS;;;YAE9DZ,gCACC,KAACvB;gBAAM8C,eAAY;gBAAcH,aAAY;0BAC1CN,gBAAgB,CAAC,iBAAiB;;;;AAK7C;AAEFrB,SAAS+B,YAAY,GAAG;IACtB7C,OAAOW;IACPV,UAAUW;IACVV,UAAUW;AACZ;AAEAC,SAASgC,WAAW,GAAG;AACvB,SAAShC,QAAQ,GAAG"}

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

@@ -0,0 +1,3 @@
+export * from "./Progress";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Progress/index.tsx"],"sourcesContent":["export * from \"./Progress\";\n"],"names":[],"mappings":"AAAA,cAAc,aAAa"}

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

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+import { forwardRef } from "react";
+import { ErrorMessage } from "../ErrorMessage";
+import { Label } from "../Label";
+const Radio = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, value, label, className, isDisabled, errorMessage, onChange, defaultChecked, groupDisabled, name, selected, setSelected, isRequired, ...otherProps } = props;
+    const realDisabled = groupDisabled || isDisabled;
+    const isMultiline = label && children;
+    const isDefaultSelected = selected === value || defaultChecked;
+    const radioClasses = {
+        "--is-disabled": realDisabled,
+        "--is-selected": selected === value,
+        "--is-multiline": !!isMultiline,
+        "--is-required": isRequired
+    };
+    const containerClasses = classNames("mobius/RadioLabel", radioClasses, className);
+    const inputClasses = classNames("mobius/RadioInput", radioClasses);
+    const handleClick = (event)=>{
+        if (onChange) {
+            onChange(event);
+        }
+        if (setSelected) {
+            setSelected(event.currentTarget.value);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Label, {
+                className: containerClasses,
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        "aria-describedby": otherProps["aria-describedby"],
+                        disabled: realDisabled,
+                        ref: ref,
+                        className: inputClasses,
+                        onClick: handleClick,
+                        value: value,
+                        tabIndex: 0,
+                        type: "radio",
+                        defaultChecked: isDefaultSelected,
+                        name: name,
+                        required: isRequired
+                    }),
+                    isMultiline ? /*#__PURE__*/ _jsxs("div", {
+                        className: "mobius/RadioContentMultiline",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "mobius/RadioContentFirstLine",
+                                children: label
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "mobius/RadioExtraContent",
+                                children: children
+                            })
+                        ]
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        className: "mobius/RadioContent",
+                        children: label || children
+                    })
+                ]
+            }),
+            errorMessage && /*#__PURE__*/ _jsx(ErrorMessage, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+});
+Radio.displayName = "Radio";
+export { Radio };
+
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { MouseEvent, ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type RadioElementType = HTMLInputElement;\n\nexport type AriaRadioProps = {\n  /**\n   * Defines a string value that labels the current element.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Identifies the element (or elements) that labels the current element.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * Identifies the element (or elements) that provide a detailed, extended description for the object.\n   */\n  \"aria-details\"?: string;\n};\n\nexport interface RadioProps\n  extends DOMProps,\n    AriaRadioProps,\n    RefAttributes<RadioElementType> {\n  children?: ReactNode;\n  className?: string;\n  label?: ReactNode;\n  errorMessage?: string;\n  value: string;\n  isDisabled?: boolean;\n  onChange?: (event: HTMLElementEvent<RadioElementType>) => void;\n  defaultChecked?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  name?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n  isRequired?: boolean;\n}\n\nexport type RadioRef = Ref<RadioElementType>;\n\nconst Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(\n  (props: RadioProps, ref: RadioRef) => {\n    const {\n      children,\n      value,\n      label,\n      className,\n      isDisabled,\n      errorMessage,\n      onChange,\n      defaultChecked,\n      groupDisabled,\n      name,\n      selected,\n      setSelected,\n      isRequired,\n      ...otherProps\n    } = props;\n    const realDisabled = groupDisabled || isDisabled;\n    const isMultiline = label && children;\n    const isDefaultSelected = selected === value || defaultChecked;\n    const radioClasses = {\n      \"--is-disabled\": realDisabled,\n      \"--is-selected\": selected === value,\n      \"--is-multiline\": !!isMultiline,\n      \"--is-required\": isRequired,\n    };\n    const containerClasses = classNames(\n      \"mobius/RadioLabel\",\n      radioClasses,\n      className,\n    );\n    const inputClasses = classNames(\"mobius/RadioInput\", radioClasses);\n\n    const handleClick = (event: MouseEvent<RadioElementType>) => {\n      if (onChange) {\n        onChange(event as unknown as HTMLElementEvent<RadioElementType>);\n      }\n      if (setSelected) {\n        setSelected(event.currentTarget.value);\n      }\n    };\n\n    return (\n      <>\n        <Label className={containerClasses}>\n          <input\n            aria-describedby={otherProps[\"aria-describedby\"]}\n            disabled={realDisabled}\n            ref={ref}\n            className={inputClasses}\n            onClick={handleClick}\n            value={value}\n            tabIndex={0}\n            type=\"radio\"\n            defaultChecked={isDefaultSelected}\n            name={name}\n            required={isRequired}\n          />\n          {isMultiline ? (\n            <div className=\"mobius/RadioContentMultiline\">\n              <div className=\"mobius/RadioContentFirstLine\">{label}</div>\n              <div className=\"mobius/RadioExtraContent\">{children}</div>\n            </div>\n          ) : (\n            <div className=\"mobius/RadioContent\">{label || children}</div>\n          )}\n        </Label>\n        {errorMessage && <ErrorMessage errorMessage={errorMessage} />}\n      </>\n    );\n  },\n);\n\nRadio.displayName = \"Radio\";\nexport { Radio };\n"],"names":["classNames","forwardRef","ErrorMessage","Label","Radio","props","ref","children","value","label","className","isDisabled","errorMessage","onChange","defaultChecked","groupDisabled","name","selected","setSelected","isRequired","otherProps","realDisabled","isMultiline","isDefaultSelected","radioClasses","containerClasses","inputClasses","handleClick","event","currentTarget","input","aria-describedby","disabled","onClick","tabIndex","type","required","div","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAoDC,UAAU,QAAQ,QAAQ;AAI9E,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AAwDjC,MAAMC,sBAA6DH,WACjE,CAACI,OAAmBC;IAClB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACV,GAAGC,YACJ,GAAGf;IACJ,MAAMgB,eAAeN,iBAAiBJ;IACtC,MAAMW,cAAcb,SAASF;IAC7B,MAAMgB,oBAAoBN,aAAaT,SAASM;IAChD,MAAMU,eAAe;QACnB,iBAAiBH;QACjB,iBAAiBJ,aAAaT;QAC9B,kBAAkB,CAAC,CAACc;QACpB,iBAAiBH;IACnB;IACA,MAAMM,mBAAmBzB,WACvB,qBACAwB,cACAd;IAEF,MAAMgB,eAAe1B,WAAW,qBAAqBwB;IAErD,MAAMG,cAAc,CAACC;QACnB,IAAIf,UAAU;YACZA,SAASe;QACX;QACA,IAAIV,aAAa;YACfA,YAAYU,MAAMC,aAAa,CAACrB,KAAK;QACvC;IACF;IAEA,qBACE;;0BACE,MAACL;gBAAMO,WAAWe;;kCAChB,KAACK;wBACCC,oBAAkBX,UAAU,CAAC,mBAAmB;wBAChDY,UAAUX;wBACVf,KAAKA;wBACLI,WAAWgB;wBACXO,SAASN;wBACTnB,OAAOA;wBACP0B,UAAU;wBACVC,MAAK;wBACLrB,gBAAgBS;wBAChBP,MAAMA;wBACNoB,UAAUjB;;oBAEXG,4BACC,MAACe;wBAAI3B,WAAU;;0CACb,KAAC2B;gCAAI3B,WAAU;0CAAgCD;;0CAC/C,KAAC4B;gCAAI3B,WAAU;0CAA4BH;;;uCAG7C,KAAC8B;wBAAI3B,WAAU;kCAAuBD,SAASF;;;;YAGlDK,8BAAgB,KAACV;gBAAaU,cAAcA;;;;AAGnD;AAGFR,MAAMkC,WAAW,GAAG;AACpB,SAASlC,KAAK,GAAG"}

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+import { Radio } from "./Radio";
+export const RadioButton = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const classes = classNames(props.className, "--is-radio-button");
+    const radioProps = {
+        ...props,
+        className: classes,
+        ref
+    };
+    return /*#__PURE__*/ _jsx(Radio, {
+        ...radioProps
+    });
+});
+
+//# sourceMappingURL=RadioButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Radio/RadioButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Radio, RadioElementType, RadioProps, RadioRef } from \"./Radio\";\n\nexport const RadioButton: ForwardedRefComponent<RadioProps, RadioElementType> =\n  forwardRef((props: RadioProps, ref: RadioRef) => {\n    const classes = classNames(props.className, \"--is-radio-button\");\n    const radioProps = {\n      ...props,\n      className: classes,\n      ref,\n    };\n\n    return <Radio {...radioProps} />;\n  });\n"],"names":["forwardRef","classNames","Radio","RadioButton","props","ref","classes","className","radioProps"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AACnC,OAAOC,gBAAgB,oBAAoB;AAE3C,SAASC,KAAK,QAAgD,UAAU;AAExE,OAAO,MAAMC,4BACXH,WAAW,CAACI,OAAmBC;IAC7B,MAAMC,UAAUL,WAAWG,MAAMG,SAAS,EAAE;IAC5C,MAAMC,aAAa;QACjB,GAAGJ,KAAK;QACRG,WAAWD;QACXD;IACF;IAEA,qBAAO,KAACH;QAAO,GAAGM,UAAU;;AAC9B,GAAG"}

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

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement, useId, useState } from "react";
+import classNames from "classnames/dedupe";
+import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { ErrorMessage } from "../ErrorMessage";
+import { Label } from "../Label";
+const getDefaultVal = (children, defaultValue)=>{
+    if (Array.isArray(children) && defaultValue) {
+        const option = children === null || children === void 0 ? void 0 : children.find((item)=>item.props.value === defaultValue);
+        if (!option) return "";
+        return option.props.value;
+    }
+    return "";
+};
+const RadioGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { label, isDisabled = false, isRequired, validationState, orientation = "vertical", className, errorMessage, children, defaultValue, isReadOnly, onChange, ...rest } = props;
+    const defaultSelected = getDefaultVal(children, defaultValue);
+    const [selected, setSelected] = useState(defaultSelected);
+    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 = classNames("mobius", "mobius/RadioGroup", radioClasses);
+    const radioWrapperClasses = classNames("mobius/RadioWrapper", {
+        [`--is-${orientation}`]: true
+    });
+    const labelClasses = classNames(radioClasses);
+    const errorMessageId = useId();
+    const name = useId();
+    const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
+    const describedBy = spaceDelimitedList([
+        shouldErrorMessageShow,
+        props["aria-describedby"]
+    ]);
+    const labelId = useId();
+    return /*#__PURE__*/ _jsxs("div", {
+        ...rest,
+        "aria-describedby": props["aria-describedby"],
+        "aria-disabled": isDisabled,
+        "aria-errormessage": shouldErrorMessageShow,
+        "aria-invalid": validationState === "invalid",
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"] || labelId,
+        "aria-orientation": orientation,
+        "aria-readonly": isReadOnly,
+        "aria-required": isRequired,
+        ref: ref,
+        className: radioGroupClasses,
+        role: "radiogroup",
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                htmlFor: name,
+                id: labelId,
+                className: labelClasses,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: radioWrapperClasses,
+                children: Children.map(children, (child)=>{
+                    if (/*#__PURE__*/ isValidElement(child)) {
+                        return /*#__PURE__*/ cloneElement(child, {
+                            orientation,
+                            groupDisabled: isDisabled,
+                            name,
+                            selected,
+                            setSelected,
+                            isRequired,
+                            "aria-describedby": describedBy,
+                            onChange
+                        });
+                    }
+                    return child;
+                })
+            }),
+            /*#__PURE__*/ _jsx(ErrorMessage, {
+                id: errorMessageId,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+});
+RadioGroup.displayName = "RadioGroup";
+export { RadioGroup };
+
+//# sourceMappingURL=RadioGroup.js.map

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

@@ -0,0 +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}\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    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 name = useId();\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,\n              selected,\n              setSelected,\n              isRequired,\n              \"aria-describedby\": describedBy,\n              onChange,\n            });\n          }\n\n          return child;\n        })}\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </div>\n  );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\nexport { RadioGroup };\n"],"names":["Children","cloneElement","forwardRef","isValidElement","useId","useState","classNames","spaceDelimitedList","ErrorMessage","Label","getDefaultVal","children","defaultValue","Array","isArray","option","find","item","props","value","RadioGroup","ref","label","isDisabled","isRequired","validationState","orientation","className","errorMessage","isReadOnly","onChange","rest","defaultSelected","selected","setSelected","radioClasses","radioGroupClasses","radioWrapperClasses","labelClasses","errorMessageId","name","shouldErrorMessageShow","undefined","describedBy","labelId","div","aria-describedby","aria-disabled","aria-errormessage","aria-invalid","aria-label","aria-labelledby","aria-orientation","aria-readonly","aria-required","role","htmlFor","id","map","child","groupDisabled","displayName"],"mappings":"AAAA;;AAEA,SACEA,QAAQ,EAKRC,YAAY,EACZC,UAAU,EACVC,cAAc,EACdC,KAAK,EACLC,QAAQ,QACH,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAI3C,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AA0CjC,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,MAAMC,2BAGFlB,WAAW,CAACgB,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,QAAQ,EACR,GAAGC,MACJ,GAAGb;IACJ,MAAMc,kBAAkBtB,cAAcC,UAAUC;IAChD,MAAM,CAACqB,UAAUC,YAAY,GAAG7B,SAAiB2B;IACjD,MAAMG,eAAe;QACnB,iBAAiBZ;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,MAAMS,oBAAoB9B,WACxB,UACA,qBACA6B;IAEF,MAAME,sBAAsB/B,WAAW,uBAAuB;QAC5D,CAAC,CAAC,KAAK,EAAEoB,YAAY,CAAC,CAAC,EAAE;IAC3B;IACA,MAAMY,eAAehC,WAAW6B;IAChC,MAAMI,iBAAiBnC;IACvB,MAAMoC,OAAOpC;IACb,MAAMqC,yBAAyBb,eAAeW,iBAAiBG;IAC/D,MAAMC,cAAcpC,mBAAmB;QACrCkC;QACAvB,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAM0B,UAAUxC;IAEhB,qBACE,MAACyC;QACE,GAAGd,IAAI;QACRe,oBAAkB5B,KAAK,CAAC,mBAAmB;QAC3C6B,iBAAexB;QACfyB,qBAAmBP;QACnBQ,gBAAcxB,oBAAoB;QAClCyB,cAAYhC,KAAK,CAAC,aAAa;QAC/BiC,mBAAiBjC,KAAK,CAAC,kBAAkB,IAAI0B;QAC7CQ,oBAAkB1B;QAClB2B,iBAAexB;QACfyB,iBAAe9B;QACfH,KAAKA;QACLM,WAAWS;QACXmB,MAAK;;YAEJjC,uBACC,KAACb;gBAAM+C,SAAShB;gBAAMiB,IAAIb;gBAASjB,WAAWW;0BAC3ChB;;0BAGL,KAACuB;gBAAIlB,WAAWU;0BACbrC,SAAS0D,GAAG,CAAC/C,UAAUgD,CAAAA;oBACtB,kBAAIxD,eAAewD,QAAQ;wBACzB,qBAAO1D,aAAa0D,OAAuB;4BACzCjC;4BACAkC,eAAerC;4BACfiB;4BACAP;4BACAC;4BACAV;4BACA,oBAAoBmB;4BACpBb;wBACF;oBACF;oBAEA,OAAO6B;gBACT;;0BAEF,KAACnD;gBAAaiD,IAAIlB;gBAAgBX,cAAcA;;;;AAGtD;AAEAR,WAAWyC,WAAW,GAAG;AACzB,SAASzC,UAAU,GAAG"}

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

@@ -0,0 +1,5 @@
+export * from "./Radio";
+export * from "./RadioButton";
+export * from "./RadioGroup";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Radio/index.tsx"],"sourcesContent":["export * from \"./Radio\";\nexport * from \"./RadioButton\";\nexport * from \"./RadioGroup\";\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,eAAe"}

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, Children } from "react";
+import classNames from "classnames/dedupe";
+const SVG = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, className, ...otherProps } = props;
+    const classes = classNames("mobius", "mobius/SVG", className);
+    const svgNode = Children.only(children);
+    // Remove originalType and mdxType props
+    const { children: svgChildren, viewBox, xmlns } = svgNode.props;
+    return /*#__PURE__*/ _jsx("svg", {
+        viewBox: viewBox,
+        xmlns: xmlns,
+        ref: ref,
+        ...otherProps,
+        className: classes,
+        children: svgChildren
+    });
+});
+SVG.displayName = "SVG";
+export { SVG };
+
+//# sourceMappingURL=SVG.js.map

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

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

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

@@ -0,0 +1,3 @@
+export * from "./SVG";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/SVG/index.tsx"],"sourcesContent":["export * from \"./SVG\";\n"],"names":[],"mappings":"AAAA,cAAc,QAAQ"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+const Segment = (props)=>{
+    const { heading, children, colour, inverted, className, ...rest } = props;
+    const classes = classNames("mobius", "mobius/Segment", colour, {
+        inverted
+    }, className);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classes,
+        ...rest,
+        children: [
+            heading && /*#__PURE__*/ _jsx("div", {
+                className: "mobius/SegmentHeading",
+                children: heading
+            }),
+            children
+        ]
+    });
+};
+Segment.displayName = "Segment";
+export { Segment };
+
+//# sourceMappingURL=Segment.js.map

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+const SegmentGroup = (props)=>{
+    const { children, horizontal, margin, className, ...rest } = props;
+    const marginClass = margin ? `margin-${margin}` : "";
+    const classes = classNames("mobius", "mobius/SegmentGroup", className, {
+        horizontal
+    }, marginClass);
+    return /*#__PURE__*/ _jsx("div", {
+        className: classes,
+        ...rest,
+        children: children
+    });
+};
+SegmentGroup.displayName = "SegmentGroup";
+export { SegmentGroup };
+
+//# sourceMappingURL=SegmentGroup.js.map

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

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

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

@@ -0,0 +1,4 @@
+export * from "./SegmentGroup";
+export * from "./Segment";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Segment/index.tsx"],"sourcesContent":["export * from \"./SegmentGroup\";\nexport * from \"./Segment\";\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,YAAY"}

package/dist/esm/src/components/Select/Select.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+import { forwardRef, useId } from "react";
+import { useLabel } from "../../hooks/useLabel";
+import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { ErrorMessage } from "../ErrorMessage";
+import { Flex } from "../Flex";
+import { Label } from "../Label";
+const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { label, onChange, validationState, errorMessage, isDisabled = false, isRequired, ...otherProps } = props;
+    const { labelProps, fieldProps } = useLabel({
+        label,
+        ...otherProps
+    });
+    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 = classNames("mobius/SelectWrapper", stateClasses, otherProps.className);
+    const selectClasses = classNames("mobius/Select", stateClasses, otherProps.className);
+    const labelClasses = classNames("mobius/Label", stateClasses, otherProps.className);
+    const iconClasses = classNames("mobius/SelectIcon", stateClasses);
+    const errorMessageId = useId();
+    const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
+    const describedBy = spaceDelimitedList([
+        shouldErrorMessageShow,
+        props["aria-describedby"]
+    ]);
+    const handleChange = (e)=>{
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(Flex, {
+        flexDirection: "column",
+        className: "mobius mobius/SelectOuter",
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                ...labelProps,
+                className: labelClasses,
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: wrapperClasses,
+                children: [
+                    /*#__PURE__*/ _jsx("select", {
+                        ...otherProps,
+                        ...fieldProps,
+                        ref: ref,
+                        multiple: false,
+                        className: selectClasses,
+                        disabled: isDisabled,
+                        "aria-invalid": !!errorMessage,
+                        "aria-describedby": describedBy,
+                        "aria-required": isRequired,
+                        onChange: handleChange
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: iconClasses
+                    })
+                ]
+            }),
+            errorMessage && /*#__PURE__*/ _jsx(ErrorMessage, {
+                id: errorMessageId,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+});
+Select.displayName = "Select";
+export { Select };
+
+//# sourceMappingURL=Select.js.map

package/dist/esm/src/components/Select/Select.js.map

@@ -0,0 +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":["classNames","forwardRef","useId","useLabel","spaceDelimitedList","ErrorMessage","Flex","Label","Select","props","ref","label","onChange","validationState","errorMessage","isDisabled","isRequired","otherProps","labelProps","fieldProps","stateClasses","wrapperClasses","className","selectClasses","labelClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","handleChange","e","flexDirection","div","select","multiple","disabled","aria-invalid","aria-describedby","aria-required","span","id","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAKEC,UAAU,EACVC,KAAK,QACA,QAAQ;AACf,SAAwBC,QAAQ,QAAQ,uBAAuB;AAG/D,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,KAAK,QAAQ,WAAW;AAsBjC,MAAMC,uBACJP,WAAW,CAACQ,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,GAAGhB,SAAS;QAC1CQ;QACA,GAAGM,UAAU;IACf;IAEA,MAAMG,eAAe;QACnB,iBAAiBL;QACjB,cAAcF,oBAAoB;QAClC,gBAAgBA,oBAAoB;QACpC,iBAAiB,OAAOG,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEA,MAAMK,iBAAiBrB,WACrB,wBACAoB,cACAH,WAAWK,SAAS;IAEtB,MAAMC,gBAAgBvB,WACpB,iBACAoB,cACAH,WAAWK,SAAS;IAEtB,MAAME,eAAexB,WACnB,gBACAoB,cACAH,WAAWK,SAAS;IAEtB,MAAMG,cAAczB,WAAW,qBAAqBoB;IACpD,MAAMM,iBAAiBxB;IACvB,MAAMyB,yBAAyBb,eAAeY,iBAAiBE;IAC/D,MAAMC,cAAczB,mBAAmB;QACrCuB;QACAlB,KAAK,CAAC,mBAAmB;KAC1B;IAED,MAAMqB,eAAe,CAACC;QACpB,IAAInB,UAAU;YACZA,SAASmB;QACX;IACF;IAEA,qBACE,MAACzB;QAAK0B,eAAc;QAASV,WAAU;;YACpCX,uBACC,KAACJ;gBAAO,GAAGW,UAAU;gBAAEI,WAAWE;0BAC/Bb;;0BAGL,MAACsB;gBAAIX,WAAWD;;kCACd,KAACa;wBACE,GAAGjB,UAAU;wBACb,GAAGE,UAAU;wBACdT,KAAKA;wBACLyB,UAAU;wBACVb,WAAWC;wBACXa,UAAUrB;wBACVsB,gBAAc,CAAC,CAACvB;wBAChBwB,oBAAkBT;wBAClBU,iBAAevB;wBACfJ,UAAUkB;;kCAEZ,KAACU;wBAAKlB,WAAWG;;;;YAElBX,8BACC,KAACT;gBAAaoC,IAAIf;gBAAgBZ,cAAcA;;;;AAIxD;AAEFN,OAAOkC,WAAW,GAAG;AACrB,SAASlC,MAAM,GAAG"}

package/dist/esm/src/components/Select/index.js

@@ -0,0 +1,3 @@
+export * from "./Select";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Select/index.tsx"],"sourcesContent":["export * from \"./Select\";\n"],"names":[],"mappings":"AAAA,cAAc,WAAW"}

package/dist/esm/src/components/Slider/Slider.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+import { useRef, useState } from "react";
+import { useLabel } from "../../hooks";
+import { Label } from "../Label";
+import { numberFormatter } from "./helpers";
+export const Slider = (props)=>{
+    const { id, className, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, minValue, maxValue, step = 1, defaultValue = 0, value, onChange, onChangeEnd, variant = "primary", minLabel, maxLabel, formatOptions, isDisabled = false } = props;
+    const trackRef = useRef(null);
+    const [currentValue, setCurrentValue] = useState(value || defaultValue || 0);
+    const [isDragging, setIsDraggging] = useState(false);
+    const { labelProps, fieldProps } = useLabel({
+        id,
+        label,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy
+    });
+    const formattedValue = numberFormatter(currentValue, formatOptions);
+    const classes = classNames("mobius", "mobius/Slider", className, {
+        "--is-disabled": isDisabled,
+        "--is-primary": variant === "primary",
+        "--is-secondary": variant === "secondary",
+        "--is-dragging": isDragging
+    });
+    const handleChange = (e)=>{
+        const val = +e.target.value;
+        setCurrentValue(val);
+        if (onChange) {
+            onChange(val);
+        }
+    };
+    const handleChangeStart = ()=>{
+        setIsDraggging(true);
+    };
+    const handleChangeEnd = ()=>{
+        setIsDraggging(false);
+        if (onChangeEnd) {
+            onChangeEnd(currentValue);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classes,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "mobius/SliderLabelWrapper",
+                children: [
+                    label && /*#__PURE__*/ _jsx(Label, {
+                        ...labelProps,
+                        children: label
+                    }),
+                    label && /*#__PURE__*/ _jsx("output", {
+                        style: {
+                            flex: "1 0 auto",
+                            textAlign: "end"
+                        },
+                        children: formattedValue
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                ref: trackRef,
+                className: "mobius mobius/SliderTrackWrapper",
+                children: /*#__PURE__*/ _jsx("input", {
+                    className: "mobius/SliderTrack",
+                    type: "range",
+                    min: minValue,
+                    max: maxValue,
+                    value: currentValue,
+                    step: step,
+                    onChange: handleChange,
+                    autoComplete: "off",
+                    disabled: isDisabled,
+                    onMouseDown: handleChangeStart,
+                    onMouseUp: handleChangeEnd,
+                    onKeyDown: handleChangeStart,
+                    onKeyUp: handleChangeEnd,
+                    ...fieldProps
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "mobius/SliderLabels",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "mobius/SliderMinLabel",
+                        "data-testid": "min-label",
+                        children: minLabel
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "mobius/SliderMaxLabel",
+                        "data-testid": "max-label",
+                        children: maxLabel
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=Slider.js.map

package/dist/esm/src/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { ChangeEvent, useRef, useState } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { UseLabelProps, useLabel } from \"../../hooks\";\nimport { Label } from \"../Label\";\nimport { numberFormatter } from \"./helpers\";\n\nexport interface SliderProps extends DOMProps, UseLabelProps {\n  label?: string;\n  variant?: \"primary\" | \"secondary\";\n  className?: string;\n  minValue?: number;\n  maxValue?: number;\n  defaultValue?: number;\n  value?: number;\n  step?: number;\n  isDisabled?: boolean;\n  onChange?: (value: number | undefined) => void;\n  onChangeEnd?: (value: number | undefined) => void;\n  minLabel?: string;\n  maxLabel?: string;\n  formatOptions?: Intl.NumberFormatOptions;\n}\n\nexport const Slider = (props: SliderProps) => {\n  const {\n    id,\n    className,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    minValue,\n    maxValue,\n    step = 1,\n    defaultValue = 0,\n    value,\n    onChange,\n    onChangeEnd,\n    variant = \"primary\",\n    minLabel,\n    maxLabel,\n    formatOptions,\n    isDisabled = false,\n  } = props;\n  const trackRef = useRef(null);\n  const [currentValue, setCurrentValue] = useState<number>(\n    value || defaultValue || 0,\n  );\n  const [isDragging, setIsDraggging] = useState<boolean>(false);\n  const { labelProps, fieldProps } = useLabel({\n    id,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n  });\n  const formattedValue = numberFormatter(currentValue, formatOptions);\n\n  const classes = classNames(\"mobius\", \"mobius/Slider\", className, {\n    \"--is-disabled\": isDisabled,\n    \"--is-primary\": variant === \"primary\",\n    \"--is-secondary\": variant === \"secondary\",\n    \"--is-dragging\": isDragging,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const val = +e.target.value;\n    setCurrentValue(val);\n    if (onChange) {\n      onChange(val);\n    }\n  };\n\n  const handleChangeStart = () => {\n    setIsDraggging(true);\n  };\n\n  const handleChangeEnd = () => {\n    setIsDraggging(false);\n    if (onChangeEnd) {\n      onChangeEnd(currentValue);\n    }\n  };\n\n  return (\n    <div className={classes}>\n      <div className=\"mobius/SliderLabelWrapper\">\n        {label && <Label {...labelProps}>{label}</Label>}\n        {label && (\n          <output style={{ flex: \"1 0 auto\", textAlign: \"end\" }}>\n            {formattedValue}\n          </output>\n        )}\n      </div>\n\n      {/* The track element holds the visible track line and the thumb. */}\n      <div ref={trackRef} className=\"mobius mobius/SliderTrackWrapper\">\n        <input\n          className=\"mobius/SliderTrack\"\n          type=\"range\"\n          min={minValue}\n          max={maxValue}\n          value={currentValue}\n          step={step}\n          onChange={handleChange}\n          autoComplete=\"off\"\n          disabled={isDisabled}\n          onMouseDown={handleChangeStart}\n          onMouseUp={handleChangeEnd}\n          onKeyDown={handleChangeStart}\n          onKeyUp={handleChangeEnd}\n          {...fieldProps}\n        />\n      </div>\n\n      <div className=\"mobius/SliderLabels\">\n        <div className=\"mobius/SliderMinLabel\" data-testid=\"min-label\">\n          {minLabel}\n        </div>\n        <div className=\"mobius/SliderMaxLabel\" data-testid=\"max-label\">\n          {maxLabel}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["classNames","useRef","useState","useLabel","Label","numberFormatter","Slider","props","id","className","label","ariaLabel","ariaLabelledBy","minValue","maxValue","step","defaultValue","value","onChange","onChangeEnd","variant","minLabel","maxLabel","formatOptions","isDisabled","trackRef","currentValue","setCurrentValue","isDragging","setIsDraggging","labelProps","fieldProps","formattedValue","classes","handleChange","e","val","target","handleChangeStart","handleChangeEnd","div","output","style","flex","textAlign","ref","input","type","min","max","autoComplete","disabled","onMouseDown","onMouseUp","onKeyDown","onKeyUp","data-testid"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAsBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEtD,SAAwBC,QAAQ,QAAQ,cAAc;AACtD,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,eAAe,QAAQ,YAAY;AAmB5C,OAAO,MAAMC,SAAS,CAACC;IACrB,MAAM,EACJC,EAAE,EACFC,SAAS,EACTC,KAAK,EACL,cAAcC,SAAS,EACvB,mBAAmBC,cAAc,EACjCC,QAAQ,EACRC,QAAQ,EACRC,OAAO,CAAC,EACRC,eAAe,CAAC,EAChBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,UAAU,SAAS,EACnBC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,KAAK,EACnB,GAAGjB;IACJ,MAAMkB,WAAWxB,OAAO;IACxB,MAAM,CAACyB,cAAcC,gBAAgB,GAAGzB,SACtCe,SAASD,gBAAgB;IAE3B,MAAM,CAACY,YAAYC,eAAe,GAAG3B,SAAkB;IACvD,MAAM,EAAE4B,UAAU,EAAEC,UAAU,EAAE,GAAG5B,SAAS;QAC1CK;QACAE;QACA,cAAcC;QACd,mBAAmBC;IACrB;IACA,MAAMoB,iBAAiB3B,gBAAgBqB,cAAcH;IAErD,MAAMU,UAAUjC,WAAW,UAAU,iBAAiBS,WAAW;QAC/D,iBAAiBe;QACjB,gBAAgBJ,YAAY;QAC5B,kBAAkBA,YAAY;QAC9B,iBAAiBQ;IACnB;IAEA,MAAMM,eAAe,CAACC;QACpB,MAAMC,MAAM,CAACD,EAAEE,MAAM,CAACpB,KAAK;QAC3BU,gBAAgBS;QAChB,IAAIlB,UAAU;YACZA,SAASkB;QACX;IACF;IAEA,MAAME,oBAAoB;QACxBT,eAAe;IACjB;IAEA,MAAMU,kBAAkB;QACtBV,eAAe;QACf,IAAIV,aAAa;YACfA,YAAYO;QACd;IACF;IAEA,qBACE,MAACc;QAAI/B,WAAWwB;;0BACd,MAACO;gBAAI/B,WAAU;;oBACZC,uBAAS,KAACN;wBAAO,GAAG0B,UAAU;kCAAGpB;;oBACjCA,uBACC,KAAC+B;wBAAOC,OAAO;4BAAEC,MAAM;4BAAYC,WAAW;wBAAM;kCACjDZ;;;;0BAMP,KAACQ;gBAAIK,KAAKpB;gBAAUhB,WAAU;0BAC5B,cAAA,KAACqC;oBACCrC,WAAU;oBACVsC,MAAK;oBACLC,KAAKnC;oBACLoC,KAAKnC;oBACLG,OAAOS;oBACPX,MAAMA;oBACNG,UAAUgB;oBACVgB,cAAa;oBACbC,UAAU3B;oBACV4B,aAAad;oBACbe,WAAWd;oBACXe,WAAWhB;oBACXiB,SAAShB;oBACR,GAAGR,UAAU;;;0BAIlB,MAACS;gBAAI/B,WAAU;;kCACb,KAAC+B;wBAAI/B,WAAU;wBAAwB+C,eAAY;kCAChDnC;;kCAEH,KAACmB;wBAAI/B,WAAU;wBAAwB+C,eAAY;kCAChDlC;;;;;;AAKX,EAAE"}

package/dist/esm/src/components/Slider/helpers.js

@@ -0,0 +1,35 @@
+import { useCallback, useMemo } from "react";
+export function unwrapFirstValue(value) {
+    if (Array.isArray(value)) {
+        return value[0];
+    }
+    return value;
+}
+export function wrapValue(value) {
+    return value === undefined ? undefined : [
+        value
+    ];
+}
+export function useUnwrappedHandler(handler) {
+    return useCallback((value)=>{
+        handler === null || handler === void 0 ? void 0 : handler(unwrapFirstValue(value));
+    }, [
+        handler
+    ]);
+}
+export function useWrappedValue(value) {
+    return useMemo(()=>wrapValue(value), [
+        value
+    ]);
+}
+export function numberFormatter(value, formatOptions, locale = (()=>{
+    var _navigator_languages;
+    return ((_navigator_languages = navigator.languages) === null || _navigator_languages === void 0 ? void 0 : _navigator_languages[0]) || "en-GB";
+})()) {
+    if (!formatOptions) {
+        return (value === null || value === void 0 ? void 0 : value.toString()) || "";
+    }
+    return new Intl.NumberFormat(locale, formatOptions).format(+(value || 0));
+}
+
+//# sourceMappingURL=helpers.js.map