@simplybusiness/mobius 4.16.0 → 5.0.0

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

@@ -16,6 +16,7 @@ const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
 const _ErrorMessage = require("../ErrorMessage");
 const _Label = require("../Label");
 const _hooks = require("../../hooks");
+const _Stack = require("../Stack");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -44,8 +45,8 @@ const RadioGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         [`--is-${orientation}`]: true,
         [className || ""]: true
     };
-    const radioGroupClasses = (0, _dedupe.default)("mobius", "mobius/RadioGroup", radioClasses, validationClasses);
-    const radioWrapperClasses = (0, _dedupe.default)("mobius/RadioWrapper", {
+    const radioGroupClasses = (0, _dedupe.default)("mobius", "mobius-radio-group", radioClasses, validationClasses);
+    const radioWrapperClasses = (0, _dedupe.default)("mobius-radio__wrapper", {
         [`--is-${orientation}`]: true
     });
     const labelClasses = (0, _dedupe.default)(radioClasses, validationClasses);
@@ -58,7 +59,7 @@ const RadioGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         props["aria-describedby"]
     ]);
     const labelId = (0, _react.useId)();
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         ...rest,
         "aria-describedby": describedBy,
         "aria-disabled": isDisabled,
@@ -72,36 +73,39 @@ const RadioGroup = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         ref: ref,
         className: radioGroupClasses,
         role: "radiogroup",
