@simplybusiness/mobius 4.15.1 → 4.16.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 4.16.0
+
+### Minor Changes
+
+- 5979683: Added Trustpilot horizontal variant
+
+### Patch Changes
+
+- d1d1631: Allow `<Container>` `elementType` to be a range of HTML element tags; allow `style` prop
+- 45e9667: Add `<EditLimits>` to `<HeadlineExperimentIteratedQCP>`
+- Updated dependencies [5ab68d0]
+- Updated dependencies [6f7a0ea]
+  - @simplybusiness/icons@4.13.0
+
 ## 4.15.1
 
 ### Patch Changes

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef, Ref, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type ContainerElementType = HTMLDivElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: \"div\" | \"span\";\n  size?: SizeType;\n  children?: ReactNode;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", size = \"md\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Container\",\n      sizeClasses(size),\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["Container","forwardRef","props","ref","elementType","Element","size","otherProps","classes","classNames","sizeClasses","className","displayName"],"mappings":";;;;+BAqCSA;;;eAAAA;;;;uBArCiD;+DACnC;uBAIK;;;;;;AAiB5B,MAAMA,0BACJC,IAAAA,iBAAU,EAAC,CAACC,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,OAAO,IAAI,EAAE,GAAGC,YAAY,GAAGL;IAErE,MAAMM,UAAUC,IAAAA,eAAU,EACxB,UACA,oBACAC,IAAAA,kBAAW,EAACJ,OACZC,WAAWI,SAAS;IAGtB,qBAAO,qBAACN;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEI,WAAWH;;AACvD;AAEFR,UAAUY,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import {\n  forwardRef,\n  Ref,\n  RefAttributes,\n  ReactNode,\n  ElementType,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type ContainerElementType = HTMLElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: string | ElementType;\n  size?: SizeType;\n  children?: ReactNode;\n  style?: CSSProperties;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", size = \"md\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Container\",\n      sizeClasses(size),\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["Container","forwardRef","props","ref","elementType","Element","size","otherProps","classes","classNames","sizeClasses","className","displayName"],"mappings":";;;;+BA6CSA;;;eAAAA;;;;uBAtCF;+DACgB;uBAIK;;;;;;AAkB5B,MAAMA,0BACJC,IAAAA,iBAAU,EAAC,CAACC,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,OAAO,IAAI,EAAE,GAAGC,YAAY,GAAGL;IAErE,MAAMM,UAAUC,IAAAA,eAAU,EACxB,UACA,oBACAC,IAAAA,kBAAW,EAACJ,OACZC,WAAWI,SAAS;IAGtB,qBAAO,qBAACN;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEI,WAAWH;;AACvD;AAEFR,UAAUY,WAAW,GAAG"}

package/dist/cjs/components/Modal/Modal.js

@@ -25,7 +25,7 @@ function _interop_require_default(obj) {
 const TRANSITION_CSS_VARIABLE = "--modal-transition-duration";
 const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { isOpen, onClose, onOpen, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
-    size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector } = props;
+    size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector, ...rest } = props;
     const [shouldTransition, setShouldTransition] = (0, _react.useState)(false);
     (0, _useDeprecationWarning.useDeprecationWarning)({
         size,
@@ -69,6 +69,7 @@ const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         ]),
         onCancel: close,
         className: modalClasses,
+        ...rest,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalContext.ModalContext.Provider, {
             value: contextValue,
             children: children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { useDeprecationWarning } from \"../../hooks/useDeprecationWarning\";\nimport { mergeRefs } from \"../../utils\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalProps } from \"./types\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n  const [shouldTransition, setShouldTransition] = useState(false);\n\n  useDeprecationWarning({\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  });\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","shouldTransition","setShouldTransition","useState","useDeprecationWarning","useEffect","supportsDialog","dialogRef","useRef","close","useDialog","transition","isEnabled","CSSVariable","modalClasses","classNames","contextValue","useMemo","dialog","mergeRefs","onCancel","ModalContext","Provider","value","displayName"],"mappings":"AAAA;;;;;+BA8FSA;;;eAAAA;;;;+DA5Fc;uBAC+C;uBAC5C;uCACY;uBACZ;+BACK;8BACF;;;;;;AAM7B,MAAMC,0BAA0B;AAEhC,MAAMD,sBAAQE,IAAAA,iBAAU,EAAC,CAACC,OAAmBC;IAC3C,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;IACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACf,GAAGd;IACJ,MAAM,CAACe,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EAAC;IAEzDC,IAAAA,4CAAqB,EAAC;QACpBR;QACAC;QACAC;QACAC;QACAC;IACF;IAEAK,IAAAA,gBAAS,EAAC;QACRH,oBAAoBI,IAAAA,6BAAc;IACpC,GAAG,EAAE;IAEL,MAAMC,YAAYC,IAAAA,aAAM,EAA2B;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1BvB,KAAKoB;QACLnB;QACAE;QACAD;QACAsB,YAAY;YACVC,WAAW,CAAC,CAACjB;YACbkB,aAAa7B;QACf;IACF;IAEA,MAAM8B,eAAeC,IAAAA,eAAU,EAC7B,UACA,gBACA;QACE,uBAAuB,CAACd;QACxB,uBAAuBA,oBAAoBN;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMwB,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACL5B,SAASoB;YACThB;QACF,CAAA,GACA;QAACgB;QAAOhB;KAAW;IAGrB,qBACE,qBAACyB;QACC/B,KAAKgC,IAAAA,gBAAS,EAAC;YAACZ;YAAWpB;SAAI;QAC/BiC,UAAUX;QACVjB,WAAWsB;kBAEX,cAAA,qBAACO,0BAAY,CAACC,QAAQ;YAACC,OAAOP;sBAC3BzB;;;AAIT;AAEAR,MAAMyC,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { useDeprecationWarning } from \"../../hooks/useDeprecationWarning\";\nimport { mergeRefs } from \"../../utils\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalProps } from \"./types\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n    ...rest\n  } = props;\n  const [shouldTransition, setShouldTransition] = useState(false);\n\n  useDeprecationWarning({\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  });\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n      {...rest}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","rest","shouldTransition","setShouldTransition","useState","useDeprecationWarning","useEffect","supportsDialog","dialogRef","useRef","close","useDialog","transition","isEnabled","CSSVariable","modalClasses","classNames","contextValue","useMemo","dialog","mergeRefs","onCancel","ModalContext","Provider","value","displayName"],"mappings":"AAAA;;;;;+BAgGSA;;;eAAAA;;;;+DA9Fc;uBAC+C;uBAC5C;uCACY;uBACZ;+BACK;8BACF;;;;;;AAM7B,MAAMC,0BAA0B;AAEhC,MAAMD,sBAAQE,IAAAA,iBAAU,EAAC,CAACC,OAAmBC;IAC3C,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;IACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACd,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EAAC;IAEzDC,IAAAA,4CAAqB,EAAC;QACpBT;QACAC;QACAC;QACAC;QACAC;IACF;IAEAM,IAAAA,gBAAS,EAAC;QACRH,oBAAoBI,IAAAA,6BAAc;IACpC,GAAG,EAAE;IAEL,MAAMC,YAAYC,IAAAA,aAAM,EAA2B;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1BxB,KAAKqB;QACLpB;QACAE;QACAD;QACAuB,YAAY;YACVC,WAAW,CAAC,CAAClB;YACbmB,aAAa9B;QACf;IACF;IAEA,MAAM+B,eAAeC,IAAAA,eAAU,EAC7B,UACA,gBACA;QACE,uBAAuB,CAACd;QACxB,uBAAuBA,oBAAoBP;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMyB,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACL7B,SAASqB;YACTjB;QACF,CAAA,GACA;QAACiB;QAAOjB;KAAW;IAGrB,qBACE,qBAAC0B;QACChC,KAAKiC,IAAAA,gBAAS,EAAC;YAACZ;YAAWrB;SAAI;QAC/BkC,UAAUX;QACVlB,WAAWuB;QACV,GAAGd,IAAI;kBAER,cAAA,qBAACqB,0BAAY,CAACC,QAAQ;YAACC,OAAOP;sBAC3B1B;;;AAIT;AAEAR,MAAM0C,WAAW,GAAG"}

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

