@simplybusiness/mobius 9.2.0 → 9.3.0

package/dist/cjs/components/AddressLookup/types.js

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/AddressLookup/types.tsx
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/dist/cjs/components/AddressLookup/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/AddressLookup/types.tsx"],
+  "sourcesContent": ["import type { RefAttributes } from \"react\";\nimport type { ComboboxElementType, ComboboxProps } from \"../Combobox\";\n\nexport interface AddressLookupService {\n  search(searchTerm: string): Promise<LoqateSearchResponse>;\n  findById(id: string): Promise<LoqateSearchResponse>;\n  get(id: string): Promise<LoqateAddressDetailsItem>;\n}\n\nexport type AddressLookupProps = Omit<\n  ComboboxProps,\n  \"options\" | \"asyncOptions\" | \"onSelected\"\n> &\n  RefAttributes<ComboboxElementType> & {\n    addressLookupService: AddressLookupService;\n    onAddressSelected?: (address: LoqateAddressDetailsItem) => void;\n    onOptionsDisplayed?: () => void;\n    onError?: (error: Error) => void;\n  };\n\n// Loqate API response types\nexport type LoqateErrorItem = {\n  Error: string;\n  Description: string;\n  Cause: string;\n  Resolution: string;\n};\n\nexport type LoqateSearchResultItem = {\n  Id: string;\n  Type: string;\n  Text: string;\n  Highlight: string;\n  Description: string;\n};\n\nexport type LoqateErrorResponse = { Items: LoqateErrorItem[] };\n\nexport type LoqateSearchResponse = { Items: LoqateSearchResultItem[] };\n\nexport type LoqateAddressDetailsItem = {\n  Id: string;\n  Type: string;\n  City: string;\n  Line1: string;\n  Line2: string;\n  PostalCode: string;\n  Label: string;\n  // US only fields\n  SubBuilding?: string;\n  BuildingNumber?: string;\n  Street?: string;\n};\n\nexport type LoqateAddressDetailsResponse = {\n  Items: LoqateAddressDetailsItem[];\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/components/AddressLookup/utils.js

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/AddressLookup/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  isLoqateErrorResponse: () => isLoqateErrorResponse
+});
+module.exports = __toCommonJS(utils_exports);
+function isLoqateErrorResponse(response) {
+  return Array.isArray(response) && response.some((item) => "Error" in item);
+}
+//# sourceMappingURL=utils.js.map

package/dist/cjs/components/AddressLookup/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/AddressLookup/utils.ts"],
+  "sourcesContent": ["import type { LoqateErrorResponse } from \"./types\";\n\nexport function isLoqateErrorResponse(\n  response: unknown,\n): response is LoqateErrorResponse {\n  return Array.isArray(response) && response.some(item => \"Error\" in item);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,SAAS,sBACd,UACiC;AACjC,SAAO,MAAM,QAAQ,QAAQ,KAAK,SAAS,KAAK,UAAQ,WAAW,IAAI;AACzE;",
+  "names": []
+}

package/dist/cjs/components/Alert/Alert.js

