@ironsource/shared-ui 1.4.3 → 2.0.0-rc.1

package/index.vue.js

@@ -1,10 +1,9 @@
-import './Dropdown.vue_vue_type_style_index_0_scoped_true_lang.css';
+import './AutocompleteDropdown.vue_vue_type_style_index_0_scoped_true_lang.css';
 export { AppTriggerTypes } from './components/appTrigger/index.vue.js';
 export { AutocompleteDropdownTypes } from './components/autocompleteDropdown/index.vue.js';
 export { MenuItemTypes } from './components/menuItem/index.vue.js';
 export { MenuTypes } from './components/menu/index.vue.js';
 export { AppIconTypes } from './components/appIcon/index.vue.js';
-export { SwitchTypes } from './components/switch/index.vue.js';
 export { RadioButtonTypes } from './components/radioButton/index.vue.js';
 export { Snackbar } from './components/snackbar/index.vue.js';
 export { FloatingToolbarTypes } from './components/floatingToolbar/index.vue.js';
@@ -16,16 +15,23 @@ export { TableTypes } from './components/table/index.vue.js';
 export { DialogTypes } from './components/dialog/index.vue.js';
 export { FilterPanelTypes } from './components/filtersPanel/index.vue.js';
 export { FilterDropdownTypes } from './components/filterDropdown/index.vue.js';
-export { DropdownTypes } from './components/dropdown/index.vue.js';
 export { TabsTypes } from './components/tabs/index.vue.js';
-export { ButtonTypes } from './components/button/index.vue.js';
 export { CheckboxTypes } from './components/checkbox/index.vue.js';
 export { IconTypes } from './components/icon/index.vue.js';
-export { SearchTypes } from './components/search/index.vue.js';
 export { SkeletonTypes } from './components/skeleton/index.vue.js';
 export { TypographyTypes } from './components/typography/index.vue.js';
+export { TypographyTypesV4 } from './components/typography/v4/index.vue.js';
 export { PopoverTypes } from './components/popover/index.vue.js';
-export { ChipTypes } from './components/chip/index.vue.js';
+import * as index$5 from './components/button/v3/index.vue.js';
+import * as index$6 from './components/button/v4/index.vue.js';
+import * as index$1 from './components/chip/v3/index.vue.js';
+import * as index$2 from './components/chip/v4/index.vue.js';
+import * as index$3 from './components/switch/v3/index.vue.js';
+import * as index$4 from './components/switch/v4/index.vue.js';
+import * as index$7 from './components/dropdown/v3/index.vue.js';
+import * as index$8 from './components/dropdown/v4/index.vue.js';
+import * as index$9 from './components/search/v3/index.vue.js';
+import * as index$a from './components/search/v4/index.vue.js';
 export { ToggleTypes } from './components/toggle/index.vue.js';
 export { TooltipTypes } from './components/tooltip/index.vue.js';
 export { InputTypes } from './components/input/index.vue.js';
@@ -43,7 +49,6 @@ export { default as AutocompleteDropdown } from './components/autocompleteDropdo
 export { default as MenuItem } from './components/menuItem/MenuItem.vue.js';
 export { default as Menu } from './components/menu/Menu.vue.js';
 export { default as AppIcon } from './components/appIcon/AppIcon.vue.js';
-export { default as Switch } from './components/switch/Switch.vue.js';
 export { default as RadioButton } from './components/radioButton/RadioButton.vue.js';
 export { default as RadioGroup } from './components/radioButton/RadioGroup.vue.js';
 export { snackbarEmits, snackbarTypes } from './components/snackbar/snackbar.types.vue.js';
@@ -66,22 +71,14 @@ export { default as FilterSearchInput } from './components/filtersPanel/FilterSe
 export { useHiddenFilter } from './components/filtersPanel/useHiddenFilter.vue.js';
 export { default as FilterDropdown } from './components/filterDropdown/FilterDropdown.vue.js';
 export { default as AddFilterButton } from './components/filterDropdown/AddFilterButton.vue.js';
-export { default as Dropdown } from './components/dropdown/Dropdown.vue.js';
-export { default as Option } from './components/dropdown/Option.vue.js';
-export { default as Label } from './components/dropdown/Label.vue.js';
-export { default as SearchInput } from './components/dropdown/SearchInput.vue.js';
 export { default as Tabs } from './components/tabs/Tabs.vue.js';
