@warp-ds/elements 2.4.0 → 2.5.0-next.2

package/dist/packages/icon/icon.js

@@ -0,0 +1,27 @@
+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`
+:host {
+  display: inline-block;
+}
+.w-icon {
+  --_w-icon-size: var(--w-icon-size, 24px);
+  height: var(--_w-icon-size);
+  width: var(--_w-icon-size);
+  display: flex;
+}
+.w-icon svg {
+  pointer-events: none;
+  height: var(--_w-icon-size);
+  width: var(--_w-icon-size);
+}
+.w-icon--s {
+  --w-icon-size: 16px;
+}
+.w-icon--m {
+  --w-icon-size: 24px;
+}
+.w-icon--l {
+  --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};
+//# sourceMappingURL=icon.js.map

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

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

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

@@ -0,0 +1,28 @@
+import React from 'react';
+declare const _default: {
+    component: import("@lit/react").ReactWebComponent<import("./icon.js").WIcon, {}>;
+    title: string;
+    argTypes: {
+        name: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        locale: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const Example: () => React.JSX.Element;

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

@@ -0,0 +1,37 @@
+import { Icon } from './react.js';
+import React from 'react';
+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"],
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['small', 'medium', 'large', '42px', '64px', '96px', '128px'],
+        },
+        locale: {
+            control: { type: 'select' },
+            options: ['nb', 'sv', 'da', 'fi', 'en'],
+        },
+    },
+};
+const Template = (args) => React.createElement(Icon, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    name: 'Ads',
+    size: 'medium',
+    locale: 'nb',
+};
+export const Example = () => (React.createElement("div", null,
+    React.createElement("div", null,
+        React.createElement(Icon, { name: "Speedometer", size: "small", locale: "nb" }),
+        React.createElement(Icon, { name: "Speedometer", size: "medium", locale: "nb" }),
+        React.createElement(Icon, { name: "Speedometer", size: "large", locale: "nb" }),
+        React.createElement(Icon, { name: "Speedometer", size: "42px", locale: "nb" }),
+        React.createElement(Icon, { name: "Speedometer", size: "64px", locale: "nb" }),
+        React.createElement(Icon, { name: "Speedometer", size: "96px", locale: "nb" }),
+        React.createElement(Icon, { name: "Speedometer", size: "128px", locale: "nb" })),
+    "some text below"));

package/dist/packages/icon/icon.stories.d.ts

@@ -0,0 +1,39 @@
+import './icon.ts';
+declare const _default: {
+    component: string;
+    title: string;
+    render: ({ name, size, locale }: {
+        name: any;
+        size: any;
+        locale: any;
+    }) => import("lit").TemplateResult<1>;
+    argTypes: {
+        name: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        locale: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        name: string;
+        size: string;
+        locale: string;
+    };
+};
+export declare const Example: () => import("lit").TemplateResult<1>;

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

@@ -0,0 +1,43 @@
+import { html } from 'lit';
+import './icon.ts';
+export default {
+    component: 'w-icon',
+    title: 'Icons',
+    render: ({ name, size, locale }) => html `
+      <w-icon name=${name} size=${size} locale=${locale} />
+  `,
+    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"],
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['small', 'medium', 'large', '42px', '64px', '96px', '128px'],
+        },
+        locale: {
+            control: { type: 'select' },
+            options: ['nb', 'sv', 'da', 'fi', 'en'],
+        },
+    },
+};
+export const Default = {
+    args: {
+        name: 'Ads',
+        size: 'medium',
+        locale: 'nb',
+    },
+};
+export const Example = () => html `
+    <div><div>
+      <w-icon name="Speedometer" size="small" locale="nb"></w-icon>
+      <w-icon name="Speedometer" size="medium" locale="nb"></w-icon>
+      <w-icon name="Speedometer" size="large" locale="nb"></w-icon>
+      <w-icon name="Speedometer" size="42px" locale="nb"></w-icon>
+      <w-icon name="Speedometer" size="64px" locale="nb"></w-icon>
+      <w-icon name="Speedometer" size="96px" locale="nb"></w-icon>
+      <w-icon name="Speedometer" size="128px" locale="nb"></w-icon>
+    </div>
+    some text below
+    </div>
+`;

package/dist/packages/icon/react.d.ts

@@ -0,0 +1,2 @@
+import { WIcon } from './icon.js';
+export declare const Icon: import("@lit/react").ReactWebComponent<WIcon, {}>;

package/dist/packages/{deadtoggle → icon}/react.js

@@ -1,11 +1,11 @@
-import { LitElement } from 'lit';
 import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
 import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const DeadToggle = createComponent({
-    tagName: 'w-dead-toggle',
+export const Icon = createComponent({
+    tagName: 'w-icon',
     elementClass: Component,
     react: React,
 });

package/dist/packages/icon/style.js

@@ -0,0 +1,27 @@
+import { css } from 'lit';
+export const styles = css `
+:host {
+  display: inline-block;
+}
+.w-icon {
+  --_w-icon-size: var(--w-icon-size, 24px);
+  height: var(--_w-icon-size);
+  width: var(--_w-icon-size);
+  display: flex;
+}
+.w-icon svg {
+  pointer-events: none;
+  height: var(--_w-icon-size);
+  width: var(--_w-icon-size);
+}
+.w-icon--s {
+  --w-icon-size: 16px;
+}
+.w-icon--m {
+  --w-icon-size: 24px;
+}
+.w-icon--l {
+  --w-icon-size: 32px;
+}
+
+`;

package/dist/packages/link/{index.js → link.js}

@@ -2448,7 +2448,7 @@ var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var e=(d,a,i,n
     --_border: var(--border, var(--w-s-color-border));
     --_border-hover: var(--border-hover, var(--w-s-color-border-hover));
     --_border-active: var(--border-active, var(--w-s-color-border-active));
-    --_border-radius: var(--border-radius, 8px);
+    --_border-radius: var(--w-button-radius-default, 8px);
     --_font-size: var(--font-size, var(--w-font-size-m));
     --_line-height: var(--line-height, var(--w-line-height-m));
     --_font-weight: var(--font-weight, bold);
@@ -2521,7 +2521,7 @@ var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var e=(d,a,i,n
         --background-hover: var(--w-s-color-background-hover);
         --background-active: var(--w-s-color-background-active);
         --color: var(--w-s-color-text);
-        --border-radius: 4px;
+        --border-radius: var(--w-button-radius-utility, 4px);
         --border-width: 1px;
     }
     .w-button--utility-quiet {
@@ -2679,4 +2679,4 @@ ${p.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)
       class=${f(i)}>
       <slot></slot>
     </a>`}};r.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0},r.styles=[b,v],e([o({type:Boolean,reflect:!0})],r.prototype,"autofocus",2),e([o({reflect:!0})],r.prototype,"variant",2),e([o({type:Boolean,reflect:!0})],r.prototype,"small",2),e([o({reflect:!0})],r.prototype,"href",2),e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([o({reflect:!0})],r.prototype,"target",2),e([o({reflect:!0})],r.prototype,"rel",2),e([o({attribute:"full-width",type:Boolean,reflect:!0})],r.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",r);export{r as WarpLink};
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=link.js.map

package/dist/packages/link/link.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/link/link.ts", "../../../packages/styles.ts", "../../../packages/link/styles.ts"],
+  "sourcesContent": ["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { reset } from '../styles.js';\n\nimport { styles } from './styles.js';\n\ntype ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'negative'\n  | 'negativeQuiet'\n  | 'utility'\n  | 'quiet'\n  | 'utilityQuiet'\n  | 'overlay'\n  | 'overlayInverted'\n  | 'overlayQuiet'\n  | 'overlayInvertedQuiet';\n\nconst variants = [\n  'primary',\n  'secondary',\n  'negative',\n  'negativeQuiet',\n  'utility',\n  'utilityQuiet',\n  'quiet',\n  'link',\n  'overlay',\n  'overlayInverted',\n  'overlayQuiet',\n  'overlayInvertedQuiet',\n];\n\n/**\n * Buttons are used to perform actions, with different visuals for different needs.\n *\n * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)\n */\nclass WarpLink extends LitElement {\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @property({ type: Boolean, reflect: true })\n  autofocus: boolean;\n\n  @property({ reflect: true })\n  variant: ButtonVariant = 'secondary';\n\n  @property({ type: Boolean, reflect: true })\n  small: boolean;\n\n  @property({ reflect: true })\n  href: string;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ reflect: true })\n  target: string;\n\n  @property({ reflect: true })\n  rel: string;\n\n  @property({ attribute: 'full-width', type: Boolean, reflect: true })\n  fullWidth: boolean;\n\n  static styles = [reset, styles];\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (!variants.includes(this.variant)) {\n      throw new Error(`Invalid \"variant\" attribute. Set its value to one of the following:\\n${variants.join(', ')}.`);\n    }\n  }\n\n  firstUpdated() {\n    if (this.autofocus) {\n      setTimeout(() => this.focus(), 0);\n    }\n  }\n\n  render() {\n    const classes = {\n      // @ts-expect-error link should be removed so we hide it from types until we can do so\n      'w-button': this.variant !== 'link',\n      'w-button--primary': this.variant === 'primary',\n      'w-button--secondary': this.variant === 'secondary',\n      'w-button--negative': this.variant === 'negative',\n      'w-button--utility': this.variant === 'utility',\n      'w-button--quiet': this.variant === 'quiet',\n      'w-button--negative-quiet': this.variant === 'negativeQuiet',\n      'w-button--utility-quiet': this.variant === 'utilityQuiet',\n      'w-button--overlay': this.variant === 'overlay',\n      'w-button--overlay-inverted': this.variant === 'overlayInverted',\n      'w-button--overlay-quiet': this.variant === 'overlayQuiet',\n      'w-button--overlay-inverted-quiet': this.variant === 'overlayInvertedQuiet',\n      'w-button--small': this.small,\n      'w-button--full-width': this.fullWidth,\n      'w-button--disabled': this.disabled,\n    };\n    return html`<a\n      href=${this.href}\n      target=${this.target}\n      rel=${this.target === '_blank' ? this.rel || 'noopener' : undefined}\n      class=${classMap(classes)}>\n      <slot></slot>\n    </a>`;\n  }\n}\n\nif (!customElements.get('w-link')) {\n  customElements.define('w-link', WarpLink);\n}\n\nexport { WarpLink };\n", "import { css } from 'lit';\n\nexport const reset = css`\n  *,\n  :before,\n  :after {\n    box-sizing: border-box;\n    border-style: solid;\n    border-width: 0;\n    border-color: var(--w-s-color-border);\n  }\n  html {\n    font-size: 62.5%;\n  }\n  body {\n    background-color: var(--w-s-color-background);\n    min-height: 100%;\n    margin: 0;\n    overflow-y: scroll;\n  }\n  body,\n  :host {\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    -webkit-tap-highlight-color: transparent;\n    font-family: var(--w-font-family);\n    font-size: var(--w-font-size-m);\n    line-height: var(--w-line-height-m);\n    color: var(--w-s-color-text);\n  }\n  hr {\n    color: inherit;\n    border-top-width: 1px;\n    height: 0;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: 700;\n  }\n  a {\n    cursor: pointer;\n    color: var(--w-s-color-text-link);\n    text-decoration: none;\n  }\n  a:hover,\n  a:focus,\n  a:active {\n    text-decoration: underline;\n  }\n  a:focus-visible {\n    outline: 2px solid var(--w-s-color-border-focus);\n    outline-offset: 1px;\n  }\n  b,\n  strong {\n    font-weight: 700;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family:\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      Liberation Mono,\n      Courier New,\n      monospace;\n    font-size: 1em;\n  }\n  sub,\n  sup {\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  button,\n  input,\n  optgroup,\n  select,\n  textarea {\n    font-family: inherit;\n    font-size: 100%;\n    font-weight: inherit;\n    line-height: inherit;\n    color: inherit;\n    margin: 0;\n    padding: 0;\n  }\n  button,\n  select {\n    text-transform: none;\n  }\n  button,\n  [type='button'],\n  [type='reset'],\n  [type='submit'] {\n    -webkit-appearance: button;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  ::-webkit-inner-spin-button {\n    height: auto;\n  }\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [type='search'] {\n    -webkit-appearance: textfield;\n    outline-offset: -2px;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-file-upload-button {\n    -webkit-appearance: button;\n    font: inherit;\n  }\n  summary {\n    display: list-item;\n  }\n  blockquote,\n  dl,\n  dd,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  hr,\n  figure,\n  p,\n  pre {\n    margin: 0;\n  }\n  fieldset {\n    margin: 0;\n    padding: 0;\n  }\n  legend {\n    padding: 0;\n  }\n  ol,\n  ul,\n  menu {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  textarea {\n    resize: vertical;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    opacity: 1;\n    color: var(--w-s-color-text-placeholder);\n  }\n  button,\n  [role='button'] {\n    cursor: pointer;\n  }\n  :disabled {\n    cursor: default;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    vertical-align: middle;\n    display: block;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  h1 {\n    font-size: var(--w-font-size-xxl);\n    line-height: var(--w-line-height-xxl);\n  }\n  h2 {\n    font-size: var(--w-font-size-xl);\n    line-height: var(--w-line-height-xl);\n  }\n  h3 {\n    font-size: var(--w-font-size-l);\n    line-height: var(--w-line-height-l);\n  }\n  h4 {\n    font-size: var(--w-font-size-m);\n    line-height: var(--w-line-height-m);\n  }\n  h5 {\n    font-size: var(--w-font-size-s);\n    line-height: var(--w-line-height-s);\n  }\n  dt,\n  dd {\n    margin: 0 16px;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  ul,\n  ol,\n  dl,\n  p,\n  blockquote {\n    margin: 0 0 8px;\n  }\n  [hidden] {\n    display: none !important;\n  }\n  [tabindex='-1']:focus:not(:focus-visible) {\n    outline: none;\n  }\n  legend {\n    float: left;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    display: table;\n  }\n  legend + * {\n    clear: both;\n  }\n  fieldset {\n    border: 0;\n    min-width: 0;\n    margin: 0;\n    padding: 0.01em 0 0;\n  }\n  body:not(:-moz-handler-blocked) fieldset {\n    display: table-cell;\n  }\n  svg {\n    pointer-events: none;\n  }\n`;\nexport const components = css`*, :before, :after {\n            --w-rotate: 0;\n            --w-rotate-x: 0;\n            --w-rotate-y: 0;\n            --w-rotate-z: 0;\n            --w-scale-x: 1;\n            --w-scale-y: 1;\n            --w-scale-z: 1;\n            --w-skew-x: 0;\n            --w-skew-y: 0;\n            --w-translate-x: 0;\n            --w-translate-y: 0;\n            --w-translate-z: 0\n        }\n\n            .h4, .t4 {\n                font-weight: 700;\n                font-size: var(--w-font-size-m);\n                line-height: var(--w-line-height-m)\n            }\n\n            .t3 {\n                font-weight: 700;\n                font-size: var(--w-font-size-l);\n                line-height: var(--w-line-height-l)\n            }\n\n            @media (min-width: 480px) {\n                .sm\\\\:h3 {\n                    font-weight: 700;\n                    font-size: var(--w-font-size-l);\n                    line-height: var(--w-line-height-l)\n                }\n            }\n\n            .text-center {\n                text-align: center\n            }\n\n            .before\\\\:text-center:before {\n                text-align: center\n            }\n\n            .text-left {\n                text-align: left\n            }\n\n            .text-right {\n                text-align: right\n            }\n\n            .align-middle {\n                vertical-align: middle\n            }\n\n            .animate-inprogress {\n                background-image: linear-gradient(135deg, rgba(0, 0, 0, .05) 25%, transparent 0, transparent 50%, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 75%, transparent 0, transparent) !important;\n                background-size: 30px 30px;\n                animation: animate-inprogress 3s linear infinite\n            }\n\n            @keyframes animate-inprogress {\n                0% {\n                    background-position: 0 0\n                }\n                to {\n                    background-position: 60px 0\n                }\n            }\n\n            .\\\\[--w-modal-max-height\\\\:80\\\\%\\\\] {\n                --w-modal-max-height: 80%\n            }\n\n            .\\\\[--w-modal-width\\\\:640px\\\\] {\n                --w-modal-width: 640px\n            }\n\n            .focus\\\\:\\\\[--w-outline-offset\\\\:-2px\\\\]:focus {\n                --w-outline-offset: -2px\n            }\n\n            .backdrop-blur {\n                -webkit-backdrop-filter: blur(4px);\n                backdrop-filter: blur(4px)\n            }\n\n            .peer:checked ~ .peer-checked\\\\:before\\\\:bg-center:before {\n                background-position: center\n            }\n\n            .hover\\\\:bg-clip-padding:hover {\n                -webkit-background-clip: padding-box;\n                background-clip: padding-box\n            }\n\n            .bg-transparent, .group\\\\/steph:first-child .group-first\\\\/steph\\\\:bg-transparent, .group\\\\/steph:last-child .group-last\\\\/steph\\\\:bg-transparent {\n                background-color: transparent\n            }\n\n            .bg-\\\\[--w-black\\\\/25\\\\] {\n                background-color: rgba(var(--w-rgb-black), .25)\n            }\n\n            .bg-\\\\[--w-black\\\\/70\\\\], .bg-\\\\[var\\\\(--w-black\\\\)\\\\/70\\\\] {\n                background-color: rgba(var(--w-rgb-black), .7)\n            }\n\n            .bg-\\\\[--w-color-badge-info-background\\\\] {\n                background-color: var(--w-color-badge-info-background)\n            }\n\n            .bg-\\\\[--w-color-badge-negative-background\\\\] {\n                background-color: var(--w-color-badge-negative-background)\n            }\n\n            .bg-\\\\[--w-color-badge-neutral-background\\\\] {\n                background-color: var(--w-color-badge-neutral-background)\n            }\n\n            .bg-\\\\[--w-color-badge-positive-background\\\\] {\n                background-color: var(--w-color-badge-positive-background)\n            }\n\n            .bg-\\\\[--w-color-badge-sponsored-background\\\\] {\n                background-color: var(--w-color-badge-sponsored-background)\n            }\n\n            .bg-\\\\[--w-color-badge-warning-background\\\\] {\n                background-color: var(--w-color-badge-warning-background)\n            }\n\n            .bg-\\\\[--w-color-button-primary-background\\\\] {\n                background-color: var(--w-color-button-primary-background)\n            }\n\n            .bg-\\\\[--w-color-buttongroup-utility-background-selected\\\\] {\n                background-color: var(--w-color-buttongroup-utility-background-selected)\n            }\n\n            .bg-\\\\[--w-color-callout-background\\\\] {\n                background-color: var(--w-color-callout-background)\n            }\n\n            .bg-\\\\[--w-color-pill-suggestion-background\\\\] {\n                background-color: var(--w-color-pill-suggestion-background)\n            }\n\n            .bg-\\\\[--w-color-switch-track-background\\\\] {\n                background-color: var(--w-color-switch-track-background)\n            }\n\n            .bg-\\\\[--w-s-color-surface-elevated-100\\\\] {\n                background-color: var(--w-s-color-surface-elevated-100)\n            }\n\n            .bg-\\\\[--w-s-color-surface-elevated-300\\\\] {\n                background-color: var(--w-s-color-surface-elevated-300)\n            }\n\n            .bg-\\\\[--w-s-icon-selected\\\\] {\n                background-color: var(--w-s-icon-selected)\n            }\n\n            .group:hover .group-hover\\\\:bg-\\\\[--w-color-switch-track-background-hover\\\\] {\n                background-color: var(--w-color-switch-track-background-hover)\n            }\n\n            .hover\\\\:bg-\\\\[--w-color-button-pill-background-hover\\\\]:hover {\n                background-color: var(--w-color-button-pill-background-hover)\n            }\n\n            .hover\\\\:bg-\\\\[--w-color-button-primary-background-hover\\\\]:hover {\n                background-color: var(--w-color-button-primary-background-hover)\n            }\n\n            .hover\\\\:bg-\\\\[--w-color-buttongroup-utility-background-hover\\\\]:hover {\n                background-color: var(--w-color-buttongroup-utility-background-hover)\n            }\n\n            .hover\\\\:bg-\\\\[--w-color-pill-suggestion-background-hover\\\\]:hover {\n                background-color: var(--w-color-pill-suggestion-background-hover)\n            }\n\n            .hover\\\\:bg-\\\\[--w-s-icon-subtle\\\\]:hover {\n                background-color: var(--w-s-icon-subtle)\n            }\n\n            .hover\\\\:bg-\\\\[var\\\\(--w-black\\\\)\\\\/85\\\\]:hover {\n                background-color: rgba(var(--w-rgb-black), .85)\n            }\n\n            .active\\\\:bg-\\\\[--w-color-button-pill-background-active\\\\]:active {\n                background-color: var(--w-color-button-pill-background-active)\n            }\n\n            .active\\\\:bg-\\\\[--w-color-button-primary-background-active\\\\]:active {\n                background-color: var(--w-color-button-primary-background-active)\n            }\n\n            .active\\\\:bg-\\\\[--w-color-buttongroup-utility-background-selected\\\\]:active {\n                background-color: var(--w-color-buttongroup-utility-background-selected)\n            }\n\n            .active\\\\:bg-\\\\[--w-color-pill-suggestion-background-active\\\\]:active {\n                background-color: var(--w-color-pill-suggestion-background-active)\n            }\n\n            .active\\\\:bg-\\\\[var\\\\(--w-black\\\\)\\\\]:active {\n                background-color: var(--w-black)\n            }\n\n            .peer:checked ~ .peer-checked\\\\:before\\\\:bg-\\\\[url\\\\(var\\\\(--w-icon-toggle-checked\\\\)\\\\)\\\\]:before {\n                background-image: var(--w-icon-toggle-checked)\n            }\n\n            .appearance-none {\n                -moz-appearance: none;\n                appearance: none;\n                -webkit-appearance: none\n            }\n\n            .will-change-height {\n                will-change: height\n            }\n\n            .border, .border-1 {\n                border-width: 1px\n            }\n\n            .border-b {\n                border-bottom-width: 1px\n            }\n\n            .before\\\\:border:before {\n                border-width: 1px\n            }\n\n            .border-0 {\n                border-width: 0\n            }\n\n            .border-2 {\n                border-width: 2px\n            }\n\n            .border-b-0 {\n                border-bottom-width: 0\n            }\n\n            .border-b-4 {\n                border-bottom-width: 4px\n            }\n\n            .border-l-4 {\n                border-left-width: 4px\n            }\n\n            .border-r-0, .group:not(:last-of-type) .group-not-last-of-type\\\\:border-r-0 {\n                border-right-width: 0\n            }\n\n            .peer:checked ~ .peer-checked\\\\:before\\\\:border-\\\\[6\\\\]:before {\n                border-width: .6rem\n            }\n\n            .border-transparent {\n                border-color: transparent\n            }\n\n            .border-\\\\[--w-color-buttongroup-utility-border\\\\] {\n                border-color: var(--w-color-buttongroup-utility-border)\n            }\n\n            .border-\\\\[--w-color-callout-border\\\\] {\n                border-color: var(--w-color-callout-border)\n            }\n\n            .border-\\\\[--w-s-color-background-inverted\\\\] {\n                border-color: var(--w-s-color-background-inverted)\n            }\n\n            .border-\\\\[--w-s-color-surface-elevated-300\\\\] {\n                border-color: var(--w-s-color-surface-elevated-300)\n            }\n\n            .active\\\\:border-\\\\[--w-color-buttongroup-utility-border-selected\\\\]:active {\n                border-color: var(--w-color-buttongroup-utility-border-selected)\n            }\n\n            .divide-x > * + * {\n                --w-divide-x-reverse: 0;\n                border-left-width: calc(1px * calc(1 - var(--w-divide-x-reverse)));\n                border-right-width: calc(1px * var(--w-divide-x-reverse))\n            }\n\n            .divide-y > * + * {\n                --w-divide-y-reverse: 0;\n                border-top-width: calc(1px * calc(1 - var(--w-divide-y-reverse)));\n                border-bottom-width: calc(1px * var(--w-divide-y-reverse))\n            }\n\n            .rounded-4 {\n                border-radius: 4px\n            }\n\n            .rounded-8 {\n                border-radius: 8px\n            }\n\n            .rounded-full {\n                border-radius: 9999px\n            }\n\n            .before\\\\:rounded-2:before {\n                border-radius: 2px\n            }\n\n            .before\\\\:rounded-full:before {\n                border-radius: 9999px\n            }\n\n            .rounded-b-0 {\n                border-bottom-left-radius: 0;\n                border-bottom-right-radius: 0\n            }\n\n            .rounded-bl-0 {\n                border-bottom-left-radius: 0\n            }\n\n            .rounded-br-0 {\n                border-bottom-right-radius: 0\n            }\n\n            .rounded-l-0 {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0\n            }\n\n            .rounded-l-full {\n                border-top-left-radius: 9999px;\n                border-bottom-left-radius: 9999px\n            }\n\n            .rounded-r-0 {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0\n            }\n\n            .rounded-r-full {\n                border-top-right-radius: 9999px;\n                border-bottom-right-radius: 9999px\n            }\n\n            .rounded-tl-0 {\n                border-top-left-radius: 0\n            }\n\n            .rounded-tl-4 {\n                border-top-left-radius: 4px\n            }\n\n            .rounded-tr-0 {\n                border-top-right-radius: 0\n            }\n\n            .group:first-of-type .group-first-of-type\\\\:rounded-bl-8 {\n                border-bottom-left-radius: 8px\n            }\n\n            .group:first-of-type .group-first-of-type\\\\:rounded-tl-8 {\n                border-top-left-radius: 8px\n            }\n\n            .first\\\\:rounded-lb-4:first-child {\n                border-bottom-left-radius: 4px\n            }\n\n            .first\\\\:rounded-lt-4:first-child {\n                border-top-left-radius: 4px\n            }\n\n            .first\\\\:rounded-rt-4:first-child {\n                border-top-right-radius: 4px\n            }\n\n            .group:last-of-type .group-last-of-type\\\\:rounded-br-8 {\n                border-bottom-right-radius: 8px\n            }\n\n            .group:last-of-type .group-last-of-type\\\\:rounded-tr-8 {\n                border-top-right-radius: 8px\n            }\n\n            .last\\\\:rounded-lb-4:last-child {\n                border-bottom-left-radius: 4px\n            }\n\n            .last\\\\:rounded-rb-4:last-child {\n                border-bottom-right-radius: 4px\n            }\n\n            .last\\\\:rounded-rt-4:last-child {\n                border-top-right-radius: 4px\n            }\n\n            .caret-current {\n                caret-color: currentColor\n            }\n\n            .opacity-25 {\n                opacity: 25%\n            }\n\n            .block {\n                display: block\n            }\n\n            .before\\\\:block:before {\n                display: block\n            }\n\n            .inline-block {\n                display: inline-block\n            }\n\n            .inline {\n                display: inline\n            }\n\n            .flex, .open\\\\:flex[open] {\n                display: flex\n            }\n\n            .inline-flex {\n                display: inline-flex\n            }\n\n            .grid {\n                display: grid\n            }\n\n            .inline-grid {\n                display: inline-grid\n            }\n\n            .hidden, .group\\\\/stepv:last-child .group-last\\\\/stepv\\\\:hidden {\n                display: none\n            }\n\n            .before\\\\:hidden:before {\n                display: none\n            }\n\n            .hover\\\\:underline:hover {\n                text-decoration-line: underline\n            }\n\n            .focus\\\\:underline:focus {\n                text-decoration-line: underline\n            }\n\n            .focus-visible\\\\:underline:focus-visible {\n                text-decoration-line: underline\n            }\n\n            .active\\\\:underline:active {\n                text-decoration-line: underline\n            }\n\n            .hover\\\\:no-underline:hover {\n                text-decoration: none\n            }\n\n            .focus\\\\:no-underline:focus {\n                text-decoration: none\n            }\n\n            .active\\\\:no-underline:active {\n                text-decoration: none\n            }\n\n            .flex-1 {\n                flex: 1 1 0%\n            }\n\n            .shrink {\n                flex-shrink: 1\n            }\n\n            .shrink-0 {\n                flex-shrink: 0\n            }\n\n            .shrink-0\\\\! {\n                flex-shrink: 0 !important\n            }\n\n            .grow, .grow-1 {\n                flex-grow: 1\n            }\n\n            .basis-auto {\n                flex-basis: auto\n            }\n\n            .flex-col {\n                flex-direction: column\n            }\n\n            .focus-within\\\\:focusable:focus-within {\n                outline: 2px solid var(--w-s-color-border-focus);\n                outline-offset: var(--w-outline-offset, 1px)\n            }\n\n            .focusable:focus, .focusable:focus-visible {\n                outline: 2px solid var(--w-s-color-border-focus);\n                outline-offset: var(--w-outline-offset, 1px)\n            }\n\n            .focusable:not(:focus-visible) {\n                outline: none\n            }\n\n            .peer:focus ~ .peer-focus\\\\:focusable, .peer:focus-visible ~ .peer-focus\\\\:focusable {\n                outline: 2px solid var(--w-s-color-border-focus);\n                outline-offset: var(--w-outline-offset, 1px)\n            }\n\n            .peer:not(:focus-visible) ~ .peer-focus\\\\:focusable {\n                outline: none\n            }\n\n            .focusable-inset {\n                --w-outline-offset: -3px\n            }\n\n            .gap-12 {\n                gap: 1.2rem\n            }\n\n            .gap-8 {\n                gap: .8rem\n            }\n\n            .gap-x-16 {\n                column-gap: 1.6rem\n            }\n\n            .gap-y-16 {\n                row-gap: 1.6rem\n            }\n\n            .row-span-2 {\n                grid-row: span 2/span 2\n            }\n\n            .col-span-2 {\n                grid-column: span 2/span 2\n            }\n\n            .col-span-3 {\n                grid-column: span 3/span 3\n            }\n\n            .row-start-1 {\n                grid-row-start: 1\n            }\n\n            .row-start-2 {\n                grid-row-start: 2\n            }\n\n            .col-start-2 {\n                grid-column-start: 2\n            }\n\n            .auto-rows-auto {\n                grid-auto-rows: auto\n            }\n\n            .grid-flow-col {\n                grid-auto-flow: column\n            }\n\n            .grid-rows-\\\\[20px_auto\\\\] {\n                grid-template-rows:20px auto\n            }\n\n            .grid-rows-\\\\[auto_20px\\\\] {\n                grid-template-rows:auto 20px\n            }\n\n            .grid-cols-\\\\[1fr_20px_1fr\\\\] {\n                grid-template-columns:1fr 20px 1fr\n            }\n\n            .grid-cols-\\\\[1fr_20px\\\\] {\n                grid-template-columns:1fr 20px\n            }\n\n            .grid-cols-\\\\[20px_1fr\\\\] {\n                grid-template-columns:20px 1fr\n            }\n\n            .grid-cols-\\\\[auto_1fr_auto\\\\] {\n                grid-template-columns:auto 1fr auto\n            }\n\n            .grid-cols-1 {\n                grid-template-columns:repeat(1, minmax(0, 1fr))\n            }\n\n            .grid-cols-2 {\n                grid-template-columns:repeat(2, minmax(0, 1fr))\n            }\n\n            .grid-cols-3 {\n                grid-template-columns:repeat(3, minmax(0, 1fr))\n            }\n\n            .grid-cols-4 {\n                grid-template-columns:repeat(4, minmax(0, 1fr))\n            }\n\n            .grid-cols-5 {\n                grid-template-columns:repeat(5, minmax(0, 1fr))\n            }\n\n            .grid-cols-6 {\n                grid-template-columns:repeat(6, minmax(0, 1fr))\n            }\n\n            .grid-cols-7 {\n                grid-template-columns:repeat(7, minmax(0, 1fr))\n            }\n\n            .grid-cols-8 {\n                grid-template-columns:repeat(8, minmax(0, 1fr))\n            }\n\n            .grid-cols-9 {\n                grid-template-columns:repeat(9, minmax(0, 1fr))\n            }\n\n            .overflow-hidden {\n                overflow: hidden\n            }\n\n            .overflow-x-hidden {\n                overflow-x: hidden\n            }\n\n            .overflow-y-auto {\n                overflow-y: auto\n            }\n\n            .list-none {\n                list-style-type: none\n            }\n\n            .outline-\\\\[--w-s-color-border-negative\\\\]\\\\! {\n                outline-color: var(--w-s-color-border-negative) !important\n            }\n\n            .outline-none {\n                outline: 2px solid transparent;\n                outline-offset: 2px\n            }\n\n            .focus\\\\:outline-none:focus {\n                outline: 2px solid transparent;\n                outline-offset: 2px\n            }\n\n            .items-start {\n                align-items: flex-start\n            }\n\n            .items-end {\n                align-items: flex-end\n            }\n\n            .items-center {\n                align-items: center\n            }\n\n            .self-center {\n                align-self: center\n            }\n\n            .inset-0 {\n                top: 0rem;\n                right: 0rem;\n                bottom: 0rem;\n                left: 0rem\n            }\n\n            .-bottom-0 {\n                bottom: -0rem\n            }\n\n            .bottom-0 {\n                bottom: 0rem\n            }\n\n            .bottom-10 {\n                bottom: 1rem\n            }\n\n            .bottom-16 {\n                bottom: 1.6rem\n            }\n\n            .left-0 {\n                left: 0rem\n            }\n\n            .left-4 {\n                left: .4rem\n            }\n\n            .right-0 {\n                right: 0rem\n            }\n\n            .right-8 {\n                right: .8rem\n            }\n\n            .top-\\\\[1\\\\.92rem\\\\] {\n                top: 1.92rem\n            }\n\n            .top-0 {\n                top: 0rem\n            }\n\n            .top-20 {\n                top: 2rem\n            }\n\n            .top-4 {\n                top: .4rem\n            }\n\n            .top-8 {\n                top: .8rem\n            }\n\n            .before\\\\:bottom-0:before {\n                bottom: 0rem\n            }\n\n            .before\\\\:left-0:before {\n                left: 0rem\n            }\n\n            .before\\\\:right-0:before {\n                right: 0rem\n            }\n\n            .before\\\\:top-2:before {\n                top: .2rem\n            }\n\n            .-bottom-\\\\[8px\\\\] {\n                bottom: -8px\n            }\n\n            .-left-\\\\[8px\\\\] {\n                left: -8px\n            }\n\n            .-right-\\\\[8px\\\\] {\n                right: -8px\n            }\n\n            .-top-\\\\[8px\\\\] {\n                top: -8px\n            }\n\n            .top-\\\\[19px\\\\] {\n                top: 19px\n            }\n\n            .top-\\\\[30\\\\%\\\\] {\n                top: 30%\n            }\n\n            .justify-end {\n                justify-content: flex-end\n            }\n\n            .justify-center {\n                justify-content: center\n            }\n\n            .justify-between {\n                justify-content: space-between\n            }\n\n            .justify-items-center {\n                justify-items: center\n            }\n\n            .justify-self-start {\n                justify-self: start\n            }\n\n            .justify-self-end {\n                justify-self: end\n            }\n\n            .justify-self-center {\n                justify-self: center\n            }\n\n            .absolute {\n                position: absolute\n            }\n\n            .fixed {\n                position: fixed\n            }\n\n            .relative {\n                position: relative\n            }\n\n            .open\\\\:fixed[open] {\n                position: fixed\n            }\n\n            .before\\\\:absolute:before {\n                position: absolute\n            }\n\n            .z-10, .peer:checked ~ .peer-checked\\\\:z-10 {\n                z-index: 10\n            }\n\n            .z-30 {\n                z-index: 30\n            }\n\n            .z-50 {\n                z-index: 50\n            }\n\n            .hover\\\\:z-30:hover {\n                z-index: 30\n            }\n\n            .\\\\!s-bg-selected {\n                background-color: var(--w-s-color-background-selected) !important\n            }\n\n            .s-bg {\n                background-color: var(--w-s-color-background)\n            }\n\n            .s-bg-disabled {\n                background-color: var(--w-s-color-background-disabled)\n            }\n\n            .s-bg-disabled-subtle {\n                background-color: var(--w-s-color-background-disabled-subtle)\n            }\n\n            .s-bg-info-subtle {\n                background-color: var(--w-s-color-background-info-subtle)\n            }\n\n            .s-bg-inverted {\n                background-color: var(--w-s-color-background-inverted)\n            }\n\n            .s-bg-negative {\n                background-color: var(--w-s-color-background-negative)\n            }\n\n            .s-bg-negative-subtle {\n                background-color: var(--w-s-color-background-negative-subtle)\n            }\n\n            .s-bg-positive-subtle {\n                background-color: var(--w-s-color-background-positive-subtle)\n            }\n\n            .s-bg-primary, .peer:checked ~ .peer-checked\\\\:s-bg-primary {\n                background-color: var(--w-s-color-background-primary)\n            }\n\n            .s-bg-selected {\n                background-color: var(--w-s-color-background-selected)\n            }\n\n            .s-bg-subtle {\n                background-color: var(--w-s-color-background-subtle)\n            }\n\n            .s-bg-warning-subtle {\n                background-color: var(--w-s-color-background-warning-subtle)\n            }\n\n            .peer:checked:hover ~ .peer-checked\\\\:peer-hover\\\\:before\\\\:s-bg-negative-hover:before {\n                background-color: var(--w-s-color-background-negative-hover)\n            }\n\n            .peer:checked:hover ~ .peer-checked\\\\:peer-hover\\\\:before\\\\:s-bg-primary-hover:before {\n                background-color: var(--w-s-color-background-primary-hover)\n            }\n\n            .peer:checked ~ .peer-checked\\\\:before\\\\:s-bg-disabled:before {\n                background-color: var(--w-s-color-background-disabled)\n            }\n\n            .peer:checked ~ .peer-checked\\\\:before\\\\:s-bg-negative:before {\n                background-color: var(--w-s-color-background-negative)\n            }\n\n            .peer:checked ~ .peer-checked\\\\:before\\\\:s-bg-primary:before {\n                background-color: var(--w-s-color-background-primary)\n            }\n\n            .peer:indeterminate ~ .peer-indeterminate\\\\:before\\\\:s-bg-disabled:before {\n                background-color: var(--w-s-color-background-disabled)\n            }\n\n            .peer:indeterminate ~ .peer-indeterminate\\\\:before\\\\:s-bg-negative:before {\n                background-color: var(--w-s-color-background-negative)\n            }\n\n            .peer:indeterminate ~ .peer-indeterminate\\\\:before\\\\:s-bg-primary:before {\n                background-color: var(--w-s-color-background-primary)\n            }\n\n            .peer:indeterminate ~ .peer-indeterminate\\\\:hover\\\\:before\\\\:s-bg-negative-hover:hover:before {\n                background-color: var(--w-s-color-background-negative-hover)\n            }\n\n            .peer:indeterminate ~ .peer-indeterminate\\\\:hover\\\\:before\\\\:s-bg-primary-hover:hover:before {\n                background-color: var(--w-s-color-background-primary-hover)\n            }\n\n            .\\\\!hover\\\\:s-bg-selected-hover:hover {\n                background-color: var(--w-s-color-background-selected-hover) !important\n            }\n\n            .group:hover .group-hover\\\\:s-bg-primary-hover {\n                background-color: var(--w-s-color-background-primary-hover)\n            }\n\n            .hover\\\\:before\\\\:s-bg-hover:hover:before {\n                background-color: var(--w-s-color-background-hover)\n            }\n\n            .hover\\\\:before\\\\:s-bg-negative-subtle-hover:hover:before {\n                background-color: var(--w-s-color-background-negative-subtle-hover)\n            }\n\n            .hover\\\\:s-bg-hover:hover {\n                background-color: var(--w-s-color-background-hover)\n            }\n\n            .hover\\\\:s-bg-negative-hover:hover {\n                background-color: var(--w-s-color-background-negative-hover)\n            }\n\n            .hover\\\\:s-bg-negative-subtle-hover:hover {\n                background-color: var(--w-s-color-background-negative-subtle-hover)\n            }\n\n            .hover\\\\:s-bg-primary-hover:hover {\n                background-color: var(--w-s-color-background-primary-hover)\n            }\n\n            .hover\\\\:s-bg-selected-hover:hover {\n                background-color: var(--w-s-color-background-selected-hover)\n            }\n\n            .peer:hover:not(:checked) ~ .peer-hover\\\\:peer-not-checked\\\\:s-bg-hover {\n                background-color: var(--w-s-color-background-hover)\n            }\n\n            .peer:hover ~ .peer-hover\\\\:before\\\\:s-bg-hover:before {\n                background-color: var(--w-s-color-background-hover)\n            }\n\n            .peer:hover ~ .peer-hover\\\\:before\\\\:s-bg-negative-subtle:before {\n                background-color: var(--w-s-color-background-negative-subtle)\n            }\n\n            .focus\\\\:s-bg-primary-hover:focus {\n                background-color: var(--w-s-color-background-primary-hover)\n            }\n\n            .\\\\!active\\\\:s-bg-selected-active:active {\n                background-color: var(--w-s-color-background-selected-active) !important\n            }\n\n            .active\\\\:s-bg-active:active {\n                background-color: var(--w-s-color-background-active)\n            }\n\n            .active\\\\:s-bg-negative-active:active {\n                background-color: var(--w-s-color-background-negative-active)\n            }\n\n            .active\\\\:s-bg-negative-subtle-active:active {\n                background-color: var(--w-s-color-background-negative-subtle-active)\n            }\n\n            .active\\\\:s-bg-primary-active:active {\n                background-color: var(--w-s-color-background-primary-active)\n            }\n\n            .active\\\\:s-bg-selected-active:active {\n                background-color: var(--w-s-color-background-selected-active)\n            }\n\n            .before\\\\:s-bg-disabled-subtle:before {\n                background-color: var(--w-s-color-background-disabled-subtle)\n            }\n\n            .before\\\\:s-bg:before {\n                background-color: var(--w-s-color-background)\n            }\n\n            .s-text {\n                color: var(--w-s-color-text)\n            }\n\n            .s-text-disabled {\n                color: var(--w-s-color-text-disabled)\n            }\n\n            .s-text-inverted, .peer:checked ~ .peer-checked\\\\:s-text-inverted {\n                color: var(--w-s-color-text-inverted)\n            }\n\n            .s-text-inverted-static {\n                color: var(--w-s-color-text-inverted-static)\n            }\n\n            .s-text-link {\n                color: var(--w-s-color-text-link)\n            }\n\n            .s-text-negative {\n                color: var(--w-s-color-text-negative)\n            }\n\n            .s-text-subtle {\n                color: var(--w-s-color-text-subtle)\n            }\n\n            .hover\\\\:s-text-link:hover {\n                color: var(--w-s-color-text-link)\n            }\n\n            .active\\\\:s-text:active {\n                color: var(--w-s-color-text)\n            }\n\n            .placeholder\\\\:s-text-placeholder::placeholder {\n                color: var(--w-s-color-text-placeholder)\n            }\n\n            .s-icon {\n                color: var(--w-s-color-icon)\n            }\n\n            .s-icon-info {\n                color: var(--w-s-color-icon-info)\n            }\n\n            .s-icon-inverted {\n                color: var(--w-s-color-icon-inverted)\n            }\n\n            .s-icon-negative {\n                color: var(--w-s-color-icon-negative)\n            }\n\n            .s-icon-positive {\n                color: var(--w-s-color-icon-positive)\n            }\n\n            .s-icon-warning {\n                color: var(--w-s-color-icon-warning)\n            }\n\n            .hover\\\\:s-icon-hover:hover {\n                color: var(--w-s-color-icon-hover)\n            }\n\n            .active\\\\:s-icon-active:active {\n                color: var(--w-s-color-icon-active)\n            }\n\n            .before\\\\:s-icon-inverted:before {\n                color: var(--w-s-color-icon-inverted)\n            }\n\n            .s-border {\n                border-color: var(--w-s-color-border)\n            }\n\n            .s-border-disabled {\n                border-color: var(--w-s-color-border-disabled)\n            }\n\n            .s-border-info-subtle {\n                border-color: var(--w-s-color-border-info-subtle)\n            }\n\n            .s-border-l-info {\n                border-left-color: var(--w-s-color-border-info)\n            }\n\n            .s-border-l-negative {\n                border-left-color: var(--w-s-color-border-negative)\n            }\n\n            .s-border-l-positive {\n                border-left-color: var(--w-s-color-border-positive)\n            }\n\n            .s-border-l-warning {\n                border-left-color: var(--w-s-color-border-warning)\n            }\n\n            .s-border-negative {\n                border-color: var(--w-s-color-border-negative)\n            }\n\n            .s-border-negative-subtle {\n                border-color: var(--w-s-color-border-negative-subtle)\n            }\n\n            .s-border-positive-subtle {\n                border-color: var(--w-s-color-border-positive-subtle)\n            }\n\n            .s-border-primary, .peer:checked ~ .peer-checked\\\\:s-border-primary {\n                border-color: var(--w-s-color-border-primary)\n            }\n\n            .s-border-selected {\n                border-color: var(--w-s-color-border-selected)\n            }\n\n            .s-border-warning-subtle {\n                border-color: var(--w-s-color-border-warning-subtle)\n            }\n\n            .peer:checked:hover ~ .peer-checked\\\\:peer-hover\\\\:before\\\\:s-border-negative-hover:before {\n                border-color: var(--w-s-color-border-negative-hover)\n            }\n\n            .peer:checked:hover ~ .peer-checked\\\\:peer-hover\\\\:before\\\\:s-border-primary-hover:before {\n                border-color: var(--w-s-color-border-primary-hover)\n            }\n\n            .peer:checked:hover ~ .peer-checked\\\\:peer-hover\\\\:before\\\\:s-border-selected-hover:before {\n                border-color: var(--w-s-color-border-selected-hover)\n            }\n\n            .peer:checked ~ .peer-checked\\\\:before\\\\:s-border-disabled:before {\n                border-color: var(--w-s-color-border-disabled)\n            }\n\n            .peer:checked ~ .peer-checked\\\\:before\\\\:s-border-negative:before {\n                border-color: var(--w-s-color-border-negative)\n            }\n\n            .peer:checked ~ .peer-checked\\\\:before\\\\:s-border-primary:before {\n                border-color: var(--w-s-color-border-primary)\n            }\n\n            .peer:checked ~ .peer-checked\\\\:before\\\\:s-border-selected:before {\n                border-color: var(--w-s-color-border-selected)\n            }\n\n            .peer:indeterminate ~ .peer-indeterminate\\\\:before\\\\:s-border-disabled:before {\n                border-color: var(--w-s-color-border-disabled)\n            }\n\n            .peer:indeterminate ~ .peer-indeterminate\\\\:before\\\\:s-border-negative:before {\n                border-color: var(--w-s-color-border-negative)\n            }\n\n            .peer:indeterminate ~ .peer-indeterminate\\\\:before\\\\:s-border-primary:before {\n                border-color: var(--w-s-color-border-primary)\n            }\n\n            .peer:indeterminate ~ .peer-indeterminate\\\\:hover\\\\:before\\\\:s-border-negative-hover:hover:before {\n                border-color: var(--w-s-color-border-negative-hover)\n            }\n\n            .peer:indeterminate ~ .peer-indeterminate\\\\:hover\\\\:before\\\\:s-border-primary-hover:hover:before {\n                border-color: var(--w-s-color-border-primary-hover)\n            }\n\n            .group:hover .group-hover\\\\:s-border-selected-hover {\n                border-color: var(--w-s-color-border-selected-hover)\n            }\n\n            .hover\\\\:before\\\\:s-border-negative-hover:hover:before {\n                border-color: var(--w-s-color-border-negative-hover)\n            }\n\n            .hover\\\\:before\\\\:s-border-primary:hover:before {\n                border-color: var(--w-s-color-border-primary)\n            }\n\n            .hover\\\\:s-border-disabled:hover {\n                border-color: var(--w-s-color-border-disabled)\n            }\n\n            .hover\\\\:s-border-hover:hover {\n                border-color: var(--w-s-color-border-hover)\n            }\n\n            .hover\\\\:s-border-negative-hover:hover {\n                border-color: var(--w-s-color-border-negative-hover)\n            }\n\n            .hover\\\\:s-border-primary-hover:hover {\n                border-color: var(--w-s-color-border-primary-hover)\n            }\n\n            .hover\\\\:s-border-primary:hover {\n                border-color: var(--w-s-color-border-primary)\n            }\n\n            .hover\\\\:s-border-selected-hover:hover {\n                border-color: var(--w-s-color-border-selected-hover)\n            }\n\n            .peer:hover ~ .peer-hover\\\\:before\\\\:s-border-negative-hover:before {\n                border-color: var(--w-s-color-border-negative-hover)\n            }\n\n            .peer:hover ~ .peer-hover\\\\:before\\\\:s-border-primary:before {\n                border-color: var(--w-s-color-border-primary)\n            }\n\n            .focus\\\\:s-border-primary-hover:focus {\n                border-color: var(--w-s-color-border-primary-hover)\n            }\n\n            .active\\\\:s-border-active:active {\n                border-color: var(--w-s-color-border-active)\n            }\n\n            .active\\\\:s-border-disabled:active {\n                border-color: var(--w-s-color-border-disabled)\n            }\n\n            .active\\\\:s-border-primary-active:active {\n                border-color: var(--w-s-color-border-primary-active)\n            }\n\n            .active\\\\:s-border-selected-active:active {\n                border-color: var(--w-s-color-border-selected-active)\n            }\n\n            .active\\\\:s-border-selected:active {\n                border-color: var(--w-s-color-border-selected)\n            }\n\n            .group:active .group-active\\\\:s-border-active {\n                border-color: var(--w-s-color-border-active)\n            }\n\n            .group:active .group-active\\\\:s-border-selected-active {\n                border-color: var(--w-s-color-border-selected-active)\n            }\n\n            .before\\\\:s-border-disabled:before {\n                border-color: var(--w-s-color-border-disabled)\n            }\n\n            .before\\\\:s-border-negative:before {\n                border-color: var(--w-s-color-border-negative)\n            }\n\n            .s-surface-sunken {\n                background-color: var(--w-s-color-surface-sunken)\n            }\n\n            .s-surface-elevated-200 {\n                background-color: var(--w-s-color-surface-elevated-200);\n                box-shadow: var(--w-s-shadow-surface-elevated-200)\n            }\n\n            .hover\\\\:s-surface-elevated-200-hover:hover {\n                background-color: var(--w-s-color-surface-elevated-200-hover);\n                box-shadow: var(--w-s-shadow-surface-elevated-200-hover)\n            }\n\n            .active\\\\:s-surface-elevated-200-active:active {\n                background-color: var(--w-s-color-surface-elevated-200-active);\n                box-shadow: var(--w-s-shadow-surface-elevated-200-active)\n            }\n\n            .drop-shadow-m {\n                filter: drop-shadow(rgba(64, 64, 64, .24) 0 3px 8px) drop-shadow(rgba(64, 64, 64, .16) 0 3px 6px)\n            }\n\n            .shadow-m {\n                box-shadow: var(--w-shadow-m)\n            }\n\n            .shadow-s {\n                box-shadow: var(--w-shadow-s)\n            }\n\n            .shadow-\\\\[--w-shadow-slider\\\\] {\n                box-shadow: var(--w-shadow-slider)\n            }\n\n            .hover\\\\:shadow-\\\\[--w-shadow-slider-handle-hover\\\\]:hover {\n                box-shadow: var(--w-shadow-slider-handle-hover)\n            }\n\n            .focus\\\\:shadow-\\\\[--w-shadow-slider-handle-hover\\\\]:focus {\n                box-shadow: var(--w-shadow-slider-handle-hover)\n            }\n\n            .active\\\\:shadow-\\\\[--w-shadow-slider-handle-active\\\\]:active {\n                box-shadow: var(--w-shadow-slider-handle-active)\n            }\n\n            .h-0 {\n                height: 0rem\n            }\n\n            .h-16 {\n                height: 1.6rem\n            }\n\n            .h-2 {\n                height: .2rem\n            }\n\n            .h-20 {\n                height: 2rem\n            }\n\n            .h-24 {\n                height: 2.4rem\n            }\n\n            .h-4 {\n                height: .4rem\n            }\n\n            .h-44 {\n                height: 4.4rem\n            }\n\n            .h-6 {\n                height: .6rem\n            }\n\n            .h-8 {\n                height: .8rem\n            }\n\n            .h-full {\n                height: 100%\n            }\n\n            .h-unset {\n                height: unset\n            }\n\n            .max-h-unset {\n                max-height: unset\n            }\n\n            .max-w-full {\n                max-width: 100%\n            }\n\n            .max-w-max {\n                max-width: max-content\n            }\n\n            .max-w-unset {\n                max-width: unset\n            }\n\n            .min-h-32 {\n                min-height: 3.2rem\n            }\n\n            .min-h-40 {\n                min-height: 4rem\n            }\n\n            .min-w-16 {\n                min-width: 1.6rem\n            }\n\n            .min-w-32 {\n                min-width: 3.2rem\n            }\n\n            .w-16 {\n                width: 1.6rem\n            }\n\n            .w-2 {\n                width: .2rem\n            }\n\n            .w-20 {\n                width: 2rem\n            }\n\n            .w-24 {\n                width: 2.4rem\n            }\n\n            .w-32 {\n                width: 3.2rem\n            }\n\n            .w-40 {\n                width: 4rem\n            }\n\n            .w-44 {\n                width: 4.4rem\n            }\n\n            .w-8 {\n                width: .8rem\n            }\n\n            .w-full {\n                width: 100%\n            }\n\n            .w-max {\n                width: max-content\n            }\n\n            .w-unset {\n                width: unset\n            }\n\n            .before\\\\:h-20:before {\n                height: 2rem\n            }\n\n            .before\\\\:h-full:before {\n                height: 100%\n            }\n\n            .before\\\\:w-20:before {\n                width: 2rem\n            }\n\n            .before\\\\:w-32:before {\n                width: 3.2rem\n            }\n\n            .h-\\\\[--w-modal-height\\\\] {\n                height: var(--w-modal-height)\n            }\n\n            .h-\\\\[14px\\\\] {\n                height: 14px\n            }\n\n            .h-\\\\[16px\\\\] {\n                height: 16px\n            }\n\n            .max-h-\\\\[--w-modal-max-height\\\\] {\n                max-height: var(--w-modal-max-height)\n            }\n\n            .min-h-\\\\[--w-modal-min-height\\\\] {\n                min-height: var(--w-modal-min-height)\n            }\n\n            .min-h-\\\\[32px\\\\] {\n                min-height: 32px\n            }\n\n            .min-h-\\\\[40px\\\\] {\n                min-height: 40px\n            }\n\n            .min-h-\\\\[42\\\\] {\n                min-height: 4.2rem\n            }\n\n            .min-h-\\\\[44px\\\\] {\n                min-height: 44px\n            }\n\n            .min-w-\\\\[32px\\\\] {\n                min-width: 32px\n            }\n\n            .min-w-\\\\[40px\\\\] {\n                min-width: 40px\n            }\n\n            .min-w-\\\\[44px\\\\] {\n                min-width: 44px\n            }\n\n            .w-\\\\[--w-modal-width\\\\] {\n                width: var(--w-modal-width)\n            }\n\n            .w-\\\\[14px\\\\] {\n                width: 14px\n            }\n\n            .w-\\\\[16px\\\\] {\n                width: 16px\n            }\n\n            .space-x-8 > :not([hidden]) ~ :not([hidden]) {\n                --w-space-x-reverse: 0;\n                margin-left: calc(.8rem * calc(1 - var(--w-space-x-reverse)));\n                margin-right: calc(.8rem * var(--w-space-x-reverse))\n            }\n\n            .space-y-16 > :not([hidden]) ~ :not([hidden]) {\n                --w-space-y-reverse: 0;\n                margin-top: calc(1.6rem * calc(1 - var(--w-space-y-reverse)));\n                margin-bottom: calc(1.6rem * var(--w-space-y-reverse))\n            }\n\n            .m-0 {\n                margin: 0rem\n            }\n\n            .m-auto {\n                margin: auto\n            }\n\n            .-mx-16 {\n                margin-left: -1.6rem;\n                margin-right: -1.6rem\n            }\n\n            .mx-0 {\n                margin-left: 0rem;\n                margin-right: 0rem\n            }\n\n            .mx-8 {\n                margin-left: .8rem;\n                margin-right: .8rem\n            }\n\n            .mx-auto {\n                margin-left: auto;\n                margin-right: auto\n            }\n\n            .-mb-1 {\n                margin-bottom: -.1rem\n            }\n\n            .-ml-8 {\n                margin-left: -.8rem\n            }\n\n            .-mr-1 {\n                margin-right: -.1rem\n            }\n\n            .-mr-8 {\n                margin-right: -.8rem\n            }\n\n            .-mt-2 {\n                margin-top: -.2rem\n            }\n\n            .-mt-4 {\n                margin-top: -.4rem\n            }\n\n            .last-child\\\\:mb-0 > :last-child, .mb-0 {\n                margin-bottom: 0rem\n            }\n\n            .mb-32 {\n                margin-bottom: 3.2rem\n            }\n\n            .ml-8 {\n                margin-left: .8rem\n            }\n\n            .ml-auto {\n                margin-left: auto\n            }\n\n            .mr-8 {\n                margin-right: .8rem\n            }\n\n            .mt-16 {\n                margin-top: 1.6rem\n            }\n\n            .mt-4 {\n                margin-top: .4rem\n            }\n\n            .group:not(:first-child) .group-not-first\\\\:-ml-2 {\n                margin-left: -.2rem\n            }\n\n            .last\\\\:mb-0:last-child {\n                margin-bottom: 0rem\n            }\n\n            .last\\\\:mr-0:last-child {\n                margin-right: 0rem\n            }\n\n            .m-\\\\[8px\\\\] {\n                margin: 8px\n            }\n\n            .p-0 {\n                padding: 0rem\n            }\n\n            .p-16 {\n                padding: 1.6rem\n            }\n\n            .p-4 {\n                padding: .4rem\n            }\n\n            .p-8 {\n                padding: .8rem\n            }\n\n            .px-0 {\n                padding-left: 0rem;\n                padding-right: 0rem\n            }\n\n            .px-1 {\n                padding-left: .1rem;\n                padding-right: .1rem\n            }\n\n            .px-12 {\n                padding-left: 1.2rem;\n                padding-right: 1.2rem\n            }\n\n            .px-14 {\n                padding-left: 1.4rem;\n                padding-right: 1.4rem\n            }\n\n            .px-16 {\n                padding-left: 1.6rem;\n                padding-right: 1.6rem\n            }\n\n            .px-8 {\n                padding-left: .8rem;\n                padding-right: .8rem\n            }\n\n            .py-0 {\n                padding-top: 0rem;\n                padding-bottom: 0rem\n            }\n\n            .py-1 {\n                padding-top: .1rem;\n                padding-bottom: .1rem\n            }\n\n            .py-10 {\n                padding-top: 1rem;\n                padding-bottom: 1rem\n            }\n\n            .py-12 {\n                padding-top: 1.2rem;\n                padding-bottom: 1.2rem\n            }\n\n            .py-2 {\n                padding-top: .2rem;\n                padding-bottom: .2rem\n            }\n\n            .py-4 {\n                padding-top: .4rem;\n                padding-bottom: .4rem\n            }\n\n            .py-6 {\n                padding-top: .6rem;\n                padding-bottom: .6rem\n            }\n\n            .py-8 {\n                padding-top: .8rem;\n                padding-bottom: .8rem\n            }\n\n            .pb-0 {\n                padding-bottom: 0rem\n            }\n\n            .pb-32 {\n                padding-bottom: 3.2rem\n            }\n\n            .pb-4 {\n                padding-bottom: .4rem\n            }\n\n            .pb-8 {\n                padding-bottom: .8rem\n            }\n\n            .pl-0 {\n                padding-left: 0rem\n            }\n\n            .pl-1 {\n                padding-left: .1rem\n            }\n\n            .pl-12 {\n                padding-left: 1.2rem\n            }\n\n            .pl-28 {\n                padding-left: 2.8rem\n            }\n\n            .pl-4 {\n                padding-left: .4rem\n            }\n\n            .pl-8 {\n                padding-left: .8rem\n            }\n\n            .pr-12 {\n                padding-right: 1.2rem\n            }\n\n            .pr-14 {\n                padding-right: 1.4rem\n            }\n\n            .pr-2 {\n                padding-right: .2rem\n            }\n\n            .pr-32 {\n                padding-right: 3.2rem\n            }\n\n            .pr-40 {\n                padding-right: 4rem\n            }\n\n            .pt-0 {\n                padding-top: 0rem\n            }\n\n            .pt-1 {\n                padding-top: .1rem\n            }\n\n            .pt-16 {\n                padding-top: 1.6rem\n            }\n\n            .pt-24 {\n                padding-top: 2.4rem\n            }\n\n            .pt-8 {\n                padding-top: .8rem\n            }\n\n            .group\\\\/step:last-child .group-last\\\\/step\\\\:last\\\\:pb-0:last-child {\n                padding-bottom: 0rem\n            }\n\n            .last\\\\:pb-1:last-child {\n                padding-bottom: .1rem\n            }\n\n            .last\\\\:pr-1:last-child {\n                padding-right: .1rem\n            }\n\n            .p-\\\\[8px\\\\] {\n                padding: 8px\n            }\n\n            .px-\\\\[15px\\\\] {\n                padding-left: 15px;\n                padding-right: 15px\n            }\n\n            .px-\\\\[8px\\\\] {\n                padding-left: 8px;\n                padding-right: 8px\n            }\n\n            .py-\\\\[11px\\\\] {\n                padding-top: 11px;\n                padding-bottom: 11px\n            }\n\n            .py-\\\\[5px\\\\] {\n                padding-top: 5px;\n                padding-bottom: 5px\n            }\n\n            .py-\\\\[7px\\\\] {\n                padding-top: 7px;\n                padding-bottom: 7px\n            }\n\n            .pl-\\\\[var\\\\(--w-prefix-width\\\\,_40px\\\\)\\\\] {\n                padding-left: var(--w-prefix-width, 40px)\n            }\n\n            .invisible {\n                visibility: hidden\n            }\n\n            .backface-hidden {\n                backface-visibility: hidden\n            }\n\n            .break-words {\n                overflow-wrap: break-word\n            }\n\n            .before\\\\:content-\\\\[\\\\\"\u00E2\u20AC\u201C\\\\\"\\\\]:before {\n                content: \"\u00E2\u20AC\u201C\"\n            }\n\n            .before\\\\:content-\\\\[\\\\\"\\\\\"\\\\]:before {\n                content: \"\"\n            }\n\n            .cursor-default {\n                cursor: default\n            }\n\n            .cursor-pointer {\n                cursor: pointer\n            }\n\n            .antialiased {\n                -webkit-font-smoothing: antialiased;\n                -moz-osx-font-smoothing: grayscale;\n                font-smoothing: grayscale\n            }\n\n            .font-bold {\n                font-weight: 700\n            }\n\n            .before\\\\:font-bold:before {\n                font-weight: 700\n            }\n\n            .font-normal {\n                font-weight: 400\n            }\n\n            .pointer-events-auto {\n                pointer-events: auto\n            }\n\n            .pointer-events-none {\n                pointer-events: none\n            }\n\n            .before\\\\:pointer-events-none:before {\n                pointer-events: none\n            }\n\n            .pb-safe-\\\\[32\\\\] {\n                padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px))\n            }\n\n            .sr-only {\n                position: absolute;\n                width: 1px;\n                height: 1px;\n                padding: 0;\n                margin: -1px;\n                overflow: hidden;\n                clip: rect(0, 0, 0, 0);\n                white-space: nowrap;\n                border-width: 0\n            }\n\n            .touch-pan-y {\n                touch-action: pan-y\n            }\n\n            .select-none {\n                -webkit-user-select: none;\n                user-select: none\n            }\n\n            .translate-x-20 {\n                --w-translate-x: 2rem;\n                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))\n            }\n\n            .translate-z-0 {\n                --w-translate-z: 0rem;\n                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))\n            }\n\n            .-rotate-180, .part-\\\\[w-icon-chevron-down-16-part\\\\]\\\\:-rotate-180::part(w-icon-chevron-down-16-part) {\n                --w-rotate-x: 0;\n                --w-rotate-y: 0;\n                --w-rotate-z: 0;\n                --w-rotate: -180deg;\n                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))\n            }\n\n            .part-\\\\[w-icon-chevron-up-16-part\\\\]\\\\:rotate-180::part(w-icon-chevron-up-16-part), .rotate-180 {\n                --w-rotate-x: 0;\n                --w-rotate-y: 0;\n                --w-rotate-z: 0;\n                --w-rotate: 180deg;\n                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))\n            }\n\n            .rotate-90 {\n                --w-rotate-x: 0;\n                --w-rotate-y: 0;\n                --w-rotate-z: 0;\n                --w-rotate: 90deg;\n                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))\n            }\n\n            .part-\\\\[w-icon-chevron-down-16-part\\\\]\\\\:transform::part(w-icon-chevron-down-16-part), .part-\\\\[w-icon-chevron-up-16-part\\\\]\\\\:transform::part(w-icon-chevron-up-16-part), .transform {\n                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))\n            }\n\n            .part-\\\\[w-icon-chevron-down-16-part\\\\]\\\\:transform-gpu::part(w-icon-chevron-down-16-part), .part-\\\\[w-icon-chevron-up-16-part\\\\]\\\\:transform-gpu::part(w-icon-chevron-up-16-part), .transform-gpu {\n                transform: translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))\n            }\n\n            .part-\\\\[w-icon-chevron-down-16-part\\\\]\\\\:transition-transform::part(w-icon-chevron-down-16-part), .part-\\\\[w-icon-chevron-up-16-part\\\\]\\\\:transition-transform::part(w-icon-chevron-up-16-part), .transition-transform {\n                transition-property: transform;\n                transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n                transition-duration: .15s\n            }\n\n            .transition-300 {\n                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n                transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n                transition-duration: .3s\n            }\n\n            .transition-all {\n                transition-property: all;\n                transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n                transition-duration: .15s\n            }\n\n            .transition-colors {\n                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n                transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n                transition-duration: .15s\n            }\n\n            .transition-shadow {\n                transition-property: box-shadow;\n                transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n                transition-duration: .15s\n            }\n\n            .before\\\\:transition-all:before {\n                transition-property: all;\n                transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n                transition-duration: .15s\n            }\n\n            .duration-300 {\n                transition-duration: .3s\n            }\n\n            .ease-in-out, .part-\\\\[w-icon-chevron-down-16-part\\\\]\\\\:ease-in-out::part(w-icon-chevron-down-16-part), .part-\\\\[w-icon-chevron-up-16-part\\\\]\\\\:ease-in-out::part(w-icon-chevron-up-16-part) {\n                transition-timing-function: cubic-bezier(.4, 0, .2, 1)\n            }\n\n            .text-m {\n                font-size: var(--w-font-size-m);\n                line-height: var(--w-line-height-m)\n            }\n\n            .text-s {\n                font-size: var(--w-font-size-s);\n                line-height: var(--w-line-height-s)\n            }\n\n            .text-xs {\n                font-size: var(--w-font-size-xs);\n                line-height: var(--w-line-height-xs)\n            }\n\n            .leading-m {\n                line-height: var(--w-line-height-m)\n            }\n\n            .before\\\\:leading-xs:before {\n                line-height: var(--w-line-height-xs)\n            }\n\n            .leading-\\\\[24\\\\] {\n                line-height: 2.4rem\n            }\n\n            @media (max-width: 479.9px) {\n                .lt-sm\\\\:rounded-b-0 {\n                    border-bottom-left-radius: 0;\n                    border-bottom-right-radius: 0\n                }\n            }\n            @media (min-width: 480px) {\n                .sm\\\\:border-b-0 {\n                    border-bottom-width: 0\n                }\n\n                .sm\\\\:rounded-8 {\n                    border-radius: 8px\n                }\n\n                .sm\\\\:rounded-b-8 {\n                    border-bottom-left-radius: 8px;\n                    border-bottom-right-radius: 8px\n                }\n\n                .sm\\\\:gap-16 {\n                    gap: 1.6rem\n                }\n\n                .sm\\\\:place-content-center {\n                    place-content: center\n                }\n\n                .sm\\\\:place-items-center {\n                    place-items: center\n                }\n\n                .sm\\\\:h-24 {\n                    height: 2.4rem\n                }\n\n                .sm\\\\:min-h-48 {\n                    min-height: 4.8rem\n                }\n\n                .sm\\\\:w-24 {\n                    width: 2.4rem\n                }\n\n                .sm\\\\:min-h-\\\\[32px\\\\] {\n                    min-height: 32px\n                }\n\n                .sm\\\\:min-h-\\\\[44px\\\\] {\n                    min-height: 44px\n                }\n\n                .sm\\\\:min-h-\\\\[45\\\\] {\n                    min-height: 4.5rem\n                }\n\n                .sm\\\\:min-w-\\\\[32px\\\\] {\n                    min-width: 32px\n                }\n\n                .sm\\\\:min-w-\\\\[44px\\\\] {\n                    min-width: 44px\n                }\n\n                .sm\\\\:mx-0 {\n                    margin-left: 0rem;\n                    margin-right: 0rem\n                }\n\n                .sm\\\\:mx-16 {\n                    margin-left: 1.6rem;\n                    margin-right: 1.6rem\n                }\n\n                .sm\\\\:-ml-12 {\n                    margin-left: -1.2rem\n                }\n\n                .sm\\\\:-mr-12 {\n                    margin-right: -1.2rem\n                }\n\n                .sm\\\\:-mt-8 {\n                    margin-top: -.8rem\n                }\n\n                .sm\\\\:px-32 {\n                    padding-left: 3.2rem;\n                    padding-right: 3.2rem\n                }\n\n                .sm\\\\:py-0 {\n                    padding-top: 0rem;\n                    padding-bottom: 0rem\n                }\n\n                .sm\\\\:pb-32 {\n                    padding-bottom: 3.2rem\n                }\n\n                .sm\\\\:pt-24 {\n                    padding-top: 2.4rem\n                }\n\n                .sm\\\\:pt-32 {\n                    padding-top: 3.2rem\n                }\n            }\n            @media (min-width: 768px) {\n                .md\\\\:block {\n                    display: block\n                }\n\n                .md\\\\:hidden {\n                    display: none\n                }\n            }\n        `;\n", "import { css } from 'lit';\n\nexport const styles = css`.w-button,\n.w-button--secondary {\n    /* Local scoped variables, given the default button (the secondary variant) as a default */\n    --_background: var(--background, var(--w-s-color-background));\n    --_background-hover: var(--background-hover, var(--w-s-color-background-hover));\n    --_background-active: var(--background-active, var(--w-s-color-background-active));\n    --_text-color: var(--color, var(--w-s-color-text-link));\n    --_border-width: var(--border-width, 2px);\n    --_border: var(--border, var(--w-s-color-border));\n    --_border-hover: var(--border-hover, var(--w-s-color-border-hover));\n    --_border-active: var(--border-active, var(--w-s-color-border-active));\n    --_border-radius: var(--w-button-radius-default, 8px);\n    --_font-size: var(--font-size, var(--w-font-size-m));\n    --_line-height: var(--line-height, var(--w-line-height-m));\n    --_font-weight: var(--font-weight, bold);\n    --_padding-x: var(--padding-x, 16px);\n    --_padding-y: var(--padding-y, 13px);\n\n    /* Base setup for all buttons */\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    cursor: pointer;\n    transition:\n            color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n            background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n            border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n            fill 150ms cubic-bezier(0.4, 0, 0.2, 1),\n            stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);\n\n    /* Hook the local vars up to the button stuff  */\n    background-color: var(--_background);\n    color: var(--_text-color);\n    border: var(--_border-width) solid var(--_border);\n    border-radius: var(--_border-radius);\n    padding: calc(var(--_padding-y) - var(--_border-width)) calc(var(--_padding-x) - var(--_border-width));\n    font-size: var(--_font-size);\n    line-height: var(--_line-height);\n    font-weight: var(--_font-weight);\n}\n\n    .w-button:hover {\n        background-color: var(--_background-hover);\n        border-color: var(--_border-hover);\n    }\n\n    .w-button:active {\n        background-color: var(--_background-active);\n        border-color: var(--_border-active);\n    }\n\n    .w-button:focus-visible {\n        outline: 2px solid var(--w-s-color-border-focus);\n        outline-offset: var(--w-outline-offset, 1px);\n    }\n\n    /* Variants config */\n    .w-button--primary {\n        --background: var(--w-color-button-primary-background);\n        --background-hover: var(--w-color-button-primary-background-hover);\n        --background-active: var(--w-color-button-primary-background-active);\n        --color: var(--w-s-color-text-inverted);\n        --border-width: 0px;\n    }\n    .w-button--negative {\n        --background: var(--w-s-color-background-negative);\n        --background-hover: var(--w-s-color-background-negative-hover);\n        --background-active: var(--w-s-color-background-negative-active);\n        --color: var(--w-s-color-text-inverted);\n        --border-width: 0px;\n    }\n    .w-button--negative-quiet {\n        --background: transparent;\n        --background-hover: var(--w-s-color-background-negative-subtle-hover);\n        --background-active: var(--w-s-color-background-negative-subtle-active);\n        --color: var(--w-s-color-text-negative);\n        --border-width: 0px;\n    }\n    .w-button--utility {\n        --background: var(--w-s-color-background);\n        --background-hover: var(--w-s-color-background-hover);\n        --background-active: var(--w-s-color-background-active);\n        --color: var(--w-s-color-text);\n        --border-radius: var(--w-button-radius-utility, 4px);\n        --border-width: 1px;\n    }\n    .w-button--utility-quiet {\n        --background: transparent;\n        --color: var(--w-s-color-text);\n        --border-width: 0px;\n    }\n    .w-button--quiet {\n        --background: transparent;\n        --border-width: 0px;\n    }\n    .w-button--overlay {\n        --background: var(--w-color-background);\n        --background-hover: var(--w-color-background-hover);\n        --background-active: var(--w-color-background-active);\n        --color: var(--w-s-color-text);\n        --border-radius: 9999px;\n        --border-width: 0px;\n    }\n    .w-button--overlay-quiet {\n        --background: transparent;\n        --background-hover: var(--w-s-color-background-hover);\n        --background-active: var(--w-s-color-background-active);\n        --color: var(--w-s-color-text);\n        --border-radius: 9999px;\n        --border-width: 0px;\n    }\n    .w-button--overlay-inverted {\n        --background: var(--w-s-color-background-inverted);\n        --background-hover: var(--w-s-color-background-inverted-hover);\n        --background-active: var(--w-s-color-background-inverted-active);\n        --color: var(--w-s-color-text-inverted);\n        --border-radius: 9999px;\n        --border-width: 0px;\n    }\n    .w-button--overlay-inverted-quiet {\n        --background: transparent;\n        --background-hover: var(--w-s-color-background-inverted-hover);\n        --background-active: var(--w-s-color-background-inverted-active);\n        --color: var(--w-s-color-text-inverted);\n        --border-radius: 9999px;\n        --border-width: 0px;\n    }\n\n    .w-button--link {\n        --background: none;\n        --background-hover: none;\n        --background-active: none;\n        --border-width: 0;\n        --font-weight: normal;\n        display: inline;\n    }\n    .w-button--overlay {\n        --background: var(--w-color-background);\n        --background-hover: var(--w-color-background-hover);\n        --background-active: var(--w-color-background-active);\n        --color: var(--w-s-color-text);\n        --border-radius: 9999px;\n        --border-width: 0px;\n    }\n    .w-button--overlay-quiet {\n        --background: transparent;\n        --background-hover: var(--w-s-color-background-hover);\n        --background-active: var(--w-s-color-background-active);\n        --color: var(--w-s-color-text);\n        --border-radius: 9999px;\n        --border-width: 0px;\n    }\n    .w-button--overlay-inverted {\n        --background: var(--w-s-color-background-inverted);\n        --background-hover: var(--w-s-color-background-inverted-hover);\n        --background-active: var(--w-s-color-background-inverted-active);\n        --color: var(--w-s-color-text-inverted);\n        --border-radius: 9999px;\n        --border-width: 0px;\n    }\n    .w-button--overlay-inverted-quiet {\n        --background: transparent;\n        --background-hover: var(--w-s-color-background-inverted-hover);\n        --background-active: var(--w-s-color-background-inverted-active);\n        --color: var(--w-s-color-text-inverted);\n        --border-radius: 9999px;\n        --border-width: 0px;\n    }\n\n    /* States config,  selects --loading as well since loading is always supposed to be disabled */\n    .w-button:disabled,\n    .w-button--disabled,\n    .w-button--loading {\n        --background: var(--w-s-color-background-disabled);\n        --background-hover: var(--w-s-color-background-disabled);\n        --background-active: var(--w-s-color-background-disabled);\n        --color: var(--w-s-color-text-inverted);\n        --border-width: 0px;\n        pointer-events: none;\n    }\n\n    .w-button--link:hover {\n        text-decoration: underline;\n    }\n\n    /* Sizes config */\n    .w-button--small {\n        --padding-x: 12px;\n        --padding-y: 8px;\n        --font-size: var(--w-font-size-xs);\n        --line-height: var(--w-line-height-xs);\n    }\n\n    /* Width config */\n    .w-button--full-width {\n        width: 100%;\n        max-width: 100%;\n    }\n\n    .w-button--has-icon-only {\n        width: auto;\n        max-width: none;\n        --_padding-x: var(--_padding-y);\n        aspect-ratio: 1 / 1;\n    }\n\n    a.w-button {\n        text-decoration: none !important;\n    }\n\n    /* Copy of loading animation from warp  */\n    .w-button--loading {\n        background-image: linear-gradient(\n                135deg,\n                rgba(0, 0, 0, 0.05) 25%,\n                transparent 25%,\n                transparent 50%,\n                rgba(0, 0, 0, 0.05) 50%,\n                rgba(0, 0, 0, 0.05) 75%,\n                transparent 75%,\n                transparent\n        );\n        background-size: 30px 30px;\n        animation: animate-inprogress 3s linear infinite;\n    }\n\n    @keyframes animate-inprogress {\n        0% {\n            background-position: 0 0;\n        }\n        100% {\n            background-position: 60px 0;\n        }\n    }`;\n"],
+  "mappings": "wMAAA,OAAS,QAAAA,EAAM,cAAAC,MAAkB,MACjC,OAAS,YAAAC,MAAgB,oBACzB,OAAS,YAAAC,MAAgB,8BCFzB,OAAS,OAAAC,MAAW,MAEb,IAAMC,EAAQD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkRRE,EAAaF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;UCpR1B,OAAS,OAAAG,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;OFmBtB,IAAME,EAAW,CACf,UACA,YACA,WACA,gBACA,UACA,eACA,QACA,OACA,UACA,kBACA,eACA,sBACF,EAOMC,EAAN,cAAuBC,CAAW,CAAlC,kCAUE,aAAyB,YAsBzB,mBAAoB,CAGlB,GAFA,MAAM,kBAAkB,EAEpB,CAACF,EAAS,SAAS,KAAK,OAAO,EACjC,MAAM,IAAI,MAAM;AAAA,EAAwEA,EAAS,KAAK,IAAI,CAAC,GAAG,CAElH,CAEA,cAAe,CACT,KAAK,WACP,WAAW,IAAM,KAAK,MAAM,EAAG,CAAC,CAEpC,CAEA,QAAS,CACP,IAAMG,EAAU,CAEd,WAAY,KAAK,UAAY,OAC7B,oBAAqB,KAAK,UAAY,UACtC,sBAAuB,KAAK,UAAY,YACxC,qBAAsB,KAAK,UAAY,WACvC,oBAAqB,KAAK,UAAY,UACtC,kBAAmB,KAAK,UAAY,QACpC,2BAA4B,KAAK,UAAY,gBAC7C,0BAA2B,KAAK,UAAY,eAC5C,oBAAqB,KAAK,UAAY,UACtC,6BAA8B,KAAK,UAAY,kBAC/C,0BAA2B,KAAK,UAAY,eAC5C,mCAAoC,KAAK,UAAY,uBACrD,kBAAmB,KAAK,MACxB,uBAAwB,KAAK,UAC7B,qBAAsB,KAAK,QAC7B,EACA,OAAOC;AAAA,aACE,KAAK,IAAI;AAAA,eACP,KAAK,MAAM;AAAA,YACd,KAAK,SAAW,SAAW,KAAK,KAAO,WAAa,MAAS;AAAA,cAC3DC,EAASF,CAAO,CAAC;AAAA;AAAA,SAG7B,CACF,EAzEMF,EACG,kBAAoB,CACzB,GAAGC,EAAW,kBACd,eAAgB,EAClB,EAJID,EA8BG,OAAS,CAACK,EAAOC,CAAM,EAvB9BC,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GANtCR,EAOJ,yBAGAO,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GATvBR,EAUJ,uBAGAO,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAZtCR,EAaJ,qBAGAO,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GAfvBR,EAgBJ,oBAGAO,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAlBtCR,EAmBJ,wBAGAO,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GArBvBR,EAsBJ,sBAGAO,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GAxBvBR,EAyBJ,mBAGAO,EAAA,CADCC,EAAS,CAAE,UAAW,aAAc,KAAM,QAAS,QAAS,EAAK,CAAC,GA3B/DR,EA4BJ,yBA+CG,eAAe,IAAI,QAAQ,GAC9B,eAAe,OAAO,SAAUA,CAAQ",
+  "names": ["html", "LitElement", "property", "classMap", "css", "reset", "components", "css", "styles", "variants", "WarpLink", "LitElement", "classes", "html", "classMap", "reset", "styles", "__decorateClass", "property"]
+}

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

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

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import type { WarpLink } from './index.js';
-import './index.js';
+import type { WarpLink } from './link.js';
+import './link.js';
 declare const args: Partial<WarpLink> & {
     [key: string]: any;
 };

