@postnord/pn-marketweb-components 4.0.0 → 4.0.2

package/collection/components/widgets/pn-usp-simple/pn-usp-simple.css

@@ -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/collection/components/widgets/pn-usp-simple/pn-usp-simple.js

@@ -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/collection/components/widgets/pn-usp-simple/pn-usp-simple.js.map

@@ -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/collection/components/widgets/pn-usp-simple/pn-usp-simple.stories.js

@@ -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/collection/components/widgets/pn-usp-simple/pn-usp-simple.stories.js.map

@@ -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"]}

package/collection/globals/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/globals/types.ts"],"names":[],"mappings":"","sourcesContent":["export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\nexport interface PnButton {\n  content: string;\n  class?: string;\n  appearance?: string;\n  variant?: string;\n  small?: boolean;\n  loading?: boolean;\n  icon?: string;\n  leftIcon?: boolean;\n  tooltip?: string;\n  href?: string;\n  rel?: string;\n  download?: string;\n  form?: string;\n  buttonId?: string;\n  customAttribute?: string;\n}\n"]}