@uh-design-system/component-library 1.5.2 → 1.6.0-rc.0

package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.features.stories.js

@@ -0,0 +1,162 @@
+import { classNameWithVersion, getDsElem } from "../../../../utils/tests/testUtils";
+import { expect, userEvent, waitFor } from "@storybook/test";
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/TextInput/Features',
+    component: 'ds-text-input',
+};
+export default meta;
+export const WithPlaceholder = {};
+WithPlaceholder.args = {
+    dsLabel: 'Label',
+    dsPlaceholder: 'Placeholder',
+};
+export const WithAssistiveText = {};
+WithAssistiveText.args = {
+    dsLabel: 'Label',
+    dsAssistiveText: 'Assistive text',
+};
+export const Disabled = {};
+Disabled.args = {
+    dsLabel: 'Label',
+    dsDisabled: true,
+};
+export const ReadOnly = {};
+ReadOnly.args = {
+    dsLabel: 'Label',
+    dsValue: 'Input text',
+    dsReadonly: true,
+};
+export const Required = {};
+Required.args = {
+    dsLabel: 'Label',
+    dsRequired: true,
+};
+export const Optional = {};
+Optional.args = {
+    dsLabel: 'Label',
+    dsOptional: true,
+};
+export const OptionalWithCustomText = {
+    render: () => html `<ds-text-input ds-label="Optional" ds-optional ds-optional-text="vapaavalintainen"></ds-text-input>`,
+};
+export const MaxLength = {};
+MaxLength.args = {
+    dsLabel: 'Label',
+    dsMaxlength: 5,
+    dsAssistiveText: 'Max length of 5',
+};
+export const Valid = {};
+Valid.args = {
+    dsLabel: 'Label',
+    dsSuccessText: 'Success text',
+};
+export const Invalid = {};
+Invalid.args = {
+    dsLabel: 'Label',
+    dsErrorText: 'Error text',
+};
+export const WithIcon = {
+    args: {
+        dsLabel: 'User',
+        dsIcon: 'account_circle_fill',
+        dsType: 'email',
+    },
+};
+export const PasswordInput = {
+    args: {
+        dsLabel: 'Label',
+        dsType: 'password',
+    },
+    play: async ({ canvasElement, step }) => {
+        const dsElem = await getDsElem(canvasElement, 'ds-text-input');
+        const inputElem = dsElem.querySelector('input');
+        const suffixButton = dsElem.querySelector(classNameWithVersion('ds-text-input', '__button'));
+        await step('Input type should be password', () => {
+            expect(inputElem.type).toBe('password');
+        });
+        await step('Has suffix button', async () => {
+            expect(suffixButton).toBeInTheDocument();
+        });
+        await step('Clicking suffix button should set input type to text', async () => {
+            userEvent.click(suffixButton);
+            await waitFor(() => {
+                expect(inputElem.type).toBe('text');
+            });
+        });
+        await step('Clicking suffix button again should set input type to password', async () => {
+            userEvent.click(suffixButton);
+            await waitFor(() => {
+                expect(inputElem.type).toBe('password');
+            });
+        });
+    },
+};
+export const SearchInput = {
+    args: {
+        dsLabel: 'Label',
+        dsType: 'search',
+    },
+    play: async ({ canvasElement, step }) => {
+        const dsElem = (await getDsElem(canvasElement, 'ds-text-input'));
+        await step('Has prefix icon', async () => {
+            const prefixIcon = dsElem.querySelector(classNameWithVersion('ds-text-input', '__icon'));
+            expect(prefixIcon).toBeInTheDocument();
+        });
+        await step('Enter search', async () => {
+            await userEvent.type(dsElem.querySelector('input'), 'search');
+        });
+        const clearBtn = dsElem.querySelector('ds-button');
+        await step('Clear button is visible', async () => {
+            expect(clearBtn).toBeDefined();
+        });
+        await step('Clicking clear button should clear the input', async () => {
+            userEvent.click(clearBtn);
+            await waitFor(() => {
+                expect(document.querySelector('ds-button')).toBeNull();
+            });
+        });
+        await step('Clicking body should remove focus from the input', async () => {
+            userEvent.click(canvasElement);
+            await waitFor(() => {
+                expect(dsElem.querySelector('input')).not.toHaveFocus();
+            });
+        });
+    },
+};
+export const FullWidth = {
+    args: {
+        dsLabel: 'Full width text input',
+        dsFullWidth: true,
+    },
+};
+export const PrefixText = {
+    args: {
+        dsLabel: 'Phone number',
+        dsPrefixText: '+358',
+        dsType: 'tel',
+        dsHiddenAssistiveText: 'Without the country code',
+    },
+};
+export const SuffixText = {
+    args: {
+        dsLabel: 'Timeout',
+        dsSuffixText: 'minutes',
+        dsType: 'number',
+        dsHiddenAssistiveText: 'Enter the number of minutes',
+    },
+};
+export const Slots = {
+    render: () => html `
+    <ds-text-input>
+      <div slot="label">Label slot</div>
+      <div slot="assistiveText">Assistive text slot</div>
+      <div slot="prefix">Prefix slot</div>
+      <div slot="suffix">Suffix slot</div>
+      <div slot="validity">Validity slot</div>
+    </ds-text-input>
+  `,
+};
+export const CustomTagName = {
+    render: () => html `<custom-ds-text-input ds-label="Label" ds-type="search"></custom-ds-text-input>`,
+};

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