@@ -45,6 +45,13 @@ const TRUSTPILOT_WIDGET = {
             width: "300px",
             height: "150px"
         }
+    },
+    horizontal: {
+        templateId: "5406e65db0d04a09e042d5fc",
+        className: "Horizontal",
+        styles: {
+            height: "28px"
+        }
     }
 };
 

package/dist/cjs/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};\n"],"names":["REQUIRED_TRUSTPILOT_CLASS_NAME","SIMPLYBUSINESS_UNIT_ID","TRUSTPILOT_LINKS","TRUSTPILOT_WIDGET","templateId","className","styles","height","mini","width"],"mappings":";;;;;;;;;;;IAAaA,8BAA8B;eAA9BA;;IAEAC,sBAAsB;eAAtBA;;IAEAC,gBAAgB;eAAhBA;;IAKAC,iBAAiB;eAAjBA;;;AATN,MAAMH,iCAAiC;AAEvC,MAAMC,yBAAyB;AAE/B,MAAMC,mBAAmB;IAC9B,SAAS;IACT,SAAS;AACX;AAEO,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;AACF"}
+{"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":";;;;;;;;;;;IAAaA,8BAA8B;eAA9BA;;IAEAC,sBAAsB;eAAtBA;;IAEAC,gBAAgB;eAAhBA;;IAKAC,iBAAiB;eAAjBA;;;AATN,MAAMH,iCAAiC;AAEvC,MAAMC,yBAAyB;AAE/B,MAAMC,mBAAmB;IAC9B,SAAS;IACT,SAAS;AACX;AAEO,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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef, Ref, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type ContainerElementType = HTMLDivElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: \"div\" | \"span\";\n  size?: SizeType;\n  children?: ReactNode;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", size = \"md\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Container\",\n      sizeClasses(size),\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["forwardRef","classNames","sizeClasses","Container","props","ref","elementType","Element","size","otherProps","classes","className","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAuC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAI3C,SAASC,WAAW,QAAQ,cAAc;AAiB1C,MAAMC,0BACJH,WAAW,CAACI,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,OAAO,IAAI,EAAE,GAAGC,YAAY,GAAGL;IAErE,MAAMM,UAAUT,WACd,UACA,oBACAC,YAAYM,OACZC,WAAWE,SAAS;IAGtB,qBAAO,KAACJ;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEE,WAAWD;;AACvD;AAEFP,UAAUS,WAAW,GAAG;AACxB,SAAST,SAAS,GAAG"}
+{"version":3,"sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import {\n  forwardRef,\n  Ref,\n  RefAttributes,\n  ReactNode,\n  ElementType,\n  CSSProperties,\n} from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type ContainerElementType = HTMLElement;\nexport type ContainerRef = Ref<ContainerElementType>;\n\nexport interface ContainerProps\n  extends DOMProps,\n    RefAttributes<ContainerElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** HTML element for the Box */\n  elementType?: string | ElementType;\n  size?: SizeType;\n  children?: ReactNode;\n  style?: CSSProperties;\n}\n\nconst Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =\n  forwardRef((props: ContainerProps, ref: ContainerRef) => {\n    const { elementType: Element = \"div\", size = \"md\", ...otherProps } = props;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Container\",\n      sizeClasses(size),\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n\nContainer.displayName = \"Container\";\nexport { Container };\n"],"names":["forwardRef","classNames","sizeClasses","Container","props","ref","elementType","Element","size","otherProps","classes","className","displayName"],"mappings":";AAAA,SACEA,UAAU,QAML,QAAQ;AACf,OAAOC,gBAAgB,oBAAoB;AAI3C,SAASC,WAAW,QAAQ,cAAc;AAkB1C,MAAMC,0BACJH,WAAW,CAACI,OAAuBC;IACjC,MAAM,EAAEC,aAAaC,UAAU,KAAK,EAAEC,OAAO,IAAI,EAAE,GAAGC,YAAY,GAAGL;IAErE,MAAMM,UAAUT,WACd,UACA,oBACAC,YAAYM,OACZC,WAAWE,SAAS;IAGtB,qBAAO,KAACJ;QAAQF,KAAKA;QAAM,GAAGI,UAAU;QAAEE,WAAWD;;AACvD;AAEFP,UAAUS,WAAW,GAAG;AACxB,SAAST,SAAS,GAAG"}