-export { default as Button } from './components/button/Button.vue.js';
-export { default as IconButton } from './components/button/IconButton.vue.js';
-export { default as ScrollButton } from './components/button/ScrollButton.vue.js';
 export { default as Checkbox } from './components/checkbox/Checkbox.vue.js';
 export { default as Icon } from './components/icon/Icon.vue.js';
 export { icons } from './components/icon/icons/index.vue.js';
-export { default as Search } from './components/search/Search.vue.js';
 export { default as Skeleton } from './components/skeleton/Skeleton.vue.js';
 export { default as Heading } from './components/typography/Heading.vue.js';
 export { default as Text } from './components/typography/Text.vue.js';
-export { default as Chip } from './components/chip/Chip.vue.js';
+export { default as Typography } from './components/typography/v4/Typography.vue.js';
 export { default as Toggle } from './components/toggle/Toggle.vue.js';
 export { default as Input } from './components/input/Input.vue.js';
 export { default as DollarInput } from './components/input/DollarInput.vue.js';
@@ -93,3 +90,18 @@ export { EditableContext, useEditableContext } from './components/table-cells/Ed
 export { default as DateRange } from './components/dateRange/DateRange.vue.js';
 export { default as DatePicker } from './components/datePicker/DatePicker.vue.js';
 export { default as Banner } from './components/banner/Banner.vue.js';
+
+var index = {
+  ...index$1,
+  ...index$2,
+  ...index$3,
+  ...index$4,
+  ...index$5,
+  ...index$6,
+  ...index$7,
+  ...index$8,
+  ...index$9,
+  ...index$a
+};
+
+export { index as default };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "1.4.3",
+  "version": "2.0.0-rc.1",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && node inject-css.js",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && node inject-css.js && sh ./scripts/build-styles.sh",
     "preview": "vite preview",
     "storybook": "StoryBookEnv=dev start-storybook -p 6006",
     "storybook:dist": "StoryBookEnv=prod start-storybook -p 6006",
@@ -140,7 +140,8 @@
       "import": "./index.js"
     },
     "./appIcon": "./components/appIcon/AppIcon.vue.js",
-    "./switch": "./components/switch/Switch.vue.js",
+    "./switch": "./components/switch/v3/Switch.vue.js",
+    "./switch/v4": "./components/switch/v4/SwitchV4.vue.js",
     "./editable": "./components/table-cells/Editable.vue.js",
     "./radioButton": "./components/radioButton/RadioButton.vue.js",
     "./radioGroup": "./components/radioButton/RadioGroup.vue.js",
@@ -153,19 +154,23 @@
     "./dateRange": "./components/dateRange/DateRange.vue.js",
     "./datePicker": "./components/datePicker/DatePicker.vue.js",
     "./dialog": "./components/dialog/Dialog.vue.js",
-    "./dropdown": "./components/dropdown/index.vue.js",
+    "./dropdown": "./components/dropdown/v3/index.vue.js",
+    "./dropdown/v4": "./components/dropdown/v4/index.vue.js",
     "./filterDropdown": "./components/filterDropdown/FilterDropdown.vue.js",
     "./filtersPanel": "./components/filtersPanel/index.vue.js",
     "./tabs": "./components/tabs/Tabs.vue.js",
-    "./chip": "./components/chip/Chip.vue.js",
-    "./button": "./components/button/Button.vue.js",
-    "./iconButton": "./components/button/IconButton.vue.js",
-    "./scrollButton": "./components/button/ScrollButton.vue.js",
+    "./chip": "./components/chip/v3/Chip.vue.js",
+    "./chip/v4": "./components/chip/v4/ChipV4.vue.js",
+    "./button": "./components/button/v3/Button.vue.js",
+    "./button/v4": "./components/button/v4/ButtonV4.vue.js",
+    "./iconButton": "./components/button/v3/IconButton.vue.js",
+    "./scrollButton": "./components/button/v3/ScrollButton.vue.js",
     "./checkbox": "./components/checkbox/Checkbox.vue.js",
     "./icon": "./components/icon/Icon.vue.js",
     "./toggle": "./components/toggle/Toggle.vue.js",
     "./tooltip": "./components/tooltip/Tooltip.vue.js",
