@x-plat/design-system 0.6.0 → 0.7.0

package/dist/components/DatePicker/index.css

@@ -7,7 +7,7 @@
   gap: var(--spacing-space-2);
   white-space: nowrap;
   border-radius: var(--spacing-radius-md);
-  font-weight: 500;
+  font-weight: var(--semantic-typo-label-1-m-weight);
   cursor: pointer;
   border: 1px solid transparent;
   transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -15,20 +15,29 @@
 .lib-xplat-button.sm {
   height: var(--spacing-control-height-sm);
   padding: 0 var(--spacing-space-3);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-button.md {
   height: var(--spacing-control-height-md);
   padding: 0 var(--spacing-space-4);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-button.lg {
   height: var(--spacing-control-height-lg);
   padding: 0 var(--spacing-space-6);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-button:disabled {
   cursor: not-allowed;
@@ -124,18 +133,27 @@
 }
 .lib-xplat-input-wrap .lib-xplat-input.sm {
   height: var(--spacing-control-height-sm);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-input-wrap .lib-xplat-input.md {
   height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-input-wrap .lib-xplat-input.lg {
   height: var(--spacing-control-height-lg);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-input-wrap .lib-xplat-input.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -177,8 +195,11 @@
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
   display: flex;
   gap: var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
   line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
   align-items: center;
   user-select: none;
 }
@@ -229,7 +250,7 @@
   align-items: center;
   justify-content: center;
   opacity: 0;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--semantic-interaction-overlay-50);
   transition: opacity 0.2s ease;
 }
 .lib-xplat-modal.dim.enter {
@@ -260,7 +281,7 @@
   border-radius: var(--spacing-radius-md);
   transition: background-color 0.15s;
   font-size: clamp(13px, 3cqi, 18px);
-  font-weight: 600;
+  font-weight: var(--semantic-typo-label-1-sb-weight);
   color: var(--semantic-text-primary);
   min-width: 110px;
   text-align: center;
@@ -299,7 +320,7 @@
 .lib-xplat-datepicker .datepicker-picker-cell.active {
   background-color: var(--semantic-surface-brand-default);
   color: var(--semantic-text-inverse);
-  font-weight: 600;
+  font-weight: var(--semantic-typo-label-1-sb-weight);
 }
 .lib-xplat-datepicker .datepicker-nav {
   display: flex;
@@ -328,7 +349,7 @@
 .lib-xplat-datepicker .datepicker-weekday {
   text-align: center;
   font-size: clamp(11px, 2cqi, 14px);
-  font-weight: 500;
+  font-weight: var(--semantic-typo-label-1-m-weight);
   padding: var(--spacing-space-1) 0;
   color: var(--semantic-text-tertiary);
 }
@@ -375,16 +396,16 @@
   cursor: not-allowed;
 }
 .lib-xplat-datepicker .datepicker-day.today {
-  font-weight: 700;
+  font-weight: var(--semantic-typo-display-1-b-weight);
   box-shadow: inset 0 0 0 1px var(--semantic-surface-brand-default);
 }
 .lib-xplat-datepicker .datepicker-day.selected {
   background-color: var(--semantic-surface-brand-default);
   color: var(--semantic-text-inverse);
-  font-weight: 600;
+  font-weight: var(--semantic-typo-label-1-sb-weight);
 }
 .lib-xplat-datepicker .datepicker-day.selected:hover {
-  background-color: color-mix(in srgb, var(--semantic-surface-brand-default), black 15%);
+  background-color: var(--semantic-surface-brand-strong);
 }
 .lib-xplat-datepicker .datepicker-day.highlighted {
   background-color: color-mix(in srgb, var(--semantic-surface-brand-default) 20%, transparent);
@@ -430,8 +451,11 @@
 .lib-xplat-datepicker .datepicker-range-label {
   display: block;
   text-align: center;
-  font-size: var(--semantic-typo-caption-2-r-size);
-  font-weight: 500;
+  font-family: var(--semantic-typo-caption-2-m-font);
+  font-size: var(--semantic-typo-caption-2-m-size);
+  line-height: var(--semantic-typo-caption-2-m-lh);
+  font-weight: var(--semantic-typo-caption-2-m-weight);
+  letter-spacing: var(--semantic-typo-caption-2-m-ls);
   color: var(--semantic-text-tertiary);
   margin-bottom: var(--spacing-space-2);
 }
@@ -474,7 +498,7 @@
   background-color: var(--semantic-surface-neutral-primary);
   border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--semantic-shadow-md);
 }
 .lib-xplat-popup-datepicker-card {
   background-color: var(--semantic-surface-neutral-primary);
@@ -511,15 +535,27 @@
 }
 .lib-xplat-tab.sm {
   height: var(--spacing-control-height-sm);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-tab.md {
   height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-tab.lg {
   height: var(--spacing-control-height-lg);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-tab.type-default {
   width: 100%;
@@ -557,8 +593,11 @@
   justify-content: center;
   white-space: nowrap;
   padding: 0 var(--spacing-space-3);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
-  font-weight: 500;
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
   height: 100%;
   background: none;
   border: none;

package/dist/components/Drawer/index.css

@@ -3,21 +3,21 @@
   position: fixed;
   inset: 0;
   z-index: 1000;
-  background: rgba(0, 0, 0, 0);
+  background: transparent;
   transition: background-color 0.25s ease;
 }
 .lib-xplat-drawer-overlay.enter {
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--semantic-interaction-overlay-50);
 }
 .lib-xplat-drawer-overlay.exit {
-  background: rgba(0, 0, 0, 0);
+  background: transparent;
 }
 .lib-xplat-drawer {
   position: fixed;
   top: 0;
   height: 100%;
   background: var(--semantic-surface-neutral-primary);
-  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--semantic-shadow-overlay);
   display: flex;
   flex-direction: column;
   transition: transform 0.25s ease;
@@ -45,7 +45,7 @@
 .lib-xplat-drawer.left {
   left: 0;
   transform: translateX(-100%);
-  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--semantic-shadow-overlay);
 }
 .lib-xplat-drawer.left.enter {
   transform: translateX(0);
@@ -58,15 +58,22 @@
   border-bottom: 1px solid var(--semantic-border-primary);
 }
 .lib-xplat-drawer .drawer-title {
-  font-size: var(--semantic-typo-label-2-m-size);
-  font-weight: 600;
+  font-family: var(--semantic-typo-label-2-sb-font);
+  font-size: var(--semantic-typo-label-2-sb-size);
+  line-height: var(--semantic-typo-label-2-sb-lh);
+  font-weight: var(--semantic-typo-label-2-sb-weight);
+  letter-spacing: var(--semantic-typo-label-2-sb-ls);
   color: var(--semantic-text-primary);
 }
 .lib-xplat-drawer .close-btn {
   background: none;
   border: none;
   cursor: pointer;
+  font-family: var(--semantic-typo-heading-1-m-font);
   font-size: var(--semantic-typo-heading-1-m-size);
+  line-height: var(--semantic-typo-heading-1-m-lh);
+  font-weight: var(--semantic-typo-heading-1-m-weight);
+  letter-spacing: var(--semantic-typo-heading-1-m-ls);
   line-height: 1;
   color: var(--semantic-icon-primary);
   padding: 0;

package/dist/components/Dropdown/index.css

@@ -14,7 +14,7 @@
   background: var(--semantic-surface-neutral-primary);
   border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-md);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--semantic-shadow-md);
   padding: var(--spacing-space-1) 0;
   opacity: 0;
   transform: translateY(-4px);
@@ -34,7 +34,11 @@
   padding: var(--spacing-space-2) 14px;
   border: none;
   background: none;
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
   color: var(--semantic-text-primary);
   cursor: pointer;
   text-align: left;

package/dist/components/Editor/index.css

@@ -35,7 +35,7 @@
   background: transparent;
   color: var(--semantic-text-primary);
   font-family: inherit;
-  font-weight: 600;
+  font-weight: var(--semantic-typo-label-1-sb-weight);
   cursor: pointer;
   transition: background 100ms ease, border-color 100ms ease;
 }
@@ -71,7 +71,7 @@
 .lib-xplat-editor__editable h5,
 .lib-xplat-editor__editable h6 {
   margin: var(--spacing-space-4) 0 var(--spacing-space-2);
-  font-weight: 600;
+  font-weight: var(--semantic-typo-label-1-sb-weight);
   line-height: 1.3;
 }
 .lib-xplat-editor__editable h1:first-child,
@@ -83,13 +83,28 @@
   margin-top: 0;
 }
 .lib-xplat-editor__editable h1 {
-  font-size: var(--semantic-typo-title-1-m-size);
+  font-family: var(--semantic-typo-title-1-sb-font);
+  font-size: var(--semantic-typo-title-1-sb-size);
+  line-height: var(--semantic-typo-title-1-sb-lh);
+  font-weight: var(--semantic-typo-title-1-sb-weight);
+  letter-spacing: var(--semantic-typo-title-1-sb-ls);
+  line-height: 1.3;
 }
 .lib-xplat-editor__editable h2 {
-  font-size: var(--semantic-typo-heading-1-m-size);
+  font-family: var(--semantic-typo-heading-1-sb-font);
+  font-size: var(--semantic-typo-heading-1-sb-size);
+  line-height: var(--semantic-typo-heading-1-sb-lh);
+  font-weight: var(--semantic-typo-heading-1-sb-weight);
+  letter-spacing: var(--semantic-typo-heading-1-sb-ls);
+  line-height: 1.3;
 }
 .lib-xplat-editor__editable h3 {
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-family: var(--semantic-typo-label-1-sb-font);
+  font-size: var(--semantic-typo-label-1-sb-size);
+  line-height: var(--semantic-typo-label-1-sb-lh);
+  font-weight: var(--semantic-typo-label-1-sb-weight);
+  letter-spacing: var(--semantic-typo-label-1-sb-ls);
+  line-height: 1.3;
 }
 .lib-xplat-editor__editable p {
   margin: var(--spacing-space-2) 0;
@@ -124,12 +139,16 @@
   border-radius: var(--spacing-radius-md);
   background: var(--semantic-surface-neutral-secondary);
   color: var(--semantic-text-primary);
+  font-family: var(--semantic-typo-caption-1-r-font);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
   font-family:
     ui-monospace,
     "SF Mono",
     Menlo,
     monospace;
-  font-size: var(--semantic-typo-caption-1-r-size);
   line-height: 1.5;
   overflow-x: auto;
   white-space: pre-wrap;
@@ -138,12 +157,16 @@
   padding: 2px 6px;
   border-radius: var(--spacing-radius-sm);
   background: var(--semantic-surface-neutral-secondary);
+  font-family: var(--semantic-typo-caption-1-r-font);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
   font-family:
     ui-monospace,
     "SF Mono",
     Menlo,
     monospace;
-  font-size: var(--semantic-typo-caption-1-r-size);
   color: var(--semantic-text-primary);
 }
 .lib-xplat-editor__editable a {
@@ -184,8 +207,12 @@
   border-radius: var(--spacing-radius-sm);
   background: transparent;
   color: var(--semantic-text-primary);
-  font-family: inherit;
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
+  font-family: inherit;
   text-align: left;
   cursor: pointer;
 }
@@ -199,7 +226,11 @@
 }
 .lib-xplat-editor__slash-item .hint {
   color: var(--semantic-text-tertiary);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
 .lib-xplat-editor__link-popover {
   position: absolute;
@@ -220,8 +251,12 @@
   border-radius: var(--spacing-radius-sm);
   background: var(--semantic-surface-neutral-primary);
   color: var(--semantic-text-primary);
-  font-family: inherit;
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
+  font-family: inherit;
   outline: none;
 }
 .lib-xplat-editor__link-popover input:focus {
@@ -233,8 +268,12 @@
   border-radius: var(--spacing-radius-sm);
   background: var(--semantic-surface-neutral-primary);
   color: var(--semantic-text-primary);
-  font-family: inherit;
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+  font-family: inherit;
   cursor: pointer;
 }
 .lib-xplat-editor__link-popover button:hover {

package/dist/components/EmptyState/index.css

@@ -17,13 +17,20 @@
   font-size: var(--semantic-typo-display-1-b-size);
 }
 .lib-xplat-empty-state .empty-title {
-  font-size: var(--semantic-typo-caption-1-r-size);
-  font-weight: 500;
+  font-family: var(--semantic-typo-caption-1-m-font);
+  font-size: var(--semantic-typo-caption-1-m-size);
+  line-height: var(--semantic-typo-caption-1-m-lh);
+  font-weight: var(--semantic-typo-caption-1-m-weight);
+  letter-spacing: var(--semantic-typo-caption-1-m-ls);
   color: var(--semantic-text-secondary);
   margin: 0;
 }
 .lib-xplat-empty-state .empty-description {
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
   color: var(--semantic-text-tertiary);
   margin: var(--spacing-space-2) 0 0;
   max-width: 320px;

package/dist/components/FileUpload/index.css

@@ -32,13 +32,20 @@
   font-size: var(--semantic-typo-display-2-sb-size);
 }
 .lib-xplat-file-upload .upload-label {
-  font-size: var(--semantic-typo-caption-1-r-size);
-  font-weight: 500;
+  font-family: var(--semantic-typo-caption-1-m-font);
+  font-size: var(--semantic-typo-caption-1-m-size);
+  line-height: var(--semantic-typo-caption-1-m-lh);
+  font-weight: var(--semantic-typo-caption-1-m-weight);
+  letter-spacing: var(--semantic-typo-caption-1-m-ls);
   color: var(--semantic-text-secondary);
   margin: 0;
 }
 .lib-xplat-file-upload .upload-description {
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
   color: var(--semantic-text-tertiary);
   margin: var(--spacing-space-1) 0 0;
 }

package/dist/components/HtmlTypeWriter/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/HtmlTypeWriter/index.ts
 var HtmlTypeWriter_exports = {};
 __export(HtmlTypeWriter_exports, {
+  HtmlTypeWriter: () => HtmlTypeWriter_default,
   HtmlTypewriter: () => HtmlTypeWriter_default
 });
 module.exports = __toCommonJS(HtmlTypeWriter_exports);
@@ -169,5 +170,6 @@ HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  HtmlTypeWriter,
   HtmlTypewriter
 });