package/dist/esm/components/Modal/Modal.js

@@ -10,7 +10,7 @@ import { ModalContext } from "./ModalContext";
 const TRANSITION_CSS_VARIABLE = "--modal-transition-duration";
 const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { isOpen, onClose, onOpen, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
-    size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector } = props;
+    size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector, ...rest } = props;
     const [shouldTransition, setShouldTransition] = useState(false);
     useDeprecationWarning({
         size,
@@ -54,6 +54,7 @@ const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
         ]),
         onCancel: close,
         className: modalClasses,
+        ...rest,
         children: /*#__PURE__*/ _jsx(ModalContext.Provider, {
             value: contextValue,
             children: children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { useDeprecationWarning } from \"../../hooks/useDeprecationWarning\";\nimport { mergeRefs } from \"../../utils\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalProps } from \"./types\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n  const [shouldTransition, setShouldTransition] = useState(false);\n\n  useDeprecationWarning({\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  });\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","forwardRef","useEffect","useMemo","useRef","useState","useDialog","useDeprecationWarning","mergeRefs","supportsDialog","ModalContext","TRANSITION_CSS_VARIABLE","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","shouldTransition","setShouldTransition","dialogRef","close","transition","isEnabled","CSSVariable","modalClasses","contextValue","dialog","onCancel","Provider","value","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAcC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAC9E,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,YAAY,QAAQ,iBAAiB;AAM9C,MAAMC,0BAA0B;AAEhC,MAAMC,sBAAQX,WAAW,CAACY,OAAmBC;IAC3C,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;IACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACf,GAAGd;IACJ,MAAM,CAACe,kBAAkBC,oBAAoB,GAAGxB,SAAS;IAEzDE,sBAAsB;QACpBgB;QACAC;QACAC;QACAC;QACAC;IACF;IAEAzB,UAAU;QACR2B,oBAAoBpB;IACtB,GAAG,EAAE;IAEL,MAAMqB,YAAY1B,OAAiC;IACnD,MAAM,EAAE2B,KAAK,EAAE,GAAGzB,UAAU;QAC1BQ,KAAKgB;QACLf;QACAE;QACAD;QACAgB,YAAY;YACVC,WAAW,CAAC,CAACX;YACbY,aAAavB;QACf;IACF;IAEA,MAAMwB,eAAenC,WACnB,UACA,gBACA;QACE,uBAAuB,CAAC4B;QACxB,uBAAuBA,oBAAoBN;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMiB,eAAejC,QACnB,IAAO,CAAA;YACLa,SAASe;YACTX;QACF,CAAA,GACA;QAACW;QAAOX;KAAW;IAGrB,qBACE,KAACiB;QACCvB,KAAKN,UAAU;YAACsB;YAAWhB;SAAI;QAC/BwB,UAAUP;QACVZ,WAAWgB;kBAEX,cAAA,KAACzB,aAAa6B,QAAQ;YAACC,OAAOJ;sBAC3BlB;;;AAIT;AAEAN,MAAM6B,WAAW,GAAG;AACpB,SAAS7B,KAAK,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { useDeprecationWarning } from \"../../hooks/useDeprecationWarning\";\nimport { mergeRefs } from \"../../utils\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalProps } from \"./types\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n    ...rest\n  } = props;\n  const [shouldTransition, setShouldTransition] = useState(false);\n\n  useDeprecationWarning({\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  });\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n      {...rest}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","forwardRef","useEffect","useMemo","useRef","useState","useDialog","useDeprecationWarning","mergeRefs","supportsDialog","ModalContext","TRANSITION_CSS_VARIABLE","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","rest","shouldTransition","setShouldTransition","dialogRef","close","transition","isEnabled","CSSVariable","modalClasses","contextValue","dialog","onCancel","Provider","value","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAcC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAC9E,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,qBAAqB,QAAQ,oCAAoC;AAC1E,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,YAAY,QAAQ,iBAAiB;AAM9C,MAAMC,0BAA0B;AAEhC,MAAMC,sBAAQX,WAAW,CAACY,OAAmBC;IAC3C,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;IACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACd,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,kBAAkBC,oBAAoB,GAAGzB,SAAS;IAEzDE,sBAAsB;QACpBgB;QACAC;QACAC;QACAC;QACAC;IACF;IAEAzB,UAAU;QACR4B,oBAAoBrB;IACtB,GAAG,EAAE;IAEL,MAAMsB,YAAY3B,OAAiC;IACnD,MAAM,EAAE4B,KAAK,EAAE,GAAG1B,UAAU;QAC1BQ,KAAKiB;QACLhB;QACAE;QACAD;QACAiB,YAAY;YACVC,WAAW,CAAC,CAACZ;YACba,aAAaxB;QACf;IACF;IAEA,MAAMyB,eAAepC,WACnB,UACA,gBACA;QACE,uBAAuB,CAAC6B;QACxB,uBAAuBA,oBAAoBP;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMkB,eAAelC,QACnB,IAAO,CAAA;YACLa,SAASgB;YACTZ;QACF,CAAA,GACA;QAACY;QAAOZ;KAAW;IAGrB,qBACE,KAACkB;QACCxB,KAAKN,UAAU;YAACuB;YAAWjB;SAAI;QAC/ByB,UAAUP;QACVb,WAAWiB;QACV,GAAGR,IAAI;kBAER,cAAA,KAAClB,aAAa8B,QAAQ;YAACC,OAAOJ;sBAC3BnB;;;AAIT;AAEAN,MAAM8B,WAAW,GAAG;AACpB,SAAS9B,KAAK,GAAG"}

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

@@ -21,6 +21,13 @@ export const TRUSTPILOT_WIDGET = {
             width: "300px",
             height: "150px"
         }
+    },
+    horizontal: {
+        templateId: "5406e65db0d04a09e042d5fc",
+        className: "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};\n"],"names":["REQUIRED_TRUSTPILOT_CLASS_NAME","SIMPLYBUSINESS_UNIT_ID","TRUSTPILOT_LINKS","TRUSTPILOT_WIDGET","templateId","className","styles","height","mini","width"],"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;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: \"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"}

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Accordion } from "..";
 type StoryType = StoryObj<typeof Accordion>;
 declare const meta: Meta<typeof Accordion>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const StartExpanded: StoryType;
 export declare const BottomHeader: StoryType;
 export declare const WithChildren: StoryType;

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

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Alert } from "./Alert";
 type StoryType = StoryObj<typeof Alert>;
 declare const meta: Meta<typeof Alert>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const WithHeader: StoryType;
 export default meta;

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

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Box } from "./Box";
 type StoryType = StoryObj<typeof Box>;
 declare const meta: Meta<typeof Box>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const CustomElement: StoryType;
 export default meta;

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

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Breadcrumbs } from "./Breadcrumbs";
 type StoryType = StoryObj<typeof Breadcrumbs>;
 declare const meta: Meta<typeof Breadcrumbs>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const WithLogo: StoryType;
 export default meta;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "./Button";
 type StoryType = StoryObj<typeof Button>;
 declare const meta: Meta<typeof Button>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const Secondary: StoryType;
 export declare const Ghost: StoryType;
 export declare const Basic: StoryType;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Checkbox } from ".";
 type StoryType = StoryObj<typeof Checkbox>;
 declare const meta: Meta<typeof Checkbox>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const Disabled: StoryType;
 export declare const Valid: StoryType;
 export declare const Invalid: StoryType;