-    "./search": "./components/search/Search.vue.js",
+    "./search": "./components/search/v3/Search.vue.js",
+    "./search/v4": "./components/search/v4/Search.vue.js",
     "./useId": "./composables/useId.vue.js",
     "./skeleton": "./components/skeleton/Skeleton.vue.js",
     "./text": "./components/typography/Text.vue.js",
@@ -177,7 +182,9 @@
     "./percentageInput": "./components/input/PercentageInput.vue.js",
     "./textArea": "./components/textArea/TextArea.vue.js",
     "./styleguide": "./styleguide.scss",
-    "./banner": "./components/banner/Banner.vue.js"
+    "./commonCssVariables": "./commonCssVariables.scss",
+    "./banner": "./components/banner/Banner.vue.js",
+    "./typography": "./components/typography/v4/Typography.vue.js"
   },
   "typesVersions": {
     "*": {
@@ -215,7 +222,10 @@
         "./components/includeExclude/index.d.ts"
       ],
       "switch": [
-        "./components/switch/Switch.vue.d.ts"
+        "./components/switch/v3/Switch.vue.d.ts"
+      ],
+      "switch/v4": [
+        "./components/switch/v4/SwitchV4.vue.d.ts"
       ],
       "cssBaseline": [
         "./components/cssBaseline/CssBaseline.vue.d.ts"
@@ -232,6 +242,9 @@
       "dropdown": [
         "./components/dropdown/index.d.ts"
       ],
+      "dropdown/v4": [
+        "./components/dropdown/v4/index.d.ts"
+      ],
       "filtersPanel": [
         "./components/filtersPanel/index.d.ts"
       ],
@@ -248,10 +261,16 @@
         "./components/datePicker/DatePicker.vue.d.ts"
       ],
       "chip": [
-        "./components/chip/Chip.vue.d.ts"
+        "./components/chip/v3/Chip.vue.d.ts"
+      ],
+      "chip/v4": [
+        "./components/chip/v4/ChipV4.vue.d.ts"
       ],
       "button": [
-        "./components/button/Button.vue.d.ts"
+        "./components/button/v3/Button.vue.d.ts"
+      ],
+      "button/v4": [
+        "./components/button/v4/ButtonV4.vue.d.ts"
       ],
       "iconButton": [
         "./components/button/IconButton.vue.d.ts"
@@ -272,7 +291,10 @@
         "./components/tooltip/Tooltip.vue.d.ts"
       ],
       "search": [
-        "./components/search/Search.vue.d.ts"
+        "./components/search/v3/Search.vue.d.ts"
+      ],
+      "search/v4": [
+        "./components/search/v4/Search.vue.d.ts"
       ],
       "skeleton": [
         "./components/skeleton/Skeleton.vue.d.ts"
@@ -300,6 +322,9 @@
       ],
       "textArea": [
         "./components/textArea/TextArea.vue.d.ts"
+      ],
+      "typography": [
+        "./components/typography/v4/Typography.vue.d.ts"
       ]
     }
   },

package/styleguide.scss

@@ -1,32 +1,32 @@
 /* #region Colors */
-$white: #FFFFFF;
+$white: #ffffff;
 $black: #000000;
 
-$black-200: #696A6b;
-$black-300: #565C62;
+$black-200: #696a6b;
+$black-300: #565c62;
 $black-500: #53575b;
 $black-900: #41454d;
 
-$primary-100: #E2EEFF;
-$primary-200: #C9DFFF;
-$primary-300: #96C0FF;
-$primary-400: #68A5FF;
-$primary-500: #3083FF;
-$primary-600: #2B76E6;
-$primary-700: #005BE2;
-$primary-800: #0051C9;
-$primary-900: #0046AF;
-
-$light-50: #F7F8F9;
-$light-100: #F1F3F4;
-$light-200: #EDEFF0;
-$light-300: #E5E7E9;
-$light-400: #DDDFE1;
-$light-500: #D2D5D8;
-$light-600: #B7BBC0;
-$light-700: #A9AFB4;
-$light-800: #8E959D;
-$light-900: #7B838C;
+$primary-100: #e2eeff;
+$primary-200: #c9dfff;
+$primary-300: #96c0ff;
+$primary-400: #68a5ff;
+$primary-500: #3083ff;
+$primary-600: #2b76e6;
+$primary-700: #005be2;
+$primary-800: #0051c9;
+$primary-900: #0046af;
+
+$light-50: #f7f8f9;
+$light-100: #f1f3f4;
+$light-200: #edeff0;
+$light-300: #e5e7e9;
+$light-400: #dddfe1;
+$light-500: #d2d5d8;
+$light-600: #b7bbc0;
+$light-700: #a9afb4;
+$light-800: #8e959d;
+$light-900: #7b838c;
 $light-1000: #626970;
 
 $secondary-100: #e1fbfc;