@@ -0,0 +1,113 @@
+import { html } from "lit";
+import { icons } from "../../../00-foundations/icons/iconList";
+import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
+import { getEventsStoryStyles } from "../../../../utils/storybook/storybookUtils";
+const meta = {
+    title: 'Base Components/TextInput',
+    component: 'ds-text-input',
+    argTypes: {
+        dsIcon: {
+            control: 'select',
+            options: icons.map(icon => icon.name).sort(),
+        },
+        ...getAriaAttributeArgTypes(['aria-label', 'aria-labelledby', 'aria-describedby']),
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        dsLabel: 'Label',
+    },
+};
+Default.args = {
+    dsLabel: 'Label',
+};
+export const Playground = {
+    args: {
+        dsLabel: 'Label',
+        dsPlaceholder: '',
+        dsId: 'playground-id',
+        dsName: 'playground-name',
+        dsDisabled: false,
+        dsRequired: false,
+        dsOptional: false,
+        dsOptionalText: '',
+        dsReadonly: false,
+        dsValue: '',
+        dsMin: 0,
+        dsMax: 5,
+        dsStep: 1,
+        dsMaxlength: -1,
+        dsAssistiveText: '',
+        dsPrefixText: '',
+        dsSuffixText: '',
+        dsErrorText: '',
+        dsSuccessText: '',
+        dsIcon: '',
+        dsType: 'text',
+        dsAutocomplete: 'off',
+        dsAriaLabel: '',
+        dsAriaLabelledby: '',
+        dsAriaDescribedby: '',
+        dsActionButtonAriaLabel: '',
+    },
+};
+export const Events = {
+    args: {
+        dsId: 'events-text-input',
+        dsLabel: 'Label',
+        dsPlaceholder: 'Type something',
+    },
+    render: args => html `
+    <style>
+      ${getEventsStoryStyles()}
+    </style>
+    <ds-grid>
+      <ds-grid>
+        <ds-card ds-link-type="none" ds-heading="Events" ds-description="Type in the input to observe the events it triggers. Change events are emitted only on user interaction.">
+          <ul slot="content" id="text-input-output" class="ds-bodytext-sm ds-m-sm">
+            <li id="text-input-output__value">Value: <span id="text-input-output__value-text">&lt;empty&gt;</span></li>
+            <li id="text-input-output__programmatic">Programmatic value: <span id="text-input-output__programmatic-text">&lt;empty&gt;</span></li>
+          </ul>
+        </ds-card>
+      </ds-grid>
+      <ds-grid>
+        <div class="ds-sb-events">
+          <ds-text-input
+            ds-id=${args.dsId}
+            ds-label=${args.dsLabel}
+            ds-placeholder=${args.dsPlaceholder}
+            @dsChange=${(event) => {
+        const output = document.getElementById('text-input-output__value-text');
+        if (output) {
+            output.textContent = event.detail.value || '<empty>';
+        }
+    }}
+          ></ds-text-input>
+          <div class="ds-sb-events-buttons">
+            <button
+              type="button"
+              class="ds-sb-events-button"
+              @click=${() => {
+        const input = document.querySelector(`ds-text-input[ds-id="${args.dsId}"]`);
+        if (!input)
+            return;
+        input.dsValue = 'Programmatic value';
+        const valueOutput = document.getElementById('text-input-output__value-text');
+        const output = document.getElementById('text-input-output__programmatic-text');
+        if (valueOutput) {
+            valueOutput.textContent = input.dsValue || '<empty>';
+        }
+        if (output) {
+            output.textContent = input.dsValue || '<empty>';
+        }
+    }}
+            >
+              Programmatic set
+            </button>
+          </div>
+        </div>
+      </ds-grid>
+    </ds-grid>
+  `,
+};

package/dist/collection/components/01-base-components/ds-versioned-css-variables/ds-versioned-css-variables.js