package/dist/types/components/Checkbox/CheckboxGroup.stories.d.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { CheckboxGroup } from ".";
 type StoryType = StoryObj<typeof CheckboxGroup>;
 declare const meta: Meta<typeof CheckboxGroup>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const Horizontal: StoryType;
 export declare const Disabled: StoryType;
 export declare const Valid: StoryType;

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

@@ -1,17 +1,18 @@
-import { Ref, RefAttributes, ReactNode } from "react";
+import { Ref, RefAttributes, ReactNode, ElementType, CSSProperties } from "react";
 import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
 import { SizeType } from "../../types";
-export type ContainerElementType = HTMLDivElement;
+export type ContainerElementType = HTMLElement;
 export type ContainerRef = Ref<ContainerElementType>;
 export interface ContainerProps extends DOMProps, RefAttributes<ContainerElementType> {
     id?: string;
     /** Custom class name for setting specific CSS */
     className?: string;
     /** HTML element for the Box */
-    elementType?: "div" | "span";
+    elementType?: string | ElementType;
     size?: SizeType;
     children?: ReactNode;
+    style?: CSSProperties;
 }
 declare const Container: ForwardedRefComponent<ContainerProps, ContainerElementType>;
 export { Container };

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Container } from "./Container";
 type StoryType = StoryObj<typeof Container>;
 declare const meta: Meta<typeof Container>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export default meta;

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Divider } from "./Divider";
 type StoryType = StoryObj<typeof Divider>;
 declare const meta: Meta<typeof Divider>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export default meta;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Drawer } from ".";
 type StoryType = StoryObj<typeof Drawer>;
 declare const meta: Meta<typeof Drawer>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const WithLogoHeader: StoryType;
 export declare const WithLongContent: StoryType;
 export default meta;

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

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { DropdownMenu } from ".";
 type StoryType = StoryObj<typeof DropdownMenu>;
 declare const meta: Meta<typeof DropdownMenu>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const WithCustomTrigger: StoryType;
 export default meta;

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

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ErrorMessage } from ".";
 type StoryType = StoryObj<typeof ErrorMessage>;
 declare const meta: Meta<typeof ErrorMessage>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const LongMessage: StoryType;
 export default meta;

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

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Fieldset } from "./Fieldset";
 type StoryType = StoryObj<typeof Fieldset>;
 declare const meta: Meta<typeof Fieldset>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const WithLegend: StoryType;
 export default meta;

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

