@scality/core-ui 0.120.0 → 0.122.0

package/.storybook/preview.js

@@ -58,6 +58,7 @@ export const parameters = {
     matchers: {
       color: /color/i,
     },
+    exclude: ['data-cy'],
   },
   options: {
     storySort: {

package/dist/components/card/Card.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/card/Card.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmDF,eAAO,MAAM,UAAU,qCAhDqB,gBAAgB,gBAgDC,CAAC;AAC9D,eAAO,MAAM,QAAQ,qCAjDuB,gBAAgB,gBAiDH,CAAC;AAC1D,eAAO,MAAM,iBAAiB,qCAlDc,gBAAgB,gBAkDe,CAAC;AAmD5E,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;AAC9B,iBAAS,IAAI,CAAC,EACZ,KAAc,EACd,MAAe,EACf,qBAAyC,EACzC,mBAAwC,EACxC,MAAa,EACb,OAAc,EACd,MAAc,EACd,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eA6CX;kBAzDQ,IAAI;;;;;AA6Db,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Card.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/card/Card.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmDF,eAAO,MAAM,UAAU,qCAhDqB,gBAAgB,gBAgDC,CAAC;AAC9D,eAAO,MAAM,QAAQ,qCAjDuB,gBAAgB,gBAiDH,CAAC;AAC1D,eAAO,MAAM,iBAAiB,qCAlDc,gBAAgB,gBAkDe,CAAC;AAoD5E,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;AAC9B,iBAAS,IAAI,CAAC,EACZ,KAAc,EACd,MAAe,EACf,qBAAyC,EACzC,mBAAwC,EACxC,MAAa,EACb,OAAc,EACd,MAAc,EACd,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eA4CX;kBAxDQ,IAAI;;;;;AA4Db,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/card/Card.component.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext } from 'react';
 import styled, { css } from 'styled-components';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
+import { hex2RGB } from '../../utils';
 const CardContext = createContext(null);
 function withCompoundCheck(Component) {
     return ({ children, className, ...rest }) => (_jsx(CardContext.Consumer, { children: (value) => {
@@ -51,8 +52,10 @@ const StyledCard = styled.div `
 
   ${StyledCardHeader} {
     color: ${(props) => props.theme.textPrimary};
-    background: ${(props) => props.theme[props.colorStatus || props.headerBackgroundColor]};
-    opacity: ${(props) => props.colorStatus && props.colorStatus !== 'backgroundLevel4' ? 0.4 : 1};
+    background: ${(props) => props.colorStatus
+    ? `rgba(${hex2RGB(props.theme[props.colorStatus]).join(',')}, 0.7)`
+    : props.theme[props.headerBackgroundColor]};
+
     ${(props) => props.disabled && 'opacity: 0.3;'}
   }
 
@@ -79,9 +82,8 @@ function Card({ width = 'auto', height = 'auto', headerBackgroundColor = 'button
     let colorStatus = null;
     if (status) {
         colorStatus =
-            status === 'healthy'
-                ? 'backgroundLevel4'
-                : 'status' + status.replace(/^\w/, (c) => c.toUpperCase());
+            status != 'healthy' &&
+                'status' + status.replace(/^\w/, (c) => c.toUpperCase());
     }
     return (_jsx(CardContext.Provider, { value: true, children: _jsx(StyledCard, { className: [`sc-card ${active ? 'active' : ''}`, className].join(' '), width: width, height: height, headerBackgroundColor: headerBackgroundColor, bodyBackgroundColor: bodyBackgroundColor, colorStatus: colorStatus, activeBorderColor: !status || status === 'healthy' ? 'selectedActive' : colorStatus, disabled: disabled, role: onClick && !disabled ? 'button' : null, "aria-pressed": onClick && !disabled ? active : null, tabIndex: onClick && !disabled ? 0 : null, onClick: !disabled ? onClick : undefined, active: active, onKeyDown: (event) => {
                 if (!disabled &&

package/dist/components/checkbox/Checkbox.component.d.ts

@@ -1,4 +1,11 @@
 import { ChangeEvent, InputHTMLAttributes } from 'react';
+export type Props = {
+    label?: string;
+    value?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+} & InputHTMLAttributes<HTMLInputElement>;
 declare const Checkbox: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
     value?: string | undefined;

package/dist/components/checkbox/Checkbox.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/checkbox/Checkbox.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAerE,QAAA,MAAM,QAAQ;;;;;oBAHG,YAAY,gBAAgB,CAAC,KAAK,IAAI;4FA0BtD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/checkbox/Checkbox.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAOrE,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACvD,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE1C,QAAA,MAAM,QAAQ;;;;;oBAHG,YAAY,gBAAgB,CAAC,KAAK,IAAI;4FA0BtD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/checkbox/Checkbox.component.js

@@ -18,6 +18,8 @@ const StyledCheckbox = styled.label `
     color: ${(props) => props.theme.textPrimary};
     vertical-align: middle;
     -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     background: none;
     border: 0;
     outline: 0;

package/dist/components/layout/v2/AppContainer.js

@@ -27,7 +27,7 @@ const ContextWrapper = styled.div `
 const ContextContainer = ({ children, background, ...rest }) => (_jsx(ContextWrapper, { background: background, children: _jsx(FillAvailableFlexBox, { ...rest, children: children }) }));
 const OverallSummaryContainer = styled.div `
   background: ${(props) => props.theme[props.background || 'backgroundLevel2']};
-  height: 6rem;
+  min-height: 6rem;
   padding: ${({ noPadding }) => (noPadding ? '0' : '0 1rem')};
   margin-bottom: ${({ noBottomMargin }) => noBottomMargin ? '0' : sectionDistance};
   margin-top: ${({ hasTopMargin }) => (hasTopMargin ? '1rem' : '0')};

package/dist/components/linetemporalchart/LineTemporalChart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineTemporalChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/LineTemporalChart.component.tsx"],"names":[],"mappings":";AAoCA,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAC3D,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,aAAa;;;GAqBzB,CAAC;AA+BF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CACnB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,EACD,WAAW,EAAE,GAAG,KACb,MAAM,CAAC;CACb,CAAC;AAkCF,iBAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAiB,EACjB,cAAsB,EACtB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,eAqmBhB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"LineTemporalChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/LineTemporalChart.component.tsx"],"names":[],"mappings":";AAoCA,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAC3D,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,aAAa;;;GAqBzB,CAAC;AA+BF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CACnB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,EACD,WAAW,EAAE,GAAG,KACb,MAAM,CAAC;CACb,CAAC;AAkCF,iBAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAiB,EACjB,cAAsB,EACtB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,eAomBhB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/linetemporalchart/LineTemporalChart.component.js

@@ -10,7 +10,7 @@ import { useCursorX } from '../vegachartv2/SyncedCursorCharts';
 import { ChartTitleText } from '../text/Text.component';
 import { convert2VegaData, getUnitLabel, convertDataBaseValue, addMissingDataPoint, getRelativeValue, getColorDomains, relativeDatumToOriginalDatum, normlizeVegaFieldName, } from './ChartUtil';
 import { useMetricsTimeSpan } from './MetricTimespanProvider';
-import { spacing } from '../../style/theme';
+import { spacing } from '../../spacing';
 import { SmallerText } from '../text/Text.component';
 import { Loader } from '../loader/Loader.component';
 import { formatValue } from './tooltip/index';
@@ -51,12 +51,12 @@ const Legends = styled.div `
   align-items: center;
 `;
 const LegendStroke = styled.div `
-  margin: 0 ${spacing.sp8} 0 ${spacing.sp16};
-  height: ${spacing.sp2};
+  margin: 0 ${spacing.r8} 0 ${spacing.r16};
+  height: ${spacing.r2};
   background: ${(props) => props.isLineDashed
-    ? `repeating-linear-gradient(to right,${props.lineColor} 0,${props.lineColor} ${spacing.sp1},transparent ${spacing.sp1},transparent ${spacing.sp2})`
+    ? `repeating-linear-gradient(to right,${props.lineColor} 0,${props.lineColor} ${spacing.r1},transparent ${spacing.r1},transparent ${spacing.r2})`
     : props.lineColor};
-  width: ${spacing.sp8};
+  width: ${spacing.r8};
 `;
 const ChartHeader = styled.div `
   display: flex;
@@ -205,8 +205,7 @@ function LineTemporalChart({ series, title, height, startingTimeStamp, unitRange
                 //https://vega.github.io/vega-lite/docs/datetime.html
             },
             color: {
-                value: theme.highlight,
-                opacity: 0.3,
+                value: theme.selectedActive,
             },
             /*
             According to the design, the vertical ruler should be hided when the mouse points out of the graph area.
@@ -552,7 +551,7 @@ function LineTemporalChart({ series, title, height, startingTimeStamp, unitRange
                                 minWidth: '15rem',
                                 display: 'block',
                             }, children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) })), isLoading && (_jsx(Loader, { style: {
-                            paddingLeft: `${spacing.sp4}`,
+                            paddingLeft: `${spacing.r4}`,
                         } }))] }), _jsx(VegaChart, { spec: spec, onHover: (datum) => {
                     if (onHover) {
                         onHover({

package/dist/components/searchinput/SearchInput.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAkCF,QAAA,MAAM,WAAW,2FAsFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAuCF,QAAA,MAAM,WAAW,2FAsFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/searchinput/SearchInput.component.js

@@ -8,10 +8,15 @@ import { spacing } from '../../spacing';
 const SearchInputContainer = styled.div `
   position: relative;
   width: max-content;
-  input {
+
+  input[value] {
     max-width: calc(100% - 1rem - ${spacing.f8} - 1rem);
   }
 
+  input[value=''] {
+    max-width: calc(100% - 1rem - ${spacing.f8});
+  }
+
   ${(props) => {
     if (props.disabled) {
         return css `

package/dist/components/selectv2/Selectv2.component.d.ts

@@ -5,7 +5,7 @@ export type OptionProps = {
     icon?: React.ReactNode;
     children?: React.ReactNode;
     value: string;
-    disabledReason?: React.ReactNode;
+    disabledReason?: JSX.Element;
 };
 export declare function Option({ value, children, disabled, icon, disabledReason, ...rest }: OptionProps): JSX.Element;
 export type SelectProps = {

package/dist/components/selectv2/Selectv2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AAyND,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAiKhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}
+{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC9B,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AA6ND,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAiKhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}

package/dist/components/selectv2/Selectv2.component.js

@@ -50,12 +50,7 @@ export function Option({ value, children, disabled, icon, disabledReason, ...res
     return _jsx(_Fragment, {});
 }
 const Input = (props) => {
-    const ariaProps = {
-        role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
-        'aria-expanded': props.selectProps.menuIsOpen,
-        'aria-autocomplete': 'list',
-    };
-    return _jsx(components.Input, { ...props, ...ariaProps });
+    return _jsx(components.Input, { ...props });
 };
 const selectDropdownIndicator = (caretType, indicatorDirection) => {
     if (caretType === 'chevron') {
@@ -171,7 +166,15 @@ const MenuList = (props) => {
 const ValueContainer = ({ children, ...props }) => {
     const selectedOption = props.selectProps.selectedOption;
     const icon = selectedOption ? selectedOption.icon : null;
-    return (_jsxs(components.ValueContainer, { ...props, children: [icon ? _jsx("div", { className: "value-container-icon", children: icon }) : null, _jsx("div", { children: children })] }));
+    const ariaProps = {
+        innerProps: {
+            role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
+            'aria-expanded': props.selectProps.menuIsOpen,
+            'aria-autocomplete': 'list',
+            'aria-label': props.selectProps.placeholder,
+        },
+    };
+    return (_jsxs(components.ValueContainer, { ...props, ...ariaProps, children: [icon ? _jsx("div", { className: "value-container-icon", children: icon }) : null, _jsx("div", { children: children })] }));
 };
 const OptionContext = createContext(null);
 function SelectWithOptionContext(props) {

package/dist/components/steppers/Steppers.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Steppers.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/steppers/Steppers.component.tsx"],"names":[],"mappings":";AAMA,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAsHF,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAiBtD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Steppers.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/steppers/Steppers.component.tsx"],"names":[],"mappings":";AAMA,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAgIF,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAiBtD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/steppers/Steppers.component.js

@@ -22,6 +22,7 @@ const Circle = styled.div `
   display: flex;
   justify-content: center;
   align-items: center;
+  line-height: 30px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
@@ -58,13 +59,14 @@ const Circle = styled.div `
 }};
 `;
 const StepHeader = styled.span `
-  padding: 8px;
+  margin-left: ${spacing.r8};
+  line-height: 30px;
   color: ${(props) => props.active
     ? getThemePropSelector('textPrimary')
     : getThemePropSelector('textSecondary')};
 `;
 const StepContent = styled.div `
-  padding: ${spacing.r8};
+  padding: ${spacing.r8} 0 ${spacing.r8} ${spacing.r8};
 `;
 const BottomBar = styled.hr `
   flex-grow: 1;
@@ -88,7 +90,11 @@ const BottomBar = styled.hr `
 function Step(props) {
     const { title, content, active, completed, isLast, index = 0, error, inProgress, } = props;
     const circleContent = completed ? _jsx(Icon, { name: "Check" }) : index + 1;
-    return (_jsxs(StepContainer, { children: [_jsxs(Panel, { children: [_jsx(Circle, { active: active, error: error, completed: completed, children: active && inProgress ? (_jsx(Loader, { size: "base" })) : (_jsx("span", { children: circleContent })) }), !isLast && _jsx(BottomBar, { completed: completed })] }), _jsxs(Panel, { children: [_jsx(StepHeader, { active: active, children: title }), active && _jsx(StepContent, { children: content })] })] }));
+    return (_jsxs(StepContainer, { children: [_jsxs(Panel, { children: [_jsx(Circle, { active: active, error: error, completed: completed, children: active && inProgress ? (_jsx(Loader, { size: "base" })) : (_jsx("span", { children: circleContent })) }), !isLast && _jsx(BottomBar, { completed: completed })] }), _jsxs(Panel, { children: [_jsx("div", { style: {
+                            height: '30px',
+                            display: 'flex',
+                            alignItems: 'center',
+                        }, children: _jsx(StepHeader, { active: active, children: title }) }), active && _jsx(StepContent, { children: content })] })] }));
 }
 function Steppers({ steps, activeStep, ...rest }) {
     return (_jsx(SteppersContainer, { className: "sc-steppers", ...rest, children: steps.map(({ title, content, ...stepRest }, index) => (_jsx(Step, { title: title, content: content, active: index === activeStep, completed: index < activeStep, isLast: index === steps.length - 1, index: index, ...stepRest }, index))) }));

package/dist/components/vegachartv2/VegaChartV2.component.js

@@ -50,7 +50,7 @@ function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', f
     const currentTheme = useTheme();
     const themeConfig = {
         config: {
-            background: currentTheme.backgroundLevel1,
+            background: 'transparent',
             axis: {
                 labelColor: currentTheme.textSecondary,
                 titleColor: currentTheme.textSecondary,
@@ -58,11 +58,12 @@ function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', f
                 domainColor: 'transparent',
             },
             title: {
-                color: currentTheme.buttonDelete,
+                color: currentTheme.textPrimary,
                 font: 'Lato',
             },
             view: {
-                stroke: 'transparent',
+                stroke: currentTheme.border,
+                strokeWidth: 0.5,
                 fill: currentTheme.backgroundLevel1,
             },
             // the headers provide a title and labels for faceted plots.
@@ -212,7 +213,6 @@ function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', f
     ]);
     return (_jsx("div", { className: "sc-vegachart", ref: vegaDOMInstance, style: {
             width: '100%',
-            border: `${currentTheme.backgroundLevel3} 1px solid`,
         }, children: _jsx(VegaTooltipTheme, {}) }));
 } // @ts-expect-error
 export const VegaChart = React.forwardRef(VegaChartInternal);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.120.0",
+  "version": "0.122.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -18,7 +18,8 @@
     "test": "jest",
     "storybook": "storybook dev -p 3000",
     "build-storybook": "storybook build",
-    "storybook:deploy": "storybook-to-ghpages"
+    "storybook:deploy": "storybook-to-ghpages",
+    "preview": "jest-preview"
   },
   "keywords": [],
   "browserslist": [
@@ -33,18 +34,18 @@
     "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-actions": "^7.6.14",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/addon-mdx-gfm": "^7.6.14",
-    "@storybook/addon-storyshots": "^7.6.14",
-    "@storybook/addon-storysource": "^7.6.14",
-    "@storybook/blocks": "^7.6.14",
-    "@storybook/manager-api": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-webpack5": "^7.6.14",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-mdx-gfm": "^7.6.17",
+    "@storybook/addon-storyshots": "^7.6.17",
+    "@storybook/addon-storysource": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^7.6.14",
+    "@storybook/theming": "^7.6.17",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^8.0.1",
@@ -71,11 +72,12 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.1",
+    "jest-preview": "^0.3.1",
     "plop": "^2.4.0",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.0",
     "source-map-explorer": "^2.0.1",
-    "storybook": "^7.6.14",
+    "storybook": "^7.6.17",
     "typescript": "^5.3.2"
   },
   "husky": {
@@ -100,11 +102,11 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@js-temporal/polyfill": "^0.4.4",
-    "@storybook/preview-api": "^7.6.14",
+    "@storybook/preview-api": "^7.6.17",
+    "downshift": "^7.0.5",
     "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
-    "downshift": "^7.0.5",
     "react": "^17.0.2",
     "react-debounce-input": "3.2.2",
     "react-dom": "^17.0.2",

package/src/lib/components/card/Card.component.tsx

@@ -3,6 +3,7 @@ import { HTMLProps } from 'react';
 import { createContext } from 'react';
 import styled, { css } from 'styled-components';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
+import { hex2RGB } from '../../utils';
 const CardContext = createContext(null);
 type CardElementProps = {
   children: React.ReactNode;
@@ -85,9 +86,10 @@ const StyledCard = styled.div<{
   ${StyledCardHeader} {
     color: ${(props) => props.theme.textPrimary};
     background: ${(props) =>
-      props.theme[props.colorStatus || props.headerBackgroundColor]};
-    opacity: ${(props) =>
-      props.colorStatus && props.colorStatus !== 'backgroundLevel4' ? 0.4 : 1};
+      props.colorStatus
+        ? `rgba(${hex2RGB(props.theme[props.colorStatus]).join(',')}, 0.7)`
+        : props.theme[props.headerBackgroundColor]};
+
     ${(props) => props.disabled && 'opacity: 0.3;'}
   }
 
@@ -140,9 +142,8 @@ function Card({
 
   if (status) {
     colorStatus =
-      status === 'healthy'
-        ? 'backgroundLevel4'
-        : 'status' + status.replace(/^\w/, (c) => c.toUpperCase());
+      status != 'healthy' &&
+      'status' + status.replace(/^\w/, (c) => c.toUpperCase());
   }
 
   return (

package/src/lib/components/checkbox/Checkbox.component.tsx

@@ -5,7 +5,7 @@ import { spacing, Stack } from '../../spacing';
 import { Text } from '../text/Text.component';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 
-type Props = {
+export type Props = {
   label?: string;
   value?: string;
   checked?: boolean;
@@ -53,6 +53,8 @@ const StyledCheckbox = styled.label<{
     color: ${(props) => props.theme.textPrimary};
     vertical-align: middle;
     -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     background: none;
     border: 0;
     outline: 0;

package/src/lib/components/layout/v2/AppContainer.tsx

@@ -53,7 +53,7 @@ const OverallSummaryContainer = styled.div<{
   background?: ThemeColors;
 }>`
   background: ${(props) => props.theme[props.background || 'backgroundLevel2']};
-  height: 6rem;
+  min-height: 6rem;
   padding: ${({ noPadding }) => (noPadding ? '0' : '0 1rem')};
   margin-bottom: ${({ noBottomMargin }) =>
     noBottomMargin ? '0' : sectionDistance};

package/src/lib/components/linetemporalchart/LineTemporalChart.component.tsx

@@ -27,7 +27,7 @@ import {
   normlizeVegaFieldName,
 } from './ChartUtil';
 import { useMetricsTimeSpan } from './MetricTimespanProvider';
-import { spacing } from '../../style/theme';
+import { spacing } from '../../spacing';
 import { SmallerText } from '../text/Text.component';
 import { Loader } from '../loader/Loader.component';
 import { formatValue } from './tooltip/index';
@@ -68,13 +68,13 @@ const Legends = styled.div`
   align-items: center;
 `;
 const LegendStroke = styled.div`
-  margin: 0 ${spacing.sp8} 0 ${spacing.sp16};
-  height: ${spacing.sp2};
+  margin: 0 ${spacing.r8} 0 ${spacing.r16};
+  height: ${spacing.r2};
   background: ${(props) =>
     props.isLineDashed
-      ? `repeating-linear-gradient(to right,${props.lineColor} 0,${props.lineColor} ${spacing.sp1},transparent ${spacing.sp1},transparent ${spacing.sp2})`
+      ? `repeating-linear-gradient(to right,${props.lineColor} 0,${props.lineColor} ${spacing.r1},transparent ${spacing.r1},transparent ${spacing.r2})`
       : props.lineColor};
-  width: ${spacing.sp8};
+  width: ${spacing.r8};
 `;
 const ChartHeader = styled.div`
   display: flex;
@@ -327,8 +327,7 @@ function LineTemporalChart({
         //https://vega.github.io/vega-lite/docs/datetime.html
       },
       color: {
-        value: theme.highlight,
-        opacity: 0.3,
+        value: theme.selectedActive,
       },
 
       /* 
@@ -731,7 +730,7 @@ function LineTemporalChart({
         {isLoading && (
           <Loader
             style={{
-              paddingLeft: `${spacing.sp4}`,
+              paddingLeft: `${spacing.r4}`,
             }}
           />
         )}

package/src/lib/components/searchinput/SearchInput.component.tsx

@@ -20,10 +20,15 @@ const SearchInputContainer = styled.div<{
 }>`
   position: relative;
   width: max-content;
-  input {
+
+  input[value] {
     max-width: calc(100% - 1rem - ${spacing.f8} - 1rem);
   }
 
+  input[value=''] {
+    max-width: calc(100% - 1rem - ${spacing.f8});
+  }
+
   ${(props) => {
     if (props.disabled) {
       return css`

package/src/lib/components/selectv2/Selectv2.component.tsx

@@ -24,7 +24,7 @@ export type OptionProps = {
   icon?: React.ReactNode;
   children?: React.ReactNode;
   value: string;
-  disabledReason?: React.ReactNode;
+  disabledReason?: JSX.Element;
 };
 const usePreviousValue = (value) => {
   const ref = useRef(null);
@@ -79,12 +79,7 @@ export function Option({
 }
 
 const Input = (props) => {
-  const ariaProps = {
-    role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
-    'aria-expanded': props.selectProps.menuIsOpen,
-    'aria-autocomplete': 'list',
-  };
-  return <components.Input {...props} {...ariaProps} />;
+  return <components.Input {...props} />;
 };
 
 const selectDropdownIndicator = (
@@ -285,8 +280,17 @@ const MenuList = (props) => {
 const ValueContainer = ({ children, ...props }) => {
   const selectedOption = props.selectProps.selectedOption;
   const icon = selectedOption ? selectedOption.icon : null;
+  const ariaProps = {
+    innerProps: {
+      role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
+      'aria-expanded': props.selectProps.menuIsOpen,
+      'aria-autocomplete': 'list',
+      'aria-label': props.selectProps.placeholder,
+    },
+  };
+
   return (
-    <components.ValueContainer {...props}>
+    <components.ValueContainer {...props} {...ariaProps}>
       {icon ? <div className="value-container-icon">{icon}</div> : null}
       <div>{children}</div>
     </components.ValueContainer>

package/src/lib/components/selectv2/selectv2.test.tsx

@@ -1,11 +1,16 @@
-import { Select, Option } from '../selectv2/Selectv2.component';
-import React, { useState } from 'react';
-import { render as testingRender } from '@testing-library/react';
+import {
+  screen,
+  render as testingRender,
+  within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Icon } from '../icon/Icon.component';
+import React, { useState } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { debug } from 'jest-preview';
+import { Icon } from '../icon/Icon.component';
+import { Option, Select } from '../selectv2/Selectv2.component';
 
-const render = (...args) => {
+const render = (args) => {
   return testingRender(
     <QueryClientProvider client={new QueryClient()}>
       {args}
@@ -274,4 +279,187 @@ describe('SelectV2', () => {
     );
     expect(onChange).toBeCalledTimes(0);
   });
+
+  it('should select with the right selector', async () => {
+    const accounts = [
+      {
+        name: 'Account 1',
+      },
+      {
+        name: 'Account 2',
+      },
+    ];
+
+    const MyWrapper = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          id="select-account"
+          value={value}
+          onChange={(accountName) => {
+            setValue(accountName);
+          }}
+          size="1/2"
+          placeholder="Select Account"
+        >
+          {accounts.map((account) => (
+            <Select.Option key={`${account.name}`} value={account.name}>
+              {account.name}
+            </Select.Option>
+          ))}
+        </Select>
+      );
+    };
+
+    render(<MyWrapper />);
+
+    // If you only have one select, you can use the role, otherwise, you should use the label
+    // screen.getByLabelText(/select account/i)
+    // In a normal select, we should have a label span attach to it.
+    // It's not our case here, so it makes thing difficult to select the right select
+    // I workaround this by using setting the aria-label to the select container (cf: test below)
+    const singleSelect = screen.getByRole('listbox');
+    await userEvent.click(singleSelect);
+
+    await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+  });
+
+  it('should be testable if we have several select', async () => {
+    const MyWrapperWith2Select = () => {
+      const [value, setValue] = useState('');
+      const [value2, setValue2] = useState('');
+      const accounts = [
+        {
+          name: 'Account 1',
+        },
+        {
+          name: 'Account 2',
+        },
+      ];
+      const users = [
+        {
+          name: 'User 1',
+        },
+        {
+          name: 'User 2',
+        },
+      ];
+      return (
+        <div>
+          <Select
+            id="select-account"
+            value={value}
+            onChange={(accountName) => {
+              setValue(accountName);
+            }}
+            size="1/2"
+            placeholder="Select Account"
+          >
+            {accounts.map((account) => (
+              <Select.Option key={`${account.name}`} value={account.name}>
+                {account.name}
+              </Select.Option>
+            ))}
+          </Select>
+          <Select
+            id="select-user"
+            value={value2}
+            onChange={(accountName) => {
+              setValue2(accountName);
+            }}
+            size="1/2"
+            placeholder="Select User"
+          >
+            {users.map((user) => (
+              <Select.Option key={`${user.name}`} value={user.name}>
+                {user.name}
+              </Select.Option>
+            ))}
+          </Select>
+        </div>
+      );
+    };
+
+    render(<MyWrapperWith2Select />);
+
+    await userEvent.click(screen.getByLabelText(/select account/i));
+
+    await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+
+    await userEvent.click(screen.getByLabelText(/select user/i));
+
+    await userEvent.click(screen.getByRole('option', { name: /user 1/i }));
+  });
+
+  it('should be testable even if we have several select with the same value, the placeholder should be different', async () => {
+    const MyWrapperWith2Select = () => {
+      const [value, setValue] = useState('');
+      const [value2, setValue2] = useState('');
+      const accounts = [
+        {
+          name: 'Account 1',
+        },
+        {
+          name: 'Account 2',
+        },
+      ];
+      const accounts2 = [
+        {
+          name: 'Account 1',
+        },
+        {
+          name: 'Account 2',
+        },
+      ];
+      return (
+        <div style={{ display: 'flex' }}>
+          <Select
+            id="select-account"
+            value={value}
+            onChange={(accountName) => {
+              setValue(accountName);
+            }}
+            size="1/2"
+            placeholder="Select Account"
+          >
+            {accounts.map((account) => (
+              <Select.Option key={`${account.name}`} value={account.name}>
+                {account.name}
+              </Select.Option>
+            ))}
+          </Select>
+          <Select
+            id="select-account2"
+            value={value2}
+            onChange={(accountName) => {
+              setValue2(accountName);
+            }}
+            size="1"
+            placeholder="Select Second Account"
+          >
+            {accounts2.map((user) => (
+              <Select.Option key={`${user.name}`} value={user.name}>
+                {user.name}
+              </Select.Option>
+            ))}
+          </Select>
+        </div>
+      );
+    };
+
+    render(<MyWrapperWith2Select />);
+
+    await userEvent.click(screen.getByLabelText(/select account/i));
+    await userEvent.click(screen.getByLabelText(/Select Second Account/i));
+
+    /**
+     * This is possible because only 1 select can be open at a time
+     * If for some reason, you have multiple select open at the same time, you can select the select by its label
+     * and check the option from it parent like this :
+     * const select = screen.getByLabelText(/select account/i);
+     * const selectContainer = select?.parentElement?.parentElement;
+     * const option = within(selectContainer).getByRole('option', { name: /account 1/i });
+     */
+    await userEvent.click(screen.getByRole('option', { name: /account 1/i }));
+  });
 });

package/src/lib/components/steppers/Steppers.component.tsx

@@ -39,6 +39,7 @@ const Circle = styled.div<{
   display: flex;
   justify-content: center;
   align-items: center;
+  line-height: 30px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
@@ -74,14 +75,15 @@ const Circle = styled.div<{
   }};
 `;
 const StepHeader = styled.span<{ active?: boolean }>`
-  padding: 8px;
+  margin-left: ${spacing.r8};
+  line-height: 30px;
   color: ${(props) =>
     props.active
       ? getThemePropSelector('textPrimary')
       : getThemePropSelector('textSecondary')};
 `;
 const StepContent = styled.div`
-  padding: ${spacing.r8};
+  padding: ${spacing.r8} 0 ${spacing.r8} ${spacing.r8};
 `;
 const BottomBar = styled.hr<{ completed?: boolean }>`
   flex-grow: 1;
@@ -128,7 +130,15 @@ function Step(props: StepProps) {
         {!isLast && <BottomBar completed={completed} />}
       </Panel>
       <Panel>
-        <StepHeader active={active}>{title}</StepHeader>
+        <div
+          style={{
+            height: '30px',
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <StepHeader active={active}>{title}</StepHeader>
+        </div>
         {active && <StepContent>{content}</StepContent>}
       </Panel>
     </StepContainer>

package/src/lib/components/vegachartv2/VegaChartV2.component.tsx

@@ -75,7 +75,7 @@ function VegaChartInternal(
   const currentTheme = useTheme();
   const themeConfig = {
     config: {
-      background: currentTheme.backgroundLevel1,
+      background: 'transparent',
       axis: {
         labelColor: currentTheme.textSecondary,
         titleColor: currentTheme.textSecondary,
@@ -83,11 +83,12 @@ function VegaChartInternal(
         domainColor: 'transparent',
       },
       title: {
-        color: currentTheme.buttonDelete,
+        color: currentTheme.textPrimary,
         font: 'Lato',
       },
       view: {
-        stroke: 'transparent',
+        stroke: currentTheme.border,
+        strokeWidth: 0.5,
         fill: currentTheme.backgroundLevel1,
       },
       // the headers provide a title and labels for faceted plots.
@@ -265,7 +266,6 @@ function VegaChartInternal(
       ref={vegaDOMInstance}
       style={{
         width: '100%',
-        border: `${currentTheme.backgroundLevel3} 1px solid`,
       }}
     >
       <VegaTooltipTheme />

package/stories/Checkbox/checkbox.guideline.mdx

@@ -0,0 +1,55 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+} from '@storybook/blocks';
+import { Checkbox } from '../../src/lib/components/checkbox/Checkbox.component';
+
+import * as CheckboxStories from './checkbox.stories';
+
+<Meta of={CheckboxStories} name="Guideline" />
+
+# Checkbox
+
+Checkboxes are used to select one or more options in a list.
+
+## Usage
+
+Unlike the radio element it is possible to select more than one option. \
+A tick/check indicates that the element is selected. \
+
+<Canvas of={CheckboxStories.ChoiceCheckbox} layout="fullscreen" />
+
+It is possible to use the checkbox to enable or disable an option:
+
+<Canvas of={CheckboxStories.OptionCheckbox} layout="fullscreen" />
+
+## State Variations
+
+### Indeterminate State
+
+Apart from checked and unchecked, checkboxes can be in a third state : indeterminate. \
+When a checkbox has sub-options checkboxes, this state indicates that some of the sub-options are checked. \
+Clicking on the main checkbox select or unselect all the sub-options boxes.
+
+<Canvas of={CheckboxStories.IndeterminateUseCase} layout="fullscreen" />
+
+### Disabled state
+
+Checkboxes can be disabled, making it impossible to change the box state. \
+A not-allowed cursor inform the user about the unavaibility of the action.
+
+<Canvas
+  of={CheckboxStories.DisabledCheckboxes}
+
+layout="fullscreen"
+/>
+
+### Playground
+
+<Canvas of={CheckboxStories.Playground} layout="fullscreen" />
+<Controls of={CheckboxStories.Playground} />

package/stories/Checkbox/checkbox.stories.tsx

@@ -0,0 +1,173 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import React, { ComponentProps, useEffect, useRef } from 'react';
+import {
+  Checkbox,
+  Props,
+} from '../../src/lib/components/checkbox/Checkbox.component';
+import { Column } from '../../src/lib/components/tablev2/Tablev2.component';
+import { Box, Input, Table } from '../../src/lib/next';
+import { Form, FormGroup, FormSection } from '../../src/lib';
+
+type CheckboxStory = StoryObj<Props>;
+
+const meta: Meta<Props> = {
+  title: 'Components/Inputs/Checkbox',
+  component: Checkbox,
+  args: {
+    label: 'interested ?',
+    onChange: action('Checkbox clicked'),
+  },
+  argTypes: {
+    onChange: {
+      description:
+        'Function to be called when the checkbox is clicked, optional',
+    },
+    label: { control: 'text', description: 'Label of the checkbox, optional' },
+    checked: {
+      control: 'boolean',
+      description: 'Control if the checkbox is checked, optional',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Control if the checkbox is disabled, optional',
+    },
+    value: { control: 'text' },
+  },
+};
+
+export default meta;
+
+export const Playground: CheckboxStory = {};
+
+export const ChoiceCheckbox: CheckboxStory = {
+  render: () => {
+    return (
+      <>
+        What are you interested in ?
+        <Checkbox label="Sport" />
+        <Checkbox label="Music" />
+        <Checkbox label="Drawing" />
+      </>
+    );
+  },
+};
+
+export const OptionCheckbox: CheckboxStory = {
+  render: () => {
+    return (
+      <Form layout={{ kind: 'tab' }}>
+        <FormSection>
+          <FormGroup
+            id="check"
+            label="Enable this option ?"
+            content={<Checkbox />}
+          ></FormGroup>
+        </FormSection>
+      </Form>
+    );
+  },
+};
+
+export const IndeterminateCheckbox: StoryObj<
+  ComponentProps<typeof Checkbox> & { 'data-cy': string }
+> = {
+  render: (args) => {
+    const checkboxRef = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+      if (checkboxRef.current) {
+        checkboxRef.current.indeterminate = true;
+      }
+    }, [checkboxRef]);
+    return <Checkbox ref={checkboxRef} {...args} />;
+  },
+  args: {
+    'data-cy': 'checked_checkbox',
+  },
+};
+
+export const CheckedCheckbox: StoryObj<
+  ComponentProps<typeof Checkbox> & { 'data-cy': string }
+> = {
+  args: {
+    checked: true,
+    'data-cy': 'checked_checkbox',
+  },
+};
+
+export const UncheckedCheckbox: CheckboxStory = {
+  args: {
+    checked: false,
+  },
+};
+
+export const DisabledCheckboxes: CheckboxStory = {
+  render: () => {
+    return (
+      <>
+        <Checkbox disabled checked label="Disabled & checked " />
+        <Checkbox disabled label="Disabled & unchecked" />
+      </>
+    );
+  },
+};
+
+export const DisabledCheckedCheckbox: CheckboxStory = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+};
+export const DisabledUncheckedCheckbox: CheckboxStory = {
+  args: {
+    checked: false,
+    disabled: true,
+  },
+};
+
+export const IndeterminateUseCase = {
+  render: ({}) => {
+    const data = [
+      {
+        name: 'test 1',
+        volume: 1,
+        capacity: '1Gi',
+      },
+      {
+        name: 'test 2',
+        volume: 1,
+        capacity: '1Gi',
+      },
+      {
+        name: 'test 2',
+        volume: 1,
+        capacity: '1Gi',
+      },
+    ];
+
+    const columns: Column<(typeof data)[number]>[] = [
+      {
+        Header: 'Name',
+        accessor: 'name',
+      },
+      {
+        Header: 'Volume',
+        accessor: 'volume',
+      },
+      {
+        Header: 'Capacity',
+        accessor: 'capacity',
+      },
+    ];
+
+    return (
+      <Box width="500px" height="200px">
+        <Table columns={columns} data={data} defaultSortingKey={'health'}>
+          <Table.MultiSelectableContent
+            onMultiSelectionChanged={action('Selection changed')}
+          />
+        </Table>
+      </Box>
+    );
+  },
+};

package/stories/barchart.stories.tsx

@@ -114,13 +114,7 @@ export default {
   title: 'Components/Data Display/Charts/BarChart',
   component: BarChart,
   decorators: [
-    (story: Component) => (
-      <Wrapper
-        style={{ minHeight: '30vh', padding: '3rem', backgroundColor: 'white' }}
-      >
-        <SyncedCursorCharts>{story()}</SyncedCursorCharts>
-      </Wrapper>
-    ),
+    (story: Component) => <SyncedCursorCharts>{story()}</SyncedCursorCharts>,
   ],
   argTypes: {
     data: {

package/stories/checkbox.stories.tsx

@@ -1,63 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { action } from '@storybook/addon-actions';
-import { Checkbox } from '../src/lib/components/checkbox/Checkbox.component';
-import { Wrapper } from './common';
-export default {
-  title: 'Components/Inputs/Checkbox',
-  component: Checkbox,
-  decorators: [
-    (story) => (
-      <Wrapper style={{ minHeight: '10vh', padding: '3rem' }}>
-        {story()}
-      </Wrapper>
-    ),
-  ],
-  args: {
-    label: 'interrested ?',
-    onChange: action('Checkbox clicked'),
-  },
-};
-
-export const DefaultCheckbox = {};
-
-export const IndeterminateCheckbox = {
-  render: (args) => {
-    const checkboxRef = useRef<HTMLInputElement>(null);
-    useEffect(() => {
-      if (checkboxRef.current) {
-        checkboxRef.current.indeterminate = true;
-      }
-    }, [checkboxRef]);
-    return <Checkbox ref={checkboxRef} {...args} />;
-  },
-  args: {
-    'data-cy': 'checked_checkbox',
-  },
-};
-
-export const CheckedCheckbox = {
-  args: {
-    checked: true,
-    'data-cy': 'checked_checkbox',
-  },
-};
-
-export const UncheckedCheckbox = {
-  args: {
-    checked: false,
-  },
-};
-
-export const DisabledCheckedCheckbox = {
-  args: {
-    checked: true,
-    disabled: true,
-  },
-};
-
-export const DisabledUncheckedCheckbox = {
-  args: {
-    checked: false,
-    disabled: true,
-  },
-};