npm - @postnord/pn-marketweb-components - Versions diffs - 4.0.1 → 4.0.2 - Mend

@postnord/pn-marketweb-components 4.0.1 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/dist/collection/components/widgets/pn-search/pn-search.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"pn-search.stories.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-search/pn-search.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,IAAI,MAAM,uBAAuB,CAAC;AAEzC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,2BAA2B;IAClC,UAAU,EAAE;QACV,OAAO,EAAE,EAAE;QACX,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACJ,kBAAkB,EAAE,4BAA4B;QAChD,OAAO,EAAE,cAAc;QACvB,QAAQ,EAAE,EAAE;QACZ,iBAAiB,EAAE,sBAAsB;QACzC,iBAAiB,EAAE,QAAQ;QAC3B,qBAAqB,EAAE,oEAAoE;QAC3F,eAAe,EAAE,oBAAoB;KACtC;IACD,QAAQ;CACT,CAAC;AAIF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;QACvB,QAAQ,EAAE,qCAAqC;QAC/C,iBAAiB,EAAE,sBAAsB;QACzC,iBAAiB,EAAE,gBAAgB;QACnC,gBAAgB,EAAE,GAAG;QACrB,oBAAoB,EAClB,ifAAif;QACnf,mBAAmB,EAAE,mBAAmB;QACxC,kBAAkB,EAAE,GAAG;QACvB,SAAS,EAAE,6EAA6E;KACzF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAU;IAC3C,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;QACvB,iBAAiB,EACf,0+EAA0+E;QAC5+E,iBAAiB,EAAE,sBAAsB;KAC1C;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-search-docs.json';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<HTMLPnSearchElement> = {\n title: 'Components/Widgets/Search',\n parameters: {\n actions: {},\n docs: {\n description: {\n story: textContent,\n },\n },\n },\n args: {\n componentAriaLabel: 'Component Search Interface',\n heading: 'Lena Ohlsson',\n imageUrl: '',\n searchPlaceholder: 'Track / add shipment',\n searchButtonLabel: 'Search',\n searchDescriptionAria: 'Enter your search terms and press enter or click the search button',\n ctaActionsLabel: 'Additional actions',\n },\n argTypes,\n};\n\ntype Story = StoryObj<HTMLPnSearchElement>;\n\nexport default meta;\n\nexport const Search: Story = {\n name: 'pn-search',\n render: args => createComponent('pn-search', args),\n};\n\nexport const SearchWithImageUrl: Story = {\n name: 'Image Url',\n render: Search.render,\n args: {\n heading: 'Lena Ohlsson',\n imageUrl: 'https://picsum.photos/id/64/140/140',\n searchPlaceholder: 'Track / add shipment',\n primaryButtonText: 'Start New Chat',\n primaryButtonUrl: '#',\n primaryButtonIconSvg:\n '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M12.388 2c5.522 0 10 4.477 10 10s-4.478 10-10 10H2l1.355-4.064-.798-3.987a8.8 8.8 0 0 1-.17-1.717V12c0-5.523 4.478-10 10-10m8 10a8 8 0 0 0-16 0v.232q0 .67.13 1.325l.902 4.507L4.775 20h7.612a8 8 0 0 0 8-8m-12.5-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m6 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m3-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3\" clip-rule=\"evenodd\"/></svg>',\n secondaryButtonText: 'Show Chat History',\n secondaryButtonUrl: '#',\n searchUrl: 'https://www.postnord.se/vara-verktyg/spara-brev-paket-och-pall/?shipmentId=',\n },\n};\n\nexport const SearchWithIllustration: Story = {\n name: 'Illustration',\n render: Search.render,\n args: {\n heading: 'Lena Ohlsson',\n pnIllustrationSvg:\n '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 120 120\"><g clip-path=\"url(#birthday_svg__a)\"><path fill=\"#5EC584\" d=\"M72.627 27.856H47.812c-21.895 0-39.703 17.622-39.703 39.288v15.311h104.367V67.29c-.146-21.811-17.954-39.433-39.85-39.433\"/><path fill=\"#ABE3BB\" d=\"M31.754 82.6c1.898-6.933 1.752-15.166-.583-22.533-1.752-5.633-4.963-11.7-8.029-17.622l-2.19-4.334c-.437.29-.729.723-1.167 1.011.584 1.3 1.314 2.6 1.898 3.9 3.065 5.923 6.13 11.99 7.882 17.478 2.481 7.656 2.19 15.6.438 22.1zM34.234 32.767c3.649 9.533 7.736 20.366 19.851 19.066 6.569-.722 12.407-4.333 16.786-10.544 2.774-3.756 4.817-8.378 5.985-13.145-.438 0-1.022-.144-1.46-.144-1.167 4.478-3.21 8.956-5.692 12.422-2.92 4.045-8.028 9.1-15.765 9.822-10.947 1.156-14.742-8.666-18.246-18.2l-.875-2.166-1.314.433c.146 1.011.438 1.733.73 2.456M54.378 82.312c.438-10.256 17.662-24.845 32.988-37.845 3.357-2.889 6.715-5.633 9.634-8.233-.438-.289-.73-.578-1.168-.867-2.92 2.6-6.13 5.345-9.342 8.09-15.472 13-32.988 27.877-33.572 38.855v.433h1.46zM112.326 65.7c0-.722-.146-1.3-.146-2.022-6.568 6.355-15.034 13.578-23.5 19.066h2.773c7.444-5.2 14.889-11.266 20.873-17.044\"/><path fill=\"#FDEFEE\" d=\"M54.816 18.756h10.948v-1.878c0-1.011-.876-1.878-1.898-1.878h-7.152c-1.022 0-1.898.867-1.898 1.878z\"/><path fill=\"#005E41\" d=\"M85.616 23.378c-14.013-5.489-15.764 8.667-15.764 8.667s12.115 6.5 15.764-8.667M50.585 31.467c-14.013 5.49-15.765-8.666-15.765-8.666s12.115-6.5 15.765 8.666\"/><path fill=\"#FBC2C1\" d=\"M65.618 23.521H54.816a2.757 2.757 0 0 1-2.773-2.744c0-1.589 1.314-2.745 2.773-2.745h10.802c1.606-.144 2.92 1.156 2.92 2.745s-1.314 2.744-2.92 2.744\"/><path fill=\"#F06365\" d=\"M70.144 22.945c0 5.345-4.379 9.822-9.925 9.822s-9.926-4.333-9.926-9.822z\"/><path fill=\"#ABE3BB\" d=\"M28.985 82.6c0-5.633-4.67-10.255-10.363-10.255S8.258 76.967 8.258 82.6z\"/><path fill=\"#ABE3BB\" d=\"M49.712 82.6c0-5.633-4.671-10.255-10.364-10.255S28.984 76.967 28.984 82.6z\"/><path fill=\"#ABE3BB\" d=\"M70.584 82.6c0-5.633-4.67-10.255-10.364-10.255-5.692 0-10.51 4.622-10.51 10.255zM91.458 82.6c0-5.633-4.671-10.255-10.364-10.255S70.731 76.967 70.731 82.6zM112.333 82.6c0-5.633-4.671-10.255-10.364-10.255S91.606 76.967 91.606 82.6z\"/><path fill=\"#FFC8A3\" d=\"M73.938 106h-27.88L59.78 85.056z\"/><path fill=\"#FFC8A3\" d=\"M117 88.955H3v-1.733c0-2.456 2.044-4.478 4.525-4.478h104.95c2.481 0 4.525 2.022 4.525 4.478z\"/><path fill=\"#4F1600\" d=\"m57.152 88.956-2.336 3.611h10.072l-2.481-3.61z\"/></g><defs><clipPath id=\"birthday_svg__a\"><path fill=\"#fff\" d=\"M3 15h114v91H3z\"/></clipPath></defs></svg>',\n searchPlaceholder: 'Track / add shipment',\n },\n};\n"]}

package/dist/collection/components/widgets/pn-usp-simple/pn-usp-simple.css DELETED Viewed