-        children: [
-            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
-                htmlFor: name,
-                id: labelId,
-                className: labelClasses,
-                children: label
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: radioWrapperClasses,
-                children: _react.Children.map(children, (child)=>{
-                    if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
-                        return /*#__PURE__*/ (0, _react.cloneElement)(child, {
-                            orientation,
-                            groupDisabled: isDisabled,
-                            name: nameAttribute,
-                            selected,
-                            setSelected,
-                            isRequired,
-                            "aria-describedby": describedBy,
-                            onChange
-                        });
-                    }
-                    return child;
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.Stack, {
+            gap: "xs",
+            children: [
+                label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
+                    htmlFor: name,
+                    id: labelId,
+                    className: labelClasses,
+                    children: label
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: radioWrapperClasses,
+                    children: _react.Children.map(children, (child)=>{
+                        if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
+                            return /*#__PURE__*/ (0, _react.cloneElement)(child, {
+                                orientation,
+                                groupDisabled: isDisabled,
+                                name: nameAttribute,
+                                selected,
+                                setSelected,
+                                isRequired,
+                                "aria-describedby": describedBy,
+                                onChange
+                            });
+                        }
+                        return child;
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorMessage.ErrorMessage, {
+                    id: errorMessageId,
+                    errorMessage: errorMessage
                 })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorMessage.ErrorMessage, {
-                id: errorMessageId,
-                errorMessage: errorMessage
-            })
-        ]
+            ]
+        })
     });
 });
 RadioGroup.displayName = "RadioGroup";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/RadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useId,\n  useState,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Validation } from \"../../types\";\nimport { useValidationClasses } from \"../../hooks\";\n\nexport type RadioGroupElementType = HTMLDivElement;\n\nexport interface RadioGroupProps\n  extends DOMProps,\n    Validation,\n    RefAttributes<RadioGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  errorMessage?: string;\n  // Callback that fires when select changes\n  onChange?: (event: HTMLElementEvent<HTMLInputElement>) => void;\n  // Defines a string value that labels the current element.\n  \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n  name?: string;\n}\n\nexport type RadioGroupRef = Ref<RadioGroupElementType>;\n\nconst getDefaultVal = (children: ReactNode, defaultValue?: string) => {\n  if (Array.isArray(children) && defaultValue) {\n    const option = children?.find(item => item.props.value === defaultValue);\n\n    if (!option) return \"\";\n\n    return option.props.value;\n  }\n\n  return \"\";\n};\n\nconst RadioGroup: ForwardedRefComponent<\n  RadioGroupProps,\n  RadioGroupElementType\n> = forwardRef((props: RadioGroupProps, ref: RadioGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    className,\n    errorMessage,\n    children,\n    defaultValue,\n    isReadOnly,\n    name,\n    onChange,\n    ...rest\n  } = props;\n  const defaultSelected = getDefaultVal(children, defaultValue);\n  const [selected, setSelected] = useState<string>(defaultSelected);\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const radioClasses = {\n    \"--is-disabled\": isDisabled,\n    \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n    \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    [`--is-${orientation}`]: true,\n    [className || \"\"]: true,\n  };\n  const radioGroupClasses = classNames(\n    \"mobius\",\n    \"mobius/RadioGroup\",\n    radioClasses,\n    validationClasses,\n  );\n  const radioWrapperClasses = classNames(\"mobius/RadioWrapper\", {\n    [`--is-${orientation}`]: true,\n  });\n  const labelClasses = classNames(radioClasses, validationClasses);\n  const errorMessageId = useId();\n  const defaultNameAttrId = useId();\n  const nameAttribute = name || defaultNameAttrId;\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  return (\n    <div\n      {...rest}\n      aria-describedby={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"],"mappings":"AAAA;;;;;+BA8KSA;;;eAAAA;;;;uBAjKF;+DACgB;oCAIY;8BACN;uBACP;uBAEe;;;;;;AA0CrC,MAAMC,gBAAgB,CAACC,UAAqBC;IAC1C,IAAIC,MAAMC,OAAO,CAACH,aAAaC,cAAc;QAC3C,MAAMG,SAASJ,qBAAAA,+BAAAA,SAAUK,IAAI,CAACC,CAAAA,OAAQA,KAAKC,KAAK,CAACC,KAAK,KAAKP;QAE3D,IAAI,CAACG,QAAQ,OAAO;QAEpB,OAAOA,OAAOG,KAAK,CAACC,KAAK;IAC3B;IAEA,OAAO;AACT;AAEA,MAAMV,2BAGFW,IAAAA,iBAAU,EAAC,CAACF,OAAwBG;IACtC,MAAM,EACJC,KAAK,EACLC,aAAa,KAAK,EAClBC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,cAAc,UAAU,EACxBC,SAAS,EACTC,YAAY,EACZlB,QAAQ,EACRC,YAAY,EACZkB,UAAU,EACVC,IAAI,EACJC,QAAQ,EACR,GAAGC,MACJ,GAAGf;IACJ,MAAMgB,kBAAkBxB,cAAcC,UAAUC;IAChD,MAAM,CAACuB,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAASH;IACjD,MAAMI,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7Cd;QACAC;IACF;IACA,MAAMc,eAAe;QACnB,iBAAiBjB;QACjB,iBAAiB,OAAOC,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;QACrD,CAAC,CAAC,KAAK,EAAEG,YAAY,CAAC,CAAC,EAAE;QACzB,CAACC,aAAa,GAAG,EAAE;IACrB;IACA,MAAMa,oBAAoBC,IAAAA,eAAU,EAClC,UACA,qBACAF,cACAF;IAEF,MAAMK,sBAAsBD,IAAAA,eAAU,EAAC,uBAAuB;QAC5D,CAAC,CAAC,KAAK,EAAEf,YAAY,CAAC,CAAC,EAAE;IAC3B;IACA,MAAMiB,eAAeF,IAAAA,eAAU,EAACF,cAAcF;IAC9C,MAAMO,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,oBAAoBD,IAAAA,YAAK;IAC/B,MAAME,gBAAgBjB,QAAQgB;IAC9B,MAAME,yBAAyBpB,eAAegB,iBAAiBK;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACA/B,KAAK,CAAC,mBAAmB;KAC1B;IACD,MAAMmC,UAAUP,IAAAA,YAAK;IAErB,qBACE,sBAACQ;QACE,GAAGrB,IAAI;QACRsB,oBAAkBJ;QAClBK,iBAAejC;QACfkC,qBAAmBR;QACnBS,gBAAchC;QACdiC,cAAYzC,KAAK,CAAC,aAAa;QAC/B0C,mBAAiB1C,KAAK,CAAC,kBAAkB,IAAImC;QAC7CQ,oBAAkBlC;QAClBmC,iBAAehC;QACfiC,iBAAevC;QACfH,KAAKA;QACLO,WAAWa;QACXuB,MAAK;;YAEJ1C,uBACC,qBAAC2C,YAAK;gBAACC,SAASnC;gBAAMoC,IAAId;gBAASzB,WAAWgB;0BAC3CtB;;0BAGL,qBAACgC;gBAAI1B,WAAWe;0BACbyB,eAAQ,CAACC,GAAG,CAAC1D,UAAU2D,CAAAA;oBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;wBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;4BACzC3C;4BACA8C,eAAelD;4BACfQ,MAAMiB;4BACNb;4BACAC;4BACAZ;4BACA,oBAAoB2B;4BACpBnB;wBACF;oBACF;oBAEA,OAAOsC;gBACT;;0BAEF,qBAACI,0BAAY;gBAACP,IAAItB;gBAAgBhB,cAAcA;;;;AAGtD;AAEApB,WAAWkE,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Radio/RadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useId,\n  useState,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Validation } from \"../../types\";\nimport { useValidationClasses } from \"../../hooks\";\nimport { Stack } from \"../Stack\";\n\nexport type RadioGroupElementType = HTMLDivElement;\n\nexport interface RadioGroupProps\n  extends DOMProps,\n    Validation,\n    RefAttributes<RadioGroupElementType> {\n  children: ReactNode;\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  errorMessage?: string;\n  // Callback that fires when select changes\n  onChange?: (event: HTMLElementEvent<HTMLInputElement>) => void;\n  // Defines a string value that labels the current element.\n  \"aria-label\"?: string;\n  // Identifies the element (or elements) that labels the current element.\n  \"aria-labelledby\"?: string;\n  // Identifies the element that provides an error message for the object.\n  \"aria-errormessage\"?: string;\n  // Identifies the element (or elements) that describes the object.\n  \"aria-describedby\"?: string;\n  // Whether user input is required on the input before form submission.\n  isRequired?: boolean;\n  // Whether the input is disabled.\n  isDisabled?: boolean;\n  // Whether the input can be selected but not changed by the user.\n  isReadOnly?: boolean;\n  // The default value (uncontrolled).\n  defaultValue?: string;\n  // The content to display as the label.\n  label?: ReactNode;\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value?: string;\n  name?: string;\n}\n\nexport type RadioGroupRef = Ref<RadioGroupElementType>;\n\nconst getDefaultVal = (children: ReactNode, defaultValue?: string) => {\n  if (Array.isArray(children) && defaultValue) {\n    const option = children?.find(item => item.props.value === defaultValue);\n\n    if (!option) return \"\";\n\n    return option.props.value;\n  }\n\n  return \"\";\n};\n\nconst RadioGroup: ForwardedRefComponent<\n  RadioGroupProps,\n  RadioGroupElementType\n> = forwardRef((props: RadioGroupProps, ref: RadioGroupRef) => {\n  const {\n    label,\n    isDisabled = false,\n    isRequired,\n    validationState,\n    isInvalid,\n    orientation = \"vertical\",\n    className,\n    errorMessage,\n    children,\n    defaultValue,\n    isReadOnly,\n    name,\n    onChange,\n    ...rest\n  } = props;\n  const defaultSelected = getDefaultVal(children, defaultValue);\n  const [selected, setSelected] = useState<string>(defaultSelected);\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n  const radioClasses = {\n    \"--is-disabled\": isDisabled,\n    \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n    \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    [`--is-${orientation}`]: true,\n    [className || \"\"]: true,\n  };\n  const radioGroupClasses = classNames(\n    \"mobius\",\n    \"mobius-radio-group\",\n    radioClasses,\n    validationClasses,\n  );\n  const radioWrapperClasses = classNames(\"mobius-radio__wrapper\", {\n    [`--is-${orientation}`]: true,\n  });\n  const labelClasses = classNames(radioClasses, validationClasses);\n  const errorMessageId = useId();\n  const defaultNameAttrId = useId();\n  const nameAttribute = name || defaultNameAttrId;\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    props[\"aria-describedby\"],\n  ]);\n  const labelId = useId();\n\n  return (\n    <div\n      {...rest}\n      aria-describedby={describedBy}\n      aria-disabled={isDisabled}\n      aria-errormessage={shouldErrorMessageShow}\n      aria-invalid={isInvalid}\n      aria-label={props[\"aria-label\"]}\n      aria-labelledby={props[\"aria-labelledby\"] || labelId}\n      aria-orientation={orientation}\n      aria-readonly={isReadOnly}\n      aria-required={isRequired}\n      ref={ref}\n      className={radioGroupClasses}\n      role=\"radiogroup\"\n    >\n      <Stack gap=\"xs\">\n        {label && (\n          <Label htmlFor={name} id={labelId} className={labelClasses}>\n            {label}\n          </Label>\n        )}\n        <div className={radioWrapperClasses}>\n          {Children.map(children, child => {\n            if (isValidElement(child)) {\n              return cloneElement(child as ReactElement, {\n                orientation,\n                groupDisabled: isDisabled,\n                name: nameAttribute,\n                selected,\n                setSelected,\n                isRequired,\n                \"aria-describedby\": describedBy,\n                onChange,\n              });\n            }\n\n            return child;\n          })}\n        </div>\n        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n      </Stack>\n    </div>\n  );\n});\n\nRadioGroup.displayName = \"RadioGroup\";\nexport { RadioGroup };\n"],"names":["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","Stack","gap","Label","htmlFor","id","Children","map","child","isValidElement","cloneElement","groupDisabled","ErrorMessage","displayName"],"mappings":"AAAA;;;;;+BAiLSA;;;eAAAA;;;;uBApKF;+DACgB;oCAIY;8BACN;uBACP;uBAEe;uBACf;;;;;;AA0CtB,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,sBACAF,cACAF;IAEF,MAAMK,sBAAsBD,IAAAA,eAAU,EAAC,yBAAyB;QAC9D,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,qBAACQ;QACE,GAAGrB,IAAI;QACRsB,oBAAkBJ;QAClBK,iBAAejC;QACfkC,qBAAmBR;QACnBS,gBAAchC;QACdiC,cAAYzC,KAAK,CAAC,aAAa;QAC/B0C,mBAAiB1C,KAAK,CAAC,kBAAkB,IAAImC;QAC7CQ,oBAAkBlC;QAClBmC,iBAAehC;QACfiC,iBAAevC;QACfH,KAAKA;QACLO,WAAWa;QACXuB,MAAK;kBAEL,cAAA,sBAACC,YAAK;YAACC,KAAI;;gBACR5C,uBACC,qBAAC6C,YAAK;oBAACC,SAASrC;oBAAMsC,IAAIhB;oBAASzB,WAAWgB;8BAC3CtB;;8BAGL,qBAACgC;oBAAI1B,WAAWe;8BACb2B,eAAQ,CAACC,GAAG,CAAC5D,UAAU6D,CAAAA;wBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;4BACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAuB;gCACzC7C;gCACAgD,eAAepD;gCACfQ,MAAMiB;gCACNb;gCACAC;gCACAZ;gCACA,oBAAoB2B;gCACpBnB;4BACF;wBACF;wBAEA,OAAOwC;oBACT;;8BAEF,qBAACI,0BAAY;oBAACP,IAAIxB;oBAAgBhB,cAAcA;;;;;AAIxD;AAEApB,WAAWoE,WAAW,GAAG"}