@@ -56,14 +56,14 @@ $negative-500: #ff6a63;
 $negative-600: #ec5d56;
 $negative-700: #da564f;
 
-$dark-100: #CFD0E8;
-$dark-200: #B6B9DD;
+$dark-100: #cfd0e8;
+$dark-200: #b6b9dd;
 $dark-300: #313d91;
 $dark-400: #212791;
 $dark-500: #0d148c;
 $dark-600: #021074;
 $dark-700: #1d1c64;
-$dark-800: #070A46;
+$dark-800: #070a46;
 
 $alpha-30: 4D;
 $input-shadow-color: unquote($primary-500 + '' + $alpha-30);
@@ -105,20 +105,20 @@ $breakpoint-xl: 1920px;
 /* #endregion Breakpoints */
 
 /* #region Media */
-$mobile: "only screen and (max-width:#{$breakpoint-xxs-end})";
-$tablet: "only screen and (min-width:#{$breakpoint-sm-start}) and (max-width:#{$breakpoint-sm-end})";
-$smallLaptop: "only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-md-end})";
-$largeLaptop: "only screen and (min-width:#{$breakpoint-lg-start}) and (max-width:#{$breakpoint-lg-end})";
-$desktop: "only screen and (min-width:#{$breakpoint-xl})";
+$mobile: 'only screen and (max-width:#{$breakpoint-xxs-end})';
+$tablet: 'only screen and (min-width:#{$breakpoint-sm-start}) and (max-width:#{$breakpoint-sm-end})';
+$smallLaptop: 'only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-md-end})';
+$largeLaptop: 'only screen and (min-width:#{$breakpoint-lg-start}) and (max-width:#{$breakpoint-lg-end})';
+$desktop: 'only screen and (min-width:#{$breakpoint-xl})';
 // inclusive - mobile and below: use mobile, huge and below: everything, no need for media query
-$tabletAndBelow: "only screen and (max-width:#{$breakpoint-sm-end})";
-$tabletAndAbove: "only screen and (min-width:#{$breakpoint-sm-start})";
-$smallLaptopAndBelow: "only screen and (max-width:#{$breakpoint-md-end})";
-$largeLaptopAndBelow: "only screen and (max-width:#{$breakpoint-lg-end})";
-$desktopAndAbove: "only screen and (min-width:#{$breakpoint-xl})";
-$largeLaptopAndAbove: "only screen and (min-width:#{$breakpoint-lg-start})";
+$tabletAndBelow: 'only screen and (max-width:#{$breakpoint-sm-end})';
+$tabletAndAbove: 'only screen and (min-width:#{$breakpoint-sm-start})';
+$smallLaptopAndBelow: 'only screen and (max-width:#{$breakpoint-md-end})';
+$largeLaptopAndBelow: 'only screen and (max-width:#{$breakpoint-lg-end})';
+$desktopAndAbove: 'only screen and (min-width:#{$breakpoint-xl})';
+$largeLaptopAndAbove: 'only screen and (min-width:#{$breakpoint-lg-start})';
 // combinations
-$laptop: "only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-lg-end})";
+$laptop: 'only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-lg-end})';
 /* #endregion Media */
 
 /* #region Grid */
@@ -127,8 +127,8 @@ $grid-gap: 1rem;
 /* #endregion Grid */
 
 /* #region Fonts */
-$heading-font-family: "NHaasGroteskDSPro-75Bd", sans-serif;
-$heading-font-family-label: "NHaasGroteskDSPro-65Md", sans-serif;
+$heading-font-family: 'NHaasGroteskDSPro-75Bd', sans-serif;
+$heading-font-family-label: 'NHaasGroteskDSPro-65Md', sans-serif;
 $heading-font-size-1: 3.75rem;
 $heading-font-size-2: 2rem;
 $heading-font-size-3: 1.375rem;
