@m3e/core 1.0.0-rc.3 → 1.0.0

package/dist/custom-elements.json

@@ -17,6 +17,106 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchoring/AnchorOptions.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchoring/AnchorPosition.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchoring/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./AnchorOptions\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./AnchorPosition\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./positionAnchor\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchoring/positionAnchor.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "positionAnchor",
+          "return": {
+            "type": {
+              "text": "Promise<() => void>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "target",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "description": "The element to position."
+            },
+            {
+              "name": "anchor",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "description": "The element in which to anchor `target`."
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "AnchorOptions"
+              },
+              "description": "Options that control positioning relative to the anchor."
+            },
+            {
+              "name": "update",
+              "optional": true,
+              "type": {
+                "text": "((x: number, y: number, position: AnchorPosition) => void) | undefined"
+              },
+              "description": "Callback used to position `target`."
+            }
+          ],
+          "description": "Positions an element relative to an anchor element."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "positionAnchor",
+          "declaration": {
+            "name": "positionAnchor",
+            "module": "src/anchoring/positionAnchor.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/a11y/aria-reference.ts",
@@ -900,106 +1000,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/anchoring/AnchorOptions.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/anchoring/AnchorPosition.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/anchoring/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./AnchorOptions\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./AnchorPosition\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./positionAnchor\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/anchoring/positionAnchor.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "positionAnchor",
-          "return": {
-            "type": {
-              "text": "Promise<() => void>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "target",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "description": "The element to position."
-            },
-            {
-              "name": "anchor",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "description": "The element in which to anchor `target`."
-            },
-            {
-              "name": "options",
-              "type": {
-                "text": "AnchorOptions"
-              },
-              "description": "Options that control positioning relative to the anchor."
-            },
-            {
-              "name": "update",
-              "optional": true,
-              "type": {
-                "text": "((x: number, y: number, position: AnchorPosition) => void) | undefined"
-              },
-              "description": "Callback used to position `target`."
-            }
-          ],
-          "description": "Positions an element relative to an anchor element."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "positionAnchor",
-          "declaration": {
-            "name": "positionAnchor",
-            "module": "src/anchoring/positionAnchor.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/bidi/Directionality.ts",
@@ -1104,102 +1104,23 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/layout/Breakpoint.ts",
+      "path": "src/platform/index.ts",
       "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/layout/BreakpointObserver.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Utility used to detect changes to viewport sizes.",
-          "name": "M3eBreakpointObserver",
-          "members": [
-            {
-              "kind": "method",
-              "name": "observe",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "() => void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "breakpoints",
-                  "type": {
-                    "text": "Array<Breakpoint | string>"
-                  },
-                  "description": "The breakpoints to observe."
-                },
-                {
-                  "name": "callback",
-                  "type": {
-                    "text": "BreakpointObserverCallback"
-                  },
-                  "description": "The callback function invoked when the viewport size changes."
-                }
-              ],
-              "description": "Observes changes to viewport sizes."
-            }
-          ]
-        }
-      ],
       "exports": [
         {
           "kind": "js",
-          "name": "M3eBreakpointObserver",
+          "name": "*",
           "declaration": {
-            "name": "M3eBreakpointObserver",
-            "module": "src/layout/BreakpointObserver.ts"
+            "name": "*",
+            "package": "\"./Platform\""
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/layout/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./Breakpoint\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./BreakpointObserver\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/platform/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./Platform\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/platform/Platform.ts",
-      "declarations": [
+      "path": "src/platform/Platform.ts",
+      "declarations": [
         {
           "kind": "class",
           "description": "Utility used to detect the current platform.",
@@ -1347,84 +1268,63 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/a11y/keycodes/getKeyCode.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "getKeyCode",
-          "return": {
-            "type": {
-              "text": "number"
-            }
-          },
-          "parameters": [
-            {
-              "name": "e",
-              "type": {
-                "text": "KeyboardEvent"
-              },
-              "description": "The `KeyboardEvent` for which to resolve the key code."
-            }
-          ],
-          "description": "Resolves the key code for the specified `KeyboardEvent`."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "getKeyCode",
-          "declaration": {
-            "name": "getKeyCode",
-            "module": "src/a11y/keycodes/getKeyCode.ts"
-          }
-        }
-      ]
+      "path": "src/layout/Breakpoint.ts",
+      "declarations": [],
+      "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/a11y/keycodes/hasModifierKey.ts",
+      "path": "src/layout/BreakpointObserver.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "hasModifierKey",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
-          },
-          "parameters": [
-            {
-              "name": "e",
-              "type": {
-                "text": "KeyboardEvent"
-              },
-              "description": "The `KeyboardEvent` to test."
-            },
+          "kind": "class",
+          "description": "Utility used to detect changes to viewport sizes.",
+          "name": "M3eBreakpointObserver",
+          "members": [
             {
-              "name": "modifiers",
-              "type": {
-                "text": "ModifierKey[]"
+              "kind": "method",
+              "name": "observe",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "() => void"
+                }
               },
-              "description": "The modifier keys to test."
+              "parameters": [
+                {
+                  "name": "breakpoints",
+                  "type": {
+                    "text": "Array<Breakpoint | string>"
+                  },
+                  "description": "The breakpoints to observe."
+                },
+                {
+                  "name": "callback",
+                  "type": {
+                    "text": "BreakpointObserverCallback"
+                  },
+                  "description": "The callback function invoked when the viewport size changes."
+                }
+              ],
+              "description": "Observes changes to viewport sizes."
             }
-          ],
-          "description": "Determines whether a modifier key is pressed."
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "hasModifierKey",
+          "name": "M3eBreakpointObserver",
           "declaration": {
-            "name": "hasModifierKey",
-            "module": "src/a11y/keycodes/hasModifierKey.ts"
+            "name": "M3eBreakpointObserver",
+            "module": "src/layout/BreakpointObserver.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/a11y/keycodes/index.ts",
+      "path": "src/layout/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -1432,31 +1332,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./ModifierKeys\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./KeyCode\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./getKeyCode\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./hasModifierKey\""
+            "package": "\"./Breakpoint\""
           }
         },
         {
@@ -1464,80 +1340,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./isModifierAllowed\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/a11y/keycodes/isModifierAllowed.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "isModifierAllowed",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
-          },
-          "parameters": [
-            {
-              "name": "e",
-              "type": {
-                "text": "KeyboardEvent"
-              },
-              "description": "The `KeyboardEvent` to test."
-            },
-            {
-              "name": "modifiers",
-              "type": {
-                "text": "ModifierKey[]"
-              },
-              "description": "The allowed modifier keys."
-            }
-          ],
-          "description": "Determines whether the specified modifier keys are allowed."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "isModifierAllowed",
-          "declaration": {
-            "name": "isModifierAllowed",
-            "module": "src/a11y/keycodes/isModifierAllowed.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/a11y/keycodes/KeyCode.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/a11y/keycodes/ModifierKeys.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ModifierKeys",
-          "type": {
-            "text": "readonly ModifierKey[]"
-          },
-          "default": "[\"alt\", \"shift\", \"ctrl\", \"meta\"]",
-          "description": "The modifier keys."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ModifierKeys",
-          "declaration": {
-            "name": "ModifierKeys",
-            "module": "src/a11y/keycodes/ModifierKeys.ts"
+            "package": "\"./BreakpointObserver\""
           }
         }
       ]
@@ -5333,25 +5136,222 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/controllers/FocusController.ts",
+      "path": "src/a11y/keycodes/getKeyCode.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "A `ReactiveController` used to monitor the focused state of one or more elements.",
-          "name": "FocusController",
-          "members": [
+          "kind": "function",
+          "name": "getKeyCode",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "#callback",
-              "privacy": "private",
+              "name": "e",
               "type": {
-                "text": "FocusControllerCallback"
+                "text": "KeyboardEvent"
               },
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "#focusInHandler",
+              "description": "The `KeyboardEvent` for which to resolve the key code."
+            }
+          ],
+          "description": "Resolves the key code for the specified `KeyboardEvent`."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getKeyCode",
+          "declaration": {
+            "name": "getKeyCode",
+            "module": "src/a11y/keycodes/getKeyCode.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/a11y/keycodes/hasModifierKey.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "hasModifierKey",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "e",
+              "type": {
+                "text": "KeyboardEvent"
+              },
+              "description": "The `KeyboardEvent` to test."
+            },
+            {
+              "name": "modifiers",
+              "type": {
+                "text": "ModifierKey[]"
+              },
+              "description": "The modifier keys to test."
+            }
+          ],
+          "description": "Determines whether a modifier key is pressed."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "hasModifierKey",
+          "declaration": {
+            "name": "hasModifierKey",
+            "module": "src/a11y/keycodes/hasModifierKey.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/a11y/keycodes/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./ModifierKeys\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./KeyCode\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./getKeyCode\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./hasModifierKey\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./isModifierAllowed\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/a11y/keycodes/isModifierAllowed.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "isModifierAllowed",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "e",
+              "type": {
+                "text": "KeyboardEvent"
+              },
+              "description": "The `KeyboardEvent` to test."
+            },
+            {
+              "name": "modifiers",
+              "type": {
+                "text": "ModifierKey[]"
+              },
+              "description": "The allowed modifier keys."
+            }
+          ],
+          "description": "Determines whether the specified modifier keys are allowed."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isModifierAllowed",
+          "declaration": {
+            "name": "isModifierAllowed",
+            "module": "src/a11y/keycodes/isModifierAllowed.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/a11y/keycodes/KeyCode.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/a11y/keycodes/ModifierKeys.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ModifierKeys",
+          "type": {
+            "text": "readonly ModifierKey[]"
+          },
+          "default": "[\"alt\", \"shift\", \"ctrl\", \"meta\"]",
+          "description": "The modifier keys."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ModifierKeys",
+          "declaration": {
+            "name": "ModifierKeys",
+            "module": "src/a11y/keycodes/ModifierKeys.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/controllers/FocusController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A `ReactiveController` used to monitor the focused state of one or more elements.",
+          "name": "FocusController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#callback",
+              "privacy": "private",
+              "type": {
+                "text": "FocusControllerCallback"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#focusInHandler",
               "privacy": "private",
               "readonly": true
             },
@@ -7257,6 +7257,12 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#touchEndHandler",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#keyDownHandler",
@@ -7379,6 +7385,24 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#handleTouchEnd",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "TouchEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#handleKeyDown",
@@ -10037,6 +10061,11 @@
       "kind": "javascript-module",
       "path": "src/shared/mixins/Labelled.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "updateLabels",
+          "description": "A symbol through which to update labels to reflect a control's current state."
+        },
         {
           "kind": "function",
           "name": "isLabelledMixin",
@@ -10086,16 +10115,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -10110,6 +10129,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",
@@ -10855,265 +10882,25 @@
                 "text": "T"
               },
               "description": "The base class."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "isVerticalMixin",
-          "declaration": {
-            "name": "isVerticalMixin",
-            "module": "src/shared/mixins/Vertical.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Vertical",
-          "declaration": {
-            "name": "Vertical",
-            "module": "src/shared/mixins/Vertical.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/ColorToken.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ColorToken",
-          "type": {
-            "text": "{\r\n  /** High-emphasis fills, texts, and icons against surface. */\r\n  primary: unsafeCSS(\"var(--md-sys-color-primary, #6750A4)\"),\r\n\r\n  /** Text and icons against primary. */\r\n  onPrimary: unsafeCSS(\"var(--md-sys-color-on-primary, #FFFFFF)\"),\r\n\r\n  /** Standout fill color against surface, for key components. */\r\n  primaryContainer: unsafeCSS(\"var(--md-sys-color-primary-container, #EADDFF)\"),\r\n\r\n  /** Text and icons against primary container. */\r\n  onPrimaryContainer: unsafeCSS(\"var(--md-sys-color-on-primary-container, #4F378B)\"),\r\n\r\n  /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  primaryFixed: unsafeCSS(\"var(--md-sys-color-primary-fixed, #EADDFF)\"),\r\n\r\n  /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  primaryFixedDim: unsafeCSS(\"var(--md-sys-color-primary-fixed-dim, #D0BCFF)\"),\r\n\r\n  /** Text and icons against fixed primary. */\r\n  onPrimaryFixed: unsafeCSS(\"var(--md-sys-color-on-primary-fixed, #21005D)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed primary. */\r\n  onPrimaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-primary-fixed-variant, #4F378B)\"),\r\n\r\n  /** Less prominent fills, text, and icons against surface. */\r\n  secondary: unsafeCSS(\"var(--md-sys-color-secondary, #625B71)\"),\r\n\r\n  /** Text and icons against secondary. */\r\n  onSecondary: unsafeCSS(\"var(--md-sys-color-on-secondary, #FFFFFF)\"),\r\n\r\n  /** Less prominent fill color against surface, for recessive components. */\r\n  secondaryContainer: unsafeCSS(\"var(--md-sys-color-secondary-container, #E8DEF8)\"),\r\n\r\n  /** Text and icons against secondary container. */\r\n  onSecondaryContainer: unsafeCSS(\"var(--md-sys-color-on-secondary-container, #4A4458)\"),\r\n\r\n  /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  secondaryFixed: unsafeCSS(\"var(--md-sys-color-secondary-fixed, #E8DEF8)\"),\r\n\r\n  /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  secondaryFixedDim: unsafeCSS(\"var(--md-sys-color-secondary-fixed-dim, #CCC2DC)\"),\r\n\r\n  /** Text and icons against fixed secondary. */\r\n  onSecondaryFixed: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed, #1D192B)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed secondary. */\r\n  onSecondaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed-variant, #4A4458)\"),\r\n\r\n  /** Complementary fills, text, and icons against surface. */\r\n  tertiary: unsafeCSS(\"var(--md-sys-color-tertiary, #7D5260)\"),\r\n\r\n  /** Text and icons against tertiary. */\r\n  onTertiary: unsafeCSS(\"var(--md-sys-color-on-tertiary, #FFFFFF)\"),\r\n\r\n  /** Complementary container color against surface. */\r\n  tertiaryContainer: unsafeCSS(\"var(--md-sys-color-tertiary-container, #FFD8E4)\"),\r\n\r\n  /** Text and icons against tertiary container. */\r\n  onTertiaryContainer: unsafeCSS(\"var(--md-sys-color-on-tertiary-container, #633B48)\"),\r\n\r\n  /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  tertiaryFixed: unsafeCSS(\"var(--md-sys-color-tertiary-fixed, #FFD8E4)\"),\r\n\r\n  /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  tertiaryFixedDim: unsafeCSS(\"var(--md-sys-color-tertiary-fixed-dim, #EFB8C8)\"),\r\n\r\n  /** Text and icons against fixed tertiary. */\r\n  onTertiaryFixed: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed, #31111D)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed tertiary. */\r\n  onTertiaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed-variant, #633B48)\"),\r\n\r\n  /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */\r\n  error: unsafeCSS(\"var(--md-sys-color-error, #B3261E)\"),\r\n\r\n  /** Text and icons against error. */\r\n  onError: unsafeCSS(\"var(--md-sys-color-on-error, #FFFFFF)\"),\r\n\r\n  /** Attention-grabbing fill color against surface. */\r\n  errorContainer: unsafeCSS(\"var(--md-sys-color-error-container, #F9DEDC)\"),\r\n\r\n  /** Text and icons against error container. */\r\n  onErrorContainer: unsafeCSS(\"var(--md-sys-color-on-error-container, #8C1D18)\"),\r\n\r\n  /** Default color for backgrounds. */\r\n  surface: unsafeCSS(\"var(--md-sys-color-surface, #FEF7FF)\"),\r\n\r\n  /** Text and icons against any surface color. */\r\n  onSurface: unsafeCSS(\"var(--md-sys-color-on-surface, #1D1B20)\"),\r\n\r\n  /** Lower-emphasis color for text and icons against any surface color. */\r\n  onSurfaceVariant: unsafeCSS(\"var(--md-sys-color-on-surface-variant, #49454F)\"),\r\n\r\n  /** Lowest-emphasis container color. */\r\n  surfaceContainerLowest: unsafeCSS(\"var(--md-sys-color-surface-container-lowest, #FFFFFF)\"),\r\n\r\n  /** Low-emphasis container color. */\r\n  surfaceContainerLow: unsafeCSS(\"var(--md-sys-color-surface-container-low, #F7F2FA)\"),\r\n\r\n  /** Default container color. */\r\n  surfaceContainer: unsafeCSS(\"var(--md-sys-color-surface-container, #F3EDF7)\"),\r\n\r\n  /** High-emphasis container color. */\r\n  surfaceContainerHigh: unsafeCSS(\"var(--md-sys-color-surface-container-high, #ECE6F0)\"),\r\n\r\n  /** Highest-emphasis container color. */\r\n  surfaceContainerHighest: unsafeCSS(\"var(--md-sys-color-surface-container-highest, #E6E0E9)\"),\r\n\r\n  /** Dimmest surface color in light and dark themes. */\r\n  surfaceDim: unsafeCSS(\"var(--md-sys-color-surface-dim, #DED8E1)\"),\r\n\r\n  /** Brightest surface color in light and dark themes. */\r\n  surfaceBright: unsafeCSS(\"var(--md-sys-color-surface-bright, #FEF7FF)\"),\r\n\r\n  /** Alternate surface color, can be used for active states. */\r\n  surfaceVariant: unsafeCSS(\"var(--md-sys-color-surface-variant, #E7E0EC)\"),\r\n\r\n  /** Background fills for elements which contrast against surface. */\r\n  inverseSurface: unsafeCSS(\"var(--md-sys-color-inverse-surface, #322F35)\"),\r\n\r\n  /** Text and icons against inverse surface. */\r\n  inverseOnSurface: unsafeCSS(\"var(--md-sys-color-inverse-on-surface, #F5EFF7)\"),\r\n\r\n  /** Primary text and icons against inverse surface. */\r\n  inversePrimary: unsafeCSS(\"var(--md-sys-color-inverse-primary, #D0BCFF)\"),\r\n\r\n  /** Important boundaries, such as a text field outline. */\r\n  outline: unsafeCSS(\"var(--md-sys-color-outline, #79747E)\"),\r\n\r\n  /** Decorative elements, such as dividers. */\r\n  outlineVariant: unsafeCSS(\"var(--md-sys-color-outline-variant, #CAC4D0)\"),\r\n\r\n  /** Elevation shadow color. */\r\n  shadow: unsafeCSS(\"var(--md-sys-color-shadow, #000000)\"),\r\n\r\n  /** Backdrop which obscures underlying content. */\r\n  scrim: unsafeCSS(\"var(--md-sys-color-scrim, #000000)\"),\r\n}"
-          },
-          "default": "{ /** High-emphasis fills, texts, and icons against surface. */ primary: unsafeCSS(\"var(--md-sys-color-primary, #6750A4)\"), /** Text and icons against primary. */ onPrimary: unsafeCSS(\"var(--md-sys-color-on-primary, #FFFFFF)\"), /** Standout fill color against surface, for key components. */ primaryContainer: unsafeCSS(\"var(--md-sys-color-primary-container, #EADDFF)\"), /** Text and icons against primary container. */ onPrimaryContainer: unsafeCSS(\"var(--md-sys-color-on-primary-container, #4F378B)\"), /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */ primaryFixed: unsafeCSS(\"var(--md-sys-color-primary-fixed, #EADDFF)\"), /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ primaryFixedDim: unsafeCSS(\"var(--md-sys-color-primary-fixed-dim, #D0BCFF)\"), /** Text and icons against fixed primary. */ onPrimaryFixed: unsafeCSS(\"var(--md-sys-color-on-primary-fixed, #21005D)\"), /** Lower-emphasis text and icons against fixed primary. */ onPrimaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-primary-fixed-variant, #4F378B)\"), /** Less prominent fills, text, and icons against surface. */ secondary: unsafeCSS(\"var(--md-sys-color-secondary, #625B71)\"), /** Text and icons against secondary. */ onSecondary: unsafeCSS(\"var(--md-sys-color-on-secondary, #FFFFFF)\"), /** Less prominent fill color against surface, for recessive components. */ secondaryContainer: unsafeCSS(\"var(--md-sys-color-secondary-container, #E8DEF8)\"), /** Text and icons against secondary container. */ onSecondaryContainer: unsafeCSS(\"var(--md-sys-color-on-secondary-container, #4A4458)\"), /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */ secondaryFixed: unsafeCSS(\"var(--md-sys-color-secondary-fixed, #E8DEF8)\"), /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ secondaryFixedDim: unsafeCSS(\"var(--md-sys-color-secondary-fixed-dim, #CCC2DC)\"), /** Text and icons against fixed secondary. */ onSecondaryFixed: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed, #1D192B)\"), /** Lower-emphasis text and icons against fixed secondary. */ onSecondaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed-variant, #4A4458)\"), /** Complementary fills, text, and icons against surface. */ tertiary: unsafeCSS(\"var(--md-sys-color-tertiary, #7D5260)\"), /** Text and icons against tertiary. */ onTertiary: unsafeCSS(\"var(--md-sys-color-on-tertiary, #FFFFFF)\"), /** Complementary container color against surface. */ tertiaryContainer: unsafeCSS(\"var(--md-sys-color-tertiary-container, #FFD8E4)\"), /** Text and icons against tertiary container. */ onTertiaryContainer: unsafeCSS(\"var(--md-sys-color-on-tertiary-container, #633B48)\"), /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */ tertiaryFixed: unsafeCSS(\"var(--md-sys-color-tertiary-fixed, #FFD8E4)\"), /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ tertiaryFixedDim: unsafeCSS(\"var(--md-sys-color-tertiary-fixed-dim, #EFB8C8)\"), /** Text and icons against fixed tertiary. */ onTertiaryFixed: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed, #31111D)\"), /** Lower-emphasis text and icons against fixed tertiary. */ onTertiaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed-variant, #633B48)\"), /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */ error: unsafeCSS(\"var(--md-sys-color-error, #B3261E)\"), /** Text and icons against error. */ onError: unsafeCSS(\"var(--md-sys-color-on-error, #FFFFFF)\"), /** Attention-grabbing fill color against surface. */ errorContainer: unsafeCSS(\"var(--md-sys-color-error-container, #F9DEDC)\"), /** Text and icons against error container. */ onErrorContainer: unsafeCSS(\"var(--md-sys-color-on-error-container, #8C1D18)\"), /** Default color for backgrounds. */ surface: unsafeCSS(\"var(--md-sys-color-surface, #FEF7FF)\"), /** Text and icons against any surface color. */ onSurface: unsafeCSS(\"var(--md-sys-color-on-surface, #1D1B20)\"), /** Lower-emphasis color for text and icons against any surface color. */ onSurfaceVariant: unsafeCSS(\"var(--md-sys-color-on-surface-variant, #49454F)\"), /** Lowest-emphasis container color. */ surfaceContainerLowest: unsafeCSS(\"var(--md-sys-color-surface-container-lowest, #FFFFFF)\"), /** Low-emphasis container color. */ surfaceContainerLow: unsafeCSS(\"var(--md-sys-color-surface-container-low, #F7F2FA)\"), /** Default container color. */ surfaceContainer: unsafeCSS(\"var(--md-sys-color-surface-container, #F3EDF7)\"), /** High-emphasis container color. */ surfaceContainerHigh: unsafeCSS(\"var(--md-sys-color-surface-container-high, #ECE6F0)\"), /** Highest-emphasis container color. */ surfaceContainerHighest: unsafeCSS(\"var(--md-sys-color-surface-container-highest, #E6E0E9)\"), /** Dimmest surface color in light and dark themes. */ surfaceDim: unsafeCSS(\"var(--md-sys-color-surface-dim, #DED8E1)\"), /** Brightest surface color in light and dark themes. */ surfaceBright: unsafeCSS(\"var(--md-sys-color-surface-bright, #FEF7FF)\"), /** Alternate surface color, can be used for active states. */ surfaceVariant: unsafeCSS(\"var(--md-sys-color-surface-variant, #E7E0EC)\"), /** Background fills for elements which contrast against surface. */ inverseSurface: unsafeCSS(\"var(--md-sys-color-inverse-surface, #322F35)\"), /** Text and icons against inverse surface. */ inverseOnSurface: unsafeCSS(\"var(--md-sys-color-inverse-on-surface, #F5EFF7)\"), /** Primary text and icons against inverse surface. */ inversePrimary: unsafeCSS(\"var(--md-sys-color-inverse-primary, #D0BCFF)\"), /** Important boundaries, such as a text field outline. */ outline: unsafeCSS(\"var(--md-sys-color-outline, #79747E)\"), /** Decorative elements, such as dividers. */ outlineVariant: unsafeCSS(\"var(--md-sys-color-outline-variant, #CAC4D0)\"), /** Elevation shadow color. */ shadow: unsafeCSS(\"var(--md-sys-color-shadow, #000000)\"), /** Backdrop which obscures underlying content. */ scrim: unsafeCSS(\"var(--md-sys-color-scrim, #000000)\"), }",
-          "description": "Design tokens that control color."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColorToken",
-          "declaration": {
-            "name": "ColorToken",
-            "module": "src/shared/tokens/ColorToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/DensityToken.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "DensityToken",
-          "type": {
-            "text": "{\r\n  ..._DensityToken,\r\n\r\n  /**\r\n   * Creates a CSS `calc` that calculates a dimension based on density.\r\n   * @param {number} minScale The minimum supported scale.\r\n   * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density.\r\n   */\r\n  calc(minScale: number): CSSResult {\r\n    return unsafeCSS(`calc(max(${minScale}, ${_DensityToken.scale}) * ${_DensityToken.size})`);\r\n  },\r\n}"
-          },
-          "default": "{ ..._DensityToken, /** * Creates a CSS `calc` that calculates a dimension based on density. * @param {number} minScale The minimum supported scale. * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density. */ calc(minScale: number): CSSResult { return unsafeCSS(`calc(max(${minScale}, ${_DensityToken.scale}) * ${_DensityToken.size})`); }, }",
-          "description": "Design tokens that control density."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DensityToken",
-          "declaration": {
-            "name": "DensityToken",
-            "module": "src/shared/tokens/DensityToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/DesignToken.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "DesignToken",
-          "type": {
-            "text": "{\r\n  /** Design tokens that control color. */\r\n  color: ColorToken,\r\n\r\n  /** Design tokens that control elevation. */\r\n  elevation: ElevationToken,\r\n\r\n  /** Design tokens that control motion. */\r\n  motion: MotionToken,\r\n\r\n  /** Design tokens that control shape. */\r\n  shape: ShapeToken,\r\n\r\n  /** Design tokens that control state layer. */\r\n  state: StateToken,\r\n\r\n  /** Design tokens that control typescale. */\r\n  typescale: TypescaleToken,\r\n\r\n  /** Design tokens that control scrollbars. */\r\n  scrollbar: ScrollbarToken,\r\n\r\n  /** Design tokens that control density. */\r\n  density: DensityToken,\r\n}"
-          },
-          "default": "{ /** Design tokens that control color. */ color: ColorToken, /** Design tokens that control elevation. */ elevation: ElevationToken, /** Design tokens that control motion. */ motion: MotionToken, /** Design tokens that control shape. */ shape: ShapeToken, /** Design tokens that control state layer. */ state: StateToken, /** Design tokens that control typescale. */ typescale: TypescaleToken, /** Design tokens that control scrollbars. */ scrollbar: ScrollbarToken, /** Design tokens that control density. */ density: DensityToken, }",
-          "description": "Design tokens used to style components."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DesignToken",
-          "declaration": {
-            "name": "DesignToken",
-            "module": "src/shared/tokens/DesignToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/ElevationToken.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ElevationToken",
-          "type": {
-            "text": "{\r\n  /** Level 0 elevation. */\r\n  level0: unsafeCSS(`var(--md-sys-elevation-level0, ${elevation(0)})`),\r\n\r\n  /** Level 1 elevation. */\r\n  level1: unsafeCSS(`var(--md-sys-elevation-level1, ${elevation(1)})`),\r\n\r\n  /** Level 2 elevation. */\r\n  level2: unsafeCSS(`var(--md-sys-elevation-level2, ${elevation(3)})`),\r\n\r\n  /** Level 3 elevation. */\r\n  level3: unsafeCSS(`var(--md-sys-elevation-level3, ${elevation(6)})`),\r\n\r\n  /** Level 4 elevation. */\r\n  level4: unsafeCSS(`var(--md-sys-elevation-level4, ${elevation(8)})`),\r\n\r\n  /** Level 5 elevation. */\r\n  level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`),\r\n}"
-          },
-          "default": "{ /** Level 0 elevation. */ level0: unsafeCSS(`var(--md-sys-elevation-level0, ${elevation(0)})`), /** Level 1 elevation. */ level1: unsafeCSS(`var(--md-sys-elevation-level1, ${elevation(1)})`), /** Level 2 elevation. */ level2: unsafeCSS(`var(--md-sys-elevation-level2, ${elevation(3)})`), /** Level 3 elevation. */ level3: unsafeCSS(`var(--md-sys-elevation-level3, ${elevation(6)})`), /** Level 4 elevation. */ level4: unsafeCSS(`var(--md-sys-elevation-level4, ${elevation(8)})`), /** Level 5 elevation. */ level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`), }",
-          "description": "Design tokens that control elevation."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ElevationToken",
-          "declaration": {
-            "name": "ElevationToken",
-            "module": "src/shared/tokens/ElevationToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./DesignToken\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/MotionToken.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "MotionToken",
-          "type": {
-            "text": "{\r\n  /** Design tokens that control transition effects. */\r\n  easing: EasingToken,\r\n\r\n  /** Design tokens that control transition duration. */\r\n  duration: DurationToken,\r\n\r\n  /** Design tokens that control spring effects. */\r\n  spring: SpringToken,\r\n}"
-          },
-          "default": "{ /** Design tokens that control transition effects. */ easing: EasingToken, /** Design tokens that control transition duration. */ duration: DurationToken, /** Design tokens that control spring effects. */ spring: SpringToken, }",
-          "description": "Design tokens that control motion."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "MotionToken",
-          "declaration": {
-            "name": "MotionToken",
-            "module": "src/shared/tokens/MotionToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/ScrollbarToken.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ScrollbarToken",
-          "type": {
-            "text": "{\r\n  /** Width of a standard scrollbar. */\r\n  width: unsafeCSS(`var(--m3e-scrollbar-width, auto)`),\r\n\r\n  /** Width of a thin scrollbar. */\r\n  thinWidth: unsafeCSS(`var(--m3e-scrollbar-thin-width, thin)`),\r\n\r\n  /** Color of a scrollbar. */\r\n  color: unsafeCSS(`var(--m3e-scrollbar-thumb-color, #938f94) var(--m3e-scrollbar-track-color, transparent)`),\r\n}"
-          },
-          "default": "{ /** Width of a standard scrollbar. */ width: unsafeCSS(`var(--m3e-scrollbar-width, auto)`), /** Width of a thin scrollbar. */ thinWidth: unsafeCSS(`var(--m3e-scrollbar-thin-width, thin)`), /** Color of a scrollbar. */ color: unsafeCSS(`var(--m3e-scrollbar-thumb-color, #938f94) var(--m3e-scrollbar-track-color, transparent)`), }",
-          "description": "Design tokens that control scrollbars."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ScrollbarToken",
-          "declaration": {
-            "name": "ScrollbarToken",
-            "module": "src/shared/tokens/ScrollbarToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/ShapeToken.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "ShapeToken",
-          "type": {
-            "text": "{\r\n  corner: {\r\n    /** Fully rounded symmetric shape. */\r\n    full: unsafeCSS(\"var(--md-sys-shape-corner-full, 624.9375rem)\"),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the top. */\r\n    extraLargeTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-large-top, ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Extra large rounded symmetric shape. */\r\n    extraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-large, ${CornerValue.extraLarge})`),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the end. */\r\n    extraLargeEnd: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none}`\r\n    ),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the start. */\r\n    extraLargeStart: unsafeCSS(\r\n      `${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraLarge}`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the top. */\r\n    largeTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-top, ${CornerValue.large} ${CornerValue.large} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the end. */\r\n    largeEnd: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-end, ${CornerValue.none} ${CornerValue.large} ${CornerValue.large} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the start. */\r\n    largeStart: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-end, ${CornerValue.large} ${CornerValue.none} ${CornerValue.none} ${CornerValue.large})`\r\n    ),\r\n\r\n    /** Large rounded symmetric shape. */\r\n    large: unsafeCSS(`var(--md-sys-shape-corner-large, ${CornerValue.large})`),\r\n\r\n    /** Medium rounded symmetric shape. */\r\n    medium: unsafeCSS(`var(--md-sys-shape-corner-medium, ${CornerValue.medium})`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the top. */\r\n    mediumTop: unsafeCSS(`${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none} ${CornerValue.none}`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the end. */\r\n    mediumEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none}`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the start. */\r\n    mediumStart: unsafeCSS(`${CornerValue.medium} ${CornerValue.none} ${CornerValue.none} ${CornerValue.medium}`),\r\n\r\n    /** Small rounded symmetric shape. */\r\n    small: unsafeCSS(`var(--md-sys-shape-corner-small, ${CornerValue.small})`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the top. */\r\n    smallTop: unsafeCSS(`${CornerValue.small} ${CornerValue.small} ${CornerValue.none} ${CornerValue.none}`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the end. */\r\n    smallEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.small} ${CornerValue.small} ${CornerValue.none}`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the start. */\r\n    smallStart: unsafeCSS(`${CornerValue.small} ${CornerValue.none} ${CornerValue.none} ${CornerValue.small}`),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the top. */\r\n    extraSmallTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-small-top, ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Extra small rounded symmetric shape. */\r\n    extraSmall: unsafeCSS(`var(--md-sys-shape-corner-extra-small, ${CornerValue.extraSmall})`),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the end. */\r\n    extraSmallEnd: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none}`\r\n    ),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the start. */\r\n    extraSmallStart: unsafeCSS(\r\n      `${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall}`\r\n    ),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the bottom. */\r\n    extraSmallBottom: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall}`\r\n    ),\r\n\r\n    /** No rounding. */\r\n    none: unsafeCSS(`var(--md-sys-shape-corner-none, ${CornerValue.none})`),\r\n\r\n    /** Increased large rounded symmetric shape. */\r\n    largeIncreased: unsafeCSS(`var(--md-sys-shape-corner-large-increased, ${CornerValue.largeIncreased})`),\r\n\r\n    /** Increased extra large rounded symmetric shape. */\r\n    extraLargeIncreased: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-large-increased, ${CornerValue.extraLargeIncreased})`\r\n    ),\r\n\r\n    /** Extra extra large rounded symmetric shape. */\r\n    extraExtraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-extra-large, ${CornerValue.extraExtraLarge})`),\r\n\r\n    /** Design tokens that control specific corners. */\r\n    value: CornerValue,\r\n  },\r\n}"
-          },
-          "default": "{ corner: { /** Fully rounded symmetric shape. */ full: unsafeCSS(\"var(--md-sys-shape-corner-full, 624.9375rem)\"), /** Extra large rounded asymmetric shape directed towards the top. */ extraLargeTop: unsafeCSS( `var(--md-sys-shape-corner-extra-large-top, ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none})` ), /** Extra large rounded symmetric shape. */ extraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-large, ${CornerValue.extraLarge})`), /** Extra large rounded asymmetric shape directed towards the end. */ extraLargeEnd: unsafeCSS( `${CornerValue.none} ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none}` ), /** Extra large rounded asymmetric shape directed towards the start. */ extraLargeStart: unsafeCSS( `${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraLarge}` ), /** Large rounded asymmetric shape directed towards the top. */ largeTop: unsafeCSS( `var(--md-sys-shape-corner-large-top, ${CornerValue.large} ${CornerValue.large} ${CornerValue.none} ${CornerValue.none})` ), /** Large rounded asymmetric shape directed towards the end. */ largeEnd: unsafeCSS( `var(--md-sys-shape-corner-large-end, ${CornerValue.none} ${CornerValue.large} ${CornerValue.large} ${CornerValue.none})` ), /** Large rounded asymmetric shape directed towards the start. */ largeStart: unsafeCSS( `var(--md-sys-shape-corner-large-end, ${CornerValue.large} ${CornerValue.none} ${CornerValue.none} ${CornerValue.large})` ), /** Large rounded symmetric shape. */ large: unsafeCSS(`var(--md-sys-shape-corner-large, ${CornerValue.large})`), /** Medium rounded symmetric shape. */ medium: unsafeCSS(`var(--md-sys-shape-corner-medium, ${CornerValue.medium})`), /** Medium rounded asymmetric shape directed towards the top. */ mediumTop: unsafeCSS(`${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none} ${CornerValue.none}`), /** Medium rounded asymmetric shape directed towards the end. */ mediumEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none}`), /** Medium rounded asymmetric shape directed towards the start. */ mediumStart: unsafeCSS(`${CornerValue.medium} ${CornerValue.none} ${CornerValue.none} ${CornerValue.medium}`), /** Small rounded symmetric shape. */ small: unsafeCSS(`var(--md-sys-shape-corner-small, ${CornerValue.small})`), /** Small rounded asymmetric shape directed towards the top. */ smallTop: unsafeCSS(`${CornerValue.small} ${CornerValue.small} ${CornerValue.none} ${CornerValue.none}`), /** Small rounded asymmetric shape directed towards the end. */ smallEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.small} ${CornerValue.small} ${CornerValue.none}`), /** Small rounded asymmetric shape directed towards the start. */ smallStart: unsafeCSS(`${CornerValue.small} ${CornerValue.none} ${CornerValue.none} ${CornerValue.small}`), /** Extra small rounded asymmetric shape directed towards the top. */ extraSmallTop: unsafeCSS( `var(--md-sys-shape-corner-extra-small-top, ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none})` ), /** Extra small rounded symmetric shape. */ extraSmall: unsafeCSS(`var(--md-sys-shape-corner-extra-small, ${CornerValue.extraSmall})`), /** Extra small rounded asymmetric shape directed towards the end. */ extraSmallEnd: unsafeCSS( `${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none}` ), /** Extra small rounded asymmetric shape directed towards the start. */ extraSmallStart: unsafeCSS( `${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall}` ), /** Extra small rounded asymmetric shape directed towards the bottom. */ extraSmallBottom: unsafeCSS( `${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall}` ), /** No rounding. */ none: unsafeCSS(`var(--md-sys-shape-corner-none, ${CornerValue.none})`), /** Increased large rounded symmetric shape. */ largeIncreased: unsafeCSS(`var(--md-sys-shape-corner-large-increased, ${CornerValue.largeIncreased})`), /** Increased extra large rounded symmetric shape. */ extraLargeIncreased: unsafeCSS( `var(--md-sys-shape-corner-extra-large-increased, ${CornerValue.extraLargeIncreased})` ), /** Extra extra large rounded symmetric shape. */ extraExtraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-extra-large, ${CornerValue.extraExtraLarge})`), /** Design tokens that control specific corners. */ value: CornerValue, }, }",
-          "description": "Design tokens that control shape."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ShapeToken",
-          "declaration": {
-            "name": "ShapeToken",
-            "module": "src/shared/tokens/ShapeToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/StateToken.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "StateToken",
-          "type": {
-            "text": "{\r\n  /** Opacity of the state layer on focus. */\r\n  focusStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-focus-state-layer-opacity, 10%)\"),\r\n\r\n  /** Opacity of the state layer on hover. */\r\n  hoverStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-hover-state-layer-opacity, 8%)\"),\r\n\r\n  /** Opacity of the state layer on pressed. */\r\n  pressedStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-pressed-state-layer-opacity, 10%)\"),\r\n}"
-          },
-          "default": "{ /** Opacity of the state layer on focus. */ focusStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-focus-state-layer-opacity, 10%)\"), /** Opacity of the state layer on hover. */ hoverStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-hover-state-layer-opacity, 8%)\"), /** Opacity of the state layer on pressed. */ pressedStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-pressed-state-layer-opacity, 10%)\"), }",
-          "description": "Design tokens that control state layer."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "StateToken",
-          "declaration": {
-            "name": "StateToken",
-            "module": "src/shared/tokens/StateToken.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/tokens/TypescaleToken.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "TypescaleToken",
-          "type": {
-            "text": "{\r\n  /** Standard typescale variant. */\r\n  standard: {\r\n    /** Short, important text or numerals. */\r\n    display: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-large-font-size, 3.5625rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-large-line-height, 4rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-large-tracking, 0.015625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-size, 2.8125rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-line-height, 3.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-small-font-size, 2.25rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-small-line-height, 2.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Short, high-emphasis text on smaller screens. */\r\n    headline: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-size, 2rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-line-height, 2.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-size, 1.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-line-height, 2.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-size, 1.5rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-line-height, 2rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Medium-emphasis text that remains relatively short. */\r\n    title: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-large-font-size, 1.375rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-large-line-height, 1.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-medium-tracking, 0.009375rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-small-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-small-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-small-tracking, 0.00625rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Longer passages of text. */\r\n    body: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-large-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-large-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-large-tracking, 0.03125rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-medium-tracking, 0.015625rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-small-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-small-tracking, 0.025rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Smaller, utilitarian text. */\r\n    label: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-large-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-large-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-large-tracking, 0.00625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-medium-tracking, 0.03125rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-small-font-size, 0.6875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-small-tracking, 0.03125rem)\"),\r\n      },\r\n    },\r\n  },\r\n\r\n  /** Emphasized typescale variant. */\r\n  emphasized: {\r\n    /** Short, important text or numerals. */\r\n    display: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-size, 3.5625rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-line-height, 4rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-tracking, 0.015625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-size, 2.8125rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-line-height, 3.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-size, 2.25rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-line-height, 2.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Short, high-emphasis text on smaller screens. */\r\n    headline: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-size, 2rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-line-height, 2.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-size, 1.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-line-height, 2.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-size, 1.5rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-line-height, 2rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Medium-emphasis text that remains relatively short. */\r\n    title: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-size, 1.375rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-line-height, 1.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-line-height, 3.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-tracking, 0.009375rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-tracking, 0.00625rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Longer passages of text. */\r\n    body: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-tracking, 0.03125rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-tracking, 0.015625rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-tracking, 0.025rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Smaller, utilitarian text. */\r\n    label: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-tracking, 0.00625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-tracking, 0.03125rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-size, 0.6875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-tracking, 0.03125rem)\"),\r\n      },\r\n    },\r\n  },\r\n}"
-          },
-          "default": "{ /** Standard typescale variant. */ standard: { /** Short, important text or numerals. */ display: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-large-font-size, 3.5625rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-large-line-height, 4rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-large-tracking, 0.015625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-size, 2.8125rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-line-height, 3.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-small-font-size, 2.25rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-small-line-height, 2.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-small-tracking, 0)\"), }, }, /** Short, high-emphasis text on smaller screens. */ headline: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-size, 2rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-line-height, 2.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-size, 1.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-line-height, 2.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-size, 1.5rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-line-height, 2rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-small-tracking, 0)\"), }, }, /** Medium-emphasis text that remains relatively short. */ title: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-large-font-size, 1.375rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-large-line-height, 1.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-medium-tracking, 0.009375rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-small-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-small-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-small-tracking, 0.00625rem)\"), }, }, /** Longer passages of text. */ body: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-large-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-large-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-large-tracking, 0.03125rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-medium-tracking, 0.015625rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-small-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-small-tracking, 0.025rem)\"), }, }, /** Smaller, utilitarian text. */ label: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-large-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-large-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-large-tracking, 0.00625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-medium-tracking, 0.03125rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-small-font-size, 0.6875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-small-tracking, 0.03125rem)\"), }, }, }, /** Emphasized typescale variant. */ emphasized: { /** Short, important text or numerals. */ display: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-size, 3.5625rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-line-height, 4rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-tracking, 0.015625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-size, 2.8125rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-line-height, 3.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-size, 2.25rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-line-height, 2.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-tracking, 0)\"), }, }, /** Short, high-emphasis text on smaller screens. */ headline: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-size, 2rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-line-height, 2.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-size, 1.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-line-height, 2.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-size, 1.5rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-line-height, 2rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-tracking, 0)\"), }, }, /** Medium-emphasis text that remains relatively short. */ title: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-size, 1.375rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-line-height, 1.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-line-height, 3.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-tracking, 0.009375rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-tracking, 0.00625rem)\"), }, }, /** Longer passages of text. */ body: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-tracking, 0.03125rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-tracking, 0.015625rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-tracking, 0.025rem)\"), }, }, /** Smaller, utilitarian text. */ label: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-tracking, 0.00625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-tracking, 0.03125rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-size, 0.6875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-tracking, 0.03125rem)\"), }, }, }, }",
-          "description": "Design tokens that control typescale."
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TypescaleToken",
+          "name": "isVerticalMixin",
           "declaration": {
-            "name": "TypescaleToken",
-            "module": "src/shared/tokens/TypescaleToken.ts"
+            "name": "isVerticalMixin",
+            "module": "src/shared/mixins/Vertical.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Vertical",
+          "declaration": {
+            "name": "Vertical",
+            "module": "src/shared/mixins/Vertical.ts"
           }
         }
       ]
@@ -13729,6 +13516,246 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/ColorToken.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ColorToken",
+          "type": {
+            "text": "{\r\n  /** High-emphasis fills, texts, and icons against surface. */\r\n  primary: unsafeCSS(\"var(--md-sys-color-primary, #6750A4)\"),\r\n\r\n  /** Text and icons against primary. */\r\n  onPrimary: unsafeCSS(\"var(--md-sys-color-on-primary, #FFFFFF)\"),\r\n\r\n  /** Standout fill color against surface, for key components. */\r\n  primaryContainer: unsafeCSS(\"var(--md-sys-color-primary-container, #EADDFF)\"),\r\n\r\n  /** Text and icons against primary container. */\r\n  onPrimaryContainer: unsafeCSS(\"var(--md-sys-color-on-primary-container, #4F378B)\"),\r\n\r\n  /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  primaryFixed: unsafeCSS(\"var(--md-sys-color-primary-fixed, #EADDFF)\"),\r\n\r\n  /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  primaryFixedDim: unsafeCSS(\"var(--md-sys-color-primary-fixed-dim, #D0BCFF)\"),\r\n\r\n  /** Text and icons against fixed primary. */\r\n  onPrimaryFixed: unsafeCSS(\"var(--md-sys-color-on-primary-fixed, #21005D)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed primary. */\r\n  onPrimaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-primary-fixed-variant, #4F378B)\"),\r\n\r\n  /** Less prominent fills, text, and icons against surface. */\r\n  secondary: unsafeCSS(\"var(--md-sys-color-secondary, #625B71)\"),\r\n\r\n  /** Text and icons against secondary. */\r\n  onSecondary: unsafeCSS(\"var(--md-sys-color-on-secondary, #FFFFFF)\"),\r\n\r\n  /** Less prominent fill color against surface, for recessive components. */\r\n  secondaryContainer: unsafeCSS(\"var(--md-sys-color-secondary-container, #E8DEF8)\"),\r\n\r\n  /** Text and icons against secondary container. */\r\n  onSecondaryContainer: unsafeCSS(\"var(--md-sys-color-on-secondary-container, #4A4458)\"),\r\n\r\n  /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  secondaryFixed: unsafeCSS(\"var(--md-sys-color-secondary-fixed, #E8DEF8)\"),\r\n\r\n  /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  secondaryFixedDim: unsafeCSS(\"var(--md-sys-color-secondary-fixed-dim, #CCC2DC)\"),\r\n\r\n  /** Text and icons against fixed secondary. */\r\n  onSecondaryFixed: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed, #1D192B)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed secondary. */\r\n  onSecondaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed-variant, #4A4458)\"),\r\n\r\n  /** Complementary fills, text, and icons against surface. */\r\n  tertiary: unsafeCSS(\"var(--md-sys-color-tertiary, #7D5260)\"),\r\n\r\n  /** Text and icons against tertiary. */\r\n  onTertiary: unsafeCSS(\"var(--md-sys-color-on-tertiary, #FFFFFF)\"),\r\n\r\n  /** Complementary container color against surface. */\r\n  tertiaryContainer: unsafeCSS(\"var(--md-sys-color-tertiary-container, #FFD8E4)\"),\r\n\r\n  /** Text and icons against tertiary container. */\r\n  onTertiaryContainer: unsafeCSS(\"var(--md-sys-color-on-tertiary-container, #633B48)\"),\r\n\r\n  /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */\r\n  tertiaryFixed: unsafeCSS(\"var(--md-sys-color-tertiary-fixed, #FFD8E4)\"),\r\n\r\n  /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */\r\n  tertiaryFixedDim: unsafeCSS(\"var(--md-sys-color-tertiary-fixed-dim, #EFB8C8)\"),\r\n\r\n  /** Text and icons against fixed tertiary. */\r\n  onTertiaryFixed: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed, #31111D)\"),\r\n\r\n  /** Lower-emphasis text and icons against fixed tertiary. */\r\n  onTertiaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed-variant, #633B48)\"),\r\n\r\n  /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */\r\n  error: unsafeCSS(\"var(--md-sys-color-error, #B3261E)\"),\r\n\r\n  /** Text and icons against error. */\r\n  onError: unsafeCSS(\"var(--md-sys-color-on-error, #FFFFFF)\"),\r\n\r\n  /** Attention-grabbing fill color against surface. */\r\n  errorContainer: unsafeCSS(\"var(--md-sys-color-error-container, #F9DEDC)\"),\r\n\r\n  /** Text and icons against error container. */\r\n  onErrorContainer: unsafeCSS(\"var(--md-sys-color-on-error-container, #8C1D18)\"),\r\n\r\n  /** Default color for backgrounds. */\r\n  surface: unsafeCSS(\"var(--md-sys-color-surface, #FEF7FF)\"),\r\n\r\n  /** Text and icons against any surface color. */\r\n  onSurface: unsafeCSS(\"var(--md-sys-color-on-surface, #1D1B20)\"),\r\n\r\n  /** Lower-emphasis color for text and icons against any surface color. */\r\n  onSurfaceVariant: unsafeCSS(\"var(--md-sys-color-on-surface-variant, #49454F)\"),\r\n\r\n  /** Lowest-emphasis container color. */\r\n  surfaceContainerLowest: unsafeCSS(\"var(--md-sys-color-surface-container-lowest, #FFFFFF)\"),\r\n\r\n  /** Low-emphasis container color. */\r\n  surfaceContainerLow: unsafeCSS(\"var(--md-sys-color-surface-container-low, #F7F2FA)\"),\r\n\r\n  /** Default container color. */\r\n  surfaceContainer: unsafeCSS(\"var(--md-sys-color-surface-container, #F3EDF7)\"),\r\n\r\n  /** High-emphasis container color. */\r\n  surfaceContainerHigh: unsafeCSS(\"var(--md-sys-color-surface-container-high, #ECE6F0)\"),\r\n\r\n  /** Highest-emphasis container color. */\r\n  surfaceContainerHighest: unsafeCSS(\"var(--md-sys-color-surface-container-highest, #E6E0E9)\"),\r\n\r\n  /** Dimmest surface color in light and dark themes. */\r\n  surfaceDim: unsafeCSS(\"var(--md-sys-color-surface-dim, #DED8E1)\"),\r\n\r\n  /** Brightest surface color in light and dark themes. */\r\n  surfaceBright: unsafeCSS(\"var(--md-sys-color-surface-bright, #FEF7FF)\"),\r\n\r\n  /** Alternate surface color, can be used for active states. */\r\n  surfaceVariant: unsafeCSS(\"var(--md-sys-color-surface-variant, #E7E0EC)\"),\r\n\r\n  /** Background fills for elements which contrast against surface. */\r\n  inverseSurface: unsafeCSS(\"var(--md-sys-color-inverse-surface, #322F35)\"),\r\n\r\n  /** Text and icons against inverse surface. */\r\n  inverseOnSurface: unsafeCSS(\"var(--md-sys-color-inverse-on-surface, #F5EFF7)\"),\r\n\r\n  /** Primary text and icons against inverse surface. */\r\n  inversePrimary: unsafeCSS(\"var(--md-sys-color-inverse-primary, #D0BCFF)\"),\r\n\r\n  /** Important boundaries, such as a text field outline. */\r\n  outline: unsafeCSS(\"var(--md-sys-color-outline, #79747E)\"),\r\n\r\n  /** Decorative elements, such as dividers. */\r\n  outlineVariant: unsafeCSS(\"var(--md-sys-color-outline-variant, #CAC4D0)\"),\r\n\r\n  /** Elevation shadow color. */\r\n  shadow: unsafeCSS(\"var(--md-sys-color-shadow, #000000)\"),\r\n\r\n  /** Backdrop which obscures underlying content. */\r\n  scrim: unsafeCSS(\"var(--md-sys-color-scrim, #000000)\"),\r\n}"
+          },
+          "default": "{ /** High-emphasis fills, texts, and icons against surface. */ primary: unsafeCSS(\"var(--md-sys-color-primary, #6750A4)\"), /** Text and icons against primary. */ onPrimary: unsafeCSS(\"var(--md-sys-color-on-primary, #FFFFFF)\"), /** Standout fill color against surface, for key components. */ primaryContainer: unsafeCSS(\"var(--md-sys-color-primary-container, #EADDFF)\"), /** Text and icons against primary container. */ onPrimaryContainer: unsafeCSS(\"var(--md-sys-color-on-primary-container, #4F378B)\"), /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */ primaryFixed: unsafeCSS(\"var(--md-sys-color-primary-fixed, #EADDFF)\"), /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ primaryFixedDim: unsafeCSS(\"var(--md-sys-color-primary-fixed-dim, #D0BCFF)\"), /** Text and icons against fixed primary. */ onPrimaryFixed: unsafeCSS(\"var(--md-sys-color-on-primary-fixed, #21005D)\"), /** Lower-emphasis text and icons against fixed primary. */ onPrimaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-primary-fixed-variant, #4F378B)\"), /** Less prominent fills, text, and icons against surface. */ secondary: unsafeCSS(\"var(--md-sys-color-secondary, #625B71)\"), /** Text and icons against secondary. */ onSecondary: unsafeCSS(\"var(--md-sys-color-on-secondary, #FFFFFF)\"), /** Less prominent fill color against surface, for recessive components. */ secondaryContainer: unsafeCSS(\"var(--md-sys-color-secondary-container, #E8DEF8)\"), /** Text and icons against secondary container. */ onSecondaryContainer: unsafeCSS(\"var(--md-sys-color-on-secondary-container, #4A4458)\"), /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */ secondaryFixed: unsafeCSS(\"var(--md-sys-color-secondary-fixed, #E8DEF8)\"), /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ secondaryFixedDim: unsafeCSS(\"var(--md-sys-color-secondary-fixed-dim, #CCC2DC)\"), /** Text and icons against fixed secondary. */ onSecondaryFixed: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed, #1D192B)\"), /** Lower-emphasis text and icons against fixed secondary. */ onSecondaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-secondary-fixed-variant, #4A4458)\"), /** Complementary fills, text, and icons against surface. */ tertiary: unsafeCSS(\"var(--md-sys-color-tertiary, #7D5260)\"), /** Text and icons against tertiary. */ onTertiary: unsafeCSS(\"var(--md-sys-color-on-tertiary, #FFFFFF)\"), /** Complementary container color against surface. */ tertiaryContainer: unsafeCSS(\"var(--md-sys-color-tertiary-container, #FFD8E4)\"), /** Text and icons against tertiary container. */ onTertiaryContainer: unsafeCSS(\"var(--md-sys-color-on-tertiary-container, #633B48)\"), /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */ tertiaryFixed: unsafeCSS(\"var(--md-sys-color-tertiary-fixed, #FFD8E4)\"), /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */ tertiaryFixedDim: unsafeCSS(\"var(--md-sys-color-tertiary-fixed-dim, #EFB8C8)\"), /** Text and icons against fixed tertiary. */ onTertiaryFixed: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed, #31111D)\"), /** Lower-emphasis text and icons against fixed tertiary. */ onTertiaryFixedVariant: unsafeCSS(\"var(--md-sys-color-on-tertiary-fixed-variant, #633B48)\"), /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */ error: unsafeCSS(\"var(--md-sys-color-error, #B3261E)\"), /** Text and icons against error. */ onError: unsafeCSS(\"var(--md-sys-color-on-error, #FFFFFF)\"), /** Attention-grabbing fill color against surface. */ errorContainer: unsafeCSS(\"var(--md-sys-color-error-container, #F9DEDC)\"), /** Text and icons against error container. */ onErrorContainer: unsafeCSS(\"var(--md-sys-color-on-error-container, #8C1D18)\"), /** Default color for backgrounds. */ surface: unsafeCSS(\"var(--md-sys-color-surface, #FEF7FF)\"), /** Text and icons against any surface color. */ onSurface: unsafeCSS(\"var(--md-sys-color-on-surface, #1D1B20)\"), /** Lower-emphasis color for text and icons against any surface color. */ onSurfaceVariant: unsafeCSS(\"var(--md-sys-color-on-surface-variant, #49454F)\"), /** Lowest-emphasis container color. */ surfaceContainerLowest: unsafeCSS(\"var(--md-sys-color-surface-container-lowest, #FFFFFF)\"), /** Low-emphasis container color. */ surfaceContainerLow: unsafeCSS(\"var(--md-sys-color-surface-container-low, #F7F2FA)\"), /** Default container color. */ surfaceContainer: unsafeCSS(\"var(--md-sys-color-surface-container, #F3EDF7)\"), /** High-emphasis container color. */ surfaceContainerHigh: unsafeCSS(\"var(--md-sys-color-surface-container-high, #ECE6F0)\"), /** Highest-emphasis container color. */ surfaceContainerHighest: unsafeCSS(\"var(--md-sys-color-surface-container-highest, #E6E0E9)\"), /** Dimmest surface color in light and dark themes. */ surfaceDim: unsafeCSS(\"var(--md-sys-color-surface-dim, #DED8E1)\"), /** Brightest surface color in light and dark themes. */ surfaceBright: unsafeCSS(\"var(--md-sys-color-surface-bright, #FEF7FF)\"), /** Alternate surface color, can be used for active states. */ surfaceVariant: unsafeCSS(\"var(--md-sys-color-surface-variant, #E7E0EC)\"), /** Background fills for elements which contrast against surface. */ inverseSurface: unsafeCSS(\"var(--md-sys-color-inverse-surface, #322F35)\"), /** Text and icons against inverse surface. */ inverseOnSurface: unsafeCSS(\"var(--md-sys-color-inverse-on-surface, #F5EFF7)\"), /** Primary text and icons against inverse surface. */ inversePrimary: unsafeCSS(\"var(--md-sys-color-inverse-primary, #D0BCFF)\"), /** Important boundaries, such as a text field outline. */ outline: unsafeCSS(\"var(--md-sys-color-outline, #79747E)\"), /** Decorative elements, such as dividers. */ outlineVariant: unsafeCSS(\"var(--md-sys-color-outline-variant, #CAC4D0)\"), /** Elevation shadow color. */ shadow: unsafeCSS(\"var(--md-sys-color-shadow, #000000)\"), /** Backdrop which obscures underlying content. */ scrim: unsafeCSS(\"var(--md-sys-color-scrim, #000000)\"), }",
+          "description": "Design tokens that control color."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorToken",
+          "declaration": {
+            "name": "ColorToken",
+            "module": "src/shared/tokens/ColorToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/DensityToken.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DensityToken",
+          "type": {
+            "text": "{\r\n  ..._DensityToken,\r\n\r\n  /**\r\n   * Creates a CSS `calc` that calculates a dimension based on density.\r\n   * @param {number} minScale The minimum supported scale.\r\n   * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density.\r\n   */\r\n  calc(minScale: number): CSSResult {\r\n    return unsafeCSS(`calc(max(${minScale}, ${_DensityToken.scale}) * ${_DensityToken.size})`);\r\n  },\r\n}"
+          },
+          "default": "{ ..._DensityToken, /** * Creates a CSS `calc` that calculates a dimension based on density. * @param {number} minScale The minimum supported scale. * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density. */ calc(minScale: number): CSSResult { return unsafeCSS(`calc(max(${minScale}, ${_DensityToken.scale}) * ${_DensityToken.size})`); }, }",
+          "description": "Design tokens that control density."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DensityToken",
+          "declaration": {
+            "name": "DensityToken",
+            "module": "src/shared/tokens/DensityToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/DesignToken.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DesignToken",
+          "type": {
+            "text": "{\r\n  /** Design tokens that control color. */\r\n  color: ColorToken,\r\n\r\n  /** Design tokens that control elevation. */\r\n  elevation: ElevationToken,\r\n\r\n  /** Design tokens that control motion. */\r\n  motion: MotionToken,\r\n\r\n  /** Design tokens that control shape. */\r\n  shape: ShapeToken,\r\n\r\n  /** Design tokens that control state layer. */\r\n  state: StateToken,\r\n\r\n  /** Design tokens that control typescale. */\r\n  typescale: TypescaleToken,\r\n\r\n  /** Design tokens that control scrollbars. */\r\n  scrollbar: ScrollbarToken,\r\n\r\n  /** Design tokens that control density. */\r\n  density: DensityToken,\r\n}"
+          },
+          "default": "{ /** Design tokens that control color. */ color: ColorToken, /** Design tokens that control elevation. */ elevation: ElevationToken, /** Design tokens that control motion. */ motion: MotionToken, /** Design tokens that control shape. */ shape: ShapeToken, /** Design tokens that control state layer. */ state: StateToken, /** Design tokens that control typescale. */ typescale: TypescaleToken, /** Design tokens that control scrollbars. */ scrollbar: ScrollbarToken, /** Design tokens that control density. */ density: DensityToken, }",
+          "description": "Design tokens used to style components."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DesignToken",
+          "declaration": {
+            "name": "DesignToken",
+            "module": "src/shared/tokens/DesignToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/ElevationToken.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ElevationToken",
+          "type": {
+            "text": "{\r\n  /** Level 0 elevation. */\r\n  level0: unsafeCSS(`var(--md-sys-elevation-level0, ${elevation(0)})`),\r\n\r\n  /** Level 1 elevation. */\r\n  level1: unsafeCSS(`var(--md-sys-elevation-level1, ${elevation(1)})`),\r\n\r\n  /** Level 2 elevation. */\r\n  level2: unsafeCSS(`var(--md-sys-elevation-level2, ${elevation(3)})`),\r\n\r\n  /** Level 3 elevation. */\r\n  level3: unsafeCSS(`var(--md-sys-elevation-level3, ${elevation(6)})`),\r\n\r\n  /** Level 4 elevation. */\r\n  level4: unsafeCSS(`var(--md-sys-elevation-level4, ${elevation(8)})`),\r\n\r\n  /** Level 5 elevation. */\r\n  level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`),\r\n}"
+          },
+          "default": "{ /** Level 0 elevation. */ level0: unsafeCSS(`var(--md-sys-elevation-level0, ${elevation(0)})`), /** Level 1 elevation. */ level1: unsafeCSS(`var(--md-sys-elevation-level1, ${elevation(1)})`), /** Level 2 elevation. */ level2: unsafeCSS(`var(--md-sys-elevation-level2, ${elevation(3)})`), /** Level 3 elevation. */ level3: unsafeCSS(`var(--md-sys-elevation-level3, ${elevation(6)})`), /** Level 4 elevation. */ level4: unsafeCSS(`var(--md-sys-elevation-level4, ${elevation(8)})`), /** Level 5 elevation. */ level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`), }",
+          "description": "Design tokens that control elevation."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ElevationToken",
+          "declaration": {
+            "name": "ElevationToken",
+            "module": "src/shared/tokens/ElevationToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./DesignToken\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/MotionToken.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "MotionToken",
+          "type": {
+            "text": "{\r\n  /** Design tokens that control transition effects. */\r\n  easing: EasingToken,\r\n\r\n  /** Design tokens that control transition duration. */\r\n  duration: DurationToken,\r\n\r\n  /** Design tokens that control spring effects. */\r\n  spring: SpringToken,\r\n}"
+          },
+          "default": "{ /** Design tokens that control transition effects. */ easing: EasingToken, /** Design tokens that control transition duration. */ duration: DurationToken, /** Design tokens that control spring effects. */ spring: SpringToken, }",
+          "description": "Design tokens that control motion."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MotionToken",
+          "declaration": {
+            "name": "MotionToken",
+            "module": "src/shared/tokens/MotionToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/ScrollbarToken.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ScrollbarToken",
+          "type": {
+            "text": "{\r\n  /** Width of a standard scrollbar. */\r\n  width: unsafeCSS(`var(--m3e-scrollbar-width, auto)`),\r\n\r\n  /** Width of a thin scrollbar. */\r\n  thinWidth: unsafeCSS(`var(--m3e-scrollbar-thin-width, thin)`),\r\n\r\n  /** Color of a scrollbar. */\r\n  color: unsafeCSS(`var(--m3e-scrollbar-thumb-color, #938f94) var(--m3e-scrollbar-track-color, transparent)`),\r\n}"
+          },
+          "default": "{ /** Width of a standard scrollbar. */ width: unsafeCSS(`var(--m3e-scrollbar-width, auto)`), /** Width of a thin scrollbar. */ thinWidth: unsafeCSS(`var(--m3e-scrollbar-thin-width, thin)`), /** Color of a scrollbar. */ color: unsafeCSS(`var(--m3e-scrollbar-thumb-color, #938f94) var(--m3e-scrollbar-track-color, transparent)`), }",
+          "description": "Design tokens that control scrollbars."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ScrollbarToken",
+          "declaration": {
+            "name": "ScrollbarToken",
+            "module": "src/shared/tokens/ScrollbarToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/ShapeToken.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ShapeToken",
+          "type": {
+            "text": "{\r\n  corner: {\r\n    /** Fully rounded symmetric shape. */\r\n    full: unsafeCSS(\"var(--md-sys-shape-corner-full, 624.9375rem)\"),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the top. */\r\n    extraLargeTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-large-top, ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Extra large rounded symmetric shape. */\r\n    extraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-large, ${CornerValue.extraLarge})`),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the end. */\r\n    extraLargeEnd: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none}`\r\n    ),\r\n\r\n    /** Extra large rounded asymmetric shape directed towards the start. */\r\n    extraLargeStart: unsafeCSS(\r\n      `${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraLarge}`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the top. */\r\n    largeTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-top, ${CornerValue.large} ${CornerValue.large} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the end. */\r\n    largeEnd: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-end, ${CornerValue.none} ${CornerValue.large} ${CornerValue.large} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Large rounded asymmetric shape directed towards the start. */\r\n    largeStart: unsafeCSS(\r\n      `var(--md-sys-shape-corner-large-end, ${CornerValue.large} ${CornerValue.none} ${CornerValue.none} ${CornerValue.large})`\r\n    ),\r\n\r\n    /** Large rounded symmetric shape. */\r\n    large: unsafeCSS(`var(--md-sys-shape-corner-large, ${CornerValue.large})`),\r\n\r\n    /** Medium rounded symmetric shape. */\r\n    medium: unsafeCSS(`var(--md-sys-shape-corner-medium, ${CornerValue.medium})`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the top. */\r\n    mediumTop: unsafeCSS(`${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none} ${CornerValue.none}`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the end. */\r\n    mediumEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none}`),\r\n\r\n    /** Medium rounded asymmetric shape directed towards the start. */\r\n    mediumStart: unsafeCSS(`${CornerValue.medium} ${CornerValue.none} ${CornerValue.none} ${CornerValue.medium}`),\r\n\r\n    /** Small rounded symmetric shape. */\r\n    small: unsafeCSS(`var(--md-sys-shape-corner-small, ${CornerValue.small})`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the top. */\r\n    smallTop: unsafeCSS(`${CornerValue.small} ${CornerValue.small} ${CornerValue.none} ${CornerValue.none}`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the end. */\r\n    smallEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.small} ${CornerValue.small} ${CornerValue.none}`),\r\n\r\n    /** Small rounded asymmetric shape directed towards the start. */\r\n    smallStart: unsafeCSS(`${CornerValue.small} ${CornerValue.none} ${CornerValue.none} ${CornerValue.small}`),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the top. */\r\n    extraSmallTop: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-small-top, ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none})`\r\n    ),\r\n\r\n    /** Extra small rounded symmetric shape. */\r\n    extraSmall: unsafeCSS(`var(--md-sys-shape-corner-extra-small, ${CornerValue.extraSmall})`),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the end. */\r\n    extraSmallEnd: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none}`\r\n    ),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the start. */\r\n    extraSmallStart: unsafeCSS(\r\n      `${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall}`\r\n    ),\r\n\r\n    /** Extra small rounded asymmetric shape directed towards the bottom. */\r\n    extraSmallBottom: unsafeCSS(\r\n      `${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall}`\r\n    ),\r\n\r\n    /** No rounding. */\r\n    none: unsafeCSS(`var(--md-sys-shape-corner-none, ${CornerValue.none})`),\r\n\r\n    /** Increased large rounded symmetric shape. */\r\n    largeIncreased: unsafeCSS(`var(--md-sys-shape-corner-large-increased, ${CornerValue.largeIncreased})`),\r\n\r\n    /** Increased extra large rounded symmetric shape. */\r\n    extraLargeIncreased: unsafeCSS(\r\n      `var(--md-sys-shape-corner-extra-large-increased, ${CornerValue.extraLargeIncreased})`\r\n    ),\r\n\r\n    /** Extra extra large rounded symmetric shape. */\r\n    extraExtraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-extra-large, ${CornerValue.extraExtraLarge})`),\r\n\r\n    /** Design tokens that control specific corners. */\r\n    value: CornerValue,\r\n  },\r\n}"
+          },
+          "default": "{ corner: { /** Fully rounded symmetric shape. */ full: unsafeCSS(\"var(--md-sys-shape-corner-full, 624.9375rem)\"), /** Extra large rounded asymmetric shape directed towards the top. */ extraLargeTop: unsafeCSS( `var(--md-sys-shape-corner-extra-large-top, ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none})` ), /** Extra large rounded symmetric shape. */ extraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-large, ${CornerValue.extraLarge})`), /** Extra large rounded asymmetric shape directed towards the end. */ extraLargeEnd: unsafeCSS( `${CornerValue.none} ${CornerValue.extraLarge} ${CornerValue.extraLarge} ${CornerValue.none}` ), /** Extra large rounded asymmetric shape directed towards the start. */ extraLargeStart: unsafeCSS( `${CornerValue.extraLarge} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraLarge}` ), /** Large rounded asymmetric shape directed towards the top. */ largeTop: unsafeCSS( `var(--md-sys-shape-corner-large-top, ${CornerValue.large} ${CornerValue.large} ${CornerValue.none} ${CornerValue.none})` ), /** Large rounded asymmetric shape directed towards the end. */ largeEnd: unsafeCSS( `var(--md-sys-shape-corner-large-end, ${CornerValue.none} ${CornerValue.large} ${CornerValue.large} ${CornerValue.none})` ), /** Large rounded asymmetric shape directed towards the start. */ largeStart: unsafeCSS( `var(--md-sys-shape-corner-large-end, ${CornerValue.large} ${CornerValue.none} ${CornerValue.none} ${CornerValue.large})` ), /** Large rounded symmetric shape. */ large: unsafeCSS(`var(--md-sys-shape-corner-large, ${CornerValue.large})`), /** Medium rounded symmetric shape. */ medium: unsafeCSS(`var(--md-sys-shape-corner-medium, ${CornerValue.medium})`), /** Medium rounded asymmetric shape directed towards the top. */ mediumTop: unsafeCSS(`${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none} ${CornerValue.none}`), /** Medium rounded asymmetric shape directed towards the end. */ mediumEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.medium} ${CornerValue.medium} ${CornerValue.none}`), /** Medium rounded asymmetric shape directed towards the start. */ mediumStart: unsafeCSS(`${CornerValue.medium} ${CornerValue.none} ${CornerValue.none} ${CornerValue.medium}`), /** Small rounded symmetric shape. */ small: unsafeCSS(`var(--md-sys-shape-corner-small, ${CornerValue.small})`), /** Small rounded asymmetric shape directed towards the top. */ smallTop: unsafeCSS(`${CornerValue.small} ${CornerValue.small} ${CornerValue.none} ${CornerValue.none}`), /** Small rounded asymmetric shape directed towards the end. */ smallEnd: unsafeCSS(`${CornerValue.none} ${CornerValue.small} ${CornerValue.small} ${CornerValue.none}`), /** Small rounded asymmetric shape directed towards the start. */ smallStart: unsafeCSS(`${CornerValue.small} ${CornerValue.none} ${CornerValue.none} ${CornerValue.small}`), /** Extra small rounded asymmetric shape directed towards the top. */ extraSmallTop: unsafeCSS( `var(--md-sys-shape-corner-extra-small-top, ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none})` ), /** Extra small rounded symmetric shape. */ extraSmall: unsafeCSS(`var(--md-sys-shape-corner-extra-small, ${CornerValue.extraSmall})`), /** Extra small rounded asymmetric shape directed towards the end. */ extraSmallEnd: unsafeCSS( `${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall} ${CornerValue.none}` ), /** Extra small rounded asymmetric shape directed towards the start. */ extraSmallStart: unsafeCSS( `${CornerValue.extraSmall} ${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall}` ), /** Extra small rounded asymmetric shape directed towards the bottom. */ extraSmallBottom: unsafeCSS( `${CornerValue.none} ${CornerValue.none} ${CornerValue.extraSmall} ${CornerValue.extraSmall}` ), /** No rounding. */ none: unsafeCSS(`var(--md-sys-shape-corner-none, ${CornerValue.none})`), /** Increased large rounded symmetric shape. */ largeIncreased: unsafeCSS(`var(--md-sys-shape-corner-large-increased, ${CornerValue.largeIncreased})`), /** Increased extra large rounded symmetric shape. */ extraLargeIncreased: unsafeCSS( `var(--md-sys-shape-corner-extra-large-increased, ${CornerValue.extraLargeIncreased})` ), /** Extra extra large rounded symmetric shape. */ extraExtraLarge: unsafeCSS(`var(--md-sys-shape-corner-extra-extra-large, ${CornerValue.extraExtraLarge})`), /** Design tokens that control specific corners. */ value: CornerValue, }, }",
+          "description": "Design tokens that control shape."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ShapeToken",
+          "declaration": {
+            "name": "ShapeToken",
+            "module": "src/shared/tokens/ShapeToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/StateToken.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "StateToken",
+          "type": {
+            "text": "{\r\n  /** Opacity of the state layer on focus. */\r\n  focusStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-focus-state-layer-opacity, 10%)\"),\r\n\r\n  /** Opacity of the state layer on hover. */\r\n  hoverStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-hover-state-layer-opacity, 8%)\"),\r\n\r\n  /** Opacity of the state layer on pressed. */\r\n  pressedStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-pressed-state-layer-opacity, 10%)\"),\r\n}"
+          },
+          "default": "{ /** Opacity of the state layer on focus. */ focusStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-focus-state-layer-opacity, 10%)\"), /** Opacity of the state layer on hover. */ hoverStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-hover-state-layer-opacity, 8%)\"), /** Opacity of the state layer on pressed. */ pressedStateLayerOpacity: unsafeCSS(\"var(--md-sys-state-pressed-state-layer-opacity, 10%)\"), }",
+          "description": "Design tokens that control state layer."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "StateToken",
+          "declaration": {
+            "name": "StateToken",
+            "module": "src/shared/tokens/StateToken.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/tokens/TypescaleToken.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "TypescaleToken",
+          "type": {
+            "text": "{\r\n  /** Standard typescale variant. */\r\n  standard: {\r\n    /** Short, important text or numerals. */\r\n    display: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-large-font-size, 3.5625rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-large-line-height, 4rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-large-tracking, 0.015625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-size, 2.8125rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-line-height, 3.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-display-small-font-size, 2.25rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-small-line-height, 2.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-display-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Short, high-emphasis text on smaller screens. */\r\n    headline: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-size, 2rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-line-height, 2.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-size, 1.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-line-height, 2.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-size, 1.5rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-line-height, 2rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-headline-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Medium-emphasis text that remains relatively short. */\r\n    title: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-large-font-size, 1.375rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-large-line-height, 1.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-medium-tracking, 0.009375rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-title-small-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-small-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-title-small-tracking, 0.00625rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Longer passages of text. */\r\n    body: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-large-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-large-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-large-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-large-tracking, 0.03125rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-medium-tracking, 0.015625rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-body-small-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-small-font-weight, 400)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-body-small-tracking, 0.025rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Smaller, utilitarian text. */\r\n    label: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-large-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-large-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-large-tracking, 0.00625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-medium-tracking, 0.03125rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-label-small-font-size, 0.6875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-label-small-tracking, 0.03125rem)\"),\r\n      },\r\n    },\r\n  },\r\n\r\n  /** Emphasized typescale variant. */\r\n  emphasized: {\r\n    /** Short, important text or numerals. */\r\n    display: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-size, 3.5625rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-line-height, 4rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-tracking, 0.015625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-size, 2.8125rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-line-height, 3.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-size, 2.25rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-line-height, 2.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Short, high-emphasis text on smaller screens. */\r\n    headline: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-size, 2rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-line-height, 2.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-size, 1.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-line-height, 2.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-tracking, 0)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-size, 1.5rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-line-height, 2rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-tracking, 0)\"),\r\n      },\r\n    },\r\n\r\n    /** Medium-emphasis text that remains relatively short. */\r\n    title: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-size, 1.375rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-line-height, 1.75rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-tracking, 0)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-line-height, 3.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-tracking, 0.009375rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-tracking, 0.00625rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Longer passages of text. */\r\n    body: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-size, 1rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-line-height, 1.5rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-tracking, 0.03125rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-tracking, 0.015625rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-weight, 500)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-tracking, 0.025rem)\"),\r\n      },\r\n    },\r\n\r\n    /** Smaller, utilitarian text. */\r\n    label: {\r\n      large: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-size, 0.875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-line-height, 1.25rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-tracking, 0.00625rem)\"),\r\n      },\r\n      medium: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-size, 0.75rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-tracking, 0.03125rem)\"),\r\n      },\r\n      small: {\r\n        fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-size, 0.6875rem)\"),\r\n        fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-weight, 700)\"),\r\n        lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-line-height, 1rem)\"),\r\n        tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-tracking, 0.03125rem)\"),\r\n      },\r\n    },\r\n  },\r\n}"
+          },
+          "default": "{ /** Standard typescale variant. */ standard: { /** Short, important text or numerals. */ display: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-large-font-size, 3.5625rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-large-line-height, 4rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-large-tracking, 0.015625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-size, 2.8125rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-medium-line-height, 3.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-display-small-font-size, 2.25rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-display-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-display-small-line-height, 2.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-display-small-tracking, 0)\"), }, }, /** Short, high-emphasis text on smaller screens. */ headline: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-size, 2rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-large-line-height, 2.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-size, 1.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-medium-line-height, 2.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-size, 1.5rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-headline-small-line-height, 2rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-headline-small-tracking, 0)\"), }, }, /** Medium-emphasis text that remains relatively short. */ title: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-large-font-size, 1.375rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-large-line-height, 1.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-medium-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-medium-tracking, 0.009375rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-title-small-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-title-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-title-small-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-title-small-tracking, 0.00625rem)\"), }, }, /** Longer passages of text. */ body: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-large-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-large-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-large-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-large-tracking, 0.03125rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-medium-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-medium-tracking, 0.015625rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-body-small-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-body-small-font-weight, 400)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-body-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-body-small-tracking, 0.025rem)\"), }, }, /** Smaller, utilitarian text. */ label: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-large-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-large-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-large-tracking, 0.00625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-medium-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-medium-tracking, 0.03125rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-label-small-font-size, 0.6875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-label-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-label-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-label-small-tracking, 0.03125rem)\"), }, }, }, /** Emphasized typescale variant. */ emphasized: { /** Short, important text or numerals. */ display: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-size, 3.5625rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-line-height, 4rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-large-tracking, 0.015625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-size, 2.8125rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-line-height, 3.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-size, 2.25rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-line-height, 2.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-display-small-tracking, 0)\"), }, }, /** Short, high-emphasis text on smaller screens. */ headline: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-size, 2rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-line-height, 2.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-size, 1.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-line-height, 2.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-medium-tracking, 0)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-size, 1.5rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-line-height, 2rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-headline-small-tracking, 0)\"), }, }, /** Medium-emphasis text that remains relatively short. */ title: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-size, 1.375rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-line-height, 1.75rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-large-tracking, 0)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-line-height, 3.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-medium-tracking, 0.009375rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-title-small-tracking, 0.00625rem)\"), }, }, /** Longer passages of text. */ body: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-size, 1rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-line-height, 1.5rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-large-tracking, 0.03125rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-medium-tracking, 0.015625rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-font-weight, 500)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-body-small-tracking, 0.025rem)\"), }, }, /** Smaller, utilitarian text. */ label: { large: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-size, 0.875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-line-height, 1.25rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-large-tracking, 0.00625rem)\"), }, medium: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-size, 0.75rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-medium-tracking, 0.03125rem)\"), }, small: { fontSize: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-size, 0.6875rem)\"), fontWeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-font-weight, 700)\"), lineHeight: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-line-height, 1rem)\"), tracking: unsafeCSS(\"var(--md-sys-typescale-emphasized-label-small-tracking, 0.03125rem)\"), }, }, }, }",
+          "description": "Design tokens that control typescale."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TypescaleToken",
+          "declaration": {
+            "name": "TypescaleToken",
+            "module": "src/shared/tokens/TypescaleToken.ts"
+          }
+        }
+      ]
     }
   ]
 }