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

package/index.vue.js

@@ -1,4 +1,4 @@
-import './AutocompleteDropdown.vue_vue_type_style_index_0_scoped_true_lang.css';
+import './Menu.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';
@@ -17,7 +17,6 @@ export { FilterPanelTypes } from './components/filtersPanel/index.vue.js';
 export { FilterDropdownTypes } from './components/filterDropdown/index.vue.js';
 export { TabsTypes } from './components/tabs/index.vue.js';
 export { CheckboxTypes } from './components/checkbox/index.vue.js';
-export { IconTypes } from './components/icon/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';
@@ -32,9 +31,12 @@ 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';
+import * as index$d from './components/icon/v3/index.vue.js';
+import * as index$e from './components/icon/v4/index.vue.js';
+import * as index$b from './components/input/v3/index.vue.js';
+import * as index$c from './components/input/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';
 export { TextAreaTypes } from './components/textArea/index.vue.js';
 export { EditableTypes } from './components/table-cells/index.vue.js';
 export { useToggle } from './composables/useToggle.vue.js';
@@ -73,17 +75,11 @@ export { default as FilterDropdown } from './components/filterDropdown/FilterDro
 export { default as AddFilterButton } from './components/filterDropdown/AddFilterButton.vue.js';
 export { default as Tabs } from './components/tabs/Tabs.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 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 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';
-export { default as PercentageInput } from './components/input/PercentageInput.vue.js';
-export { default as PasswordInput } from './components/input/PasswordInput.vue.js';
 export { default as TextArea } from './components/textArea/TextArea.vue.js';
 export { default as Editable } from './components/table-cells/Editable.vue.js';
 export { EditableContext, useEditableContext } from './components/table-cells/EditableContext.vue.js';
