@uh-design-system/component-library 0.0.1-alpha.9 → 0.1.0

package/dist/collection/components/01-base-components/ds-icon/ds-icon.js

@@ -0,0 +1,184 @@
+import { Fragment, h } from "@stencil/core";
+import { icons } from "../../../components/00-foundations/icons/iconList";
+export class DsIcon {
+    constructor() {
+        this.name = undefined;
+        this.colour = undefined;
+        this.size = undefined;
+        this.title = 'Icon';
+        this.role = 'img';
+        this.hidden = true;
+        this.message = '';
+    }
+    // get the icon from the icon list
+    getIcon() {
+        const selectedIcon = icons.find(icon => icon.name === this.name);
+        if (!selectedIcon) {
+            console.warn(`Icon with name "${this.name}" not found.`);
+            return '';
+        }
+        const svgElement = this.parseSvg(selectedIcon.component);
+        if (svgElement) {
+            this.setIconAttributes(svgElement);
+        }
+        return svgElement ? svgElement.outerHTML : '';
+    }
+    // parse the svg string to an svg element
+    parseSvg(svgString) {
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
+        return svgDoc.querySelector('svg');
+    }
+    // get the colour of the icon
+    getIconColour() {
+        const cssVariable = `--colour-${this.colour}`;
+        return getComputedStyle(document.documentElement).getPropertyValue(cssVariable) || this.colour;
+    }
+    // set the attributes of the icon
+    setIconAttributes(svgElement) {
+        const size = this.size || '1.5rem';
+        const colour = this.getIconColour() || 'currentColor';
+        const role = this.role || 'img';
+        const title = this.title || '';
+        svgElement.setAttribute('style', `fill: ${colour}; width: ${size}; height: ${size};`);
+        svgElement.setAttribute('role', role);
+        // if title is available, insert it into the svg element
+        const titleText = title || 'Icon';
+        const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+        titleElement.textContent = titleText;
+        svgElement.insertBefore(titleElement, svgElement.firstChild);
+        if (!title) {
+            svgElement.setAttribute('aria-label', 'Icon');
+        }
+    }
+    render() {
+        return (h(Fragment, { key: '8a2414880389617aa1f009bc7972201ee877ab65' }, h("span", { key: 'e7441e46ef7473d1e7d1a40b70eacc843ee742ea', class: "icon-container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+    }
+    static get is() { return "ds-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "colour": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "colour",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "'Icon'"
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "role",
+                "reflect": false,
+                "defaultValue": "'img'"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hidden",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "message": {}
+        };
+    }
+}
+//# sourceMappingURL=ds-icon.js.map

package/dist/collection/components/01-base-components/ds-icon/ds-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.js","sourceRoot":"","sources":["../../../../src/components/01-base-components/ds-icon/ds-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, Prop, State, h } from '@stencil/core';\nimport { icons } from '../../../components/00-foundations/icons/iconList';\n\n@Component({\n  tag: 'ds-icon',\n  styleUrl: 'ds-icon.css',\n  shadow: true,\n})\nexport class DsIcon {\n  @Prop() name: string;\n  @Prop() colour: string;\n  @Prop() size: string;\n  @Prop() title: string = 'Icon';\n  @Prop() role: string = 'img';\n  @Prop() hidden: boolean = true;\n\n  @State() message: string = '';\n\n  // get the icon from the icon list\n  private getIcon(): string {\n    const selectedIcon = icons.find(icon => icon.name === this.name);\n    if (!selectedIcon) {\n      console.warn(`Icon with name \"${this.name}\" not found.`);\n      return '';\n    }\n\n    const svgElement = this.parseSvg(selectedIcon.component);\n    if (svgElement) {\n      this.setIconAttributes(svgElement);\n    }\n    return svgElement ? svgElement.outerHTML : '';\n  }\n\n  // parse the svg string to an svg element\n  private parseSvg(svgString: string): SVGElement | null {\n    const parser = new DOMParser();\n    const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n    return svgDoc.querySelector('svg');\n  }\n\n  // get the colour of the icon\n  private getIconColour(): string {\n    const cssVariable = `--colour-${this.colour}`;\n    return getComputedStyle(document.documentElement).getPropertyValue(cssVariable) || this.colour;\n  }\n\n  // set the attributes of the icon\n  private setIconAttributes(svgElement: SVGElement): void {\n    const size = this.size || '1.5rem';\n    const colour = this.getIconColour() || 'currentColor';\n    const role = this.role || 'img';\n    const title = this.title || '';\n\n    svgElement.setAttribute('style', `fill: ${colour}; width: ${size}; height: ${size};`);\n    svgElement.setAttribute('role', role);\n    // if title is available, insert it into the svg element\n    const titleText = title || 'Icon';\n    const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');\n    titleElement.textContent = titleText;\n    svgElement.insertBefore(titleElement, svgElement.firstChild);\n\n    if (!title) {\n      svgElement.setAttribute('aria-label', 'Icon');\n    }\n  }\n\n  render() {\n    return (\n      <Fragment>\n        <span\n          class = \"icon-container\"\n          innerHTML = { this.getIcon() }\n          aria-hidden = { this.hidden ? 'true' : 'false' }\n        />\n      </Fragment>\n    );\n  }\n}\n"]}

package/dist/collection/components/01-base-components/ds-icon/ds-icon.stories.js

@@ -0,0 +1,56 @@
+import { icons } from "../../../components/00-foundations/icons/iconList";
+import { getColourVariables } from "../../../utils/colours/colourUtils";
+const meta = {
+    title: 'Base Components/Icon',
+    component: 'ds-icon',
+    argTypes: {
+        name: {
+            options: icons.map(icon => icon.name),
+            control: {
+                type: 'select',
+            },
+            name: 'Icon',
+        },
+        colour: {
+            options: getColourVariables().map(colour => colour.name),
+            control: {
+                type: 'select',
+            },
+            name: 'Colour',
+        },
+        size: {
+            options: [1, 1.5, 2, 3, 4].map(size => `${size}rem`),
+            control: {
+                type: 'select',
+            },
+            name: 'Size',
+        },
+        title: {
+            control: {
+                type: 'text',
+            },
+            name: 'Title',
+        },
+        hidden: {
+            control: {
+                type: 'boolean',
+            },
+            name: 'Hidden (aria-hidden)',
+        },
+        role: {
+            control: {
+                type: 'text',
+            },
+            name: 'Role',
+        },
+    },
+};
+export default meta;
+export const Default = {};
+Default.args = {
+    name: 'archive',
+    role: 'img',
+    title: 'Icon',
+    hidden: true,
+};
+//# sourceMappingURL=ds-icon.stories.js.map

package/dist/collection/components/01-base-components/ds-icon/ds-icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.stories.js","sourceRoot":"","sources":["../../../../src/components/01-base-components/ds-icon/ds-icon.stories.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,mDAAmD,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE,MAAM,IAAI,GAAmC;IAC3C,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC;YACrC,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,IAAI,EAAE,MAAM;SACb;QACD,MAAM,EAAE;YACN,OAAO,EAAE,kBAAkB,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;YACxD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,IAAI,EAAE,QAAQ;SACf;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,KAAK,CAAC;YACpD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,IAAI,EAAE,MAAM;SACb;QACD,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;YACD,IAAI,EAAE,OAAO;SACd;QACD,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;aAChB;YACD,IAAI,EAAE,sBAAsB;SAC7B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;YACD,IAAI,EAAE,MAAM;SACb;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,IAAI;CACb,CAAC","sourcesContent":["/** src/components/01-base-components/ds-icon/ds-icon.stories.ts */\nimport { Meta, StoryObj } from '@storybook/web-components'\nimport { DsIcon } from './ds-icon';\nimport { icons } from '../../../components/00-foundations/icons/iconList';\nimport { getColourVariables } from '../../../utils/colours/colourUtils';\n\nconst meta: Meta<typeof DsIcon.prototype>  = {\n  title: 'Base Components/Icon',\n  component: 'ds-icon',\n  argTypes: {\n    name: {\n      options: icons.map(icon => icon.name),\n      control: {\n        type: 'select',\n      },\n      name: 'Icon',\n    },\n    colour: {\n      options: getColourVariables().map(colour => colour.name),\n      control: {\n        type: 'select',\n      },\n      name: 'Colour',\n    },\n    size: {\n      options: [1, 1.5, 2, 3, 4].map(size => `${size}rem`),\n      control: {\n        type: 'select',\n      },\n      name: 'Size',\n    },\n    title: {\n      control: {\n        type: 'text',\n      },\n      name: 'Title',\n    },\n    hidden: {\n      control: {\n        type: 'boolean',\n      },\n      name: 'Hidden (aria-hidden)',\n    },\n    role: {\n      control: {\n        type: 'text',\n      },\n      name: 'Role',\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {};\n\nDefault.args = {\n  name: 'archive',\n  role: 'img',\n  title: 'Icon',\n  hidden: true,\n};\n"]}

package/dist/collection/index.js

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';
+//# sourceMappingURL=index.js.map

package/dist/collection/utils/borders/borderUtils.js

@@ -0,0 +1,43 @@
+// src/utils/borders/borderUtils.ts
+import "./borderBox.scss";
+export const getBorderVariables = () => {
+    const borderVariables = [];
+    const rule = Array.from(document.styleSheets)
+        .flatMap((sheet) => Array.from(sheet.cssRules))
+        .find((rule) => rule.selectorText === ':root' && rule.cssText.includes('--border'));
+    if (!rule) {
+        console.warn('Could not read stylesheet:');
+        return borderVariables;
+    }
+    const cssText = rule.cssText;
+    const matches = cssText.match(/--(borderWidth)--[\w-]+:\s*[^;]+/g);
+    if (matches) {
+        matches.forEach(match => {
+            const [variable, value] = match.split(/:\s*/);
+            const name = variable.replace(/^--/, '').trim();
+            borderVariables.push({ name, variable: variable.trim(), value: value.trim() });
+        });
+    }
+    else {
+        console.log('No matches found');
+    }
+    return borderVariables;
+};
+export const createBorderItem = (name, value) => {
+    const borderBox = document.createElement('div');
+    borderBox.className = 'border-box';
+    const borderName = document.createElement('div');
+    borderName.className = `border-name ${name}`;
+    borderName.innerHTML = `${name}`;
+    const borderInfo = document.createElement('div');
+    borderInfo.className = 'border-value';
+    borderInfo.innerHTML = `${value}`;
+    const borderCell = document.createElement('div');
+    borderCell.className = 'border-cell';
+    borderCell.style.borderWidth = `${value}`;
+    borderBox.appendChild(borderName);
+    borderBox.appendChild(borderInfo);
+    borderBox.appendChild(borderCell);
+    return borderBox;
+};
+//# sourceMappingURL=borderUtils.js.map

package/dist/collection/utils/borders/borderUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"borderUtils.js","sourceRoot":"","sources":["../../../src/utils/borders/borderUtils.ts"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,eAAe,GAAG,EAAE,CAAC;IAE3B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;SAC1C,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SAC9C,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAE,IAAqB,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;IAExG,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;QAC3C,OAAO,eAAe,CAAC;IACzB,CAAC;IAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC7B,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,mCAAmC,CAAC,CAAC;IACnE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACtB,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC9C,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;YAChD,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACjF,CAAC,CAAC,CAAC;IACL,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAClC,CAAC;IACD,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE;IAC9D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,SAAS,GAAG,YAAY,CAAC;IAEnC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,SAAS,GAAG,eAAe,IAAI,EAAE,CAAC;IAC7C,UAAU,CAAC,SAAS,GAAG,GAAG,IAAI,EAAE,CAAC;IAEjC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,SAAS,GAAG,cAAc,CAAC;IACtC,UAAU,CAAC,SAAS,GAAG,GAAG,KAAK,EAAE,CAAC;IAElC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,SAAS,GAAG,aAAa,CAAC;IACrC,UAAU,CAAC,KAAK,CAAC,WAAW,GAAG,GAAG,KAAK,EAAE,CAAC;IAE1C,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAElC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// src/utils/borders/borderUtils.ts\n\nimport './borderBox.scss';\n\nexport const getBorderVariables = () => {\n  const borderVariables = [];\n\n  const rule = Array.from(document.styleSheets)\n    .flatMap((sheet) => Array.from(sheet.cssRules))\n    .find((rule) => (rule as CSSStyleRule).selectorText === ':root' && rule.cssText.includes('--border'));\n\n  if (!rule) {\n    console.warn('Could not read stylesheet:');\n    return borderVariables;\n  }\n\n  const cssText = rule.cssText;\n  const matches = cssText.match(/--(borderWidth)--[\\w-]+:\\s*[^;]+/g);\n  if (matches) {\n    matches.forEach(match => {\n      const [variable, value] = match.split(/:\\s*/);\n      const name = variable.replace(/^--/, '').trim();\n      borderVariables.push({ name, variable: variable.trim(), value: value.trim() });\n    });\n  } else {\n    console.log('No matches found');\n  }\n  return borderVariables;\n};\n\nexport const createBorderItem = (name: string, value: string) => {\n  const borderBox = document.createElement('div');\n  borderBox.className = 'border-box';\n\n  const borderName = document.createElement('div');\n  borderName.className = `border-name ${name}`;\n  borderName.innerHTML = `${name}`;\n\n  const borderInfo = document.createElement('div');\n  borderInfo.className = 'border-value';\n  borderInfo.innerHTML = `${value}`;\n\n  const borderCell = document.createElement('div');\n  borderCell.className = 'border-cell';\n  borderCell.style.borderWidth = `${value}`;\n\n  borderBox.appendChild(borderName);\n  borderBox.appendChild(borderInfo);\n  borderBox.appendChild(borderCell);\n\n  return borderBox;\n};\n"]}

package/dist/collection/utils/colours/colourUtils.js

@@ -0,0 +1,75 @@
+// src/utils/colours/colourUtils.ts
+import "./colourBox.scss";
+export const categories = {
+    '--colour-grayscale': 'Grayscale',
+    '--colour-main': 'Main colours',
+    '--colour-semantic-neutral': 'Semantic|neutral',
+    '--colour-semantic-alert': 'Semantic|alert',
+    '--colour-semantic-error': 'Semantic|error',
+    '--colour-semantic-success': 'Semantic|success',
+    '--colour-opaque-black': 'Opaque|black',
+    '--colour-opaque-white': 'Opaque|white',
+};
+export const getColourVariables = () => {
+    const colourVariables = [];
+    const rule = Array.from(document.styleSheets)
+        .flatMap((sheet) => Array.from(sheet.cssRules))
+        .find((rule) => rule.selectorText === ':root');
+    if (!rule) {
+        console.warn('Could not read stylesheet:');
+        return colourVariables;
+    }
+    const cssText = rule.cssText;
+    const matches = cssText.match(/--colour-[\w-]+:\s*(#[0-9a-fA-F]+|rgba?\([\d\s,.%]+\))/g);
+    if (matches) {
+        matches.forEach(match => {
+            const [variable, value] = match.split(/:\s*/);
+            const name = variable.replace('--colour-', '').trim();
+            const categoryKey = Object.keys(categories).find(key => variable.includes(key));
+            const category = categoryKey ? categories[categoryKey] : 'Other';
+            colourVariables.push({ name, variable: variable.trim(), value: value.trim(), category });
+        });
+    }
+    return colourVariables;
+};
+export const createColourBox = (name, hex) => {
+    const colourBox = document.createElement('div');
+    colourBox.className = 'colour-box';
+    const colourSwatch = document.createElement('div');
+    colourSwatch.className = 'colour-swatch';
+    colourSwatch.style.backgroundColor = hex;
+    const colourInfo = document.createElement('div');
+    colourInfo.className = 'colour-info';
+    colourInfo.innerHTML = `${name} <br /> <code>${hex}</code>`;
+    colourBox.appendChild(colourSwatch);
+    colourBox.appendChild(colourInfo);
+    return colourBox;
+};
+export const createCategorySection = (category, colours, renderedCategories) => {
+    const section = document.createElement('div');
+    const [mainCategory, subCategory] = category.split('|');
+    if (!renderedCategories.has(mainCategory)) {
+        const title = document.createElement('h2');
+        title.textContent = mainCategory;
+        section.appendChild(title);
+        renderedCategories.add(mainCategory);
+    }
+    if (subCategory) {
+        const subCategoryTitle = document.createElement('h3');
+        subCategoryTitle.textContent = subCategory;
+        section.appendChild(subCategoryTitle);
+    }
+    const gridContainer = document.createElement('div');
+    const classes = ['grid-container'];
+    if (mainCategory) {
+        const category = subCategory ? `${mainCategory.toLowerCase().split(' ')[0]}-${subCategory.toLowerCase().split(' ')[0]}` : mainCategory.toLowerCase().split(' ')[0];
+        classes.push(category);
+    }
+    gridContainer.classList.add(...classes);
+    colours.forEach(colour => {
+        gridContainer.appendChild(createColourBox(colour.name, colour.value));
+    });
+    section.appendChild(gridContainer);
+    return section;
+};
+//# sourceMappingURL=colourUtils.js.map

package/dist/collection/utils/colours/colourUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colourUtils.js","sourceRoot":"","sources":["../../../src/utils/colours/colourUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// src/utils/colours/colourUtils.ts\n\nimport './colourBox.scss';\n\nexport const categories = {\n  '--colour-grayscale': 'Grayscale',\n  '--colour-main': 'Main colours',\n  '--colour-semantic-neutral': 'Semantic|neutral',\n  '--colour-semantic-alert': 'Semantic|alert',\n  '--colour-semantic-error': 'Semantic|error',\n  '--colour-semantic-success': 'Semantic|success',\n  '--colour-opaque-black': 'Opaque|black',\n  '--colour-opaque-white': 'Opaque|white',\n};\n\nexport const getColourVariables = () => {\n  const colourVariables = [];\n\n  const rule = Array.from(document.styleSheets)\n    .flatMap((sheet) => Array.from(sheet.cssRules))\n    .find((rule) => (rule as CSSStyleRule).selectorText === ':root');\n\n  if (!rule) {\n    console.warn('Could not read stylesheet:');\n    return colourVariables;\n  }\n\n  const cssText = rule.cssText;\n  const matches = cssText.match(/--colour-[\\w-]+:\\s*(#[0-9a-fA-F]+|rgba?\\([\\d\\s,.%]+\\))/g);\n  if (matches) {\n    matches.forEach(match => {\n      const [variable, value] = match.split(/:\\s*/);\n      const name = variable.replace('--colour-', '').trim();\n      const categoryKey = Object.keys(categories).find(key => variable.includes(key));\n      const category = categoryKey ? categories[categoryKey] : 'Other';\n      colourVariables.push({ name, variable: variable.trim(), value: value.trim(), category });\n    });\n  }\n  return colourVariables;\n};\n\nexport const createColourBox = (name: string, hex: string) => {\n  const colourBox = document.createElement('div');\n  colourBox.className = 'colour-box';\n\n  const colourSwatch = document.createElement('div');\n  colourSwatch.className = 'colour-swatch';\n  colourSwatch.style.backgroundColor = hex;\n\n  const colourInfo = document.createElement('div');\n  colourInfo.className = 'colour-info';\n  colourInfo.innerHTML = `${name} <br /> <code>${hex}</code>`;\n\n  colourBox.appendChild(colourSwatch);\n  colourBox.appendChild(colourInfo);\n\n  return colourBox;\n};\n\nexport const createCategorySection = (category: string, colours: { name: string, variable: string, value: string }[], renderedCategories: Set<string>) => {\n  const section = document.createElement('div');\n  const [mainCategory, subCategory] = category.split('|');\n\n  if (!renderedCategories.has(mainCategory)) {\n    const title = document.createElement('h2');\n    title.textContent = mainCategory;\n    section.appendChild(title);\n    renderedCategories.add(mainCategory);\n  }\n\n  if (subCategory) {\n    const subCategoryTitle = document.createElement('h3');\n    subCategoryTitle.textContent = subCategory;\n    section.appendChild(subCategoryTitle);\n  }\n\n  const gridContainer = document.createElement('div');\n  const classes = ['grid-container'];\n  if (mainCategory) {\n    const category = subCategory ? `${mainCategory.toLowerCase().split(' ')[0]}-${subCategory.toLowerCase().split(' ')[0]}` : mainCategory.toLowerCase().split(' ')[0];\n    classes.push(category);\n  }\n  gridContainer.classList.add(...classes);\n\n  colours.forEach(colour => {\n    gridContainer.appendChild(createColourBox(colour.name, colour.value));\n  });\n\n  section.appendChild(gridContainer);\n\n  return section;\n};\n"]}

package/dist/collection/utils/spacing/spacingUtils.js

@@ -0,0 +1,67 @@
+// src/utils/spacing/spacingUtils.ts
+import "./spacingBox.scss";
+export const categories = {
+    '--spacing--': 'Spacing',
+    '--spacingLayout--': 'Layout',
+};
+export const getSpacingVariables = () => {
+    const spacingVariables = [];
+    const rule = Array.from(document.styleSheets)
+        .flatMap((sheet) => Array.from(sheet.cssRules))
+        .find((rule) => rule.selectorText === ':root' && rule.cssText.includes('--spacing'));
+    if (!rule) {
+        console.warn('Could not read stylesheet:');
+        return spacingVariables;
+    }
+    const cssText = rule.cssText;
+    const matches = cssText.match(/--(spacing|spacingLayout)--[\w-]+:\s*[\d.]+rem/g);
+    if (matches) {
+        matches.forEach(match => {
+            console.log(match);
+            const [variable, value] = match.split(/:\s*/);
+            const name = variable.replace(/^--/, '').trim();
+            const categoryKey = Object.keys(categories).find(key => variable.includes(key));
+            const category = categoryKey ? categories[categoryKey] : 'Other';
+            spacingVariables.push({ name, variable: variable.trim(), value: value.trim(), category });
+        });
+    }
+    else {
+        console.log('No matches found');
+    }
+    return spacingVariables;
+};
+export const createSpacingBox = (name, value, width) => {
+    const spacingBox = document.createElement('div');
+    spacingBox.className = 'spacing-box';
+    const spacingName = document.createElement('div');
+    spacingName.className = 'spacing-name';
+    spacingName.innerHTML = `${name}`;
+    const spacingInfo = document.createElement('div');
+    spacingInfo.className = 'spacing-value';
+    spacingInfo.innerHTML = `${value}`;
+    const spacingBar = document.createElement('div');
+    spacingBar.className = 'spacing-bar';
+    spacingBar.style.width = width;
+    spacingBox.appendChild(spacingName);
+    spacingBox.appendChild(spacingInfo);
+    spacingBox.appendChild(spacingBar);
+    return spacingBox;
+};
+export const createCategorySection = (category, spacings, renderedCategories) => {
+    const section = document.createElement('div');
+    if (!renderedCategories.has(category)) {
+        const title = document.createElement('h2');
+        title.textContent = category;
+        section.appendChild(title);
+        renderedCategories.add(category);
+    }
+    const gridContainer = document.createElement('div');
+    spacings.forEach(spacing => {
+        const remValue = parseFloat(spacing.value);
+        const pixelValue = remValue * 16; // Assuming 1rem = 16px
+        gridContainer.appendChild(createSpacingBox(spacing.name, `${spacing.value} / ${pixelValue}px`, spacing.value));
+    });
+    section.appendChild(gridContainer);
+    return section;
+};
+//# sourceMappingURL=spacingUtils.js.map

package/dist/collection/utils/spacing/spacingUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacingUtils.js","sourceRoot":"","sources":["../../../src/utils/spacing/spacingUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// src/utils/spacing/spacingUtils.ts\n\nimport './spacingBox.scss';\n\nexport const categories = {\n  '--spacing--': 'Spacing',\n  '--spacingLayout--': 'Layout',\n};\n\nexport const getSpacingVariables = () => {\n  const spacingVariables = [];\n\n  const rule = Array.from(document.styleSheets)\n    .flatMap((sheet) => Array.from(sheet.cssRules))\n    .find((rule) => (rule as CSSStyleRule).selectorText === ':root' && rule.cssText.includes('--spacing'));\n\n  if (!rule) {\n    console.warn('Could not read stylesheet:');\n    return spacingVariables;\n  }\n\n  const cssText = rule.cssText;\n  const matches = cssText.match(/--(spacing|spacingLayout)--[\\w-]+:\\s*[\\d.]+rem/g);\n  if (matches) {\n    matches.forEach(match => {\n      console.log(match);\n      const [variable, value] = match.split(/:\\s*/);\n      const name = variable.replace(/^--/, '').trim();\n      const categoryKey = Object.keys(categories).find(key => variable.includes(key));\n      const category = categoryKey ? categories[categoryKey] : 'Other';\n      spacingVariables.push({ name, variable: variable.trim(), value: value.trim(), category });\n    });\n  } else {\n    console.log('No matches found');\n  }\n  return spacingVariables;\n};\n\nexport const createSpacingBox = (name: string, value: string, width: string) => {\n  const spacingBox = document.createElement('div');\n  spacingBox.className = 'spacing-box';\n\n  const spacingName = document.createElement('div');\n  spacingName.className = 'spacing-name';\n  spacingName.innerHTML = `${name}`;\n\n  const spacingInfo = document.createElement('div');\n  spacingInfo.className = 'spacing-value';\n  spacingInfo.innerHTML = `${value}`;\n\n  const spacingBar = document.createElement('div');\n  spacingBar.className = 'spacing-bar';\n  spacingBar.style.width = width;\n\n  spacingBox.appendChild(spacingName);\n  spacingBox.appendChild(spacingInfo);\n  spacingBox.appendChild(spacingBar);\n\n  return spacingBox;\n};\n\nexport const createCategorySection = (category: string, spacings: { name: string, variable: string, value: string }[], renderedCategories: Set<string>) => {\n  const section = document.createElement('div');\n\n  if (!renderedCategories.has(category)) {\n    const title = document.createElement('h2');\n    title.textContent = category;\n    section.appendChild(title);\n    renderedCategories.add(category);\n  }\n\n  const gridContainer = document.createElement('div');\n\n  spacings.forEach(spacing => {\n    const remValue = parseFloat(spacing.value);\n    const pixelValue = remValue * 16; // Assuming 1rem = 16px\n    gridContainer.appendChild(createSpacingBox(spacing.name, `${spacing.value} / ${pixelValue}px`, spacing.value));\n  });\n\n  section.appendChild(gridContainer);\n\n  return section;\n};\n"]}

package/dist/collection/utils/tests/testUtils.js

@@ -0,0 +1,20 @@
+import { fn, expect, waitFor, within } from "@storybook/test";
+/**
+ * Utility function for running storybook interaction tests in Shadow DOM containers.
+ * Logic taken from https://github.com/storybookjs/testing-library/issues/24#issuecomment-1593709872
+ */
+export const withinShadowRoot = async (customElem, selector) => {
+    const webc = customElem.querySelector(selector);
+    await waitFor(() => {
+        const shadowRootFirstEl = webc.shadowRoot.firstElementChild;
+        return expect(shadowRootFirstEl).toContainElement(shadowRootFirstEl);
+    }, { timeout: 5000 });
+    return within(webc.shadowRoot);
+};
+export const addMockEventListener = (container, selector, eventName) => {
+    const elem = container.querySelector(selector);
+    const mockFunction = fn();
+    elem.addEventListener(eventName, mockFunction);
+    return mockFunction;
+};
+//# sourceMappingURL=testUtils.js.map

package/dist/collection/utils/tests/testUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testUtils.js","sourceRoot":"","sources":["../../../src/utils/tests/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9D;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,EAAE,UAAuB,EAAE,QAAgB,EAAE,EAAE;IAClF,MAAM,IAAI,GAAG,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,OAAO,CACX,GAAG,EAAE;QACH,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,iBAAgC,CAAC;QAC3E,OAAO,MAAM,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACvE,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CAClB,CAAA;IACD,OAAO,MAAM,CAAC,IAAI,CAAC,UAAgC,CAAC,CAAC;AACvD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,SAAsB,EAAE,QAAgB,EAAE,SAAiB,EAAE,EAAE;IAClG,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/C,MAAM,YAAY,GAAG,EAAE,EAAE,CAAC;IAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IAC/C,OAAO,YAAY,CAAC;AACtB,CAAC,CAAA","sourcesContent":["import { fn, expect, waitFor, within } from '@storybook/test';\n\n/**\n * Utility function for running storybook interaction tests in Shadow DOM containers.\n * Logic taken from https://github.com/storybookjs/testing-library/issues/24#issuecomment-1593709872\n */\nexport const withinShadowRoot = async (customElem: HTMLElement, selector: string) => {\n  const webc = customElem.querySelector(selector);\n  await waitFor(\n    () => {\n      const shadowRootFirstEl = webc.shadowRoot.firstElementChild as HTMLElement;\n      return expect(shadowRootFirstEl).toContainElement(shadowRootFirstEl);\n    },\n    { timeout: 5000 }\n  )\n  return within(webc.shadowRoot as any as HTMLElement);\n}\n\nexport const addMockEventListener = (container: HTMLElement, selector: string, eventName: string) => {\n  const elem = container.querySelector(selector);\n  const mockFunction = fn();\n  elem.addEventListener(eventName, mockFunction);\n  return mockFunction;\n}\n"]}

package/dist/collection/utils/typography/typographyUtils.js

@@ -0,0 +1,88 @@
+// src/utils/typography/typographyUtils.ts
+import "./typographyBox.scss";
+export const categories = {
+    '--ds-fontFamily': 'Font family',
+    '--ds-fontSize': 'Font size',
+    '--ds-fontWeight': 'Font weight',
+    '--ds-letterSpacing': 'Letter spacing',
+    '--ds-lineHeight': 'Line height',
+    '--ds-fontWidth': 'Font width'
+};
+export const getTypographyVariables = () => {
+    const typographyVariables = [];
+    // There can be multiple rules so find and combine.
+    const findRootRule = () => {
+        const rootRules = [];
+        for (const sheet of document.styleSheets) {
+            try {
+                const rules = [...sheet.cssRules].filter((r) => r instanceof CSSStyleRule && r.selectorText === ':root');
+                rootRules.push(...rules.map(rule => rule.cssText));
+            }
+            catch (_a) {
+                console.warn('Issue occurred when extracting stylesheets.');
+            }
+        }
+        return rootRules.join(';');
+    };
+    const rules = findRootRule();
+    if (!rules) {
+        console.warn('Could not read stylesheet:');
+        return typographyVariables;
+    }
+    const matches = new Set(rules.match(/--(ds)-[\w-]+:\s*[^;]+/g));
+    if (matches) {
+        matches.forEach(match => {
+            const [variable, value] = match.split(/:\s*/);
+            const categoryKey = Object.keys(categories).find(key => variable.includes(key));
+            const category = categoryKey ? categories[categoryKey] : 'Other';
+            typographyVariables.push({ name: variable, variable: variable.trim(), value: value.trim(), category });
+        });
+    }
+    return typographyVariables;
+};
+export const createFontBox = (name, value, category) => {
+    const fontBox = document.createElement('div');
+    fontBox.className = 'font-box';
+    const fontInfo = document.createElement('div');
+    fontInfo.className = 'font-info';
+    fontInfo.innerHTML = `${name}`;
+    const fontValue = document.createElement('div');
+    fontValue.className = 'font-value';
+    fontValue.innerHTML = `${value}`;
+    const fontExtra = document.createElement('div');
+    const remValue = (1 / 16) * parseInt(value);
+    fontExtra.className = 'font-extra';
+    fontExtra.innerHTML = category === 'Font size' ? `${remValue}rem` : '';
+    fontBox.appendChild(fontInfo);
+    fontBox.appendChild(fontValue);
+    fontBox.appendChild(fontExtra);
+    return fontBox;
+};
+export const createCategorySection = (category, fonts, renderedCategories) => {
+    const section = document.createElement('div');
+    const [mainCategory, subCategory] = category.split('|');
+    if (!renderedCategories.has(mainCategory)) {
+        const title = document.createElement('h2');
+        title.textContent = mainCategory;
+        section.appendChild(title);
+        renderedCategories.add(mainCategory);
+    }
+    if (subCategory) {
+        const subCategoryTitle = document.createElement('h3');
+        subCategoryTitle.textContent = subCategory;
+        section.appendChild(subCategoryTitle);
+    }
+    const gridContainer = document.createElement('div');
+    const classes = ['font-grid-container'];
+    if (mainCategory) {
+        const category = subCategory ? `${mainCategory.toLowerCase().split(' ')[0]}-${subCategory.toLowerCase().split(' ')[0]}` : mainCategory.toLowerCase().split(' ')[0];
+        classes.push(category);
+    }
+    gridContainer.classList.add(...classes);
+    fonts.forEach(font => {
+        gridContainer.appendChild(createFontBox(font.name, font.value, category));
+    });
+    section.appendChild(gridContainer);
+    return section;
+};
+//# sourceMappingURL=typographyUtils.js.map

package/dist/collection/utils/typography/typographyUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typographyUtils.js","sourceRoot":"","sources":["../../../src/utils/typography/typographyUtils.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAE1C,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,iBAAiB,EAAE,aAAa;IAChC,eAAe,EAAE,WAAW;IAC5B,iBAAiB,EAAE,aAAa;IAChC,oBAAoB,EAAE,gBAAgB;IACtC,iBAAiB,EAAE,aAAa;IAChC,gBAAgB,EAAE,YAAY;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,mBAAmB,GAAG,EAAE,CAAC;IAE/B,mDAAmD;IACnD,MAAM,YAAY,GAAG,GAAW,EAAE;QAChC,MAAM,SAAS,GAAa,EAAE,CAAC;QAC/B,KAAK,MAAM,KAAK,IAAK,QAAQ,CAAC,WAA8B,EAAE,CAAC;YAC7D,IAAI,CAAC;gBACH,MAAM,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CACtC,CAAC,CAAC,EAAqB,EAAE,CAAC,CAAC,YAAY,YAAY,IAAI,CAAC,CAAC,YAAY,KAAK,OAAO,CAClF,CAAC;gBACF,SAAS,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;YACrD,CAAC;YAAC,WAAM,CAAC;gBACP,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAC9D,CAAC;QACH,CAAC;QACD,OAAO,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,YAAY,EAAE,CAAC;IAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;QAC3C,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAEhE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACtB,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC9C,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;YAChF,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;YACjE,mBAAmB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;QACzG,CAAC,CAAC,CAAC;IACL,CAAC;IACD,OAAO,mBAAmB,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,QAAgB,EAAE,EAAE;IAC7E,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG,UAAU,CAAC;IAE/B,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,QAAQ,CAAC,SAAS,GAAG,WAAW,CAAC;IACjC,QAAQ,CAAC,SAAS,GAAG,GAAG,IAAI,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,SAAS,GAAG,YAAY,CAAC;IACnC,SAAS,CAAC,SAAS,GAAG,GAAG,KAAK,EAAE,CAAC;IAEjC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,YAAY,CAAC;IACnC,SAAS,CAAC,SAAS,GAAG,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,QAAQ,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvE,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC9B,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAE/B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAE,KAA0D,EAAE,kBAA+B,EAAE,EAAE;IACrJ,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAExD,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;QAC1C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3C,KAAK,CAAC,WAAW,GAAG,YAAY,CAAC;QACjC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC3B,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IACvC,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QAChB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACtD,gBAAgB,CAAC,WAAW,GAAG,WAAW,CAAC;QAC3C,OAAO,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;IACxC,CAAC;IAED,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,CAAC,qBAAqB,CAAC,CAAC;IACxC,IAAI,YAAY,EAAE,CAAC;QACjB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACnK,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC;IACD,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;IAExC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACnB,aAAa,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACnC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["// src/utils/typography/typographyUtils.ts\n\nimport './typographyBox.scss';\n\nexport const categories = {\n  '--ds-fontFamily': 'Font family',\n  '--ds-fontSize': 'Font size',\n  '--ds-fontWeight': 'Font weight',\n  '--ds-letterSpacing': 'Letter spacing',\n  '--ds-lineHeight': 'Line height',\n  '--ds-fontWidth': 'Font width'\n};\n\nexport const getTypographyVariables = () => {\n  const typographyVariables = [];\n\n  // There can be multiple rules so find and combine.\n  const findRootRule = (): string => {\n    const rootRules: string[] = [];\n    for (const sheet of (document.styleSheets as StyleSheetList)) {\n      try {\n        const rules = [...sheet.cssRules].filter(\n          (r): r is CSSStyleRule => r instanceof CSSStyleRule && r.selectorText === ':root'\n        );\n        rootRules.push(...rules.map(rule => rule.cssText));\n      } catch {\n        console.warn('Issue occurred when extracting stylesheets.');\n      }\n    }\n    return rootRules.join(';');\n  };\n\n  const rules = findRootRule();\n  if (!rules) {\n    console.warn('Could not read stylesheet:');\n    return typographyVariables;\n  }\n\n  const matches = new Set(rules.match(/--(ds)-[\\w-]+:\\s*[^;]+/g));\n\n  if (matches) {\n    matches.forEach(match => {\n      const [variable, value] = match.split(/:\\s*/);\n      const categoryKey = Object.keys(categories).find(key => variable.includes(key));\n      const category = categoryKey ? categories[categoryKey] : 'Other';\n      typographyVariables.push({ name: variable, variable: variable.trim(), value: value.trim(), category });\n    });\n  }\n  return typographyVariables;\n};\n\nexport const createFontBox = (name: string, value: string, category: string) => {\n  const fontBox = document.createElement('div');\n  fontBox.className = 'font-box';\n\n  const fontInfo = document.createElement('div');\n  fontInfo.className = 'font-info';\n  fontInfo.innerHTML = `${name}`;\n\n  const fontValue = document.createElement('div');\n  fontValue.className = 'font-value';\n  fontValue.innerHTML = `${value}`;\n\n  const fontExtra = document.createElement('div');\n  const remValue = (1 / 16) * parseInt(value);\n  fontExtra.className = 'font-extra';\n  fontExtra.innerHTML = category === 'Font size' ? `${remValue}rem` : '';\n\n  fontBox.appendChild(fontInfo);\n  fontBox.appendChild(fontValue);\n  fontBox.appendChild(fontExtra);\n\n  return fontBox;\n};\n\nexport const createCategorySection = (category: string, fonts: { name: string, variable: string, value: string }[], renderedCategories: Set<string>) => {\n  const section = document.createElement('div');\n  const [mainCategory, subCategory] = category.split('|');\n\n  if (!renderedCategories.has(mainCategory)) {\n    const title = document.createElement('h2');\n    title.textContent = mainCategory;\n    section.appendChild(title);\n    renderedCategories.add(mainCategory);\n  }\n\n  if (subCategory) {\n    const subCategoryTitle = document.createElement('h3');\n    subCategoryTitle.textContent = subCategory;\n    section.appendChild(subCategoryTitle);\n  }\n\n  const gridContainer = document.createElement('div');\n  const classes = ['font-grid-container'];\n  if (mainCategory) {\n    const category = subCategory ? `${mainCategory.toLowerCase().split(' ')[0]}-${subCategory.toLowerCase().split(' ')[0]}` : mainCategory.toLowerCase().split(' ')[0];\n    classes.push(category);\n  }\n  gridContainer.classList.add(...classes);\n\n  fonts.forEach(font => {\n    gridContainer.appendChild(createFontBox(font.name, font.value, category));\n  });\n\n  section.appendChild(gridContainer);\n  return section;\n};\n"]}