@@ -149,7 +149,7 @@ $body-font-weight-strong: 500;
 $font-smoothing: antialiased;
 $heading-line-height: 1.1rem;
 $body-line-height: 1.5rem;
-.label{
+.label {
   color: $black-900;
 }
 /* #endregion Fonts */
@@ -159,52 +159,51 @@ $border: 1px solid $light-400;
 $shape-border-radius: $spacing-1;
 
 $popover-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.16),
-0px 0px 1px rgba(0, 0, 0, 0.4);
-$modal-shadow: 0px 32px 32px -8px rgba(0, 0, 0, 0.08), 0px 0px 32px -8px rgba(0, 0, 0, 0.12);
-
+  0px 0px 1px rgba(0, 0, 0, 0.4);
+$modal-shadow: 0px 32px 32px -8px rgba(0, 0, 0, 0.08),
+  0px 0px 32px -8px rgba(0, 0, 0, 0.12);
 
 $focus-line: linear-gradient(
-                0deg,
-                $primary-500 0,
-                $primary-500 2px,
-                $light-100 0
+  0deg,
+  $primary-500 0,
+  $primary-500 2px,
+  $light-100 0
 );
 $focus-line-white: linear-gradient(
-                0deg,
-                $primary-500 0,
-                $primary-500 2px,
-                $white 0
+  0deg,
+  $primary-500 0,
+  $primary-500 2px,
+  $white 0
 );
 $error-focus-line: linear-gradient(
-                0deg,
-                $negative-500 0,
-                $negative-500 2px,
-                $light-100 0
+  0deg,
+  $negative-500 0,
+  $negative-500 2px,
+  $light-100 0
 );
 $error-focus-line-white: linear-gradient(
-                0deg,
-                $negative-500 0,
-                $negative-500 2px,
-                $white 0
+  0deg,
+  $negative-500 0,
+  $negative-500 2px,
+  $white 0
 );
 
-
 @mixin scrollbar {
-    ::-webkit-scrollbar {
-        width: 0.625rem;
-        opacity: 0.7;
-        background-color: transparent;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        border: 3px solid transparent;
-        background-clip: padding-box;
-        border-radius: 0.625rem;
-        background-color: $light-500 !important;
-      }
-
-      ::-webkit-scrollbar-track {
-        border-radius: 0.625rem;
-        background-color: transparent;
-      }
+  ::-webkit-scrollbar {
+    width: 0.625rem;
+    opacity: 0.7;
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-clip: padding-box;
+    border-radius: 0.625rem;
+    background-color: $light-500 !important;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 0.625rem;
+    background-color: transparent;
+  }
 }

package/styles/v4/border-radius.css

@@ -0,0 +1,8 @@
+:root {
+    --border-radius-xs: 2px;
+    --border-radius-sm: 4px;
+    --border-radius-md: 6px;
+    --border-radius-lg: 8px;
+    --border-radius-xl: 16px;
+    --border-radius-full: 100px;
+}

package/styles/v4/colors.css

