@simplybusiness/mobius 4.16.0 → 5.0.0

package/dist/esm/components/Trust/Trust.js

@@ -10,10 +10,9 @@ export const Trust = /*#__PURE__*/ forwardRef((props, ref)=>{
     const trustRef = useRef(null);
     const { link, ...defaultProps } = getDefaultProps(props);
     const { className: variantClassName, styles } = TRUSTPILOT_WIDGET[variant];
-    const themeClassName = theme.charAt(0).toUpperCase() + theme.slice(1);
-    const classes = classNames("mobius", "mobius/Trust", REQUIRED_TRUSTPILOT_CLASS_NAME, {
-        [`mobius/TrustTheme${themeClassName}`]: theme,
-        [`mobius/TrustVariant${variantClassName}`]: variant
+    const classes = classNames("mobius", "mobius-trust", REQUIRED_TRUSTPILOT_CLASS_NAME, {
+        [`--is-${theme}`]: theme,
+        [variantClassName]: variant
     }, otherProps.className);
     useEffect(()=>{
         var _window, _window1;
@@ -45,7 +44,7 @@ export const Trust = /*#__PURE__*/ forwardRef((props, ref)=>{
             href: link,
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "mobius/TrustLink",
+            className: "mobius-trust__link",
             children: "Trustpilot"
         })
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Trust/Trust.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { mergeRefs } from \"../../utils\";\nimport { REQUIRED_TRUSTPILOT_CLASS_NAME, TRUSTPILOT_WIDGET } from \"./constants\";\nimport { getDefaultProps } from \"./getDefaultProps\";\nimport { TrustElementType, TrustProps, TrustRef } from \"./types\";\n\nexport const Trust: ForwardedRefComponent<TrustProps, TrustElementType> =\n  forwardRef((props: TrustProps, ref: TrustRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant,\n      theme,\n      ...otherProps\n    } = props;\n    const [isMounted, setIsMounted] = useState(false);\n    const trustRef = useRef(null);\n\n    const { link, ...defaultProps } = getDefaultProps(props);\n    const { className: variantClassName, styles } = TRUSTPILOT_WIDGET[variant];\n    const themeClassName = theme.charAt(0).toUpperCase() + theme.slice(1);\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Trust\",\n      REQUIRED_TRUSTPILOT_CLASS_NAME,\n      {\n        [`mobius/TrustTheme${themeClassName}`]: theme,\n        [`mobius/TrustVariant${variantClassName}`]: variant,\n      },\n      otherProps.className,\n    );\n\n    useEffect(() => {\n      const hasTrustpilotLoaded =\n        trustRef.current &&\n        window?.Trustpilot &&\n        window?.Trustpilot.loadFromElement;\n      // If window.Trustpilot is available it means that we need to load the TrustBox from our ref.\n      if (isMounted && hasTrustpilotLoaded) {\n        window.Trustpilot.loadFromElement(trustRef.current, true);\n      }\n    }, [isMounted]);\n\n    useEffect(() => {\n      setIsMounted(true);\n    }, []);\n\n    // Load `<Trust>` client-side only to avoid SSR hydration issues\n    if (!isMounted) return <div style={styles} />;\n\n    return (\n      <Element\n        ref={mergeRefs([trustRef, ref])}\n        {...defaultProps}\n        {...otherProps}\n        className={classes}\n        style={styles}\n      >\n        <a\n          href={link}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"mobius/TrustLink\"\n        >\n          Trustpilot\n        </a>\n      </Element>\n    );\n  });\n"],"names":["classNames","forwardRef","useEffect","useRef","useState","mergeRefs","REQUIRED_TRUSTPILOT_CLASS_NAME","TRUSTPILOT_WIDGET","getDefaultProps","Trust","props","ref","elementType","Element","variant","theme","otherProps","isMounted","setIsMounted","trustRef","link","defaultProps","className","variantClassName","styles","themeClassName","charAt","toUpperCase","slice","classes","window","hasTrustpilotLoaded","current","Trustpilot","loadFromElement","div","style","a","href","target","rel"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,8BAA8B,EAAEC,iBAAiB,QAAQ,cAAc;AAChF,SAASC,eAAe,QAAQ,oBAAoB;AAGpD,OAAO,MAAMC,sBACXR,WAAW,CAACS,OAAmBC;IAC7B,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,KAAK,EACL,GAAGC,YACJ,GAAGN;IACJ,MAAM,CAACO,WAAWC,aAAa,GAAGd,SAAS;IAC3C,MAAMe,WAAWhB,OAAO;IAExB,MAAM,EAAEiB,IAAI,EAAE,GAAGC,cAAc,GAAGb,gBAAgBE;IAClD,MAAM,EAAEY,WAAWC,gBAAgB,EAAEC,MAAM,EAAE,GAAGjB,iBAAiB,CAACO,QAAQ;IAC1E,MAAMW,iBAAiBV,MAAMW,MAAM,CAAC,GAAGC,WAAW,KAAKZ,MAAMa,KAAK,CAAC;IAEnE,MAAMC,UAAU7B,WACd,UACA,gBACAM,gCACA;QACE,CAAC,CAAC,iBAAiB,EAAEmB,eAAe,CAAC,CAAC,EAAEV;QACxC,CAAC,CAAC,mBAAmB,EAAEQ,iBAAiB,CAAC,CAAC,EAAET;IAC9C,GACAE,WAAWM,SAAS;IAGtBpB,UAAU;YAGN4B,SACAA;QAHF,MAAMC,sBACJZ,SAASa,OAAO,MAChBF,UAAAA,oBAAAA,8BAAAA,QAAQG,UAAU,OAClBH,WAAAA,oBAAAA,+BAAAA,SAAQG,UAAU,CAACC,eAAe;QACpC,6FAA6F;QAC7F,IAAIjB,aAAac,qBAAqB;YACpCD,OAAOG,UAAU,CAACC,eAAe,CAACf,SAASa,OAAO,EAAE;QACtD;IACF,GAAG;QAACf;KAAU;IAEdf,UAAU;QACRgB,aAAa;IACf,GAAG,EAAE;IAEL,gEAAgE;IAChE,IAAI,CAACD,WAAW,qBAAO,KAACkB;QAAIC,OAAOZ;;IAEnC,qBACE,KAACX;QACCF,KAAKN,UAAU;YAACc;YAAUR;SAAI;QAC7B,GAAGU,YAAY;QACf,GAAGL,UAAU;QACdM,WAAWO;QACXO,OAAOZ;kBAEP,cAAA,KAACa;YACCC,MAAMlB;YACNmB,QAAO;YACPC,KAAI;YACJlB,WAAU;sBACX;;;AAKP,GAAG"}
+{"version":3,"sources":["../../../../src/components/Trust/Trust.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { mergeRefs } from \"../../utils\";\nimport { REQUIRED_TRUSTPILOT_CLASS_NAME, TRUSTPILOT_WIDGET } from \"./constants\";\nimport { getDefaultProps } from \"./getDefaultProps\";\nimport { TrustElementType, TrustProps, TrustRef } from \"./types\";\n\nexport const Trust: ForwardedRefComponent<TrustProps, TrustElementType> =\n  forwardRef((props: TrustProps, ref: TrustRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant,\n      theme,\n      ...otherProps\n    } = props;\n    const [isMounted, setIsMounted] = useState(false);\n    const trustRef = useRef(null);\n\n    const { link, ...defaultProps } = getDefaultProps(props);\n    const { className: variantClassName, styles } = TRUSTPILOT_WIDGET[variant];\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius-trust\",\n      REQUIRED_TRUSTPILOT_CLASS_NAME,\n      {\n        [`--is-${theme}`]: theme,\n        [variantClassName]: variant,\n      },\n      otherProps.className,\n    );\n\n    useEffect(() => {\n      const hasTrustpilotLoaded =\n        trustRef.current &&\n        window?.Trustpilot &&\n        window?.Trustpilot.loadFromElement;\n      // If window.Trustpilot is available it means that we need to load the TrustBox from our ref.\n      if (isMounted && hasTrustpilotLoaded) {\n        window.Trustpilot.loadFromElement(trustRef.current, true);\n      }\n    }, [isMounted]);\n\n    useEffect(() => {\n      setIsMounted(true);\n    }, []);\n\n    // Load `<Trust>` client-side only to avoid SSR hydration issues\n    if (!isMounted) return <div style={styles} />;\n\n    return (\n      <Element\n        ref={mergeRefs([trustRef, ref])}\n        {...defaultProps}\n        {...otherProps}\n        className={classes}\n        style={styles}\n      >\n        <a\n          href={link}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"mobius-trust__link\"\n        >\n          Trustpilot\n        </a>\n      </Element>\n    );\n  });\n"],"names":["classNames","forwardRef","useEffect","useRef","useState","mergeRefs","REQUIRED_TRUSTPILOT_CLASS_NAME","TRUSTPILOT_WIDGET","getDefaultProps","Trust","props","ref","elementType","Element","variant","theme","otherProps","isMounted","setIsMounted","trustRef","link","defaultProps","className","variantClassName","styles","classes","window","hasTrustpilotLoaded","current","Trustpilot","loadFromElement","div","style","a","href","target","rel"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,8BAA8B,EAAEC,iBAAiB,QAAQ,cAAc;AAChF,SAASC,eAAe,QAAQ,oBAAoB;AAGpD,OAAO,MAAMC,sBACXR,WAAW,CAACS,OAAmBC;IAC7B,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,OAAO,EACPC,KAAK,EACL,GAAGC,YACJ,GAAGN;IACJ,MAAM,CAACO,WAAWC,aAAa,GAAGd,SAAS;IAC3C,MAAMe,WAAWhB,OAAO;IAExB,MAAM,EAAEiB,IAAI,EAAE,GAAGC,cAAc,GAAGb,gBAAgBE;IAClD,MAAM,EAAEY,WAAWC,gBAAgB,EAAEC,MAAM,EAAE,GAAGjB,iBAAiB,CAACO,QAAQ;IAE1E,MAAMW,UAAUzB,WACd,UACA,gBACAM,gCACA;QACE,CAAC,CAAC,KAAK,EAAES,MAAM,CAAC,CAAC,EAAEA;QACnB,CAACQ,iBAAiB,EAAET;IACtB,GACAE,WAAWM,SAAS;IAGtBpB,UAAU;YAGNwB,SACAA;QAHF,MAAMC,sBACJR,SAASS,OAAO,MAChBF,UAAAA,oBAAAA,8BAAAA,QAAQG,UAAU,OAClBH,WAAAA,oBAAAA,+BAAAA,SAAQG,UAAU,CAACC,eAAe;QACpC,6FAA6F;QAC7F,IAAIb,aAAaU,qBAAqB;YACpCD,OAAOG,UAAU,CAACC,eAAe,CAACX,SAASS,OAAO,EAAE;QACtD;IACF,GAAG;QAACX;KAAU;IAEdf,UAAU;QACRgB,aAAa;IACf,GAAG,EAAE;IAEL,gEAAgE;IAChE,IAAI,CAACD,WAAW,qBAAO,KAACc;QAAIC,OAAOR;;IAEnC,qBACE,KAACX;QACCF,KAAKN,UAAU;YAACc;YAAUR;SAAI;QAC7B,GAAGU,YAAY;QACf,GAAGL,UAAU;QACdM,WAAWG;QACXO,OAAOR;kBAEP,cAAA,KAACS;YACCC,MAAMd;YACNe,QAAO;YACPC,KAAI;YACJd,WAAU;sBACX;;;AAKP,GAAG"}

package/dist/esm/components/Trust/constants.js

@@ -9,14 +9,14 @@ export const TRUSTPILOT_WIDGET = {
     // https://support.trustpilot.com/hc/en-us/articles/360019826379-TrustBox-widget-overview
     "micro-combo": {
         templateId: "5419b6ffb0d04a076446a9af",
-        className: "MicroCombo",
+        className: "--is-variant-micro-combo",
         styles: {
             height: "25px"
         }
     },
     mini: {
         templateId: "53aa8807dec7e10d38f59f32",
-        className: "Mini",
+        className: "--is-variant-mini",
         styles: {
             width: "300px",
             height: "150px"
@@ -24,7 +24,7 @@ export const TRUSTPILOT_WIDGET = {
     },
     horizontal: {
         templateId: "5406e65db0d04a09e042d5fc",
-        className: "Horizontal",
+        className: "--is-variant-horizontal",
         styles: {
             height: "28px"
         }

package/dist/esm/components/Trust/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Trust/constants.ts"],"sourcesContent":["export const REQUIRED_TRUSTPILOT_CLASS_NAME = \"trustpilot-widget\";\n\nexport const SIMPLYBUSINESS_UNIT_ID = \"5ca35a3da72b330001954cef\";\n\nexport const TRUSTPILOT_LINKS = {\n  \"en-US\": \"https://www.trustpilot.com/review/simplybusiness.com\",\n  \"en-GB\": \"https://www.trustpilot.com/review/simplybusiness.co.uk\",\n};\n\nexport const TRUSTPILOT_WIDGET = {\n  // Keys based on actual widget names\n  // https://support.trustpilot.com/hc/en-us/articles/360019826379-TrustBox-widget-overview\n  \"micro-combo\": {\n    templateId: \"5419b6ffb0d04a076446a9af\",\n    className: \"MicroCombo\",\n    styles: {\n      height: \"25px\",\n    },\n  },\n  mini: {\n    templateId: \"53aa8807dec7e10d38f59f32\",\n    className: \"Mini\",\n    styles: {\n      width: \"300px\",\n      height: \"150px\",\n    },\n  },\n  horizontal: {\n    templateId: \"5406e65db0d04a09e042d5fc\",\n    className: \"Horizontal\",\n    styles: {\n      height: \"28px\",\n    },\n  },\n};\n"],"names":["REQUIRED_TRUSTPILOT_CLASS_NAME","SIMPLYBUSINESS_UNIT_ID","TRUSTPILOT_LINKS","TRUSTPILOT_WIDGET","templateId","className","styles","height","mini","width","horizontal"],"mappings":"AAAA,OAAO,MAAMA,iCAAiC,oBAAoB;AAElE,OAAO,MAAMC,yBAAyB,2BAA2B;AAEjE,OAAO,MAAMC,mBAAmB;IAC9B,SAAS;IACT,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,oBAAoB;IAC/B,oCAAoC;IACpC,yFAAyF;IACzF,eAAe;QACbC,YAAY;QACZC,WAAW;QACXC,QAAQ;YACNC,QAAQ;QACV;IACF;IACAC,MAAM;QACJJ,YAAY;QACZC,WAAW;QACXC,QAAQ;YACNG,OAAO;YACPF,QAAQ;QACV;IACF;IACAG,YAAY;QACVN,YAAY;QACZC,WAAW;QACXC,QAAQ;YACNC,QAAQ;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../../../src/components/Trust/constants.ts"],"sourcesContent":["export const REQUIRED_TRUSTPILOT_CLASS_NAME = \"trustpilot-widget\";\n\nexport const SIMPLYBUSINESS_UNIT_ID = \"5ca35a3da72b330001954cef\";\n\nexport const TRUSTPILOT_LINKS = {\n  \"en-US\": \"https://www.trustpilot.com/review/simplybusiness.com\",\n  \"en-GB\": \"https://www.trustpilot.com/review/simplybusiness.co.uk\",\n};\n\nexport const TRUSTPILOT_WIDGET = {\n  // Keys based on actual widget names\n  // https://support.trustpilot.com/hc/en-us/articles/360019826379-TrustBox-widget-overview\n  \"micro-combo\": {\n    templateId: \"5419b6ffb0d04a076446a9af\",\n    className: \"--is-variant-micro-combo\",\n    styles: {\n      height: \"25px\",\n    },\n  },\n  mini: {\n    templateId: \"53aa8807dec7e10d38f59f32\",\n    className: \"--is-variant-mini\",\n    styles: {\n      width: \"300px\",\n      height: \"150px\",\n    },\n  },\n  horizontal: {\n    templateId: \"5406e65db0d04a09e042d5fc\",\n    className: \"--is-variant-horizontal\",\n    styles: {\n      height: \"28px\",\n    },\n  },\n};\n"],"names":["REQUIRED_TRUSTPILOT_CLASS_NAME","SIMPLYBUSINESS_UNIT_ID","TRUSTPILOT_LINKS","TRUSTPILOT_WIDGET","templateId","className","styles","height","mini","width","horizontal"],"mappings":"AAAA,OAAO,MAAMA,iCAAiC,oBAAoB;AAElE,OAAO,MAAMC,yBAAyB,2BAA2B;AAEjE,OAAO,MAAMC,mBAAmB;IAC9B,SAAS;IACT,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,oBAAoB;IAC/B,oCAAoC;IACpC,yFAAyF;IACzF,eAAe;QACbC,YAAY;QACZC,WAAW;QACXC,QAAQ;YACNC,QAAQ;QACV;IACF;IACAC,MAAM;QACJJ,YAAY;QACZC,WAAW;QACXC,QAAQ;YACNG,OAAO;YACPF,QAAQ;QACV;IACF;IACAG,YAAY;QACVN,YAAY;QACZC,WAAW;QACXC,QAAQ;YACNC,QAAQ;QACV;IACF;AACF,EAAE"}

package/dist/esm/components/index.js

@@ -30,6 +30,7 @@ export * from "./Radio";
 export * from "./Segment";
 export * from "./Select";
 export * from "./Slider";
+export * from "./Stack";
 export * from "./SVG";
 export * from "./Table";
 export * from "./Text";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.tsx"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./Alert\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Checkbox\";\nexport * from \"./Container\";\nexport * from \"./Divider\";\nexport * from \"./Drawer\";\nexport * from \"./DropdownMenu\";\nexport * from \"./ErrorMessage\";\nexport * from \"./Fieldset\";\nexport * from \"./Flex\";\nexport * from \"./Grid\";\nexport * from \"./Icon\";\nexport * from \"./Image\";\nexport * from \"./Label\";\nexport * from \"./Link\";\nexport * from \"./LinkButton\";\nexport * from \"./List\";\nexport * from \"./LoadingIndicator\";\nexport * from \"./Logo\";\nexport * from \"./Modal\";\nexport * from \"./NumberField\";\nexport * from \"./Option\";\nexport * from \"./PasswordField\";\nexport * from \"./Popover\";\nexport * from \"./Progress\";\nexport * from \"./Radio\";\nexport * from \"./Segment\";\nexport * from \"./Select\";\nexport * from \"./Slider\";\nexport * from \"./SVG\";\nexport * from \"./Table\";\nexport * from \"./Text\";\nexport * from \"./TextArea\";\nexport * from \"./TextAreaInput\";\nexport * from \"./TextField\";\nexport * from \"./Title\";\nexport * from \"./Trust\";\nexport * from \"./VisuallyHidden\";\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,cAAc;AAC5B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,SAAS;AACvB,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,kBAAkB;AAChC,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,mBAAmB"}
+{"version":3,"sources":["../../../src/components/index.tsx"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./Alert\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Checkbox\";\nexport * from \"./Container\";\nexport * from \"./Divider\";\nexport * from \"./Drawer\";\nexport * from \"./DropdownMenu\";\nexport * from \"./ErrorMessage\";\nexport * from \"./Fieldset\";\nexport * from \"./Flex\";\nexport * from \"./Grid\";\nexport * from \"./Icon\";\nexport * from \"./Image\";\nexport * from \"./Label\";\nexport * from \"./Link\";\nexport * from \"./LinkButton\";\nexport * from \"./List\";\nexport * from \"./LoadingIndicator\";\nexport * from \"./Logo\";\nexport * from \"./Modal\";\nexport * from \"./NumberField\";\nexport * from \"./Option\";\nexport * from \"./PasswordField\";\nexport * from \"./Popover\";\nexport * from \"./Progress\";\nexport * from \"./Radio\";\nexport * from \"./Segment\";\nexport * from \"./Select\";\nexport * from \"./Slider\";\nexport * from \"./Stack\";\nexport * from \"./SVG\";\nexport * from \"./Table\";\nexport * from \"./Text\";\nexport * from \"./TextArea\";\nexport * from \"./TextAreaInput\";\nexport * from \"./TextField\";\nexport * from \"./Title\";\nexport * from \"./Trust\";\nexport * from \"./VisuallyHidden\";\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,cAAc;AAC5B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,SAAS;AACvB,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,kBAAkB;AAChC,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,mBAAmB"}

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

@@ -1,4 +1,4 @@
-import { Ref, RefAttributes, ReactNode } from "react";
+import { Ref, RefAttributes, ReactNode, MouseEvent } from "react";
 import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
 import { UseButtonProps } from "../../hooks/useButton";
@@ -15,7 +15,7 @@ export interface ButtonProps extends UseButtonProps, DOMProps, RefAttributes<But
     isLoading?: boolean;
     /** Display success style */
     isSuccess?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     children?: ReactNode;
 }
 export type ButtonRef = Ref<ButtonElementType>;

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

@@ -1,2 +1,6 @@
-declare const Loading: () => import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from "react";
+type LoadingProps = {
+    children: ReactNode;
+};
+declare const Loading: (props: LoadingProps) => import("react/jsx-runtime").JSX.Element;
 export { Loading };

package/dist/types/components/Segment/Segment.stories.d.ts

@@ -12,8 +12,8 @@ export declare const Nested3: () => import("react/jsx-runtime").JSX.Element;
 export declare const ColouredBackground: () => import("react/jsx-runtime").JSX.Element;
 export declare const HorizontalStack2: () => import("react/jsx-runtime").JSX.Element;
 export declare const HorizontalStack3: () => import("react/jsx-runtime").JSX.Element;
-export declare const BottomMarginRemoved: () => import("react/jsx-runtime").JSX.Element;
+export declare const BottomGapRemoved: () => import("react/jsx-runtime").JSX.Element;
 export declare const CompoundLayout: () => import("react/jsx-runtime").JSX.Element;
-export declare const MarginAround: () => import("react/jsx-runtime").JSX.Element;
+export declare const GapAround: () => import("react/jsx-runtime").JSX.Element;
 export declare const PaymentDetails: () => import("react/jsx-runtime").JSX.Element;
 export default meta;

package/dist/types/components/Segment/SegmentGroup.d.ts

@@ -3,7 +3,7 @@ import { DOMProps } from "../../types/dom";
 export interface SegmentGroupProps extends DOMProps {
     className?: string;
     horizontal?: boolean;
-    margin?: "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "size-xxl";
+    gap?: "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "size-xxl";
     children?: ReactNode;
 }
 declare const SegmentGroup: {

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

@@ -0,0 +1,15 @@
+import React, { Ref, RefAttributes, ReactNode } from "react";
+import type { DOMProps } from "../../types/dom";
+import type { ForwardedRefComponent } from "../../types/components";
+import { SpacingType } from "../../types";
+export type StackElementType = HTMLDivElement;
+export interface StackProps extends DOMProps, RefAttributes<StackElementType> {
+    children?: ReactNode;
+    /** How big a gap between items */
+    gap?: SpacingType;
+    /** Custom class name for setting specific CSS */
+    className?: string;
+    elementType?: string | React.ElementType;
+}
+export type StackRef = Ref<StackElementType>;
+export declare const Stack: ForwardedRefComponent<StackProps, StackElementType>;

package/dist/types/components/Stack/Stack.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stack } from ".";
+type StoryType = StoryObj<typeof Stack>;
+declare const meta: Meta<typeof Stack>;
+export declare const Default: StoryType;
+export declare const Nested: StoryType;
+export default meta;

package/dist/types/components/Stack/Stack.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Stack/index.d.ts

@@ -0,0 +1 @@
+export * from "./Stack";

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

@@ -30,6 +30,7 @@ export * from "./Radio";
 export * from "./Segment";
 export * from "./Select";
 export * from "./Slider";
+export * from "./Stack";
 export * from "./SVG";
 export * from "./Table";
 export * from "./Text";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.16.0",
+  "version": "5.0.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -71,6 +71,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-testing-library": "^6.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -87,7 +88,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.20",
-    "@simplybusiness/icons": "^4.13.0",
+    "@simplybusiness/icons": "^4.14.0",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/Accordion/Accordion.css

@@ -0,0 +1,72 @@
+.mobius-accordion {
+  --transition-duration: 0ms;
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  outline: none;
+
+  &.--should-animate {
+    --transition-duration: 500ms;
+  }
+}
+
+.mobius-accordion__content-container {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--transition-duration);
+
+  &.--is-open {
+    grid-template-rows: 1fr;
+  }
+}
+
+.mobius-accordion__content {
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    opacity var(--transition-duration),
+    margin var(--transition-duration);
+
+  &.--is-open {
+    overflow: visible;
+    opacity: 1;
+    margin-top: var(--size-xs);
+  }
+}
+
+/* Links */
+.mobius-accordion__link {
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-1);
+  color: var(--color-secondary);
+  cursor: pointer;
+  outline: none;
+  text-decoration: underline;
+  text-underline-offset: 6px;
+
+  &:hover,
+  &:active {
+    color: var(--color-secondary-hover);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--box-shadow-default);
+  }
+}
+
+.mobius-accordion__link-text {
+  margin-right: var(--size-xs);
+  line-height: var(--line-height-normal);
+}
+
+.mobius-accordion__link-icon {
+  transition: transform var(--transition-duration);
+
+  &.--is-open {
+    transform: rotateZ(-180deg);
+  }
+}

package/src/components/Accordion/Accordion.mdx

@@ -110,22 +110,21 @@ import { Accordion, SegmentGroup, Segment } from "@simplybusiness/mobius";
 The following HTML is rendered for an Accordion:
 
 ```html
-<div class="mobius/Accordion --should-animate --is-open">
-  <div class="mobius/AccordionContentContainer --is-open" aria-hidden="false">
-    <div class="mobius/AccordionContent --is-open">{children}</div>
+<div class="mobius-accordion --should-animate --is-open">
+  <div
+    class="mobius-accordion__content-container --is-open"
+    aria-hidden="false"
+  >
+    <div class="mobius-accordion__content --is-open">{children}</div>
   </div>
   <div
-    class="mobius/AccordionLink --is-open"
+    class="mobius-accordion__link --is-open"
     role="button"
     tabindex="0"
     aria-expanded="true"
   >
-    <span class="mobius/AccordionLinkText">See less</span>
-    <svg class="mobius/Icon mobius/AccordionLinkIcon --is-open">{icon}</svg>
+    <span class="mobius-accordion__link-text">See less</span>
+    <svg class="mobius-accordion__link-icon --is-open">{icon}</svg>
   </div>
 </div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Box) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Accordion/Accordion.test.tsx

@@ -3,10 +3,10 @@ import userEvent from "@testing-library/user-event";
 import { Accordion } from ".";
 import { jestMockMatchMedia } from "../../utils/jestMockMatchMedia";
 
-const CONTAINER_CLASS_NAME = "mobius/Accordion";
-const CONTENT_CONTAINER_CLASS_NAME = "mobius/AccordionContentContainer";
-const HEADER_CLASS_NAME = "mobius/AccordionHeader";
-const LINK_CLASS_NAME = "mobius/AccordionLink";
+const CONTAINER_CLASS_NAME = "mobius-accordion";
+const CONTENT_CONTAINER_CLASS_NAME = "mobius-accordion__content-container";
+const HEADER_CLASS_NAME = "mobius-accordion__header";
+const LINK_CLASS_NAME = "mobius-accordion__link";
 const OPEN_CLASS_NAME = "--is-open";
 const OPEN_TEXT = "See more";
 const CLOSE_TEXT = "See less";

package/src/components/Accordion/Accordion.tsx

@@ -35,10 +35,10 @@ const AccordionLink = ({
   headerChildren,
   ariaExpanded,
 }: AccordionLinkProps) => {
-  const linkClasses = classNames("mobius/AccordionLink", {
+  const linkClasses = classNames("mobius-accordion__link", {
     "--is-open": ariaExpanded,
   });
-  const iconClasses = classNames("mobius/AccordionLinkIcon", {
+  const iconClasses = classNames("mobius-accordion__link-icon", {
     "--is-open": ariaExpanded,
   });
 
@@ -60,7 +60,7 @@ const AccordionLink = ({
       <Flex
         justifyContent="space-between"
         alignItems="center"
-        className="mobius/AccordionHeader"
+        className="mobius-accordion__header"
       >
         <div
           className={linkClasses}
@@ -70,7 +70,7 @@ const AccordionLink = ({
           tabIndex={0}
           aria-expanded={!!ariaExpanded}
         >
-          <span className="mobius/AccordionLinkText">{text}</span>
+          <span className="mobius-accordion__link-text">{text}</span>
           <Icon icon={chevronDown} className={iconClasses} />
         </div>
         {headerChildren}
@@ -87,7 +87,7 @@ const AccordionLink = ({
       tabIndex={0}
       aria-expanded={!!ariaExpanded}
     >
-      <span className="mobius/AccordionLinkText">{text}</span>
+      <span className="mobius-accordion__link-text">{text}</span>
       <Icon icon={chevronDown} className={iconClasses} />
     </div>
   );
@@ -139,7 +139,7 @@ export const Accordion: ForwardedRefComponent<
 
   const containerClasses = classNames(
     "mobius",
-    "mobius/Accordion",
+    "mobius-accordion",
     props.className,
     {
       "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
@@ -147,12 +147,12 @@ export const Accordion: ForwardedRefComponent<
     },
   );
   const contentContainerClasses = classNames(
-    "mobius/AccordionContentContainer",
+    "mobius-accordion__content-container",
     {
       "--is-open": accordionState.open,
     },
   );
-  const contentClasses = classNames("mobius/AccordionContent", {
+  const contentClasses = classNames("mobius-accordion__content", {
     "--is-open": accordionState.open,
   });
   const linkText = accordionState.open ? hideText : showText;

package/src/components/Alert/Alert.css

@@ -0,0 +1,53 @@
+.mobius-alert {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  font-size: var(--font-size-2);
+  color: var(--color-text);
+  border: 2px solid;
+  border-color: inherit;
+  border-radius: var(--radius-1);
+  padding: var(--size-sm);
+
+  &.--has-header {
+    align-items: start;
+
+    .mobius-alert__icon {
+      margin-top: 2px;
+    }
+  }
+
+  &.--info {
+    border-color: var(--color-info);
+    background-color: var(--color-info-background);
+  }
+
+  &.--success {
+    border-color: var(--color-valid);
+    background-color: var(--color-valid-background);
+  }
+
+  &.--warning {
+    border-color: var(--color-warning);
+    background-color: var(--color-warning-background);
+  }
+
+  &.--error {
+    border-color: var(--color-error);
+    background-color: var(--color-error-background);
+  }
+}
+
+.mobius-alert__icon {
+  margin-right: var(--size-sm);
+}
+
+.mobius-alert__icon .mobius-icon {
+  height: 1.32em;
+}
+
+.mobius-alert__header {
+  margin: 0 0 var(--size-xxs);
+  font-size: var(--font-size-regular);
+  font-weight: 600;
+}

package/src/components/Alert/Alert.mdx

@@ -39,9 +39,5 @@ import { Alert } from "@simplybusiness/mobius";
 The following HTML is rendered for a Alert:
 
 ```html
-<div class="mobius mobius/Alert">{children}</div>
+<div class="mobius-alert">{children}</div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Alert) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Alert/Alert.tsx

@@ -34,7 +34,7 @@ const Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(
 
     const classes = classNames(
       "mobius",
-      "mobius/Alert",
+      "mobius-alert",
       {
         "--info": variant === "info",
         "--success": variant === "success",
@@ -51,9 +51,9 @@ const Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(
       error,
     };
 
-    const headerClasses = classNames("mobius", "mobius/AlertHeader");
-    const iconClasses = classNames("mobius", "mobius/AlertIcon");
-    const contentClasses = classNames("mobius", "mobius/AlertContent");
+    const headerClasses = classNames("mobius", "mobius-alert__header");
+    const iconClasses = classNames("mobius", "mobius-alert__icon");
+    const contentClasses = classNames("mobius", "mobius-alert__content");
 
     return (
       <Element ref={ref} role="alert" {...otherProps} className={classes}>

package/src/components/Box/Box.css

@@ -0,0 +1,3 @@
+.mobius-box {
+  box-sizing: border-box;
+}

package/src/components/Box/Box.mdx

@@ -43,9 +43,5 @@ import { Box } from "@simplybusiness/mobius";
 The following HTML is rendered for a Box:
 
 ```html
-<div class="mobius/Box">{children}</div>
+<div class="mobius-box">{children}</div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Box) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Box/Box.test.tsx

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
 import { Box } from ".";
 
-const CLASS_NAME = "mobius/Box";
+const CLASS_NAME = "mobius-box";
 
 describe("Box", () => {
   it("should render without errors", () => {

package/src/components/Box/Box.tsx

@@ -33,7 +33,7 @@ const Box: ForwardedRefComponent<BoxProps, BoxElementType> = forwardRef(
       ...otherProps
     } = props;
 
-    const classes = classNames("mobius", "mobius/Box", otherProps.className);
+    const classes = classNames("mobius", "mobius-box", otherProps.className);
 
     const styleProps = filterUndefinedProps({
       padding: getSpacingValue(padding),

package/src/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -44,7 +44,7 @@ const BreadcrumbItem: ForwardedRefComponent<
     "aria-current": ariaCurrent = "page",
     children,
     separator = (
-      <Box className="mobius/BreadcrumbSeparator" aria-hidden="true">
+      <Box className="mobius-breadcrumb__separator" aria-hidden="true">
         {">"}
       </Box>
     ),
@@ -61,7 +61,7 @@ const BreadcrumbItem: ForwardedRefComponent<
   // Reshape class name and apply to outer element
   const classes = classNames(
     "mobius",
-    "mobius/BreadcrumbItem",
+    "mobius-breadcrumb__item",
     props.className,
   );
 

package/src/components/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,34 @@
+.mobius-breadcrumb {
+  box-sizing: border-box;
+  background-color: var(--color-background-light);
+  padding-top: var(--size-md);
+  padding-bottom: var(--size-md);
+  padding-left: var(--size-sm);
+  padding-right: var(--size-sm);
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+
+  ul,
+  ol {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.mobius-breadcrumb__item {
+  box-sizing: border-box;
+  color: var(--color-text);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.mobius-breadcrumb__separator {
+  margin-left: var(--size-xs);
+  margin-right: var(--size-xs);
+}

package/src/components/Breadcrumbs/Breadcrumbs.mdx

@@ -82,20 +82,16 @@ import { Breadcrumbs, BreadcrumbItem, Link } from "@simplybusiness/mobius";
 The following example HTML is rendered for a Breadcrumb:
 
 ```html
-<nav class="mobius/Breadcrumb" aria-label="Breadcrumbs">
+<nav class="mobius-breadcrumb" aria-label="Breadcrumbs">
   <ul>
-    <li class="mobius/BreadcrumbItem">
-      <a class="mobius/Link" href="{/path-to-item}" role="link"
+    <li class="mobius-breadcrumb__item">
+      <a class="mobius-link" href="{/path-to-item}" role="link"
         >{crumb link text}</a
       >
-      <div class="mobius/Box" aria-hidden="true">&gt;</div>
+      <div class="mobius-box" aria-hidden="true">&gt;</div>
     </li>
 
     (more li items...)
   </ul>
 </nav>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Breadcrumbs) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -2,8 +2,8 @@ import { render, screen } from "@testing-library/react";
 import { Breadcrumbs, BreadcrumbItem } from ".";
 import { Link } from "../Link";
 
-const CLASS_NAME = "mobius/Breadcrumb";
-const ITEM_CLASS_NAME = "mobius/BreadcrumbItem";
+const CLASS_NAME = "mobius-breadcrumb";
+const ITEM_CLASS_NAME = "mobius-breadcrumb__item";
 
 describe("Breadcrumbs", () => {
   it("renders without errors", () => {

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -36,7 +36,7 @@ const Breadcrumbs: ForwardedRefComponent<
   // Reshape class name and apply to outer element
   const classes = classNames(
     "mobius",
-    "mobius/Breadcrumb",
+    "mobius-breadcrumb",
     otherProps.className,
   );