@ds-mo/ui 9.0.0 → 9.2.0

package/dist/mcp-data/registry/field.json

@@ -0,0 +1,222 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "field",
+  "title": "Field",
+  "description": "Accessible form-field composition that gives one Input or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/field",
+    "source": "src/wc/components/Field/Field.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Accessible form-field composition that gives one Input or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
+      "useWhen": [
+        "An Input, Select, or SelectMulti needs a persistent visible label in a form.",
+        "Help text or an error message must be programmatically associated with one control.",
+        "A form layout needs one consistent label-control-message rhythm."
+      ],
+      "avoidWhen": [
+        "The component already owns its visible label and complete selection semantics, such as Checkbox, Radio, or Switch.",
+        "Several controls belong to one question; use a semantic fieldset and legend instead.",
+        "Text describes a region or group rather than one form control."
+      ],
+      "alternatives": [
+        {
+          "when": "Several related controls answer one question.",
+          "component": "component:ds-text",
+          "reason": "Use native fieldset and legend semantics, then compose Text only for supporting content."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-input",
+        "component:ds-select",
+        "component:ds-select-multi",
+        "component:ds-text"
+      ],
+      "accessibility": [
+        "Slot exactly one form control. Field assigns its stable control ID and connects the visible label automatically.",
+        "The visible description or error ID is merged with any authored aria-describedby references; a rendered error replaces the description.",
+        "The error prop forwards aria-invalid and supported design-system control error styling; put visible error text on Field, not again on the child control.",
+        "Clicking the label focuses the slotted design-system control without opening a Select popup.",
+        "Do not use placeholder text as the only label. Keep label text concise and put format or consequence guidance in description."
+      ],
+      "states": [
+        "Field exposes data-focused, data-filled, data-dirty, data-touched, data-invalid, data-disabled, and data-required hooks while the slotted control remains the source of value and interaction behavior.",
+        "A rendered error replaces the description; preserve essential guidance in the error message so users retain what they need to correct the field.",
+        "Field owns validation presentation but not validation timing; the form decides when to set error and errorMessage.",
+        "The label uses primary body-small emphasis, description uses secondary body-small text, and error uses negative body-small text."
+      ],
+      "responsiveBehavior": [
+        "Field fills the width supplied by its parent and makes the slotted control fill that field width.",
+        "The form layout owns column count, wrapping, and responsive placement; Field keeps the vertical label-control-message composition intact."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Set fieldId only when another element must reference a predictable control ID; otherwise use the generated association.",
+          "Assign child component values and option arrays through their normal JavaScript properties."
+        ],
+        "react": [
+          "Compose one DsInput, DsSelect, or DsSelectMulti child and control validation timing in the form owner."
+        ],
+        "angular": [
+          "Compose the generated Field adapter around the control adapter and its matching Angular value accessor."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Field/Field.stories.ts"
+        },
+        {
+          "label": "Cross-browser form and accessibility coverage",
+          "path": "tests/e2e/forms.spec.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "description": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "description",
+          "required": false,
+          "mutable": false,
+          "description": "Optional guidance associated with the slotted control while no visible error is shown."
+        },
+        "error": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "error",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Invalid visual and accessible state forwarded to supported ds controls."
+        },
+        "errorMessage": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "error-message",
+          "required": false,
+          "mutable": false,
+          "description": "Visible error associated with the slotted control while error is true."
+        },
+        "fieldId": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "field-id",
+          "required": false,
+          "mutable": false,
+          "description": "Explicit ID for the slotted control; generated when omitted."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "required": true,
+          "mutable": false,
+          "description": "Persistent visible label for the single slotted control."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "description": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "description",
+        "required": false,
+        "mutable": false,
+        "description": "Optional guidance associated with the slotted control while no visible error is shown."
+      },
+      "error": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "error",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Invalid visual and accessible state forwarded to supported ds controls."
+      },
+      "errorMessage": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "error-message",
+        "required": false,
+        "mutable": false,
+        "description": "Visible error associated with the slotted control while error is true."
+      },
+      "fieldId": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "field-id",
+        "required": false,
+        "mutable": false,
+        "description": "Explicit ID for the slotted control; generated when omitted."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "required": true,
+        "mutable": false,
+        "description": "Persistent visible label for the single slotted control."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-field",
+      "react": "DsField",
+      "angular": "DsField"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-field.js';",
+        "example": "<ds-field></ds-field>"
+      },
+      "react": {
+        "import": "import { DsField } from '@ds-mo/ui/react';",
+        "example": "<DsField />"
+      },
+      "angular": {
+        "import": "import { DsField } from '@ds-mo/ui/angular/ds-field';",
+        "example": "<ds-field></ds-field>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Field/Field.css",
+      "content": ":host {\n  display: block;\n}\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n\n.field__control {\n  display: flex;\n  min-width: 0;\n}\n\n.field__control > * {\n  width: 100%;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Field/Field.tsx",
+      "content": "import { Component, Element, Prop, State, Watch, h, Host } from '@stencil/core';\n\ninterface FieldControl extends HTMLElement {\n  value?: string | string[];\n  inputId?: string;\n  error?: boolean;\n  disabled?: boolean;\n  isInactive?: boolean;\n  required?: boolean;\n  setFocus?: () => Promise<void> | void;\n}\n\ninterface AuthoredAria {\n  labelledby: string[];\n  describedby: string[];\n}\n\nlet fieldCounter = 0;\n\nconst tokens = (value: string | null | undefined): string[] =>\n  value?.split(/\\s+/).filter(Boolean) ?? [];\n\nconst uniqueTokens = (...groups: string[][]): string[] => [...new Set(groups.flat())];\n\n@Component({\n  tag: 'ds-field',\n  styleUrl: 'Field.css',\n  scoped: true,\n})\nexport class Field {\n  @Element() el!: HTMLElement;\n\n  /** Persistent visible label for the single slotted control. */\n  @Prop() label!: string;\n  /** Explicit ID for the slotted control; generated when omitted. */\n  @Prop() fieldId: string | undefined;\n  /** Optional guidance associated with the slotted control while no visible error is shown. */\n  @Prop() description: string | undefined;\n  /** Invalid visual and accessible state forwarded to supported ds controls. */\n  @Prop() error: boolean = false;\n  /** Visible error associated with the slotted control while error is true. */\n  @Prop() errorMessage: string | undefined;\n\n  @State() private focused = false;\n  @State() private filled = false;\n  @State() private dirty = false;\n  @State() private touched = false;\n  @State() private controlDisabled = false;\n  @State() private controlRequired = false;\n\n  private readonly generatedId = `ds-field-${++fieldCounter}`;\n  private controlContainer?: HTMLDivElement;\n  private control?: FieldControl;\n  private initialValue = '';\n  private authoredAria = new WeakMap<FieldControl, AuthoredAria>();\n\n  componentDidLoad() {\n    this.syncControl();\n    requestAnimationFrame(() => this.syncControl());\n  }\n\n  componentDidRender() {\n    this.syncControl();\n  }\n\n  @Watch('fieldId')\n  @Watch('description')\n  @Watch('error')\n  @Watch('errorMessage')\n  onFieldContractChange() {\n    this.syncControl();\n  }\n\n  private get controlId(): string {\n    return this.fieldId || this.generatedId;\n  }\n\n  private get labelId(): string {\n    return `${this.controlId}-label`;\n  }\n\n  private get descriptionId(): string {\n    return `${this.controlId}-description`;\n  }\n\n  private get errorId(): string {\n    return `${this.controlId}-error`;\n  }\n\n  private get renderedDescription(): boolean {\n    return Boolean(this.description) && !this.renderedError;\n  }\n\n  private get renderedError(): boolean {\n    return this.error && Boolean(this.errorMessage);\n  }\n\n  private readValue(control: FieldControl): string {\n    const value = control.value;\n    return Array.isArray(value) ? value.join('\\u001f') : String(value ?? '');\n  }\n\n  private updateControlAttribute(control: FieldControl, name: string, value: string | undefined) {\n    if (value === undefined) {\n      if (control.hasAttribute(name)) control.removeAttribute(name);\n      return;\n    }\n    if (control.getAttribute(name) !== value) control.setAttribute(name, value);\n  }\n\n  private findControl(): FieldControl | undefined {\n    return this.controlContainer?.querySelector<FieldControl>(':scope > :not(slot)') ?? undefined;\n  }\n\n  private syncControl = () => {\n    const control = this.findControl();\n    if (!control) return;\n\n    if (control !== this.control) {\n      this.control = control;\n      this.initialValue = this.readValue(control);\n      this.authoredAria.set(control, {\n        labelledby: tokens(control.getAttribute('aria-labelledby')),\n        describedby: tokens(control.getAttribute('aria-describedby')),\n      });\n    }\n\n    const isDsControl = control.tagName.startsWith('DS-');\n    if (isDsControl && 'inputId' in control) control.inputId = this.controlId;\n    else this.updateControlAttribute(control, 'id', this.controlId);\n\n    const authored = this.authoredAria.get(control) ?? { labelledby: [], describedby: [] };\n    const labelledby = uniqueTokens(authored.labelledby, [this.labelId]).join(' ');\n    const describedby = uniqueTokens(\n      authored.describedby,\n      this.renderedDescription ? [this.descriptionId] : [],\n      this.renderedError ? [this.errorId] : [],\n    ).join(' ');\n\n    this.updateControlAttribute(control, 'aria-labelledby', labelledby);\n    this.updateControlAttribute(control, 'aria-describedby', describedby || undefined);\n    this.updateControlAttribute(control, 'aria-invalid', this.error ? 'true' : undefined);\n\n    if (isDsControl && 'error' in control && control.error !== this.error) control.error = this.error;\n\n    const value = this.readValue(control);\n    this.filled = value.length > 0;\n    this.dirty = value !== this.initialValue;\n    this.controlDisabled = Boolean(control.disabled || control.isInactive || control.hasAttribute('disabled'));\n    this.controlRequired = Boolean(control.required || control.hasAttribute('required'));\n  };\n\n  private handleLabelClick = (event: MouseEvent) => {\n    if (!this.control?.tagName.startsWith('DS-')) return;\n    event.preventDefault();\n    this.control.setFocus?.();\n  };\n\n  private handleFocusIn = () => {\n    this.focused = true;\n  };\n\n  private handleFocusOut = (event: FocusEvent) => {\n    if (event.relatedTarget instanceof Node && this.el.contains(event.relatedTarget)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleValueChange = () => {\n    this.syncControl();\n  };\n\n  render() {\n    return (\n      <Host\n        data-focused={this.focused ? '' : undefined}\n        data-filled={this.filled ? '' : undefined}\n        data-dirty={this.dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-disabled={this.controlDisabled ? '' : undefined}\n        data-required={this.controlRequired ? '' : undefined}\n        onFocusin={this.handleFocusIn}\n        onFocusout={this.handleFocusOut}\n        onInput={this.handleValueChange}\n        onChange={this.handleValueChange}\n        onDsChange={this.handleValueChange}\n      >\n        <div class=\"field\">\n          <ds-text\n            class=\"field__label\"\n            as=\"label\"\n            variant=\"text-body-small\"\n            color=\"primary\"\n            emphasis\n            for={this.controlId}\n            textId={this.labelId}\n            onClick={this.handleLabelClick}\n          >\n            {this.label}\n          </ds-text>\n          <div class=\"field__control\" ref={el => (this.controlContainer = el)}>\n            <slot onSlotchange={this.syncControl} />\n          </div>\n          {this.renderedDescription && (\n            <ds-text\n              class=\"field__description\"\n              as=\"div\"\n              variant=\"text-body-small\"\n              color=\"secondary\"\n              textId={this.descriptionId}\n            >\n              {this.description}\n            </ds-text>\n          )}\n          {this.renderedError && (\n            <ds-text\n              class=\"field__error\"\n              as=\"div\"\n              variant=\"text-body-small\"\n              color=\"negative\"\n              textId={this.errorId}\n              role=\"alert\"\n            >\n              {this.errorMessage}\n            </ds-text>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/icon.json

@@ -0,0 +1,242 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icon",
+  "title": "Icon",
+  "description": "Secure, lazily loaded renderer for canonical IcoMo system and flag glyphs, decorative by default with optional graphic semantics.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/icon",
+    "source": "src/wc/components/Icon/Icon.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Secure, lazily loaded renderer for canonical IcoMo system and flag glyphs, decorative by default with optional graphic semantics.",
+      "useWhen": [
+        "An approved IcoMo system glyph supplements visible text or control chrome.",
+        "A canonical flag glyph communicates a country or region with adjacent text or an explicit localized label.",
+        "A standalone non-interactive symbol conveys meaning that is unavailable from nearby text."
+      ],
+      "avoidWhen": [
+        "The glyph itself must be clickable or keyboard interactive; use an appropriate button or link and compose Icon inside it.",
+        "The visual is an illustration, logo, chart, or arbitrary SVG artwork rather than a canonical IcoMo glyph.",
+        "An alias, guessed name, or case-insensitive lookup would be required; runtime lookup uses exact canonical export names.",
+        "A fallback glyph would be required when loading fails; Icon intentionally preserves an empty fixed-size box."
+      ],
+      "alternatives": [
+        {
+          "when": "The icon initiates an action or persistent toggle.",
+          "component": "component:ds-button-unfilled",
+          "reason": "ButtonUnfilled owns interaction, focus, naming, and toggle semantics."
+        },
+        {
+          "when": "The visual communicates indeterminate loading progress.",
+          "component": "component:ds-loader",
+          "reason": "Loader owns progress status and motion behavior."
+        },
+        {
+          "when": "The compact visual is an unread count or notification dot.",
+          "component": "component:ds-badge",
+          "reason": "Badge owns supplemental notification semantics."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-button-filled",
+        "component:ds-button-unfilled",
+        "component:ds-menu",
+        "component:ds-panel-nav"
+      ],
+      "accessibility": [
+        "Icons are decorative by default and remain hidden from assistive technology when visible text or an owning control already communicates the meaning.",
+        "The owning button, link, or composite control provides the accessible name; do not repeat that name on its nested Icon.",
+        "Provide an explicit label only when the non-interactive icon itself communicates otherwise unavailable meaning.",
+        "Tertiary and quaternary foregrounds are restricted to icons inside genuinely inactive or disabled UI, or to purely decorative icons; quaternary is the fainter tier, and informative icons and meaningful status graphics retain sufficient rendered contrast even when aria-hidden.",
+        "Informative flags require an explicit localized country or region label; never derive accessible text from the export name.",
+        "Icon never receives focus or owns interaction."
+      ],
+      "states": [
+        "Omitted color inherits currentColor from the owning context. Explicit semantic aliases and CSS-variable references are available when the icon has an independent color role.",
+        "Prefer the owning control's isInactive or native disabled state over manually selecting tertiary or quaternary so visual treatment and inactive semantics remain synchronized.",
+        "Built-in glyph lookup accepts exact canonical IcoMo export names only. Names beginning with Flag select the flag catalog automatically.",
+        "A cache miss lazy-loads into a fixed-size box without layout shift. Unknown names, failed loads, and rejected markup leave that box empty.",
+        "Critical first-paint glyphs may be pre-registered before rendering; all resolved glyphs share a global cache.",
+        "Every SVG is validated at the render boundary and injected as parsed DOM nodes so app-registered markup cannot bypass executable-content or external-reference checks."
+      ],
+      "responsiveBehavior": [
+        "The owning component or layout chooses icon size and any responsive changes.",
+        "Icon does not scale from viewport width or change glyphs automatically."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Import each canonical glyph as an SVG string and call registerIcons before first render when synchronous critical-icon paint is required."
+        ],
+        "react": [
+          "Keep nested control icons decorative and place the accessible name on the owning React control."
+        ],
+        "angular": [
+          "Keep nested control icons decorative and place the accessible name on the owning Angular control."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Icon/Icon.stories.ts"
+        },
+        {
+          "label": "Preload API guidance",
+          "path": "src/wc/components/Icon/icon-cache.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "color": {
+          "type": "IconColor",
+          "resolvedType": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})`",
+          "attribute": "color",
+          "default": "'inherit'",
+          "required": false,
+          "mutable": false,
+          "description": "Semantic foreground color token, or a raw CSS var reference. `tertiary`\nand the still-fainter `quaternary` are restricted to icons inside genuinely\ninactive/disabled UI or to purely decorative icons; informative icons must\nretain sufficient contrast."
+        },
+        "label": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "label",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible label. Sets `role=\"img\"` and `aria-label`. Omit for decorative icons."
+        },
+        "name": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "name",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Exact canonical IcoMo export name, including the `Flag` prefix for flags."
+        },
+        "size": {
+          "type": "IconSize",
+          "resolvedType": "\"2xl\" | \"3xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+          "attribute": "size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "color": {
+        "type": "IconColor",
+        "resolvedType": "\"ai\" | \"bold-ai\" | \"bold-brand\" | \"bold-caution\" | \"bold-negative\" | \"bold-neutral\" | \"bold-positive\" | \"bold-warning\" | \"brand\" | \"caution\" | \"faint-ai\" | \"faint-brand\" | \"faint-caution\" | \"faint-negative\" | \"faint-neutral\" | \"faint-positive\" | \"faint-warning\" | \"guide\" | \"inherit\" | \"medium-ai\" | \"medium-brand\" | \"medium-caution\" | \"medium-negative\" | \"medium-neutral\" | \"medium-positive\" | \"medium-warning\" | \"negative\" | \"neutral\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"strong-ai\" | \"strong-brand\" | \"strong-caution\" | \"strong-negative\" | \"strong-neutral\" | \"strong-positive\" | \"strong-warning\" | \"tertiary\" | \"warning\" | `var(--${string})`",
+        "attribute": "color",
+        "default": "'inherit'",
+        "required": false,
+        "mutable": false,
+        "description": "Semantic foreground color token, or a raw CSS var reference. `tertiary`\nand the still-fainter `quaternary` are restricted to icons inside genuinely\ninactive/disabled UI or to purely decorative icons; informative icons must\nretain sufficient contrast."
+      },
+      "label": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "label",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible label. Sets `role=\"img\"` and `aria-label`. Omit for decorative icons."
+      },
+      "name": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "name",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Exact canonical IcoMo export name, including the `Flag` prefix for flags."
+      },
+      "size": {
+        "type": "IconSize",
+        "resolvedType": "\"2xl\" | \"3xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+        "attribute": "size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-icon",
+      "react": "DsIcon",
+      "angular": "DsIcon"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-icon.js';",
+        "example": "<ds-icon></ds-icon>"
+      },
+      "react": {
+        "import": "import { DsIcon } from '@ds-mo/ui/react';",
+        "example": "<DsIcon />"
+      },
+      "angular": {
+        "import": "import { DsIcon } from '@ds-mo/ui/angular/ds-icon';",
+        "example": "<ds-icon></ds-icon>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens",
+    "@ds-mo/icons"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "src/wc/components/Icon/Icon.css",
+      "content": "/* ── Base icon ───────────────────────────────────────────────────────────── */\n\n.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 0;\n  color: inherit;\n  /* Explicit size so the SVG (width/height: 100% via JS) has a defined container */\n  width: var(--_icon-sz, var(--dimension-iconography-md));\n  height: var(--_icon-sz, var(--dimension-iconography-md));\n}\n\n.icon__svg {\n  display: contents;\n  line-height: 0;\n}\n\n/* SVG width/height are set via inline style in updateSvg() because Stencil's\n   scoped CSS cannot reach innerHTML-injected elements (they lack the sc-* class). */\n\n/* ── Sizes ───────────────────────────────────────────────────────────────── */\n\n.icon--size-xs  { --_icon-sz: var(--dimension-iconography-xs);  }\n.icon--size-sm  { --_icon-sz: var(--dimension-iconography-sm);  }\n.icon--size-md  { --_icon-sz: var(--dimension-iconography-md);  }\n.icon--size-lg  { --_icon-sz: var(--dimension-iconography-lg);  }\n.icon--size-xl  { --_icon-sz: var(--dimension-iconography-xl);  }\n.icon--size-2xl { --_icon-sz: var(--dimension-iconography-2xl); }\n.icon--size-3xl { --_icon-sz: var(--dimension-iconography-3xl); }\n\n/* ── Colors — hierarchy ──────────────────────────────────────────────────── */\n\n.icon--color-primary    { color: var(--color-foreground-primary);    }\n.icon--color-secondary  { color: var(--color-foreground-secondary);  }\n.icon--color-tertiary   { color: var(--color-foreground-tertiary);   }\n.icon--color-quaternary { color: var(--color-foreground-quaternary); }\n.icon--color-inherit    { color: inherit; }\n\n/* ── Colors — intent (bold contrast default) ─────────────────────────────── */\n\n.icon--color-brand    { color: var(--color-foreground-bold-brand);    }\n.icon--color-negative { color: var(--color-foreground-bold-negative); }\n.icon--color-positive { color: var(--color-foreground-bold-positive); }\n.icon--color-warning  { color: var(--color-foreground-bold-warning);  }\n.icon--color-caution  { color: var(--color-foreground-bold-caution);  }\n.icon--color-ai       { color: var(--color-foreground-bold-ai);       }\n.icon--color-guide    { color: var(--color-foreground-bold-guide);    }\n.icon--color-neutral  { color: var(--color-foreground-bold-neutral);  }\n\n/* ── Colors — intent faint ───────────────────────────────────────────────── */\n\n.icon--color-faint-brand    { color: var(--color-foreground-faint-brand);    }\n.icon--color-faint-negative { color: var(--color-foreground-faint-negative); }\n.icon--color-faint-positive { color: var(--color-foreground-faint-positive); }\n.icon--color-faint-warning  { color: var(--color-foreground-faint-warning);  }\n.icon--color-faint-caution  { color: var(--color-foreground-faint-caution);  }\n.icon--color-faint-ai       { color: var(--color-foreground-faint-ai);       }\n.icon--color-faint-neutral  { color: var(--color-foreground-faint-neutral);  }\n\n/* ── Colors — intent medium ─────────────────────────────────────────────── */\n\n.icon--color-medium-brand    { color: var(--color-foreground-medium-brand);    }\n.icon--color-medium-negative { color: var(--color-foreground-medium-negative); }\n.icon--color-medium-positive { color: var(--color-foreground-medium-positive); }\n.icon--color-medium-warning  { color: var(--color-foreground-medium-warning);  }\n.icon--color-medium-caution  { color: var(--color-foreground-medium-caution);  }\n.icon--color-medium-ai       { color: var(--color-foreground-medium-ai);       }\n.icon--color-medium-neutral  { color: var(--color-foreground-medium-neutral);  }\n\n/* ── Colors — intent bold (explicit) ────────────────────────────────────── */\n\n.icon--color-bold-brand    { color: var(--color-foreground-bold-brand);    }\n.icon--color-bold-negative { color: var(--color-foreground-bold-negative); }\n.icon--color-bold-positive { color: var(--color-foreground-bold-positive); }\n.icon--color-bold-warning  { color: var(--color-foreground-bold-warning);  }\n.icon--color-bold-caution  { color: var(--color-foreground-bold-caution);  }\n.icon--color-bold-ai       { color: var(--color-foreground-bold-ai);       }\n.icon--color-bold-neutral  { color: var(--color-foreground-bold-neutral);  }\n\n/* ── Colors — intent strong ──────────────────────────────────────────────── */\n\n.icon--color-strong-brand    { color: var(--color-foreground-strong-brand);    }\n.icon--color-strong-negative { color: var(--color-foreground-strong-negative); }\n.icon--color-strong-positive { color: var(--color-foreground-strong-positive); }\n.icon--color-strong-warning  { color: var(--color-foreground-strong-warning);  }\n.icon--color-strong-caution  { color: var(--color-foreground-strong-caution);  }\n.icon--color-strong-ai       { color: var(--color-foreground-strong-ai);       }\n.icon--color-strong-neutral  { color: var(--color-foreground-strong-neutral);  }\n\n/* ── Colors — contextual ────────────────────────────────────────────────── */\n\n.icon--color-on-strong { color: var(--color-foreground-on-strong-background-primary); }\n.icon--color-on-bold   { color: var(--color-foreground-on-bold-background-primary);   }\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Icon/Icon.tsx",
+      "content": "import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport { flagIconLoaders } from './flag-icon-catalog';\nimport { systemIconLoaders } from './system-icon-catalog';\nimport { iconCache, iconCacheKey } from './icon-cache';\nimport { parseIconSvg } from './icon-svg';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\nexport type IconColorToken =\n  // Hierarchy\n  | 'primary' | 'secondary' | 'tertiary' | 'quaternary'\n  // Intent — bold contrast (default)\n  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'guide' | 'neutral'\n  // Intent — faint\n  | 'faint-brand' | 'faint-negative' | 'faint-positive' | 'faint-warning'\n  | 'faint-caution' | 'faint-ai' | 'faint-neutral'\n  // Intent — medium\n  | 'medium-brand' | 'medium-negative' | 'medium-positive' | 'medium-warning'\n  | 'medium-caution' | 'medium-ai' | 'medium-neutral'\n  // Intent — bold (explicit)\n  | 'bold-brand' | 'bold-negative' | 'bold-positive' | 'bold-warning'\n  | 'bold-caution' | 'bold-ai' | 'bold-neutral'\n  // Intent — strong\n  | 'strong-brand' | 'strong-negative' | 'strong-positive' | 'strong-warning'\n  | 'strong-caution' | 'strong-ai' | 'strong-neutral'\n  // Contextual\n  | 'on-strong' | 'on-bold'\n  // Pass-through\n  | 'inherit';\n\nexport type IconColor = IconColorToken | `var(--${string})`;\n\n@Component({\n  tag: 'ds-icon',\n  styleUrl: 'Icon.css',\n  scoped: true,\n})\nexport class Icon {\n  @Element() el!: HTMLElement;\n\n  /** Exact canonical IcoMo export name, including the `Flag` prefix for flags. */\n  @Prop() name: string = '';\n  /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */\n  @Prop() size: IconSize = 'md';\n  /**\n   * Semantic foreground color token, or a raw CSS var reference. `tertiary`\n   * and the still-fainter `quaternary` are restricted to icons inside genuinely\n   * inactive/disabled UI or to purely decorative icons; informative icons must\n   * retain sufficient contrast.\n   */\n  @Prop() color: IconColor = 'inherit';\n  /** Accessible label. Sets `role=\"img\"` and `aria-label`. Omit for decorative icons. */\n  @Prop() label: string | undefined;\n\n  /** Resolved SVG markup — set synchronously on cache hit, async after a lazy load. */\n  @State() private svg: string = '';\n\n  /** Guards against out-of-order async resolutions when `name`/`flag` change quickly. */\n  private loadToken = 0;\n\n  /**\n   * Cache hit → render synchronously (pre-registered via `registerIcons` or\n   * previously loaded). Miss → fire the per-icon lazy loader; the glyph pops in\n   * when the (tiny, per-icon) chunk resolves and stays cached for every other\n   * ds-icon instance.\n   */\n  private resolveSvg() {\n    const flag = this.name.startsWith('Flag');\n    const key = iconCacheKey(this.name, flag);\n    const token = ++this.loadToken;\n\n    const cached = iconCache().get(key);\n    if (cached !== undefined) {\n      this.svg = cached;\n      return;\n    }\n\n    // Own-key lookup only: names resolve by exact canonical IcoMo export key —\n    // never meta.json aliases (not in the maps) and never inherited prototype\n    // keys ('constructor', 'toString', …) that a bare index access would hit.\n    const loaders = flag ? flagIconLoaders : systemIconLoaders;\n    const loader = Object.prototype.hasOwnProperty.call(loaders, this.name)\n      ? loaders[this.name]\n      : undefined;\n    if (!loader) {\n      this.svg = '';\n      return;\n    }\n\n    loader()\n      .then(svg => {\n        iconCache().set(key, svg);\n        if (token === this.loadToken) this.svg = svg;\n      })\n      .catch(() => {\n        if (token === this.loadToken) this.svg = '';\n      });\n  }\n\n  componentWillLoad() {\n    // Fire-and-forget: do not return the promise — a cache miss must not block\n    // the parent render tree on a network fetch.\n    this.resolveSvg();\n  }\n\n  /** Last markup injected into the DOM — skips redundant re-parse on unrelated re-renders. */\n  private renderedSvg: string | null = null;\n\n  private updateSvg() {\n    const container = this.el.querySelector<HTMLElement>('.icon__svg');\n    if (!container) return;\n    if (this.svg === this.renderedSvg) return;\n    this.renderedSvg = this.svg;\n\n    // Validate + inject as parsed DOM nodes — never innerHTML. Keeps ds-icon\n    // Trusted-Types compatible and rejects executable/foreign content in\n    // glyph strings (registerIcons accepts app-provided markup).\n    const svg = this.svg ? parseIconSvg(this.svg) : null;\n    if (!svg) {\n      container.replaceChildren();\n      return;\n    }\n\n    // Stencil's scoped CSS cannot reach injected elements (no sc-* class).\n    // Apply width/height as inline styles so sizing works regardless of scope class.\n    svg.removeAttribute('width');\n    svg.removeAttribute('height');\n    // Prevent SVG from being natively focusable (Firefox/IE default) while\n    // sitting inside an aria-hidden parent — fixes aria-hidden-focus violation.\n    svg.setAttribute('focusable', 'false');\n    svg.setAttribute('aria-hidden', 'true');\n    svg.style.display = 'block';\n    svg.style.flexShrink = '0';\n    svg.style.width = '100%';\n    svg.style.height = '100%';\n    container.replaceChildren(svg);\n  }\n\n  @Watch('name')\n  onIconChange() {\n    this.resolveSvg();\n  }\n\n  componentDidRender() {\n    this.updateSvg();\n  }\n\n  render() {\n    const isCustomColor = typeof this.color === 'string' && this.color.startsWith('var(--');\n\n    const cls: Record<string, boolean> = {\n      icon: true,\n      [`icon--size-${this.size}`]: true,\n      [`icon--color-${this.color}`]: !!this.color && !isCustomColor && this.color !== 'inherit',\n      'icon--color-inherit': this.color === 'inherit',\n    };\n\n    const style = isCustomColor ? { color: this.color as string } : undefined;\n\n    return (\n      <Host style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>\n        <span\n          class={cls}\n          style={style}\n          role={this.label ? 'img' : 'presentation'}\n          aria-label={this.label}\n          aria-hidden={!this.label ? 'true' : undefined}\n        >\n          <span class=\"icon__svg\" />\n        </span>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Icon/flag-icon-catalog.ts",
+      "content": "/** Auto-generated by scripts/generate-icon-catalog.mjs — do not edit. */\n\nexport const flagIconLoaders: Record<string, () => Promise<string>> = {\n  FlagAustria: () => import('@ds-mo/icons/svg/flags/FlagAustria').then(m => m.FlagAustria),\n  FlagBelgium: () => import('@ds-mo/icons/svg/flags/FlagBelgium').then(m => m.FlagBelgium),\n  FlagBulgaria: () => import('@ds-mo/icons/svg/flags/FlagBulgaria').then(m => m.FlagBulgaria),\n  FlagCanada: () => import('@ds-mo/icons/svg/flags/FlagCanada').then(m => m.FlagCanada),\n  FlagCroatia: () => import('@ds-mo/icons/svg/flags/FlagCroatia').then(m => m.FlagCroatia),\n  FlagCyprus: () => import('@ds-mo/icons/svg/flags/FlagCyprus').then(m => m.FlagCyprus),\n  FlagCzechRepublic: () => import('@ds-mo/icons/svg/flags/FlagCzechRepublic').then(m => m.FlagCzechRepublic),\n  FlagDenmark: () => import('@ds-mo/icons/svg/flags/FlagDenmark').then(m => m.FlagDenmark),\n  FlagEU: () => import('@ds-mo/icons/svg/flags/FlagEU').then(m => m.FlagEU),\n  FlagEstonia: () => import('@ds-mo/icons/svg/flags/FlagEstonia').then(m => m.FlagEstonia),\n  FlagFinland: () => import('@ds-mo/icons/svg/flags/FlagFinland').then(m => m.FlagFinland),\n  FlagFrance: () => import('@ds-mo/icons/svg/flags/FlagFrance').then(m => m.FlagFrance),\n  FlagGermany: () => import('@ds-mo/icons/svg/flags/FlagGermany').then(m => m.FlagGermany),\n  FlagGreece: () => import('@ds-mo/icons/svg/flags/FlagGreece').then(m => m.FlagGreece),\n  FlagHungary: () => import('@ds-mo/icons/svg/flags/FlagHungary').then(m => m.FlagHungary),\n  FlagIreland: () => import('@ds-mo/icons/svg/flags/FlagIreland').then(m => m.FlagIreland),\n  FlagItaly: () => import('@ds-mo/icons/svg/flags/FlagItaly').then(m => m.FlagItaly),\n  FlagLatvia: () => import('@ds-mo/icons/svg/flags/FlagLatvia').then(m => m.FlagLatvia),\n  FlagLithuania: () => import('@ds-mo/icons/svg/flags/FlagLithuania').then(m => m.FlagLithuania),\n  FlagLuxembourg: () => import('@ds-mo/icons/svg/flags/FlagLuxembourg').then(m => m.FlagLuxembourg),\n  FlagMalta: () => import('@ds-mo/icons/svg/flags/FlagMalta').then(m => m.FlagMalta),\n  FlagMexico: () => import('@ds-mo/icons/svg/flags/FlagMexico').then(m => m.FlagMexico),\n  FlagNetherlands: () => import('@ds-mo/icons/svg/flags/FlagNetherlands').then(m => m.FlagNetherlands),\n  FlagPoland: () => import('@ds-mo/icons/svg/flags/FlagPoland').then(m => m.FlagPoland),\n  FlagPortugal: () => import('@ds-mo/icons/svg/flags/FlagPortugal').then(m => m.FlagPortugal),\n  FlagRomania: () => import('@ds-mo/icons/svg/flags/FlagRomania').then(m => m.FlagRomania),\n  FlagSlovakia: () => import('@ds-mo/icons/svg/flags/FlagSlovakia').then(m => m.FlagSlovakia),\n  FlagSlovenia: () => import('@ds-mo/icons/svg/flags/FlagSlovenia').then(m => m.FlagSlovenia),\n  FlagSpain: () => import('@ds-mo/icons/svg/flags/FlagSpain').then(m => m.FlagSpain),\n  FlagSweden: () => import('@ds-mo/icons/svg/flags/FlagSweden').then(m => m.FlagSweden),\n  FlagUnitedKingdom: () => import('@ds-mo/icons/svg/flags/FlagUnitedKingdom').then(m => m.FlagUnitedKingdom),\n  FlagUnitedStates: () => import('@ds-mo/icons/svg/flags/FlagUnitedStates').then(m => m.FlagUnitedStates),\n};\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Icon/icon-cache.ts",
+      "content": "/**\n * Shared SVG glyph cache for ds-icon.\n *\n * Keyed on a global symbol so every module instance (the compiled Stencil chunk\n * inside dist/components and any direct source import, e.g. via `@ds-mo/ui/utils`)\n * reads and writes the same cache. Without this, `registerIcons` called from an\n * app would fill a different Map than the one ds-icon resolves from.\n */\nconst CACHE_KEY = Symbol.for('ds-mo.icon-svg-cache');\n\ntype IconCacheMap = Map<string, string>;\n\ntype GlobalWithIconCache = { [CACHE_KEY]?: IconCacheMap };\n\nexport function iconCacheKey(name: string, flag: boolean): string {\n  return flag ? `flag:${name}` : `system:${name}`;\n}\n\nexport function iconCache(): IconCacheMap {\n  const g = globalThis as GlobalWithIconCache;\n  return (g[CACHE_KEY] ??= new Map());\n}\n\n/**\n * Pre-register glyphs so ds-icon renders them synchronously — no lazy-chunk\n * fetch, no first-paint pop-in. Import the SVG strings from `@ds-mo/icons`\n * in the app (statically, so they ship in the app's own bundle):\n *\n * ```ts\n * import { Bell } from '@ds-mo/icons/svg/Bell';\n * import { FlagUnitedStates } from '@ds-mo/icons/svg/flags/FlagUnitedStates';\n * import { registerIcons } from '@ds-mo/ui/utils';\n *\n * registerIcons({ Bell });\n * registerIcons({ FlagUnitedStates });\n * ```\n *\n * Icons that are not registered still work — they lazy-load on first render\n * and stay cached afterwards.\n */\nexport function registerIcons(icons: Record<string, string>, options?: { flag?: boolean }): void {\n  const cache = iconCache();\n  for (const [name, svg] of Object.entries(icons)) {\n    const flag = options?.flag ?? name.startsWith('Flag');\n    cache.set(iconCacheKey(name, flag), svg);\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Icon/icon-svg.ts",
+      "content": "/**\n * Glyph markup validation + Trusted-Types-safe parsing for ds-icon.\n *\n * Glyphs normally come from the trusted @ds-mo/icons build pipeline, but\n * `registerIcons` accepts arbitrary app-provided strings and injection is a\n * sink — so every glyph is validated at the render boundary. Injection uses\n * parsed DOM nodes (never innerHTML), which keeps ds-icon working under a\n * strict CSP with `require-trusted-types-for 'script'`.\n */\n\n/** Structural view of an element so the walk is unit-testable without a DOM. */\nexport interface IconSvgElementLike {\n  localName: string;\n  getAttributeNames(): string[];\n  getAttribute(name: string): string | null;\n  children: ArrayLike<IconSvgElementLike>;\n}\n\n/** Elements that can execute or embed foreign content — never valid in a glyph. */\nconst FORBIDDEN_ELEMENTS = new Set([\n  'script',\n  'foreignobject',\n  'iframe',\n  'object',\n  'embed',\n  'animation', // SVG 1.2 external-content element (distinct from animate/animateTransform)\n]);\n\nfunction isValidIconSvgElement(el: IconSvgElementLike): boolean {\n  if (FORBIDDEN_ELEMENTS.has(el.localName.toLowerCase())) return false;\n\n  for (const attr of el.getAttributeNames()) {\n    const lower = attr.toLowerCase();\n    // Event handler attributes (onclick, onload, …) — any casing.\n    if (lower.startsWith('on')) return false;\n    // References must stay internal (#gradient-id); rejects javascript:, data:,\n    // and external URLs on <use>, <a>, <image>, …\n    if (lower === 'href' || lower === 'xlink:href') {\n      const value = el.getAttribute(attr) ?? '';\n      if (!value.startsWith('#')) return false;\n    }\n  }\n\n  for (let i = 0; i < el.children.length; i++) {\n    if (!isValidIconSvgElement(el.children[i])) return false;\n  }\n\n  return true;\n}\n\n/** True when `root` is an `<svg>` whose whole tree passes validation. */\nexport function isValidIconSvgRoot(root: IconSvgElementLike | null): boolean {\n  return root != null && root.localName === 'svg' && isValidIconSvgElement(root);\n}\n\n/**\n * Parse + validate glyph markup. Returns a detached `<svg>` element ready to\n * append (appending adopts it into the document), or `null` when the markup\n * is not well-formed XML, not rooted at `<svg>`, or fails validation —\n * ds-icon renders an empty fixed-size box in that case.\n */\nexport function parseIconSvg(svg: string): SVGElement | null {\n  if (typeof DOMParser === 'undefined') return null;\n\n  const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');\n  // Malformed XML yields a parsererror document (root or nested, per browser).\n  if (doc.querySelector('parsererror')) return null;\n\n  const root = doc.documentElement as unknown as IconSvgElementLike;\n  if (!isValidIconSvgRoot(root)) return null;\n\n  return doc.documentElement as unknown as SVGElement;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Icon/system-icon-catalog.ts",
+      "content": "/** Auto-generated by scripts/generate-icon-catalog.mjs — do not edit. */\n\nexport const systemIconLoaders: Record<string, () => Promise<string>> = {\n  AI: () => import('@ds-mo/icons/svg/AI').then(m => m.AI),\n  AIChip: () => import('@ds-mo/icons/svg/AIChip').then(m => m.AIChip),\n  AINew: () => import('@ds-mo/icons/svg/AINew').then(m => m.AINew),\n  AISparkle: () => import('@ds-mo/icons/svg/AISparkle').then(m => m.AISparkle),\n  AUX: () => import('@ds-mo/icons/svg/AUX').then(m => m.AUX),\n  AUXFilled: () => import('@ds-mo/icons/svg/AUXFilled').then(m => m.AUXFilled),\n  AndroidFilled: () => import('@ds-mo/icons/svg/AndroidFilled').then(m => m.AndroidFilled),\n  ArrowDown: () => import('@ds-mo/icons/svg/ArrowDown').then(m => m.ArrowDown),\n  ArrowLeft: () => import('@ds-mo/icons/svg/ArrowLeft').then(m => m.ArrowLeft),\n  ArrowPath: () => import('@ds-mo/icons/svg/ArrowPath').then(m => m.ArrowPath),\n  ArrowRight: () => import('@ds-mo/icons/svg/ArrowRight').then(m => m.ArrowRight),\n  ArrowUp: () => import('@ds-mo/icons/svg/ArrowUp').then(m => m.ArrowUp),\n  ArrowsDiagonal: () => import('@ds-mo/icons/svg/ArrowsDiagonal').then(m => m.ArrowsDiagonal),\n  ArrowsDiff: () => import('@ds-mo/icons/svg/ArrowsDiff').then(m => m.ArrowsDiff),\n  ArrowsDiffDisabled: () => import('@ds-mo/icons/svg/ArrowsDiffDisabled').then(m => m.ArrowsDiffDisabled),\n  ArrowsVertical: () => import('@ds-mo/icons/svg/ArrowsVertical').then(m => m.ArrowsVertical),\n  AtSign: () => import('@ds-mo/icons/svg/AtSign').then(m => m.AtSign),\n  Avatar: () => import('@ds-mo/icons/svg/Avatar').then(m => m.Avatar),\n  BackslashBrackets: () => import('@ds-mo/icons/svg/BackslashBrackets').then(m => m.BackslashBrackets),\n  BatteryCharging: () => import('@ds-mo/icons/svg/BatteryCharging').then(m => m.BatteryCharging),\n  BatteryEmpty: () => import('@ds-mo/icons/svg/BatteryEmpty').then(m => m.BatteryEmpty),\n  BatteryFull: () => import('@ds-mo/icons/svg/BatteryFull').then(m => m.BatteryFull),\n  BatteryHalf: () => import('@ds-mo/icons/svg/BatteryHalf').then(m => m.BatteryHalf),\n  BatteryLow: () => import('@ds-mo/icons/svg/BatteryLow').then(m => m.BatteryLow),\n  Beaker: () => import('@ds-mo/icons/svg/Beaker').then(m => m.Beaker),\n  Bell: () => import('@ds-mo/icons/svg/Bell').then(m => m.Bell),\n  BellCircle: () => import('@ds-mo/icons/svg/BellCircle').then(m => m.BellCircle),\n  BellExclamation: () => import('@ds-mo/icons/svg/BellExclamation').then(m => m.BellExclamation),\n  BellFilled: () => import('@ds-mo/icons/svg/BellFilled').then(m => m.BellFilled),\n  BellRinging: () => import('@ds-mo/icons/svg/BellRinging').then(m => m.BellRinging),\n  BellWifi: () => import('@ds-mo/icons/svg/BellWifi').then(m => m.BellWifi),\n  BlackWhite: () => import('@ds-mo/icons/svg/BlackWhite').then(m => m.BlackWhite),\n  BlankUI: () => import('@ds-mo/icons/svg/BlankUI').then(m => m.BlankUI),\n  Bluetooth: () => import('@ds-mo/icons/svg/Bluetooth').then(m => m.Bluetooth),\n  Bolt: () => import('@ds-mo/icons/svg/Bolt').then(m => m.Bolt),\n  BoltFilled: () => import('@ds-mo/icons/svg/BoltFilled').then(m => m.BoltFilled),\n  Bookmark: () => import('@ds-mo/icons/svg/Bookmark').then(m => m.Bookmark),\n  Box: () => import('@ds-mo/icons/svg/Box').then(m => m.Box),\n  Braces: () => import('@ds-mo/icons/svg/Braces').then(m => m.Braces),\n  Bug: () => import('@ds-mo/icons/svg/Bug').then(m => m.Bug),\n  BuildingFacility: () => import('@ds-mo/icons/svg/BuildingFacility').then(m => m.BuildingFacility),\n  BuildingHome: () => import('@ds-mo/icons/svg/BuildingHome').then(m => m.BuildingHome),\n  BuildingOffice: () => import('@ds-mo/icons/svg/BuildingOffice').then(m => m.BuildingOffice),\n  BuildingPublic: () => import('@ds-mo/icons/svg/BuildingPublic').then(m => m.BuildingPublic),\n  BuildingShop: () => import('@ds-mo/icons/svg/BuildingShop').then(m => m.BuildingShop),\n  Bulb: () => import('@ds-mo/icons/svg/Bulb').then(m => m.Bulb),\n  Calculator: () => import('@ds-mo/icons/svg/Calculator').then(m => m.Calculator),\n  Calendar: () => import('@ds-mo/icons/svg/Calendar').then(m => m.Calendar),\n  CalendarClock: () => import('@ds-mo/icons/svg/CalendarClock').then(m => m.CalendarClock),\n  CameraA: () => import('@ds-mo/icons/svg/CameraA').then(m => m.CameraA),\n  CameraB: () => import('@ds-mo/icons/svg/CameraB').then(m => m.CameraB),\n  Card: () => import('@ds-mo/icons/svg/Card').then(m => m.Card),\n  CardPerson: () => import('@ds-mo/icons/svg/CardPerson').then(m => m.CardPerson),\n  Cart: () => import('@ds-mo/icons/svg/Cart').then(m => m.Cart),\n  Chart: () => import('@ds-mo/icons/svg/Chart').then(m => m.Chart),\n  Check: () => import('@ds-mo/icons/svg/Check').then(m => m.Check),\n  CheckCircle: () => import('@ds-mo/icons/svg/CheckCircle').then(m => m.CheckCircle),\n  CheckCircleFilled: () => import('@ds-mo/icons/svg/CheckCircleFilled').then(m => m.CheckCircleFilled),\n  CheckDouble: () => import('@ds-mo/icons/svg/CheckDouble').then(m => m.CheckDouble),\n  ChevronDown: () => import('@ds-mo/icons/svg/ChevronDown').then(m => m.ChevronDown),\n  ChevronLeft: () => import('@ds-mo/icons/svg/ChevronLeft').then(m => m.ChevronLeft),\n  ChevronLeftDouble: () => import('@ds-mo/icons/svg/ChevronLeftDouble').then(m => m.ChevronLeftDouble),\n  ChevronRight: () => import('@ds-mo/icons/svg/ChevronRight').then(m => m.ChevronRight),\n  ChevronRightDouble: () => import('@ds-mo/icons/svg/ChevronRightDouble').then(m => m.ChevronRightDouble),\n  ChevronUp: () => import('@ds-mo/icons/svg/ChevronUp').then(m => m.ChevronUp),\n  ChevronUpDown: () => import('@ds-mo/icons/svg/ChevronUpDown').then(m => m.ChevronUpDown),\n  Circle: () => import('@ds-mo/icons/svg/Circle').then(m => m.Circle),\n  CircleArrow: () => import('@ds-mo/icons/svg/CircleArrow').then(m => m.CircleArrow),\n  CircleArrowsDiff: () => import('@ds-mo/icons/svg/CircleArrowsDiff').then(m => m.CircleArrowsDiff),\n  CircleArrowsDiffDisabled: () => import('@ds-mo/icons/svg/CircleArrowsDiffDisabled').then(m => m.CircleArrowsDiffDisabled),\n  CircleConcentricFilled: () => import('@ds-mo/icons/svg/CircleConcentricFilled').then(m => m.CircleConcentricFilled),\n  CircleConcentricThree: () => import('@ds-mo/icons/svg/CircleConcentricThree').then(m => m.CircleConcentricThree),\n  CircleConcentricTwo: () => import('@ds-mo/icons/svg/CircleConcentricTwo').then(m => m.CircleConcentricTwo),\n  CircleExclamation: () => import('@ds-mo/icons/svg/CircleExclamation').then(m => m.CircleExclamation),\n  CircleExclamationFilled: () => import('@ds-mo/icons/svg/CircleExclamationFilled').then(m => m.CircleExclamationFilled),\n  CircleFastForward: () => import('@ds-mo/icons/svg/CircleFastForward').then(m => m.CircleFastForward),\n  CircleFilled: () => import('@ds-mo/icons/svg/CircleFilled').then(m => m.CircleFilled),\n  CircleGrid: () => import('@ds-mo/icons/svg/CircleGrid').then(m => m.CircleGrid),\n  CirclePlay: () => import('@ds-mo/icons/svg/CirclePlay').then(m => m.CirclePlay),\n  CircleQuestion: () => import('@ds-mo/icons/svg/CircleQuestion').then(m => m.CircleQuestion),\n  CircleSlash: () => import('@ds-mo/icons/svg/CircleSlash').then(m => m.CircleSlash),\n  Clipboard: () => import('@ds-mo/icons/svg/Clipboard').then(m => m.Clipboard),\n  ClipboardCheck: () => import('@ds-mo/icons/svg/ClipboardCheck').then(m => m.ClipboardCheck),\n  Clock: () => import('@ds-mo/icons/svg/Clock').then(m => m.Clock),\n  ClockDefer: () => import('@ds-mo/icons/svg/ClockDefer').then(m => m.ClockDefer),\n  ClockFilled: () => import('@ds-mo/icons/svg/ClockFilled').then(m => m.ClockFilled),\n  ClockSixteenHour: () => import('@ds-mo/icons/svg/ClockSixteenHour').then(m => m.ClockSixteenHour),\n  Cloud: () => import('@ds-mo/icons/svg/Cloud').then(m => m.Cloud),\n  CloudEllipses: () => import('@ds-mo/icons/svg/CloudEllipses').then(m => m.CloudEllipses),\n  CloudLightning: () => import('@ds-mo/icons/svg/CloudLightning').then(m => m.CloudLightning),\n  CloudRain: () => import('@ds-mo/icons/svg/CloudRain').then(m => m.CloudRain),\n  CloudRainSun: () => import('@ds-mo/icons/svg/CloudRainSun').then(m => m.CloudRainSun),\n  CloudSun: () => import('@ds-mo/icons/svg/CloudSun').then(m => m.CloudSun),\n  CloudWind: () => import('@ds-mo/icons/svg/CloudWind').then(m => m.CloudWind),\n  Cluster: () => import('@ds-mo/icons/svg/Cluster').then(m => m.Cluster),\n  Coin: () => import('@ds-mo/icons/svg/Coin').then(m => m.Coin),\n  CoinStack: () => import('@ds-mo/icons/svg/CoinStack').then(m => m.CoinStack),\n  CoinStackGeneral: () => import('@ds-mo/icons/svg/CoinStackGeneral').then(m => m.CoinStackGeneral),\n  Compass: () => import('@ds-mo/icons/svg/Compass').then(m => m.Compass),\n  Copy: () => import('@ds-mo/icons/svg/Copy').then(m => m.Copy),\n  Crop: () => import('@ds-mo/icons/svg/Crop').then(m => m.Crop),\n  Cross: () => import('@ds-mo/icons/svg/Cross').then(m => m.Cross),\n  CrossCircle: () => import('@ds-mo/icons/svg/CrossCircle').then(m => m.CrossCircle),\n  CrossCircleFilled: () => import('@ds-mo/icons/svg/CrossCircleFilled').then(m => m.CrossCircleFilled),\n  Cube: () => import('@ds-mo/icons/svg/Cube').then(m => m.Cube),\n  Cup: () => import('@ds-mo/icons/svg/Cup').then(m => m.Cup),\n  CursorPointer: () => import('@ds-mo/icons/svg/CursorPointer').then(m => m.CursorPointer),\n  CursorPointerMinus: () => import('@ds-mo/icons/svg/CursorPointerMinus').then(m => m.CursorPointerMinus),\n  CursorPointerPlus: () => import('@ds-mo/icons/svg/CursorPointerPlus').then(m => m.CursorPointerPlus),\n  Dashboard: () => import('@ds-mo/icons/svg/Dashboard').then(m => m.Dashboard),\n  DeviceAIDashcamPlus: () => import('@ds-mo/icons/svg/DeviceAIDashcamPlus').then(m => m.DeviceAIDashcamPlus),\n  DeviceAssetTracker: () => import('@ds-mo/icons/svg/DeviceAssetTracker').then(m => m.DeviceAssetTracker),\n  DeviceDVR: () => import('@ds-mo/icons/svg/DeviceDVR').then(m => m.DeviceDVR),\n  DeviceDashcam: () => import('@ds-mo/icons/svg/DeviceDashcam').then(m => m.DeviceDashcam),\n  DeviceDashcamLiveStream: () => import('@ds-mo/icons/svg/DeviceDashcamLiveStream').then(m => m.DeviceDashcamLiveStream),\n  DeviceDoorSensor: () => import('@ds-mo/icons/svg/DeviceDoorSensor').then(m => m.DeviceDoorSensor),\n  DeviceMobile: () => import('@ds-mo/icons/svg/DeviceMobile').then(m => m.DeviceMobile),\n  DeviceMobileTwo: () => import('@ds-mo/icons/svg/DeviceMobileTwo').then(m => m.DeviceMobileTwo),\n  DeviceOmnicam: () => import('@ds-mo/icons/svg/DeviceOmnicam').then(m => m.DeviceOmnicam),\n  DeviceSensor: () => import('@ds-mo/icons/svg/DeviceSensor').then(m => m.DeviceSensor),\n  DeviceTablet: () => import('@ds-mo/icons/svg/DeviceTablet').then(m => m.DeviceTablet),\n  DeviceVehicleGateway: () => import('@ds-mo/icons/svg/DeviceVehicleGateway').then(m => m.DeviceVehicleGateway),\n  Devices: () => import('@ds-mo/icons/svg/Devices').then(m => m.Devices),\n  Document: () => import('@ds-mo/icons/svg/Document').then(m => m.Document),\n  DocumentArrow: () => import('@ds-mo/icons/svg/DocumentArrow').then(m => m.DocumentArrow),\n  DocumentChart: () => import('@ds-mo/icons/svg/DocumentChart').then(m => m.DocumentChart),\n  DocumentDollar: () => import('@ds-mo/icons/svg/DocumentDollar').then(m => m.DocumentDollar),\n  DocumentGear: () => import('@ds-mo/icons/svg/DocumentGear').then(m => m.DocumentGear),\n  DocumentInverted: () => import('@ds-mo/icons/svg/DocumentInverted').then(m => m.DocumentInverted),\n  DocumentPencil: () => import('@ds-mo/icons/svg/DocumentPencil').then(m => m.DocumentPencil),\n  DocumentPlus: () => import('@ds-mo/icons/svg/DocumentPlus').then(m => m.DocumentPlus),\n  DocumentQuestion: () => import('@ds-mo/icons/svg/DocumentQuestion').then(m => m.DocumentQuestion),\n  DocumentReceipt: () => import('@ds-mo/icons/svg/DocumentReceipt').then(m => m.DocumentReceipt),\n  DocumentStacked: () => import('@ds-mo/icons/svg/DocumentStacked').then(m => m.DocumentStacked),\n  Dot: () => import('@ds-mo/icons/svg/Dot').then(m => m.Dot),\n  DotFilled: () => import('@ds-mo/icons/svg/DotFilled').then(m => m.DotFilled),\n  DotPath: () => import('@ds-mo/icons/svg/DotPath').then(m => m.DotPath),\n  Download: () => import('@ds-mo/icons/svg/Download').then(m => m.Download),\n  Drag: () => import('@ds-mo/icons/svg/Drag').then(m => m.Drag),\n  Ellipses: () => import('@ds-mo/icons/svg/Ellipses').then(m => m.Ellipses),\n  Email: () => import('@ds-mo/icons/svg/Email').then(m => m.Email),\n  Engine: () => import('@ds-mo/icons/svg/Engine').then(m => m.Engine),\n  Enter: () => import('@ds-mo/icons/svg/Enter').then(m => m.Enter),\n  EntityAsset: () => import('@ds-mo/icons/svg/EntityAsset').then(m => m.EntityAsset),\n  EntityAssetFilled: () => import('@ds-mo/icons/svg/EntityAssetFilled').then(m => m.EntityAssetFilled),\n  EntityDriver: () => import('@ds-mo/icons/svg/EntityDriver').then(m => m.EntityDriver),\n  EntityDriverFilled: () => import('@ds-mo/icons/svg/EntityDriverFilled').then(m => m.EntityDriverFilled),\n  EntityTravelGroup: () => import('@ds-mo/icons/svg/EntityTravelGroup').then(m => m.EntityTravelGroup),\n  EntityTravelGroupFilled: () => import('@ds-mo/icons/svg/EntityTravelGroupFilled').then(m => m.EntityTravelGroupFilled),\n  EntityVehicle: () => import('@ds-mo/icons/svg/EntityVehicle').then(m => m.EntityVehicle),\n  EntityVehicleCharging: () => import('@ds-mo/icons/svg/EntityVehicleCharging').then(m => m.EntityVehicleCharging),\n  EntityVehicleChargingFilled: () => import('@ds-mo/icons/svg/EntityVehicleChargingFilled').then(m => m.EntityVehicleChargingFilled),\n  EntityVehicleFilled: () => import('@ds-mo/icons/svg/EntityVehicleFilled').then(m => m.EntityVehicleFilled),\n  EntityVehicleImmobilized: () => import('@ds-mo/icons/svg/EntityVehicleImmobilized').then(m => m.EntityVehicleImmobilized),\n  EntityVehicleImmobilizedFilled: () => import('@ds-mo/icons/svg/EntityVehicleImmobilizedFilled').then(m => m.EntityVehicleImmobilizedFilled),\n  ErrorTriangle: () => import('@ds-mo/icons/svg/ErrorTriangle').then(m => m.ErrorTriangle),\n  ErrorTriangleFilled: () => import('@ds-mo/icons/svg/ErrorTriangleFilled').then(m => m.ErrorTriangleFilled),\n  ErrorTriangleSimpleFilled: () => import('@ds-mo/icons/svg/ErrorTriangleSimpleFilled').then(m => m.ErrorTriangleSimpleFilled),\n  Export: () => import('@ds-mo/icons/svg/Export').then(m => m.Export),\n  ExternalLink: () => import('@ds-mo/icons/svg/ExternalLink').then(m => m.ExternalLink),\n  Eye: () => import('@ds-mo/icons/svg/Eye').then(m => m.Eye),\n  EyeDisabled: () => import('@ds-mo/icons/svg/EyeDisabled').then(m => m.EyeDisabled),\n  EyeLock: () => import('@ds-mo/icons/svg/EyeLock').then(m => m.EyeLock),\n  FastForward: () => import('@ds-mo/icons/svg/FastForward').then(m => m.FastForward),\n  FastForwardSkip: () => import('@ds-mo/icons/svg/FastForwardSkip').then(m => m.FastForwardSkip),\n  Filters: () => import('@ds-mo/icons/svg/Filters').then(m => m.Filters),\n  FitToScreen: () => import('@ds-mo/icons/svg/FitToScreen').then(m => m.FitToScreen),\n  Flag: () => import('@ds-mo/icons/svg/Flag').then(m => m.Flag),\n  FlagFilled: () => import('@ds-mo/icons/svg/FlagFilled').then(m => m.FlagFilled),\n  FloppyDisk: () => import('@ds-mo/icons/svg/FloppyDisk').then(m => m.FloppyDisk),\n  Folder: () => import('@ds-mo/icons/svg/Folder').then(m => m.Folder),\n  FolderFilled: () => import('@ds-mo/icons/svg/FolderFilled').then(m => m.FolderFilled),\n  FuelPump: () => import('@ds-mo/icons/svg/FuelPump').then(m => m.FuelPump),\n  FullScreen: () => import('@ds-mo/icons/svg/FullScreen').then(m => m.FullScreen),\n  FullScreenExit: () => import('@ds-mo/icons/svg/FullScreenExit').then(m => m.FullScreenExit),\n  Gauge: () => import('@ds-mo/icons/svg/Gauge').then(m => m.Gauge),\n  GaugeTemperature: () => import('@ds-mo/icons/svg/GaugeTemperature').then(m => m.GaugeTemperature),\n  Gear: () => import('@ds-mo/icons/svg/Gear').then(m => m.Gear),\n  GearCheck: () => import('@ds-mo/icons/svg/GearCheck').then(m => m.GearCheck),\n  Geofence: () => import('@ds-mo/icons/svg/Geofence').then(m => m.Geofence),\n  GeofenceCircle: () => import('@ds-mo/icons/svg/GeofenceCircle').then(m => m.GeofenceCircle),\n  GeofenceDiamond: () => import('@ds-mo/icons/svg/GeofenceDiamond').then(m => m.GeofenceDiamond),\n  GeofenceSquare: () => import('@ds-mo/icons/svg/GeofenceSquare').then(m => m.GeofenceSquare),\n  GlobeNetwork: () => import('@ds-mo/icons/svg/GlobeNetwork').then(m => m.GlobeNetwork),\n  GlobeWorldMap: () => import('@ds-mo/icons/svg/GlobeWorldMap').then(m => m.GlobeWorldMap),\n  Graph: () => import('@ds-mo/icons/svg/Graph').then(m => m.Graph),\n  GraphArrow: () => import('@ds-mo/icons/svg/GraphArrow').then(m => m.GraphArrow),\n  GraphBars: () => import('@ds-mo/icons/svg/GraphBars').then(m => m.GraphBars),\n  GraphDecreasing: () => import('@ds-mo/icons/svg/GraphDecreasing').then(m => m.GraphDecreasing),\n  GraphIncreasing: () => import('@ds-mo/icons/svg/GraphIncreasing').then(m => m.GraphIncreasing),\n  GroupBy: () => import('@ds-mo/icons/svg/GroupBy').then(m => m.GroupBy),\n  Hamburger: () => import('@ds-mo/icons/svg/Hamburger').then(m => m.Hamburger),\n  HandOpen: () => import('@ds-mo/icons/svg/HandOpen').then(m => m.HandOpen),\n  Headset: () => import('@ds-mo/icons/svg/Headset').then(m => m.Headset),\n  History: () => import('@ds-mo/icons/svg/History').then(m => m.History),\n  HourGlass: () => import('@ds-mo/icons/svg/HourGlass').then(m => m.HourGlass),\n  Image: () => import('@ds-mo/icons/svg/Image').then(m => m.Image),\n  Import: () => import('@ds-mo/icons/svg/Import').then(m => m.Import),\n  ImportClock: () => import('@ds-mo/icons/svg/ImportClock').then(m => m.ImportClock),\n  Inbox: () => import('@ds-mo/icons/svg/Inbox').then(m => m.Inbox),\n  IosFilled: () => import('@ds-mo/icons/svg/IosFilled').then(m => m.IosFilled),\n  Jerrycan: () => import('@ds-mo/icons/svg/Jerrycan').then(m => m.Jerrycan),\n  KeyA: () => import('@ds-mo/icons/svg/KeyA').then(m => m.KeyA),\n  KeyB: () => import('@ds-mo/icons/svg/KeyB').then(m => m.KeyB),\n  KeyCmd: () => import('@ds-mo/icons/svg/KeyCmd').then(m => m.KeyCmd),\n  KeyShift: () => import('@ds-mo/icons/svg/KeyShift').then(m => m.KeyShift),\n  LED: () => import('@ds-mo/icons/svg/LED').then(m => m.LED),\n  Layers: () => import('@ds-mo/icons/svg/Layers').then(m => m.Layers),\n  Leaf: () => import('@ds-mo/icons/svg/Leaf').then(m => m.Leaf),\n  LeftCollapse: () => import('@ds-mo/icons/svg/LeftCollapse').then(m => m.LeftCollapse),\n  LeftCollapseB: () => import('@ds-mo/icons/svg/LeftCollapseB').then(m => m.LeftCollapseB),\n  LeftExpand: () => import('@ds-mo/icons/svg/LeftExpand').then(m => m.LeftExpand),\n  LeftExpandB: () => import('@ds-mo/icons/svg/LeftExpandB').then(m => m.LeftExpandB),\n  LeftTurnSignal: () => import('@ds-mo/icons/svg/LeftTurnSignal').then(m => m.LeftTurnSignal),\n  LetterB: () => import('@ds-mo/icons/svg/LetterB').then(m => m.LetterB),\n  LetterC: () => import('@ds-mo/icons/svg/LetterC').then(m => m.LetterC),\n  LetterI: () => import('@ds-mo/icons/svg/LetterI').then(m => m.LetterI),\n  License: () => import('@ds-mo/icons/svg/License').then(m => m.License),\n  LicensePlate: () => import('@ds-mo/icons/svg/LicensePlate').then(m => m.LicensePlate),\n  Lifebuoy: () => import('@ds-mo/icons/svg/Lifebuoy').then(m => m.Lifebuoy),\n  Link: () => import('@ds-mo/icons/svg/Link').then(m => m.Link),\n  List: () => import('@ds-mo/icons/svg/List').then(m => m.List),\n  Loads: () => import('@ds-mo/icons/svg/Loads').then(m => m.Loads),\n  LocationPin: () => import('@ds-mo/icons/svg/LocationPin').then(m => m.LocationPin),\n  LocationPinArrows: () => import('@ds-mo/icons/svg/LocationPinArrows').then(m => m.LocationPinArrows),\n  LocationPinDisabled: () => import('@ds-mo/icons/svg/LocationPinDisabled').then(m => m.LocationPinDisabled),\n  LocationPinDollar: () => import('@ds-mo/icons/svg/LocationPinDollar').then(m => m.LocationPinDollar),\n  LockClosed: () => import('@ds-mo/icons/svg/LockClosed').then(m => m.LockClosed),\n  LockClosedFilled: () => import('@ds-mo/icons/svg/LockClosedFilled').then(m => m.LockClosedFilled),\n  LockOpen: () => import('@ds-mo/icons/svg/LockOpen').then(m => m.LockOpen),\n  Logout: () => import('@ds-mo/icons/svg/Logout').then(m => m.Logout),\n  Logs: () => import('@ds-mo/icons/svg/Logs').then(m => m.Logs),\n  LogsMagnifyingGlass: () => import('@ds-mo/icons/svg/LogsMagnifyingGlass').then(m => m.LogsMagnifyingGlass),\n  MagnifyingGlass: () => import('@ds-mo/icons/svg/MagnifyingGlass').then(m => m.MagnifyingGlass),\n  MagnifyingGlassGraph: () => import('@ds-mo/icons/svg/MagnifyingGlassGraph').then(m => m.MagnifyingGlassGraph),\n  MagnifyingGlassZoomIn: () => import('@ds-mo/icons/svg/MagnifyingGlassZoomIn').then(m => m.MagnifyingGlassZoomIn),\n  MagnifyingGlassZoomOut: () => import('@ds-mo/icons/svg/MagnifyingGlassZoomOut').then(m => m.MagnifyingGlassZoomOut),\n  MapNavigation: () => import('@ds-mo/icons/svg/MapNavigation').then(m => m.MapNavigation),\n  MapPage: () => import('@ds-mo/icons/svg/MapPage').then(m => m.MapPage),\n  MapPin: () => import('@ds-mo/icons/svg/MapPin').then(m => m.MapPin),\n  MarkRead: () => import('@ds-mo/icons/svg/MarkRead').then(m => m.MarkRead),\n  Match: () => import('@ds-mo/icons/svg/Match').then(m => m.Match),\n  MessageBubble: () => import('@ds-mo/icons/svg/MessageBubble').then(m => m.MessageBubble),\n  MessageBubbleStack: () => import('@ds-mo/icons/svg/MessageBubbleStack').then(m => m.MessageBubbleStack),\n  Messaging: () => import('@ds-mo/icons/svg/Messaging').then(m => m.Messaging),\n  Mic: () => import('@ds-mo/icons/svg/Mic').then(m => m.Mic),\n  MicMute: () => import('@ds-mo/icons/svg/MicMute').then(m => m.MicMute),\n  Minimize: () => import('@ds-mo/icons/svg/Minimize').then(m => m.Minimize),\n  Monitor: () => import('@ds-mo/icons/svg/Monitor').then(m => m.Monitor),\n  Notification: () => import('@ds-mo/icons/svg/Notification').then(m => m.Notification),\n  NumberTen: () => import('@ds-mo/icons/svg/NumberTen').then(m => m.NumberTen),\n  OctagonSubtract: () => import('@ds-mo/icons/svg/OctagonSubtract').then(m => m.OctagonSubtract),\n  Odometer: () => import('@ds-mo/icons/svg/Odometer').then(m => m.Odometer),\n  OverviewAI: () => import('@ds-mo/icons/svg/OverviewAI').then(m => m.OverviewAI),\n  PanelCollapse: () => import('@ds-mo/icons/svg/PanelCollapse').then(m => m.PanelCollapse),\n  PanelExpand: () => import('@ds-mo/icons/svg/PanelExpand').then(m => m.PanelExpand),\n  Paperclip: () => import('@ds-mo/icons/svg/Paperclip').then(m => m.Paperclip),\n  PaperplaneSend: () => import('@ds-mo/icons/svg/PaperplaneSend').then(m => m.PaperplaneSend),\n  Paragraph: () => import('@ds-mo/icons/svg/Paragraph').then(m => m.Paragraph),\n  ParagraphCheck: () => import('@ds-mo/icons/svg/ParagraphCheck').then(m => m.ParagraphCheck),\n  ParagraphPencil: () => import('@ds-mo/icons/svg/ParagraphPencil').then(m => m.ParagraphPencil),\n  Pause: () => import('@ds-mo/icons/svg/Pause').then(m => m.Pause),\n  PauseFilled: () => import('@ds-mo/icons/svg/PauseFilled').then(m => m.PauseFilled),\n  Pencil: () => import('@ds-mo/icons/svg/Pencil').then(m => m.Pencil),\n  PencilSquiggle: () => import('@ds-mo/icons/svg/PencilSquiggle').then(m => m.PencilSquiggle),\n  Person: () => import('@ds-mo/icons/svg/Person').then(m => m.Person),\n  PersonAt: () => import('@ds-mo/icons/svg/PersonAt').then(m => m.PersonAt),\n  PersonConnect: () => import('@ds-mo/icons/svg/PersonConnect').then(m => m.PersonConnect),\n  PersonFrame: () => import('@ds-mo/icons/svg/PersonFrame').then(m => m.PersonFrame),\n  PersonGear: () => import('@ds-mo/icons/svg/PersonGear').then(m => m.PersonGear),\n  PersonGroup: () => import('@ds-mo/icons/svg/PersonGroup').then(m => m.PersonGroup),\n  PersonGroupArrows: () => import('@ds-mo/icons/svg/PersonGroupArrows').then(m => m.PersonGroupArrows),\n  PersonManager: () => import('@ds-mo/icons/svg/PersonManager').then(m => m.PersonManager),\n  PersonShield: () => import('@ds-mo/icons/svg/PersonShield').then(m => m.PersonShield),\n  PersonStar: () => import('@ds-mo/icons/svg/PersonStar').then(m => m.PersonStar),\n  Phone: () => import('@ds-mo/icons/svg/Phone').then(m => m.Phone),\n  PhoneDisconnect: () => import('@ds-mo/icons/svg/PhoneDisconnect').then(m => m.PhoneDisconnect),\n  PicmanFilled: () => import('@ds-mo/icons/svg/PicmanFilled').then(m => m.PicmanFilled),\n  Pin: () => import('@ds-mo/icons/svg/Pin').then(m => m.Pin),\n  PipBottomLeft: () => import('@ds-mo/icons/svg/PipBottomLeft').then(m => m.PipBottomLeft),\n  PipBottomRight: () => import('@ds-mo/icons/svg/PipBottomRight').then(m => m.PipBottomRight),\n  PipTopLeft: () => import('@ds-mo/icons/svg/PipTopLeft').then(m => m.PipTopLeft),\n  PipTopRight: () => import('@ds-mo/icons/svg/PipTopRight').then(m => m.PipTopRight),\n  Play: () => import('@ds-mo/icons/svg/Play').then(m => m.Play),\n  PlayFilled: () => import('@ds-mo/icons/svg/PlayFilled').then(m => m.PlayFilled),\n  Plug: () => import('@ds-mo/icons/svg/Plug').then(m => m.Plug),\n  Plus: () => import('@ds-mo/icons/svg/Plus').then(m => m.Plus),\n  PlusCircle: () => import('@ds-mo/icons/svg/PlusCircle').then(m => m.PlusCircle),\n  Preferences: () => import('@ds-mo/icons/svg/Preferences').then(m => m.Preferences),\n  Printer: () => import('@ds-mo/icons/svg/Printer').then(m => m.Printer),\n  PunchCard: () => import('@ds-mo/icons/svg/PunchCard').then(m => m.PunchCard),\n  Puzzle: () => import('@ds-mo/icons/svg/Puzzle').then(m => m.Puzzle),\n  PuzzleJoined: () => import('@ds-mo/icons/svg/PuzzleJoined').then(m => m.PuzzleJoined),\n  Redo: () => import('@ds-mo/icons/svg/Redo').then(m => m.Redo),\n  Refresh: () => import('@ds-mo/icons/svg/Refresh').then(m => m.Refresh),\n  Restore: () => import('@ds-mo/icons/svg/Restore').then(m => m.Restore),\n  RewardRibbon: () => import('@ds-mo/icons/svg/RewardRibbon').then(m => m.RewardRibbon),\n  Rewind: () => import('@ds-mo/icons/svg/Rewind').then(m => m.Rewind),\n  RewindSkip: () => import('@ds-mo/icons/svg/RewindSkip').then(m => m.RewindSkip),\n  RewindSkipFilled: () => import('@ds-mo/icons/svg/RewindSkipFilled').then(m => m.RewindSkipFilled),\n  RightCollapse: () => import('@ds-mo/icons/svg/RightCollapse').then(m => m.RightCollapse),\n  RightCollapseB: () => import('@ds-mo/icons/svg/RightCollapseB').then(m => m.RightCollapseB),\n  RightExpand: () => import('@ds-mo/icons/svg/RightExpand').then(m => m.RightExpand),\n  RightExpandB: () => import('@ds-mo/icons/svg/RightExpandB').then(m => m.RightExpandB),\n  RightTurnSignal: () => import('@ds-mo/icons/svg/RightTurnSignal').then(m => m.RightTurnSignal),\n  Rotate: () => import('@ds-mo/icons/svg/Rotate').then(m => m.Rotate),\n  Satellite: () => import('@ds-mo/icons/svg/Satellite').then(m => m.Satellite),\n  Scan: () => import('@ds-mo/icons/svg/Scan').then(m => m.Scan),\n  Scissor: () => import('@ds-mo/icons/svg/Scissor').then(m => m.Scissor),\n  Scope: () => import('@ds-mo/icons/svg/Scope').then(m => m.Scope),\n  Seatbelt: () => import('@ds-mo/icons/svg/Seatbelt').then(m => m.Seatbelt),\n  SeatbeltBuckle: () => import('@ds-mo/icons/svg/SeatbeltBuckle').then(m => m.SeatbeltBuckle),\n  Shapes: () => import('@ds-mo/icons/svg/Shapes').then(m => m.Shapes),\n  ShareCircles: () => import('@ds-mo/icons/svg/ShareCircles').then(m => m.ShareCircles),\n  ShareCirclesFilled: () => import('@ds-mo/icons/svg/ShareCirclesFilled').then(m => m.ShareCirclesFilled),\n  SharePaperplane: () => import('@ds-mo/icons/svg/SharePaperplane').then(m => m.SharePaperplane),\n  Shield: () => import('@ds-mo/icons/svg/Shield').then(m => m.Shield),\n  ShieldCheck: () => import('@ds-mo/icons/svg/ShieldCheck').then(m => m.ShieldCheck),\n  ShieldCheckmarkFilled: () => import('@ds-mo/icons/svg/ShieldCheckmarkFilled').then(m => m.ShieldCheckmarkFilled),\n  ShieldCircle: () => import('@ds-mo/icons/svg/ShieldCircle').then(m => m.ShieldCircle),\n  ShieldCircleFilled: () => import('@ds-mo/icons/svg/ShieldCircleFilled').then(m => m.ShieldCircleFilled),\n  ShieldCross: () => import('@ds-mo/icons/svg/ShieldCross').then(m => m.ShieldCross),\n  ShieldCrossFilled: () => import('@ds-mo/icons/svg/ShieldCrossFilled').then(m => m.ShieldCrossFilled),\n  ShieldFilled: () => import('@ds-mo/icons/svg/ShieldFilled').then(m => m.ShieldFilled),\n  ShieldLock: () => import('@ds-mo/icons/svg/ShieldLock').then(m => m.ShieldLock),\n  ShieldLockFilled: () => import('@ds-mo/icons/svg/ShieldLockFilled').then(m => m.ShieldLockFilled),\n  ShoppingBag: () => import('@ds-mo/icons/svg/ShoppingBag').then(m => m.ShoppingBag),\n  Snowflake: () => import('@ds-mo/icons/svg/Snowflake').then(m => m.Snowflake),\n  SpeakerPhone: () => import('@ds-mo/icons/svg/SpeakerPhone').then(m => m.SpeakerPhone),\n  SpeedometerArrow: () => import('@ds-mo/icons/svg/SpeedometerArrow').then(m => m.SpeedometerArrow),\n  SpeedometerLeft: () => import('@ds-mo/icons/svg/SpeedometerLeft').then(m => m.SpeedometerLeft),\n  SpeedometerRight: () => import('@ds-mo/icons/svg/SpeedometerRight').then(m => m.SpeedometerRight),\n  SpikeCirclePercentage: () => import('@ds-mo/icons/svg/SpikeCirclePercentage').then(m => m.SpikeCirclePercentage),\n  SpikeCirclePercentageFilled: () => import('@ds-mo/icons/svg/SpikeCirclePercentageFilled').then(m => m.SpikeCirclePercentageFilled),\n  Square: () => import('@ds-mo/icons/svg/Square').then(m => m.Square),\n  SquareArrowTopRight: () => import('@ds-mo/icons/svg/SquareArrowTopRight').then(m => m.SquareArrowTopRight),\n  SquareCheck: () => import('@ds-mo/icons/svg/SquareCheck').then(m => m.SquareCheck),\n  SquareCheckFilled: () => import('@ds-mo/icons/svg/SquareCheckFilled').then(m => m.SquareCheckFilled),\n  SquareDollar: () => import('@ds-mo/icons/svg/SquareDollar').then(m => m.SquareDollar),\n  SquareDollarFilled: () => import('@ds-mo/icons/svg/SquareDollarFilled').then(m => m.SquareDollarFilled),\n  SquareDottedMinus: () => import('@ds-mo/icons/svg/SquareDottedMinus').then(m => m.SquareDottedMinus),\n  SquareFilled: () => import('@ds-mo/icons/svg/SquareFilled').then(m => m.SquareFilled),\n  SquareGrid: () => import('@ds-mo/icons/svg/SquareGrid').then(m => m.SquareGrid),\n  SquarePencil: () => import('@ds-mo/icons/svg/SquarePencil').then(m => m.SquarePencil),\n  SquarePlus: () => import('@ds-mo/icons/svg/SquarePlus').then(m => m.SquarePlus),\n  SquareSubtract: () => import('@ds-mo/icons/svg/SquareSubtract').then(m => m.SquareSubtract),\n  SquareSubtractFilled: () => import('@ds-mo/icons/svg/SquareSubtractFilled').then(m => m.SquareSubtractFilled),\n  Star: () => import('@ds-mo/icons/svg/Star').then(m => m.Star),\n  StarFilled: () => import('@ds-mo/icons/svg/StarFilled').then(m => m.StarFilled),\n  Stopwatch: () => import('@ds-mo/icons/svg/Stopwatch').then(m => m.Stopwatch),\n  Street: () => import('@ds-mo/icons/svg/Street').then(m => m.Street),\n  Subtract: () => import('@ds-mo/icons/svg/Subtract').then(m => m.Subtract),\n  SubtractCircle: () => import('@ds-mo/icons/svg/SubtractCircle').then(m => m.SubtractCircle),\n  SubtractCircleFilled: () => import('@ds-mo/icons/svg/SubtractCircleFilled').then(m => m.SubtractCircleFilled),\n  Table: () => import('@ds-mo/icons/svg/Table').then(m => m.Table),\n  Tag: () => import('@ds-mo/icons/svg/Tag').then(m => m.Tag),\n  Target: () => import('@ds-mo/icons/svg/Target').then(m => m.Target),\n  TargetDollar: () => import('@ds-mo/icons/svg/TargetDollar').then(m => m.TargetDollar),\n  Text: () => import('@ds-mo/icons/svg/Text').then(m => m.Text),\n  ThemeDark: () => import('@ds-mo/icons/svg/ThemeDark').then(m => m.ThemeDark),\n  ThemeLight: () => import('@ds-mo/icons/svg/ThemeLight').then(m => m.ThemeLight),\n  ThumbsDown: () => import('@ds-mo/icons/svg/ThumbsDown').then(m => m.ThumbsDown),\n  ThumbsDownFilled: () => import('@ds-mo/icons/svg/ThumbsDownFilled').then(m => m.ThumbsDownFilled),\n  ThumbsUp: () => import('@ds-mo/icons/svg/ThumbsUp').then(m => m.ThumbsUp),\n  ThumbsUpFilled: () => import('@ds-mo/icons/svg/ThumbsUpFilled').then(m => m.ThumbsUpFilled),\n  TirePressure: () => import('@ds-mo/icons/svg/TirePressure').then(m => m.TirePressure),\n  Toggle: () => import('@ds-mo/icons/svg/Toggle').then(m => m.Toggle),\n  TrafficLight: () => import('@ds-mo/icons/svg/TrafficLight').then(m => m.TrafficLight),\n  Trash: () => import('@ds-mo/icons/svg/Trash').then(m => m.Trash),\n  Trophy: () => import('@ds-mo/icons/svg/Trophy').then(m => m.Trophy),\n  TurnSignal: () => import('@ds-mo/icons/svg/TurnSignal').then(m => m.TurnSignal),\n  TurnSignalFilled: () => import('@ds-mo/icons/svg/TurnSignalFilled').then(m => m.TurnSignalFilled),\n  Undo: () => import('@ds-mo/icons/svg/Undo').then(m => m.Undo),\n  Upgrade: () => import('@ds-mo/icons/svg/Upgrade').then(m => m.Upgrade),\n  Upload: () => import('@ds-mo/icons/svg/Upload').then(m => m.Upload),\n  VehicleTrailer: () => import('@ds-mo/icons/svg/VehicleTrailer').then(m => m.VehicleTrailer),\n  VehicleTruck: () => import('@ds-mo/icons/svg/VehicleTruck').then(m => m.VehicleTruck),\n  VehicleTruckMagnifyingGlass: () => import('@ds-mo/icons/svg/VehicleTruckMagnifyingGlass').then(m => m.VehicleTruckMagnifyingGlass),\n  Video: () => import('@ds-mo/icons/svg/Video').then(m => m.Video),\n  ViewMenu: () => import('@ds-mo/icons/svg/ViewMenu').then(m => m.ViewMenu),\n  Volume: () => import('@ds-mo/icons/svg/Volume').then(m => m.Volume),\n  VolumeFilled: () => import('@ds-mo/icons/svg/VolumeFilled').then(m => m.VolumeFilled),\n  VolumeMute: () => import('@ds-mo/icons/svg/VolumeMute').then(m => m.VolumeMute),\n  VolumeMuteFilled: () => import('@ds-mo/icons/svg/VolumeMuteFilled').then(m => m.VolumeMuteFilled),\n  WandSparkle: () => import('@ds-mo/icons/svg/WandSparkle').then(m => m.WandSparkle),\n  Waveform: () => import('@ds-mo/icons/svg/Waveform').then(m => m.Waveform),\n  Webhooks: () => import('@ds-mo/icons/svg/Webhooks').then(m => m.Webhooks),\n  Whistle: () => import('@ds-mo/icons/svg/Whistle').then(m => m.Whistle),\n  WifiHorizontal: () => import('@ds-mo/icons/svg/WifiHorizontal').then(m => m.WifiHorizontal),\n  WifiTower: () => import('@ds-mo/icons/svg/WifiTower').then(m => m.WifiTower),\n  WifiVertical: () => import('@ds-mo/icons/svg/WifiVertical').then(m => m.WifiVertical),\n  WifiVerticalFilled: () => import('@ds-mo/icons/svg/WifiVerticalFilled').then(m => m.WifiVerticalFilled),\n  WifiVerticalFilledDisabled: () => import('@ds-mo/icons/svg/WifiVerticalFilledDisabled').then(m => m.WifiVerticalFilledDisabled),\n  WorkflowA: () => import('@ds-mo/icons/svg/WorkflowA').then(m => m.WorkflowA),\n  WorkflowB: () => import('@ds-mo/icons/svg/WorkflowB').then(m => m.WorkflowB),\n  Wrench: () => import('@ds-mo/icons/svg/Wrench').then(m => m.Wrench),\n  ZoomBackOut: () => import('@ds-mo/icons/svg/ZoomBackOut').then(m => m.ZoomBackOut),\n};\n",
+      "type": "registry:ui"
+    }
+  ]
+}