@@ -0,0 +1,144 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Alert/Alert.tsx
+var Alert_exports = {};
+__export(Alert_exports, {
+  Alert: () => Alert
+});
+module.exports = __toCommonJS(Alert_exports);
+var import_icons = require("@simplybusiness/icons");
+var import_dedupe2 = __toESM(require("classnames/dedupe"));
+
+// src/components/Icon/Icon.tsx
+var import_dedupe = __toESM(require("classnames/dedupe"));
+var import_Icon = require("@simplybusiness/mobius/src/components/Icon/Icon.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ICON_PREFIX = "mobius-icon";
+var capitaliseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+function Icon({
+  ref,
+  icon,
+  className,
+  size = "xs",
+  color,
+  fixedWidth,
+  spin,
+  spinReverse,
+  title,
+  ...otherProps
+}) {
+  if (!icon) {
+    throw new Error("Must specify icon object");
+  }
+  const classes = (0, import_dedupe.default)(
+    "mobius",
+    "mobius-icon",
+    `svg-inline--${ICON_PREFIX}`,
+    `--size-${size}`,
+    className,
+    {
+      [`${ICON_PREFIX}-fw`]: fixedWidth,
+      [`${ICON_PREFIX}-spin`]: spin || spinReverse,
+      [`${ICON_PREFIX}-spin-reverse`]: spinReverse
+    }
+  );
+  const { iconName, width, height, svgPathData } = icon;
+  const formattedIconName = iconName.split("-").join(" ");
+  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;
+  const titleText = title || defaultTitle;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      ref,
+      focusable: "false",
+      "data-icon": iconName,
+      className: classes,
+      role: "img",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${width} ${height}`,
+      style: { color },
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: titleText }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: svgPathData })
+      ]
+    }
+  );
+}
+
+// src/components/Alert/Alert.tsx
+var import_Alert = require("@simplybusiness/mobius/src/components/Alert/Alert.css");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function isAlertVariant(value) {
+  return value === "info" || value === "success" || value === "warning" || value === "error";
+}
+var Alert = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    variant: variantProp,
+    show = true,
+    header,
+    children,
+    ...otherProps
+  } = props;
+  if (!show) return null;
+  const variant = variantProp && isAlertVariant(variantProp) ? variantProp : "info";
+  const colorValue = variant === "success" ? `var(--color-valid)` : `var(--color-${variant})`;
+  const classes = (0, import_dedupe2.default)(
+    "mobius",
+    "mobius-alert",
+    {
+      "--info": variant === "info",
+      "--success": variant === "success",
+      "--warning": variant === "warning",
+      "--error": variant === "error",
+      "--has-header": header
+    },
+    otherProps.className
+  );
+  const icon = {
+    info: import_icons.circleInfo,
+    success: import_icons.circleTick,
+    warning: import_icons.warning,
+    error: import_icons.error
+  };
+  const headerClasses = (0, import_dedupe2.default)("mobius", "mobius-alert__header");
+  const iconClasses = (0, import_dedupe2.default)("mobius", "mobius-alert__icon");
+  const contentClasses = (0, import_dedupe2.default)("mobius", "mobius-alert__content");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { icon: icon[variant], color: colorValue }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: headerClasses, children: header }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: contentClasses, children })
+    ] })
+  ] });
+};
+Alert.displayName = "Alert";
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Alert/Alert.tsx", "../../../../src/components/Icon/Icon.tsx"],
+  "sourcesContent": ["import { circleInfo, circleTick, error, warning } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Icon } from \"../Icon\";\nimport \"./Alert.css\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: React.ElementType;\n  variant?: string;\n  show?: boolean;\n  header?: string;\n}\n\ntype AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nfunction isAlertVariant(value: string): value is AlertVariant {\n  return (\n    value === \"info\" ||\n    value === \"success\" ||\n    value === \"warning\" ||\n    value === \"error\"\n  );\n}\n\nconst Alert = ({ ref, ...props }: AlertProps) => {\n  const {\n    elementType: Element = \"div\",\n    variant: variantProp,\n    show = true,\n    header,\n    children,\n    ...otherProps\n  } = props;\n\n  if (!show) return null;\n\n  const variant: AlertVariant =\n    variantProp && isAlertVariant(variantProp) ? variantProp : \"info\";\n\n  const colorValue =\n    variant === \"success\" ? `var(--color-valid)` : `var(--color-${variant})`;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-alert\",\n    {\n      \"--info\": variant === \"info\",\n      \"--success\": variant === \"success\",\n      \"--warning\": variant === \"warning\",\n      \"--error\": variant === \"error\",\n      \"--has-header\": header,\n    },\n    otherProps.className,\n  );\n  const icon = {\n    info: circleInfo,\n    success: circleTick,\n    warning,\n    error,\n  };\n\n  const headerClasses = classNames(\"mobius\", \"mobius-alert__header\");\n  const iconClasses = classNames(\"mobius\", \"mobius-alert__icon\");\n  const contentClasses = classNames(\"mobius\", \"mobius-alert__content\");\n\n  return (\n    <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n      <span className={iconClasses}>\n        <Icon icon={icon[variant]} color={colorValue} />\n      </span>\n      <div>\n        {header && <p className={headerClasses}>{header}</p>}\n        <div className={contentClasses}>{children}</div>\n      </div>\n    </Element>\n  );\n};\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n  ref,\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  title,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n  const formattedIconName = iconName.split(\"-\").join(\" \");\n\n  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n  const titleText = title || defaultTitle;\n\n  return (\n    <svg\n      ref={ref}\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <title>{titleText}</title>\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["import_dedupe", "classNames", "import_jsx_runtime", "classNames"]
+}

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

@@ -0,0 +1,146 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Alert/index.tsx
+var Alert_exports = {};
+__export(Alert_exports, {
+  Alert: () => Alert
+});
+module.exports = __toCommonJS(Alert_exports);
+
+// src/components/Alert/Alert.tsx
+var import_icons = require("@simplybusiness/icons");
+var import_dedupe2 = __toESM(require("classnames/dedupe"));
+
+// src/components/Icon/Icon.tsx
+var import_dedupe = __toESM(require("classnames/dedupe"));
+var import_Icon = require("@simplybusiness/mobius/src/components/Icon/Icon.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ICON_PREFIX = "mobius-icon";
+var capitaliseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+function Icon({
+  ref,
+  icon,
+  className,
+  size = "xs",
+  color,
+  fixedWidth,
+  spin,
+  spinReverse,
+  title,
+  ...otherProps
+}) {
+  if (!icon) {
+    throw new Error("Must specify icon object");
+  }
+  const classes = (0, import_dedupe.default)(
+    "mobius",
+    "mobius-icon",
+    `svg-inline--${ICON_PREFIX}`,
+    `--size-${size}`,
+    className,
+    {
+      [`${ICON_PREFIX}-fw`]: fixedWidth,
+      [`${ICON_PREFIX}-spin`]: spin || spinReverse,
+      [`${ICON_PREFIX}-spin-reverse`]: spinReverse
+    }
+  );
+  const { iconName, width, height, svgPathData } = icon;
+  const formattedIconName = iconName.split("-").join(" ");
+  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;
+  const titleText = title || defaultTitle;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      ref,
+      focusable: "false",
+      "data-icon": iconName,
+      className: classes,
+      role: "img",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${width} ${height}`,
+      style: { color },
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: titleText }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: svgPathData })
+      ]
+    }
+  );
+}
+
+// src/components/Alert/Alert.tsx
+var import_Alert = require("@simplybusiness/mobius/src/components/Alert/Alert.css");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function isAlertVariant(value) {
+  return value === "info" || value === "success" || value === "warning" || value === "error";
+}
+var Alert = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    variant: variantProp,
+    show = true,
+    header,
+    children,
+    ...otherProps
+  } = props;
+  if (!show) return null;
+  const variant = variantProp && isAlertVariant(variantProp) ? variantProp : "info";
+  const colorValue = variant === "success" ? `var(--color-valid)` : `var(--color-${variant})`;
+  const classes = (0, import_dedupe2.default)(
+    "mobius",
+    "mobius-alert",
+    {
+      "--info": variant === "info",
+      "--success": variant === "success",
+      "--warning": variant === "warning",
+      "--error": variant === "error",
+      "--has-header": header
+    },
+    otherProps.className
+  );
+  const icon = {
+    info: import_icons.circleInfo,
+    success: import_icons.circleTick,
+    warning: import_icons.warning,
+    error: import_icons.error
+  };
+  const headerClasses = (0, import_dedupe2.default)("mobius", "mobius-alert__header");
+  const iconClasses = (0, import_dedupe2.default)("mobius", "mobius-alert__icon");
+  const contentClasses = (0, import_dedupe2.default)("mobius", "mobius-alert__content");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { icon: icon[variant], color: colorValue }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: headerClasses, children: header }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: contentClasses, children })
+    ] })
+  ] });
+};
+Alert.displayName = "Alert";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Alert/index.tsx", "../../../../src/components/Alert/Alert.tsx", "../../../../src/components/Icon/Icon.tsx"],
+  "sourcesContent": ["export * from \"./Alert\";\n", "import { circleInfo, circleTick, error, warning } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Icon } from \"../Icon\";\nimport \"./Alert.css\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: React.ElementType;\n  variant?: string;\n  show?: boolean;\n  header?: string;\n}\n\ntype AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nfunction isAlertVariant(value: string): value is AlertVariant {\n  return (\n    value === \"info\" ||\n    value === \"success\" ||\n    value === \"warning\" ||\n    value === \"error\"\n  );\n}\n\nconst Alert = ({ ref, ...props }: AlertProps) => {\n  const {\n    elementType: Element = \"div\",\n    variant: variantProp,\n    show = true,\n    header,\n    children,\n    ...otherProps\n  } = props;\n\n  if (!show) return null;\n\n  const variant: AlertVariant =\n    variantProp && isAlertVariant(variantProp) ? variantProp : \"info\";\n\n  const colorValue =\n    variant === \"success\" ? `var(--color-valid)` : `var(--color-${variant})`;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-alert\",\n    {\n      \"--info\": variant === \"info\",\n      \"--success\": variant === \"success\",\n      \"--warning\": variant === \"warning\",\n      \"--error\": variant === \"error\",\n      \"--has-header\": header,\n    },\n    otherProps.className,\n  );\n  const icon = {\n    info: circleInfo,\n    success: circleTick,\n    warning,\n    error,\n  };\n\n  const headerClasses = classNames(\"mobius\", \"mobius-alert__header\");\n  const iconClasses = classNames(\"mobius\", \"mobius-alert__icon\");\n  const contentClasses = classNames(\"mobius\", \"mobius-alert__content\");\n\n  return (\n    <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n      <span className={iconClasses}>\n        <Icon icon={icon[variant]} color={colorValue} />\n      </span>\n      <div>\n        {header && <p className={headerClasses}>{header}</p>}\n        <div className={contentClasses}>{children}</div>\n      </div>\n    </Element>\n  );\n};\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n  str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n  ref,\n  icon,\n  className,\n  size = \"xs\",\n  color,\n  fixedWidth,\n  spin,\n  spinReverse,\n  title,\n  ...otherProps\n}: IconProps) {\n  if (!icon) {\n    throw new Error(\"Must specify icon object\");\n  }\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-icon\",\n    `svg-inline--${ICON_PREFIX}`,\n    `--size-${size}`,\n    className,\n    {\n      [`${ICON_PREFIX}-fw`]: fixedWidth,\n      [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n      [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n    },\n  );\n\n  const { iconName, width, height, svgPathData } = icon;\n  const formattedIconName = iconName.split(\"-\").join(\" \");\n\n  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n  const titleText = title || defaultTitle;\n\n  return (\n    <svg\n      ref={ref}\n      focusable=\"false\"\n      data-icon={iconName}\n      className={classes}\n      role=\"img\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ color }}\n      {...otherProps}\n    >\n      <title>{titleText}</title>\n      <path fill=\"currentColor\" d={svgPathData} />\n    </svg>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["import_dedupe", "classNames", "import_jsx_runtime", "classNames"]
+}