@@ -4,7 +4,7 @@ import { GridItem } from "./Item";
 type StoryType = StoryObj<typeof Grid>;
 declare const meta: Meta<typeof Grid>;
 export declare const AlignmentProperties: StoryType;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const EightColumns: StoryType;
 export declare const Responsive: Meta<typeof GridItem>;
 export declare const ItemPositioning: Meta<typeof GridItem>;

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

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Icon } from "./Icon";
 type StoryType = StoryObj<typeof Icon>;
 declare const meta: Meta<typeof Icon>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const Spinning: StoryType;
 export default meta;

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Image } from "./Image";
 type StoryType = StoryObj<typeof Image>;
 declare const meta: Meta<typeof Image>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export default meta;

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Label } from "./Label";
 type StoryType = StoryObj<typeof Label>;
 declare const meta: Meta<typeof Label>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export default meta;

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

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Link } from "./Link";
 type StoryType = StoryObj<typeof Link>;
 declare const meta: Meta<typeof Link>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const Disabled: StoryType;
 export default meta;

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { LinkButton } from "./LinkButton";
 type StoryType = StoryObj<typeof LinkButton>;
 declare const meta: Meta<typeof LinkButton>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export default meta;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { LoadingIndicator } from "./LoadingIndicator";
 type StoryType = StoryObj<typeof LoadingIndicator>;
 declare const meta: Meta<typeof LoadingIndicator>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const Large: StoryType;
 export declare const WithCustomColour: StoryType;
 export declare const WithCustomIcon: StoryType;

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Logo } from "..";
 type StoryType = StoryObj<typeof Logo>;
 declare const meta: Meta<typeof Logo>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export default meta;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Modal } from ".";
 type StoryType = StoryObj<typeof Modal>;
 declare const meta: Meta<typeof Modal>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const FullScreen: StoryType;
 export declare const WithAnimation: StoryType;
 export declare const WithLongContent: StoryType;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { NumberField } from "./NumberField";
 type StoryType = StoryObj<typeof NumberField>;
 declare const meta: Meta<typeof NumberField>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const LimitedRange: StoryType;
 export declare const Valid: StoryType;
 export declare const Invalid: StoryType;

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { PasswordField } from "./PasswordField";
 type StoryType = StoryObj<typeof PasswordField>;
 declare const meta: Meta<typeof PasswordField>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export default meta;

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

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Popover } from "..";
 type StoryType = StoryObj<typeof Popover>;
 declare const meta: Meta<typeof Popover>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const CustomTrigger: StoryType;
 export default meta;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { RadioGroup } from "./RadioGroup";
 type StoryType = StoryObj<typeof RadioGroup>;
 declare const meta: Meta<typeof RadioGroup>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const Disabled: StoryType;
 export declare const DisabledIndividualRadios: StoryType;
 export declare const Valid: StoryType;

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { SVG } from "./SVG";
 type StoryType = StoryObj<typeof SVG>;
 declare const meta: Meta<typeof SVG>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export default meta;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Select } from "./Select";
 type StoryType = StoryObj<typeof Select>;
 declare const meta: Meta<typeof Select>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const ControlledValue: StoryType;
 export declare const Disabled: StoryType;
 export declare const Valid: StoryType;

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

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Table } from ".";
 type StoryType = StoryObj<typeof Table>;
 declare const meta: Meta<typeof Table>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const Extended: StoryType;
 export default meta;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { TextArea } from "./TextArea";
 type StoryType = StoryObj<typeof TextArea>;
 declare const meta: Meta<typeof TextArea>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const ControlledValue: StoryType;
 export declare const Disabled: StoryType;
 export declare const WithError: StoryType;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { TextField } from "./TextField";
 type StoryType = StoryObj<typeof TextField>;
 declare const meta: Meta<typeof TextField>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const Placeholder: StoryType;
 export declare const ControlledValue: StoryType;
 export declare const Disabled: StoryType;

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Title } from "./Title";
 type StoryType = StoryObj<typeof Title>;
 declare const meta: Meta<typeof Title>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export default meta;

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