package/dist/packages/link/link.stories.js

@@ -2,7 +2,7 @@ import { spread } from '@open-wc/lit-helpers';
 import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
 import { html } from 'lit';
 import { prespread } from '../../.storybook/utilities.js';
-import './index.js';
+import './link.js';
 const { events, args, argTypes } = getStorybookHelpers('w-link');
 const meta = {
     title: 'Buttons/Link',

package/dist/packages/link/link.test.d.ts

@@ -1 +1 @@
-import './index.js';
+import './link.js';

package/dist/packages/link/link.test.js

@@ -1,7 +1,7 @@
 import { page } from '@vitest/browser/context';
 import { html } from 'lit';
 import { expect, test } from 'vitest';
-import './index.js';
+import './link.js';
 test('renders a link with role button ', async () => {
     const component = html `<w-link type="button" href="link yo">This is a link looking like a button</w-link>`;
     const screen = await page.render(component);

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

@@ -1,2 +1,2 @@
-import { WarpLink } from './index.js';
+import { WarpLink } from './link.js';
 export declare const Link: import("@lit/react").ReactWebComponent<WarpLink, {}>;

package/dist/packages/link/react.js

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
 import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {

package/dist/packages/link/styles.js

@@ -10,7 +10,7 @@ export const styles = css `.w-button,
     --_border: var(--border, var(--w-s-color-border));
     --_border-hover: var(--border-hover, var(--w-s-color-border-hover));
     --_border-active: var(--border-active, var(--w-s-color-border-active));
-    --_border-radius: var(--border-radius, 8px);
+    --_border-radius: var(--w-button-radius-default, 8px);
     --_font-size: var(--font-size, var(--w-font-size-m));
     --_line-height: var(--line-height, var(--w-line-height-m));
     --_font-weight: var(--font-weight, bold);
@@ -83,7 +83,7 @@ export const styles = css `.w-button,
         --background-hover: var(--w-s-color-background-hover);
         --background-active: var(--w-s-color-background-active);
         --color: var(--w-s-color-text);
-        --border-radius: 4px;
+        --border-radius: var(--w-button-radius-utility, 4px);
         --border-width: 1px;
     }
     .w-button--utility-quiet {