@wix/site-ui 1.12.0 → 1.14.0

package/dist/Slider/index.js

@@ -2,7 +2,20 @@ import { jsx } from "react/jsx-runtime";
 import { Slider } from "@base-ui/react/slider";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Slider_module = {};
+const Slider_module = {
+    root: "root-uI1zMj",
+    label: "label-MkH3nw",
+    value: "value-ZbXzRd",
+    control: "control-_J8a2_",
+    track: "track-WMB__l",
+    indicator: "indicator-uJyfNg",
+    thumb: "thumb-oReKer"
+};
+const SliderSize = {
+    small: 12,
+    medium: 16,
+    large: 20
+};
 const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Slider.Label, {
         ref: ref,
         className: clsx(Slider_module.label, className),
@@ -33,10 +46,14 @@ const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className,
         className: clsx(Slider_module.indicator, className),
         ...props
     }));
-function Root({ className, ...props }) {
+function Root({ className, size = SliderSize.medium, style, ...props }) {
     return /*#__PURE__*/ jsx(Slider.Root, {
         ...props,
-        className: clsx(Slider_module.root, className)
+        className: clsx(Slider_module.root, className),
+        style: {
+            '--slider-size': `${size}px`,
+            ...style
+        }
     });
 }
 const Slider_Slider = {
@@ -48,4 +65,4 @@ const Slider_Slider = {
     Indicator: Indicator,
     Root: Root
 };
-export { Slider_Slider as Slider };
+export { SliderSize, Slider_Slider as Slider };

package/dist/Switch/index.css

@@ -1,2 +1,46 @@
+.root-jFySXM {
+  width: var(--switch-width, 44px);
+  height: var(--switch-height, 24px);
+  border-radius: calc(var(--switch-height, 24px) / 2);
+  background-color: var(--wst-system-disabled-color);
+  cursor: pointer;
+  padding: 0;
+  transition: background-color .2s;
+  position: relative;
+}
 
+.root-jFySXM[data-checked] {
+  background-color: var(--wst-links-and-actions-color);
+}
+
+.root-jFySXM[data-disabled] {
+  cursor: default;
+  pointer-events: none;
+  opacity: .5;
+}
+
+.root-jFySXM:focus-visible {
+  outline: 2px solid var(--wst-links-and-actions-color);
+  outline-offset: 2px;
+}
+
+.thumb-aDkgmk {
+  width: var(--switch-thumb-size, 18px);
+  height: var(--switch-thumb-size, 18px);
+  background-color: var(--wst-primary-background-color);
+  border-radius: 50%;
+  transition: left .2s;
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  transform: translateY(-50%);
+}
+
+.root-jFySXM[data-checked] .thumb-aDkgmk {
+  left: calc(var(--switch-width, 44px) - var(--switch-thumb-size, 18px) - 3px);
+}
+
+.root-jFySXM[data-disabled] .thumb-aDkgmk {
+  background-color: color-mix(in srgb, var(--wst-primary-background-color) 60%, transparent);
+}
 

package/dist/Switch/index.d.ts

@@ -5,12 +5,30 @@ import { SwitchThumbProps } from '@base-ui/react/switch';
 export declare const Switch: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SwitchRootProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        width?: number | undefined;
+        height?: number | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
     Thumb: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SwitchThumbProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+export declare const SwitchSize: {
+    readonly small: {
+        readonly width: 36;
+        readonly height: 20;
+    };
+    readonly medium: {
+        readonly width: 44;
+        readonly height: 24;
+    };
+    readonly large: {
+        readonly width: 56;
+        readonly height: 32;
+    };
+};
+
 
 export * from "@base-ui/react/switch";
 

package/dist/Switch/index.js

@@ -2,10 +2,33 @@ import { jsx } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Switch_module = {};
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Switch.Root, {
+const Switch_module = {
+    root: "root-jFySXM",
+    thumb: "thumb-aDkgmk"
+};
+const SwitchSize = {
+    small: {
+        width: 36,
+        height: 20
+    },
+    medium: {
+        width: 44,
+        height: 24
+    },
+    large: {
+        width: 56,
+        height: 32
+    }
+};
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, width = SwitchSize.medium.width, height = SwitchSize.medium.height, style, ...props }, ref)=>/*#__PURE__*/ jsx(Switch.Root, {
         ref: ref,
         className: clsx(Switch_module.root, className),
+        style: {
+            '--switch-width': `${width}px`,
+            '--switch-height': `${height}px`,
+            '--switch-thumb-size': `${height - 6}px`,
+            ...style
+        },
         ...props
     }));
 const Thumb = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Switch.Thumb, {
@@ -17,4 +40,4 @@ const Switch_Switch = {
     Root: Root,
     Thumb: Thumb
 };
-export { Switch_Switch as Switch };
+export { SwitchSize, Switch_Switch as Switch };

package/dist/Tabs/index.css

@@ -1,2 +1,83 @@
+.root-Hb4MhN {
+  box-sizing: border-box;
+  background: var(--wst-primary-background-color, transparent);
+  width: 100%;
+  border-block-start: var(--wst-tabs-border-width-block-start, 0px) solid var(--wst-paragraph-2-color, #0000004d);
+  border-inline-start: var(--wst-tabs-border-width-inline-start, 0px) solid var(--wst-paragraph-2-color, #0000004d);
+  border-inline-end: var(--wst-tabs-border-width-inline-end, 0px) solid var(--wst-paragraph-2-color, #0000004d);
+  border-block-end: var(--wst-tabs-border-width-block-end, 0px) solid var(--wst-paragraph-2-color, #0000004d);
+  border-start-start-radius: var(--wst-tabs-border-radius-start-start, 0px);
+  border-start-end-radius: var(--wst-tabs-border-radius-start-end, 0px);
+  border-end-end-radius: var(--wst-tabs-border-radius-end-end, 0px);
+  border-end-start-radius: var(--wst-tabs-border-radius-end-start, 0px);
+  padding-block-start: var(--wst-tabs-padding-block-start, 0px);
+  padding-block-end: var(--wst-tabs-padding-block-end, 0px);
+  padding-inline-start: var(--wst-tabs-padding-inline-start, 0px);
+  padding-inline-end: var(--wst-tabs-padding-inline-end, 0px);
+}
 
+.list-ZEK7AG {
+  box-sizing: border-box;
+  color: var(--wst-paragraph-2-color, inherit);
+  white-space: nowrap;
+  text-align: center;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  width: 100%;
+  min-height: 52px;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.list-ZEK7AG::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-FRO0Rd {
+  box-sizing: border-box;
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+  -webkit-tap-highlight-color: #0000;
+  vertical-align: bottom;
+  height: 100%;
+  color: inherit;
+  font: var(--wst-paragraph-2-font);
+  background: none;
+  border: 0 solid #0000;
+  border-block-end-width: 3px;
+  border-start-start-radius: var(--wst-tab-border-radius-start-start, 0px);
+  border-start-end-radius: var(--wst-tab-border-radius-start-end, 0px);
+  border-end-end-radius: var(--wst-tab-border-radius-end-end, 0px);
+  border-end-start-radius: var(--wst-tab-border-radius-end-start, 0px);
+  justify-content: center;
+  align-items: center;
+  padding: 14px 3%;
+  display: inline-flex;
+  position: relative;
+}
+
+.tab-FRO0Rd[data-active] {
+  border-style: solid;
+  border-block-start: var(--wst-tab-selected-border-block-start-width, 0px) solid var(--wst-tab-selected-border-block-start-color, transparent);
+  border-block-end: var(--wst-tab-selected-border-block-end-width, 3px) solid var(--wst-links-and-actions-color, currentColor);
+  border-inline-start: var(--wst-tab-selected-border-inline-start-width, 0px) solid var(--wst-tab-selected-border-inline-start-color, transparent);
+  border-inline-end: var(--wst-tab-selected-border-inline-end-width, 0px) solid var(--wst-tab-selected-border-inline-end-color, transparent);
+  background: var(--wst-tab-selected-background-color, transparent);
+  color: var(--wst-tab-selected-text-color, var(--wst-paragraph-2-color, inherit));
+  border-start-start-radius: var(--wst-tab-selected-border-radius-start-start, var(--wst-tab-border-radius-start-start, 0px));
+  border-start-end-radius: var(--wst-tab-selected-border-radius-start-end, var(--wst-tab-border-radius-start-end, 0px));
+  border-end-end-radius: var(--wst-tab-selected-border-radius-end-end, var(--wst-tab-border-radius-end-end, 0px));
+  border-end-start-radius: var(--wst-tab-selected-border-radius-end-start, var(--wst-tab-border-radius-end-start, 0px));
+}
+
+.indicator-a2Roef {
+  background-color: var(--wst-links-and-actions-color, currentColor);
+  z-index: 1000;
+  height: 3px;
+  transition: left .4s ease-in-out, width .4s ease-in-out;
+  position: absolute;
+  bottom: 0;
+}
 

package/dist/Tabs/index.js

@@ -2,7 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Tabs_module = {};
+const Tabs_module = {
+    root: "root-Hb4MhN",
+    list: "list-ZEK7AG",
+    tab: "tab-FRO0Rd",
+    indicator: "indicator-a2Roef"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.Root, {
         ref: ref,
         className: clsx(Tabs_module.root, className),

package/dist/Toggle/index.css

@@ -1,2 +1,72 @@
+.root-b5XZrV {
+  box-sizing: border-box;
+  padding: var(--wst-button-secondary-padding-top) var(--wst-button-secondary-padding-right) var(--wst-button-secondary-padding-bottom) var(--wst-button-secondary-padding-left);
+  border-top: var(--wst-button-secondary-border-top-width) var(--wst-button-secondary-border-top-style) var(--wst-button-secondary-border-top-color);
+  border-inline-end: var(--wst-button-secondary-border-right-width) var(--wst-button-secondary-border-right-style) var(--wst-button-secondary-border-right-color);
+  border-bottom: var(--wst-button-secondary-border-bottom-width) var(--wst-button-secondary-border-bottom-style) var(--wst-button-secondary-border-bottom-color);
+  border-inline-start: var(--wst-button-secondary-border-left-width) var(--wst-button-secondary-border-left-style) var(--wst-button-secondary-border-left-color);
+  background-color: var(--wst-button-secondary-background-color);
+  color: var(--wst-button-secondary-color);
+  font: var(--wst-button-secondary-font);
+  cursor: pointer;
+  border-start-start-radius: var(--wst-button-secondary-border-top-left-radius);
+  border-start-end-radius: var(--wst-button-secondary-border-top-right-radius);
+  border-end-end-radius: var(--wst-button-secondary-border-bottom-right-radius);
+  border-end-start-radius: var(--wst-button-secondary-border-bottom-left-radius);
+  justify-content: center;
+  align-items: center;
+  line-height: normal;
+  transition: opacity .2s cubic-bezier(.39, .11, .37, .99);
+  display: inline-flex;
+}
 
+.root-b5XZrV:hover {
+  opacity: .8;
+}
+
+.root-b5XZrV[data-pressed] {
+  background-color: var(--wst-button-primary-background-color);
+  color: var(--wst-button-primary-color);
+  border-top-color: var(--wst-button-primary-background-color);
+  border-inline-end-color: var(--wst-button-primary-background-color);
+  border-bottom-color: var(--wst-button-primary-background-color);
+  border-inline-start-color: var(--wst-button-primary-background-color);
+}
+
+.root-b5XZrV:disabled {
+  color: var(--wst-system-disabled-color);
+  border-color: var(--wst-system-disabled-color);
+  cursor: default;
+  pointer-events: none;
+}
+
+.root-b5XZrV:disabled:hover {
+  opacity: 1;
+}
+
+.root-b5XZrV:focus-visible {
+  outline: 2px solid var(--wst-links-and-actions-color);
+  outline-offset: 2px;
+}
+
+@keyframes toggle-pop-in-YeDB_9 {
+  0% {
+    opacity: 0;
+    transform: scale(.9);
+  }
+
+  50% {
+    opacity: .32;
+    transform: scale(1.03);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.root-b5XZrV[data-pressed] {
+  animation: .2s forwards toggle-pop-in-YeDB_9;
+}
 

package/dist/Toggle/index.js

@@ -2,7 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Toggle_module = {};
+const Toggle_module = {
+    root: "root-b5XZrV",
+    "toggle-pop-in": "toggle-pop-in-YeDB_9",
+    togglePopIn: "toggle-pop-in-YeDB_9"
+};
 const Toggle_Toggle = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Toggle, {
         ref: ref,
         className: clsx(Toggle_module.root, className),

package/dist/ToggleGroup/index.css

@@ -1,2 +1,5 @@
-
+.root-JZaWem {
+  gap: 4px;
+  display: inline-flex;
+}
 

package/dist/ToggleGroup/index.js

@@ -2,7 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const ToggleGroup_module = {};
+const ToggleGroup_module = {
+    root: "root-JZaWem"
+};
 const ToggleGroup_ToggleGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToggleGroup, {
         ref: ref,
         className: clsx(ToggleGroup_module.root, className),

package/dist/Toolbar/index.css

@@ -1,2 +1,58 @@
+.root-TasA57 {
+  align-items: center;
+  gap: 2px;
+  display: flex;
+}
 
+.button-VwIpOv {
+  box-sizing: border-box;
+  color: var(--wst-paragraph-2-color);
+  font: var(--wst-paragraph-2-font);
+  cursor: pointer;
+  background: none;
+  border: 1px solid #0000;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 10px;
+  display: inline-flex;
+}
+
+.button-VwIpOv:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color) 8%, transparent);
+}
+
+.button-VwIpOv[data-pressed] {
+  background-color: color-mix(in srgb, var(--wst-links-and-actions-color) 12%, transparent);
+  color: var(--wst-links-and-actions-color);
+}
+
+.button-VwIpOv:disabled {
+  color: var(--wst-system-disabled-color);
+  cursor: default;
+  pointer-events: none;
+}
+
+.link-ONsUed {
+  color: var(--wst-links-and-actions-color);
+  font: var(--wst-paragraph-2-font);
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 10px;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.link-ONsUed:hover {
+  text-decoration: underline;
+}
+
+.separator-pZlgb3 {
+  background-color: var(--wst-system-line-1-color);
+  flex-shrink: 0;
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+}
 

package/dist/Toolbar/index.js

@@ -2,7 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { Toolbar } from "@base-ui/react/toolbar";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Toolbar_module = {};
+const Toolbar_module = {
+    root: "root-TasA57",
+    button: "button-VwIpOv",
+    link: "link-ONsUed",
+    separator: "separator-pZlgb3"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Toolbar.Root, {
         ref: ref,
         className: clsx(Toolbar_module.root, className),

package/dist/Tooltip/index.css

@@ -1,2 +1,134 @@
+.trigger-xVlrp2 {
+  padding: var(--wst-button-secondary-padding-top) var(--wst-button-secondary-padding-right) var(--wst-button-secondary-padding-bottom) var(--wst-button-secondary-padding-left);
+  border-top: var(--wst-button-secondary-border-top-width) var(--wst-button-secondary-border-top-style) var(--wst-button-secondary-border-top-color);
+  border-inline-end: var(--wst-button-secondary-border-right-width) var(--wst-button-secondary-border-right-style) var(--wst-button-secondary-border-right-color);
+  border-bottom: var(--wst-button-secondary-border-bottom-width) var(--wst-button-secondary-border-bottom-style) var(--wst-button-secondary-border-bottom-color);
+  border-inline-start: var(--wst-button-secondary-border-left-width) var(--wst-button-secondary-border-left-style) var(--wst-button-secondary-border-left-color);
+  background-color: var(--wst-button-secondary-background-color);
+  color: var(--wst-button-secondary-color);
+  font: var(--wst-button-secondary-font);
+  cursor: pointer;
+  border-start-start-radius: var(--wst-button-secondary-border-top-left-radius);
+  border-start-end-radius: var(--wst-button-secondary-border-top-right-radius);
+  border-end-end-radius: var(--wst-button-secondary-border-bottom-right-radius);
+  border-end-start-radius: var(--wst-button-secondary-border-bottom-left-radius);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
 
+.positioner-sRKHj5[data-side="top"] {
+  padding-bottom: 6px;
+}
+
+.positioner-sRKHj5[data-side="bottom"] {
+  padding-top: 6px;
+}
+
+.positioner-sRKHj5[data-side="left"] {
+  padding-right: 6px;
+}
+
+.positioner-sRKHj5[data-side="right"] {
+  padding-left: 6px;
+}
+
+.positioner-sRKHj5[data-side="top"] .popup-V_41k4 {
+  transform-origin: bottom;
+}
+
+.positioner-sRKHj5[data-side="bottom"] .popup-V_41k4 {
+  transform-origin: top;
+}
+
+.positioner-sRKHj5[data-side="left"] .popup-V_41k4 {
+  transform-origin: 100%;
+}
+
+.positioner-sRKHj5[data-side="right"] .popup-V_41k4 {
+  transform-origin: 0;
+}
+
+.popup-V_41k4 {
+  background-color: var(--wst-paragraph-2-color, #212121);
+  border: 1px solid var(--wst-primary-background-color, #fff);
+  color: var(--wst-primary-background-color, #fff);
+  font: var(--wst-paragraph-3-font);
+  -webkit-font-smoothing: auto;
+  border-radius: 3px;
+  padding: 4px 12px;
+  transition: transform .12s cubic-bezier(.25, .46, .45, .94), opacity .12s cubic-bezier(.25, .46, .45, .94);
+  box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
+}
+
+.popup-V_41k4[data-starting-style], .popup-V_41k4[data-ending-style] {
+  opacity: 0;
+}
+
+.positioner-sRKHj5[data-side="top"] .popup-V_41k4[data-starting-style] {
+  transform: scale(.9) translateY(3px);
+}
+
+.positioner-sRKHj5[data-side="bottom"] .popup-V_41k4[data-starting-style] {
+  transform: scale(.9) translateY(-3px);
+}
+
+.positioner-sRKHj5[data-side="left"] .popup-V_41k4[data-starting-style] {
+  transform: scale(.9) translateX(10px);
+}
+
+.positioner-sRKHj5[data-side="right"] .popup-V_41k4[data-starting-style] {
+  transform: scale(.9) translateX(-10px);
+}
+
+.popup-V_41k4[data-ending-style] {
+  transition: transform 80ms linear, opacity 80ms linear;
+}
+
+.arrow-aUAEXL {
+  margin: 0;
+  display: block;
+  position: absolute;
+}
+
+.arrow-aUAEXL svg {
+  display: block;
+}
+
+.arrow-aUAEXL path {
+  fill: var(--wst-paragraph-2-color, #212121);
+  stroke: var(--wst-paragraph-2-color, #212121);
+}
+
+.arrow-aUAEXL path:first-child {
+  stroke: none;
+}
+
+.arrow-aUAEXL path:last-child {
+  stroke-dasharray: 0 17 17;
+}
+
+.positioner-sRKHj5[data-side="top"] .arrow-aUAEXL {
+  width: 12px;
+  height: 7px;
+  bottom: -1px;
+}
+
+.positioner-sRKHj5[data-side="bottom"] .arrow-aUAEXL {
+  width: 12px;
+  height: 7px;
+  top: -1px;
+}
+
+.positioner-sRKHj5[data-side="left"] .arrow-aUAEXL {
+  width: 7px;
+  height: 12px;
+  right: -1px;
+}
+
+.positioner-sRKHj5[data-side="right"] .arrow-aUAEXL {
+  width: 7px;
+  height: 12px;
+  left: -1px;
+}
 

package/dist/Tooltip/index.js

@@ -2,7 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Tooltip_module = {};
+const Tooltip_module = {
+    trigger: "trigger-xVlrp2",
+    positioner: "positioner-sRKHj5",
+    popup: "popup-V_41k4",
+    arrow: "arrow-aUAEXL"
+};
 function Trigger({ className, ...props }) {
     return /*#__PURE__*/ jsx(Tooltip.Trigger, {
         ...props,

package/dist/Typography/index.css

@@ -0,0 +1,45 @@
+.h1-go2_mI {
+  font: var(--wst-heading-1-font);
+  color: var(--wst-heading-1-color);
+}
+
+.h2-dAyvwd {
+  font: var(--wst-heading-2-font);
+  color: var(--wst-heading-2-color);
+}
+
+.h3-LClqyK {
+  font: var(--wst-heading-3-font);
+  color: var(--wst-heading-3-color);
+}
+
+.h4-pzBHGr {
+  font: var(--wst-heading-4-font);
+  color: var(--wst-heading-4-color);
+}
+
+.h5-HOx5Wp {
+  font: var(--wst-heading-5-font);
+  color: var(--wst-heading-5-color);
+}
+
+.h6-zCNm1M {
+  font: var(--wst-heading-6-font);
+  color: var(--wst-heading-6-color);
+}
+
+.p1-pY02jM {
+  font: var(--wst-paragraph-1-font);
+  color: var(--wst-paragraph-1-color);
+}
+
+.p2-TsZIq5 {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
+}
+
+.p3-N6QdAQ {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
+}
+

package/dist/Typography/index.d.ts

@@ -0,0 +1,12 @@
+import * as React_2 from 'react';
+
+export declare const Typography: React_2.ForwardRefExoticComponent<TypographyProps & React_2.RefAttributes<HTMLElement>>;
+
+export declare interface TypographyProps extends React_2.HTMLAttributes<HTMLElement> {
+    variant?: TypographyVariant;
+    render?: React_2.ReactElement;
+}
+
+export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p1' | 'p2' | 'p3';
+
+export { }