@@ -0,0 +1,100 @@
+:root {
+  --background-default: #FFFFFF;
+  --background-neutral: #FFFFFF;
+  --background-paper: hsl(0, 0%, 99.0%);
+  --background-modalElevation: #FFFFFF;
+  --background-paperElevation0: hsl(0, 0%, 97.5%);
+  --background-paperElevation1: hsl(0, 0%, 94.6%);
+  --background-paperElevation2: hsl(0, 0%, 92.0%);
+  --background-paperElevation3: hsl(0, 0%, 89.5%);
+  --background-paperElevation4: hsl(0, 0%, 86.8%);
+  --background-paperElevation5: hsl(0, 0%, 83.0%);
+  --background-paperElevation6: hsl(0, 0%, 73.2%);
+  --background-paperElevation7: hsl(0, 0%, 55.2%);
+  --background-paperElevation8: hsl(0, 0%, 50.3%);
+  --background-paperElevation9: hsl(0, 0%, 39.3%);
+
+  --action-primary: hsl(0, 0%, 12.5%);
+  --action-active: hsl(0, 0%, 50.3%);
+  --action-hover: hsl(0, 0%, 92.0%);
+  --action-selected: hsl(0, 0%, 89.5%);
+  --action-disabled: hsl(0, 0%, 73.2%);
+  --action-disabledBackground: hsl(0, 0%, 92.0%);
+  --action-focus: hsl(0, 0%, 92.0%);
+  --action-outlinedBorder: hsl(0, 0%, 83.0%);
+
+  --default-light: hsl(0, 0%, 89.5%);
+  --default-main: hsl(0, 0%, 86.8%);
+  --default-dark: hsl(0, 0%, 92.0%);
+  --default-outlinedBorder: hsl(0, 0%, 73.2%);
+  --default-contrastText: hsl(0, 0%, 12.5%);
+
+  --common-white: #FFFFFF;
+  --common-black: #000000;
+  --common-inverseWhite: #000000;
+  --common-inverseBlack: #FFFFFF;
+
+  --text-primary: hsl(0, 0%, 12.5%);
+  --text-secondary: hsl(0, 0%, 39.3%);
+  --text-disabled: hsl(0, 0%, 50.3%);
+
+  --primary-lighter: hsl(209, 100%, 96.5%);
+  --primary-light: hsl(209, 95.0%, 90.1%);
+  --primary-main: hsl(206, 100%, 50.0%);
+  --primary-main8p: hsla(206, 100%, 50%, 0.08);
+  --primary-main50p: hsla(206, 100%, 50%, 0.5);
+  --primary-dark: hsl(208, 93.5%, 47.4%);
+  --primary-darker: hsl(211, 90.0%, 42.0%);
+  --primary-hover: hsl(209, 100%, 96.5%);
+  --primary-selected: hsl(209, 95.0%, 90.1%);
+  --primary-outlinedBorder: hsl(206, 100%, 50.0%);
+  --primary-contrastText: hsl(216, 71.0%, 23.0%);
+
+  --info-lighter: hsl(223, 98.4%, 97.1%);
+  --info-light: hsl(224, 87.1%, 92.0%);
+  --info-main: hsl(226, 70.0%, 55.5%);
+  --info-main8p: hsla(226, 70%, 55.5%, 0.08);
+  --info-main50p: hsla(226, 70%, 55.5%, 0.5);
+  --info-dark: hsl(226, 58.6%, 51.3%);
+  --info-darker: hsl(226, 55.0%, 45.0%);
+  --info-hover: hsl(223, 98.4%, 97.1%);
+  --info-outlinedBorder: hsl(226, 70.0%, 55.5%);
+  --info-contrastText: hsl(226, 50.0%, 24.0%);
+
+  --success-lighter: hsl(139, 55.2%, 94.5%);
+  --success-light: hsl(141, 43.7%, 86.0%);
+  --success-main: hsl(151, 55.0%, 41.5%);
+  --success-main8p: hsla(151, 55%, 41.5%, 0.08);
+  --success-main50p: hsla(151, 55%, 41.5%, 0.5);
+  --success-dark: hsl(152, 57.5%, 37.6%);
+  --success-darker: hsl(153, 67.0%, 28.5%);
+  --success-hover: hsl(139, 55.2%, 94.5%);
+  --success-outlinedBorder: hsl(151, 55.0%, 41.5%);
+  --success-contrastText: hsl(155, 40.0%, 16.5%);
+
+  --warning-lighter: hsl(45, 100%, 90.8%);
+  --warning-light: hsl(40, 100%, 81.5%);
+  --warning-main: hsl(42, 100%, 62.0%);
+  --warning-main8p: hsla(42, 100%, 62%, 0.08);
+  --warning-main50p: hsla(42, 100%, 62%, 0.5);
+  --warning-dark: hsl(42, 100%, 55.0%);
+  --warning-darker: hsl(25, 50.0%, 38.0%);
+  --warning-hover: hsl(45, 100%, 90.8%);
+  --warning-outlinedBorder: hsl(42, 100%, 62.0%);
+  --warning-contrastText: hsl(25, 40.0%, 22.0%);
+
+  --error-lighter: hsl(360, 100%, 96.8%);
+  --error-light: hsl(360, 90.2%, 91.9%);
+  --error-main: hsl(358, 75.0%, 59.0%);
+  --error-main8p: hsla(358, 75%, 59%, 0.08);
+  --error-main50p: hsla(358, 75%, 59%, 0.5);
+  --error-dark: hsl(358, 67.4%, 54.6%);
+  --error-darker: hsl(358, 65.0%, 47.0%);
+  --error-hover: hsl(360, 100%, 96.8%);
+  --error-outlinedBorder: hsl(358, 75.0%, 59.0%);
+  --error-contrastText: hsl(350, 63.0%, 24.0%);
+  --divider: hsl(0, 0%, 86.8%);
+
+  --abtest-a-control: #FFC134;
+  --abtest-b-test: #4F4FF5;
+}