package/dist/cjs/components/Box/Box.js

@@ -0,0 +1,108 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Box/Box.tsx
+var Box_exports = {};
+__export(Box_exports, {
+  Box: () => Box
+});
+module.exports = __toCommonJS(Box_exports);
+var import_dedupe = __toESM(require("classnames/dedupe"));
+
+// src/utils/filterUndefinedProps.ts
+var filterUndefinedProps = (props) => {
+  const filteredProps = {};
+  Object.keys(props).forEach((key) => {
+    if (props[key] !== void 0) {
+      filteredProps[key] = props[key];
+    }
+  });
+  return filteredProps;
+};
+
+// src/utils/getSpacingValue.ts
+var getSpacingValue = (padding) => {
+  if (typeof padding === "string") {
+    return `var(--size-${padding})`;
+  }
+  if (typeof padding === "number") {
+    return `${padding}px`;
+  }
+  return void 0;
+};
+
+// src/components/Box/Box.tsx
+var import_Box = require("@simplybusiness/mobius/src/components/Box/Box.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    padding,
+    paddingX,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingY,
+    paddingBlock,
+    paddingBlockStart,
+    paddingBlockEnd,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    width,
+    height,
+    style,
+    ...otherProps
+  } = props;
+  const classes = (0, import_dedupe.default)("mobius", "mobius-box", otherProps.className);
+  const styleProps = filterUndefinedProps({
+    padding: getSpacingValue(padding),
+    paddingInline: getSpacingValue(paddingInline || paddingX),
+    paddingBlock: getSpacingValue(paddingBlock || paddingY),
+    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),
+    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),
+    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),
+    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    width,
+    height,
+    ...style
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
+};
+Box.displayName = "Box";
+//# sourceMappingURL=Box.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Box/Box.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/getSpacingValue.ts"],
+  "sourcesContent": ["import classNames from \"classnames/dedupe\";\nimport type { BoxProps } from \"./types\";\nimport { getSpacingValue, filterUndefinedProps } from \"../../utils\";\nimport \"./Box.css\";\n\nconst Box = ({ ref, ...props }: BoxProps) => {\n  const {\n    elementType: Element = \"div\",\n    padding,\n    paddingX,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingY,\n    paddingBlock,\n    paddingBlockStart,\n    paddingBlockEnd,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    style,\n    ...otherProps\n  } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n  const styleProps = filterUndefinedProps({\n    padding: getSpacingValue(padding),\n    paddingInline: getSpacingValue(paddingInline || paddingX),\n    paddingBlock: getSpacingValue(paddingBlock || paddingY),\n    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    ...style,\n  });\n\n  return (\n    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />\n  );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n", "export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n", "import type { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;;;ACAhB,IAAM,uBAAuB,CAAC,UAAmC;AACtE,QAAM,gBAAyC,CAAC;AAChD,SAAO,KAAK,KAAK,EAAE,QAAQ,SAAO;AAChC,QAAI,MAAM,GAAG,MAAM,QAAW;AAC5B,oBAAc,GAAG,IAAI,MAAM,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACD,SAAO;AACT;;;ACNO,IAAM,kBAAkB,CAC7B,YACuB;AACvB,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,cAAc,OAAO;AAAA,EAC9B;AAEA,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,GAAG,OAAO;AAAA,EACnB;AAEA,SAAO;AACT;;;AFXA,iBAAO;AAgDH;AA9CJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM;AAAA,IACJ,aAAa,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAU,cAAAA,SAAW,UAAU,cAAc,WAAW,SAAS;AAEvE,QAAM,aAAa,qBAAqB;AAAA,IACtC,SAAS,gBAAgB,OAAO;AAAA,IAChC,eAAe,gBAAgB,iBAAiB,QAAQ;AAAA,IACxD,cAAc,gBAAgB,gBAAgB,QAAQ;AAAA,IACtD,YAAY,gBAAgB,cAAc,iBAAiB;AAAA,IAC3D,cAAc,gBAAgB,gBAAgB,gBAAgB;AAAA,IAC9D,eAAe,gBAAgB,iBAAiB,eAAe;AAAA,IAC/D,aAAa,gBAAgB,eAAe,kBAAkB;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AAED,SACE,4CAAC,WAAQ,KAAU,OAAO,YAAa,GAAG,YAAY,WAAW,SAAS;AAE9E;AAEA,IAAI,cAAc;",
+  "names": ["classNames"]
+}

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

