@warp-ds/elements 2.6.0-next.4 → 2.6.0

package/dist/packages/icon/icon.js

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var r=(i,o,e,s)=>{for(var t=s>1?void 0:s?w(o,e):o,c=i.length-1,a;c>=0;c--)(a=i[c])&&(t=(s?a(o,e,t):a(t))||t);return s&&t&&h(o,e,t),t};import{css as d}from"lit";var p=d`
+var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var r=(i,o,e,s)=>{for(var t=s>1?void 0:s?w(o,e):o,c=i.length-1,a;c>=0;c--)(a=i[c])&&(t=(s?a(o,e,t):a(t))||t);return s&&t&&h(o,e,t),t};import{html as g,LitElement as v}from"lit";import{property as l,state as f}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{css as d}from"lit";var p=d`
 :host {
   display: inline-block;
 }
@@ -23,5 +23,5 @@ var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var r=(i,o,e,s
   --w-icon-size: 32px;
 }
 
-`;import{html as g,LitElement as v}from"lit";import{property as l,state as f}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";var m=new Map,y='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function z(i,o={}){var s;let e=(s=o.responseParser)!=null?s:(t=>t.text());return m.has(i)||m.set(i,fetch(i).then(e)),m.get(i)}var n=class extends v{constructor(){super(...arguments);this.name="";this.size="medium";this.locale="en";this.svg=null}async fetchIcon(e){let s=`https://assets.finn.no/pkg/eikons/v1/${this.locale}/${e}.svg`;try{let t=await z(s);return new DOMParser().parseFromString(t,"text/html").body.querySelector("svg")}catch(t){return null}}firstUpdated(){this.loadIcon()}updated(e){(e.has("name")||e.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let e=await this.fetchIcon(this.name);e||(e=new DOMParser().parseFromString(y,"text/html").body.firstElementChild),this.svg=e}render(){let e={"w-icon":!0,"w-icon--s":this.size==="small","w-icon--m":this.size==="medium","w-icon--l":this.size==="large"},s=typeof this.size=="string"&&this.size.endsWith("px")?`--w-icon-size: ${this.size};`:"";return g`<div class="${u(e)}" style="${s}" part="w-${this.name.toLowerCase()}">${this.svg}</div>`}};n.styles=[p],r([l({type:String,reflect:!0})],n.prototype,"name",2),r([l({type:String,reflect:!0})],n.prototype,"size",2),r([l({type:String,reflect:!0})],n.prototype,"locale",2),r([f()],n.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",n);export{n as WIcon};
+`;var m=new Map,y='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function z(i,o={}){var s;let e=(s=o.responseParser)!=null?s:(t=>t.text());return m.has(i)||m.set(i,fetch(i).then(e)),m.get(i)}var n=class extends v{constructor(){super(...arguments);this.name="";this.size="medium";this.locale="en";this.svg=null}async fetchIcon(e){let s=`https://assets.finn.no/pkg/eikons/v1/${this.locale}/${e}.svg`;try{let t=await z(s);return new DOMParser().parseFromString(t,"text/html").body.querySelector("svg")}catch(t){return null}}firstUpdated(){this.loadIcon()}updated(e){(e.has("name")||e.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let e=await this.fetchIcon(this.name);e||(e=new DOMParser().parseFromString(y,"text/html").body.firstElementChild),this.svg=e}render(){let e={"w-icon":!0,"w-icon--s":this.size==="small","w-icon--m":this.size==="medium","w-icon--l":this.size==="large"},s=typeof this.size=="string"&&this.size.endsWith("px")?`--w-icon-size: ${this.size};`:"";return g`<div class="${u(e)}" style="${s}" part="w-${this.name.toLowerCase()}">${this.svg}</div>`}};n.styles=[p],r([l({type:String,reflect:!0})],n.prototype,"name",2),r([l({type:String,reflect:!0})],n.prototype,"size",2),r([l({type:String,reflect:!0})],n.prototype,"locale",2),r([f()],n.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",n);export{n as WIcon};
 //# sourceMappingURL=icon.js.map

