@x-plat/design-system 0.5.54 → 0.5.58

package/dist/index.cjs

@@ -9552,10 +9552,11 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
+  const isSelected = value !== void 0 ? ctx?.selectedValue === value : ctx?.selectedLabel === children;
   return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
     "div",
     {
-      className: clsx_default("select-item", disabled && "disabled"),
+      className: clsx_default("select-item", disabled && "disabled", isSelected && "is-selected"),
       onClick: handleClick,
       role: "menuitem",
       tabIndex: disabled ? void 0 : 0,
@@ -9591,12 +9592,14 @@ var SelectRoot = (props) => {
   const isControlled = valueProp !== void 0;
   const [isOpen, setOpen] = import_react31.default.useState(false);
   const [uncontrolledLabel, setUncontrolledLabel] = import_react31.default.useState(null);
+  const [uncontrolledValue, setUncontrolledValue] = import_react31.default.useState(void 0);
   const controlledLabel = import_react31.default.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
+  const selectedValue = isControlled ? valueProp : uncontrolledValue;
   const triggerRef = import_react31.default.useRef(null);
   const contentRef = import_react31.default.useRef(null);
   const [mounted, setMounted] = import_react31.default.useState(false);
@@ -9623,6 +9626,7 @@ var SelectRoot = (props) => {
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
+        setUncontrolledValue(itemValue);
       }
       onChange?.(itemValue, label);
     },
@@ -9635,12 +9639,13 @@ var SelectRoot = (props) => {
       visible,
       triggerRef,
       selectedLabel,
+      selectedValue,
       setSelected,
       open,
       close,
       toggle
     }),