@@ -0,0 +1,110 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Box/index.tsx
+var Box_exports = {};
+__export(Box_exports, {
+  Box: () => Box
+});
+module.exports = __toCommonJS(Box_exports);
+
+// src/components/Box/Box.tsx
+var import_dedupe = __toESM(require("classnames/dedupe"));
+
+// src/utils/filterUndefinedProps.ts
+var filterUndefinedProps = (props) => {
+  const filteredProps = {};
+  Object.keys(props).forEach((key) => {
+    if (props[key] !== void 0) {
+      filteredProps[key] = props[key];
+    }
+  });
+  return filteredProps;
+};
+
+// src/utils/getSpacingValue.ts
+var getSpacingValue = (padding) => {
+  if (typeof padding === "string") {
+    return `var(--size-${padding})`;
+  }
+  if (typeof padding === "number") {
+    return `${padding}px`;
+  }
+  return void 0;
+};
+
+// src/components/Box/Box.tsx
+var import_Box = require("@simplybusiness/mobius/src/components/Box/Box.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    padding,
+    paddingX,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingY,
+    paddingBlock,
+    paddingBlockStart,
+    paddingBlockEnd,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    width,
+    height,
+    style,
+    ...otherProps
+  } = props;
+  const classes = (0, import_dedupe.default)("mobius", "mobius-box", otherProps.className);
+  const styleProps = filterUndefinedProps({
+    padding: getSpacingValue(padding),
+    paddingInline: getSpacingValue(paddingInline || paddingX),
+    paddingBlock: getSpacingValue(paddingBlock || paddingY),
+    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),
+    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),
+    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),
+    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    width,
+    height,
+    ...style
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
+};
+Box.displayName = "Box";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Box/index.tsx", "../../../../src/components/Box/Box.tsx", "../../../../src/utils/filterUndefinedProps.ts", "../../../../src/utils/getSpacingValue.ts"],
+  "sourcesContent": ["export * from \"./Box\";\n", "import classNames from \"classnames/dedupe\";\nimport type { BoxProps } from \"./types\";\nimport { getSpacingValue, filterUndefinedProps } from \"../../utils\";\nimport \"./Box.css\";\n\nconst Box = ({ ref, ...props }: BoxProps) => {\n  const {\n    elementType: Element = \"div\",\n    padding,\n    paddingX,\n    paddingInline,\n    paddingInlineStart,\n    paddingInlineEnd,\n    paddingY,\n    paddingBlock,\n    paddingBlockStart,\n    paddingBlockEnd,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    style,\n    ...otherProps\n  } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-box\", otherProps.className);\n\n  const styleProps = filterUndefinedProps({\n    padding: getSpacingValue(padding),\n    paddingInline: getSpacingValue(paddingInline || paddingX),\n    paddingBlock: getSpacingValue(paddingBlock || paddingY),\n    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),\n    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),\n    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),\n    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n    width,\n    height,\n    ...style,\n  });\n\n  return (\n    <Element ref={ref} style={styleProps} {...otherProps} className={classes} />\n  );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n", "export const filterUndefinedProps = (props: Record<string, unknown>) => {\n  const filteredProps: Record<string, unknown> = {};\n  Object.keys(props).forEach(key => {\n    if (props[key] !== undefined) {\n      filteredProps[key] = props[key];\n    }\n  });\n  return filteredProps;\n};\n", "import type { SpacingType } from \"../types\";\n\nexport const getSpacingValue = (\n  padding: SpacingType | undefined,\n): string | undefined => {\n  if (typeof padding === \"string\") {\n    return `var(--size-${padding})`;\n  }\n\n  if (typeof padding === \"number\") {\n    return `${padding}px`;\n  }\n\n  return undefined;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAAuB;;;ACAhB,IAAM,uBAAuB,CAAC,UAAmC;AACtE,QAAM,gBAAyC,CAAC;AAChD,SAAO,KAAK,KAAK,EAAE,QAAQ,SAAO;AAChC,QAAI,MAAM,GAAG,MAAM,QAAW;AAC5B,oBAAc,GAAG,IAAI,MAAM,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACD,SAAO;AACT;;;ACNO,IAAM,kBAAkB,CAC7B,YACuB;AACvB,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,cAAc,OAAO;AAAA,EAC9B;AAEA,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,GAAG,OAAO;AAAA,EACnB;AAEA,SAAO;AACT;;;AFXA,iBAAO;AAgDH;AA9CJ,IAAM,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,MAAgB;AAC3C,QAAM;AAAA,IACJ,aAAa,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAU,cAAAA,SAAW,UAAU,cAAc,WAAW,SAAS;AAEvE,QAAM,aAAa,qBAAqB;AAAA,IACtC,SAAS,gBAAgB,OAAO;AAAA,IAChC,eAAe,gBAAgB,iBAAiB,QAAQ;AAAA,IACxD,cAAc,gBAAgB,gBAAgB,QAAQ;AAAA,IACtD,YAAY,gBAAgB,cAAc,iBAAiB;AAAA,IAC3D,cAAc,gBAAgB,gBAAgB,gBAAgB;AAAA,IAC9D,eAAe,gBAAgB,iBAAiB,eAAe;AAAA,IAC/D,aAAa,gBAAgB,eAAe,kBAAkB;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AAED,SACE,4CAAC,WAAQ,KAAU,OAAO,YAAa,GAAG,YAAY,WAAW,SAAS;AAE9E;AAEA,IAAI,cAAc;",
+  "names": ["classNames"]
+}