package/dist/packages/icon/icon.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/icon/style.ts", "../../../packages/icon/icon.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport const styles = css`\n:host {\n  display: inline-block;\n}\n.w-icon {\n  --_w-icon-size: var(--w-icon-size, 24px);\n  height: var(--_w-icon-size);\n  width: var(--_w-icon-size);\n  display: flex;\n}\n.w-icon svg {\n  pointer-events: none;\n  height: var(--_w-icon-size);\n  width: var(--_w-icon-size);\n}\n.w-icon--s {\n  --w-icon-size: 16px;\n}\n.w-icon--m {\n  --w-icon-size: 24px;\n}\n.w-icon--l {\n  --w-icon-size: 32px;\n}\n\n`;", "import { styles } from './style.js';\nimport { html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n// Generic parser for fetch responses\ntype ResponseParser<T> = (response: Response) => Promise<T>;\n\ninterface CacheFetchOptions<T> {\n  responseParser?: ResponseParser<T>;\n}\n\nconst _fetchMap = new Map<string, Promise<any>>();\nconst ERROR_SVG = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>';\n\n/**\n * A minimal in-memory map to de-duplicate Fetch API media requests.\n *\n * @param uri - Resource URL\n * @param options - Optional parser for the response\n * @returns Promise of parsed response\n */\nfunction cacheFetch<T = string>(uri: string, options: CacheFetchOptions<T> = {}): Promise<T> {\n  const parser = options.responseParser ?? ((res: Response) => res.text() as Promise<any>);\n  if (!_fetchMap.has(uri)) {\n    _fetchMap.set(uri, fetch(uri).then(parser));\n  }\n  return _fetchMap.get(uri) as Promise<T>;\n}\n\nexport class WIcon extends LitElement {\n  static styles = [styles];\n\n  /** Icon filename (without .svg) */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /** Size: small, medium, large or pixel value (e.g. \"32px\") */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' | 'large' | string = 'medium';\n\n  /** Locale used in CDN URL */\n  @property({ type: String, reflect: true })\n  locale = 'en';\n\n  /** Parsed SVG element (not reflected as attribute) */\n  @state()\n  private svg: SVGElement | null = null;\n\n  /**\n   * Fetch an icon SVG from the CDN, with caching\n   * @param iconName - Name of the icon file\n   * @returns SVGElement or null on failure\n   */\n  private async fetchIcon(iconName: string): Promise<SVGElement | null> {\n    const uri = `https://assets.finn.no/pkg/eikons/v1/${this.locale}/${iconName}.svg`;\n    try {\n      const svgText = await cacheFetch<string>(uri);\n      const doc = new DOMParser().parseFromString(svgText, 'text/html');\n      return doc.body.querySelector('svg');\n    } catch {\n      return null;\n    }\n  }\n\n  protected firstUpdated(): void {\n    this.loadIcon();\n  }\n\n  protected updated(changedProps: Map<string, unknown>): void {\n    if (changedProps.has('name') || changedProps.has('locale')) {\n      this.loadIcon();\n    }\n  }\n\n  private async loadIcon(): Promise<void> {\n    if (!this.name) {\n      this.svg = null;\n      return;\n    }\n\n    let iconEl = await this.fetchIcon(this.name);\n    if (!iconEl) {\n      const doc = new DOMParser().parseFromString(ERROR_SVG, 'text/html');\n      iconEl = doc.body.firstElementChild as SVGElement;\n    }\n    this.svg = iconEl;\n  }\n\n  render(): TemplateResult {\n    const classes = {\n      'w-icon': true,\n      'w-icon--s': this.size === 'small',\n      'w-icon--m': this.size === 'medium',\n      'w-icon--l': this.size === 'large',\n    };\n    const customStyle = typeof this.size === 'string' && this.size.endsWith('px') ? `--w-icon-size: ${this.size};` : '';\n    return html`<div class=\"${classMap(classes)}\" style=\"${customStyle}\" part=\"w-${this.name.toLowerCase()}\">${this.svg}</div>`;\n  }\n}\n\nif (!customElements.get('w-icon')) {\n  customElements.define('w-icon', WIcon);\n}\n"],
-  "mappings": "wMAAA,OAAS,OAAAA,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECDtB,OAAS,QAAAE,EAAM,cAAAC,MAAkC,MACjD,OAAS,YAAAC,EAAU,SAAAC,MAAa,oBAChC,OAAS,YAAAC,MAAgB,8BASzB,IAAMC,EAAY,IAAI,IAChBC,EAAY,qEASlB,SAASC,EAAuBC,EAAaC,EAAgC,CAAC,EAAe,CAtB7F,IAAAC,EAuBE,IAAMC,GAASD,EAAAD,EAAQ,iBAAR,KAAAC,GAA4BE,GAAkBA,EAAI,KAAK,GACtE,OAAKP,EAAU,IAAIG,CAAG,GACpBH,EAAU,IAAIG,EAAK,MAAMA,CAAG,EAAE,KAAKG,CAAM,CAAC,EAErCN,EAAU,IAAIG,CAAG,CAC1B,CAEO,IAAMK,EAAN,cAAoBC,CAAW,CAA/B,kCAKL,UAAO,GAIP,UAA8C,SAI9C,YAAS,KAIT,KAAQ,IAAyB,KAOjC,MAAc,UAAUC,EAA8C,CACpE,IAAMP,EAAM,wCAAwC,KAAK,MAAM,IAAIO,CAAQ,OAC3E,GAAI,CACF,IAAMC,EAAU,MAAMT,EAAmBC,CAAG,EAE5C,OADY,IAAI,UAAU,EAAE,gBAAgBQ,EAAS,WAAW,EACrD,KAAK,cAAc,KAAK,CACrC,OAAQC,EAAA,CACN,OAAO,IACT,CACF,CAEU,cAAqB,CAC7B,KAAK,SAAS,CAChB,CAEU,QAAQC,EAA0C,EACtDA,EAAa,IAAI,MAAM,GAAKA,EAAa,IAAI,QAAQ,IACvD,KAAK,SAAS,CAElB,CAEA,MAAc,UAA0B,CACtC,GAAI,CAAC,KAAK,KAAM,CACd,KAAK,IAAM,KACX,MACF,CAEA,IAAIC,EAAS,MAAM,KAAK,UAAU,KAAK,IAAI,EACtCA,IAEHA,EADY,IAAI,UAAU,EAAE,gBAAgBb,EAAW,WAAW,EACrD,KAAK,mBAEpB,KAAK,IAAMa,CACb,CAEA,QAAyB,CACvB,IAAMC,EAAU,CACd,SAAU,GACV,YAAa,KAAK,OAAS,QAC3B,YAAa,KAAK,OAAS,SAC3B,YAAa,KAAK,OAAS,OAC7B,EACMC,EAAc,OAAO,KAAK,MAAS,UAAY,KAAK,KAAK,SAAS,IAAI,EAAI,kBAAkB,KAAK,IAAI,IAAM,GACjH,OAAOC,gBAAmBC,EAASH,CAAO,CAAC,YAAYC,CAAW,aAAa,KAAK,KAAK,YAAY,CAAC,KAAK,KAAK,GAAG,QACrH,CACF,EArEaR,EACJ,OAAS,CAACW,CAAM,EAIvBC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAJ9Bb,EAKX,oBAIAY,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAR9Bb,EASX,oBAIAY,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAZ9Bb,EAaX,sBAIQY,EAAA,CADPE,EAAM,GAhBId,EAiBH,mBAsDL,eAAe,IAAI,QAAQ,GAC9B,eAAe,OAAO,SAAUA,CAAK",
-  "names": ["css", "styles", "html", "LitElement", "property", "state", "classMap", "_fetchMap", "ERROR_SVG", "cacheFetch", "uri", "options", "_a", "parser", "res", "WIcon", "LitElement", "iconName", "svgText", "e", "changedProps", "iconEl", "classes", "customStyle", "html", "classMap", "styles", "__decorateClass", "property", "state"]
+  "sources": ["../../../packages/icon/icon.ts", "../../../packages/icon/style.ts"],
+  "sourcesContent": ["import { html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './style.js';\n\n// Generic parser for fetch responses\ntype ResponseParser<T> = (response: Response) => Promise<T>;\n\ninterface CacheFetchOptions<T> {\n  responseParser?: ResponseParser<T>;\n}\n\nconst _fetchMap = new Map<string, Promise<any>>();\nconst ERROR_SVG = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>';\n\n/**\n * A minimal in-memory map to de-duplicate Fetch API media requests.\n *\n * @param uri - Resource URL\n * @param options - Optional parser for the response\n * @returns Promise of parsed response\n */\nfunction cacheFetch<T = string>(uri: string, options: CacheFetchOptions<T> = {}): Promise<T> {\n  const parser = options.responseParser ?? ((res: Response) => res.text() as Promise<any>);\n  if (!_fetchMap.has(uri)) {\n    _fetchMap.set(uri, fetch(uri).then(parser));\n  }\n  return _fetchMap.get(uri) as Promise<T>;\n}\n\nexport class WIcon extends LitElement {\n  static styles = [styles];\n\n  /** Icon filename (without .svg) */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /** Size: small, medium, large or pixel value (e.g. \"32px\") */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' | 'large' | string = 'medium';\n\n  /** Locale used in CDN URL */\n  @property({ type: String, reflect: true })\n  locale = 'en';\n\n  /** Parsed SVG element (not reflected as attribute) */\n  @state()\n  private svg: SVGElement | null = null;\n\n  /**\n   * Fetch an icon SVG from the CDN, with caching\n   * @param iconName - Name of the icon file\n   * @returns SVGElement or null on failure\n   */\n  private async fetchIcon(iconName: string): Promise<SVGElement | null> {\n    const uri = `https://assets.finn.no/pkg/eikons/v1/${this.locale}/${iconName}.svg`;\n    try {\n      const svgText = await cacheFetch<string>(uri);\n      const doc = new DOMParser().parseFromString(svgText, 'text/html');\n      return doc.body.querySelector('svg');\n    } catch {\n      return null;\n    }\n  }\n\n  protected firstUpdated(): void {\n    this.loadIcon();\n  }\n\n  protected updated(changedProps: Map<string, unknown>): void {\n    if (changedProps.has('name') || changedProps.has('locale')) {\n      this.loadIcon();\n    }\n  }\n\n  private async loadIcon(): Promise<void> {\n    if (!this.name) {\n      this.svg = null;\n      return;\n    }\n\n    let iconEl = await this.fetchIcon(this.name);\n    if (!iconEl) {\n      const doc = new DOMParser().parseFromString(ERROR_SVG, 'text/html');\n      iconEl = doc.body.firstElementChild as SVGElement;\n    }\n    this.svg = iconEl;\n  }\n\n  render(): TemplateResult {\n    const classes = {\n      'w-icon': true,\n      'w-icon--s': this.size === 'small',\n      'w-icon--m': this.size === 'medium',\n      'w-icon--l': this.size === 'large',\n    };\n    const customStyle = typeof this.size === 'string' && this.size.endsWith('px') ? `--w-icon-size: ${this.size};` : '';\n    return html`<div class=\"${classMap(classes)}\" style=\"${customStyle}\" part=\"w-${this.name.toLowerCase()}\">${this.svg}</div>`;\n  }\n}\n\nif (!customElements.get('w-icon')) {\n  customElements.define('w-icon', WIcon);\n}\n", "import { css } from 'lit';\n\nexport const styles = css`\n:host {\n  display: inline-block;\n}\n.w-icon {\n  --_w-icon-size: var(--w-icon-size, 24px);\n  height: var(--_w-icon-size);\n  width: var(--_w-icon-size);\n  display: flex;\n}\n.w-icon svg {\n  pointer-events: none;\n  height: var(--_w-icon-size);\n  width: var(--_w-icon-size);\n}\n.w-icon--s {\n  --w-icon-size: 16px;\n}\n.w-icon--m {\n  --w-icon-size: 24px;\n}\n.w-icon--l {\n  --w-icon-size: 32px;\n}\n\n`;\n"],
+  "mappings": "wMAAA,OAAS,QAAAA,EAAM,cAAAC,MAAkC,MACjD,OAAS,YAAAC,EAAU,SAAAC,MAAa,oBAChC,OAAS,YAAAC,MAAgB,8BCFzB,OAAS,OAAAC,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EDUtB,IAAME,EAAY,IAAI,IAChBC,EAAY,qEASlB,SAASC,EAAuBC,EAAaC,EAAgC,CAAC,EAAe,CAtB7F,IAAAC,EAuBE,IAAMC,GAASD,EAAAD,EAAQ,iBAAR,KAAAC,GAA4BE,GAAkBA,EAAI,KAAK,GACtE,OAAKP,EAAU,IAAIG,CAAG,GACpBH,EAAU,IAAIG,EAAK,MAAMA,CAAG,EAAE,KAAKG,CAAM,CAAC,EAErCN,EAAU,IAAIG,CAAG,CAC1B,CAEO,IAAMK,EAAN,cAAoBC,CAAW,CAA/B,kCAKL,UAAO,GAIP,UAA8C,SAI9C,YAAS,KAIT,KAAQ,IAAyB,KAOjC,MAAc,UAAUC,EAA8C,CACpE,IAAMP,EAAM,wCAAwC,KAAK,MAAM,IAAIO,CAAQ,OAC3E,GAAI,CACF,IAAMC,EAAU,MAAMT,EAAmBC,CAAG,EAE5C,OADY,IAAI,UAAU,EAAE,gBAAgBQ,EAAS,WAAW,EACrD,KAAK,cAAc,KAAK,CACrC,OAAQC,EAAA,CACN,OAAO,IACT,CACF,CAEU,cAAqB,CAC7B,KAAK,SAAS,CAChB,CAEU,QAAQC,EAA0C,EACtDA,EAAa,IAAI,MAAM,GAAKA,EAAa,IAAI,QAAQ,IACvD,KAAK,SAAS,CAElB,CAEA,MAAc,UAA0B,CACtC,GAAI,CAAC,KAAK,KAAM,CACd,KAAK,IAAM,KACX,MACF,CAEA,IAAIC,EAAS,MAAM,KAAK,UAAU,KAAK,IAAI,EACtCA,IAEHA,EADY,IAAI,UAAU,EAAE,gBAAgBb,EAAW,WAAW,EACrD,KAAK,mBAEpB,KAAK,IAAMa,CACb,CAEA,QAAyB,CACvB,IAAMC,EAAU,CACd,SAAU,GACV,YAAa,KAAK,OAAS,QAC3B,YAAa,KAAK,OAAS,SAC3B,YAAa,KAAK,OAAS,OAC7B,EACMC,EAAc,OAAO,KAAK,MAAS,UAAY,KAAK,KAAK,SAAS,IAAI,EAAI,kBAAkB,KAAK,IAAI,IAAM,GACjH,OAAOC,gBAAmBC,EAASH,CAAO,CAAC,YAAYC,CAAW,aAAa,KAAK,KAAK,YAAY,CAAC,KAAK,KAAK,GAAG,QACrH,CACF,EArEaR,EACJ,OAAS,CAACW,CAAM,EAIvBC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAJ9Bb,EAKX,oBAIAY,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAR9Bb,EASX,oBAIAY,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAZ9Bb,EAaX,sBAIQY,EAAA,CADPE,EAAM,GAhBId,EAiBH,mBAsDL,eAAe,IAAI,QAAQ,GAC9B,eAAe,OAAO,SAAUA,CAAK",
+  "names": ["html", "LitElement", "property", "state", "classMap", "css", "styles", "_fetchMap", "ERROR_SVG", "cacheFetch", "uri", "options", "_a", "parser", "res", "WIcon", "LitElement", "iconName", "svgText", "e", "changedProps", "iconEl", "classes", "customStyle", "html", "classMap", "styles", "__decorateClass", "property", "state"]
 }

