@simplybusiness/mobius 4.6.4 → 4.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 4.7.0
+
+### Minor Changes
+
+- 22360de: Allow DropdownMenu.Item to be a component that inherits default CSS
+
+## 4.6.5
+
+### Patch Changes
+
+- cf617b8: Fix `<Button variant="secondary" isDisabled>` hover state; map `inverse`, `inverse-ghost` to alternatives
+
 ## 4.6.4
 
 ### Patch Changes

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

@@ -3,10 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "Button", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Button: function() {
         return Button;
+    },
+    VARIANT_DEPRECATION_WARNING: function() {
+        return VARIANT_DEPRECATION_WARNING;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -20,18 +28,30 @@ function _interop_require_default(obj) {
     };
 }
 let HAS_DEPRECATION_WARNING_SHOWN = false;
+const VARIANT_DEPRECATION_WARNING = "Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.";
 const Button = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "md", icon, iconPosition, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "md", // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onPress, // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onClick, ...otherProps } = props;
     const { buttonProps } = (0, _useButton.useButton)(props);
-    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {
+    if ((variant === "inverse" || variant === "inverse-ghost") && !HAS_DEPRECATION_WARNING_SHOWN) {
         // eslint-disable-next-line no-console
-        console.warn("icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.");
+        console.warn(VARIANT_DEPRECATION_WARNING);
         HAS_DEPRECATION_WARNING_SHOWN = true;
     }
+    // Map deprecated variants to alternative ones
+    const getVariant = (type)=>{
+        if (type === "inverse") {
+            return "basic";
+        }
+        if (type === "inverse-ghost") {
+            return "secondary";
+        }
+        return variant;
+    };
+    const buttonVariant = getVariant(variant);
     // Reshape class name and apply to outer element
-    const classes = (0, _dedupe.default)("mobius", "mobius/Button", `--variant-${variant}`, `--size-${size}`, {
+    const classes = (0, _dedupe.default)("mobius", "mobius/Button", `--variant-${buttonVariant}`, `--size-${size}`, {
         "--is-disabled": isDisabled,
         "--is-loading": isLoading,
         "--is-success": isSuccess && !isLoading

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  icon?: string;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  iconPosition?: \"left\" | \"right\";\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      icon,\n      iconPosition,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.\",\n      );\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${variant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["Button","HAS_DEPRECATION_WARNING_SHOWN","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","useButton","console","warn","classes","classNames","className","Loading","displayName"],"mappings":"AAAA;;;;;+BAsGSA;;;eAAAA;;;;uBApGiD;+DACnC;yBAGC;2BACkB;;;;;;AAE1C,IAAIC,gCAAgC;AA0CpC,MAAMD,uBACJE,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,IAAI,EACJC,YAAY,EACZ,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGd;IACJ,MAAM,EAAEe,WAAW,EAAE,GAAGC,IAAAA,oBAAS,EAAChB;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCmB,QAAQC,IAAI,CACV;QAEFpB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMqB,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEZ,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWO,SAAS;IAEtBP,WAAWO,SAAS,GAAGF;IAEvB,qBACE,qBAACf;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,qBAACgB,gBAAO,QAAMpB,YAAYA;;AAG7C;AAEFL,OAAO0B,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport const VARIANT_DEPRECATION_WARNING =\n  \"Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if (\n      (variant === \"inverse\" || variant === \"inverse-ghost\") &&\n      !HAS_DEPRECATION_WARNING_SHOWN\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(VARIANT_DEPRECATION_WARNING);\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Map deprecated variants to alternative ones\n    const getVariant = (type: Variant) => {\n      if (type === \"inverse\") {\n        return \"basic\";\n      }\n\n      if (type === \"inverse-ghost\") {\n        return \"secondary\";\n      }\n\n      return variant;\n    };\n\n    const buttonVariant = getVariant(variant);\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${buttonVariant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["Button","VARIANT_DEPRECATION_WARNING","HAS_DEPRECATION_WARNING_SHOWN","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","useButton","console","warn","getVariant","type","buttonVariant","classes","classNames","className","Loading","displayName"],"mappings":"AAAA;;;;;;;;;;;;IA+GSA,MAAM;eAANA;;IApGIC,2BAA2B;eAA3BA;;;;uBAT6C;+DACnC;yBAGC;2BACkB;;;;;;AAE1C,IAAIC,gCAAgC;AAE7B,MAAMD,8BACX;AAkCF,MAAMD,uBACJG,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACX,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGZ;IACJ,MAAM,EAAEa,WAAW,EAAE,GAAGC,IAAAA,oBAAS,EAACd;IAElC,IACE,AAACQ,CAAAA,YAAY,aAAaA,YAAY,eAAc,KACpD,CAACV,+BACD;QACA,sCAAsC;QACtCiB,QAAQC,IAAI,CAACnB;QACbC,gCAAgC;IAClC;IAEA,8CAA8C;IAC9C,MAAMmB,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOV;IACT;IAEA,MAAMW,gBAAgBF,WAAWT;IAEjC,gDAAgD;IAChD,MAAMY,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEF,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAEV,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWU,SAAS;IAEtBV,WAAWU,SAAS,GAAGF;IAEvB,qBACE,qBAAChB;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;kBACjDN,0BAAY,qBAACiB,gBAAO,QAAMrB,YAAYA;;AAG7C;AAEFN,OAAO4B,WAAW,GAAG"}

package/dist/cjs/components/DropdownMenu/Item.js

@@ -17,15 +17,26 @@ function _interop_require_default(obj) {
     };
 }
 const Item = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    const { elementType: Element = "li", active, onClick, ...otherProps } = props;
+    const { elementType: Element = "li", active, onClick, children, ...otherProps } = props;
     const classes = (0, _dedupe.default)("mobius", "mobius/DropdownMenuItem", {
         "--is-active": active
     }, otherProps.className);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {
         ref: ref,
-        className: classes,
         onClick: onClick,
-        ...otherProps
+        ...otherProps,
+        children: _react.Children.map(children, (child)=>{
+            if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
+                const childClasses = (0, _dedupe.default)(child.props.className, classes);
+                return /*#__PURE__*/ (0, _react.cloneElement)(child, {
+                    className: childClasses
+                });
+            }
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: classes,
+                children: child
+            });
+        })
     });
 });
 Item.displayName = "DropdownMenu.Item";