@@ -4,4 +4,5 @@ type StoryType = StoryObj<typeof Trust>;
 declare const meta: Meta<typeof Trust>;
 export declare const MicroCombo: StoryType;
 export declare const Mini: StoryType;
+export declare const Horizontal: StoryType;
 export default meta;

package/dist/types/components/Trust/constants.d.ts

@@ -20,4 +20,11 @@ export declare const TRUSTPILOT_WIDGET: {
             height: string;
         };
     };
+    horizontal: {
+        templateId: string;
+        className: string;
+        styles: {
+            height: string;
+        };
+    };
 };

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { VisuallyHidden } from ".";
 type StoryType = StoryObj<typeof VisuallyHidden>;
 declare const meta: Meta<typeof VisuallyHidden>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export default meta;

package/dist/types/hooks/useBreakpoint/useBreakpoint.stories.d.ts

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useBreakpoint } from "./useBreakpoint";
 type StoryType = StoryObj<typeof useBreakpoint>;
 declare const meta: Meta<typeof useBreakpoint>;
-export declare const Normal: StoryType;
+export declare const Default: StoryType;
 export declare const UpAndDown: StoryType;
 export default meta;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.15.1",
+  "version": "4.16.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -87,7 +87,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.20",
-    "@simplybusiness/icons": "^4.12.1",
+    "@simplybusiness/icons": "^4.13.0",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/Accordion/Accordion.mdx

@@ -22,9 +22,9 @@ import { Accordion } from "@simplybusiness/mobius";
 
 ## Examples
 
-### Normal
+### Default
 
-<Story of={AccordionStories.Normal} />
+<Story of={AccordionStories.Default} />
 
 {/* prettier-ignore */}
 ```jsx

package/src/components/Accordion/Accordion.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta<typeof Accordion> = {
   ],
 };
 
-export const Normal: StoryType = {
+export const Default: StoryType = {
   render: (args: AccordionProps) => (
     <Accordion {...args}>
       <p>

package/src/components/Alert/Alert.mdx

@@ -22,11 +22,11 @@ yarn add @simplybusiness/mobius
 import { Alert } from "@simplybusiness/mobius";
 ```
 
-## Normal
+### Default
 
-<Canvas of={AlertStories.Normal} />
+<Canvas of={AlertStories.Default} />
 
-## With Header
+### With Header
 
 <Canvas of={AlertStories.WithHeader} />