package/styles/v4/elevations.css

@@ -0,0 +1,10 @@
+:root {
+  --elevation-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  --elevation-sm: 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 1px 3px rgba(16, 24, 40, 0.1);
+  --elevation-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.12);
+  --elevation-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+  --elevation-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);
+  --elevation-xxl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+  --elevation-xxxl: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
+  --elevation-sl: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
+}

package/styles/v4/fonts.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2,.font-chart-2,.font-chart-1{font-family:"Inter",sans-serif;font-weight:700}.font-chip-label,.font-table-label,.font-button,.font-heading-6,.font-heading-5,.font-heading-4,.font-heading-3,.font-heading-2,.font-heading-1,.font-title{font-family:"Inter",sans-serif;font-weight:600}.font-tab-label1,.font-input-label,.font-overline,.font-subtitle-2,.font-subtitle-1{font-family:"Inter",sans-serif;font-weight:500}.font-caption,.font-body-2,.font-body-1{font-family:"Inter",sans-serif;font-weight:400}.font-title{font-size:2.5rem;line-height:3rem;letter-spacing:-0.055rem}.font-heading-1{font-size:1.5rem;line-height:1.75rem;letter-spacing:-0.0285rem}.font-heading-2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-0.01575rem}.font-heading-3{font-size:1rem;line-height:1.5rem;letter-spacing:-0.011rem}.font-heading-4{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-0.00525rem}.font-body-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-0.00244rem}.font-subtitle-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-0.00525rem}.font-subtitle-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-0.00244rem}.font-chart-1{font-size:1.5rem;line-height:1.5rem;letter-spacing:-0.015rem}.font-chart-2{font-size:1.25rem;line-height:1.25rem;letter-spacing:-0.0125rem}.font-button{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption{font-size:.75rem;line-height:1rem}.font-table-label{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1{font-size:.875rem;line-height:1rem}.font-tab-label2{font-size:.875rem;line-height:1rem}.font-chip-label{font-size:.75rem;line-height:1rem}h1,h2,h3,h4,h5,h6{margin:0}/*# sourceMappingURL=fonts.css.map */

package/styles/v4/fonts.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["fonts.scss"],"names":[],"mappings":"AAKQ,0FAKR,6CACE,YAHM,mBAIN,gBAEF,4JACE,YAPM,mBAQN,gBAEF,oFACE,YAXM,mBAYN,gBAEF,wCACE,YAfM,mBAgBN,gBAIF,YACE,iBACA,iBACA,yBAGF,gBACE,iBACA,oBACA,0BAGF,gBACE,mBACA,oBACA,2BAGF,gBACE,eACA,mBACA,yBAGF,gBACE,kBACA,iBACA,qBAGF,gBACE,mBACA,iBACA,qBAGF,gBACE,iBACA,mBACA,iBAMF,aACE,kBACA,oBACA,2BAGF,aACE,mBACA,oBACA,2BAMF,iBACE,kBACA,oBACA,2BAGF,iBACE,mBACA,oBACA,2BAMF,cACE,iBACA,mBACA,yBAGF,cACE,kBACA,oBACA,0BAOF,aACE,kBACA,oBACA,yBAGF,eACE,iBACA,iBACA,uBACA,yBAGF,cACE,iBACA,iBAGF,kBACE,mBACA,oBACA,yBAGF,kBACE,mBACA,iBACA,yBAGF,iBACE,kBACA,iBAGF,iBACE,kBACA,iBAGF,iBACE,iBACA,iBAKF,kBAME","file":"fonts.css"}