@@ -1,116 +0,0 @@
-pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
-  min-height: initial;
-}
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-@media screen and (max-width: 767px) {
-  .sr-only-mobile {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
-:root {
-  --usp-preamble-margin: clamp(1.5rem, 3vw, 1.8rem);
-}
-.pn-usp-simple {
-  background: linear-gradient(90deg, #ffffff 0%, #effbff 17.44%);
-  color: #2d2013;
-  display: flex;
-  flex-direction: column-reverse;
-  max-width: 100%;
-  padding: clamp(2rem, 5vw, 5rem);
-}
-.pn-usp-simple .heading {
-  font-size: clamp(2rem, 4vw, 3rem);
-  font-weight: 700;
-  margin-bottom: 1rem;
-}
-.pn-usp-simple .preamble {
-  font-size: clamp(1rem, 4vw, 1.6rem);
-  margin-top: var(--usp-preamble-margin);
-  margin-bottom: var(--usp-preamble-margin);
-}
-.pn-usp-simple .cta {
-  display: flex;
-  font-size: clamp(1rem, 4vw, 1.6rem);
-  flex-direction: column;
-  gap: clamp(1rem, 4vw, 1.2rem);
-  padding: 0 6rem;
-}
-.pn-usp-simple .image-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 2rem;
-}
-.pn-usp-simple .image-container .graphics {
-  --pn-width: 12rem !important;
-  --pn-height: 12rem !important;
-}
-.pn-usp-simple .image-container .image {
-  border-radius: 50%;
-}
-@media (min-width: 768px) {
-  .pn-usp-simple {
-    flex-direction: row;
-    align-items: center;
-  }
-  .pn-usp-simple .content {
-    max-width: 60%;
-  }
-  .pn-usp-simple .cta {
-    flex-direction: row;
-    gap: clamp(2rem, 3vw, 3rem);
-    padding: 0;
-  }
-  .pn-usp-simple .image-container {
-    flex: clamp(15rem, 3vw, 20rem);
-    margin-bottom: 0;
-  }
-  .pn-usp-simple .image-container .graphics {
-    --pn-width: 15rem;
-    --pn-height: 15rem;
-  }
-}
-@media (min-width: 1200px) {
-  .pn-usp-simple {
-    max-width: 1140px;
-    margin: 0 auto;
-  }
-  .pn-usp-simple .content {
-    max-width: 50%;
-  }
-  .pn-usp-simple .image-container .graphics {
-    --pn-width: 18rem;
-    --pn-height: 18rem;
-  }
-}
-@media (min-width: 1640px) {
-  .pn-usp-simple {
-    max-width: 1400px;
-  }
-  .pn-usp-simple .image-container .graphics {
-    --pn-width: 20rem;
-    --pn-height: 20rem;
-  }
-}

package/dist/collection/components/widgets/pn-usp-simple/pn-usp-simple.js DELETED Viewed

@@ -1,269 +0,0 @@
-import { HeadingTag } from "../../../globals/HeadingTag";
-import { Host, h } from "@stencil/core";
-export class PnUspSimple {
-    constructor() {
-        this.heading = undefined;
-        this.headingLevel = 'h2';
-        this.preamble = undefined;
-        this.ctaButtonsLabel = undefined;
-        this.primaryButtonText = undefined;
-        this.primaryButtonUrl = undefined;
-        this.primaryButtonIconSvg = undefined;
-        this.secondaryButtonText = undefined;
-        this.secondaryButtonUrl = undefined;
-        this.pnIllustrationSvg = undefined;
-        this.imageUrl = undefined;
-        this.imageAltText = undefined;
-    }
-    get hasPrimaryButton() {
-        return Boolean(this.primaryButtonText && this.primaryButtonUrl);
-    }
-    get hasSecondaryButton() {
-        return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);
-    }
-    renderButton(props, isPrimary) {
-        const buttonType = isPrimary ? 'primary' : 'secondary';
-        return (h("pn-button", { icon: props.iconSvg, "left-icon": Boolean(props.iconSvg), href: props.url, class: "btn", "data-button-type": buttonType, appearance: isPrimary ? 'default' : 'light' }, props.text));
-    }
-    render() {
-        const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;
-        const headingId = 'usp-heading';
-        return (h(Host, { key: '86a81876d75377462d4a94cc9ca0d8a7b8150791' }, h("div", { key: '59568c012efdb309dc7e9b3ed64a0a344ab28360', class: "pn-usp-simple", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, h("div", { key: '54685035dc6a2eba2130693961b87fe315023f27', class: "content" }, this.heading && (h(HeadingTag, { key: '1f0b464103fdcbf3b18ab6adf4f82b454e5c81eb', id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (h("div", { key: 'd143480b02ecb45130ac2a825e392dbe7c0f3128', class: "preamble" }, this.preamble)), hasButtons && (h("div", { key: 'f618b4b041cf79eac3b67dd6d3c26697e29a72c6', class: "cta", role: "group", "aria-label": this.ctaButtonsLabel }, this.hasPrimaryButton &&
-            this.renderButton({
-                text: this.primaryButtonText,
-                url: this.primaryButtonUrl,
-                iconSvg: this.primaryButtonIconSvg,
-            }, true), this.hasSecondaryButton &&
-            this.renderButton({
-                text: this.secondaryButtonText,
-                url: this.secondaryButtonUrl,
-            }, false)))), h("div", { key: 'cb22f2bd663e90bd009fac12d4662c729bffdd68', class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && h("img", { key: 'f76f0a6cbdb0cdc8847f062410f7c20c847d8a47', class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" }), !this.imageUrl && this.pnIllustrationSvg && h("pn-illustration", { key: '5653434436d33c04820f3ee201fd1e2853008e1b', class: "illustration graphics", illustration: this.pnIllustrationSvg, role: "presentation" })))));
-    }
-    static get is() { return "pn-usp-simple"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pn-usp-simple.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pn-usp-simple.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "heading": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "heading",
-                "reflect": false
-            },
-            "headingLevel": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "HeadingLevel",
-                    "resolved": "HeadingLevel",
-                    "references": {
-                        "HeadingLevel": {
-                            "location": "import",
-                            "path": "@/components",
-                            "id": "src/components.d.ts::unknown"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "heading-level",
-                "reflect": false,
-                "defaultValue": "'h2'"
-            },
-            "preamble": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "preamble",
-                "reflect": false
-            },
-            "ctaButtonsLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "cta-buttons-label",
-                "reflect": false
-            },
-            "primaryButtonText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "primary-button-text",
-                "reflect": false
-            },
-            "primaryButtonUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "primary-button-url",
-                "reflect": false
-            },
-            "primaryButtonIconSvg": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "primary-button-icon-svg",
-                "reflect": false
-            },
-            "secondaryButtonText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "secondary-button-text",
-                "reflect": false
-            },
-            "secondaryButtonUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "secondary-button-url",
-                "reflect": false
-            },
-            "pnIllustrationSvg": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "pn-illustration-svg",
-                "reflect": false
-            },
-            "imageUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "image-url",
-                "reflect": false
-            },
-            "imageAltText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "image-alt-text",
-                "reflect": false
-            }
-        };
-    }
-}
-//# sourceMappingURL=pn-usp-simple.js.map

package/dist/collection/components/widgets/pn-usp-simple/pn-usp-simple.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"pn-usp-simple.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-usp-simple/pn-usp-simple.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAYzD,MAAM,OAAO,WAAW;;;4BAEe,IAAI;;;;;;;;;;;;IAYzC,IAAY,gBAAgB;QAC1B,OAAO,OAAO,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClE,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,OAAO,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACtE,CAAC;IAEO,YAAY,CAAC,KAAkB,EAAE,SAAkB;QACzD,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QACvD,OAAO,CACL,iBACE,IAAI,EAAE,KAAK,CAAC,OAAO,eACR,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,EACjC,IAAI,EAAE,KAAK,CAAC,GAAG,EACf,KAAK,EAAC,KAAK,sBACO,UAAU,EAC5B,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,IAE1C,KAAK,CAAC,IAAI,CACD,CACb,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,kBAAkB,CAAC;QACpE,MAAM,SAAS,GAAG,aAAa,CAAC;QAEhC,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,qBAAkB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBAC5F,4DAAK,KAAK,EAAC,SAAS;oBACjB,IAAI,CAAC,OAAO,IAAI,CACf,EAAC,UAAU,qDAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,SAAS,IACpE,IAAI,CAAC,OAAO,CACF,CACd;oBAEA,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,QAAQ,CACV,CACP;oBAEA,UAAU,IAAI,CACb,4DAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,eAAe;wBAC3D,IAAI,CAAC,gBAAgB;4BACpB,IAAI,CAAC,YAAY,CACf;gCACE,IAAI,EAAE,IAAI,CAAC,iBAAkB;gCAC7B,GAAG,EAAE,IAAI,CAAC,gBAAiB;gCAC3B,OAAO,EAAE,IAAI,CAAC,oBAAoB;6BACnC,EACD,IAAI,CACL;wBACF,IAAI,CAAC,kBAAkB;4BACtB,IAAI,CAAC,YAAY,CACf;gCACE,IAAI,EAAE,IAAI,CAAC,mBAAoB;gCAC/B,GAAG,EAAE,IAAI,CAAC,kBAAmB;6BAC9B,EACD,KAAK,CACN,CACC,CACP,CACG;gBACN,4DAAK,KAAK,EAAC,iBAAiB,iBAAc,CAAC,IAAI,CAAC,YAAY;oBACzD,IAAI,CAAC,QAAQ,IAAI,4DAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE,OAAO,EAAC,MAAM,GAAG;oBAChH,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,IAAI,wEAAiB,KAAK,EAAC,uBAAuB,EAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAC,cAAc,GAAG,CACpJ,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { HeadingLevel } from '@/components';\nimport { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Host, Prop, h } from '@stencil/core';\n\ninterface ButtonProps {\n text: string;\n url: string;\n iconSvg?: string;\n}\n\n@Component({\n tag: 'pn-usp-simple',\n styleUrl: 'pn-usp-simple.scss',\n})\nexport class PnUspSimple {\n @Prop() heading?: string;\n @Prop() headingLevel: HeadingLevel = 'h2';\n @Prop() preamble?: string;\n @Prop() ctaButtonsLabel?: string;\n @Prop() primaryButtonText?: string;\n @Prop() primaryButtonUrl?: string;\n @Prop() primaryButtonIconSvg?: string;\n @Prop() secondaryButtonText?: string;\n @Prop() secondaryButtonUrl?: string;\n @Prop() pnIllustrationSvg?: string;\n @Prop() imageUrl?: string;\n @Prop() imageAltText?: string;\n\n private get hasPrimaryButton(): boolean {\n return Boolean(this.primaryButtonText && this.primaryButtonUrl);\n }\n\n private get hasSecondaryButton(): boolean {\n return Boolean(this.secondaryButtonText && this.secondaryButtonUrl);\n }\n\n private renderButton(props: ButtonProps, isPrimary: boolean) {\n const buttonType = isPrimary ? 'primary' : 'secondary';\n return (\n <pn-button\n icon={props.iconSvg}\n left-icon={Boolean(props.iconSvg)}\n href={props.url}\n class=\"btn\"\n data-button-type={buttonType}\n appearance={isPrimary ? 'default' : 'light'}\n >\n {props.text}\n </pn-button>\n );\n }\n\n render() {\n const hasButtons = this.hasPrimaryButton || this.hasSecondaryButton;\n const headingId = 'usp-heading';\n\n return (\n <Host>\n <div class=\"pn-usp-simple\" role=\"region\" aria-labelledby={this.heading ? headingId : undefined}>\n <div class=\"content\">\n {this.heading && (\n <HeadingTag id={headingId} level={this.headingLevel} cssClass=\"heading\">\n {this.heading}\n </HeadingTag>\n )}\n\n {this.preamble && (\n <div class=\"preamble\">\n {this.preamble}\n </div>\n )}\n\n {hasButtons && (\n <div class=\"cta\" role=\"group\" aria-label={this.ctaButtonsLabel}>\n {this.hasPrimaryButton &&\n this.renderButton(\n {\n text: this.primaryButtonText!,\n url: this.primaryButtonUrl!,\n iconSvg: this.primaryButtonIconSvg,\n },\n true,\n )}\n {this.hasSecondaryButton &&\n this.renderButton(\n {\n text: this.secondaryButtonText!,\n url: this.secondaryButtonUrl!,\n },\n false,\n )}\n </div>\n )}\n </div>\n <div class=\"image-container\" aria-hidden={!this.imageAltText}>\n {this.imageUrl && <img class=\"image graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n {!this.imageUrl && this.pnIllustrationSvg && <pn-illustration class=\"illustration graphics\" illustration={this.pnIllustrationSvg} role=\"presentation\" />}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/widgets/pn-usp-simple/pn-usp-simple.stories.js DELETED Viewed

@@ -1,63 +0,0 @@
-import { createDocumentation, createComponent } from "../../../globals/documentation/story";
-import docs from "./pn-usp-simple-docs.json";
-const { argTypes, textContent } = createDocumentation(docs);
-const meta = {
-    title: 'Components/Widgets/Usp Simple',
-    parameters: {
-        actions: {},
-        docs: {
-            description: {
-                story: textContent,
-            },
-        },
-    },
-    args: {
-        heading: 'Verify your address to find more packages',
-        headingLevel: 'h2',
-        preamble: 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',
-        primaryButtonText: 'Identify with BankID',
-        primaryButtonUrl: '#',
-        primaryButtonIconSvg: '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M23.591 9.136c.93-5.875-2.801-8.22-8.152-8.22H9.531L8.744 5.91h1.003c.55 0 1.07-.252 1.293-.616a.6.6 0 0 0 .104-.319c0-.207-.141-.363-.283-.467-.386-.29-.468-.593-.468-.809q-.002-.064.008-.118c.082-.527.795-1.098 1.739-1.098.564 0 .995.133 1.256.378.23.215.32.52.252.838-.082.379-.46.69-.676.846-.572.4-.498.75-.46.853.118.312.572.512.92.512h1.524v.007c2.08.015 3.195.972 2.846 3.198-.327 2.07-1.917 2.96-3.812 2.974l-.75 4.778h1.107c4.674 0 8.494-2.997 9.244-7.73M7.666 12.489l.981-6.172H7.6c-.49 0-1.122-.274-1.307-.779-.06-.17-.201-.757.609-1.328.29-.2.475-.423.513-.593a.46.46 0 0 0-.134-.453c-.178-.17-.528-.267-.974-.267-.75 0-1.278.43-1.33.742-.037.23.141.415.297.534.469.349.58.853.29 1.328-.297.49-.943.809-1.635.816h-1.07c-.05.343-.547 3.494-.985 6.27v.002c-.329 2.085-.624 3.958-.672 4.27h5.804l.103-.664c.12-.77.327-2.103.58-3.706zM.89 18.988h2.37c1.011 0 1.256.511 1.182.979-.06.378-.32.66-.765.846.564.215.787.548.706 1.075-.104.66-.677 1.15-1.427 1.15H.257zm1.568 1.676c.46 0 .676-.245.72-.534.045-.312-.096-.527-.557-.527h-.408l-.164 1.061zm-.253 1.75c.476 0 .75-.192.818-.585.052-.341-.141-.542-.602-.542h-.468l-.179 1.135h.431zm4.437.364c.148.267.446.334 1.062.29l.357-.831c-.35-.008-.364-.104-.312-.416l.141-.89c.12-.786-.52-1.083-1.24-1.083-.566 0-1.056.17-1.561.534l-.142.92c.588-.4.93-.534 1.338-.534.35 0 .46.104.431.386-.167.113-.452.185-.75.26-.364.09-.747.187-.96.37a.9.9 0 0 0-.319.534c-.067.4.179.764.877.764.387 0 .75-.104 1.078-.304m-.411-.949c.145-.042.291-.085.403-.156l-.067.445c-.022.141-.03.215-.014.29a1.17 1.17 0 0 1-.625.214c-.2 0-.327-.148-.297-.348.044-.283.322-.364.6-.445M8.855 19.9h1.234l-.067.408c.394-.334.69-.46 1.077-.46.691 0 1.011.423.9 1.113l-.32 2.07h-1.234l.268-1.714c.052-.312-.045-.46-.282-.46-.194 0-.372.104-.543.334l-.282 1.832H8.372zm5.336-.912h-1.234l-.631 4.043h1.233l.223-1.447h.015l.936 1.447h1.553l-1.218-1.796 1.516-1.335H15.06l-1.181 1.076zm3.135 0h1.42l-.624 4.043h-1.42zm4.14 0h-2.029l-.631 4.043h2.288c1.375 0 2.104-1.046 2.245-1.966.148-.942-.305-2.078-1.873-2.078m.468 2.017c-.111.72-.49 1.061-1.181 1.061h-.372l.327-2.121h.379c.765 0 .929.526.847 1.06" clip-rule="evenodd"/></svg>',
-        secondaryButtonText: 'Cancel',
-        secondaryButtonUrl: '#',
-        pnIllustrationSvg: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 120"><g clip-path="url(#globe-hand_svg__a)"><path fill="#8EDDF9" d="M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60"/><path fill="#0D234B" d="M53.675 104.493c-10.907 0-21.056-4.355-28.586-12.263a.304.304 0 0 1 .013-.432.304.304 0 0 1 .431.012c7.412 7.786 17.406 12.076 28.142 12.076 21.43 0 38.865-17.458 38.865-38.922 0-10.764-4.29-20.779-12.08-28.202a.31.31 0 0 1-.013-.432.31.31 0 0 1 .432-.012c7.912 7.537 12.268 17.71 12.268 28.642.008 21.798-17.703 39.533-39.472 39.533"/><path fill="#0D234B" d="M21.728 95.917a.3.3 0 0 1-.216-.09.307.307 0 0 1 0-.432l62.805-62.944a.31.31 0 0 1 .432 0 .31.31 0 0 1 0 .432L21.944 95.827a.32.32 0 0 1-.216.09"/><path fill="#005D92" d="M53.675 100.57c19.64 0 35.56-15.943 35.56-35.61 0-19.666-15.92-35.609-35.56-35.609s-35.56 15.943-35.56 35.61c0 19.666 15.92 35.609 35.56 35.609"/><path fill="#00A0D6" d="M78.822 39.781a35.6 35.6 0 0 0-7.424-5.7c-2.098 1.34-3.5 3.691-3.5 6.352 0 3.989 3.142 7.264 7.065 7.5h.558c1.769 0 3.403 1.178 3.765 2.91.497 2.375-1.324 4.49-3.61 4.49h-.627v.004H59.88c-3.83 0-7.31 2.546-8.153 6.286-1.185 5.264 2.812 9.982 7.868 10.023 1.67.012 3.044 1.308 3.044 2.983v6.482c0 4.192 2.917 7.945 7.044 8.645 5.325.909 9.986-3.227 9.986-8.4V66.63a4.315 4.315 0 0 1 4.315-4.32h5.154c-.611-8.213-4.046-16.251-10.316-22.53M39.993 72.652h-.937v-.44c0-4.302-3.516-7.818-7.81-7.818-4.295 0-7.811 3.52-7.811 7.818V83.69c.09.146.183.297.277.444.143.224.285.448.436.668q.244.36.501.717c.159.224.314.448.477.668.167.228.346.448.521.672s.347.449.526.673c.195.236.4.468.599.7.15.176.297.355.456.53q.631.704 1.304 1.381a36 36 0 0 0 2.974 2.657 6.18 6.18 0 0 1 3.231-3.797l7.798-3.77a6.68 6.68 0 0 0 3.773-6.013v-.244c-.004-3.48-2.844-6.324-6.315-6.324M28.533 39.781a35.6 35.6 0 0 0-7.081 10.104c1.063.314 2.188.485 3.349.485h.99v7.216c0 1.792 1.181 3.41 2.917 3.85a3.936 3.936 0 0 0 4.93-3.801v-1.056a6.21 6.21 0 0 1 6.205-6.213c6.556 0 11.922-5.374 11.922-11.938v-9.024c-8.455.456-16.778 3.911-23.232 10.377"/><path fill="#F06365" d="m43.127 37.39-7.912-10.288C30.158 20.526 34.84 11 43.127 11s12.968 9.526 7.912 16.102z"/><path fill="#FFC8A3" d="M43.127 24.368a4.02 4.02 0 0 0 4.017-4.021 4.02 4.02 0 0 0-4.017-4.022 4.02 4.02 0 0 0-4.018 4.022 4.02 4.02 0 0 0 4.018 4.021"/><path fill="#0D234B" d="M53.675 110.886a.307.307 0 0 1-.305-.305v-6.397c0-.167.138-.305.305-.305s.306.138.306.305v6.397a.3.3 0 0 1-.306.305"/><path fill="#FFC8A3" d="M68.892 119.784h-30.41v-4.665c0-1.055.855-1.907 1.906-1.907h26.597c1.055 0 1.907.856 1.907 1.907z"/><path fill="#FFF1E3" d="M65.331 113.213H42.043v-.844a2.21 2.21 0 0 1 2.208-2.208h18.868a2.21 2.21 0 0 1 2.208 2.208v.844z"/><path fill="#fff" d="M86.889 83.12a7.11 7.11 0 0 1 7.105-7.114c3.924 0 7.106 3.186 7.106 7.114z"/><path fill="#fff" d="M73.561 83.12a7.11 7.11 0 0 1 7.106-7.113c3.924 0 7.105 3.186 7.105 7.114zM14.228 83.93c0-4.196 3.398-7.598 7.587-7.598 4.188 0 7.586 3.402 7.586 7.599z"/><path fill="#fff" d="M0 83.931c0-4.196 3.398-7.598 7.586-7.598s7.587 3.402 7.587 7.598z"/><path fill="#FBC2C1" d="m69.036 63.267 5.093 4.502 3.789.016-1.072-5.056zM113.672 88.412l-9.326 2.086-23.578-.078c3.68 7.33 10.976 13.042 10.976 13.042l.013 5.431v10.891h27.212v-10.891zM70.815 80.455l4.836 4.636.24-5.28zM68.778 72.47l5.105 3.797 3.532-.285-1.393-4.633zM82.073 49.377l-9.877-7.933a3.357 3.357 0 0 0-4.77.574 3.37 3.37 0 0 0 .26 4.409l14.386 14.745z"/><path fill="#500715" d="m75.664 44.238-1.846-1.5 1.023 11.026.823.839z"/><path fill="#000" d="M75.175 38.293v-3.039c0-1.882 1.475-3.406 3.3-3.406h25.415c1.822 0 3.301 1.524 3.301 3.406v3.04zM107.19 85.193v3.594c0 1.882-1.479 3.406-3.3 3.406H78.474c-1.821 0-3.3-1.524-3.3-3.406v-3.594z"/><path fill="#fff" d="M107.19 38.294H75.174v46.899h32.016z"/><path fill="#F3F2F2" d="M103.308 82.337H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425c.392 0 .709.318.709.709v4.775a.704.704 0 0 1-.709.709"/><path fill="#D3CECB" d="M92.152 78.727h-6.001a.232.232 0 1 1 0-.465h6.001a.232.232 0 1 1 0 .465M95.53 80.21h-9.374a.23.23 0 0 1-.233-.232.23.23 0 0 1 .233-.232h9.374a.232.232 0 1 1 0 .464M98.338 78.728h-4.792a.232.232 0 1 1 0-.465h4.792c.126 0 .232.102.232.232a.235.235 0 0 1-.232.233M81.527 80.85a1.613 1.613 0 1 0 0-3.227 1.613 1.613 0 0 0 0 3.227"/><path fill="#F3F2F2" d="M103.308 74.193H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425a.71.71 0 0 1 .709.709v4.775a.704.704 0 0 1-.709.709"/><path fill="#D3CECB" d="M98.472 70.583h-12.32a.23.23 0 0 1-.233-.233.23.23 0 0 1 .232-.232h12.321a.232.232 0 1 1 0 .465M90.385 72.066H86.15a.232.232 0 1 1 0-.464h4.234a.232.232 0 1 1 0 .464M94.31 72.066h-2.612a.232.232 0 1 1 0-.464h2.611a.232.232 0 1 1 0 .464M81.528 72.705a1.614 1.614 0 1 0 0-3.227 1.614 1.614 0 0 0 0 3.227"/><path fill="#005D92" d="M102.599 65.941H79.591a1.42 1.42 0 0 1-1.422-1.422V42.571a1.42 1.42 0 0 1 1.422-1.422H102.6a1.42 1.42 0 0 1 1.422 1.422v21.948c0 .786-.64 1.422-1.422 1.422"/><path fill="#8EDDF9" d="M98.056 59.004H83.792a.232.232 0 1 1 0-.464h14.264a.232.232 0 1 1 0 .464M94.793 61.037h-7.737a.23.23 0 0 1-.232-.232.23.23 0 0 1 .232-.232h7.737a.232.232 0 1 1 0 .464"/><path fill="#00A0D6" d="M95.787 56.701h2.2c.616 0 1.113-.497 1.113-1.112v-8.422c0-.615-.497-1.112-1.112-1.112h-2.2z"/><path fill="#8EDDF9" d="M96.887 56.701H84.204a1.11 1.11 0 0 1-1.112-1.112v-8.422c0-.615.497-1.112 1.112-1.112H95.96c.513 0 .928.416.928.93z"/><path fill="#E0F8FF" d="M95.4 49.082c0 .607-.489 1.096-1.096 1.096H92.68a1.096 1.096 0 0 1 0-2.192h1.625c.603 0 1.096.493 1.096 1.096"/><path fill="#FBC2C1" d="m78.201 58.017-5.797-1.438a3.696 3.696 0 0 0-4.58 3.393l-.016.33a3.7 3.7 0 0 0 2.998 3.839l5.815 1.108a3.698 3.698 0 0 0 4.383-3.435 3.7 3.7 0 0 0-2.803-3.797"/><path fill="#500715" d="M76.62 65.546c.131 0 .25-.081.286-.212a.294.294 0 0 0-.2-.37l-3.895-1.166a.295.295 0 0 0-.37.2.294.294 0 0 0 .2.37l3.894 1.166a.3.3 0 0 0 .086.012"/><path fill="#FBC2C1" d="m76.914 66.85-5.52-.884a3.463 3.463 0 0 0-4.006 3.524l.008.306a3.465 3.465 0 0 0 3.101 3.345l5.513.574a3.463 3.463 0 0 0 3.817-3.549 3.46 3.46 0 0 0-2.913-3.316M78.316 76.124l-4.743-.758a2.977 2.977 0 0 0-3.443 3.028l.008.264a2.974 2.974 0 0 0 2.665 2.873l4.734.493a2.975 2.975 0 0 0 3.28-3.052 2.974 2.974 0 0 0-2.501-2.848M122.341 120l-3.376-46.819a9.6 9.6 0 0 0-.611-3.492l-6.584-17.662c-.684-1.837-2.994-2.42-4.469-1.128l-.114.102v19.682s-12.378 11.527-3.671 26.398L109.847 120z"/><path fill="#500715" d="M76.01 74.018c.138 0 .26-.098.293-.237a.3.3 0 0 0-.232-.354l-3.724-.778a.3.3 0 0 0-.355.232.3.3 0 0 0 .232.355l3.724.778q.03.005.062.004M75.339 82.091a.3.3 0 0 0 .297-.268.297.297 0 0 0-.265-.326l-1.564-.163a.297.297 0 0 0-.061.59l1.564.163q.011.005.028.004M103.091 96.068a.3.3 0 0 0 .245-.469c-1.475-2.151-1.777-3.178-1.781-3.19a.294.294 0 0 0-.366-.204.3.3 0 0 0-.208.367c.012.045.318 1.112 1.862 3.365.061.082.155.13.248.13"/><path fill="#500715" d="m102.18 94.215-11.339-2.021h10.499z"/></g><defs><clipPath id="globe-hand_svg__a"><path fill="#fff" d="M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60"/></clipPath></defs></svg>',
-    },
-    argTypes,
-};
-export default meta;
-export const UspSimple = {
-    name: 'Simple USP with CTA and Illustration',
-    render: args => createComponent('pn-usp-simple', args),
-};
-export const UspSimpleIllustration = {
-    name: 'Simple USP with Illustration',
-    render: UspSimple.render,
-    args: {
-        heading: 'Verify your address to find more packages',
-        headingLevel: 'h2',
-        preamble: 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',
-        primaryButtonText: 'Identify with BankID',
-        primaryButtonUrl: '#',
-        primaryButtonIconSvg: '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M23.591 9.136c.93-5.875-2.801-8.22-8.152-8.22H9.531L8.744 5.91h1.003c.55 0 1.07-.252 1.293-.616a.6.6 0 0 0 .104-.319c0-.207-.141-.363-.283-.467-.386-.29-.468-.593-.468-.809q-.002-.064.008-.118c.082-.527.795-1.098 1.739-1.098.564 0 .995.133 1.256.378.23.215.32.52.252.838-.082.379-.46.69-.676.846-.572.4-.498.75-.46.853.118.312.572.512.92.512h1.524v.007c2.08.015 3.195.972 2.846 3.198-.327 2.07-1.917 2.96-3.812 2.974l-.75 4.778h1.107c4.674 0 8.494-2.997 9.244-7.73M7.666 12.489l.981-6.172H7.6c-.49 0-1.122-.274-1.307-.779-.06-.17-.201-.757.609-1.328.29-.2.475-.423.513-.593a.46.46 0 0 0-.134-.453c-.178-.17-.528-.267-.974-.267-.75 0-1.278.43-1.33.742-.037.23.141.415.297.534.469.349.58.853.29 1.328-.297.49-.943.809-1.635.816h-1.07c-.05.343-.547 3.494-.985 6.27v.002c-.329 2.085-.624 3.958-.672 4.27h5.804l.103-.664c.12-.77.327-2.103.58-3.706zM.89 18.988h2.37c1.011 0 1.256.511 1.182.979-.06.378-.32.66-.765.846.564.215.787.548.706 1.075-.104.66-.677 1.15-1.427 1.15H.257zm1.568 1.676c.46 0 .676-.245.72-.534.045-.312-.096-.527-.557-.527h-.408l-.164 1.061zm-.253 1.75c.476 0 .75-.192.818-.585.052-.341-.141-.542-.602-.542h-.468l-.179 1.135h.431zm4.437.364c.148.267.446.334 1.062.29l.357-.831c-.35-.008-.364-.104-.312-.416l.141-.89c.12-.786-.52-1.083-1.24-1.083-.566 0-1.056.17-1.561.534l-.142.92c.588-.4.93-.534 1.338-.534.35 0 .46.104.431.386-.167.113-.452.185-.75.26-.364.09-.747.187-.96.37a.9.9 0 0 0-.319.534c-.067.4.179.764.877.764.387 0 .75-.104 1.078-.304m-.411-.949c.145-.042.291-.085.403-.156l-.067.445c-.022.141-.03.215-.014.29a1.17 1.17 0 0 1-.625.214c-.2 0-.327-.148-.297-.348.044-.283.322-.364.6-.445M8.855 19.9h1.234l-.067.408c.394-.334.69-.46 1.077-.46.691 0 1.011.423.9 1.113l-.32 2.07h-1.234l.268-1.714c.052-.312-.045-.46-.282-.46-.194 0-.372.104-.543.334l-.282 1.832H8.372zm5.336-.912h-1.234l-.631 4.043h1.233l.223-1.447h.015l.936 1.447h1.553l-1.218-1.796 1.516-1.335H15.06l-1.181 1.076zm3.135 0h1.42l-.624 4.043h-1.42zm4.14 0h-2.029l-.631 4.043h2.288c1.375 0 2.104-1.046 2.245-1.966.148-.942-.305-2.078-1.873-2.078m.468 2.017c-.111.72-.49 1.061-1.181 1.061h-.372l.327-2.121h.379c.765 0 .929.526.847 1.06" clip-rule="evenodd"/></svg>',
-        secondaryButtonText: 'Not now',
-        secondaryButtonUrl: '#',
-        pnIllustrationSvg: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 120"><g clip-path="url(#globe-hand_svg__a)"><path fill="#8EDDF9" d="M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60"/><path fill="#0D234B" d="M53.675 104.493c-10.907 0-21.056-4.355-28.586-12.263a.304.304 0 0 1 .013-.432.304.304 0 0 1 .431.012c7.412 7.786 17.406 12.076 28.142 12.076 21.43 0 38.865-17.458 38.865-38.922 0-10.764-4.29-20.779-12.08-28.202a.31.31 0 0 1-.013-.432.31.31 0 0 1 .432-.012c7.912 7.537 12.268 17.71 12.268 28.642.008 21.798-17.703 39.533-39.472 39.533"/><path fill="#0D234B" d="M21.728 95.917a.3.3 0 0 1-.216-.09.307.307 0 0 1 0-.432l62.805-62.944a.31.31 0 0 1 .432 0 .31.31 0 0 1 0 .432L21.944 95.827a.32.32 0 0 1-.216.09"/><path fill="#005D92" d="M53.675 100.57c19.64 0 35.56-15.943 35.56-35.61 0-19.666-15.92-35.609-35.56-35.609s-35.56 15.943-35.56 35.61c0 19.666 15.92 35.609 35.56 35.609"/><path fill="#00A0D6" d="M78.822 39.781a35.6 35.6 0 0 0-7.424-5.7c-2.098 1.34-3.5 3.691-3.5 6.352 0 3.989 3.142 7.264 7.065 7.5h.558c1.769 0 3.403 1.178 3.765 2.91.497 2.375-1.324 4.49-3.61 4.49h-.627v.004H59.88c-3.83 0-7.31 2.546-8.153 6.286-1.185 5.264 2.812 9.982 7.868 10.023 1.67.012 3.044 1.308 3.044 2.983v6.482c0 4.192 2.917 7.945 7.044 8.645 5.325.909 9.986-3.227 9.986-8.4V66.63a4.315 4.315 0 0 1 4.315-4.32h5.154c-.611-8.213-4.046-16.251-10.316-22.53M39.993 72.652h-.937v-.44c0-4.302-3.516-7.818-7.81-7.818-4.295 0-7.811 3.52-7.811 7.818V83.69c.09.146.183.297.277.444.143.224.285.448.436.668q.244.36.501.717c.159.224.314.448.477.668.167.228.346.448.521.672s.347.449.526.673c.195.236.4.468.599.7.15.176.297.355.456.53q.631.704 1.304 1.381a36 36 0 0 0 2.974 2.657 6.18 6.18 0 0 1 3.231-3.797l7.798-3.77a6.68 6.68 0 0 0 3.773-6.013v-.244c-.004-3.48-2.844-6.324-6.315-6.324M28.533 39.781a35.6 35.6 0 0 0-7.081 10.104c1.063.314 2.188.485 3.349.485h.99v7.216c0 1.792 1.181 3.41 2.917 3.85a3.936 3.936 0 0 0 4.93-3.801v-1.056a6.21 6.21 0 0 1 6.205-6.213c6.556 0 11.922-5.374 11.922-11.938v-9.024c-8.455.456-16.778 3.911-23.232 10.377"/><path fill="#F06365" d="m43.127 37.39-7.912-10.288C30.158 20.526 34.84 11 43.127 11s12.968 9.526 7.912 16.102z"/><path fill="#FFC8A3" d="M43.127 24.368a4.02 4.02 0 0 0 4.017-4.021 4.02 4.02 0 0 0-4.017-4.022 4.02 4.02 0 0 0-4.018 4.022 4.02 4.02 0 0 0 4.018 4.021"/><path fill="#0D234B" d="M53.675 110.886a.307.307 0 0 1-.305-.305v-6.397c0-.167.138-.305.305-.305s.306.138.306.305v6.397a.3.3 0 0 1-.306.305"/><path fill="#FFC8A3" d="M68.892 119.784h-30.41v-4.665c0-1.055.855-1.907 1.906-1.907h26.597c1.055 0 1.907.856 1.907 1.907z"/><path fill="#FFF1E3" d="M65.331 113.213H42.043v-.844a2.21 2.21 0 0 1 2.208-2.208h18.868a2.21 2.21 0 0 1 2.208 2.208v.844z"/><path fill="#fff" d="M86.889 83.12a7.11 7.11 0 0 1 7.105-7.114c3.924 0 7.106 3.186 7.106 7.114z"/><path fill="#fff" d="M73.561 83.12a7.11 7.11 0 0 1 7.106-7.113c3.924 0 7.105 3.186 7.105 7.114zM14.228 83.93c0-4.196 3.398-7.598 7.587-7.598 4.188 0 7.586 3.402 7.586 7.599z"/><path fill="#fff" d="M0 83.931c0-4.196 3.398-7.598 7.586-7.598s7.587 3.402 7.587 7.598z"/><path fill="#FBC2C1" d="m69.036 63.267 5.093 4.502 3.789.016-1.072-5.056zM113.672 88.412l-9.326 2.086-23.578-.078c3.68 7.33 10.976 13.042 10.976 13.042l.013 5.431v10.891h27.212v-10.891zM70.815 80.455l4.836 4.636.24-5.28zM68.778 72.47l5.105 3.797 3.532-.285-1.393-4.633zM82.073 49.377l-9.877-7.933a3.357 3.357 0 0 0-4.77.574 3.37 3.37 0 0 0 .26 4.409l14.386 14.745z"/><path fill="#500715" d="m75.664 44.238-1.846-1.5 1.023 11.026.823.839z"/><path fill="#000" d="M75.175 38.293v-3.039c0-1.882 1.475-3.406 3.3-3.406h25.415c1.822 0 3.301 1.524 3.301 3.406v3.04zM107.19 85.193v3.594c0 1.882-1.479 3.406-3.3 3.406H78.474c-1.821 0-3.3-1.524-3.3-3.406v-3.594z"/><path fill="#fff" d="M107.19 38.294H75.174v46.899h32.016z"/><path fill="#F3F2F2" d="M103.308 82.337H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425c.392 0 .709.318.709.709v4.775a.704.704 0 0 1-.709.709"/><path fill="#D3CECB" d="M92.152 78.727h-6.001a.232.232 0 1 1 0-.465h6.001a.232.232 0 1 1 0 .465M95.53 80.21h-9.374a.23.23 0 0 1-.233-.232.23.23 0 0 1 .233-.232h9.374a.232.232 0 1 1 0 .464M98.338 78.728h-4.792a.232.232 0 1 1 0-.465h4.792c.126 0 .232.102.232.232a.235.235 0 0 1-.232.233M81.527 80.85a1.613 1.613 0 1 0 0-3.227 1.613 1.613 0 0 0 0 3.227"/><path fill="#F3F2F2" d="M103.308 74.193H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425a.71.71 0 0 1 .709.709v4.775a.704.704 0 0 1-.709.709"/><path fill="#D3CECB" d="M98.472 70.583h-12.32a.23.23 0 0 1-.233-.233.23.23 0 0 1 .232-.232h12.321a.232.232 0 1 1 0 .465M90.385 72.066H86.15a.232.232 0 1 1 0-.464h4.234a.232.232 0 1 1 0 .464M94.31 72.066h-2.612a.232.232 0 1 1 0-.464h2.611a.232.232 0 1 1 0 .464M81.528 72.705a1.614 1.614 0 1 0 0-3.227 1.614 1.614 0 0 0 0 3.227"/><path fill="#005D92" d="M102.599 65.941H79.591a1.42 1.42 0 0 1-1.422-1.422V42.571a1.42 1.42 0 0 1 1.422-1.422H102.6a1.42 1.42 0 0 1 1.422 1.422v21.948c0 .786-.64 1.422-1.422 1.422"/><path fill="#8EDDF9" d="M98.056 59.004H83.792a.232.232 0 1 1 0-.464h14.264a.232.232 0 1 1 0 .464M94.793 61.037h-7.737a.23.23 0 0 1-.232-.232.23.23 0 0 1 .232-.232h7.737a.232.232 0 1 1 0 .464"/><path fill="#00A0D6" d="M95.787 56.701h2.2c.616 0 1.113-.497 1.113-1.112v-8.422c0-.615-.497-1.112-1.112-1.112h-2.2z"/><path fill="#8EDDF9" d="M96.887 56.701H84.204a1.11 1.11 0 0 1-1.112-1.112v-8.422c0-.615.497-1.112 1.112-1.112H95.96c.513 0 .928.416.928.93z"/><path fill="#E0F8FF" d="M95.4 49.082c0 .607-.489 1.096-1.096 1.096H92.68a1.096 1.096 0 0 1 0-2.192h1.625c.603 0 1.096.493 1.096 1.096"/><path fill="#FBC2C1" d="m78.201 58.017-5.797-1.438a3.696 3.696 0 0 0-4.58 3.393l-.016.33a3.7 3.7 0 0 0 2.998 3.839l5.815 1.108a3.698 3.698 0 0 0 4.383-3.435 3.7 3.7 0 0 0-2.803-3.797"/><path fill="#500715" d="M76.62 65.546c.131 0 .25-.081.286-.212a.294.294 0 0 0-.2-.37l-3.895-1.166a.295.295 0 0 0-.37.2.294.294 0 0 0 .2.37l3.894 1.166a.3.3 0 0 0 .086.012"/><path fill="#FBC2C1" d="m76.914 66.85-5.52-.884a3.463 3.463 0 0 0-4.006 3.524l.008.306a3.465 3.465 0 0 0 3.101 3.345l5.513.574a3.463 3.463 0 0 0 3.817-3.549 3.46 3.46 0 0 0-2.913-3.316M78.316 76.124l-4.743-.758a2.977 2.977 0 0 0-3.443 3.028l.008.264a2.974 2.974 0 0 0 2.665 2.873l4.734.493a2.975 2.975 0 0 0 3.28-3.052 2.974 2.974 0 0 0-2.501-2.848M122.341 120l-3.376-46.819a9.6 9.6 0 0 0-.611-3.492l-6.584-17.662c-.684-1.837-2.994-2.42-4.469-1.128l-.114.102v19.682s-12.378 11.527-3.671 26.398L109.847 120z"/><path fill="#500715" d="M76.01 74.018c.138 0 .26-.098.293-.237a.3.3 0 0 0-.232-.354l-3.724-.778a.3.3 0 0 0-.355.232.3.3 0 0 0 .232.355l3.724.778q.03.005.062.004M75.339 82.091a.3.3 0 0 0 .297-.268.297.297 0 0 0-.265-.326l-1.564-.163a.297.297 0 0 0-.061.59l1.564.163q.011.005.028.004M103.091 96.068a.3.3 0 0 0 .245-.469c-1.475-2.151-1.777-3.178-1.781-3.19a.294.294 0 0 0-.366-.204.3.3 0 0 0-.208.367c.012.045.318 1.112 1.862 3.365.061.082.155.13.248.13"/><path fill="#500715" d="m102.18 94.215-11.339-2.021h10.499z"/></g><defs><clipPath id="globe-hand_svg__a"><path fill="#fff" d="M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60"/></clipPath></defs></svg>',
-    },
-};
-export const UspSimpleImage = {
-    name: 'Simple USP with Image',
-    render: UspSimple.render,
-    args: {
-        heading: 'Verify your address to find more packages',
-        headingLevel: 'h2',
-        preamble: 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',
-        primaryButtonText: 'Identify with BankID',
-        primaryButtonUrl: '#',
-        primaryButtonIconSvg: '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M23.591 9.136c.93-5.875-2.801-8.22-8.152-8.22H9.531L8.744 5.91h1.003c.55 0 1.07-.252 1.293-.616a.6.6 0 0 0 .104-.319c0-.207-.141-.363-.283-.467-.386-.29-.468-.593-.468-.809q-.002-.064.008-.118c.082-.527.795-1.098 1.739-1.098.564 0 .995.133 1.256.378.23.215.32.52.252.838-.082.379-.46.69-.676.846-.572.4-.498.75-.46.853.118.312.572.512.92.512h1.524v.007c2.08.015 3.195.972 2.846 3.198-.327 2.07-1.917 2.96-3.812 2.974l-.75 4.778h1.107c4.674 0 8.494-2.997 9.244-7.73M7.666 12.489l.981-6.172H7.6c-.49 0-1.122-.274-1.307-.779-.06-.17-.201-.757.609-1.328.29-.2.475-.423.513-.593a.46.46 0 0 0-.134-.453c-.178-.17-.528-.267-.974-.267-.75 0-1.278.43-1.33.742-.037.23.141.415.297.534.469.349.58.853.29 1.328-.297.49-.943.809-1.635.816h-1.07c-.05.343-.547 3.494-.985 6.27v.002c-.329 2.085-.624 3.958-.672 4.27h5.804l.103-.664c.12-.77.327-2.103.58-3.706zM.89 18.988h2.37c1.011 0 1.256.511 1.182.979-.06.378-.32.66-.765.846.564.215.787.548.706 1.075-.104.66-.677 1.15-1.427 1.15H.257zm1.568 1.676c.46 0 .676-.245.72-.534.045-.312-.096-.527-.557-.527h-.408l-.164 1.061zm-.253 1.75c.476 0 .75-.192.818-.585.052-.341-.141-.542-.602-.542h-.468l-.179 1.135h.431zm4.437.364c.148.267.446.334 1.062.29l.357-.831c-.35-.008-.364-.104-.312-.416l.141-.89c.12-.786-.52-1.083-1.24-1.083-.566 0-1.056.17-1.561.534l-.142.92c.588-.4.93-.534 1.338-.534.35 0 .46.104.431.386-.167.113-.452.185-.75.26-.364.09-.747.187-.96.37a.9.9 0 0 0-.319.534c-.067.4.179.764.877.764.387 0 .75-.104 1.078-.304m-.411-.949c.145-.042.291-.085.403-.156l-.067.445c-.022.141-.03.215-.014.29a1.17 1.17 0 0 1-.625.214c-.2 0-.327-.148-.297-.348.044-.283.322-.364.6-.445M8.855 19.9h1.234l-.067.408c.394-.334.69-.46 1.077-.46.691 0 1.011.423.9 1.113l-.32 2.07h-1.234l.268-1.714c.052-.312-.045-.46-.282-.46-.194 0-.372.104-.543.334l-.282 1.832H8.372zm5.336-.912h-1.234l-.631 4.043h1.233l.223-1.447h.015l.936 1.447h1.553l-1.218-1.796 1.516-1.335H15.06l-1.181 1.076zm3.135 0h1.42l-.624 4.043h-1.42zm4.14 0h-2.029l-.631 4.043h2.288c1.375 0 2.104-1.046 2.245-1.966.148-.942-.305-2.078-1.873-2.078m.468 2.017c-.111.72-.49 1.061-1.181 1.061h-.372l.327-2.121h.379c.765 0 .929.526.847 1.06" clip-rule="evenodd"/></svg>',
-        secondaryButtonText: 'Not now',
-        secondaryButtonUrl: '#',
-        imageUrl: 'https://picsum.photos/id/101/200/200',
-        imageAltText: 'Alt Text',
-    },
-};
-//# sourceMappingURL=pn-usp-simple.stories.js.map

package/dist/collection/components/widgets/pn-usp-simple/pn-usp-simple.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"pn-usp-simple.stories.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-usp-simple/pn-usp-simple.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,IAAI,MAAM,2BAA2B,CAAC;AAE7C,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,+BAA+B;IACtC,UAAU,EAAE;QACV,OAAO,EAAE,EAAE;QACX,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,2CAA2C;QACpD,YAAY,EAAE,IAAI;QAClB,QAAQ,EACN,0NAA0N;QAC5N,iBAAiB,EAAE,sBAAsB;QACzC,gBAAgB,EAAE,GAAG;QACrB,oBAAoB,EAClB,8uEAA8uE;QAChvE,mBAAmB,EAAE,QAAQ;QAC7B,kBAAkB,EAAE,GAAG;QACvB,iBAAiB,EACf,w8NAAw8N;KAC38N;IACD,QAAQ;CACT,CAAC;AAIF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE,sCAAsC;IAC5C,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,eAAe,EAAE,IAAI,CAAC;CACvD,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAU;IAC1C,IAAI,EAAE,8BAA8B;IACpC,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,IAAI,EAAE;QACJ,OAAO,EAAE,2CAA2C;QACpD,YAAY,EAAE,IAAI;QAClB,QAAQ,EACN,0NAA0N;QAC5N,iBAAiB,EAAE,sBAAsB;QACzC,gBAAgB,EAAE,GAAG;QACrB,oBAAoB,EAClB,8uEAA8uE;QAChvE,mBAAmB,EAAE,SAAS;QAC9B,kBAAkB,EAAE,GAAG;QACvB,iBAAiB,EACf,w8NAAw8N;KAC38N;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,uBAAuB;IAC7B,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,IAAI,EAAE;QACJ,OAAO,EAAE,2CAA2C;QACpD,YAAY,EAAE,IAAI;QAClB,QAAQ,EACN,0NAA0N;QAC5N,iBAAiB,EAAE,sBAAsB;QACzC,gBAAgB,EAAE,GAAG;QACrB,oBAAoB,EAClB,8uEAA8uE;QAChvE,mBAAmB,EAAE,SAAS;QAC9B,kBAAkB,EAAE,GAAG;QACvB,QAAQ,EAAE,sCAAsC;QAChD,YAAY,EAAE,UAAU;KACzB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-usp-simple-docs.json';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<HTMLPnUspSimpleElement> = {\n title: 'Components/Widgets/Usp Simple',\n parameters: {\n actions: {},\n docs: {\n description: {\n story: textContent,\n },\n },\n },\n args: {\n heading: 'Verify your address to find more packages',\n headingLevel: 'h2',\n preamble:\n 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',\n primaryButtonText: 'Identify with BankID',\n primaryButtonUrl: '#',\n primaryButtonIconSvg:\n '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M23.591 9.136c.93-5.875-2.801-8.22-8.152-8.22H9.531L8.744 5.91h1.003c.55 0 1.07-.252 1.293-.616a.6.6 0 0 0 .104-.319c0-.207-.141-.363-.283-.467-.386-.29-.468-.593-.468-.809q-.002-.064.008-.118c.082-.527.795-1.098 1.739-1.098.564 0 .995.133 1.256.378.23.215.32.52.252.838-.082.379-.46.69-.676.846-.572.4-.498.75-.46.853.118.312.572.512.92.512h1.524v.007c2.08.015 3.195.972 2.846 3.198-.327 2.07-1.917 2.96-3.812 2.974l-.75 4.778h1.107c4.674 0 8.494-2.997 9.244-7.73M7.666 12.489l.981-6.172H7.6c-.49 0-1.122-.274-1.307-.779-.06-.17-.201-.757.609-1.328.29-.2.475-.423.513-.593a.46.46 0 0 0-.134-.453c-.178-.17-.528-.267-.974-.267-.75 0-1.278.43-1.33.742-.037.23.141.415.297.534.469.349.58.853.29 1.328-.297.49-.943.809-1.635.816h-1.07c-.05.343-.547 3.494-.985 6.27v.002c-.329 2.085-.624 3.958-.672 4.27h5.804l.103-.664c.12-.77.327-2.103.58-3.706zM.89 18.988h2.37c1.011 0 1.256.511 1.182.979-.06.378-.32.66-.765.846.564.215.787.548.706 1.075-.104.66-.677 1.15-1.427 1.15H.257zm1.568 1.676c.46 0 .676-.245.72-.534.045-.312-.096-.527-.557-.527h-.408l-.164 1.061zm-.253 1.75c.476 0 .75-.192.818-.585.052-.341-.141-.542-.602-.542h-.468l-.179 1.135h.431zm4.437.364c.148.267.446.334 1.062.29l.357-.831c-.35-.008-.364-.104-.312-.416l.141-.89c.12-.786-.52-1.083-1.24-1.083-.566 0-1.056.17-1.561.534l-.142.92c.588-.4.93-.534 1.338-.534.35 0 .46.104.431.386-.167.113-.452.185-.75.26-.364.09-.747.187-.96.37a.9.9 0 0 0-.319.534c-.067.4.179.764.877.764.387 0 .75-.104 1.078-.304m-.411-.949c.145-.042.291-.085.403-.156l-.067.445c-.022.141-.03.215-.014.29a1.17 1.17 0 0 1-.625.214c-.2 0-.327-.148-.297-.348.044-.283.322-.364.6-.445M8.855 19.9h1.234l-.067.408c.394-.334.69-.46 1.077-.46.691 0 1.011.423.9 1.113l-.32 2.07h-1.234l.268-1.714c.052-.312-.045-.46-.282-.46-.194 0-.372.104-.543.334l-.282 1.832H8.372zm5.336-.912h-1.234l-.631 4.043h1.233l.223-1.447h.015l.936 1.447h1.553l-1.218-1.796 1.516-1.335H15.06l-1.181 1.076zm3.135 0h1.42l-.624 4.043h-1.42zm4.14 0h-2.029l-.631 4.043h2.288c1.375 0 2.104-1.046 2.245-1.966.148-.942-.305-2.078-1.873-2.078m.468 2.017c-.111.72-.49 1.061-1.181 1.061h-.372l.327-2.121h.379c.765 0 .929.526.847 1.06\" clip-rule=\"evenodd\"/></svg>',\n secondaryButtonText: 'Cancel',\n secondaryButtonUrl: '#',\n pnIllustrationSvg:\n '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 120 120\"><g clip-path=\"url(#globe-hand_svg__a)\"><path fill=\"#8EDDF9\" d=\"M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60\"/><path fill=\"#0D234B\" d=\"M53.675 104.493c-10.907 0-21.056-4.355-28.586-12.263a.304.304 0 0 1 .013-.432.304.304 0 0 1 .431.012c7.412 7.786 17.406 12.076 28.142 12.076 21.43 0 38.865-17.458 38.865-38.922 0-10.764-4.29-20.779-12.08-28.202a.31.31 0 0 1-.013-.432.31.31 0 0 1 .432-.012c7.912 7.537 12.268 17.71 12.268 28.642.008 21.798-17.703 39.533-39.472 39.533\"/><path fill=\"#0D234B\" d=\"M21.728 95.917a.3.3 0 0 1-.216-.09.307.307 0 0 1 0-.432l62.805-62.944a.31.31 0 0 1 .432 0 .31.31 0 0 1 0 .432L21.944 95.827a.32.32 0 0 1-.216.09\"/><path fill=\"#005D92\" d=\"M53.675 100.57c19.64 0 35.56-15.943 35.56-35.61 0-19.666-15.92-35.609-35.56-35.609s-35.56 15.943-35.56 35.61c0 19.666 15.92 35.609 35.56 35.609\"/><path fill=\"#00A0D6\" d=\"M78.822 39.781a35.6 35.6 0 0 0-7.424-5.7c-2.098 1.34-3.5 3.691-3.5 6.352 0 3.989 3.142 7.264 7.065 7.5h.558c1.769 0 3.403 1.178 3.765 2.91.497 2.375-1.324 4.49-3.61 4.49h-.627v.004H59.88c-3.83 0-7.31 2.546-8.153 6.286-1.185 5.264 2.812 9.982 7.868 10.023 1.67.012 3.044 1.308 3.044 2.983v6.482c0 4.192 2.917 7.945 7.044 8.645 5.325.909 9.986-3.227 9.986-8.4V66.63a4.315 4.315 0 0 1 4.315-4.32h5.154c-.611-8.213-4.046-16.251-10.316-22.53M39.993 72.652h-.937v-.44c0-4.302-3.516-7.818-7.81-7.818-4.295 0-7.811 3.52-7.811 7.818V83.69c.09.146.183.297.277.444.143.224.285.448.436.668q.244.36.501.717c.159.224.314.448.477.668.167.228.346.448.521.672s.347.449.526.673c.195.236.4.468.599.7.15.176.297.355.456.53q.631.704 1.304 1.381a36 36 0 0 0 2.974 2.657 6.18 6.18 0 0 1 3.231-3.797l7.798-3.77a6.68 6.68 0 0 0 3.773-6.013v-.244c-.004-3.48-2.844-6.324-6.315-6.324M28.533 39.781a35.6 35.6 0 0 0-7.081 10.104c1.063.314 2.188.485 3.349.485h.99v7.216c0 1.792 1.181 3.41 2.917 3.85a3.936 3.936 0 0 0 4.93-3.801v-1.056a6.21 6.21 0 0 1 6.205-6.213c6.556 0 11.922-5.374 11.922-11.938v-9.024c-8.455.456-16.778 3.911-23.232 10.377\"/><path fill=\"#F06365\" d=\"m43.127 37.39-7.912-10.288C30.158 20.526 34.84 11 43.127 11s12.968 9.526 7.912 16.102z\"/><path fill=\"#FFC8A3\" d=\"M43.127 24.368a4.02 4.02 0 0 0 4.017-4.021 4.02 4.02 0 0 0-4.017-4.022 4.02 4.02 0 0 0-4.018 4.022 4.02 4.02 0 0 0 4.018 4.021\"/><path fill=\"#0D234B\" d=\"M53.675 110.886a.307.307 0 0 1-.305-.305v-6.397c0-.167.138-.305.305-.305s.306.138.306.305v6.397a.3.3 0 0 1-.306.305\"/><path fill=\"#FFC8A3\" d=\"M68.892 119.784h-30.41v-4.665c0-1.055.855-1.907 1.906-1.907h26.597c1.055 0 1.907.856 1.907 1.907z\"/><path fill=\"#FFF1E3\" d=\"M65.331 113.213H42.043v-.844a2.21 2.21 0 0 1 2.208-2.208h18.868a2.21 2.21 0 0 1 2.208 2.208v.844z\"/><path fill=\"#fff\" d=\"M86.889 83.12a7.11 7.11 0 0 1 7.105-7.114c3.924 0 7.106 3.186 7.106 7.114z\"/><path fill=\"#fff\" d=\"M73.561 83.12a7.11 7.11 0 0 1 7.106-7.113c3.924 0 7.105 3.186 7.105 7.114zM14.228 83.93c0-4.196 3.398-7.598 7.587-7.598 4.188 0 7.586 3.402 7.586 7.599z\"/><path fill=\"#fff\" d=\"M0 83.931c0-4.196 3.398-7.598 7.586-7.598s7.587 3.402 7.587 7.598z\"/><path fill=\"#FBC2C1\" d=\"m69.036 63.267 5.093 4.502 3.789.016-1.072-5.056zM113.672 88.412l-9.326 2.086-23.578-.078c3.68 7.33 10.976 13.042 10.976 13.042l.013 5.431v10.891h27.212v-10.891zM70.815 80.455l4.836 4.636.24-5.28zM68.778 72.47l5.105 3.797 3.532-.285-1.393-4.633zM82.073 49.377l-9.877-7.933a3.357 3.357 0 0 0-4.77.574 3.37 3.37 0 0 0 .26 4.409l14.386 14.745z\"/><path fill=\"#500715\" d=\"m75.664 44.238-1.846-1.5 1.023 11.026.823.839z\"/><path fill=\"#000\" d=\"M75.175 38.293v-3.039c0-1.882 1.475-3.406 3.3-3.406h25.415c1.822 0 3.301 1.524 3.301 3.406v3.04zM107.19 85.193v3.594c0 1.882-1.479 3.406-3.3 3.406H78.474c-1.821 0-3.3-1.524-3.3-3.406v-3.594z\"/><path fill=\"#fff\" d=\"M107.19 38.294H75.174v46.899h32.016z\"/><path fill=\"#F3F2F2\" d=\"M103.308 82.337H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425c.392 0 .709.318.709.709v4.775a.704.704 0 0 1-.709.709\"/><path fill=\"#D3CECB\" d=\"M92.152 78.727h-6.001a.232.232 0 1 1 0-.465h6.001a.232.232 0 1 1 0 .465M95.53 80.21h-9.374a.23.23 0 0 1-.233-.232.23.23 0 0 1 .233-.232h9.374a.232.232 0 1 1 0 .464M98.338 78.728h-4.792a.232.232 0 1 1 0-.465h4.792c.126 0 .232.102.232.232a.235.235 0 0 1-.232.233M81.527 80.85a1.613 1.613 0 1 0 0-3.227 1.613 1.613 0 0 0 0 3.227\"/><path fill=\"#F3F2F2\" d=\"M103.308 74.193H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425a.71.71 0 0 1 .709.709v4.775a.704.704 0 0 1-.709.709\"/><path fill=\"#D3CECB\" d=\"M98.472 70.583h-12.32a.23.23 0 0 1-.233-.233.23.23 0 0 1 .232-.232h12.321a.232.232 0 1 1 0 .465M90.385 72.066H86.15a.232.232 0 1 1 0-.464h4.234a.232.232 0 1 1 0 .464M94.31 72.066h-2.612a.232.232 0 1 1 0-.464h2.611a.232.232 0 1 1 0 .464M81.528 72.705a1.614 1.614 0 1 0 0-3.227 1.614 1.614 0 0 0 0 3.227\"/><path fill=\"#005D92\" d=\"M102.599 65.941H79.591a1.42 1.42 0 0 1-1.422-1.422V42.571a1.42 1.42 0 0 1 1.422-1.422H102.6a1.42 1.42 0 0 1 1.422 1.422v21.948c0 .786-.64 1.422-1.422 1.422\"/><path fill=\"#8EDDF9\" d=\"M98.056 59.004H83.792a.232.232 0 1 1 0-.464h14.264a.232.232 0 1 1 0 .464M94.793 61.037h-7.737a.23.23 0 0 1-.232-.232.23.23 0 0 1 .232-.232h7.737a.232.232 0 1 1 0 .464\"/><path fill=\"#00A0D6\" d=\"M95.787 56.701h2.2c.616 0 1.113-.497 1.113-1.112v-8.422c0-.615-.497-1.112-1.112-1.112h-2.2z\"/><path fill=\"#8EDDF9\" d=\"M96.887 56.701H84.204a1.11 1.11 0 0 1-1.112-1.112v-8.422c0-.615.497-1.112 1.112-1.112H95.96c.513 0 .928.416.928.93z\"/><path fill=\"#E0F8FF\" d=\"M95.4 49.082c0 .607-.489 1.096-1.096 1.096H92.68a1.096 1.096 0 0 1 0-2.192h1.625c.603 0 1.096.493 1.096 1.096\"/><path fill=\"#FBC2C1\" d=\"m78.201 58.017-5.797-1.438a3.696 3.696 0 0 0-4.58 3.393l-.016.33a3.7 3.7 0 0 0 2.998 3.839l5.815 1.108a3.698 3.698 0 0 0 4.383-3.435 3.7 3.7 0 0 0-2.803-3.797\"/><path fill=\"#500715\" d=\"M76.62 65.546c.131 0 .25-.081.286-.212a.294.294 0 0 0-.2-.37l-3.895-1.166a.295.295 0 0 0-.37.2.294.294 0 0 0 .2.37l3.894 1.166a.3.3 0 0 0 .086.012\"/><path fill=\"#FBC2C1\" d=\"m76.914 66.85-5.52-.884a3.463 3.463 0 0 0-4.006 3.524l.008.306a3.465 3.465 0 0 0 3.101 3.345l5.513.574a3.463 3.463 0 0 0 3.817-3.549 3.46 3.46 0 0 0-2.913-3.316M78.316 76.124l-4.743-.758a2.977 2.977 0 0 0-3.443 3.028l.008.264a2.974 2.974 0 0 0 2.665 2.873l4.734.493a2.975 2.975 0 0 0 3.28-3.052 2.974 2.974 0 0 0-2.501-2.848M122.341 120l-3.376-46.819a9.6 9.6 0 0 0-.611-3.492l-6.584-17.662c-.684-1.837-2.994-2.42-4.469-1.128l-.114.102v19.682s-12.378 11.527-3.671 26.398L109.847 120z\"/><path fill=\"#500715\" d=\"M76.01 74.018c.138 0 .26-.098.293-.237a.3.3 0 0 0-.232-.354l-3.724-.778a.3.3 0 0 0-.355.232.3.3 0 0 0 .232.355l3.724.778q.03.005.062.004M75.339 82.091a.3.3 0 0 0 .297-.268.297.297 0 0 0-.265-.326l-1.564-.163a.297.297 0 0 0-.061.59l1.564.163q.011.005.028.004M103.091 96.068a.3.3 0 0 0 .245-.469c-1.475-2.151-1.777-3.178-1.781-3.19a.294.294 0 0 0-.366-.204.3.3 0 0 0-.208.367c.012.045.318 1.112 1.862 3.365.061.082.155.13.248.13\"/><path fill=\"#500715\" d=\"m102.18 94.215-11.339-2.021h10.499z\"/></g><defs><clipPath id=\"globe-hand_svg__a\"><path fill=\"#fff\" d=\"M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60\"/></clipPath></defs></svg>',\n },\n argTypes,\n};\n\ntype Story = StoryObj<HTMLPnUspSimpleElement>;\n\nexport default meta;\n\nexport const UspSimple: Story = {\n name: 'Simple USP with CTA and Illustration',\n render: args => createComponent('pn-usp-simple', args),\n};\n\nexport const UspSimpleIllustration: Story = {\n name: 'Simple USP with Illustration',\n render: UspSimple.render,\n args: {\n heading: 'Verify your address to find more packages',\n headingLevel: 'h2',\n preamble:\n 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',\n primaryButtonText: 'Identify with BankID',\n primaryButtonUrl: '#',\n primaryButtonIconSvg:\n '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M23.591 9.136c.93-5.875-2.801-8.22-8.152-8.22H9.531L8.744 5.91h1.003c.55 0 1.07-.252 1.293-.616a.6.6 0 0 0 .104-.319c0-.207-.141-.363-.283-.467-.386-.29-.468-.593-.468-.809q-.002-.064.008-.118c.082-.527.795-1.098 1.739-1.098.564 0 .995.133 1.256.378.23.215.32.52.252.838-.082.379-.46.69-.676.846-.572.4-.498.75-.46.853.118.312.572.512.92.512h1.524v.007c2.08.015 3.195.972 2.846 3.198-.327 2.07-1.917 2.96-3.812 2.974l-.75 4.778h1.107c4.674 0 8.494-2.997 9.244-7.73M7.666 12.489l.981-6.172H7.6c-.49 0-1.122-.274-1.307-.779-.06-.17-.201-.757.609-1.328.29-.2.475-.423.513-.593a.46.46 0 0 0-.134-.453c-.178-.17-.528-.267-.974-.267-.75 0-1.278.43-1.33.742-.037.23.141.415.297.534.469.349.58.853.29 1.328-.297.49-.943.809-1.635.816h-1.07c-.05.343-.547 3.494-.985 6.27v.002c-.329 2.085-.624 3.958-.672 4.27h5.804l.103-.664c.12-.77.327-2.103.58-3.706zM.89 18.988h2.37c1.011 0 1.256.511 1.182.979-.06.378-.32.66-.765.846.564.215.787.548.706 1.075-.104.66-.677 1.15-1.427 1.15H.257zm1.568 1.676c.46 0 .676-.245.72-.534.045-.312-.096-.527-.557-.527h-.408l-.164 1.061zm-.253 1.75c.476 0 .75-.192.818-.585.052-.341-.141-.542-.602-.542h-.468l-.179 1.135h.431zm4.437.364c.148.267.446.334 1.062.29l.357-.831c-.35-.008-.364-.104-.312-.416l.141-.89c.12-.786-.52-1.083-1.24-1.083-.566 0-1.056.17-1.561.534l-.142.92c.588-.4.93-.534 1.338-.534.35 0 .46.104.431.386-.167.113-.452.185-.75.26-.364.09-.747.187-.96.37a.9.9 0 0 0-.319.534c-.067.4.179.764.877.764.387 0 .75-.104 1.078-.304m-.411-.949c.145-.042.291-.085.403-.156l-.067.445c-.022.141-.03.215-.014.29a1.17 1.17 0 0 1-.625.214c-.2 0-.327-.148-.297-.348.044-.283.322-.364.6-.445M8.855 19.9h1.234l-.067.408c.394-.334.69-.46 1.077-.46.691 0 1.011.423.9 1.113l-.32 2.07h-1.234l.268-1.714c.052-.312-.045-.46-.282-.46-.194 0-.372.104-.543.334l-.282 1.832H8.372zm5.336-.912h-1.234l-.631 4.043h1.233l.223-1.447h.015l.936 1.447h1.553l-1.218-1.796 1.516-1.335H15.06l-1.181 1.076zm3.135 0h1.42l-.624 4.043h-1.42zm4.14 0h-2.029l-.631 4.043h2.288c1.375 0 2.104-1.046 2.245-1.966.148-.942-.305-2.078-1.873-2.078m.468 2.017c-.111.72-.49 1.061-1.181 1.061h-.372l.327-2.121h.379c.765 0 .929.526.847 1.06\" clip-rule=\"evenodd\"/></svg>',\n secondaryButtonText: 'Not now',\n secondaryButtonUrl: '#',\n pnIllustrationSvg:\n '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 120 120\"><g clip-path=\"url(#globe-hand_svg__a)\"><path fill=\"#8EDDF9\" d=\"M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60\"/><path fill=\"#0D234B\" d=\"M53.675 104.493c-10.907 0-21.056-4.355-28.586-12.263a.304.304 0 0 1 .013-.432.304.304 0 0 1 .431.012c7.412 7.786 17.406 12.076 28.142 12.076 21.43 0 38.865-17.458 38.865-38.922 0-10.764-4.29-20.779-12.08-28.202a.31.31 0 0 1-.013-.432.31.31 0 0 1 .432-.012c7.912 7.537 12.268 17.71 12.268 28.642.008 21.798-17.703 39.533-39.472 39.533\"/><path fill=\"#0D234B\" d=\"M21.728 95.917a.3.3 0 0 1-.216-.09.307.307 0 0 1 0-.432l62.805-62.944a.31.31 0 0 1 .432 0 .31.31 0 0 1 0 .432L21.944 95.827a.32.32 0 0 1-.216.09\"/><path fill=\"#005D92\" d=\"M53.675 100.57c19.64 0 35.56-15.943 35.56-35.61 0-19.666-15.92-35.609-35.56-35.609s-35.56 15.943-35.56 35.61c0 19.666 15.92 35.609 35.56 35.609\"/><path fill=\"#00A0D6\" d=\"M78.822 39.781a35.6 35.6 0 0 0-7.424-5.7c-2.098 1.34-3.5 3.691-3.5 6.352 0 3.989 3.142 7.264 7.065 7.5h.558c1.769 0 3.403 1.178 3.765 2.91.497 2.375-1.324 4.49-3.61 4.49h-.627v.004H59.88c-3.83 0-7.31 2.546-8.153 6.286-1.185 5.264 2.812 9.982 7.868 10.023 1.67.012 3.044 1.308 3.044 2.983v6.482c0 4.192 2.917 7.945 7.044 8.645 5.325.909 9.986-3.227 9.986-8.4V66.63a4.315 4.315 0 0 1 4.315-4.32h5.154c-.611-8.213-4.046-16.251-10.316-22.53M39.993 72.652h-.937v-.44c0-4.302-3.516-7.818-7.81-7.818-4.295 0-7.811 3.52-7.811 7.818V83.69c.09.146.183.297.277.444.143.224.285.448.436.668q.244.36.501.717c.159.224.314.448.477.668.167.228.346.448.521.672s.347.449.526.673c.195.236.4.468.599.7.15.176.297.355.456.53q.631.704 1.304 1.381a36 36 0 0 0 2.974 2.657 6.18 6.18 0 0 1 3.231-3.797l7.798-3.77a6.68 6.68 0 0 0 3.773-6.013v-.244c-.004-3.48-2.844-6.324-6.315-6.324M28.533 39.781a35.6 35.6 0 0 0-7.081 10.104c1.063.314 2.188.485 3.349.485h.99v7.216c0 1.792 1.181 3.41 2.917 3.85a3.936 3.936 0 0 0 4.93-3.801v-1.056a6.21 6.21 0 0 1 6.205-6.213c6.556 0 11.922-5.374 11.922-11.938v-9.024c-8.455.456-16.778 3.911-23.232 10.377\"/><path fill=\"#F06365\" d=\"m43.127 37.39-7.912-10.288C30.158 20.526 34.84 11 43.127 11s12.968 9.526 7.912 16.102z\"/><path fill=\"#FFC8A3\" d=\"M43.127 24.368a4.02 4.02 0 0 0 4.017-4.021 4.02 4.02 0 0 0-4.017-4.022 4.02 4.02 0 0 0-4.018 4.022 4.02 4.02 0 0 0 4.018 4.021\"/><path fill=\"#0D234B\" d=\"M53.675 110.886a.307.307 0 0 1-.305-.305v-6.397c0-.167.138-.305.305-.305s.306.138.306.305v6.397a.3.3 0 0 1-.306.305\"/><path fill=\"#FFC8A3\" d=\"M68.892 119.784h-30.41v-4.665c0-1.055.855-1.907 1.906-1.907h26.597c1.055 0 1.907.856 1.907 1.907z\"/><path fill=\"#FFF1E3\" d=\"M65.331 113.213H42.043v-.844a2.21 2.21 0 0 1 2.208-2.208h18.868a2.21 2.21 0 0 1 2.208 2.208v.844z\"/><path fill=\"#fff\" d=\"M86.889 83.12a7.11 7.11 0 0 1 7.105-7.114c3.924 0 7.106 3.186 7.106 7.114z\"/><path fill=\"#fff\" d=\"M73.561 83.12a7.11 7.11 0 0 1 7.106-7.113c3.924 0 7.105 3.186 7.105 7.114zM14.228 83.93c0-4.196 3.398-7.598 7.587-7.598 4.188 0 7.586 3.402 7.586 7.599z\"/><path fill=\"#fff\" d=\"M0 83.931c0-4.196 3.398-7.598 7.586-7.598s7.587 3.402 7.587 7.598z\"/><path fill=\"#FBC2C1\" d=\"m69.036 63.267 5.093 4.502 3.789.016-1.072-5.056zM113.672 88.412l-9.326 2.086-23.578-.078c3.68 7.33 10.976 13.042 10.976 13.042l.013 5.431v10.891h27.212v-10.891zM70.815 80.455l4.836 4.636.24-5.28zM68.778 72.47l5.105 3.797 3.532-.285-1.393-4.633zM82.073 49.377l-9.877-7.933a3.357 3.357 0 0 0-4.77.574 3.37 3.37 0 0 0 .26 4.409l14.386 14.745z\"/><path fill=\"#500715\" d=\"m75.664 44.238-1.846-1.5 1.023 11.026.823.839z\"/><path fill=\"#000\" d=\"M75.175 38.293v-3.039c0-1.882 1.475-3.406 3.3-3.406h25.415c1.822 0 3.301 1.524 3.301 3.406v3.04zM107.19 85.193v3.594c0 1.882-1.479 3.406-3.3 3.406H78.474c-1.821 0-3.3-1.524-3.3-3.406v-3.594z\"/><path fill=\"#fff\" d=\"M107.19 38.294H75.174v46.899h32.016z\"/><path fill=\"#F3F2F2\" d=\"M103.308 82.337H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425c.392 0 .709.318.709.709v4.775a.704.704 0 0 1-.709.709\"/><path fill=\"#D3CECB\" d=\"M92.152 78.727h-6.001a.232.232 0 1 1 0-.465h6.001a.232.232 0 1 1 0 .465M95.53 80.21h-9.374a.23.23 0 0 1-.233-.232.23.23 0 0 1 .233-.232h9.374a.232.232 0 1 1 0 .464M98.338 78.728h-4.792a.232.232 0 1 1 0-.465h4.792c.126 0 .232.102.232.232a.235.235 0 0 1-.232.233M81.527 80.85a1.613 1.613 0 1 0 0-3.227 1.613 1.613 0 0 0 0 3.227\"/><path fill=\"#F3F2F2\" d=\"M103.308 74.193H78.883a.71.71 0 0 1-.709-.709v-4.775a.71.71 0 0 1 .709-.709h24.425a.71.71 0 0 1 .709.709v4.775a.704.704 0 0 1-.709.709\"/><path fill=\"#D3CECB\" d=\"M98.472 70.583h-12.32a.23.23 0 0 1-.233-.233.23.23 0 0 1 .232-.232h12.321a.232.232 0 1 1 0 .465M90.385 72.066H86.15a.232.232 0 1 1 0-.464h4.234a.232.232 0 1 1 0 .464M94.31 72.066h-2.612a.232.232 0 1 1 0-.464h2.611a.232.232 0 1 1 0 .464M81.528 72.705a1.614 1.614 0 1 0 0-3.227 1.614 1.614 0 0 0 0 3.227\"/><path fill=\"#005D92\" d=\"M102.599 65.941H79.591a1.42 1.42 0 0 1-1.422-1.422V42.571a1.42 1.42 0 0 1 1.422-1.422H102.6a1.42 1.42 0 0 1 1.422 1.422v21.948c0 .786-.64 1.422-1.422 1.422\"/><path fill=\"#8EDDF9\" d=\"M98.056 59.004H83.792a.232.232 0 1 1 0-.464h14.264a.232.232 0 1 1 0 .464M94.793 61.037h-7.737a.23.23 0 0 1-.232-.232.23.23 0 0 1 .232-.232h7.737a.232.232 0 1 1 0 .464\"/><path fill=\"#00A0D6\" d=\"M95.787 56.701h2.2c.616 0 1.113-.497 1.113-1.112v-8.422c0-.615-.497-1.112-1.112-1.112h-2.2z\"/><path fill=\"#8EDDF9\" d=\"M96.887 56.701H84.204a1.11 1.11 0 0 1-1.112-1.112v-8.422c0-.615.497-1.112 1.112-1.112H95.96c.513 0 .928.416.928.93z\"/><path fill=\"#E0F8FF\" d=\"M95.4 49.082c0 .607-.489 1.096-1.096 1.096H92.68a1.096 1.096 0 0 1 0-2.192h1.625c.603 0 1.096.493 1.096 1.096\"/><path fill=\"#FBC2C1\" d=\"m78.201 58.017-5.797-1.438a3.696 3.696 0 0 0-4.58 3.393l-.016.33a3.7 3.7 0 0 0 2.998 3.839l5.815 1.108a3.698 3.698 0 0 0 4.383-3.435 3.7 3.7 0 0 0-2.803-3.797\"/><path fill=\"#500715\" d=\"M76.62 65.546c.131 0 .25-.081.286-.212a.294.294 0 0 0-.2-.37l-3.895-1.166a.295.295 0 0 0-.37.2.294.294 0 0 0 .2.37l3.894 1.166a.3.3 0 0 0 .086.012\"/><path fill=\"#FBC2C1\" d=\"m76.914 66.85-5.52-.884a3.463 3.463 0 0 0-4.006 3.524l.008.306a3.465 3.465 0 0 0 3.101 3.345l5.513.574a3.463 3.463 0 0 0 3.817-3.549 3.46 3.46 0 0 0-2.913-3.316M78.316 76.124l-4.743-.758a2.977 2.977 0 0 0-3.443 3.028l.008.264a2.974 2.974 0 0 0 2.665 2.873l4.734.493a2.975 2.975 0 0 0 3.28-3.052 2.974 2.974 0 0 0-2.501-2.848M122.341 120l-3.376-46.819a9.6 9.6 0 0 0-.611-3.492l-6.584-17.662c-.684-1.837-2.994-2.42-4.469-1.128l-.114.102v19.682s-12.378 11.527-3.671 26.398L109.847 120z\"/><path fill=\"#500715\" d=\"M76.01 74.018c.138 0 .26-.098.293-.237a.3.3 0 0 0-.232-.354l-3.724-.778a.3.3 0 0 0-.355.232.3.3 0 0 0 .232.355l3.724.778q.03.005.062.004M75.339 82.091a.3.3 0 0 0 .297-.268.297.297 0 0 0-.265-.326l-1.564-.163a.297.297 0 0 0-.061.59l1.564.163q.011.005.028.004M103.091 96.068a.3.3 0 0 0 .245-.469c-1.475-2.151-1.777-3.178-1.781-3.19a.294.294 0 0 0-.366-.204.3.3 0 0 0-.208.367c.012.045.318 1.112 1.862 3.365.061.082.155.13.248.13\"/><path fill=\"#500715\" d=\"m102.18 94.215-11.339-2.021h10.499z\"/></g><defs><clipPath id=\"globe-hand_svg__a\"><path fill=\"#fff\" d=\"M0 60C0 26.863 26.863 0 60 0s60 26.863 60 60-26.863 60-60 60S0 93.137 0 60\"/></clipPath></defs></svg>',\n },\n};\n\nexport const UspSimpleImage: Story = {\n name: 'Simple USP with Image',\n render: UspSimple.render,\n args: {\n heading: 'Verify your address to find more packages',\n headingLevel: 'h2',\n preamble:\n 'Sometimes we do not receive your email address or your mobile number from the sender.If you verify your address with BankID, we can, with the help of your address and your name, find and add your packages to the app.',\n primaryButtonText: 'Identify with BankID',\n primaryButtonUrl: '#',\n primaryButtonIconSvg:\n '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M23.591 9.136c.93-5.875-2.801-8.22-8.152-8.22H9.531L8.744 5.91h1.003c.55 0 1.07-.252 1.293-.616a.6.6 0 0 0 .104-.319c0-.207-.141-.363-.283-.467-.386-.29-.468-.593-.468-.809q-.002-.064.008-.118c.082-.527.795-1.098 1.739-1.098.564 0 .995.133 1.256.378.23.215.32.52.252.838-.082.379-.46.69-.676.846-.572.4-.498.75-.46.853.118.312.572.512.92.512h1.524v.007c2.08.015 3.195.972 2.846 3.198-.327 2.07-1.917 2.96-3.812 2.974l-.75 4.778h1.107c4.674 0 8.494-2.997 9.244-7.73M7.666 12.489l.981-6.172H7.6c-.49 0-1.122-.274-1.307-.779-.06-.17-.201-.757.609-1.328.29-.2.475-.423.513-.593a.46.46 0 0 0-.134-.453c-.178-.17-.528-.267-.974-.267-.75 0-1.278.43-1.33.742-.037.23.141.415.297.534.469.349.58.853.29 1.328-.297.49-.943.809-1.635.816h-1.07c-.05.343-.547 3.494-.985 6.27v.002c-.329 2.085-.624 3.958-.672 4.27h5.804l.103-.664c.12-.77.327-2.103.58-3.706zM.89 18.988h2.37c1.011 0 1.256.511 1.182.979-.06.378-.32.66-.765.846.564.215.787.548.706 1.075-.104.66-.677 1.15-1.427 1.15H.257zm1.568 1.676c.46 0 .676-.245.72-.534.045-.312-.096-.527-.557-.527h-.408l-.164 1.061zm-.253 1.75c.476 0 .75-.192.818-.585.052-.341-.141-.542-.602-.542h-.468l-.179 1.135h.431zm4.437.364c.148.267.446.334 1.062.29l.357-.831c-.35-.008-.364-.104-.312-.416l.141-.89c.12-.786-.52-1.083-1.24-1.083-.566 0-1.056.17-1.561.534l-.142.92c.588-.4.93-.534 1.338-.534.35 0 .46.104.431.386-.167.113-.452.185-.75.26-.364.09-.747.187-.96.37a.9.9 0 0 0-.319.534c-.067.4.179.764.877.764.387 0 .75-.104 1.078-.304m-.411-.949c.145-.042.291-.085.403-.156l-.067.445c-.022.141-.03.215-.014.29a1.17 1.17 0 0 1-.625.214c-.2 0-.327-.148-.297-.348.044-.283.322-.364.6-.445M8.855 19.9h1.234l-.067.408c.394-.334.69-.46 1.077-.46.691 0 1.011.423.9 1.113l-.32 2.07h-1.234l.268-1.714c.052-.312-.045-.46-.282-.46-.194 0-.372.104-.543.334l-.282 1.832H8.372zm5.336-.912h-1.234l-.631 4.043h1.233l.223-1.447h.015l.936 1.447h1.553l-1.218-1.796 1.516-1.335H15.06l-1.181 1.076zm3.135 0h1.42l-.624 4.043h-1.42zm4.14 0h-2.029l-.631 4.043h2.288c1.375 0 2.104-1.046 2.245-1.966.148-.942-.305-2.078-1.873-2.078m.468 2.017c-.111.72-.49 1.061-1.181 1.061h-.372l.327-2.121h.379c.765 0 .929.526.847 1.06\" clip-rule=\"evenodd\"/></svg>',\n secondaryButtonText: 'Not now',\n secondaryButtonUrl: '#',\n imageUrl: 'https://picsum.photos/id/101/200/200',\n imageAltText: 'Alt Text',\n },\n};\n"]}