@simplybusiness/mobius 4.16.1 → 5.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,10 +6,10 @@ import { chevronDown } from "@simplybusiness/icons";
 import { useLabel } from "../../hooks/useLabel";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
-import { Flex } from "../Flex";
 import { Label } from "../Label";
 import { useValidationClasses } from "../../hooks";
 import { Icon } from "../Icon";
+import { Stack } from "../Stack";
 const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { label, onChange, validationState, isInvalid, errorMessage, isDisabled = false, isRequired, ...otherProps } = props;
     const { labelProps, fieldProps } = useLabel({
@@ -26,10 +26,10 @@ const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
         "--is-optional": typeof isRequired === "boolean" && !isRequired
     };
     const sharedClasses = classNames(validationClasses, stateClasses);
-    const wrapperClasses = classNames("mobius/SelectWrapper", sharedClasses, otherProps.className);
-    const selectClasses = classNames("mobius/Select", sharedClasses, otherProps.className);
-    const labelClasses = classNames("mobius/Label", sharedClasses, otherProps.className);
-    const iconClasses = classNames("mobius/SelectIcon", sharedClasses);
+    const wrapperClasses = classNames("mobius-select__wrapper", sharedClasses, otherProps.className);
+    const selectClasses = classNames("mobius-select", sharedClasses, otherProps.className);
+    const labelClasses = classNames("mobius-label", sharedClasses, otherProps.className);
+    const iconClasses = classNames("mobius-select__icon", sharedClasses);
     const errorMessageId = useId();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = spaceDelimitedList([
@@ -41,9 +41,9 @@ const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
             onChange(e);
         }
     };
-    return /*#__PURE__*/ _jsxs(Flex, {
-        flexDirection: "column",
-        className: "mobius mobius/SelectOuter",
+    return /*#__PURE__*/ _jsxs(Stack, {
+        className: "mobius mobius-select__outer",
+        gap: "xs",
         children: [
             label && /*#__PURE__*/ _jsx(Label, {
                 ...labelProps,

package/dist/esm/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":["classNames","forwardRef","useId","chevronDown","useLabel","spaceDelimitedList","ErrorMessage","Flex","Label","useValidationClasses","Icon","Select","props","ref","label","onChange","validationState","isInvalid","errorMessage","isDisabled","isRequired","otherProps","labelProps","fieldProps","validationClasses","stateClasses","sharedClasses","wrapperClasses","className","selectClasses","labelClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","handleChange","e","flexDirection","div","select","multiple","disabled","aria-invalid","aria-describedby","aria-required","span","icon","id","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAKEC,UAAU,EACVC,KAAK,QACA,QAAQ;AACf,SAASC,WAAW,QAAQ,wBAAwB;AACpD,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;AAEjC,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,IAAI,QAAQ,UAAU;AAqB/B,MAAMC,uBACJV,WAAW,CAACW,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,GAAGnB,SAAS;QAC1CU;QACA,GAAGO,UAAU;IACf;IAEA,MAAMG,oBAAoBf,qBAAqB;QAC7CO;QACAC;IACF;IAEA,MAAMQ,eAAe;QACnB,iBAAiBN;QACjB,iBAAiB,OAAOC,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEA,MAAMM,gBAAgB1B,WAAWwB,mBAAmBC;IAEpD,MAAME,iBAAiB3B,WACrB,wBACA0B,eACAL,WAAWO,SAAS;IAEtB,MAAMC,gBAAgB7B,WACpB,iBACA0B,eACAL,WAAWO,SAAS;IAEtB,MAAME,eAAe9B,WACnB,gBACA0B,eACAL,WAAWO,SAAS;IAEtB,MAAMG,cAAc/B,WAAW,qBAAqB0B;IACpD,MAAMM,iBAAiB9B;IACvB,MAAM+B,yBAAyBf,eAAec,iBAAiBE;IAC/D,MAAMC,cAAc9B,mBAAmB;QACrC4B;QACArB,KAAK,CAAC,mBAAmB;KAC1B;IAED,MAAMwB,eAAe,CAACC;QACpB,IAAItB,UAAU;YACZA,SAASsB;QACX;IACF;IAEA,qBACE,MAAC9B;QAAK+B,eAAc;QAASV,WAAU;;YACpCd,uBACC,KAACN;gBAAO,GAAGc,UAAU;gBAAEM,WAAWE;0BAC/BhB;;0BAGL,MAACyB;gBAAIX,WAAWD;;kCACd,KAACa;wBACE,GAAGnB,UAAU;wBACb,GAAGE,UAAU;wBACdV,KAAKA;wBACL4B,UAAU;wBACVb,WAAWC;wBACXa,UAAUvB;wBACVwB,gBAAc,CAAC,CAACzB;wBAChB0B,oBAAkBT;wBAClBU,iBAAezB;wBACfL,UAAUqB;;kCAEZ,KAACU;wBAAKlB,WAAWG;kCACf,cAAA,KAACrB;4BAAKqC,MAAM5C;;;;;YAGfe,8BACC,KAACZ;gBAAa0C,IAAIhB;gBAAgBd,cAAcA;;;;AAIxD;AAEFP,OAAOsC,WAAW,GAAG;AACrB,SAAStC,MAAM,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":["classNames","forwardRef","useId","chevronDown","useLabel","spaceDelimitedList","ErrorMessage","Label","useValidationClasses","Icon","Stack","Select","props","ref","label","onChange","validationState","isInvalid","errorMessage","isDisabled","isRequired","otherProps","labelProps","fieldProps","validationClasses","stateClasses","sharedClasses","wrapperClasses","className","selectClasses","labelClasses","iconClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","handleChange","e","gap","div","select","multiple","disabled","aria-invalid","aria-describedby","aria-required","span","icon","id","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAKEC,UAAU,EACVC,KAAK,QACA,QAAQ;AACf,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAAwBC,QAAQ,QAAQ,uBAAuB;AAG/D,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AAEjC,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,KAAK,QAAQ,WAAW;AAqBjC,MAAMC,uBACJV,WAAW,CAACW,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,GAAGnB,SAAS;QAC1CU;QACA,GAAGO,UAAU;IACf;IAEA,MAAMG,oBAAoBhB,qBAAqB;QAC7CQ;QACAC;IACF;IAEA,MAAMQ,eAAe;QACnB,iBAAiBN;QACjB,iBAAiB,OAAOC,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;IACvD;IAEA,MAAMM,gBAAgB1B,WAAWwB,mBAAmBC;IAEpD,MAAME,iBAAiB3B,WACrB,0BACA0B,eACAL,WAAWO,SAAS;IAEtB,MAAMC,gBAAgB7B,WACpB,iBACA0B,eACAL,WAAWO,SAAS;IAEtB,MAAME,eAAe9B,WACnB,gBACA0B,eACAL,WAAWO,SAAS;IAEtB,MAAMG,cAAc/B,WAAW,uBAAuB0B;IACtD,MAAMM,iBAAiB9B;IACvB,MAAM+B,yBAAyBf,eAAec,iBAAiBE;IAC/D,MAAMC,cAAc9B,mBAAmB;QACrC4B;QACArB,KAAK,CAAC,mBAAmB;KAC1B;IAED,MAAMwB,eAAe,CAACC;QACpB,IAAItB,UAAU;YACZA,SAASsB;QACX;IACF;IAEA,qBACE,MAAC3B;QAAMkB,WAAU;QAA8BU,KAAI;;YAChDxB,uBACC,KAACP;gBAAO,GAAGe,UAAU;gBAAEM,WAAWE;0BAC/BhB;;0BAGL,MAACyB;gBAAIX,WAAWD;;kCACd,KAACa;wBACE,GAAGnB,UAAU;wBACb,GAAGE,UAAU;wBACdV,KAAKA;wBACL4B,UAAU;wBACVb,WAAWC;wBACXa,UAAUvB;wBACVwB,gBAAc,CAAC,CAACzB;wBAChB0B,oBAAkBT;wBAClBU,iBAAezB;wBACfL,UAAUqB;;kCAEZ,KAACU;wBAAKlB,WAAWG;kCACf,cAAA,KAACtB;4BAAKsC,MAAM5C;;;;;YAGfe,8BACC,KAACZ;gBAAa0C,IAAIhB;gBAAgBd,cAAcA;;;;AAIxD;AAEFP,OAAOsC,WAAW,GAAG;AACrB,SAAStC,MAAM,GAAG"}

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

@@ -17,7 +17,7 @@ export const Slider = (props)=>{
         "aria-labelledby": ariaLabelledBy
     });
     const formattedValue = numberFormatter(currentValue, formatOptions);
-    const classes = classNames("mobius", "mobius/Slider", className, {
+    const classes = classNames("mobius", "mobius-slider", className, {
         "--is-disabled": isDisabled,
         "--is-primary": variant === "primary",
         "--is-secondary": variant === "secondary",
@@ -43,7 +43,7 @@ export const Slider = (props)=>{
         className: classes,
         children: [
             /*#__PURE__*/ _jsxs("div", {
-                className: "mobius/SliderLabelWrapper",
+                className: "mobius-slider__label-wrapper",
                 children: [
                     label && /*#__PURE__*/ _jsx(Label, {
                         ...labelProps,
@@ -60,9 +60,9 @@ export const Slider = (props)=>{
             }),
             /*#__PURE__*/ _jsx("div", {
                 ref: trackRef,
-                className: "mobius mobius/SliderTrackWrapper",
+                className: "mobius-slider__track-wrapper",
                 children: /*#__PURE__*/ _jsx("input", {
-                    className: "mobius/SliderTrack",
+                    className: "mobius-slider__track",
                     type: "range",
                     min: minValue,
                     max: maxValue,
@@ -79,15 +79,15 @@ export const Slider = (props)=>{
                 })
             }),
             /*#__PURE__*/ _jsxs("div", {
-                className: "mobius/SliderLabels",
+                className: "mobius-slider__labels",
                 children: [
                     /*#__PURE__*/ _jsx("div", {
-                        className: "mobius/SliderMinLabel",
+                        className: "mobius-slider__min-label",
                         "data-testid": "min-label",
                         children: minLabel
                     }),
                     /*#__PURE__*/ _jsx("div", {
-                        className: "mobius/SliderMaxLabel",
+                        className: "mobius-slider__max-label",
                         "data-testid": "max-label",
                         children: maxLabel
                     })

package/dist/esm/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":["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"}
+{"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":["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;wBAA2B+C,eAAY;kCACnDnC;;kCAEH,KAACmB;wBAAI/B,WAAU;wBAA2B+C,eAAY;kCACnDlC;;;;;;AAKX,EAAE"}

package/dist/esm/components/Stack/Stack.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+export const Stack = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "div", gap, ...otherProps } = props;
+    const classes = classNames("mobius", "mobius-stack", {
+        [`--gap-${gap}`]: gap
+    }, otherProps.className);
+    return /*#__PURE__*/ _jsx(Element, {
+        ref: ref,
+        ...otherProps,
+        className: classes
+    });
+});
+
+//# sourceMappingURL=Stack.js.map

package/dist/esm/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":["React","forwardRef","classNames","Stack","props","ref","elementType","Element","gap","otherProps","classes","className"],"mappings":";AAAA,OAAOA,SAAcC,UAAU,QAAkC,QAAQ;AACzE,OAAOC,gBAAgB,oBAAoB;AAkB3C,OAAO,MAAMC,sBACXF,WAAW,CAACG,OAAmBC;IAC7B,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,GAAG,EAAE,GAAGC,YAAY,GAAGL;IAE7D,MAAMM,UAAUR,WACd,UACA,gBACA;QACE,CAAC,CAAC,MAAM,EAAEM,IAAI,CAAC,CAAC,EAAEA;IACpB,GACAC,WAAWE,SAAS;IAGtB,qBAAO,KAACJ;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEE,WAAWD;;AACvD,GAAG"}

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

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

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

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

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 const Body = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const classes = classNames("mobius", "mobius/TableBody", props.className);
+    const classes = classNames("mobius", "mobius-table__body", props.className);
     return /*#__PURE__*/ _jsx("tbody", {
         ref: ref,
         ...props,

package/dist/esm/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":["forwardRef","classNames","Body","props","ref","classes","className","tbody","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAU3C,MAAMC,qBACJF,WAAW,CAACG,OAAkBC;IAC5B,MAAMC,UAAUJ,WAAW,UAAU,oBAAoBE,MAAMG,SAAS;IAExE,qBAAO,KAACC;QAAMH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAChD;AAEFH,KAAKM,WAAW,GAAG;AACnB,SAASN,IAAI,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":["forwardRef","classNames","Body","props","ref","classes","className","tbody","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAU3C,MAAMC,qBACJF,WAAW,CAACG,OAAkBC;IAC5B,MAAMC,UAAUJ,WAAW,UAAU,sBAAsBE,MAAMG,SAAS;IAE1E,qBAAO,KAACC;QAAMH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAChD;AAEFH,KAAKM,WAAW,GAAG;AACnB,SAASN,IAAI,GAAG"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 const Cell = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const classes = classNames("mobius", "mobius/TableBodyCell", props.className);
+    const classes = classNames("mobius", "mobius-table__body-cell", props.className);
     return /*#__PURE__*/ _jsx("td", {
         ref: ref,
         ...props,

package/dist/esm/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":["forwardRef","classNames","Cell","props","ref","classes","className","td","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAY3C,MAAMC,qBAA+DF,WACnE,CAACG,OAAkBC;IACjB,MAAMC,UAAUJ,WACd,UACA,wBACAE,MAAMG,SAAS;IAGjB,qBAAO,KAACC;QAAGH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAC7C;AAGFH,KAAKM,WAAW,GAAG;AACnB,SAASN,IAAI,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":["forwardRef","classNames","Cell","props","ref","classes","className","td","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAY3C,MAAMC,qBAA+DF,WACnE,CAACG,OAAkBC;IACjB,MAAMC,UAAUJ,WACd,UACA,2BACAE,MAAMG,SAAS;IAGjB,qBAAO,KAACC;QAAGH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAC7C;AAGFH,KAAKM,WAAW,GAAG;AACnB,SAASN,IAAI,GAAG"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 const Foot = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const classes = classNames("mobius", "mobius/TableFoot", props.className);
+    const classes = classNames("mobius", "mobius-table__foot", props.className);
     return /*#__PURE__*/ _jsx("tfoot", {
         ref: ref,
         ...props,

package/dist/esm/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":["forwardRef","classNames","Foot","props","ref","classes","className","tfoot","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAU3C,MAAMC,qBACJF,WAAW,CAACG,OAAkBC;IAC5B,MAAMC,UAAUJ,WAAW,UAAU,oBAAoBE,MAAMG,SAAS;IAExE,qBAAO,KAACC;QAAMH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAChD;AAEFH,KAAKM,WAAW,GAAG;AACnB,SAASN,IAAI,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":["forwardRef","classNames","Foot","props","ref","classes","className","tfoot","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAU3C,MAAMC,qBACJF,WAAW,CAACG,OAAkBC;IAC5B,MAAMC,UAAUJ,WAAW,UAAU,sBAAsBE,MAAMG,SAAS;IAE1E,qBAAO,KAACC;QAAMH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAChD;AAEFH,KAAKM,WAAW,GAAG;AACnB,SAASN,IAAI,GAAG"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 const Head = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const classes = classNames("mobius", "mobius/TableHead", props.className);
+    const classes = classNames("mobius", "mobius-table__head", props.className);
     return /*#__PURE__*/ _jsx("thead", {
         ref: ref,
         ...props,

package/dist/esm/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":["forwardRef","classNames","Head","props","ref","classes","className","thead","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAU3C,MAAMC,qBACJF,WAAW,CAACG,OAAkBC;IAC5B,MAAMC,UAAUJ,WAAW,UAAU,oBAAoBE,MAAMG,SAAS;IAExE,qBAAO,KAACC;QAAMH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAChD;AAEFH,KAAKM,WAAW,GAAG;AACnB,SAASN,IAAI,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":["forwardRef","classNames","Head","props","ref","classes","className","thead","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAU3C,MAAMC,qBACJF,WAAW,CAACG,OAAkBC;IAC5B,MAAMC,UAAUJ,WAAW,UAAU,sBAAsBE,MAAMG,SAAS;IAE1E,qBAAO,KAACC;QAAMH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAChD;AAEFH,KAAKM,WAAW,GAAG;AACnB,SAASN,IAAI,GAAG"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 const HeaderCell = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const classes = classNames("mobius", "mobius/TableHeadCell", props.className);
+    const classes = classNames("mobius", "mobius-table__head-cell", props.className);
     return /*#__PURE__*/ _jsx("th", {
         ...props,
         ref: ref,

package/dist/esm/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":["forwardRef","classNames","HeaderCell","props","ref","classes","className","th","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAY3C,MAAMC,2BACJF,WAAW,CAACG,OAAwBC;IAClC,MAAMC,UAAUJ,WACd,UACA,wBACAE,MAAMG,SAAS;IAGjB,qBAAO,KAACC;QAAI,GAAGJ,KAAK;QAAEC,KAAKA;QAAKE,WAAWD;;AAC7C;AAEFH,WAAWM,WAAW,GAAG;AACzB,SAASN,UAAU,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":["forwardRef","classNames","HeaderCell","props","ref","classes","className","th","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAY3C,MAAMC,2BACJF,WAAW,CAACG,OAAwBC;IAClC,MAAMC,UAAUJ,WACd,UACA,2BACAE,MAAMG,SAAS;IAGjB,qBAAO,KAACC;QAAI,GAAGJ,KAAK;QAAEC,KAAKA;QAAKE,WAAWD;;AAC7C;AAEFH,WAAWM,WAAW,GAAG;AACzB,SAASN,UAAU,GAAG"}

package/dist/esm/components/Table/Row.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 const Row = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const classes = classNames("mobius", "mobius/TableRow", props.className);
+    const classes = classNames("mobius", "mobius-table__row", props.className);
     return /*#__PURE__*/ _jsx("tr", {
         ref: ref,
         ...props,

package/dist/esm/components/Table/Row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Table/Row.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface RowProps extends RefAttributes<HTMLTableRowElement> {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type RowRef = Ref<HTMLTableRowElement>;\n\nconst Row: ForwardedRefComponent<RowProps, HTMLTableRowElement> = forwardRef(\n  (props: RowProps, ref: RowRef) => {\n    const classes = classNames(\"mobius\", \"mobius/TableRow\", props.className);\n\n    return <tr ref={ref} {...props} className={classes} />;\n  },\n);\n\nRow.displayName = \"Table.Row\";\nexport { Row };\n"],"names":["forwardRef","classNames","Row","props","ref","classes","className","tr","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAU3C,MAAMC,oBAA4DF,WAChE,CAACG,OAAiBC;IAChB,MAAMC,UAAUJ,WAAW,UAAU,mBAAmBE,MAAMG,SAAS;IAEvE,qBAAO,KAACC;QAAGH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAC7C;AAGFH,IAAIM,WAAW,GAAG;AAClB,SAASN,GAAG,GAAG"}
+{"version":3,"sources":["../../../../src/components/Table/Row.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface RowProps extends RefAttributes<HTMLTableRowElement> {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type RowRef = Ref<HTMLTableRowElement>;\n\nconst Row: ForwardedRefComponent<RowProps, HTMLTableRowElement> = forwardRef(\n  (props: RowProps, ref: RowRef) => {\n    const classes = classNames(\"mobius\", \"mobius-table__row\", props.className);\n\n    return <tr ref={ref} {...props} className={classes} />;\n  },\n);\n\nRow.displayName = \"Table.Row\";\nexport { Row };\n"],"names":["forwardRef","classNames","Row","props","ref","classes","className","tr","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAU3C,MAAMC,oBAA4DF,WAChE,CAACG,OAAiBC;IAChB,MAAMC,UAAUJ,WAAW,UAAU,qBAAqBE,MAAMG,SAAS;IAEzE,qBAAO,KAACC;QAAGH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAC7C;AAGFH,IAAIM,WAAW,GAAG;AAClB,SAASN,GAAG,GAAG"}

package/dist/esm/components/Table/Table.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 const Table = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const classes = classNames("mobius", "mobius/Table", props.className);
+    const classes = classNames("mobius", "mobius-table", props.className);
     return /*#__PURE__*/ _jsx("table", {
         ref: ref,
         ...props,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type TableElementType = HTMLTableElement;\n\nexport interface TableProps extends DOMProps, RefAttributes<TableElementType> {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type TableRef = Ref<TableElementType>;\n\nconst Table: ForwardedRefComponent<TableProps, TableElementType> = forwardRef(\n  (props: TableProps, ref: TableRef) => {\n    const classes = classNames(\"mobius\", \"mobius/Table\", props.className);\n\n    return <table ref={ref} {...props} className={classes} />;\n  },\n);\n\nTable.displayName = \"Table\";\nexport { Table };\n"],"names":["forwardRef","classNames","Table","props","ref","classes","className","table","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAa3C,MAAMC,sBAA6DF,WACjE,CAACG,OAAmBC;IAClB,MAAMC,UAAUJ,WAAW,UAAU,gBAAgBE,MAAMG,SAAS;IAEpE,qBAAO,KAACC;QAAMH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAChD;AAGFH,MAAMM,WAAW,GAAG;AACpB,SAASN,KAAK,GAAG"}
+{"version":3,"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type TableElementType = HTMLTableElement;\n\nexport interface TableProps extends DOMProps, RefAttributes<TableElementType> {\n  children?: ReactNode;\n  className?: string;\n}\n\nexport type TableRef = Ref<TableElementType>;\n\nconst Table: ForwardedRefComponent<TableProps, TableElementType> = forwardRef(\n  (props: TableProps, ref: TableRef) => {\n    const classes = classNames(\"mobius\", \"mobius-table\", props.className);\n\n    return <table ref={ref} {...props} className={classes} />;\n  },\n);\n\nTable.displayName = \"Table\";\nexport { Table };\n"],"names":["forwardRef","classNames","Table","props","ref","classes","className","table","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAa3C,MAAMC,sBAA6DF,WACjE,CAACG,OAAmBC;IAClB,MAAMC,UAAUJ,WAAW,UAAU,gBAAgBE,MAAMG,SAAS;IAEpE,qBAAO,KAACC;QAAMH,KAAKA;QAAM,GAAGD,KAAK;QAAEG,WAAWD;;AAChD;AAGFH,MAAMM,WAAW,GAAG;AACpB,SAASN,KAAK,GAAG"}

package/dist/esm/components/Text/Text.js

@@ -18,8 +18,11 @@ const Text = /*#__PURE__*/ forwardRef(({ elementType: Component = "p", ...props
     // If a variant is supplied, set the class name and element type
     const elementType = getElementType(variant, Component);
     const variantType = variant || elementType;
-    const lineHeight = spacing ? `line-height-${spacing}` : "";
-    const classes = classNames("mobius", "mobius/Text", variantType, lineHeight, className);
+    const classes = classNames("mobius", "mobius-text", {
+        [`--is-${variantType}`]: variantType
+    }, {
+        [`--has-line-height-${spacing}`]: spacing
+    }, className);
     return /*#__PURE__*/ _jsx(Component, {
         ref: ref,
         ...otherProps,