package/dist/cjs/components/SVG/SVG.js

@@ -18,7 +18,7 @@ function _interop_require_default(obj) {
 }
 const SVG = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { children, className, ...otherProps } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/SVG", className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-svg", className);
     const svgNode = _react.Children.only(children);
     // Remove originalType and mdxType props
     const { children: svgChildren, viewBox, xmlns } = svgNode.props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SVG/SVG.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {\n  children: React.ReactElement<React.SVGProps<SVGSVGElement>>;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport type SVGRef = Ref<SVGSVGElement>;\n\nconst SVG: ForwardedRefComponent<SVGProps, SVGSVGElement> = forwardRef(\n  (props: SVGProps, ref: SVGRef) => {\n    const { children, className, ...otherProps } = props;\n\n    const classes = classNames(\"mobius\", \"mobius/SVG\", className);\n    const svgNode = Children.only(children);\n    // Remove originalType and mdxType props\n    const { children: svgChildren, viewBox, xmlns } = svgNode.props;\n\n    return (\n      <svg\n        viewBox={viewBox}\n        xmlns={xmlns}\n        ref={ref}\n        {...otherProps}\n        className={classes}\n      >\n        {svgChildren}\n      </svg>\n    );\n  },\n);\n\nSVG.displayName = \"SVG\";\nexport { SVG };\n"],"names":["SVG","forwardRef","props","ref","children","className","otherProps","classes","classNames","svgNode","Children","only","svgChildren","viewBox","xmlns","svg","displayName"],"mappings":";;;;+BAqCSA;;;eAAAA;;;;uBArCgD;+DAClC;;;;;;AAYvB,MAAMA,oBAAsDC,IAAAA,iBAAU,EACpE,CAACC,OAAiBC;IAChB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,YAAY,GAAGJ;IAE/C,MAAMK,UAAUC,IAAAA,eAAU,EAAC,UAAU,cAAcH;IACnD,MAAMI,UAAUC,eAAQ,CAACC,IAAI,CAACP;IAC9B,wCAAwC;IACxC,MAAM,EAAEA,UAAUQ,WAAW,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGL,QAAQP,KAAK;IAE/D,qBACE,qBAACa;QACCF,SAASA;QACTC,OAAOA;QACPX,KAAKA;QACJ,GAAGG,UAAU;QACdD,WAAWE;kBAEVK;;AAGP;AAGFZ,IAAIgB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/SVG/SVG.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {\n  children: React.ReactElement<React.SVGProps<SVGSVGElement>>;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport type SVGRef = Ref<SVGSVGElement>;\n\nconst SVG: ForwardedRefComponent<SVGProps, SVGSVGElement> = forwardRef(\n  (props: SVGProps, ref: SVGRef) => {\n    const { children, className, ...otherProps } = props;\n\n    const classes = classNames(\"mobius\", \"mobius-svg\", className);\n    const svgNode = Children.only(children);\n    // Remove originalType and mdxType props\n    const { children: svgChildren, viewBox, xmlns } = svgNode.props;\n\n    return (\n      <svg\n        viewBox={viewBox}\n        xmlns={xmlns}\n        ref={ref}\n        {...otherProps}\n        className={classes}\n      >\n        {svgChildren}\n      </svg>\n    );\n  },\n);\n\nSVG.displayName = \"SVG\";\nexport { SVG };\n"],"names":["SVG","forwardRef","props","ref","children","className","otherProps","classes","classNames","svgNode","Children","only","svgChildren","viewBox","xmlns","svg","displayName"],"mappings":";;;;+BAqCSA;;;eAAAA;;;;uBArCgD;+DAClC;;;;;;AAYvB,MAAMA,oBAAsDC,IAAAA,iBAAU,EACpE,CAACC,OAAiBC;IAChB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,YAAY,GAAGJ;IAE/C,MAAMK,UAAUC,IAAAA,eAAU,EAAC,UAAU,cAAcH;IACnD,MAAMI,UAAUC,eAAQ,CAACC,IAAI,CAACP;IAC9B,wCAAwC;IACxC,MAAM,EAAEA,UAAUQ,WAAW,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGL,QAAQP,KAAK;IAE/D,qBACE,qBAACa;QACCF,SAASA;QACTC,OAAOA;QACPX,KAAKA;QACJ,GAAGG,UAAU;QACdD,WAAWE;kBAEVK;;AAGP;AAGFZ,IAAIgB,WAAW,GAAG"}

package/dist/cjs/components/Segment/Segment.js

@@ -17,7 +17,7 @@ function _interop_require_default(obj) {
 }
 const Segment = (props)=>{
     const { heading, children, colour, inverted, className, ...rest } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/Segment", colour, {
+    const classes = (0, _dedupe.default)("mobius", "mobius-segment", colour, {
         inverted
     }, className);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
@@ -25,7 +25,7 @@ const Segment = (props)=>{
         ...rest,
         children: [
             heading && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "mobius/SegmentHeading",
+                className: "mobius-segment__heading",
                 children: heading
             }),
             children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Segment/Segment.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface SegmentProps extends DOMProps {\n  className?: string;\n  heading?: string;\n  /** Background colour for Segment */\n  colour?: \"subtle\" | \"primary\" | \"secondary\";\n  /** When inverted, text is white.  Use on darker backgrounds. */\n  inverted?: boolean;\n  children?: ReactNode;\n}\n\nconst Segment = (props: SegmentProps) => {\n  const { heading, children, colour, inverted, className, ...rest } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/Segment\",\n    colour,\n    { inverted },\n    className,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {heading && <div className=\"mobius/SegmentHeading\">{heading}</div>}\n      {children}\n    </div>\n  );\n};\n\nSegment.displayName = \"Segment\";\nexport { Segment };\n"],"names":["Segment","props","heading","children","colour","inverted","className","rest","classes","classNames","div","displayName"],"mappings":";;;;+BAkCSA;;;eAAAA;;;;+DAjCc;;;;;;AAavB,MAAMA,UAAU,CAACC;IACf,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGN;IAEpE,MAAMO,UAAUC,IAAAA,eAAU,EACxB,UACA,kBACAL,QACA;QAAEC;IAAS,GACXC;IAGF,qBACE,sBAACI;QAAIJ,WAAWE;QAAU,GAAGD,IAAI;;YAC9BL,yBAAW,qBAACQ;gBAAIJ,WAAU;0BAAyBJ;;YACnDC;;;AAGP;AAEAH,QAAQW,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Segment/Segment.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface SegmentProps extends DOMProps {\n  className?: string;\n  heading?: string;\n  /** Background colour for Segment */\n  colour?: \"subtle\" | \"primary\" | \"secondary\";\n  /** When inverted, text is white.  Use on darker backgrounds. */\n  inverted?: boolean;\n  children?: ReactNode;\n}\n\nconst Segment = (props: SegmentProps) => {\n  const { heading, children, colour, inverted, className, ...rest } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-segment\",\n    colour,\n    { inverted },\n    className,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {heading && <div className=\"mobius-segment__heading\">{heading}</div>}\n      {children}\n    </div>\n  );\n};\n\nSegment.displayName = \"Segment\";\nexport { Segment };\n"],"names":["Segment","props","heading","children","colour","inverted","className","rest","classes","classNames","div","displayName"],"mappings":";;;;+BAkCSA;;;eAAAA;;;;+DAjCc;;;;;;AAavB,MAAMA,UAAU,CAACC;IACf,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGN;IAEpE,MAAMO,UAAUC,IAAAA,eAAU,EACxB,UACA,kBACAL,QACA;QAAEC;IAAS,GACXC;IAGF,qBACE,sBAACI;QAAIJ,WAAWE;QAAU,GAAGD,IAAI;;YAC9BL,yBAAW,qBAACQ;gBAAIJ,WAAU;0BAA2BJ;;YACrDC;;;AAGP;AAEAH,QAAQW,WAAW,GAAG"}

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

