@simplybusiness/mobius 10.1.2 → 10.3.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/SVG/SVG.tsx"],
-  "sourcesContent": ["import type { RefAttributes } from \"react\";\nimport { Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {\n  children: React.ReactElement<React.SVGProps<SVGSVGElement>>;\n  className?: string;\n  style?: React.CSSProperties;\n}\nconst SVG = ({ ref, ...props }: SVGProps) => {\n  const { children, className, ...otherProps } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-svg\", className);\n  const svgNode = Children.only(children);\n  // Remove originalType and mdxType props\n  const { children: svgChildren, viewBox, xmlns } = svgNode.props;\n\n  return (\n    <svg\n      viewBox={viewBox}\n      xmlns={xmlns}\n      ref={ref}\n      {...otherProps}\n      className={classes}\n    >\n      {svgChildren}\n    </svg>\n  );\n};\n\nSVG.displayName = \"SVG\";\nexport { SVG };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAyB;AACzB,oBAAuB;AAiBnB;AATJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM,EAAE,UAAU,WAAW,GAAG,WAAW,IAAI;AAE/C,QAAM,cAAU,cAAAA,SAAW,UAAU,cAAc,SAAS;AAC5D,QAAM,UAAU,sBAAS,KAAK,QAAQ;AAEtC,QAAM,EAAE,UAAU,aAAa,SAAS,MAAM,IAAI,QAAQ;AAE1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AAEA,IAAI,cAAc;",
+  "sourcesContent": ["import type { RefAttributes } from \"react\";\nimport { Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {\n  children: React.ReactElement<React.SVGProps<SVGSVGElement>>;\n  className?: string;\n  style?: React.CSSProperties;\n  role?: React.AriaRole;\n  \"aria-label\"?: string;\n  \"aria-hidden\"?: boolean | \"true\" | \"false\";\n  \"aria-labelledby\"?: string;\n}\nconst SVG = ({ ref, ...props }: SVGProps) => {\n  const { children, className, ...otherProps } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-svg\", className);\n  const svgNode = Children.only(children);\n  // Remove originalType and mdxType props\n  const { children: svgChildren, viewBox, xmlns } = svgNode.props;\n\n  return (\n    <svg\n      viewBox={viewBox}\n      xmlns={xmlns}\n      ref={ref}\n      {...otherProps}\n      className={classes}\n    >\n      {svgChildren}\n    </svg>\n  );\n};\n\nSVG.displayName = \"SVG\";\nexport { SVG };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAyB;AACzB,oBAAuB;AAqBnB;AATJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM,EAAE,UAAU,WAAW,GAAG,WAAW,IAAI;AAE/C,QAAM,cAAU,cAAAA,SAAW,UAAU,cAAc,SAAS;AAC5D,QAAM,UAAU,sBAAS,KAAK,QAAQ;AAEtC,QAAM,EAAE,UAAU,aAAa,SAAS,MAAM,IAAI,QAAQ;AAE1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AAEA,IAAI,cAAc;",
   "names": ["classNames"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/SVG/index.tsx", "../../../../src/components/SVG/SVG.tsx"],
-  "sourcesContent": ["export * from \"./SVG\";\n", "import type { RefAttributes } from \"react\";\nimport { Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {\n  children: React.ReactElement<React.SVGProps<SVGSVGElement>>;\n  className?: string;\n  style?: React.CSSProperties;\n}\nconst SVG = ({ ref, ...props }: SVGProps) => {\n  const { children, className, ...otherProps } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-svg\", className);\n  const svgNode = Children.only(children);\n  // Remove originalType and mdxType props\n  const { children: svgChildren, viewBox, xmlns } = svgNode.props;\n\n  return (\n    <svg\n      viewBox={viewBox}\n      xmlns={xmlns}\n      ref={ref}\n      {...otherProps}\n      className={classes}\n    >\n      {svgChildren}\n    </svg>\n  );\n};\n\nSVG.displayName = \"SVG\";\nexport { SVG };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAAyB;AACzB,oBAAuB;AAiBnB;AATJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM,EAAE,UAAU,WAAW,GAAG,WAAW,IAAI;AAE/C,QAAM,cAAU,cAAAA,SAAW,UAAU,cAAc,SAAS;AAC5D,QAAM,UAAU,sBAAS,KAAK,QAAQ;AAEtC,QAAM,EAAE,UAAU,aAAa,SAAS,MAAM,IAAI,QAAQ;AAE1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AAEA,IAAI,cAAc;",
+  "sourcesContent": ["export * from \"./SVG\";\n", "import type { RefAttributes } from \"react\";\nimport { Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {\n  children: React.ReactElement<React.SVGProps<SVGSVGElement>>;\n  className?: string;\n  style?: React.CSSProperties;\n  role?: React.AriaRole;\n  \"aria-label\"?: string;\n  \"aria-hidden\"?: boolean | \"true\" | \"false\";\n  \"aria-labelledby\"?: string;\n}\nconst SVG = ({ ref, ...props }: SVGProps) => {\n  const { children, className, ...otherProps } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-svg\", className);\n  const svgNode = Children.only(children);\n  // Remove originalType and mdxType props\n  const { children: svgChildren, viewBox, xmlns } = svgNode.props;\n\n  return (\n    <svg\n      viewBox={viewBox}\n      xmlns={xmlns}\n      ref={ref}\n      {...otherProps}\n      className={classes}\n    >\n      {svgChildren}\n    </svg>\n  );\n};\n\nSVG.displayName = \"SVG\";\nexport { SVG };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAAyB;AACzB,oBAAuB;AAqBnB;AATJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM,EAAE,UAAU,WAAW,GAAG,WAAW,IAAI;AAE/C,QAAM,cAAU,cAAAA,SAAW,UAAU,cAAc,SAAS;AAC5D,QAAM,UAAU,sBAAS,KAAK,QAAQ;AAEtC,QAAM,EAAE,UAAU,aAAa,SAAS,MAAM,IAAI,QAAQ;AAE1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AAEA,IAAI,cAAc;",
   "names": ["classNames"]
 }

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

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(Segment_exports);
 var import_dedupe = __toESM(require("classnames/dedupe"));
 var import_Segment = require("@simplybusiness/mobius/src/components/Segment/Segment.css");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Segment = (props) => {
+var Segment = ({ ref, ...props }) => {
   const { heading, children, colour, inverted, className, ...rest } = props;
   const classes = (0, import_dedupe.default)(
     "mobius",
@@ -45,7 +45,7 @@ var Segment = (props) => {
     { inverted },
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classes, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: classes, ...rest, children: [
     heading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mobius-segment__heading", children: heading }),
     children
   ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Segment/Segment.tsx"],
-  "sourcesContent": ["import type { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Segment.css\";\n\nexport interface SegmentProps extends DOMProps {\n  className?: string;\n  heading?: string;\n  /** Background colour for Segment */\n  colour?: \"subtle\" | \"primary\" | \"secondary\";\n  /** When inverted, text is white.  Use on darker backgrounds. */\n  inverted?: boolean;\n  children?: ReactNode;\n}\n\nconst Segment = (props: SegmentProps) => {\n  const { heading, children, colour, inverted, className, ...rest } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-segment\",\n    colour,\n    { inverted },\n    className,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {heading && <div className=\"mobius-segment__heading\">{heading}</div>}\n      {children}\n    </div>\n  );\n};\n\nSegment.displayName = \"Segment\";\nexport { Segment };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAuB;AAEvB,qBAAO;AAwBH;AAZJ,IAAM,UAAU,CAAC,UAAwB;AACvC,QAAM,EAAE,SAAS,UAAU,QAAQ,UAAU,WAAW,GAAG,KAAK,IAAI;AAEpE,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,SAAS;AAAA,IACX;AAAA,EACF;AAEA,SACE,6CAAC,SAAI,WAAW,SAAU,GAAG,MAC1B;AAAA,eAAW,4CAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,IAC7D;AAAA,KACH;AAEJ;AAEA,QAAQ,cAAc;",
+  "sourcesContent": ["import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Segment.css\";\n\nexport type SegmentElementType = HTMLDivElement;\n\nexport interface SegmentProps\n  extends DOMProps, RefAttributes<SegmentElementType> {\n  className?: string;\n  heading?: string;\n  /** Background colour for Segment */\n  colour?: \"subtle\" | \"primary\" | \"secondary\";\n  /** When inverted, text is white.  Use on darker backgrounds. */\n  inverted?: boolean;\n  children?: ReactNode;\n}\n\nconst Segment = ({ ref, ...props }: SegmentProps) => {\n  const { heading, children, colour, inverted, className, ...rest } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-segment\",\n    colour,\n    { inverted },\n    className,\n  );\n\n  return (\n    <div ref={ref} className={classes} {...rest}>\n      {heading && <div className=\"mobius-segment__heading\">{heading}</div>}\n      {children}\n    </div>\n  );\n};\n\nSegment.displayName = \"Segment\";\nexport { Segment };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAuB;AAEvB,qBAAO;AA2BH;AAZJ,IAAM,UAAU,CAAC,EAAE,KAAK,GAAG,MAAM,MAAoB;AACnD,QAAM,EAAE,SAAS,UAAU,QAAQ,UAAU,WAAW,GAAG,KAAK,IAAI;AAEpE,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,SAAS;AAAA,IACX;AAAA,EACF;AAEA,SACE,6CAAC,SAAI,KAAU,WAAW,SAAU,GAAG,MACpC;AAAA,eAAW,4CAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,IAC7D;AAAA,KACH;AAEJ;AAEA,QAAQ,cAAc;",
   "names": ["classNames"]
 }

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

@@ -56,7 +56,7 @@ SegmentGroup.displayName = "SegmentGroup";
 var import_dedupe2 = __toESM(require("classnames/dedupe"));
 var import_Segment = require("@simplybusiness/mobius/src/components/Segment/Segment.css");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Segment = (props) => {
+var Segment = ({ ref, ...props }) => {
   const { heading, children, colour, inverted, className, ...rest } = props;
   const classes = (0, import_dedupe2.default)(
     "mobius",
@@ -65,7 +65,7 @@ var Segment = (props) => {
     { inverted },
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: classes, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref, className: classes, ...rest, children: [
     heading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mobius-segment__heading", children: heading }),
     children
   ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/Segment/index.tsx", "../../../../src/components/Segment/SegmentGroup.tsx", "../../../../src/components/Segment/Segment.tsx"],
-  "sourcesContent": ["export * from \"./SegmentGroup\";\nexport * from \"./Segment\";\n", "import type { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport interface SegmentGroupProps extends DOMProps {\n  className?: string;\n  horizontal?: boolean;\n  gap?: \"size-xs\" | \"size-s\" | \"size-m\" | \"size-l\" | \"size-xl\" | \"size-xxl\";\n  children?: ReactNode;\n}\n\nconst SegmentGroup = (props: SegmentGroupProps) => {\n  const { children, horizontal, gap, className, ...rest } = props;\n\n  const gapClass = gap ? `gap-${gap}` : \"\";\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-segment-group\",\n    className,\n    { \"--is-horizontal\": horizontal },\n    gapClass,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nSegmentGroup.displayName = \"SegmentGroup\";\nexport { SegmentGroup };\n", "import type { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Segment.css\";\n\nexport interface SegmentProps extends DOMProps {\n  className?: string;\n  heading?: string;\n  /** Background colour for Segment */\n  colour?: \"subtle\" | \"primary\" | \"secondary\";\n  /** When inverted, text is white.  Use on darker backgrounds. */\n  inverted?: boolean;\n  children?: ReactNode;\n}\n\nconst Segment = (props: SegmentProps) => {\n  const { heading, children, colour, inverted, className, ...rest } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-segment\",\n    colour,\n    { inverted },\n    className,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {heading && <div className=\"mobius-segment__heading\">{heading}</div>}\n      {children}\n    </div>\n  );\n};\n\nSegment.displayName = \"Segment\";\nexport { Segment };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,oBAAuB;AAuBnB;AAbJ,IAAM,eAAe,CAAC,UAA6B;AACjD,QAAM,EAAE,UAAU,YAAY,KAAK,WAAW,GAAG,KAAK,IAAI;AAE1D,QAAM,WAAW,MAAM,OAAO,GAAG,KAAK;AACtC,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,mBAAmB,WAAW;AAAA,IAChC;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,MAC1B,UACH;AAEJ;AAEA,aAAa,cAAc;;;AC7B3B,IAAAC,iBAAuB;AAEvB,qBAAO;AAwBH,IAAAC,sBAAA;AAZJ,IAAM,UAAU,CAAC,UAAwB;AACvC,QAAM,EAAE,SAAS,UAAU,QAAQ,UAAU,WAAW,GAAG,KAAK,IAAI;AAEpE,QAAM,cAAU,eAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,SAAS;AAAA,IACX;AAAA,EACF;AAEA,SACE,8CAAC,SAAI,WAAW,SAAU,GAAG,MAC1B;AAAA,eAAW,6CAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,IAC7D;AAAA,KACH;AAEJ;AAEA,QAAQ,cAAc;",
+  "sourcesContent": ["export * from \"./SegmentGroup\";\nexport * from \"./Segment\";\n", "import type { ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport interface SegmentGroupProps extends DOMProps {\n  className?: string;\n  horizontal?: boolean;\n  gap?: \"size-xs\" | \"size-s\" | \"size-m\" | \"size-l\" | \"size-xl\" | \"size-xxl\";\n  children?: ReactNode;\n}\n\nconst SegmentGroup = (props: SegmentGroupProps) => {\n  const { children, horizontal, gap, className, ...rest } = props;\n\n  const gapClass = gap ? `gap-${gap}` : \"\";\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-segment-group\",\n    className,\n    { \"--is-horizontal\": horizontal },\n    gapClass,\n  );\n\n  return (\n    <div className={classes} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nSegmentGroup.displayName = \"SegmentGroup\";\nexport { SegmentGroup };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Segment.css\";\n\nexport type SegmentElementType = HTMLDivElement;\n\nexport interface SegmentProps\n  extends DOMProps, RefAttributes<SegmentElementType> {\n  className?: string;\n  heading?: string;\n  /** Background colour for Segment */\n  colour?: \"subtle\" | \"primary\" | \"secondary\";\n  /** When inverted, text is white.  Use on darker backgrounds. */\n  inverted?: boolean;\n  children?: ReactNode;\n}\n\nconst Segment = ({ ref, ...props }: SegmentProps) => {\n  const { heading, children, colour, inverted, className, ...rest } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-segment\",\n    colour,\n    { inverted },\n    className,\n  );\n\n  return (\n    <div ref={ref} className={classes} {...rest}>\n      {heading && <div className=\"mobius-segment__heading\">{heading}</div>}\n      {children}\n    </div>\n  );\n};\n\nSegment.displayName = \"Segment\";\nexport { Segment };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,oBAAuB;AAuBnB;AAbJ,IAAM,eAAe,CAAC,UAA6B;AACjD,QAAM,EAAE,UAAU,YAAY,KAAK,WAAW,GAAG,KAAK,IAAI;AAE1D,QAAM,WAAW,MAAM,OAAO,GAAG,KAAK;AACtC,QAAM,cAAU,cAAAA;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,mBAAmB,WAAW;AAAA,IAChC;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,MAC1B,UACH;AAEJ;AAEA,aAAa,cAAc;;;AC7B3B,IAAAC,iBAAuB;AAEvB,qBAAO;AA2BH,IAAAC,sBAAA;AAZJ,IAAM,UAAU,CAAC,EAAE,KAAK,GAAG,MAAM,MAAoB;AACnD,QAAM,EAAE,SAAS,UAAU,QAAQ,UAAU,WAAW,GAAG,KAAK,IAAI;AAEpE,QAAM,cAAU,eAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,EAAE,SAAS;AAAA,IACX;AAAA,EACF;AAEA,SACE,8CAAC,SAAI,KAAU,WAAW,SAAU,GAAG,MACpC;AAAA,eAAW,6CAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA,IAC7D;AAAA,KACH;AAEJ;AAEA,QAAQ,cAAc;",
   "names": ["classNames", "import_dedupe", "import_jsx_runtime", "classNames"]
 }