@@ -9,7 +9,7 @@ export class DsVersionedCssVariables extends Mixin(componentFactory('ds-versione
         this.componentMounted();
     }
     render() {
-        return (h(Host, { key: '234946e0823167987ec67ab4ead2dc4e3a895c3b' }, h("slot", { key: '8dfa46aee5728895ed2de8ddeb9f9fdcc7eeafbc' })));
+        return (h(Host, { key: '874ffc4bf9ae318d2dfd6e1f73b3e079189c442d' }, h("slot", { key: 'ba2fea6f2e9b42f4939c39f51ca8829cf744c7f7' })));
     }
     static get is() { return "ds-versioned-css-variables"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-versioned-css-variables/stories/ds-versioned-css-variables.stories.js

@@ -0,0 +1,28 @@
+import { html } from "lit-html";
+const meta = {
+    title: 'Base Components/Versioned CSS Variables',
+    component: 'ds-versioned-css-variables',
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <style>
+      :root {
+        /* Fake primary colour */
+        --ds-textColor-primary: #000;
+      }
+
+      .ds-sb-p {
+        color: var(--ds-textColor-primary);
+      }
+    </style>
+    <p class="ds-bodytext-lg">The <code>&lt;ds-versioned-css-variables&gt;</code> component applies versioned CSS variables to its children.</p>
+
+    <h2 class="ds-heading-lg">Fake example</h2>
+    <p class="ds-sb-p">Primary text colour.</p>
+    <custom-ds-versioned-css-variables>
+      <p class="ds-sb-p">Scoped primary text colour.</p>
+      <!-- You only need to use scoped variables if there are multiple instances of the component library (widgets etc.) -->
+    </custom-ds-versioned-css-variables>
+  `,
+};

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.css

@@ -2,7 +2,7 @@
   position: absolute;
 }
 
-.ds-visually-hidden__MsKlb0 {
+.ds-visually-hidden__cpPWV0 {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js

@@ -4,7 +4,7 @@ export class DsVisuallyHidden {
     dsTag = 'div';
     render() {
         const baseClass = cx('ds-visually-hidden');
-        return (h(this.dsTag, { key: '8d98eed2e5abe80102e59ad8e1a4e9f5d6169ea1', class: baseClass }, h("slot", { key: '06bc60ab50213322e16820eeb2c1de7527736de0' })));
+        return (h(this.dsTag, { key: 'fe15d112cbfb92db0754eab24f4ea8751bb74cf2', class: baseClass }, h("slot", { key: '4d84a00a197d092660fdfb49a3054677be94ce06' })));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,9 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/VisuallyHidden',
+    component: 'ds-visually-hidden',
+};
+export default meta;
+export const Default = {
+    render: () => html `<ds-visually-hidden>Visually hidden content</ds-visually-hidden>`,
+};

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

@@ -6,7 +6,7 @@ export class DsIcon360 {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'ada05b6285e6340ca57e1318ae16507d92678242', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '37f652f58b2fdc1da94708b5cddb7a9889775436', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'cfa5a939cb17d624b73e8fc318c9427b56b1b7e3', d: "m353-148-50-51 70-70q-150-17-234-72T55-486q0-100 123-158t302-58q179 0 302.5 57.5T906-486q0 75-71 127.5T646-287v-98q80-16 122.5-46t42.5-55q0-34-77.5-77.5T480-607q-175 0-253 43.5T149-486q0 45 48.5 73T388-358l-85-83 50-52 173 172-173 173Z" }))));
+        return (h(Host, { key: 'a3d21feeb13746f8230592c6705e817eb329ab02', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '82e7a78a2a870d61ffa996dd686616c159fb010d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'd5aa10646dcb1f402e5e52c609b17d9ed422612d', d: "m353-148-50-51 70-70q-150-17-234-72T55-486q0-100 123-158t302-58q179 0 302.5 57.5T906-486q0 75-71 127.5T646-287v-98q80-16 122.5-46t42.5-55q0-34-77.5-77.5T480-607q-175 0-253 43.5T149-486q0 45 48.5 73T388-358l-85-83 50-52 173 172-173 173Z" }))));
     }
     static get is() { return "ds-icon-360"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-account-balance/ds-icon-account-balance.js

@@ -6,7 +6,7 @@ export class DsIconAccountBalance {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '0dc8a793c6dc41cc758fa12756c9c614a4eaf3f1', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '1854313d53c063e0bc63fe9c42df8a45b8f5dff3', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '8788deb072025a8fe036fe5b675582bfa887ff8c', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Zm198-95h454-454Zm0 0h454L480-836 253-704Z" }))));
+        return (h(Host, { key: '58a95685ab321d67e0a89338d41cdfadf4d9b593', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '67f950c91b9af130bbde99da5578e3366931aaf8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '5880b22e93331a99770f53447c5a8f12fe9c2808', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Zm198-95h454-454Zm0 0h454L480-836 253-704Z" }))));
     }
     static get is() { return "ds-icon-account-balance"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-account-balance-fill/ds-icon-account-balance-fill.js

@@ -6,7 +6,7 @@ export class DsIconAccountBalanceFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '36add0d23cd2620658b1d7f197a7dd3492d25bee', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '7f283dc7b0ec714cc2df1d95d546b997fdaea901', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '436e574337ded8372e5beaf749e3ae616bef4a21', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
+        return (h(Host, { key: 'ef3ee7ae9479e8753380861f7ad7cb33ec6a614d', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '70122303d88dabce1b6d2f210ab4e7bed058f353', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'fa4e5250d34265425dc8d267e78c4e97c9d35f70', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
     }
     static get is() { return "ds-icon-account-balance-fill"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-account-circle/ds-icon-account-circle.js

@@ -6,7 +6,7 @@ export class DsIconAccountCircle {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '7c5fd60129bb940df12da153e6ab8a5c34c43b28', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '818b59525186f90425873085c061a6bf6fcee25a', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '0edcb3d7bb34974cc82083b56bb287cc0cf55cd3', d: "M226-266q62-42 123-64.5T480.43-353q70.44 0 132.42 23.27Q674.84-306.46 735-266q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm.07 388Q393-55 315.61-88.29q-77.39-33.29-135.69-91.58-58.31-58.28-91.62-135.49Q55-392.57 55-480.35 55-567 88.5-644.5T180-780q58-58 135.26-92 77.25-34 165.09-34 86.65 0 164.15 34T780-780q58 58 92 135.62 34 77.61 34 164.5 0 86.88-34 164.38T780-180q-58 58-135.62 91.5Q566.77-55 479.88-55Zm.12-94q52 0 99.5-14t98.5-51q-52-35-99-51.5T480-282q-52 0-98.5 16.5T283-214q51 37 98 51t99 14Zm0-366q30.87 0 50.93-19.5Q551-554 551-585.5T530.93-637q-20.06-20-50.93-20t-50.93 20Q409-617 409-585.5t20.07 51Q449.13-515 480-515Zm0-71Zm1 371Z" }))));
+        return (h(Host, { key: '6f3018d52ff997fe95398c2c02086e2d6c306d4c', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'a996417fbb44b6109d367b9d8af8e659bf9e9f73', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'b202cc2bf8c1b8a5c56d61b62f2b4789f86f06b4', d: "M226-266q62-42 123-64.5T480.43-353q70.44 0 132.42 23.27Q674.84-306.46 735-266q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm.07 388Q393-55 315.61-88.29q-77.39-33.29-135.69-91.58-58.31-58.28-91.62-135.49Q55-392.57 55-480.35 55-567 88.5-644.5T180-780q58-58 135.26-92 77.25-34 165.09-34 86.65 0 164.15 34T780-780q58 58 92 135.62 34 77.61 34 164.5 0 86.88-34 164.38T780-180q-58 58-135.62 91.5Q566.77-55 479.88-55Zm.12-94q52 0 99.5-14t98.5-51q-52-35-99-51.5T480-282q-52 0-98.5 16.5T283-214q51 37 98 51t99 14Zm0-366q30.87 0 50.93-19.5Q551-554 551-585.5T530.93-637q-20.06-20-50.93-20t-50.93 20Q409-617 409-585.5t20.07 51Q449.13-515 480-515Zm0-71Zm1 371Z" }))));
     }
     static get is() { return "ds-icon-account-circle"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-account-circle-fill/ds-icon-account-circle-fill.js

@@ -6,7 +6,7 @@ export class DsIconAccountCircleFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'f14fc21e5ef8c904c5122572fe0491d7c89ff383', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '6bf2ff4c74e1abdea8725eced32a44df571044de', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'ec0d168e8ff2a4d350d865d1ce71ff3d4392ea3d', d: "M226-266q62-39 122.5-58T480-343q71 0 133 20t122 57q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm-.21 388q-87.15 0-164.9-33.28-77.75-33.29-135.82-91.56-58.07-58.27-90.98-135.44Q55-392.46 55-480.39t33.5-165.27Q122-723 180-780.5T315.25-872q77.24-34 165.25-34t165.25 34Q723-838 780.5-780.5T872-645.59q34 77.4 34 165.32 0 87.93-34 165.1Q838-238 780.5-180 723-122 645.46-88.5 567.93-55 479.6-55Z" }))));
+        return (h(Host, { key: '2b1758d9b6bd932baadfc2d21e545d317275b087', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '8bf65196ee57bd14005f71efc1d38b0544b0ec01', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'd508f36549a2274eca7b72737b1797412c224bec', d: "M226-266q62-39 122.5-58T480-343q71 0 133 20t122 57q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm-.21 388q-87.15 0-164.9-33.28-77.75-33.29-135.82-91.56-58.07-58.27-90.98-135.44Q55-392.46 55-480.39t33.5-165.27Q122-723 180-780.5T315.25-872q77.24-34 165.25-34t165.25 34Q723-838 780.5-780.5T872-645.59q34 77.4 34 165.32 0 87.93-34 165.1Q838-238 780.5-180 723-122 645.46-88.5 567.93-55 479.6-55Z" }))));
     }
     static get is() { return "ds-icon-account-circle-fill"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class DsIconAdd {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '8f50e0670df7ab94ef149089160e6586decb9568', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '214ce1f20bca27bd47426ca2f49a94060742883d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'df3e2237b35f0f50de9be38365398b8b91f43f21', d: "M433-433H175v-94h258v-259h94v259h259v94H527v258h-94v-258Z" }))));
+        return (h(Host, { key: '68ecf4c60b7fa82a24596750cc57e7e1e4de8fbe', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e5cae333fd1d435b2b4337a13938f46c0355428a', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '416219187f73a565e7c8f8872b4b35dfa81b5f59', d: "M433-433H175v-94h258v-259h94v259h259v94H527v258h-94v-258Z" }))));
     }
     static get is() { return "ds-icon-add"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class DsIconArchive {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '75bfc2815a2f5fbbaca6a079a8ab867920a1ae6c', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '75d096647ae58d6e7dbb75feafec6dace7ebde06', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'a87756231c5c5ec35d52092f7fde46c529fbf956', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM189-639v450h582v-450H189ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Zm257 312Z" }))));
+        return (h(Host, { key: 'ee0fa78e4c3f2e043540040baf0db360b3f1ecc6', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'aecd5b56d38e73149d37df41fe5797a801a9ea97', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '5db343707794f166168ad06c5c616584d40aad4b', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM189-639v450h582v-450H189ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Zm257 312Z" }))));
     }
     static get is() { return "ds-icon-archive"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-archive-fill/ds-icon-archive-fill.js

@@ -6,7 +6,7 @@ export class DsIconArchiveFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '8c88ba97a70ba5409fde52cec8722479bbff44e5', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'ef5c4b5f8948f6d89d7f353cb885d88af455c9e6', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'a7bb54ce76d829ac4da75e2a782a11f87e9125e6', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Z" }))));
+        return (h(Host, { key: '2b6333cd143f29d15685d5973516a2c478059e03', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e85933555b40241a1c76e624a3179a6872821b96', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '075c08022d08c5cec7015371177f9bcf12687fa8', d: "m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Z" }))));
     }
     static get is() { return "ds-icon-archive-fill"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-back/ds-icon-arrow-back.js

@@ -6,7 +6,7 @@ export class DsIconArrowBack {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'e8f801cdb43d4518edf61ec800555370d3b40cac', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'a6afac8cbe532faab04713c76f63b21036ffb4ab', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '93cb2d84c65b3ccfe3f9f3cbc5b49b60cf20abe5', d: "m315-433 232 232-67 66-345-345 345-346 67 67-232 232h511v94H315Z" }))));
+        return (h(Host, { key: '5cdbb8c6f467c525b70b921dd1b97404e7405f97', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '5043b8810c27199a0a20ddcce0674492a63d925c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '76dc199e43fe720ce585776c3955711ea3cf4f80', d: "m315-433 232 232-67 66-345-345 345-346 67 67-232 232h511v94H315Z" }))));
     }
     static get is() { return "ds-icon-arrow-back"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-downward/ds-icon-arrow-downward.js

@@ -6,7 +6,7 @@ export class DsIconArrowDownward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '54881b4a96e40164dd781a470ead7e838d1e0866', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b872391d9cad4ada9ae2457bca5a065f7a5e7923', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '43166369a140b553fdc236bd8599965f39d6e974', d: "M433-826v511L201-547l-66 67 345 345 346-345-67-67-232 232v-511h-94Z" }))));
+        return (h(Host, { key: 'e486a5fbf8d936da93ee8b3a019a2927400f1b81', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '3e4a24bc15ab049c6e7f197e17fb0d257652ff94', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'aaee51e627220448ded51cb0b225916b1864ee22', d: "M433-826v511L201-547l-66 67 345 345 346-345-67-67-232 232v-511h-94Z" }))));
     }
     static get is() { return "ds-icon-arrow-downward"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-drop-down/ds-icon-arrow-drop-down.js

@@ -6,7 +6,7 @@ export class DsIconArrowDropDown {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '8b2f4e0b5d4d100608ca359a4434e872ca772e0d', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0424f37ee2a0ecd95cb41872c4dc7685db3e54f0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'e4474d4205efa01fa8411b8fab05f7b327bec8c6', d: "M480-336 239-576h482L480-336Z" }))));
+        return (h(Host, { key: 'd0bf2d4bd6e8131244fdf0b97a8780d955dda3ac', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'b695be872bfdb5e886dfcbd8f4fe06da23788e21', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '8ff9f4abd863d8a07fd5f92a4df8acfd69a9695b', d: "M480-336 239-576h482L480-336Z" }))));
     }
     static get is() { return "ds-icon-arrow-drop-down"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-drop-down-circle/ds-icon-arrow-drop-down-circle.js

@@ -6,7 +6,7 @@ export class DsIconArrowDropDownCircle {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'ff721ecac52c4bea4e8e9b3eacf62d84bd3e2d21', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e01533d4dbfa9d246470bca677dafee2317ec1aa', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '798454bdcbed2235056834865c66bd187ec7095a', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Zm-.14-94q138 0 234.5-96.37T811-480q0-138-96.5-234.5t-235-96.5q-137.5 0-234 96.5t-96.5 235q0 137.5 96.37 234T480-149Zm0-331Z" }))));
+        return (h(Host, { key: '24e12fb9cdc78df67d2fddba6279bf3b8214bc25', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '9cf13e39b757ed9faf798d34d8c1c9279fc0d09b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'c465f48344eb9a74f517b809550e14186f94117c', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Zm-.14-94q138 0 234.5-96.37T811-480q0-138-96.5-234.5t-235-96.5q-137.5 0-234 96.5t-96.5 235q0 137.5 96.37 234T480-149Zm0-331Z" }))));
     }
     static get is() { return "ds-icon-arrow-drop-down-circle"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-drop-down-circle-fill/ds-icon-arrow-drop-down-circle-fill.js

@@ -6,7 +6,7 @@ export class DsIconArrowDropDownCircleFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'ea9ef2a349bfb96f47370029777d88cb0541db34', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e7087f8fd1bfbe8cfb730f33f43f2392a6ac39fe', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'caffc0caf2f3bb6dc68e0d4b5ce1f0f2473de368', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Z" }))));
+        return (h(Host, { key: 'e2e7575a571f536e6cf6d7b28355bf6541fd4264', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'c008f2f2ae1c657b5f319346d0ae38a65e3740a2', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '454e4cbe4b694ba565131e0c24c9b3c99b35b593', d: "m480-350 174-174H305l175 174Zm.14 295Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Z" }))));
     }
     static get is() { return "ds-icon-arrow-drop-down-circle-fill"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-drop-up/ds-icon-arrow-drop-up.js

@@ -6,7 +6,7 @@ export class DsIconArrowDropUp {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'c517c215a2347a32bb7b258b5845d7e8aa12e3cd', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '789e50ff44fa00381cc570b58fb0f3ba3a93a89b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'bb516deeb42fc1f42ab12d0d571cc4dddf95ab44', d: "m239-383 241-242 241 242H239Z" }))));
+        return (h(Host, { key: 'e00a95df7d14cf25f0b40c2c0eef7f63e6658da8', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '2868d98a42c06ccb6fa31ba2fa83ad68b5d24968', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '54172320b0713e7d8143eaa644dbe3992fd436f3', d: "m239-383 241-242 241 242H239Z" }))));
     }
     static get is() { return "ds-icon-arrow-drop-up"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-forward/ds-icon-arrow-forward.js

@@ -6,7 +6,7 @@ export class DsIconArrowForward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'c6c1bf4c616d6371927e093d56c1f7a907b12ace', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '167aa72f69d62a4d65253fa3a0538cdb34204d74', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '3cc35fa1ef47570a86cd81f8712decc96b591824', d: "M645-433H135v-94h510L413-759l67-67 346 346-346 345-67-66 232-232Z" }))));
+        return (h(Host, { key: '8dd14e33dc53c85268be6b8f3d8fe7135829f183', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '6f97603d39b6ee35ed85928fc0c9c7749dad75a4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '755b8d346744d9aba428b468a34036945a02bbf0', d: "M645-433H135v-94h510L413-759l67-67 346 346-346 345-67-66 232-232Z" }))));
     }
     static get is() { return "ds-icon-arrow-forward"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-insert/ds-icon-arrow-insert.js

@@ -6,7 +6,7 @@ export class DsIconArrowInsert {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '64b88c86fac036feb96dce7a347b97b853b63c4a', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '205895c6e0ed05ea875b497539adde3cfc8e02ae', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '135ecaed331c9ea86b1e1435edaa01c433156215', d: "M711-221 316-616v353h-95v-514h515v94H383l394 395-66 67Z" }))));
+        return (h(Host, { key: '395241880e645a3aa59c0b82d49a899264416af5', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'ce3910fd3212066fb56e9a626ee28e7dd9ec513e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '2199e40b4fe44ac94f49c954512c1a3d875d41ca', d: "M711-221 316-616v353h-95v-514h515v94H383l394 395-66 67Z" }))));
     }
     static get is() { return "ds-icon-arrow-insert"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-outward/ds-icon-arrow-outward.js

@@ -6,7 +6,7 @@ export class DsIconArrowOutward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '6851d69aac135606b319de5683828fa1e3f12782', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '9050eaeb0612b231cf8485da56c61fe0adb2a94e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '7bd7dfa284e75e99dd8cd05016039244a6ee288c', d: "m250-221-67-67 395-395H224v-94h515v514h-95v-353L250-221Z" }))));
+        return (h(Host, { key: '01e3304a6bc81ecc2eb065acb8e4f08192122fd6', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'e896f18efa822d2d74a49700d777aef54682b63e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '8bef35efc144cbf2fa7462cca0dd8e1f63aca40d', d: "m250-221-67-67 395-395H224v-94h515v514h-95v-353L250-221Z" }))));
     }
     static get is() { return "ds-icon-arrow-outward"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-arrow-upward/ds-icon-arrow-upward.js

@@ -6,7 +6,7 @@ export class DsIconArrowUpward {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '5fb2c3af7febf631ac70a9138e9177f932055225', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'd11d139e7f538b4c006cd42153e89ad62af70455', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '93f452497147ed6e550233c3cd3420e2cfee73e4', d: "M433-135v-510L201-413l-66-67 345-346 346 346-67 67-232-232v510h-94Z" }))));
+        return (h(Host, { key: 'f0f8482cc08ee19c7397ab9a54a9c0061a17b35a', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0515c62bc1757818bf7f674ba4b478251f164958', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'f99feb70025429f1c23fc9e1eaee8307aa01af16', d: "M433-135v-510L201-413l-66-67 345-346 346 346-67 67-232-232v510h-94Z" }))));
     }
     static get is() { return "ds-icon-arrow-upward"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-attach-email/ds-icon-attach-email.js

@@ -6,7 +6,7 @@ export class DsIconAttachEmail {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '73427dee8592c3a0d3afcac82f5a857a3ff41b79', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'eb5dc67d96f21b7e7b42b291f15b9b68821ab5cf', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '5260dbde70f655cacca19462b3727df70334d960', d: "M442-511 111-728v419h478v94H17v-691h851v335h-95v-157L442-511Zm0-87 331-213H111l331 213ZM798-47q-63 0-106-44.95T649-200v-224q0-38.04 26.76-65.02Q702.52-516 741.27-516q37.91 0 63.82 26.98Q831-462.04 831-424v230h-71v-233q0-11.2-4.5-19.6Q751-455 741-455t-15.5 8.4q-5.5 8.4-5.5 19.6v229q0 36.18 21.38 62.59Q762.75-109 797.88-109 831-109 851-134.5t20-59.5v-203h72v203q0 60.62-42 103.81Q859-47 798-47ZM111-728v-83 502-419Z" }))));
+        return (h(Host, { key: '5737ed43a4788915f7408f6b5c6ad6437c571e5b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'bf368b1dce66e8fea6f521670dcbc6a0e51b3118', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'e6ed7aaedcacdc090ff44df3e13aa7edbc8d4fc9', d: "M442-511 111-728v419h478v94H17v-691h851v335h-95v-157L442-511Zm0-87 331-213H111l331 213ZM798-47q-63 0-106-44.95T649-200v-224q0-38.04 26.76-65.02Q702.52-516 741.27-516q37.91 0 63.82 26.98Q831-462.04 831-424v230h-71v-233q0-11.2-4.5-19.6Q751-455 741-455t-15.5 8.4q-5.5 8.4-5.5 19.6v229q0 36.18 21.38 62.59Q762.75-109 797.88-109 831-109 851-134.5t20-59.5v-203h72v203q0 60.62-42 103.81Q859-47 798-47ZM111-728v-83 502-419Z" }))));
     }
     static get is() { return "ds-icon-attach-email"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-attach-email-fill/ds-icon-attach-email-fill.js

@@ -6,7 +6,7 @@ export class DsIconAttachEmailFill {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: 'b2c0c28fd1df74493e1f0d0343b4d005ab966cce', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'd987d1dbf0a9cc74038c9a3db741819f1b36959b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '65345072a8f4afccfbf533ba6fe5dab5a3cc6259', d: "M798-47q-63 0-106-45t-43-108v-224q0-39.3 26.29-65.65Q701.58-516 740.79-516 779-516 805-489.65q26 26.35 26 65.65v230h-71v-233q0-11-4.5-19.5T741-455q-10 0-15.5 8.5T720-427v229q0 36.18 21.38 62.59 21.37 26.41 56 26.41 32.62 0 53.12-25.26T871-194v-203h72v203q0 61-42 104T798-47ZM17-215v-691h851v360H731q-48.34 0-80.17 36T619-424v209H17Zm425-296 331-217v-83L442-598 111-811v83l331 217Z" }))));
+        return (h(Host, { key: '0fc52bddb38bd884290a2d6cb7378269e9b9e62b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '7efda5e97cc6a4c29d50f19b0c0c68a757b6a69d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '2d5f2f67a7466d947d68e048e2030019d1353496', d: "M798-47q-63 0-106-45t-43-108v-224q0-39.3 26.29-65.65Q701.58-516 740.79-516 779-516 805-489.65q26 26.35 26 65.65v230h-71v-233q0-11-4.5-19.5T741-455q-10 0-15.5 8.5T720-427v229q0 36.18 21.38 62.59 21.37 26.41 56 26.41 32.62 0 53.12-25.26T871-194v-203h72v203q0 61-42 104T798-47ZM17-215v-691h851v360H731q-48.34 0-80.17 36T619-424v209H17Zm425-296 331-217v-83L442-598 111-811v83l331 217Z" }))));
     }
     static get is() { return "ds-icon-attach-email-fill"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-attach-file/ds-icon-attach-file.js

@@ -6,7 +6,7 @@ export class DsIconAttachFile {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '7ec85497b501f46e9501b0e698a2a992cc12ff89', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: 'de728d120d58047f99f20eb0f0fad12038f655c2', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '7e6426aa97d5c32957d355c499ab406a329d36d1', d: "M767-319.26Q767-206 684.32-130.5 601.65-55 487.32-55 373-55 291-130.5T209-319v-396q0-81.42 59.5-136.21Q328-906 409.76-906q81.77 0 141 54.79Q610-796.42 610-715v376q0 48.91-36.5 82.95Q537-222 487.15-222q-49.84 0-85.5-33.72Q366-289.44 366-339v-370h87v370q0 13 10.29 21.5t24.64 8.5q14.35 0 24.71-8.35Q523-325.7 523-339v-375q1-45.26-33-75.13Q456-819 409.79-819q-46.21 0-80 29.43T296-715v396q1 77.25 57.47 127.63Q409.94-141 489-141q77.67 0 134.83-50.5Q681-242 680-319v-419h87v418.74Z" }))));
+        return (h(Host, { key: '0dfa812f2635c5d1cbf9e14570b56ec11610431b', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '13c2df45387866c8a6d23cdac43d2627348a9109', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '3f2f8988ff9d3a23af492d0413833dce845210b2', d: "M767-319.26Q767-206 684.32-130.5 601.65-55 487.32-55 373-55 291-130.5T209-319v-396q0-81.42 59.5-136.21Q328-906 409.76-906q81.77 0 141 54.79Q610-796.42 610-715v376q0 48.91-36.5 82.95Q537-222 487.15-222q-49.84 0-85.5-33.72Q366-289.44 366-339v-370h87v370q0 13 10.29 21.5t24.64 8.5q14.35 0 24.71-8.35Q523-325.7 523-339v-375q1-45.26-33-75.13Q456-819 409.79-819q-46.21 0-80 29.43T296-715v396q1 77.25 57.47 127.63Q409.94-141 489-141q77.67 0 134.83-50.5Q681-242 680-319v-419h87v418.74Z" }))));
     }
     static get is() { return "ds-icon-attach-file"; }
     static get properties() {

package/dist/collection/components/01-base-components/generated-icons/ds-icon-attach-file-add/ds-icon-attach-file-add.js

@@ -6,7 +6,7 @@ export class DsIconAttachFileAdd {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (h(Host, { key: '11d655442adbb0c6ce39fc0bee4f91d089e913a9', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '97907c8f3e7c48c3e4185950748241641a37c6bb', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: '219ca81383222dd0de67822f6b2a93fdaa8cf7d0', d: "M672-468v-270h87v270h-87ZM445-229q-37-10-62-39.97T358-339v-370h87v480Zm34.99 174q-115.16 0-197.07-75.5Q201-206 201-319v-396q0-81.42 59.5-136.21Q320-906 401.76-906q81.77 0 141 54.79Q602-796.42 602-715v353h-87v-352q1-45.26-33-75.13Q448-819 401.79-819q-46.21 0-80 29.43T288-715v396q1 77.25 57.47 127.63Q401.94-141 480.74-141q38.26 0 71.76-13 33.5-13 59.5-36v101.82Q582-72 549.15-63.5T479.99-55ZM672-108v-107H566v-87h106v-106h87v106h107v87H759v107h-87Z" }))));
+        return (h(Host, { key: 'd8f2fe8027bad918e647cbce9e36832aae3bd6fd', style: { display: 'flex' }, title: this.dsTitle }, h("svg", { key: '0d3f2d101b730308a62ed99f9cb9656c7dce75aa', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, h("path", { key: 'fadf12ba2a7303f215989fade5c1aa355894ad18', d: "M672-468v-270h87v270h-87ZM445-229q-37-10-62-39.97T358-339v-370h87v480Zm34.99 174q-115.16 0-197.07-75.5Q201-206 201-319v-396q0-81.42 59.5-136.21Q320-906 401.76-906q81.77 0 141 54.79Q602-796.42 602-715v353h-87v-352q1-45.26-33-75.13Q448-819 401.79-819q-46.21 0-80 29.43T288-715v396q1 77.25 57.47 127.63Q401.94-141 480.74-141q38.26 0 71.76-13 33.5-13 59.5-36v101.82Q582-72 549.15-63.5T479.99-55ZM672-108v-107H566v-87h106v-106h87v106h107v87H759v107h-87Z" }))));
     }
     static get is() { return "ds-icon-attach-file-add"; }
     static get properties() {