@@ -16,11 +16,11 @@ function _interop_require_default(obj) {
     };
 }
 const SegmentGroup = (props)=>{
-    const { children, horizontal, margin, className, ...rest } = props;
-    const marginClass = margin ? `margin-${margin}` : "";
-    const classes = (0, _dedupe.default)("mobius", "mobius/SegmentGroup", className, {
-        horizontal
-    }, marginClass);
+    const { children, horizontal, gap, className, ...rest } = props;
+    const gapClass = gap ? `gap-${gap}` : "";
+    const classes = (0, _dedupe.default)("mobius", "mobius-segment-group", className, {
+        "--is-horizontal": horizontal
+    }, gapClass);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: classes,
         ...rest,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Segment/SegmentGroup.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface SegmentGroupProps extends DOMProps {\n  className?: string;\n  horizontal?: boolean;\n  margin?: \"size-xs\" | \"size-s\" | \"size-m\" | \"size-l\" | \"size-xl\" | \"size-xxl\";\n  children?: ReactNode;\n}\n\nconst SegmentGroup = (props: SegmentGroupProps) => {\n  const { children, horizontal, margin, className, ...rest } = props;\n\n  const marginClass = margin ? `margin-${margin}` : \"\";\n  const classes = classNames(\n    \"mobius\",\n    \"mobius/SegmentGroup\",\n    className,\n    { horizontal },\n    marginClass,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nSegmentGroup.displayName = \"SegmentGroup\";\nexport { SegmentGroup };\n"],"names":["SegmentGroup","props","children","horizontal","margin","className","rest","marginClass","classes","classNames","div","displayName"],"mappings":";;;;+BA+BSA;;;eAAAA;;;;+DA9Bc;;;;;;AAUvB,MAAMA,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,UAAUC,IAAAA,eAAU,EACxB,UACA,uBACAJ,WACA;QAAEF;IAAW,GACbI;IAGF,qBACE,qBAACG;QAAIL,WAAWG;QAAU,GAAGF,IAAI;kBAC9BJ;;AAGP;AAEAF,aAAaW,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Segment/SegmentGroup.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport interface SegmentGroupProps extends DOMProps {\n  className?: string;\n  horizontal?: boolean;\n  gap?: \"size-xs\" | \"size-s\" | \"size-m\" | \"size-l\" | \"size-xl\" | \"size-xxl\";\n  children?: ReactNode;\n}\n\nconst SegmentGroup = (props: SegmentGroupProps) => {\n  const { children, horizontal, gap, className, ...rest } = props;\n\n  const gapClass = gap ? `gap-${gap}` : \"\";\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-segment-group\",\n    className,\n    { \"--is-horizontal\": horizontal },\n    gapClass,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nSegmentGroup.displayName = \"SegmentGroup\";\nexport { SegmentGroup };\n"],"names":["SegmentGroup","props","children","horizontal","gap","className","rest","gapClass","classes","classNames","div","displayName"],"mappings":";;;;+BA+BSA;;;eAAAA;;;;+DA9Bc;;;;;;AAUvB,MAAMA,eAAe,CAACC;IACpB,MAAM,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,GAAG,EAAEC,SAAS,EAAE,GAAGC,MAAM,GAAGL;IAE1D,MAAMM,WAAWH,MAAM,CAAC,IAAI,EAAEA,IAAI,CAAC,GAAG;IACtC,MAAMI,UAAUC,IAAAA,eAAU,EACxB,UACA,wBACAJ,WACA;QAAE,mBAAmBF;IAAW,GAChCI;IAGF,qBACE,qBAACG;QAAIL,WAAWG;QAAU,GAAGF,IAAI;kBAC9BJ;;AAGP;AAEAF,aAAaW,WAAW,GAAG"}

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