@@ -101,7 +97,11 @@ var index = {
   ...index$7,
   ...index$8,
   ...index$9,
-  ...index$a
+  ...index$a,
+  ...index$b,
+  ...index$c,
+  ...index$d,
+  ...index$e
 };
 
 export { index as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.3",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -67,6 +67,7 @@
     "@commitlint/config-conventional": "^17.0.3",
     "@figus/cli": "^2.0.8",
     "@mdx-js/react": "^2.1.2",
+    "@playwright/test": "^1.39.0",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-docs": "^6.5.12",
@@ -166,7 +167,8 @@
     "./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",
+    "./icon": "./components/icon/v3/Icon.vue.js",
+    "./icon/v4": "./components/icon/v4/IconV4.vue.js",
     "./toggle": "./components/toggle/Toggle.vue.js",
     "./tooltip": "./components/tooltip/Tooltip.vue.js",
     "./search": "./components/search/v3/Search.vue.js",
@@ -176,10 +178,11 @@
     "./text": "./components/typography/Text.vue.js",
     "./heading": "./components/typography/Heading.vue.js",
     "./popover": "./components/popover/Popover.vue.js",
-    "./input": "./components/input/Input.vue.js",
-    "./dollarInput": "./components/input/DollarInput.vue.js",
-    "./passwordInput": "./components/input/PasswordInput.vue.js",
-    "./percentageInput": "./components/input/PercentageInput.vue.js",
+    "./input": "./components/input/v3/Input.vue.js",
+    "./input/v4": "./components/input/v4/TextField.vue.js",
+    "./dollarInput": "./components/input/v3/DollarInput.vue.js",
+    "./passwordInput": "./components/input/v3/PasswordInput.vue.js",
+    "./percentageInput": "./components/input/v3/PercentageInput.vue.js",
     "./textArea": "./components/textArea/TextArea.vue.js",
     "./styleguide": "./styleguide.scss",
     "./commonCssVariables": "./commonCssVariables.scss",

package/styles/v4/border-radius.css

@@ -1,4 +1,4 @@
-:root {
+.light-theme-v4 {
     --border-radius-xs: 2px;
     --border-radius-sm: 4px;
     --border-radius-md: 6px;

package/styles/v4/breakpoints.scss

@@ -0,0 +1,131 @@
+$breakPoints: (
+    xxs: 0,
+    // Phones - 768px and below
+    xs: 768px,
+    // Tablet portrait - 768px - 1023px
+    sm: 1024px,
+    // Tablet landscape - 1024px - 1279px
+    md: 1280px,
+    // Small laptop - 1280px - 1439px
+    lg: 1440px,
+    // Large laptop - 1440px - 1919px
+    xl: 1920px,
+    // Desktop - 1920px - 2559px
+    xxl: 2560px,
+    // Big Desktop - 2560px and up
+
+) !default;
+
+// Breakpoint viewport sizes and media queries.
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+// The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) {
+    $n: index($breakpoint-names, $name);
+
+    @if not $n {
+        @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+    }
+
+    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $breakPoints) {
+    $min: map-get($breakpoints, $name);
+    @return if($min !=0, $min, null);
+}
+
+// Maximum breakpoint width.
+// The maximum value is reduced by 0.02px to work around the limitations of
+@function breakpoint-max($name, $breakpoints: $breakPoints) {
+    $max: map-get($breakpoints, $name);
+    @return if($max and $max > 0, $max - .02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $breakPoints) {
+    @return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-min($name, $breakpoints: $breakPoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    }
+    @else {
+        @content;
+    }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-max($name, $breakpoints: $breakPoints) {
+    $max: breakpoint-max($name, $breakpoints);
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    }
+    @else {
+        @content;
+    }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $breakPoints) {
+    $min: breakpoint-min($lower, $breakpoints);
+    $max: breakpoint-max($upper, $breakpoints);
+    @if $min !=null and $max !=null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    }
+    @else if $max==null {
+        @include media-breakpoint-min($lower, $breakpoints) {
+            @content;
+        }
+    }
+    @else if $min==null {
+        @include media-breakpoint-max($upper, $breakpoints) {
+            @content;
+        }
+    }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $breakPoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    $next: breakpoint-next($name, $breakpoints);
+    $max: breakpoint-max($next);
+    @if $min !=null and $max !=null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    }
+    @else if $max==null {
+        @include media-breakpoint-min($name, $breakpoints) {
+            @content;
+        }
+    }
+    @else if $min==null {
+        @include media-breakpoint-max($next, $breakpoints) {
+            @content;
+        }
+    }
+}

package/styles/v4/colors.css

@@ -1,100 +1,101 @@
-:root {
+.light-theme-v4 {
   --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%);
+  --background-model-elevation: #FFFFFF;
+  --background-backdrop: hsla(0, 0%, 0%, 0.11);
+  --background-paper-elevation-0: hsl(0, 0%, 97.5%);
+  --background-paper-elevation-1: hsl(0, 0%, 94.6%);
+  --background-paper-elevation-2: hsl(0, 0%, 92.0%);
+  --background-paper-elevation-3: hsl(0, 0%, 89.5%);
+  --background-paper-elevation-4: hsl(0, 0%, 86.8%);
+  --background-paper-elevation-5: hsl(0, 0%, 83.0%);
+  --background-paper-elevation-6: hsl(0, 0%, 73.2%);
+  --background-paper-elevation-7: hsl(0, 0%, 55.2%);
+  --background-paper-elevation-8: hsl(0, 0%, 50.3%);
+  --background-paper-elevation-9: 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-hover: hsla(0, 0%, 0%, 0.05);
+  --action-selected: hsla(0, 0%, 92%, 1);
+  --action-disabled: hsla(0, 0%, 87%, 1);
+  --action-disabled-background: hsla(0, 0%, 95%, 1);
   --action-focus: hsl(0, 0%, 92.0%);
-  --action-outlinedBorder: hsl(0, 0%, 83.0%);
+  --action-outlined-border  : hsla(0, 0%, 73%, 1);
 
   --default-light: hsl(0, 0%, 89.5%);
-  --default-main: hsl(0, 0%, 86.8%);
+  --default-main: hsl(0 0% 94.51%);
   --default-dark: hsl(0, 0%, 92.0%);
-  --default-outlinedBorder: hsl(0, 0%, 73.2%);
-  --default-contrastText: hsl(0, 0%, 12.5%);
+  --default-outlined-border: hsl(0, 0%, 73.2%);
+  --default-contrast-text: hsl(0, 0%, 12.5%);
+  --default-button-contrast-text: hsla(0, 0%, 0%, 1);
 
   --common-white: #FFFFFF;
   --common-black: #000000;
-  --common-inverseWhite: #000000;
-  --common-inverseBlack: #FFFFFF;
+  --common-inverse-white: #FFFFFF;
+  --common-inverse-black: #000000;
+  --common-divider: hsl(0, 0%, 86.8%);
+  --common-divider-elevation-0: hsla(0, 0%, 89%, 1);
 
   --text-primary: hsl(0, 0%, 12.5%);
   --text-secondary: hsl(0, 0%, 39.3%);
-  --text-disabled: hsl(0, 0%, 50.3%);
+  --text-disabled: hsl(0 0% 73.33%);
 
   --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-main-8-p: hsla(206, 100%, 50%, 0.08);
+  --primary-main-50-p: 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%);
+  --primary-outlined-border: hsl(206, 100%, 50.0%);
+  --primary-contrast-text: hsl(216, 71.0%, 23.0%);
+  --primary-button-contrast-text: hsla(0, 0%, 100%, 1);
 
   --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-main-8-p: hsla(226, 70%, 55.5%, 0.08);
+  --info-main-50-p: 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%);
+  --info-outlined-border: hsl(226, 70.0%, 55.5%);
+  --info-contrast-text: hsl(226, 50.0%, 24.0%);
+  --info-button-contrast-text: hsla(0, 0%, 100%, 1);
 
   --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-main-8-p: hsla(151, 55%, 41.5%, 0.08);