package/dist/components/HtmlTypeWriter/index.css

@@ -1,7 +1,11 @@
 /* src/components/HtmlTypeWriter/htmlTypeWriter.scss */
 .lib-xplat-htmlTypewriter {
   width: 100%;
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-htmlTypewriter h1,
 .lib-xplat-htmlTypewriter h2,
@@ -9,13 +13,21 @@
 .lib-xplat-htmlTypewriter h4,
 .lib-xplat-htmlTypewriter h5,
 .lib-xplat-htmlTypewriter h6 {
-  font-weight: 600;
+  font-weight: var(--semantic-typo-label-2-sb-weight);
 }
 .lib-xplat-htmlTypewriter h3 {
+  font-family: var(--semantic-typo-title-1-m-font);
   font-size: var(--semantic-typo-title-1-m-size);
+  line-height: var(--semantic-typo-title-1-m-lh);
+  font-weight: var(--semantic-typo-title-1-m-weight);
+  letter-spacing: var(--semantic-typo-title-1-m-ls);
 }
 .lib-xplat-htmlTypewriter h4 {
+  font-family: var(--semantic-typo-heading-1-m-font);
   font-size: var(--semantic-typo-heading-1-m-size);
+  line-height: var(--semantic-typo-heading-1-m-lh);
+  font-weight: var(--semantic-typo-heading-1-m-weight);
+  letter-spacing: var(--semantic-typo-heading-1-m-ls);
 }
 .lib-xplat-htmlTypewriter hr {
   color: var(--semantic-border-primary);

package/dist/components/HtmlTypeWriter/index.d.cts

@@ -1,14 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface HtmlTypewriterProps {
+interface HtmlTypeWriterProps {
     html: string;
     duration?: number;
     onDone?: () => void;
     onChange?: () => void;
 }
 declare const HtmlTypeWriter: {
-    ({ html, duration, onDone, onChange, }: HtmlTypewriterProps): react_jsx_runtime.JSX.Element;
+    ({ html, duration, onDone, onChange, }: HtmlTypeWriterProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-export { HtmlTypeWriter as HtmlTypewriter };
+export { HtmlTypeWriter, HtmlTypeWriter as HtmlTypewriter };

package/dist/components/HtmlTypeWriter/index.d.ts

@@ -1,14 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface HtmlTypewriterProps {
+interface HtmlTypeWriterProps {
     html: string;
     duration?: number;
     onDone?: () => void;
     onChange?: () => void;
 }
 declare const HtmlTypeWriter: {
-    ({ html, duration, onDone, onChange, }: HtmlTypewriterProps): react_jsx_runtime.JSX.Element;
+    ({ html, duration, onDone, onChange, }: HtmlTypeWriterProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-export { HtmlTypeWriter as HtmlTypewriter };
+export { HtmlTypeWriter, HtmlTypeWriter as HtmlTypewriter };

package/dist/components/HtmlTypeWriter/index.js

@@ -132,5 +132,6 @@ var HtmlTypeWriter = ({
 HtmlTypeWriter.displayName = "HtmlTypeWriter";
 var HtmlTypeWriter_default = HtmlTypeWriter;
 export {
+  HtmlTypeWriter_default as HtmlTypeWriter,
   HtmlTypeWriter_default as HtmlTypewriter
 };

package/dist/components/ImageSelector/index.css

@@ -51,7 +51,11 @@
 }
 .lib-xplat-imageselector > .content .skeleton > .label {
   margin-top: var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
   color: var(--semantic-text-tertiary);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .icon-wrapper {
@@ -67,7 +71,11 @@
   transform: translate(-50%, -50%);
   display: flex;
   gap: 0.5em;
+  font-family: var(--semantic-typo-title-2-m-font);
   font-size: var(--semantic-typo-title-2-m-size);
+  line-height: var(--semantic-typo-title-2-m-lh);
+  font-weight: var(--semantic-typo-title-2-m-weight);
+  letter-spacing: var(--semantic-typo-title-2-m-ls);
   background-color: var(--semantic-surface-neutral-tertiary);
   padding: var(--spacing-space-1) var(--spacing-space-3);
   align-items: center;

package/dist/components/Input/index.css

@@ -27,18 +27,27 @@
 }
 .lib-xplat-input-wrap .lib-xplat-input.sm {
   height: var(--spacing-control-height-sm);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-input-wrap .lib-xplat-input.md {
   height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-input-wrap .lib-xplat-input.lg {
   height: var(--spacing-control-height-lg);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-input-wrap .lib-xplat-input.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -80,8 +89,11 @@
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
   display: flex;
   gap: var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
   line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
   align-items: center;
   user-select: none;
 }

package/dist/components/Modal/index.css

@@ -29,7 +29,7 @@
   align-items: center;
   justify-content: center;
   opacity: 0;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--semantic-interaction-overlay-50);
   transition: opacity 0.2s ease;
 }
 .lib-xplat-modal.dim.enter {