package/dist/packages/icon/icon.react.stories.js

@@ -1,12 +1,284 @@
-import { Icon } from './react.js';
 import React from 'react';
+import { Icon } from './react.js';
 export default {
     component: Icon,
     title: 'Icons',
     argTypes: {
         name: {
             control: { type: 'select' },
-            options: ["ActiveAds", "Ads", "AirCon", "AirplaneBed", "AllWheelDrive", "AnimalPaw", "ArchiveBox", "Archway", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", "AwardMedal", "BackWheelDrive", "Bag", "Bank", "BankIdNo", "BatteryEmpty", "BatteryFull", "BatteryHalfFull", "Beach", "Bell", "BellFilled", "Bin", "Block", "Boat", "Bolt", "Bookmark", "Briefcase", "BriefcaseUser", "Browser", "BrowserVerified", "Building", "BuildingPlot", "Bulb", "Burger", "Bus", "CabinHut", "Calculator", "Calendar", "CalendarBlank", "CalendarPlus", "Camera", "Cancel", "Car", "CarLeft", "CarPart", "CarRent", "CarRight", "Chair", "Charger", "Charter", "ChatSupport", "Check", "CheckShield", "Checklist", "ChevronDoubleLeft", "ChevronDoubleRight", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "CirclePlus", "CirclePlusFilled", "CircleUser", "CircleUserFilled", "Clock", "ClockCountdown", "Close", "Code", "Cog", "ColorPalette", "Confetti", "Cookie", "Copy", "CreditCard", "Cursor", "Delivery", "DeliveryKey", "Diner", "Discount", "Dislike", "Door", "Dots", "DotsVertical", "DoubleBed", "Download", "DragDots", "Draw", "Drawer", "Drill", "Drink", "Dumbbell", "Edit", "Energy", "Engine", "EngineBelt", "Error", "Exchange", "Expand", "EyeOff", "EyeOn", "Facebook", "Farm", "FileAdd", "FileArrowDown", "Filter", "Fireplace", "Fishing", "FrontWheelDrive", "GasDiesel", "GasFuel", "GasHybrid", "GearAutomatic", "GearManual", "GeometricShapes", "Globe", "GraphLine", "GraphPie", "Grid", "Grill", "Guitar", "Headset", "Heart", "HeartRate", "Hiking", "History", "Hotel", "House", "HouseBed", "HouseFilled", "HouseModern", "HousePerson", "IceSkater", "Image", "Info", "Instagram", "JetSki", "Key", "Lamp", "Layers", "Leaf", "Lift", "Like", "Link", "LinkExternal", "ListSort", "LockShield", "Logout", "LotusFlower", "Luggage", "Mail", "Mailbox", "Map", "Megaphone", "Messages", "MessagesFilled", "Minus", "Mixer", "Money", "Moon", "Motorcycle", "Mountain", "NoSmoking", "OfficeDesk", "Organize", "Paperclip", "Parking", "Phone", "PhoneCheck", "PhoneScratched", "PhoneUsed", "PictureStack", "PinMarker", "PinRound", "PlaneLand", "PlaneTakeOff", "Play", "Playhouse", "Plus", "ProductBump", "ProductCarousel", "ProductHighlightListing", "ProductNabolagsprofil", "ProductStarred", "ProductTop", "Propeller", "Question", "Refresh", "Road", "Rocket", "RoomService", "RotateLeft", "RotateRight", "RowingBoat", "Ruler", "Sauna", "ScrollUp", "Search", "Seat", "Send", "Share", "Shipping", "Shirt", "Shoes", "ShoppingCart", "Shower", "Shrink", "SidebarChevronLeft", "SidebarChevronRight", "SingleCylinder", "Skyscraper", "SmileyGood", "SmileyHappy", "SmileyNeutral", "SmileySad", "Sofa", "Sorting", "Sparkles", "Speedometer", "Stairs", "StarCheck", "StarEmpty", "StarFull", "StarHalf", "Store", "StoreFront", "Stove", "Stroller", "Success", "Suitcase", "SuitcaseTrolley", "Sun", "Support", "Swimming", "TV", "Tag", "TaskList", "TextBold", "TextItalic", "TextStrikethrough", "TextUnderline", "Theater", "ThreeSixty", "Ticket", "TownHouse", "Tractor", "Tree", "TrendDown", "TrendFlat", "TrendUp", "Tshirt", "Up", "Upload", "User", "UserGroup", "Users", "Vacuum", "Vase", "Verification", "Wallet", "Warning", "Warranty", "WashingMachine", "WaterPitcher", "Weight", "Wheelchair", "Wifi", "Wrench", "X", "YouTube"],
+            options: [
+                'ActiveAds',
+                'Ads',
+                'AirCon',
+                'AirplaneBed',
+                'AllWheelDrive',
+                'AnimalPaw',
+                'ArchiveBox',
+                'Archway',
+                'ArrowDown',
+                'ArrowLeft',
+                'ArrowRight',
+                'ArrowUp',
+                'AwardMedal',
+                'BackWheelDrive',
+                'Bag',
+                'Bank',
+                'BankIdNo',
+                'BatteryEmpty',
+                'BatteryFull',
+                'BatteryHalfFull',
+                'Beach',
+                'Bell',
+                'BellFilled',
+                'Bin',
+                'Block',
+                'Boat',
+                'Bolt',
+                'Bookmark',
+                'Briefcase',
+                'BriefcaseUser',
+                'Browser',
+                'BrowserVerified',
+                'Building',
+                'BuildingPlot',
+                'Bulb',
+                'Burger',
+                'Bus',
+                'CabinHut',
+                'Calculator',
+                'Calendar',
+                'CalendarBlank',
+                'CalendarPlus',
+                'Camera',
+                'Cancel',
+                'Car',
+                'CarLeft',
+                'CarPart',
+                'CarRent',
+                'CarRight',
+                'Chair',
+                'Charger',
+                'Charter',
+                'ChatSupport',
+                'Check',
+                'CheckShield',
+                'Checklist',
+                'ChevronDoubleLeft',
+                'ChevronDoubleRight',
+                'ChevronDown',
+                'ChevronLeft',
+                'ChevronRight',
+                'ChevronUp',
+                'CirclePlus',
+                'CirclePlusFilled',
+                'CircleUser',
+                'CircleUserFilled',
+                'Clock',
+                'ClockCountdown',
+                'Close',
+                'Code',
+                'Cog',
+                'ColorPalette',
+                'Confetti',
+                'Cookie',
+                'Copy',
+                'CreditCard',
+                'Cursor',
+                'Delivery',
+                'DeliveryKey',
+                'Diner',
+                'Discount',
+                'Dislike',
+                'Door',
+                'Dots',
+                'DotsVertical',
+                'DoubleBed',
+                'Download',
+                'DragDots',
+                'Draw',
+                'Drawer',
+                'Drill',
+                'Drink',
+                'Dumbbell',
+                'Edit',
+                'Energy',
+                'Engine',
+                'EngineBelt',
+                'Error',
+                'Exchange',
+                'Expand',
+                'EyeOff',
+                'EyeOn',
+                'Facebook',
+                'Farm',
+                'FileAdd',
+                'FileArrowDown',
+                'Filter',
+                'Fireplace',
+                'Fishing',
+                'FrontWheelDrive',
+                'GasDiesel',
+                'GasFuel',
+                'GasHybrid',
+                'GearAutomatic',
+                'GearManual',
+                'GeometricShapes',
+                'Globe',
+                'GraphLine',
+                'GraphPie',
+                'Grid',
+                'Grill',
+                'Guitar',
+                'Headset',
+                'Heart',
+                'HeartRate',
+                'Hiking',
+                'History',
+                'Hotel',
+                'House',
+                'HouseBed',
+                'HouseFilled',
+                'HouseModern',
+                'HousePerson',
+                'IceSkater',
+                'Image',
+                'Info',
+                'Instagram',
+                'JetSki',
+                'Key',
+                'Lamp',
+                'Layers',
+                'Leaf',
+                'Lift',
+                'Like',
+                'Link',
+                'LinkExternal',
+                'ListSort',
+                'LockShield',
+                'Logout',
+                'LotusFlower',
+                'Luggage',
+                'Mail',
+                'Mailbox',
+                'Map',
+                'Megaphone',
+                'Messages',
+                'MessagesFilled',
+                'Minus',
+                'Mixer',
+                'Money',
+                'Moon',
+                'Motorcycle',
+                'Mountain',
+                'NoSmoking',
+                'OfficeDesk',
+                'Organize',
+                'Paperclip',
+                'Parking',
+                'Phone',
+                'PhoneCheck',
+                'PhoneScratched',
+                'PhoneUsed',
+                'PictureStack',
+                'PinMarker',
+                'PinRound',
+                'PlaneLand',
+                'PlaneTakeOff',
+                'Play',
+                'Playhouse',
+                'Plus',
+                'ProductBump',
+                'ProductCarousel',
+                'ProductHighlightListing',
+                'ProductNabolagsprofil',
+                'ProductStarred',
+                'ProductTop',
+                'Propeller',
+                'Question',
+                'Refresh',
+                'Road',
+                'Rocket',
+                'RoomService',
+                'RotateLeft',
+                'RotateRight',
+                'RowingBoat',
+                'Ruler',
+                'Sauna',
+                'ScrollUp',
+                'Search',
+                'Seat',
+                'Send',
+                'Share',
+                'Shipping',
+                'Shirt',
+                'Shoes',
+                'ShoppingCart',
+                'Shower',
+                'Shrink',
+                'SidebarChevronLeft',
+                'SidebarChevronRight',
+                'SingleCylinder',
+                'Skyscraper',
+                'SmileyGood',
+                'SmileyHappy',
+                'SmileyNeutral',
+                'SmileySad',
+                'Sofa',
+                'Sorting',
+                'Sparkles',
+                'Speedometer',
+                'Stairs',
+                'StarCheck',
+                'StarEmpty',
+                'StarFull',
+                'StarHalf',
+                'Store',
+                'StoreFront',
+                'Stove',
+                'Stroller',
+                'Success',
+                'Suitcase',
+                'SuitcaseTrolley',
+                'Sun',
+                'Support',
+                'Swimming',
+                'TV',
+                'Tag',
+                'TaskList',
+                'TextBold',
+                'TextItalic',
+                'TextStrikethrough',
+                'TextUnderline',
+                'Theater',
+                'ThreeSixty',
+                'Ticket',
+                'TownHouse',
+                'Tractor',
+                'Tree',
+                'TrendDown',
+                'TrendFlat',
+                'TrendUp',
+                'Tshirt',
+                'Up',
+                'Upload',
+                'User',
+                'UserGroup',
+                'Users',
+                'Vacuum',
+                'Vase',
+                'Verification',
+                'Wallet',
+                'Warning',
+                'Warranty',
+                'WashingMachine',
+                'WaterPitcher',
+                'Weight',
+                'Wheelchair',
+                'Wifi',
+                'Wrench',
+                'X',
+                'YouTube',
+            ],
         },
         size: {
             control: { type: 'select' },

package/dist/packages/icon/icon.stories.js

@@ -9,7 +9,279 @@ export default {
     argTypes: {
         name: {
             control: { type: 'select' },
-            options: ["ActiveAds", "Ads", "AirCon", "AirplaneBed", "AllWheelDrive", "AnimalPaw", "ArchiveBox", "Archway", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", "AwardMedal", "BackWheelDrive", "Bag", "Bank", "BankIdNo", "BatteryEmpty", "BatteryFull", "BatteryHalfFull", "Beach", "Bell", "BellFilled", "Bin", "Block", "Boat", "Bolt", "Bookmark", "Briefcase", "BriefcaseUser", "Browser", "BrowserVerified", "Building", "BuildingPlot", "Bulb", "Burger", "Bus", "CabinHut", "Calculator", "Calendar", "CalendarBlank", "CalendarPlus", "Camera", "Cancel", "Car", "CarLeft", "CarPart", "CarRent", "CarRight", "Chair", "Charger", "Charter", "ChatSupport", "Check", "CheckShield", "Checklist", "ChevronDoubleLeft", "ChevronDoubleRight", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "CirclePlus", "CirclePlusFilled", "CircleUser", "CircleUserFilled", "Clock", "ClockCountdown", "Close", "Code", "Cog", "ColorPalette", "Confetti", "Cookie", "Copy", "CreditCard", "Cursor", "Delivery", "DeliveryKey", "Diner", "Discount", "Dislike", "Door", "Dots", "DotsVertical", "DoubleBed", "Download", "DragDots", "Draw", "Drawer", "Drill", "Drink", "Dumbbell", "Edit", "Energy", "Engine", "EngineBelt", "Error", "Exchange", "Expand", "EyeOff", "EyeOn", "Facebook", "Farm", "FileAdd", "FileArrowDown", "Filter", "Fireplace", "Fishing", "FrontWheelDrive", "GasDiesel", "GasFuel", "GasHybrid", "GearAutomatic", "GearManual", "GeometricShapes", "Globe", "GraphLine", "GraphPie", "Grid", "Grill", "Guitar", "Headset", "Heart", "HeartRate", "Hiking", "History", "Hotel", "House", "HouseBed", "HouseFilled", "HouseModern", "HousePerson", "IceSkater", "Image", "Info", "Instagram", "JetSki", "Key", "Lamp", "Layers", "Leaf", "Lift", "Like", "Link", "LinkExternal", "ListSort", "LockShield", "Logout", "LotusFlower", "Luggage", "Mail", "Mailbox", "Map", "Megaphone", "Messages", "MessagesFilled", "Minus", "Mixer", "Money", "Moon", "Motorcycle", "Mountain", "NoSmoking", "OfficeDesk", "Organize", "Paperclip", "Parking", "Phone", "PhoneCheck", "PhoneScratched", "PhoneUsed", "PictureStack", "PinMarker", "PinRound", "PlaneLand", "PlaneTakeOff", "Play", "Playhouse", "Plus", "ProductBump", "ProductCarousel", "ProductHighlightListing", "ProductNabolagsprofil", "ProductStarred", "ProductTop", "Propeller", "Question", "Refresh", "Road", "Rocket", "RoomService", "RotateLeft", "RotateRight", "RowingBoat", "Ruler", "Sauna", "ScrollUp", "Search", "Seat", "Send", "Share", "Shipping", "Shirt", "Shoes", "ShoppingCart", "Shower", "Shrink", "SidebarChevronLeft", "SidebarChevronRight", "SingleCylinder", "Skyscraper", "SmileyGood", "SmileyHappy", "SmileyNeutral", "SmileySad", "Sofa", "Sorting", "Sparkles", "Speedometer", "Stairs", "StarCheck", "StarEmpty", "StarFull", "StarHalf", "Store", "StoreFront", "Stove", "Stroller", "Success", "Suitcase", "SuitcaseTrolley", "Sun", "Support", "Swimming", "TV", "Tag", "TaskList", "TextBold", "TextItalic", "TextStrikethrough", "TextUnderline", "Theater", "ThreeSixty", "Ticket", "TownHouse", "Tractor", "Tree", "TrendDown", "TrendFlat", "TrendUp", "Tshirt", "Up", "Upload", "User", "UserGroup", "Users", "Vacuum", "Vase", "Verification", "Wallet", "Warning", "Warranty", "WashingMachine", "WaterPitcher", "Weight", "Wheelchair", "Wifi", "Wrench", "X", "YouTube"],
+            options: [
+                'ActiveAds',
+                'Ads',
+                'AirCon',
+                'AirplaneBed',
+                'AllWheelDrive',
+                'AnimalPaw',
+                'ArchiveBox',
+                'Archway',
+                'ArrowDown',
+                'ArrowLeft',
+                'ArrowRight',
+                'ArrowUp',
+                'AwardMedal',
+                'BackWheelDrive',
+                'Bag',
+                'Bank',
+                'BankIdNo',
+                'BatteryEmpty',
+                'BatteryFull',
+                'BatteryHalfFull',
+                'Beach',
+                'Bell',
+                'BellFilled',
+                'Bin',
+                'Block',
+                'Boat',
+                'Bolt',
+                'Bookmark',
+                'Briefcase',
+                'BriefcaseUser',
+                'Browser',
+                'BrowserVerified',
+                'Building',
+                'BuildingPlot',
+                'Bulb',
+                'Burger',
+                'Bus',
+                'CabinHut',
+                'Calculator',
+                'Calendar',
+                'CalendarBlank',
+                'CalendarPlus',
+                'Camera',
+                'Cancel',
+                'Car',
+                'CarLeft',
+                'CarPart',
+                'CarRent',
+                'CarRight',
+                'Chair',
+                'Charger',
+                'Charter',
+                'ChatSupport',
+                'Check',
+                'CheckShield',
+                'Checklist',
+                'ChevronDoubleLeft',
+                'ChevronDoubleRight',
+                'ChevronDown',
+                'ChevronLeft',
+                'ChevronRight',
+                'ChevronUp',
+                'CirclePlus',
+                'CirclePlusFilled',
+                'CircleUser',
+                'CircleUserFilled',
+                'Clock',
+                'ClockCountdown',
+                'Close',
+                'Code',
+                'Cog',
+                'ColorPalette',
+                'Confetti',
+                'Cookie',
+                'Copy',
+                'CreditCard',
+                'Cursor',
+                'Delivery',
+                'DeliveryKey',
+                'Diner',
+                'Discount',
+                'Dislike',
+                'Door',
+                'Dots',
+                'DotsVertical',
+                'DoubleBed',
+                'Download',
+                'DragDots',
+                'Draw',
+                'Drawer',
+                'Drill',
+                'Drink',
+                'Dumbbell',
+                'Edit',
+                'Energy',
+                'Engine',
+                'EngineBelt',
+                'Error',
+                'Exchange',
+                'Expand',
+                'EyeOff',
+                'EyeOn',
+                'Facebook',
+                'Farm',
+                'FileAdd',
+                'FileArrowDown',
+                'Filter',
+                'Fireplace',
+                'Fishing',
+                'FrontWheelDrive',
+                'GasDiesel',
+                'GasFuel',
+                'GasHybrid',
+                'GearAutomatic',
+                'GearManual',
+                'GeometricShapes',
+                'Globe',
+                'GraphLine',
+                'GraphPie',
+                'Grid',
+                'Grill',
+                'Guitar',
+                'Headset',
+                'Heart',
+                'HeartRate',
+                'Hiking',
+                'History',
+                'Hotel',
+                'House',
+                'HouseBed',
+                'HouseFilled',
+                'HouseModern',
+                'HousePerson',
+                'IceSkater',
+                'Image',
+                'Info',
+                'Instagram',
+                'JetSki',
+                'Key',
+                'Lamp',
+                'Layers',
+                'Leaf',
+                'Lift',
+                'Like',
+                'Link',
+                'LinkExternal',
+                'ListSort',
+                'LockShield',
+                'Logout',
+                'LotusFlower',
+                'Luggage',
+                'Mail',
+                'Mailbox',
+                'Map',
+                'Megaphone',
+                'Messages',
+                'MessagesFilled',
+                'Minus',
+                'Mixer',
+                'Money',
+                'Moon',
+                'Motorcycle',
+                'Mountain',
+                'NoSmoking',
+                'OfficeDesk',
+                'Organize',
+                'Paperclip',
+                'Parking',
+                'Phone',
+                'PhoneCheck',
+                'PhoneScratched',
+                'PhoneUsed',
+                'PictureStack',
+                'PinMarker',
+                'PinRound',
+                'PlaneLand',
+                'PlaneTakeOff',
+                'Play',
+                'Playhouse',
+                'Plus',
+                'ProductBump',
+                'ProductCarousel',
+                'ProductHighlightListing',
+                'ProductNabolagsprofil',
+                'ProductStarred',
+                'ProductTop',
+                'Propeller',
+                'Question',
+                'Refresh',
+                'Road',
+                'Rocket',
+                'RoomService',
+                'RotateLeft',
+                'RotateRight',
+                'RowingBoat',
+                'Ruler',
+                'Sauna',
+                'ScrollUp',
+                'Search',
+                'Seat',
+                'Send',
+                'Share',
+                'Shipping',
+                'Shirt',
+                'Shoes',
+                'ShoppingCart',
+                'Shower',
+                'Shrink',
+                'SidebarChevronLeft',
+                'SidebarChevronRight',
+                'SingleCylinder',
+                'Skyscraper',
+                'SmileyGood',
+                'SmileyHappy',
+                'SmileyNeutral',
+                'SmileySad',
+                'Sofa',
+                'Sorting',
+                'Sparkles',
+                'Speedometer',
+                'Stairs',
+                'StarCheck',
+                'StarEmpty',
+                'StarFull',
+                'StarHalf',
+                'Store',
+                'StoreFront',
+                'Stove',
+                'Stroller',
+                'Success',
+                'Suitcase',
+                'SuitcaseTrolley',
+                'Sun',
+                'Support',
+                'Swimming',
+                'TV',
+                'Tag',
+                'TaskList',
+                'TextBold',
+                'TextItalic',
+                'TextStrikethrough',
+                'TextUnderline',
+                'Theater',
+                'ThreeSixty',
+                'Ticket',
+                'TownHouse',
+                'Tractor',
+                'Tree',
+                'TrendDown',
+                'TrendFlat',
+                'TrendUp',
+                'Tshirt',
+                'Up',
+                'Upload',
+                'User',
+                'UserGroup',
+                'Users',
+                'Vacuum',
+                'Vase',
+                'Verification',
+                'Wallet',
+                'Warning',
+                'Warranty',
+                'WashingMachine',
+                'WaterPitcher',
+                'Weight',
+                'Wheelchair',
+                'Wifi',
+                'Wrench',
+                'X',
+                'YouTube',
+            ],
         },
         size: {
             control: { type: 'select' },

package/dist/packages/link/link.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./link").WarpLink>, "rel" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "variant" | "small" | "href" | "disabled" | "target" | "fullWidth" | "firstUpdated"> & {} & Partial<Omit<import("./link").WarpLink, keyof HTMLElement>> & React.RefAttributes<import("./link").WarpLink>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./link").WarpLink>, "small" | "rel" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "variant" | "href" | "disabled" | "target" | "fullWidth" | "firstUpdated"> & {} & Partial<Omit<import("./link").WarpLink, keyof HTMLElement>> & React.RefAttributes<import("./link").WarpLink>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import("./link").WarpLink, {}>;
 };
 export default _default;

package/dist/packages/modal-header/modal-header.d.ts

@@ -1,6 +1,5 @@
 import { LitElement, nothing, PropertyValues } from 'lit';
-import '@warp-ds/icons/elements/arrow-left-16';
-import '@warp-ds/icons/elements/close-16';
+import '../icon/icon.js';
 declare const ModalHeader_base: import("../modal/util.js").Constructor<{
     close: () => void;
 }> & typeof LitElement;