+  --success-main-50-p: 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%);
+  --success-outlined-border: hsl(151, 55.0%, 41.5%);
+  --success-contrast-text: hsl(155, 40.0%, 16.5%);
+  --success-button-contrast-text: hsla(0, 0%, 100%, 1);
 
   --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-main-8-p: hsla(42, 100%, 62%, 0.08);
+  --warning-main-50-p: 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%);
+  --warning-outlined-border: hsl(42, 100%, 62.0%);
+  --warning-contrast-text: hsl(25, 40.0%, 22.0%);
+  --warning-button-contrast-text: hsla(24, 40%, 22%, 1);
 
   --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-main-8-p: hsla(358, 75%, 59%, 0.08);
+  --error-main-50-p: 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%);
+  --error-outlined-border: hsl(358, 75.0%, 59.0%);
+  --error-contrast-text: hsl(350, 63.0%, 24.0%);
+  --error-button-contrast-text: hsla(0, 0%, 100%, 1);
 
-  --abtest-a-control: #FFC134;
-  --abtest-b-test: #4F4FF5;
+  --aba: #FFC134;
+  --abb: #4F4FF5;
 }

package/styles/v4/elevations.css

@@ -1,4 +1,4 @@
-:root {
+.light-theme-v4 {
   --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);

package/styles/v4/grid.css

@@ -0,0 +1 @@
+.light-theme-v4 .row{display:flex;flex-wrap:wrap;margin-right:calc(24px / -2);margin-left:calc(24px / -2);width:unset;max-width:unset}.light-theme-v4 .row>*{box-sizing:border-box;padding-right:calc(24px / 2);padding-left:calc(24px / 2)}.light-theme-v4 .hidden{display:none}.light-theme-v4 .col-1{flex:0 0 auto;width:8.3333333333%}.light-theme-v4 .col-2{flex:0 0 auto;width:16.6666666667%}.light-theme-v4 .col-3{flex:0 0 auto;width:25%}.light-theme-v4 .col-4{flex:0 0 auto;width:33.3333333333%}.light-theme-v4 .col-5{flex:0 0 auto;width:41.6666666667%}.light-theme-v4 .col-6{flex:0 0 auto;width:50%}.light-theme-v4 .col-7{flex:0 0 auto;width:58.3333333333%}.light-theme-v4 .col-8{flex:0 0 auto;width:66.6666666667%}.light-theme-v4 .col-9{flex:0 0 auto;width:75%}.light-theme-v4 .col-10{flex:0 0 auto;width:83.3333333333%}.light-theme-v4 .col-11{flex:0 0 auto;width:91.6666666667%}.light-theme-v4 .col-12{flex:0 0 auto;width:100%}.light-theme-v4 .offset-1{margin-left:8.3333333333%}.light-theme-v4 .offset-2{margin-left:16.6666666667%}.light-theme-v4 .offset-3{margin-left:25%}.light-theme-v4 .offset-4{margin-left:33.3333333333%}.light-theme-v4 .offset-5{margin-left:41.6666666667%}.light-theme-v4 .offset-6{margin-left:50%}.light-theme-v4 .offset-7{margin-left:58.3333333333%}.light-theme-v4 .offset-8{margin-left:66.6666666667%}.light-theme-v4 .offset-9{margin-left:75%}.light-theme-v4 .offset-10{margin-left:83.3333333333%}.light-theme-v4 .offset-11{margin-left:91.6666666667%}@media(min-width: 768px){.light-theme-v4 .hidden-xs{display:none}.light-theme-v4 .col-xs-1{flex:0 0 auto;width:8.3333333333%}.light-theme-v4 .col-xs-2{flex:0 0 auto;width:16.6666666667%}.light-theme-v4 .col-xs-3{flex:0 0 auto;width:25%}.light-theme-v4 .col-xs-4{flex:0 0 auto;width:33.3333333333%}.light-theme-v4 .col-xs-5{flex:0 0 auto;width:41.6666666667%}.light-theme-v4 .col-xs-6{flex:0 0 auto;width:50%}.light-theme-v4 .col-xs-7{flex:0 0 auto;width:58.3333333333%}.light-theme-v4 .col-xs-8{flex:0 0 auto;width:66.6666666667%}.light-theme-v4 .col-xs-9{flex:0 0 auto;width:75%}.light-theme-v4 .col-xs-10{flex:0 0 auto;width:83.3333333333%}.light-theme-v4 .col-xs-11{flex:0 0 auto;width:91.6666666667%}.light-theme-v4 .col-xs-12{flex:0 0 auto;width:100%}.light-theme-v4 .offset-xs-0{margin-left:0}.light-theme-v4 .offset-xs-1{margin-left:8.3333333333%}.light-theme-v4 .offset-xs-2{margin-left:16.6666666667%}.light-theme-v4 .offset-xs-3{margin-left:25%}.light-theme-v4 .offset-xs-4{margin-left:33.3333333333%}.light-theme-v4 .offset-xs-5{margin-left:41.6666666667%}.light-theme-v4 .offset-xs-6{margin-left:50%}.light-theme-v4 .offset-xs-7{margin-left:58.3333333333%}.light-theme-v4 .offset-xs-8{margin-left:66.6666666667%}.light-theme-v4 .offset-xs-9{margin-left:75%}.light-theme-v4 .offset-xs-10{margin-left:83.3333333333%}.light-theme-v4 .offset-xs-11{margin-left:91.6666666667%}}@media(min-width: 1024px){.light-theme-v4 .hidden-sm{display:none}.light-theme-v4 .col-sm-1{flex:0 0 auto;width:8.3333333333%}.light-theme-v4 .col-sm-2{flex:0 0 auto;width:16.6666666667%}.light-theme-v4 .col-sm-3{flex:0 0 auto;width:25%}.light-theme-v4 .col-sm-4{flex:0 0 auto;width:33.3333333333%}.light-theme-v4 .col-sm-5{flex:0 0 auto;width:41.6666666667%}.light-theme-v4 .col-sm-6{flex:0 0 auto;width:50%}.light-theme-v4 .col-sm-7{flex:0 0 auto;width:58.3333333333%}.light-theme-v4 .col-sm-8{flex:0 0 auto;width:66.6666666667%}.light-theme-v4 .col-sm-9{flex:0 0 auto;width:75%}.light-theme-v4 .col-sm-10{flex:0 0 auto;width:83.3333333333%}.light-theme-v4 .col-sm-11{flex:0 0 auto;width:91.6666666667%}.light-theme-v4 .col-sm-12{flex:0 0 auto;width:100%}.light-theme-v4 .offset-sm-0{margin-left:0}.light-theme-v4 .offset-sm-1{margin-left:8.3333333333%}.light-theme-v4 .offset-sm-2{margin-left:16.6666666667%}.light-theme-v4 .offset-sm-3{margin-left:25%}.light-theme-v4 .offset-sm-4{margin-left:33.3333333333%}.light-theme-v4 .offset-sm-5{margin-left:41.6666666667%}.light-theme-v4 .offset-sm-6{margin-left:50%}.light-theme-v4 .offset-sm-7{margin-left:58.3333333333%}.light-theme-v4 .offset-sm-8{margin-left:66.6666666667%}.light-theme-v4 .offset-sm-9{margin-left:75%}.light-theme-v4 .offset-sm-10{margin-left:83.3333333333%}.light-theme-v4 .offset-sm-11{margin-left:91.6666666667%}}@media(min-width: 1280px){.light-theme-v4 .hidden-md{display:none}.light-theme-v4 .col-md-1{flex:0 0 auto;width:8.3333333333%}.light-theme-v4 .col-md-2{flex:0 0 auto;width:16.6666666667%}.light-theme-v4 .col-md-3{flex:0 0 auto;width:25%}.light-theme-v4 .col-md-4{flex:0 0 auto;width:33.3333333333%}.light-theme-v4 .col-md-5{flex:0 0 auto;width:41.6666666667%}.light-theme-v4 .col-md-6{flex:0 0 auto;width:50%}.light-theme-v4 .col-md-7{flex:0 0 auto;width:58.3333333333%}.light-theme-v4 .col-md-8{flex:0 0 auto;width:66.6666666667%}.light-theme-v4 .col-md-9{flex:0 0 auto;width:75%}.light-theme-v4 .col-md-10{flex:0 0 auto;width:83.3333333333%}.light-theme-v4 .col-md-11{flex:0 0 auto;width:91.6666666667%}.light-theme-v4 .col-md-12{flex:0 0 auto;width:100%}.light-theme-v4 .offset-md-0{margin-left:0}.light-theme-v4 .offset-md-1{margin-left:8.3333333333%}.light-theme-v4 .offset-md-2{margin-left:16.6666666667%}.light-theme-v4 .offset-md-3{margin-left:25%}.light-theme-v4 .offset-md-4{margin-left:33.3333333333%}.light-theme-v4 .offset-md-5{margin-left:41.6666666667%}.light-theme-v4 .offset-md-6{margin-left:50%}.light-theme-v4 .offset-md-7{margin-left:58.3333333333%}.light-theme-v4 .offset-md-8{margin-left:66.6666666667%}.light-theme-v4 .offset-md-9{margin-left:75%}.light-theme-v4 .offset-md-10{margin-left:83.3333333333%}.light-theme-v4 .offset-md-11{margin-left:91.6666666667%}}@media(min-width: 1440px){.light-theme-v4 .hidden-lg{display:none}.light-theme-v4 .col-lg-1{flex:0 0 auto;width:8.3333333333%}.light-theme-v4 .col-lg-2{flex:0 0 auto;width:16.6666666667%}.light-theme-v4 .col-lg-3{flex:0 0 auto;width:25%}.light-theme-v4 .col-lg-4{flex:0 0 auto;width:33.3333333333%}.light-theme-v4 .col-lg-5{flex:0 0 auto;width:41.6666666667%}.light-theme-v4 .col-lg-6{flex:0 0 auto;width:50%}.light-theme-v4 .col-lg-7{flex:0 0 auto;width:58.3333333333%}.light-theme-v4 .col-lg-8{flex:0 0 auto;width:66.6666666667%}.light-theme-v4 .col-lg-9{flex:0 0 auto;width:75%}.light-theme-v4 .col-lg-10{flex:0 0 auto;width:83.3333333333%}.light-theme-v4 .col-lg-11{flex:0 0 auto;width:91.6666666667%}.light-theme-v4 .col-lg-12{flex:0 0 auto;width:100%}.light-theme-v4 .offset-lg-0{margin-left:0}.light-theme-v4 .offset-lg-1{margin-left:8.3333333333%}.light-theme-v4 .offset-lg-2{margin-left:16.6666666667%}.light-theme-v4 .offset-lg-3{margin-left:25%}.light-theme-v4 .offset-lg-4{margin-left:33.3333333333%}.light-theme-v4 .offset-lg-5{margin-left:41.6666666667%}.light-theme-v4 .offset-lg-6{margin-left:50%}.light-theme-v4 .offset-lg-7{margin-left:58.3333333333%}.light-theme-v4 .offset-lg-8{margin-left:66.6666666667%}.light-theme-v4 .offset-lg-9{margin-left:75%}.light-theme-v4 .offset-lg-10{margin-left:83.3333333333%}.light-theme-v4 .offset-lg-11{margin-left:91.6666666667%}}@media(min-width: 1920px){.light-theme-v4 .hidden-xl{display:none}.light-theme-v4 .col-xl-1{flex:0 0 auto;width:8.3333333333%}.light-theme-v4 .col-xl-2{flex:0 0 auto;width:16.6666666667%}.light-theme-v4 .col-xl-3{flex:0 0 auto;width:25%}.light-theme-v4 .col-xl-4{flex:0 0 auto;width:33.3333333333%}.light-theme-v4 .col-xl-5{flex:0 0 auto;width:41.6666666667%}.light-theme-v4 .col-xl-6{flex:0 0 auto;width:50%}.light-theme-v4 .col-xl-7{flex:0 0 auto;width:58.3333333333%}.light-theme-v4 .col-xl-8{flex:0 0 auto;width:66.6666666667%}.light-theme-v4 .col-xl-9{flex:0 0 auto;width:75%}.light-theme-v4 .col-xl-10{flex:0 0 auto;width:83.3333333333%}.light-theme-v4 .col-xl-11{flex:0 0 auto;width:91.6666666667%}.light-theme-v4 .col-xl-12{flex:0 0 auto;width:100%}.light-theme-v4 .offset-xl-0{margin-left:0}.light-theme-v4 .offset-xl-1{margin-left:8.3333333333%}.light-theme-v4 .offset-xl-2{margin-left:16.6666666667%}.light-theme-v4 .offset-xl-3{margin-left:25%}.light-theme-v4 .offset-xl-4{margin-left:33.3333333333%}.light-theme-v4 .offset-xl-5{margin-left:41.6666666667%}.light-theme-v4 .offset-xl-6{margin-left:50%}.light-theme-v4 .offset-xl-7{margin-left:58.3333333333%}.light-theme-v4 .offset-xl-8{margin-left:66.6666666667%}.light-theme-v4 .offset-xl-9{margin-left:75%}.light-theme-v4 .offset-xl-10{margin-left:83.3333333333%}.light-theme-v4 .offset-xl-11{margin-left:91.6666666667%}}@media(min-width: 2560px){.light-theme-v4 .hidden-xxl{display:none}.light-theme-v4 .col-xxl-1{flex:0 0 auto;width:8.3333333333%}.light-theme-v4 .col-xxl-2{flex:0 0 auto;width:16.6666666667%}.light-theme-v4 .col-xxl-3{flex:0 0 auto;width:25%}.light-theme-v4 .col-xxl-4{flex:0 0 auto;width:33.3333333333%}.light-theme-v4 .col-xxl-5{flex:0 0 auto;width:41.6666666667%}.light-theme-v4 .col-xxl-6{flex:0 0 auto;width:50%}.light-theme-v4 .col-xxl-7{flex:0 0 auto;width:58.3333333333%}.light-theme-v4 .col-xxl-8{flex:0 0 auto;width:66.6666666667%}.light-theme-v4 .col-xxl-9{flex:0 0 auto;width:75%}.light-theme-v4 .col-xxl-10{flex:0 0 auto;width:83.3333333333%}.light-theme-v4 .col-xxl-11{flex:0 0 auto;width:91.6666666667%}.light-theme-v4 .col-xxl-12{flex:0 0 auto;width:100%}.light-theme-v4 .offset-xxl-0{margin-left:0}.light-theme-v4 .offset-xxl-1{margin-left:8.3333333333%}.light-theme-v4 .offset-xxl-2{margin-left:16.6666666667%}.light-theme-v4 .offset-xxl-3{margin-left:25%}.light-theme-v4 .offset-xxl-4{margin-left:33.3333333333%}.light-theme-v4 .offset-xxl-5{margin-left:41.6666666667%}.light-theme-v4 .offset-xxl-6{margin-left:50%}.light-theme-v4 .offset-xxl-7{margin-left:58.3333333333%}.light-theme-v4 .offset-xxl-8{margin-left:66.6666666667%}.light-theme-v4 .offset-xxl-9{margin-left:75%}.light-theme-v4 .offset-xxl-10{margin-left:83.3333333333%}.light-theme-v4 .offset-xxl-11{margin-left:91.6666666667%}}/*# sourceMappingURL=grid.css.map */

package/styles/v4/grid.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["grid.scss","breakpoints.scss"],"names":[],"mappings":"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","file":"grid.css"}