package/dist/cjs/components/DropdownMenu/Item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DropdownMenu/Item.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 ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n  elementType?: string | React.ElementType;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  active?: boolean;\n  children?: ReactNode;\n  onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(\n  (props: ItemProps, ref: ItemRef) => {\n    const {\n      elementType: Element = \"li\",\n      active,\n      onClick,\n      ...otherProps\n    } = props;\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/DropdownMenuItem\",\n      { \"--is-active\": active },\n      otherProps.className,\n    );\n\n    return (\n      <Element\n        ref={ref}\n        className={classes}\n        onClick={onClick}\n        {...otherProps}\n      />\n    );\n  },\n);\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],"names":["Item","forwardRef","props","ref","elementType","Element","active","onClick","otherProps","classes","classNames","className","displayName"],"mappings":";;;;+BA6CSA;;;eAAAA;;;;uBA7CiD;+DACnC;;;;;;AAiBvB,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,IAAI,EAC3BC,MAAM,EACNC,OAAO,EACP,GAAGC,YACJ,GAAGN;IACJ,MAAMO,UAAUC,IAAAA,eAAU,EACxB,UACA,2BACA;QAAE,eAAeJ;IAAO,GACxBE,WAAWG,SAAS;IAGtB,qBACE,qBAACN;QACCF,KAAKA;QACLQ,WAAWF;QACXF,SAASA;QACR,GAAGC,UAAU;;AAGpB;AAGFR,KAAKY,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/DropdownMenu/Item.tsx"],"sourcesContent":["import {\n  Ref,\n  forwardRef,\n  RefAttributes,\n  ReactNode,\n  cloneElement,\n  ReactElement,\n  isValidElement,\n  Children,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n  elementType?: string | React.ElementType;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  active?: boolean;\n  children?: ReactNode;\n  onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(\n  (props: ItemProps, ref: ItemRef) => {\n    const {\n      elementType: Element = \"li\",\n      active,\n      onClick,\n      children,\n      ...otherProps\n    } = props;\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/DropdownMenuItem\",\n      { \"--is-active\": active },\n      otherProps.className,\n    );\n\n    return (\n      <Element ref={ref} onClick={onClick} {...otherProps}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            const childClasses = classNames(child.props.className, classes);\n            return cloneElement(child as ReactElement, {\n              className: childClasses,\n            });\n          }\n\n          return <span className={classes}>{child}</span>;\n        })}\n      </Element>\n    );\n  },\n);\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],"names":["Item","forwardRef","props","ref","elementType","Element","active","onClick","children","otherProps","classes","classNames","className","Children","map","child","isValidElement","childClasses","cloneElement","span","displayName"],"mappings":";;;;+BA6DSA;;;eAAAA;;;;uBApDF;+DACgB;;;;;;AAiBvB,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,IAAI,EAC3BC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAMQ,UAAUC,IAAAA,eAAU,EACxB,UACA,2BACA;QAAE,eAAeL;IAAO,GACxBG,WAAWG,SAAS;IAGtB,qBACE,qBAACP;QAAQF,KAAKA;QAAKI,SAASA;QAAU,GAAGE,UAAU;kBAChDI,eAAQ,CAACC,GAAG,CAACN,UAAUO,CAAAA;YACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;gBACzB,MAAME,eAAeN,IAAAA,eAAU,EAACI,MAAMb,KAAK,CAACU,SAAS,EAAEF;gBACvD,qBAAOQ,IAAAA,mBAAY,EAACH,OAAuB;oBACzCH,WAAWK;gBACb;YACF;YAEA,qBAAO,qBAACE;gBAAKP,WAAWF;0BAAUK;;QACpC;;AAGN;AAGFf,KAAKoB,WAAW,GAAG"}

package/dist/esm/components/Button/Button.js

@@ -5,18 +5,30 @@ import classNames from "classnames/dedupe";
 import { Loading } from "./Loading";
 import { useButton } from "../../hooks/useButton";
 let HAS_DEPRECATION_WARNING_SHOWN = false;
+export const VARIANT_DEPRECATION_WARNING = "Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.";
 const Button = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "md", icon, iconPosition, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "md", // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onPress, // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onClick, ...otherProps } = props;
     const { buttonProps } = useButton(props);
-    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {
+    if ((variant === "inverse" || variant === "inverse-ghost") && !HAS_DEPRECATION_WARNING_SHOWN) {
         // eslint-disable-next-line no-console
-        console.warn("icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.");
+        console.warn(VARIANT_DEPRECATION_WARNING);
         HAS_DEPRECATION_WARNING_SHOWN = true;
     }
+    // Map deprecated variants to alternative ones
+    const getVariant = (type)=>{
+        if (type === "inverse") {
+            return "basic";
+        }
+        if (type === "inverse-ghost") {
+            return "secondary";
+        }
+        return variant;
+    };
+    const buttonVariant = getVariant(variant);
     // Reshape class name and apply to outer element
-    const classes = classNames("mobius", "mobius/Button", `--variant-${variant}`, `--size-${size}`, {
+    const classes = classNames("mobius", "mobius/Button", `--variant-${buttonVariant}`, `--size-${size}`, {
         "--is-disabled": isDisabled,
         "--is-loading": isLoading,
         "--is-success": isSuccess && !isLoading

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  icon?: string;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  iconPosition?: \"left\" | \"right\";\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      icon,\n      iconPosition,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.\",\n      );\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${variant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["forwardRef","classNames","Loading","useButton","HAS_DEPRECATION_WARNING_SHOWN","Button","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","console","warn","classes","className","displayName"],"mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAAyBC,SAAS,QAAQ,wBAAwB;AAElE,IAAIC,gCAAgC;AA0CpC,MAAMC,uBACJL,WAAW,CAACM,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,IAAI,EACJC,YAAY,EACZ,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGd;IACJ,MAAM,EAAEe,WAAW,EAAE,GAAGlB,UAAUG;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCkB,QAAQC,IAAI,CACV;QAEFnB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMoB,UAAUvB,WACd,UACA,iBACA,CAAC,UAAU,EAAEa,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWK,SAAS;IAEtBL,WAAWK,SAAS,GAAGD;IAEvB,qBACE,KAACd;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,KAACV,eAAaM,YAAYA;;AAG7C;AAEFH,OAAOqB,WAAW,GAAG;AACrB,SAASrB,MAAM,GAAG"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport const VARIANT_DEPRECATION_WARNING =\n  \"Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if (\n      (variant === \"inverse\" || variant === \"inverse-ghost\") &&\n      !HAS_DEPRECATION_WARNING_SHOWN\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(VARIANT_DEPRECATION_WARNING);\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Map deprecated variants to alternative ones\n    const getVariant = (type: Variant) => {\n      if (type === \"inverse\") {\n        return \"basic\";\n      }\n\n      if (type === \"inverse-ghost\") {\n        return \"secondary\";\n      }\n\n      return variant;\n    };\n\n    const buttonVariant = getVariant(variant);\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${buttonVariant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["forwardRef","classNames","Loading","useButton","HAS_DEPRECATION_WARNING_SHOWN","VARIANT_DEPRECATION_WARNING","Button","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","onPress","onClick","otherProps","buttonProps","console","warn","getVariant","type","buttonVariant","classes","className","displayName"],"mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAAyBC,SAAS,QAAQ,wBAAwB;AAElE,IAAIC,gCAAgC;AAEpC,OAAO,MAAMC,8BACX,uHAAuH;AAkCzH,MAAMC,uBACJN,WAAW,CAACO,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACX,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGZ;IACJ,MAAM,EAAEa,WAAW,EAAE,GAAGjB,UAAUI;IAElC,IACE,AAACQ,CAAAA,YAAY,aAAaA,YAAY,eAAc,KACpD,CAACX,+BACD;QACA,sCAAsC;QACtCiB,QAAQC,IAAI,CAACjB;QACbD,gCAAgC;IAClC;IAEA,8CAA8C;IAC9C,MAAMmB,aAAa,CAACC;QAClB,IAAIA,SAAS,WAAW;YACtB,OAAO;QACT;QAEA,IAAIA,SAAS,iBAAiB;YAC5B,OAAO;QACT;QAEA,OAAOT;IACT;IAEA,MAAMU,gBAAgBF,WAAWR;IAEjC,gDAAgD;IAChD,MAAMW,UAAUzB,WACd,UACA,iBACA,CAAC,UAAU,EAAEwB,cAAc,CAAC,EAC5B,CAAC,OAAO,EAAET,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAM,WAAWQ,SAAS;IAEtBR,WAAWQ,SAAS,GAAGD;IAEvB,qBACE,KAACf;QAAUH,KAAKA;QAAM,GAAGY,WAAW;QAAG,GAAGD,UAAU;kBACjDN,0BAAY,KAACX,eAAaO,YAAYA;;AAG7C;AAEFH,OAAOsB,WAAW,GAAG;AACrB,SAAStB,MAAM,GAAG"}

package/dist/esm/components/DropdownMenu/Item.js

@@ -1,16 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, cloneElement, isValidElement, Children } from "react";
 import classNames from "classnames/dedupe";
 const Item = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { elementType: Element = "li", active, onClick, ...otherProps } = props;
+    const { elementType: Element = "li", active, onClick, children, ...otherProps } = props;
     const classes = classNames("mobius", "mobius/DropdownMenuItem", {
         "--is-active": active
     }, otherProps.className);
     return /*#__PURE__*/ _jsx(Element, {
         ref: ref,
-        className: classes,
         onClick: onClick,
-        ...otherProps
+        ...otherProps,
+        children: Children.map(children, (child)=>{
+            if (/*#__PURE__*/ isValidElement(child)) {
+                const childClasses = classNames(child.props.className, classes);
+                return /*#__PURE__*/ cloneElement(child, {
+                    className: childClasses
+                });
+            }
+            return /*#__PURE__*/ _jsx("span", {
+                className: classes,
+                children: child
+            });
+        })
     });
 });
 Item.displayName = "DropdownMenu.Item";

package/dist/esm/components/DropdownMenu/Item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DropdownMenu/Item.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 ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n  elementType?: string | React.ElementType;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  active?: boolean;\n  children?: ReactNode;\n  onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(\n  (props: ItemProps, ref: ItemRef) => {\n    const {\n      elementType: Element = \"li\",\n      active,\n      onClick,\n      ...otherProps\n    } = props;\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/DropdownMenuItem\",\n      { \"--is-active\": active },\n      otherProps.className,\n    );\n\n    return (\n      <Element\n        ref={ref}\n        className={classes}\n        onClick={onClick}\n        {...otherProps}\n      />\n    );\n  },\n);\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],"names":["forwardRef","classNames","Item","props","ref","elementType","Element","active","onClick","otherProps","classes","className","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAiB3C,MAAMC,qBAA0DF,WAC9D,CAACG,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,IAAI,EAC3BC,MAAM,EACNC,OAAO,EACP,GAAGC,YACJ,GAAGN;IACJ,MAAMO,UAAUT,WACd,UACA,2BACA;QAAE,eAAeM;IAAO,GACxBE,WAAWE,SAAS;IAGtB,qBACE,KAACL;QACCF,KAAKA;QACLO,WAAWD;QACXF,SAASA;QACR,GAAGC,UAAU;;AAGpB;AAGFP,KAAKU,WAAW,GAAG;AACnB,SAASV,IAAI,GAAG"}
+{"version":3,"sources":["../../../../src/components/DropdownMenu/Item.tsx"],"sourcesContent":["import {\n  Ref,\n  forwardRef,\n  RefAttributes,\n  ReactNode,\n  cloneElement,\n  ReactElement,\n  isValidElement,\n  Children,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n  elementType?: string | React.ElementType;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  active?: boolean;\n  children?: ReactNode;\n  onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(\n  (props: ItemProps, ref: ItemRef) => {\n    const {\n      elementType: Element = \"li\",\n      active,\n      onClick,\n      children,\n      ...otherProps\n    } = props;\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/DropdownMenuItem\",\n      { \"--is-active\": active },\n      otherProps.className,\n    );\n\n    return (\n      <Element ref={ref} onClick={onClick} {...otherProps}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            const childClasses = classNames(child.props.className, classes);\n            return cloneElement(child as ReactElement, {\n              className: childClasses,\n            });\n          }\n\n          return <span className={classes}>{child}</span>;\n        })}\n      </Element>\n    );\n  },\n);\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],"names":["forwardRef","cloneElement","isValidElement","Children","classNames","Item","props","ref","elementType","Element","active","onClick","children","otherProps","classes","className","map","child","childClasses","span","displayName"],"mappings":";AAAA,SAEEA,UAAU,EAGVC,YAAY,EAEZC,cAAc,EACdC,QAAQ,QACH,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAiB3C,MAAMC,qBAA0DL,WAC9D,CAACM,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,IAAI,EAC3BC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACR,GAAGC,YACJ,GAAGP;IACJ,MAAMQ,UAAUV,WACd,UACA,2BACA;QAAE,eAAeM;IAAO,GACxBG,WAAWE,SAAS;IAGtB,qBACE,KAACN;QAAQF,KAAKA;QAAKI,SAASA;QAAU,GAAGE,UAAU;kBAChDV,SAASa,GAAG,CAACJ,UAAUK,CAAAA;YACtB,kBAAIf,eAAee,QAAQ;gBACzB,MAAMC,eAAed,WAAWa,MAAMX,KAAK,CAACS,SAAS,EAAED;gBACvD,qBAAOb,aAAagB,OAAuB;oBACzCF,WAAWG;gBACb;YACF;YAEA,qBAAO,KAACC;gBAAKJ,WAAWD;0BAAUG;;QACpC;;AAGN;AAGFZ,KAAKe,WAAW,GAAG;AACnB,SAASf,IAAI,GAAG"}

package/dist/types/components/Button/Button.d.ts

@@ -2,6 +2,7 @@ import { Ref, RefAttributes, ReactNode } from "react";
 import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
 import { UseButtonProps } from "../../hooks/useButton";
+export declare const VARIANT_DEPRECATION_WARNING = "Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.";
 export type ButtonElementType = HTMLButtonElement;
 export type Variant = "primary" | "secondary" | "ghost" | "inverse" | "inverse-ghost" | "basic" | "link";
 export type Size = "sm" | "md" | "lg";
@@ -16,14 +17,6 @@ export interface ButtonProps extends UseButtonProps, DOMProps, RefAttributes<But
     /** Display success style */
     isSuccess?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * **Deprecated:** Please pass icon as part of component's children instead.
-     */
-    icon?: string;
-    /**
-     * **Deprecated:** Please pass icon as part of component's children instead.
-     */
-    iconPosition?: "left" | "right";
     children?: ReactNode;
 }
 export type ButtonRef = Ref<ButtonElementType>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.6.4",
+  "version": "4.7.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Button/Button.mdx

@@ -234,8 +234,6 @@ Class names are augmented with the following flags if true:
 - \--variant-primary
 - \--variant-secondary
 - \--variant-ghost
-- \--variant-inverse
-- \--variant-inverse-ghost
 - \--variant-basic
 
 ---

package/src/components/Button/Button.stories.tsx

@@ -48,7 +48,7 @@ const meta: Meta<typeof Button> = {
         neq: "a",
       },
     },
-    ...excludeControls("role", "icon", "iconPosition", "children"),
+    ...excludeControls("role", "children"),
   },
 };
 

package/src/components/Button/Button.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { chevronDown } from "@simplybusiness/icons";
 import { Icon } from "../Icon";
-import { Button } from ".";
+import { Button, VARIANT_DEPRECATION_WARNING } from ".";
 
 const CLASS_NAME = "mobius/Button";
 
@@ -115,4 +115,22 @@ describe("Button", () => {
       expect(button).toHaveClass("--variant-link");
     });
   });
+
+  describe("given the use of deprecated variants", () => {
+    it("warns the user", () => {
+      const warn = jest.spyOn(console, "warn");
+      render(<Button variant="inverse" />);
+      expect(warn).toHaveBeenCalledWith(VARIANT_DEPRECATION_WARNING);
+    });
+
+    it("maps 'inverse' to 'basic'", () => {
+      render(<Button variant="inverse" />);
+      expect(screen.getByRole("button")).toHaveClass("--variant-basic");
+    });
+
+    it("maps 'inverse-ghost' to 'secondary'", () => {
+      render(<Button variant="inverse-ghost" />);
+      expect(screen.getByRole("button")).toHaveClass("--variant-secondary");
+    });
+  });
 });

package/src/components/Button/Button.tsx

@@ -9,6 +9,9 @@ import { UseButtonProps, useButton } from "../../hooks/useButton";
 
 let HAS_DEPRECATION_WARNING_SHOWN = false;
 
+export const VARIANT_DEPRECATION_WARNING =
+  "Deprecated <Button> variants detected. For `inverse`, please use `basic`, for `inverse-ghost` - `secondary` instead.";
+
 export type ButtonElementType = HTMLButtonElement;
 
 export type Variant =
@@ -36,14 +39,6 @@ export interface ButtonProps
   /** Display success style */
   isSuccess?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  /**
-   * **Deprecated:** Please pass icon as part of component's children instead.
-   */
-  icon?: string;
-  /**
-   * **Deprecated:** Please pass icon as part of component's children instead.
-   */
-  iconPosition?: "left" | "right";
   children?: ReactNode;
 }
 
@@ -59,8 +54,6 @@ const Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =
       isSuccess,
       variant = "primary",
       size = "md",
-      icon,
-      iconPosition,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onPress,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -69,19 +62,35 @@ const Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =
     } = props;
     const { buttonProps } = useButton(props);
 
-    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {
+    if (
+      (variant === "inverse" || variant === "inverse-ghost") &&
+      !HAS_DEPRECATION_WARNING_SHOWN
+    ) {
       // eslint-disable-next-line no-console
-      console.warn(
-        "icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.",
-      );
+      console.warn(VARIANT_DEPRECATION_WARNING);
       HAS_DEPRECATION_WARNING_SHOWN = true;
     }
 
+    // Map deprecated variants to alternative ones
+    const getVariant = (type: Variant) => {
+      if (type === "inverse") {
+        return "basic";
+      }
+
+      if (type === "inverse-ghost") {
+        return "secondary";
+      }
+
+      return variant;
+    };
+
+    const buttonVariant = getVariant(variant);
+
     // Reshape class name and apply to outer element
     const classes = classNames(
       "mobius",
       "mobius/Button",
-      `--variant-${variant}`,
+      `--variant-${buttonVariant}`,
       `--size-${size}`,
       {
         "--is-disabled": isDisabled,

package/src/components/DropdownMenu/DropdownMenu.mdx

@@ -53,11 +53,23 @@ The trigger will receive:
 The trigger will need to be wrapped with `forwardRef` as per the example below:
 
 ```jsx
-const CustomTrigger = forwardRef((props, ref) => {
-  const { className, open, label, ...otherProps } = props;
+import { Ref, forwardRef } from "react";
+import { Icon } from '@simplybusiness/mobius';
+import { chevronDown, chevronUp } from '@simplybusiness/icons';
+
+interface CustomTriggerProps {
+  open: boolean,
+  label: string
+}
+
+const CustomTrigger = forwardRef((props: CustomTriggerProps, ref: Ref<HTMLButtonElement>) => {
+  const { open, label, ...otherProps } = props;
+
   return (
-    <button className={className} {...otherProps}>
-      {label} {open ? "⨯" : "↓"}
+    <button ref={ref} {...otherProps}>
+      {label}
+      {' '}
+      <Icon icon={open ? chevronUp : chevronDown} />
     </button>
   );
 });
@@ -75,9 +87,9 @@ you may write it as follows:
 ```
 
 export const CustomTrigger = forwardRef((props, ref) => {
-  const { className, open, ...otherProps } = props;
+  const { open, ...otherProps } = props;
   return (
-    <button className={className} {...otherProps}>
+    <button ref={ref} {...otherProps}>
       {open ? "Close" : "Open"}{" "}
       <Icon
         name="chevronDown"

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -57,7 +57,9 @@ export const Normal: StoryType = {
       <DropdownMenu {...args}>
         <DropdownMenu.Item>Home</DropdownMenu.Item>
         <DropdownMenu.Item>My details</DropdownMenu.Item>
-        <DropdownMenu.Item>Sign out</DropdownMenu.Item>
+        <DropdownMenu.Item>
+          <a href="./?path=/docs/components-dropdownmenu--docs">Sign out</a>
+        </DropdownMenu.Item>
       </DropdownMenu>
     </div>
   ),

package/src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -155,17 +155,46 @@ describe("DropdownMenu", () => {
       expect(screen.getByRole("menu")).toHaveClass(LIST_CLASS_NAME);
     });
 
-    it("uses list item class name", () => {
+    it("uses list item class name for text", () => {
+      const existingClassName = "custom-class";
+
       render(
         <DropdownMenu className="my-class">
-          <DropdownMenu.Item>Home</DropdownMenu.Item>
+          <DropdownMenu.Item className={existingClassName}>
+            Home
+          </DropdownMenu.Item>
         </DropdownMenu>,
       );
       const trigger = screen.getByRole("button");
 
       fireEvent.click(trigger);
 
-      expect(screen.getByRole("menuitem")).toHaveClass(ITEM_CLASS_NAME);
+      const menuItem = screen.getByRole("menuitem").firstChild;
+
+      expect(menuItem).toHaveClass(ITEM_CLASS_NAME);
+      expect(menuItem).toHaveClass(existingClassName);
+    });
+
+    it("uses list item class name for provided component", () => {
+      const existingClassName = "home-link";
+
+      render(
+        <DropdownMenu className="my-class">
+          <DropdownMenu.Item>
+            <a href="/home" className={existingClassName}>
+              Home
+            </a>
+          </DropdownMenu.Item>
+        </DropdownMenu>,
+      );
+      const trigger = screen.getByRole("button");
+
+      fireEvent.click(trigger);
+
+      const link = screen.getByRole("link");
+
+      expect(link).toHaveClass(ITEM_CLASS_NAME);
+      expect(link).toHaveClass(existingClassName);
     });
 
     it("uses list item active class name", () => {
@@ -182,7 +211,7 @@ describe("DropdownMenu", () => {
 
       fireEvent.click(item);
 
-      expect(item).toHaveClass(ACTIVE_ITEM_CLASS_NAME);
+      expect(item.firstChild).toHaveClass(ACTIVE_ITEM_CLASS_NAME);
     });
   });
 });

package/src/components/DropdownMenu/Item.tsx

@@ -1,4 +1,13 @@
-import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import {
+  Ref,
+  forwardRef,
+  RefAttributes,
+  ReactNode,
+  cloneElement,
+  ReactElement,
+  isValidElement,
+  Children,
+} from "react";
 import classNames from "classnames/dedupe";
 import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
@@ -22,6 +31,7 @@ const Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(
       elementType: Element = "li",
       active,
       onClick,
+      children,
       ...otherProps
     } = props;
     const classes = classNames(
@@ -32,12 +42,18 @@ const Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(
     );
 
     return (
-      <Element
-        ref={ref}
-        className={classes}
-        onClick={onClick}
-        {...otherProps}
-      />
+      <Element ref={ref} onClick={onClick} {...otherProps}>
+        {Children.map(children, child => {
+          if (isValidElement(child)) {
+            const childClasses = classNames(child.props.className, classes);
+            return cloneElement(child as ReactElement, {
+              className: childClasses,
+            });
+          }
+
+          return <span className={classes}>{child}</span>;
+        })}
+      </Element>
     );
   },
 );

package/src/components/LinkButton/LinkButton.stories.tsx

@@ -25,15 +25,6 @@ const meta: Meta<typeof LinkButton> = {
       options: ["noopener noreferrer", "canonical", "nofollow"],
       control: { type: "select" },
     },
-    icon: {
-      options: ["menu", "rightArrow", "leftArrow", "dropdown", "home"],
-      control: { type: "radio" },
-    },
-    iconPosition: {
-      if: {
-        arg: "icon",
-      },
-    },
     ...excludeControls("style"),
   },
 };

package/dist/cjs/components/Accordion/Accordion.d.ts

@@ -1,34 +0,0 @@
-import { ReactNode, Ref, RefAttributes } from "react";
-import { ForwardedRefComponent } from "../../types/components";
-import { DOMProps } from "../../types/dom";
-export type AccordionElementType = HTMLDivElement;
-export type AccordionRef = Ref<AccordionElementType>;
-export interface AccordionLinkProps extends DOMProps {
-    /** Link text to show accordion content */
-    text?: string;
-    onClick?: () => void;
-    toggle: () => void;
-    headerChildren?: ReactNode;
-    ariaExpanded: boolean | undefined;
-}
-export interface AccordionProps extends DOMProps, RefAttributes<AccordionElementType> {
-    /** Custom class name for setting specific CSS */
-    className?: string;
-    /** Link text to show accordion content */
-    showText?: string;
-    /** Link text to hide accordion content */
-    hideText?: string;
-    /** Whether header is above or below content */
-    headerPosition?: "top" | "bottom";
-    /** Whether to expand the accordion initially */
-    startOpen?: boolean | undefined;
-    /** Callback that fires each time the accordion is opened */
-    onOpen?: () => void;
-    /** Callback that fires each time the accordion is closed */
-    onClose?: () => void;
-    /** Callback that fires each time the accordion state changes */
-    onChange?: (state: boolean) => void;
-    children?: ReactNode;
-    headerChildren?: ReactNode;
-}
-export declare const Accordion: ForwardedRefComponent<AccordionProps, AccordionElementType>;