@@ -16,10 +16,10 @@ const _icons = require("@simplybusiness/icons");
 const _useLabel = require("../../hooks/useLabel");
 const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
 const _ErrorMessage = require("../ErrorMessage");
-const _Flex = require("../Flex");
 const _Label = require("../Label");
 const _hooks = require("../../hooks");
 const _Icon = require("../Icon");
+const _Stack = require("../Stack");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -41,10 +41,10 @@ const Select = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     };
     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 wrapperClasses = (0, _dedupe.default)("mobius-select__wrapper", 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-select__icon", sharedClasses);
     const errorMessageId = (0, _react.useId)();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = (0, _spaceDelimitedList.spaceDelimitedList)([
@@ -56,9 +56,9 @@ const Select = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             onChange(e);
         }
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Flex.Flex, {
-        flexDirection: "column",
-        className: "mobius mobius/SelectOuter",
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.Stack, {
+        className: "mobius mobius-select__outer",
+        gap: "xs",
         children: [
             label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
                 ...labelProps,

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

package/dist/cjs/components/Slider/Slider.js

@@ -32,7 +32,7 @@ const Slider = (props)=>{
         "aria-labelledby": ariaLabelledBy
     });
     const formattedValue = (0, _helpers.numberFormatter)(currentValue, formatOptions);
-    const classes = (0, _dedupe.default)("mobius", "mobius/Slider", className, {
+    const classes = (0, _dedupe.default)("mobius", "mobius-slider", className, {
         "--is-disabled": isDisabled,
         "--is-primary": variant === "primary",
         "--is-secondary": variant === "secondary",
@@ -58,7 +58,7 @@ const Slider = (props)=>{
         className: classes,
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "mobius/SliderLabelWrapper",
+                className: "mobius-slider__label-wrapper",
                 children: [
                     label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
                         ...labelProps,
@@ -75,9 +75,9 @@ const Slider = (props)=>{
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 ref: trackRef,
-                className: "mobius mobius/SliderTrackWrapper",
+                className: "mobius-slider__track-wrapper",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
-                    className: "mobius/SliderTrack",
+                    className: "mobius-slider__track",
                     type: "range",
                     min: minValue,
                     max: maxValue,
@@ -94,15 +94,15 @@ const Slider = (props)=>{
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "mobius/SliderLabels",
+                className: "mobius-slider__labels",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "mobius/SliderMinLabel",
+                        className: "mobius-slider__min-label",
                         "data-testid": "min-label",
                         children: minLabel
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "mobius/SliderMaxLabel",
+                        className: "mobius-slider__max-label",
                         "data-testid": "max-label",
                         children: maxLabel
                     })

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

@@ -1 +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":["Slider","props","id","className","label","ariaLabel","ariaLabelledBy","minValue","maxValue","step","defaultValue","value","onChange","onChangeEnd","variant","minLabel","maxLabel","formatOptions","isDisabled","trackRef","useRef","currentValue","setCurrentValue","useState","isDragging","setIsDraggging","labelProps","fieldProps","useLabel","formattedValue","numberFormatter","classes","classNames","handleChange","e","val","target","handleChangeStart","handleChangeEnd","div","Label","output","style","flex","textAlign","ref","input","type","min","max","autoComplete","disabled","onMouseDown","onMouseUp","onKeyDown","onKeyUp","data-testid"],"mappings":"AAAA;;;;;+BA0BaA;;;eAAAA;;;;+DAxBU;uBACuB;uBAEN;uBAClB;yBACU;;;;;;AAmBzB,MAAMA,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,WAAWC,IAAAA,aAAM,EAAC;IACxB,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,IAAAA,eAAQ,EAC9CZ,SAASD,gBAAgB;IAE3B,MAAM,CAACc,YAAYC,eAAe,GAAGF,IAAAA,eAAQ,EAAU;IACvD,MAAM,EAAEG,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,eAAQ,EAAC;QAC1C1B;QACAE;QACA,cAAcC;QACd,mBAAmBC;IACrB;IACA,MAAMuB,iBAAiBC,IAAAA,wBAAe,EAACT,cAAcJ;IAErD,MAAMc,UAAUC,IAAAA,eAAU,EAAC,UAAU,iBAAiB7B,WAAW;QAC/D,iBAAiBe;QACjB,gBAAgBJ,YAAY;QAC5B,kBAAkBA,YAAY;QAC9B,iBAAiBU;IACnB;IAEA,MAAMS,eAAe,CAACC;QACpB,MAAMC,MAAM,CAACD,EAAEE,MAAM,CAACzB,KAAK;QAC3BW,gBAAgBa;QAChB,IAAIvB,UAAU;YACZA,SAASuB;QACX;IACF;IAEA,MAAME,oBAAoB;QACxBZ,eAAe;IACjB;IAEA,MAAMa,kBAAkB;QACtBb,eAAe;QACf,IAAIZ,aAAa;YACfA,YAAYQ;QACd;IACF;IAEA,qBACE,sBAACkB;QAAIpC,WAAW4B;;0BACd,sBAACQ;gBAAIpC,WAAU;;oBACZC,uBAAS,qBAACoC,YAAK;wBAAE,GAAGd,UAAU;kCAAGtB;;oBACjCA,uBACC,qBAACqC;wBAAOC,OAAO;4BAAEC,MAAM;4BAAYC,WAAW;wBAAM;kCACjDf;;;;0BAMP,qBAACU;gBAAIM,KAAK1B;gBAAUhB,WAAU;0BAC5B,cAAA,qBAAC2C;oBACC3C,WAAU;oBACV4C,MAAK;oBACLC,KAAKzC;oBACL0C,KAAKzC;oBACLG,OAAOU;oBACPZ,MAAMA;oBACNG,UAAUqB;oBACViB,cAAa;oBACbC,UAAUjC;oBACVkC,aAAaf;oBACbgB,WAAWf;oBACXgB,WAAWjB;oBACXkB,SAASjB;oBACR,GAAGX,UAAU;;;0BAIlB,sBAACY;gBAAIpC,WAAU;;kCACb,qBAACoC;wBAAIpC,WAAU;wBAAwBqD,eAAY;kCAChDzC;;kCAEH,qBAACwB;wBAAIpC,WAAU;wBAAwBqD,eAAY;kCAChDxC;;;;;;AAKX"}
+{"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-slider__label-wrapper\">\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-slider__track-wrapper\">\n        <input\n          className=\"mobius-slider__track\"\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-slider__labels\">\n        <div className=\"mobius-slider__min-label\" data-testid=\"min-label\">\n          {minLabel}\n        </div>\n        <div className=\"mobius-slider__max-label\" data-testid=\"max-label\">\n          {maxLabel}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["Slider","props","id","className","label","ariaLabel","ariaLabelledBy","minValue","maxValue","step","defaultValue","value","onChange","onChangeEnd","variant","minLabel","maxLabel","formatOptions","isDisabled","trackRef","useRef","currentValue","setCurrentValue","useState","isDragging","setIsDraggging","labelProps","fieldProps","useLabel","formattedValue","numberFormatter","classes","classNames","handleChange","e","val","target","handleChangeStart","handleChangeEnd","div","Label","output","style","flex","textAlign","ref","input","type","min","max","autoComplete","disabled","onMouseDown","onMouseUp","onKeyDown","onKeyUp","data-testid"],"mappings":"AAAA;;;;;+BA0BaA;;;eAAAA;;;;+DAxBU;uBACuB;uBAEN;uBAClB;yBACU;;;;;;AAmBzB,MAAMA,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,WAAWC,IAAAA,aAAM,EAAC;IACxB,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,IAAAA,eAAQ,EAC9CZ,SAASD,gBAAgB;IAE3B,MAAM,CAACc,YAAYC,eAAe,GAAGF,IAAAA,eAAQ,EAAU;IACvD,MAAM,EAAEG,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,eAAQ,EAAC;QAC1C1B;QACAE;QACA,cAAcC;QACd,mBAAmBC;IACrB;IACA,MAAMuB,iBAAiBC,IAAAA,wBAAe,EAACT,cAAcJ;IAErD,MAAMc,UAAUC,IAAAA,eAAU,EAAC,UAAU,iBAAiB7B,WAAW;QAC/D,iBAAiBe;QACjB,gBAAgBJ,YAAY;QAC5B,kBAAkBA,YAAY;QAC9B,iBAAiBU;IACnB;IAEA,MAAMS,eAAe,CAACC;QACpB,MAAMC,MAAM,CAACD,EAAEE,MAAM,CAACzB,KAAK;QAC3BW,gBAAgBa;QAChB,IAAIvB,UAAU;YACZA,SAASuB;QACX;IACF;IAEA,MAAME,oBAAoB;QACxBZ,eAAe;IACjB;IAEA,MAAMa,kBAAkB;QACtBb,eAAe;QACf,IAAIZ,aAAa;YACfA,YAAYQ;QACd;IACF;IAEA,qBACE,sBAACkB;QAAIpC,WAAW4B;;0BACd,sBAACQ;gBAAIpC,WAAU;;oBACZC,uBAAS,qBAACoC,YAAK;wBAAE,GAAGd,UAAU;kCAAGtB;;oBACjCA,uBACC,qBAACqC;wBAAOC,OAAO;4BAAEC,MAAM;4BAAYC,WAAW;wBAAM;kCACjDf;;;;0BAMP,qBAACU;gBAAIM,KAAK1B;gBAAUhB,WAAU;0BAC5B,cAAA,qBAAC2C;oBACC3C,WAAU;oBACV4C,MAAK;oBACLC,KAAKzC;oBACL0C,KAAKzC;oBACLG,OAAOU;oBACPZ,MAAMA;oBACNG,UAAUqB;oBACViB,cAAa;oBACbC,UAAUjC;oBACVkC,aAAaf;oBACbgB,WAAWf;oBACXgB,WAAWjB;oBACXkB,SAASjB;oBACR,GAAGX,UAAU;;;0BAIlB,sBAACY;gBAAIpC,WAAU;;kCACb,qBAACoC;wBAAIpC,WAAU;wBAA2BqD,eAAY;kCACnDzC;;kCAEH,qBAACwB;wBAAIpC,WAAU;wBAA2BqD,eAAY;kCACnDxC;;;;;;AAKX"}

package/dist/cjs/components/Stack/Stack.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Stack", {
+    enumerable: true,
+    get: function() {
+        return Stack;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const Stack = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { elementType: Element = "div", gap, ...otherProps } = props;
+    const classes = (0, _dedupe.default)("mobius", "mobius-stack", {
+        [`--gap-${gap}`]: gap
+    }, otherProps.className);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {
+        ref: ref,
+        ...otherProps,
+        className: classes
+    });
+});
+
+//# sourceMappingURL=Stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React, { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport type { ForwardedRefComponent } from \"../../types/components\";\nimport { SpacingType } from \"../../types\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n  children?: ReactNode;\n  /** How big a gap between items */\n  gap?: SpacingType;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack: ForwardedRefComponent<StackProps, StackElementType> =\n  forwardRef((props: StackProps, ref: StackRef) => {\n    const { elementType: Element = \"div\", gap, ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius-stack\",\n      {\n        [`--gap-${gap}`]: gap,\n      },\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n"],"names":["Stack","forwardRef","props","ref","elementType","Element","gap","otherProps","classes","classNames","className"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;+DAnBoD;+DAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBhB,MAAMA,sBACXC,IAAAA,iBAAU,EAAC,CAACC,OAAmBC;IAC7B,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,GAAG,EAAE,GAAGC,YAAY,GAAGL;IAE7D,MAAMM,UAAUC,IAAAA,eAAU,EACxB,UACA,gBACA;QACE,CAAC,CAAC,MAAM,EAAEH,IAAI,CAAC,CAAC,EAAEA;IACpB,GACAC,WAAWG,SAAS;IAGtB,qBAAO,qBAACL;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEG,WAAWF;;AACvD"}

package/dist/cjs/components/Stack/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./Stack"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}
+
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Stack/index.js.map

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

package/dist/cjs/components/Table/Body.js

@@ -17,7 +17,7 @@ function _interop_require_default(obj) {
     };
 }
 const Body = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const classes = (0, _dedupe.default)("mobius", "mobius/TableBody", props.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-table__body", props.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("tbody", {
         ref: ref,
         ...props,

package/dist/cjs/components/Table/Body.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Table/Body.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface BodyProps extends RefAttributes<HTMLTableSectionElement> {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type BodyRef = Ref<HTMLTableSectionElement>;\n\nconst Body: ForwardedRefComponent<BodyProps, HTMLTableSectionElement> =\n  forwardRef((props: BodyProps, ref: BodyRef) => {\n    const classes = classNames(\"mobius\", \"mobius/TableBody\", props.className);\n\n    return <tbody ref={ref} {...props} className={classes} />;\n  });\n\nBody.displayName = \"Table.Body\";\nexport { Body };\n"],"names":["Body","forwardRef","props","ref","classes","classNames","className","tbody","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnBiD;+DACnC;;;;;;AAUvB,MAAMA,qBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAkBC;IAC5B,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,oBAAoBH,MAAMI,SAAS;IAExE,qBAAO,qBAACC;QAAMJ,KAAKA;QAAM,GAAGD,KAAK;QAAEI,WAAWF;;AAChD;AAEFJ,KAAKQ,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Table/Body.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface BodyProps extends RefAttributes<HTMLTableSectionElement> {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type BodyRef = Ref<HTMLTableSectionElement>;\n\nconst Body: ForwardedRefComponent<BodyProps, HTMLTableSectionElement> =\n  forwardRef((props: BodyProps, ref: BodyRef) => {\n    const classes = classNames(\"mobius\", \"mobius-table__body\", props.className);\n\n    return <tbody ref={ref} {...props} className={classes} />;\n  });\n\nBody.displayName = \"Table.Body\";\nexport { Body };\n"],"names":["Body","forwardRef","props","ref","classes","classNames","className","tbody","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnBiD;+DACnC;;;;;;AAUvB,MAAMA,qBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAkBC;IAC5B,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,sBAAsBH,MAAMI,SAAS;IAE1E,qBAAO,qBAACC;QAAMJ,KAAKA;QAAM,GAAGD,KAAK;QAAEI,WAAWF;;AAChD;AAEFJ,KAAKQ,WAAW,GAAG"}

package/dist/cjs/components/Table/Cell.js

@@ -17,7 +17,7 @@ function _interop_require_default(obj) {
     };
 }
 const Cell = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const classes = (0, _dedupe.default)("mobius", "mobius/TableBodyCell", props.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-table__body-cell", props.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
         ref: ref,
         ...props,

package/dist/cjs/components/Table/Cell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Table/Cell.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface CellProps extends RefAttributes<HTMLTableCellElement> {\n  children?: ReactNode;\n  className?: string;\n  colSpan?: number;\n  rowSpan?: number;\n}\n\nexport type CellRef = Ref<HTMLTableCellElement>;\n\nconst Cell: ForwardedRefComponent<CellProps, HTMLTableCellElement> = forwardRef(\n  (props: CellProps, ref: CellRef) => {\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/TableBodyCell\",\n      props.className,\n    );\n\n    return <td ref={ref} {...props} className={classes} />;\n  },\n);\n\nCell.displayName = \"Table.Cell\";\nexport { Cell };\n"],"names":["Cell","forwardRef","props","ref","classes","classNames","className","td","displayName"],"mappings":";;;;+BA0BSA;;;eAAAA;;;;uBA1BiD;+DACnC;;;;;;AAYvB,MAAMA,qBAA+DC,IAAAA,iBAAU,EAC7E,CAACC,OAAkBC;IACjB,MAAMC,UAAUC,IAAAA,eAAU,EACxB,UACA,wBACAH,MAAMI,SAAS;IAGjB,qBAAO,qBAACC;QAAGJ,KAAKA;QAAM,GAAGD,KAAK;QAAEI,WAAWF;;AAC7C;AAGFJ,KAAKQ,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Table/Cell.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface CellProps extends RefAttributes<HTMLTableCellElement> {\n  children?: ReactNode;\n  className?: string;\n  colSpan?: number;\n  rowSpan?: number;\n}\n\nexport type CellRef = Ref<HTMLTableCellElement>;\n\nconst Cell: ForwardedRefComponent<CellProps, HTMLTableCellElement> = forwardRef(\n  (props: CellProps, ref: CellRef) => {\n    const classes = classNames(\n      \"mobius\",\n      \"mobius-table__body-cell\",\n      props.className,\n    );\n\n    return <td ref={ref} {...props} className={classes} />;\n  },\n);\n\nCell.displayName = \"Table.Cell\";\nexport { Cell };\n"],"names":["Cell","forwardRef","props","ref","classes","classNames","className","td","displayName"],"mappings":";;;;+BA0BSA;;;eAAAA;;;;uBA1BiD;+DACnC;;;;;;AAYvB,MAAMA,qBAA+DC,IAAAA,iBAAU,EAC7E,CAACC,OAAkBC;IACjB,MAAMC,UAAUC,IAAAA,eAAU,EACxB,UACA,2BACAH,MAAMI,SAAS;IAGjB,qBAAO,qBAACC;QAAGJ,KAAKA;QAAM,GAAGD,KAAK;QAAEI,WAAWF;;AAC7C;AAGFJ,KAAKQ,WAAW,GAAG"}

package/dist/cjs/components/Table/Foot.js

@@ -17,7 +17,7 @@ function _interop_require_default(obj) {
     };
 }
 const Foot = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const classes = (0, _dedupe.default)("mobius", "mobius/TableFoot", props.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-table__foot", props.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("tfoot", {
         ref: ref,
         ...props,

package/dist/cjs/components/Table/Foot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Table/Foot.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface FootProps extends RefAttributes<HTMLTableSectionElement> {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type FootRef = Ref<HTMLTableSectionElement>;\n\nconst Foot: ForwardedRefComponent<FootProps, HTMLTableSectionElement> =\n  forwardRef((props: FootProps, ref: FootRef) => {\n    const classes = classNames(\"mobius\", \"mobius/TableFoot\", props.className);\n\n    return <tfoot ref={ref} {...props} className={classes} />;\n  });\n\nFoot.displayName = \"Table.Foot\";\nexport { Foot };\n"],"names":["Foot","forwardRef","props","ref","classes","classNames","className","tfoot","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnBiD;+DACnC;;;;;;AAUvB,MAAMA,qBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAkBC;IAC5B,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,oBAAoBH,MAAMI,SAAS;IAExE,qBAAO,qBAACC;QAAMJ,KAAKA;QAAM,GAAGD,KAAK;QAAEI,WAAWF;;AAChD;AAEFJ,KAAKQ,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Table/Foot.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface FootProps extends RefAttributes<HTMLTableSectionElement> {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type FootRef = Ref<HTMLTableSectionElement>;\n\nconst Foot: ForwardedRefComponent<FootProps, HTMLTableSectionElement> =\n  forwardRef((props: FootProps, ref: FootRef) => {\n    const classes = classNames(\"mobius\", \"mobius-table__foot\", props.className);\n\n    return <tfoot ref={ref} {...props} className={classes} />;\n  });\n\nFoot.displayName = \"Table.Foot\";\nexport { Foot };\n"],"names":["Foot","forwardRef","props","ref","classes","classNames","className","tfoot","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnBiD;+DACnC;;;;;;AAUvB,MAAMA,qBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAkBC;IAC5B,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,sBAAsBH,MAAMI,SAAS;IAE1E,qBAAO,qBAACC;QAAMJ,KAAKA;QAAM,GAAGD,KAAK;QAAEI,WAAWF;;AAChD;AAEFJ,KAAKQ,WAAW,GAAG"}

package/dist/cjs/components/Table/Head.js

@@ -17,7 +17,7 @@ function _interop_require_default(obj) {
     };
 }
 const Head = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const classes = (0, _dedupe.default)("mobius", "mobius/TableHead", props.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-table__head", props.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("thead", {
         ref: ref,
         ...props,

package/dist/cjs/components/Table/Head.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Table/Head.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface HeadProps extends RefAttributes<HTMLTableSectionElement> {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type HeadRef = Ref<HTMLTableSectionElement>;\n\nconst Head: ForwardedRefComponent<HeadProps, HTMLTableSectionElement> =\n  forwardRef((props: HeadProps, ref: HeadRef) => {\n    const classes = classNames(\"mobius\", \"mobius/TableHead\", props.className);\n\n    return <thead ref={ref} {...props} className={classes} />;\n  });\n\nHead.displayName = \"Table.Head\";\nexport { Head };\n"],"names":["Head","forwardRef","props","ref","classes","classNames","className","thead","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnBiD;+DACnC;;;;;;AAUvB,MAAMA,qBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAkBC;IAC5B,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,oBAAoBH,MAAMI,SAAS;IAExE,qBAAO,qBAACC;QAAMJ,KAAKA;QAAM,GAAGD,KAAK;QAAEI,WAAWF;;AAChD;AAEFJ,KAAKQ,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Table/Head.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface HeadProps extends RefAttributes<HTMLTableSectionElement> {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type HeadRef = Ref<HTMLTableSectionElement>;\n\nconst Head: ForwardedRefComponent<HeadProps, HTMLTableSectionElement> =\n  forwardRef((props: HeadProps, ref: HeadRef) => {\n    const classes = classNames(\"mobius\", \"mobius-table__head\", props.className);\n\n    return <thead ref={ref} {...props} className={classes} />;\n  });\n\nHead.displayName = \"Table.Head\";\nexport { Head };\n"],"names":["Head","forwardRef","props","ref","classes","classNames","className","thead","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnBiD;+DACnC;;;;;;AAUvB,MAAMA,qBACJC,IAAAA,iBAAU,EAAC,CAACC,OAAkBC;IAC5B,MAAMC,UAAUC,IAAAA,eAAU,EAAC,UAAU,sBAAsBH,MAAMI,SAAS;IAE1E,qBAAO,qBAACC;QAAMJ,KAAKA;QAAM,GAAGD,KAAK;QAAEI,WAAWF;;AAChD;AAEFJ,KAAKQ,WAAW,GAAG"}

package/dist/cjs/components/Table/HeaderCell.js

@@ -17,7 +17,7 @@ function _interop_require_default(obj) {
     };
 }
 const HeaderCell = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const classes = (0, _dedupe.default)("mobius", "mobius/TableHeadCell", props.className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-table__head-cell", props.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
         ...props,
         ref: ref,

package/dist/cjs/components/Table/HeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Table/HeaderCell.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface HeaderCellProps extends RefAttributes<HTMLTableCellElement> {\n  children?: ReactNode;\n  className?: string;\n  colSpan?: number;\n  rowSpan?: number;\n}\n\nexport type HeaderCellRef = Ref<HTMLTableCellElement>;\n\nconst HeaderCell: ForwardedRefComponent<HeaderCellProps, HTMLTableCellElement> =\n  forwardRef((props: HeaderCellProps, ref: HeaderCellRef) => {\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/TableHeadCell\",\n      props.className,\n    );\n\n    return <th {...props} ref={ref} className={classes} />;\n  });\n\nHeaderCell.displayName = \"Table.HeaderCell\";\nexport { HeaderCell };\n"],"names":["HeaderCell","forwardRef","props","ref","classes","classNames","className","th","displayName"],"mappings":";;;;+BAyBSA;;;eAAAA;;;;uBAzBiD;+DACnC;;;;;;AAYvB,MAAMA,2BACJC,IAAAA,iBAAU,EAAC,CAACC,OAAwBC;IAClC,MAAMC,UAAUC,IAAAA,eAAU,EACxB,UACA,wBACAH,MAAMI,SAAS;IAGjB,qBAAO,qBAACC;QAAI,GAAGL,KAAK;QAAEC,KAAKA;QAAKG,WAAWF;;AAC7C;AAEFJ,WAAWQ,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Table/HeaderCell.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface HeaderCellProps extends RefAttributes<HTMLTableCellElement> {\n  children?: ReactNode;\n  className?: string;\n  colSpan?: number;\n  rowSpan?: number;\n}\n\nexport type HeaderCellRef = Ref<HTMLTableCellElement>;\n\nconst HeaderCell: ForwardedRefComponent<HeaderCellProps, HTMLTableCellElement> =\n  forwardRef((props: HeaderCellProps, ref: HeaderCellRef) => {\n    const classes = classNames(\n      \"mobius\",\n      \"mobius-table__head-cell\",\n      props.className,\n    );\n\n    return <th {...props} ref={ref} className={classes} />;\n  });\n\nHeaderCell.displayName = \"Table.HeaderCell\";\nexport { HeaderCell };\n"],"names":["HeaderCell","forwardRef","props","ref","classes","classNames","className","th","displayName"],"mappings":";;;;+BAyBSA;;;eAAAA;;;;uBAzBiD;+DACnC;;;;;;AAYvB,MAAMA,2BACJC,IAAAA,iBAAU,EAAC,CAACC,OAAwBC;IAClC,MAAMC,UAAUC,IAAAA,eAAU,EACxB,UACA,2BACAH,MAAMI,SAAS;IAGjB,qBAAO,qBAACC;QAAI,GAAGL,KAAK;QAAEC,KAAKA;QAAKG,WAAWF;;AAC7C;AAEFJ,WAAWQ,WAAW,GAAG"}