package/styles/v4/grid.scss

@@ -0,0 +1,74 @@
+@use "sass:math";
+
+@import "breakpoints";
+
+$gridColumns: 12 !default;
+$gridColumnGap: 24px !default;
+$columnPrefix: '.col' !default;
+$columnOffset: '.offset' !default;
+$columnHiddenPrefix: '.hidden' !default;
+
+// grid mixins
+// create column props by size
+@mixin make-col($size, $columns: $gridColumns) {
+    flex: 0 0 auto;
+    width: percentage(math.div($size, $columns));
+}
+
+// create column offset props
+@mixin make-col-offset($size, $columns: $gridColumns) {
+    $num: math.div($size, $columns);
+    margin-left: if($num==0, 0, percentage($num));
+}
+
+// Generate the correct number of grid classes
+@mixin make-grid-columns($columns: $gridColumns, $gutter: $gridColumnGap, $breakpoints: $breakPoints) {
+    @each $breakpoint in map-keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        @include media-breakpoint-min($breakpoint, $breakpoints) {
+
+            // generate hidden prop for col by break point .hidden-xx
+            .hidden#{$infix} {
+                display: none;
+            }
+
+            // generate by columns in col .col-xx-xx
+            @if $columns>0 {
+                @for $i from 1 through $columns {
+                    .col#{$infix}-#{$i} {
+                        @include make-col($i, $columns);
+                    }
+                }
+
+                // generate offsets
+                @for $i from 0 through ($columns - 1) {
+                    @if not ($infix==""and $i==0) {
+                        // Avoid emitting useless .offset-0
+                        .offset#{$infix}-#{$i} {
+                            @include make-col-offset($i, $columns);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.light-theme-v4 {
+    .row{
+        display: flex;
+        flex-wrap: wrap;
+        margin-right: calc(#{$gridColumnGap} / -2);
+        margin-left: calc(#{$gridColumnGap} / -2);
+        width: unset; // fixe for row from v3
+        max-width: unset; // fixe for row from v3
+        > * {
+            box-sizing: border-box;
+            padding-right: calc(#{$gridColumnGap} / 2);
+            padding-left: calc(#{$gridColumnGap} / 2);
+        }
+    }
+
+    @include make-grid-columns();
+}

package/testids/index.d.ts

@@ -41,12 +41,14 @@ export declare enum InputTestIdModifiers {
     LABEL_CONTAINER = "input-label-container",
     LABEL_TEXT = "input-label-text",
     FIELD = "input-field",
-    EXTRA_TEXT = "input-extra-text"
+    EXTRA_TEXT = "input-extra-text",
+    TOGGLE_PASSWORD = "input-toggle-password-icon"
 }
 export declare enum CheckboxTestIdModifiers {
     WRAPPER = "cb-wrapper",
     LABEL = "cb-label",
-    FIELD = "cb-field"
+    FIELD = "cb-field",
+    CHECKED = "cb-checked"
 }
 export declare enum RadioTestIdModifiers {
     FIELD = "radio-field",
@@ -144,3 +146,14 @@ export declare enum TextTestIdModifiers {
 export declare enum HeaderTestIdModifiers {
     HEADER = "h-header"
 }
+export declare enum FieldLabelTestIdModifiers {
+    CONTAINER = "field-label-container",
+    TEXT = "field-label-text",
+    MANDATORY = "field-label-mandatory",
+    TOOLTIP = "field-label-help-tooltip"
+}
+export declare enum FieldHelpTextTestIdModifiers {
+    CONTAINER = "field-help-text-container",
+    TEXT = "field-help-text-text",
+    ICON = "field-help-text-icon"
+}

package/testids/index.vue.js

@@ -46,12 +46,14 @@ var InputTestIdModifiers = /* @__PURE__ */ ((InputTestIdModifiers2) => {
   InputTestIdModifiers2["LABEL_TEXT"] = "input-label-text";
   InputTestIdModifiers2["FIELD"] = "input-field";
   InputTestIdModifiers2["EXTRA_TEXT"] = "input-extra-text";
+  InputTestIdModifiers2["TOGGLE_PASSWORD"] = "input-toggle-password-icon";
   return InputTestIdModifiers2;
 })(InputTestIdModifiers || {});
 var CheckboxTestIdModifiers = /* @__PURE__ */ ((CheckboxTestIdModifiers2) => {
   CheckboxTestIdModifiers2["WRAPPER"] = "cb-wrapper";
   CheckboxTestIdModifiers2["LABEL"] = "cb-label";
   CheckboxTestIdModifiers2["FIELD"] = "cb-field";
+  CheckboxTestIdModifiers2["CHECKED"] = "cb-checked";
   return CheckboxTestIdModifiers2;
 })(CheckboxTestIdModifiers || {});
 var RadioTestIdModifiers = /* @__PURE__ */ ((RadioTestIdModifiers2) => {
@@ -166,5 +168,18 @@ var HeaderTestIdModifiers = /* @__PURE__ */ ((HeaderTestIdModifiers2) => {
   HeaderTestIdModifiers2["HEADER"] = "h-header";
   return HeaderTestIdModifiers2;
 })(HeaderTestIdModifiers || {});
+var FieldLabelTestIdModifiers = /* @__PURE__ */ ((FieldLabelTestIdModifiers2) => {
+  FieldLabelTestIdModifiers2["CONTAINER"] = "field-label-container";
+  FieldLabelTestIdModifiers2["TEXT"] = "field-label-text";
+  FieldLabelTestIdModifiers2["MANDATORY"] = "field-label-mandatory";
+  FieldLabelTestIdModifiers2["TOOLTIP"] = "field-label-help-tooltip";
+  return FieldLabelTestIdModifiers2;
+})(FieldLabelTestIdModifiers || {});
+var FieldHelpTextTestIdModifiers = /* @__PURE__ */ ((FieldHelpTextTestIdModifiers2) => {
+  FieldHelpTextTestIdModifiers2["CONTAINER"] = "field-help-text-container";
+  FieldHelpTextTestIdModifiers2["TEXT"] = "field-help-text-text";
+  FieldHelpTextTestIdModifiers2["ICON"] = "field-help-text-icon";
+  return FieldHelpTextTestIdModifiers2;
+})(FieldHelpTextTestIdModifiers || {});
 
-export { AppTriggerTestIdModifiers, AutocompleteInputTestIdModifiers, BannerTestIdModifiers, CalendarMonthTestIdModifiers, CheckboxTestIdModifiers, ChipTestIdModifiers, DatePickerTestIdModifiers, DateRangeTestIdModifiers, DialogTestIdModifiers, DropdownTestIdModifiers, HeaderTestIdModifiers, IncludeExcludeTestIdModifiers, InputTestIdModifiers, RadioTestIdModifiers, SearchTestIdModifiers, SwitchTestIdModifiers, TableTestIdModifiers, TabsTestIdModifiers, TextAreaTestIdModifiers, TextTestIdModifiers, ToggleTestIdModifiers, TooltipTestIdModifiers };
+export { AppTriggerTestIdModifiers, AutocompleteInputTestIdModifiers, BannerTestIdModifiers, CalendarMonthTestIdModifiers, CheckboxTestIdModifiers, ChipTestIdModifiers, DatePickerTestIdModifiers, DateRangeTestIdModifiers, DialogTestIdModifiers, DropdownTestIdModifiers, FieldHelpTextTestIdModifiers, FieldLabelTestIdModifiers, HeaderTestIdModifiers, IncludeExcludeTestIdModifiers, InputTestIdModifiers, RadioTestIdModifiers, SearchTestIdModifiers, SwitchTestIdModifiers, TableTestIdModifiers, TabsTestIdModifiers, TextAreaTestIdModifiers, TextTestIdModifiers, ToggleTestIdModifiers, TooltipTestIdModifiers };

package/utils/testIds.d.ts

@@ -0,0 +1 @@
+export declare function useTestIdAttrs(testIdValue: string, testIdModifiers: Record<string, any>): import("vue").ComputedRef<{}>;

package/utils/testIds.vue.js

@@ -0,0 +1,14 @@
+import { ref, computed } from 'vue';
+
+function useTestIdAttrs(testIdValue, testIdModifiers) {
+  const testId = ref(testIdValue);
+  return computed(() => {
+    const result = {};
+    for (const key in testIdModifiers) {
+      result[testIdModifiers[key]] = testId.value ? { "data-testid": `${testId.value}-${testIdModifiers[key]}` } : {};
+    }
+    return result;
+  });
+}
+
+export { useTestIdAttrs };