-    [isOpen, mounted, visible, selectedLabel, setSelected, open, close, toggle]
+    [isOpen, mounted, visible, selectedLabel, selectedValue, setSelected, open, close, toggle]
   );
   const stateClass = visible ? "visible" : "exit";
   const handleTriggerClick = (e) => {
@@ -9708,7 +9713,7 @@ var SelectRoot = (props) => {
         mounted && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
           "div",
           {
-            className: clsx_default("lib-xplat-select-content", position.direction, stateClass),
+            className: clsx_default("lib-xplat-select-content", size, position.direction, stateClass),
             ref: contentRef,
             style: { ...position.position, width: triggerRef.current?.offsetWidth },
             role: "listbox",
@@ -10070,6 +10075,7 @@ var Swiper = (props) => {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
+        onDragStart: (e) => e.preventDefault(),
         children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
           "div",
           {

package/dist/index.css

@@ -1642,7 +1642,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 500;
   color: var(--semantic-text-strong);
   text-align: left;
@@ -1668,7 +1668,7 @@
 }
 .lib-xplat-accordion .accordion-content {
   padding: 0 var(--spacing-space-4) 14px;
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
   color: var(--semantic-text-subtle);
   line-height: 1.6;
 }
@@ -1684,8 +1684,8 @@
   justify-content: space-between;
   padding: var(--spacing-space-3) var(--spacing-space-4);
   border-radius: var(--spacing-radius-md);
-  font-size: var(--semantic-typo-label-2-m-size);
-  line-height: var(--semantic-typo-label-2-m-lh);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
   border: 1px solid;
 }
 .lib-xplat-alert .content {
@@ -1695,7 +1695,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-size: var(--semantic-typo-body-1-m-size);
+  font-size: var(--semantic-typo-label-1-m-size);
   line-height: 1;
   margin-left: var(--spacing-space-2);
   padding: 0;
@@ -1756,12 +1756,12 @@
 .lib-xplat-avatar.md {
   width: var(--spacing-control-height-md);
   height: var(--spacing-control-height-md);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-avatar.lg {
   width: var(--spacing-control-height-lg);
   height: var(--spacing-control-height-lg);
-  font-size: var(--semantic-typo-body-1-m-size);
+  font-size: var(--semantic-typo-label-1-m-size);
 }
 .lib-xplat-avatar img {
   width: 100%;
@@ -1908,7 +1908,7 @@
 }
 .lib-xplat-box > .box-title {
   font-weight: 600;
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
   color: var(--semantic-text-strong);
   padding: var(--spacing-space-3) var(--spacing-space-4);
   border-bottom: 1px solid var(--semantic-border-subtle);
@@ -1953,7 +1953,7 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-space-1);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-breadcrumb .link {
   color: var(--semantic-text-muted);
@@ -1994,20 +1994,20 @@
 .lib-xplat-button.sm {
   height: var(--spacing-control-height-sm);
   padding: 0 var(--spacing-space-3);
-  font-size: var(--semantic-typo-label-2-m-size);
-  line-height: var(--semantic-typo-label-2-m-lh);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
 }
 .lib-xplat-button.md {
   height: var(--spacing-control-height-md);
   padding: 0 var(--spacing-space-4);
-  font-size: var(--semantic-typo-label-1-m-size);
-  line-height: var(--semantic-typo-label-1-m-lh);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
 }
 .lib-xplat-button.lg {
   height: var(--spacing-control-height-lg);
   padding: 0 var(--spacing-space-6);
-  font-size: var(--semantic-typo-body-1-m-size);
-  line-height: var(--semantic-typo-body-1-m-lh);
+  font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
 }
 .lib-xplat-button:disabled {
   cursor: not-allowed;
@@ -2122,7 +2122,7 @@
   background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-calendar .calendar-nav svg {
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-calendar .calendar-today-btn {
   margin-left: auto;
@@ -2320,7 +2320,7 @@
 .lib-xplat-card-tab.md .card-tab-trigger {
   --tab-py: 6px;
   padding: 6px var(--spacing-space-4);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-card-tab.md .card-tab-body {
   padding: var(--spacing-space-5);
@@ -2331,7 +2331,7 @@
 .lib-xplat-card-tab.lg .card-tab-trigger {
   --tab-py: var(--spacing-space-2);
   padding: var(--spacing-space-2) var(--spacing-space-5);
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-card-tab.lg .card-tab-body {
   padding: var(--spacing-space-6);
@@ -2527,7 +2527,7 @@
   color: var(--semantic-text-muted);
 }
 .lib-xplat-chart .chart-legend-value {
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 600;
   color: var(--semantic-text-strong);
 }
@@ -2571,12 +2571,12 @@
 .lib-xplat-icon-button.sm {
   width: var(--spacing-control-height-sm);
   height: var(--spacing-control-height-sm);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-icon-button.md {
   width: var(--spacing-control-height-md);
   height: var(--spacing-control-height-md);
-  font-size: var(--semantic-typo-body-1-m-size);
+  font-size: var(--semantic-typo-label-1-m-size);
 }
 .lib-xplat-icon-button.lg {
   width: var(--spacing-control-height-lg);
@@ -2668,8 +2668,8 @@
   max-height: 200px;
   overflow-y: auto;
   padding: 4px 0;
-  font-size: var(--semantic-typo-label-1-m-size);
-  line-height: var(--semantic-typo-label-1-m-lh);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
   color: var(--semantic-text-strong);
   background: transparent;
 }
@@ -2707,17 +2707,17 @@
   height: var(--spacing-space-6);
 }
 .lib-xplat-checkbox.sm > .label {
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+}
+.lib-xplat-checkbox.md > .label {
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
 }
-.lib-xplat-checkbox.md > .label {
+.lib-xplat-checkbox.lg > .label {
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
 }
-.lib-xplat-checkbox.lg > .label {
-  font-size: var(--semantic-typo-body-1-m-size);
-  line-height: var(--semantic-typo-body-1-m-lh);
-}
 .lib-xplat-checkbox > .checkbox {
   display: flex;
   align-items: center;
@@ -2800,11 +2800,11 @@
 }
 .lib-xplat-chip.md {
   padding: 2px var(--spacing-space-3);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-chip.lg {
   padding: var(--spacing-space-1) var(--spacing-space-4);
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-chip.primary {
   color: var(--semantic-text-inverse);
@@ -2866,18 +2866,18 @@
 }
 .lib-xplat-input-wrap .lib-xplat-input.sm {
   height: var(--spacing-control-height-sm);
-  font-size: var(--semantic-typo-label-2-m-size);
-  line-height: var(--semantic-typo-label-2-m-lh);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
 }
 .lib-xplat-input-wrap .lib-xplat-input.md {
   height: var(--spacing-control-height-md);
-  font-size: var(--semantic-typo-label-1-m-size);
-  line-height: var(--semantic-typo-label-1-m-lh);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
 }
 .lib-xplat-input-wrap .lib-xplat-input.lg {
   height: var(--spacing-control-height-lg);
-  font-size: var(--semantic-typo-body-1-m-size);
-  line-height: var(--semantic-typo-body-1-m-lh);
+  font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
 }
 .lib-xplat-input-wrap .lib-xplat-input.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -2891,6 +2891,8 @@
   padding-right: var(--spacing-space-2);
   width: 100%;
   color: var(--semantic-text-subtle);
+  font-size: inherit;
+  font-family: inherit;
 }
 .lib-xplat-input-wrap .lib-xplat-input > input :disabled {
   cursor: not-allowed;
@@ -2935,7 +2937,7 @@
   color: var(--semantic-text-error);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 
 /* src/components/Modal/modal.scss */
@@ -3058,7 +3060,7 @@
   background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-datepicker .datepicker-nav svg {
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-datepicker .datepicker-weekdays {
   display: grid;
@@ -3251,15 +3253,15 @@
 }
 .lib-xplat-tab.sm {
   height: var(--spacing-control-height-sm);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-tab.md {
   height: var(--spacing-control-height-md);
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-tab.lg {
   height: var(--spacing-control-height-lg);
-  font-size: var(--semantic-typo-body-1-m-size);
+  font-size: var(--semantic-typo-label-1-m-size);
 }
 .lib-xplat-tab.type-default {
   width: 100%;
@@ -3297,7 +3299,7 @@
   justify-content: center;
   white-space: nowrap;
   padding: 0 var(--spacing-space-3);
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
   font-weight: 500;
   height: 100%;
   background: none;
@@ -3396,7 +3398,7 @@
   border-bottom: 1px solid var(--semantic-border-default);
 }
 .lib-xplat-drawer .drawer-title {
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
   font-weight: 600;
   color: var(--semantic-text-strong);
 }
@@ -3455,7 +3457,7 @@
   padding: var(--spacing-space-2) 14px;
   border: none;
   background: none;
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
   color: var(--semantic-text-strong);
   cursor: pointer;
   text-align: left;
@@ -3566,7 +3568,7 @@
   font-size: var(--semantic-typo-heading-1-m-size);
 }
 .lib-xplat-editor__editable h3 {
-  font-size: var(--semantic-typo-body-1-m-size);
+  font-size: var(--semantic-typo-label-1-m-size);
 }
 .lib-xplat-editor__editable p {
   margin: var(--spacing-space-2) 0;
@@ -3742,7 +3744,7 @@
   font-size: var(--semantic-typo-display-1-b-size);
 }
 .lib-xplat-empty-state .empty-title {
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 500;
   color: var(--semantic-text-subtle);
   margin: 0;
@@ -3791,7 +3793,7 @@
   font-size: var(--semantic-typo-display-2-sb-size);
 }
 .lib-xplat-file-upload .upload-label {
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
   font-weight: 500;
   color: var(--semantic-text-subtle);
   margin: 0;
@@ -3805,7 +3807,7 @@
 /* src/components/HtmlTypeWriter/htmlTypeWriter.scss */
 .lib-xplat-htmlTypewriter {
   width: 100%;
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-htmlTypewriter h1,
 .lib-xplat-htmlTypewriter h2,
@@ -3880,7 +3882,7 @@
 }
 .lib-xplat-imageselector > .content .skeleton > .label {
   margin-top: var(--spacing-space-1);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
   color: var(--semantic-text-muted);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .icon-wrapper {
@@ -3931,17 +3933,17 @@
   font-size: var(--semantic-typo-caption-2-r-size);
 }
 .lib-xplat-pagination.sm .page-btn svg {
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-pagination.lg .dots {
   width: var(--spacing-control-height-md);
   height: var(--spacing-control-height-md);
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-pagination.lg .page-btn {
   min-width: var(--spacing-control-height-md);
   height: var(--spacing-control-height-md);
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-pagination.lg .page-btn svg {
   font-size: var(--semantic-typo-heading-1-m-size);
@@ -3952,7 +3954,7 @@
   justify-content: center;
   width: var(--spacing-control-height-sm);
   height: var(--spacing-control-height-sm);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
   color: var(--semantic-text-muted);
   user-select: none;
 }
@@ -3966,7 +3968,7 @@
   border: none;
   border-radius: var(--spacing-radius-md);
   background: none;
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
   cursor: pointer;
   color: var(--semantic-text-subtle);
   transition: background-color 0.2s, color 0.2s;
@@ -3983,7 +3985,7 @@
   font-weight: 600;
 }
 .lib-xplat-pagination .page-btn svg {
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-pagination.brand .page-btn.active {
   background-color: var(--semantic-surface-brand-default);
@@ -4102,16 +4104,16 @@
   height: var(--spacing-space-2);
 }
 .lib-xplat-radio.sm > span {
-  font-size: var(--semantic-typo-label-2-m-size);
-  line-height: var(--semantic-typo-label-2-m-lh);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
 }
 .lib-xplat-radio.md > .circle {
   width: var(--spacing-space-5);
   height: var(--spacing-space-5);
 }
 .lib-xplat-radio.md > span {
-  font-size: var(--semantic-typo-label-1-m-size);
-  line-height: var(--semantic-typo-label-1-m-lh);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
 }
 .lib-xplat-radio.lg > .circle {
   width: var(--spacing-space-6);
@@ -4122,8 +4124,8 @@
   height: var(--spacing-space-4);
 }
 .lib-xplat-radio.lg > span {
-  font-size: var(--semantic-typo-body-1-m-size);
-  line-height: var(--semantic-typo-body-1-m-lh);
+  font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
 }
 .lib-xplat-radio > .circle {
   border: 2px solid var(--semantic-border-strong);
@@ -4195,38 +4197,29 @@
   z-index: 1;
 }
 .lib-xplat-select.sm .select-trigger {
-  min-height: var(--spacing-control-height-sm);
-  padding: var(--spacing-space-1) var(--spacing-space-2);
-  font-size: var(--semantic-typo-label-2-m-size);
-  line-height: var(--semantic-typo-label-2-m-lh);
+  height: var(--spacing-control-height-sm);
+  padding: 0 var(--spacing-space-2);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
 }
 .lib-xplat-select.md .select-trigger {
-  min-height: var(--spacing-control-height-md);
-  padding: var(--spacing-space-2) var(--spacing-space-3);
-  font-size: var(--semantic-typo-label-1-m-size);
-  line-height: var(--semantic-typo-label-1-m-lh);
-}
-.lib-xplat-select.lg .select-trigger {
-  min-height: var(--spacing-control-height-lg);
-  padding: var(--spacing-space-2) var(--spacing-space-4);
-  font-size: var(--semantic-typo-body-1-m-size);
-  line-height: var(--semantic-typo-body-1-m-lh);
-}
-.lib-xplat-select.sm .select-content .select-item {
-  padding: var(--spacing-space-2) var(--spacing-space-2);
+  height: var(--spacing-control-height-md);
+  padding: 0 var(--spacing-space-3);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
 }
-.lib-xplat-select.lg .select-content .select-item {
-  padding: var(--spacing-space-2) var(--spacing-space-4);
-  font-size: var(--semantic-typo-body-1-m-size);
-  line-height: var(--semantic-typo-body-1-m-lh);
+.lib-xplat-select.lg .select-trigger {
+  height: var(--spacing-control-height-lg);
+  padding: 0 var(--spacing-space-4);
+  font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
 }
 .lib-xplat-select .select-trigger {
   cursor: pointer;
   user-select: none;
   outline: none;
   display: flex;
+  font-weight: var(--semantic-typo-label-1-m-weight);
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-space-2);
@@ -4288,7 +4281,7 @@
   transform: rotate(180deg);
 }
 .lib-xplat-select .select-trigger .select-trigger-icon svg {
-  font-size: var(--semantic-typo-body-1-m-size);
+  font-size: var(--semantic-typo-label-1-m-size);
 }
 .lib-xplat-select-content {
   position: fixed;
@@ -4325,14 +4318,28 @@
   opacity: 0;
   transform: translateY(8px);
 }
-.lib-xplat-select-content .select-item {
-  padding: var(--spacing-space-2) var(--spacing-space-3);
+.lib-xplat-select-content.sm .select-item {
+  padding: var(--spacing-space-2) var(--spacing-space-2);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+}
+.lib-xplat-select-content.lg .select-item {
+  padding: var(--spacing-space-2) var(--spacing-space-4);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+}
+.lib-xplat-select-content .select-item {
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
   cursor: pointer;
   transition: background-color 0.15s ease;
   outline: none;
 }
+.lib-xplat-select-content .select-item.is-selected {
+  font-weight: var(--semantic-typo-label-1-sb-weight);
+}
 .lib-xplat-select-content .select-item:hover:not(.disabled) {
   background-color: var(--semantic-surface-neutral-subtle);
 }
@@ -4467,7 +4474,7 @@
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-steps .step-circle svg {
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-steps .step-content {
   display: flex;
@@ -4579,6 +4586,11 @@
   flex-shrink: 0;
   overflow: hidden;
 }
+.lib-xplat-swiper__slide img {
+  -webkit-user-drag: none;
+  user-drag: none;
+  pointer-events: none;
+}
 .lib-xplat-swiper__progress {
   margin-top: var(--spacing-space-4);
   display: flex;
@@ -4753,14 +4765,14 @@
 .lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > th,
 .lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > td {
   padding: var(--spacing-space-2) var(--spacing-space-3);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > th,
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > td,
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > th,
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > td {
   padding: var(--spacing-space-3) var(--spacing-space-4);
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table {
   width: 100%;
@@ -5041,7 +5053,7 @@
 .lib-xplat-tag.lg {
   gap: var(--spacing-space-1);
   padding: var(--spacing-space-1) var(--spacing-space-2);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-tag.neutral {
   color: var(--semantic-text-muted);
@@ -5117,7 +5129,7 @@
   font-size: var(--semantic-typo-caption-2-r-size);
 }
 .lib-xplat-tag.lg .tag-close svg {
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 
 /* src/components/TextArea/textArea.scss */
@@ -5161,8 +5173,8 @@
   color: var(--semantic-text-subtle);
   resize: none;
   height: 1.5em;
-  font-size: var(--semantic-typo-label-1-m-size);
-  line-height: var(--semantic-typo-label-1-m-lh);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
   font-family: inherit;
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
@@ -5224,8 +5236,8 @@
   gap: var(--spacing-space-2);
   padding: var(--spacing-space-3) var(--spacing-space-4);
   border-radius: var(--spacing-radius-md);
-  font-size: var(--semantic-typo-label-2-m-size);
-  line-height: var(--semantic-typo-label-2-m-lh);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   pointer-events: auto;
   animation: lib-xplat-toast-enter 0.2s ease;
@@ -5244,7 +5256,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-size: var(--semantic-typo-body-1-m-size);
+  font-size: var(--semantic-typo-label-1-m-size);
   line-height: 1;
   padding: 0;
   opacity: 0.6;