@scality/core-ui 0.118.0 → 0.119.0

package/dist/components/buttonv2/Buttonv2.component.js

@@ -37,7 +37,7 @@ export const ButtonStyled = styled.button `
             return css `
           background-color: ${brand.buttonPrimary};
           border: ${spacing.r1} solid ${brand.buttonPrimary};
-          color: ${brand.textSecondary};
+          color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
             border: ${spacing.r1} solid ${brand.infoPrimary};
@@ -58,7 +58,7 @@ export const ButtonStyled = styled.button `
             return css `
           background-color: ${brand.buttonSecondary};
           border: ${spacing.r1} solid ${brand.buttonSecondary};
-          color: ${brand.textSecondary};
+          color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
             border: ${spacing.r1} solid ${brand.infoPrimary};

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

@@ -15,7 +15,7 @@ type CardProps = {
     onClick?: () => void;
     active?: boolean;
     disabled?: boolean;
-    children: Node;
+    children: React.ReactNode;
     className?: string;
 } & HTMLProps<HTMLDivElement>;
 declare function Card({ width, height, headerBackgroundColor, bodyBackgroundColor, status, onClick, active, disabled, children, className, ...rest }: CardProps): JSX.Element;

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;AAMlC,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkDF,eAAO,MAAM,UAAU,qCA/CqB,gBAAgB,gBA+CC,CAAC;AAC9D,eAAO,MAAM,QAAQ,qCAhDuB,gBAAgB,gBAgDH,CAAC;AAC1D,eAAO,MAAM,iBAAiB,qCAjDc,gBAAgB,gBAiDe,CAAC;AA4D5E,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,IAAI,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;AAC9B,iBAAS,IAAI,CAAC,EACZ,KAAc,EACd,MAAe,EACf,qBAA0C,EAC1C,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;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"}

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext } from 'react';
 import styled, { css } from 'styled-components';
-import { hex2RGB } from '../../utils';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const CardContext = createContext(null);
 function withCompoundCheck(Component) {
@@ -18,7 +17,8 @@ function withCompoundCheck(Component) {
 }
 const StyledCardHeader = styled.div `
   padding: 0.7rem;
-  border-radius: 3px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
   font-weight: bold;
 `;
 StyledCardHeader.displayName = 'CardHeader';
@@ -43,22 +43,16 @@ const StyledCard = styled.div `
   flex-flow: column;
   width: ${(props) => props.width};
   height: ${(props) => props.height};
-  background: ${(props) => props.theme[props.bodyBackgroundColor || 'backgroundLevel3']};
-
+  background: ${(props) => props.theme[props.bodyBackgroundColor]};
+  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
   ${StyledCardBody} {
     opacity: ${(props) => (props.disabled ? '0.2' : '1')};
   }
 
   ${StyledCardHeader} {
-    border-radius: 2px;
     color: ${(props) => props.theme.textPrimary};
-    ${(props) => {
-    const hexColor = hex2RGB(props.theme[props.colorStatus || props.headerBackgroundColor || 'backgroundLevel4']).join(',');
-    let opacity = 1;
-    if (props.colorStatus && props.colorStatus !== 'backgroundLevel4')
-        opacity = 0.4;
-    return `background: rgba(${hexColor}, ${opacity});`;
-}}
+    background: ${(props) => props.theme[props.colorStatus || props.headerBackgroundColor]};
+    opacity: ${(props) => props.colorStatus && props.colorStatus !== 'backgroundLevel4' ? 0.4 : 1};
     ${(props) => props.disabled && 'opacity: 0.3;'}
   }
 
@@ -81,7 +75,7 @@ const StyledCard = styled.div `
       ${(props) => props.theme[props.activeBorderColor || 'selectedActive']};
   }
 `;
-function Card({ width = 'auto', height = 'auto', headerBackgroundColor = 'backgroundLevel4', bodyBackgroundColor = 'backgroundLevel3', status = null, onClick = null, active = false, disabled = false, children, className, ...rest }) {
+function Card({ width = 'auto', height = 'auto', headerBackgroundColor = 'buttonSecondary', bodyBackgroundColor = 'backgroundLevel3', status = null, onClick = null, active = false, disabled = false, children, className, ...rest }) {
     let colorStatus = null;
     if (status) {
         colorStatus =

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

@@ -52,7 +52,7 @@ const StyledCheckbox = styled.label `
 
   [type='checkbox']:checked::before {
     box-shadow: none;
-    background-image: url('data:image/svg+xml,%3Csvg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"%3E %3Cpath d="M3 6.68646L5.0671 9L9 3" stroke="%23fff" stroke-width="1.5"/%3E %3C/svg%3E');
+    background-image: url('data:image/svg+xml,%3Csvg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"%3E %3Cpath d="M3 6.68646L5.0671 9L9 3" stroke="${(props) => props.theme.textPrimary.replace('#', '%23')}" stroke-width="1.5"/%3E %3C/svg%3E');
     background-repeat: no-repeat;
     background-position: center;
   }
@@ -63,7 +63,7 @@ const StyledCheckbox = styled.label `
     box-shadow: inset 0 0 0 ${spacing.r1}
       ${(props) => props.theme.selectedActive};
     background-color: ${(props) => props.theme.highlight};
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='6' y1='12' x2='20' y2='12' style='stroke:%23fff;stroke-width:4'/%3E %3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='6' y1='12' x2='20' y2='12' style='stroke:${(props) => props.theme.textPrimary.replace('#', '%23')};stroke-width:4'/%3E %3C/svg%3E");
   }
 
   /* Hover & focus */

package/dist/components/dropdown/Dropdown.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown/Dropdown.component.tsx"],"names":[],"mappings":";AAgBA,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA6DF,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAa,EACb,OAA2B,EAC3B,KAAK,EACL,KAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,eAgEP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown/Dropdown.component.tsx"],"names":[],"mappings":";AAgBA,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA4DF,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAa,EACb,OAA2B,EAC3B,KAAK,EACL,KAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,eAgEP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/dropdown/Dropdown.component.js

@@ -38,7 +38,6 @@ const DropdownMenuItemStyled = styled.li `
   cursor: pointer;
   font-size: ${fontSize.base};
   ${(props) => {
-    console.log(props.isSelected);
     return props.isSelected
         ? `background-color: ${props.theme.highlight};`
         : `background-color: ${props.theme.backgroundLevel1};`;

package/dist/components/inputv2/inputv2.d.ts

@@ -1,7 +1,7 @@
 import { InputHTMLAttributes } from 'react';
 import { IconName } from '../icon/Icon.component';
 export declare const convertSizeToRem: (size?: '1' | '2/3' | '1/2' | '1/3') => "14rem" | "6rem" | "10rem" | "20.5rem";
-type InputSize = '1' | '2/3' | '1/2' | '1/3';
+export type InputSize = '1' | '2/3' | '1/2' | '1/3';
 export type InputProps = {
     error?: string;
     id: string;
@@ -16,5 +16,4 @@ export declare const Input: import("react").ForwardRefExoticComponent<{
     rightIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | undefined;
     size?: InputSize | undefined;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;
-export {};
 //# sourceMappingURL=inputv2.d.ts.map

package/dist/components/inputv2/inputv2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AA4EF,KAAK,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,KAAK;;QANZ,MAAM;;;;0GA6DX,CAAC"}
+{"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AAgFF,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,KAAK;;QANZ,MAAM;;;;0GAsDX,CAAC"}

package/dist/components/inputv2/inputv2.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
-import { Box } from '../box/Box';
 import { DESCRIPTION_PREFIX, useFieldContext } from '../form/Form.component';
 import { Icon } from '../icon/Icon.component';
 export const convertSizeToRem = (size) => {
@@ -16,7 +15,8 @@ export const convertSizeToRem = (size) => {
         return '20.5rem';
 };
 const StyledInput = styled.input `
-  max-width: 100%;
+  max-width: ${(props) => props.hasIcon ? `calc(100% - 1rem - ${spacing.f8})` : '100%'};
+
   font-family: 'Lato';
   ${(props) => props.disabled &&
     `
@@ -45,6 +45,7 @@ const InputContainer = styled.div `
   height: 100%;
   display: flex;
   align-items: center;
+  gap: ${spacing.f8};
   padding: 0 ${spacing.r8} 0 ${spacing.r8};
   background: ${(props) => props.theme.backgroundLevel1};
   border-radius: ${spacing.r4};
@@ -72,9 +73,10 @@ const InputBorder = styled.div `
 `;
 const SelfCenterredIcon = styled(Icon) `
   align-self: center;
+  color: ${(props) => props.theme.textSecondary};
 `;
 export const Input = forwardRef(({ error, disabled, id, leftIcon, rightIcon, placeholder, size, ...inputProps }, ref) => {
     const { isContextAvailable, disabled: disabledFromFieldContext, error: errorFromFieldContext, } = useFieldContext();
     placeholder = placeholder ? `Example: ${placeholder}` : undefined;
-    return (_jsx(InputBorder, { disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), width: convertSizeToRem(size), children: _jsx(InputContainer, { isContextAvailable: isContextAvailable, disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), children: _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', width: "100%", gap: spacing['f8'], children: [leftIcon && _jsx(SelfCenterredIcon, { name: leftIcon }), _jsx(StyledInput, { ref: ref, disabled: disabled || disabledFromFieldContext, "aria-invalid": !!(error || errorFromFieldContext), "aria-describedby": `${DESCRIPTION_PREFIX}${id}`, id: id, ...inputProps, placeholder: placeholder }), rightIcon && _jsx(SelfCenterredIcon, { name: rightIcon })] }) }) }));
+    return (_jsx(InputBorder, { disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), width: convertSizeToRem(size), children: _jsxs(InputContainer, { isContextAvailable: isContextAvailable, disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), children: [leftIcon && _jsx(SelfCenterredIcon, { name: leftIcon }), _jsx(StyledInput, { ref: ref, disabled: disabled || disabledFromFieldContext, "aria-invalid": !!(error || errorFromFieldContext), "aria-describedby": `${DESCRIPTION_PREFIX}${id}`, hasIcon: !!(leftIcon || rightIcon), id: id, ...inputProps, placeholder: placeholder }), rightIcon && _jsx(SelfCenterredIcon, { name: rightIcon })] }) }));
 });

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

@@ -1,4 +1,5 @@
 import { ChangeEvent } from 'react';
+import { InputSize } from '../inputv2/inputv2';
 export type Props = {
     placeholder?: string;
     value: string;
@@ -6,6 +7,8 @@ export type Props = {
     onReset?: () => void;
     disableToggle: boolean;
     disabled?: boolean;
+    id?: string;
+    size?: InputSize;
 };
 declare const SearchInput: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
 export { SearchInput };

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,EAAgC,MAAM,OAAO,CAAC;AAMlE,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;CACpB,CAAC;AA6DF,QAAA,MAAM,WAAW,2FAqEhB,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;AAkCF,QAAA,MAAM,WAAW,2FAsFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { fontSize } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
 import { Icon } from '../icon/Icon.component';
-import { Input } from '../input/Input.component';
+import { Input } from '../inputv2/inputv2';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { spacing } from '../../spacing';
 const SearchInputContainer = styled.div `
   position: relative;
+  width: max-content;
+  input {
+    max-width: calc(100% - 1rem - ${spacing.f8} - 1rem);
+  }
 
   ${(props) => {
     if (props.disabled) {
@@ -19,66 +23,43 @@ const SearchInputContainer = styled.div `
     }
 }}
 
-  .sc-input {
-    display: block;
-    input[type='text'] {
-      width: ${(props) => (props.docked ? '40px' : '100%')};
-      box-sizing: border-box;
-      padding-left: ${(props) => (props.docked ? '28px' : '40px')};
-      transition: width 0.2s ease-in-out;
-    }
+  //hide the default clear button in chrome
+  .search-box::-webkit-search-cancel-button {
+    display: none;
   }
 `;
-const IconButton = styled.button `
+const ClearButton = styled.div `
   position: absolute;
-  border: none;
-  outline: none;
-  top: 1px;
-  padding: 8px 12px;
-  border-radius: 5px;
-  font-size: ${fontSize.base};
-  color: ${getThemePropSelector('textSecondary')};
-  background-color: transparent;
-  ${(props) => {
-    // TODO
-    return (!props.disabled &&
-        css `
-        cursor: pointer;
-        &:hover {
-          color: ${getThemePropSelector('selectedActive')};
-        }
-      `);
-}};
-`;
-const SearchIcon = styled(IconButton) `
-  left: 1px;
-`;
-const ResetIcon = styled(IconButton) `
   right: 1px;
-  visibility: ${(props) => (props.visible ? 'visible' : 'hidden')};
-  opacity: ${(props) => (props.visible ? 1 : 0)};
-  transition: opacity 0.5s ease-in-out;
+  top: 0px;
 `;
-const SearchInput = forwardRef(({ disableToggle, placeholder, value, onChange, onReset, disabled, ...rest }, forwardedRef) => {
-    const [docked, setDocked] = useState(!disableToggle);
+const SearchInput = forwardRef(({ disableToggle, placeholder, value, onChange, onReset, disabled, id, size, ...rest }, forwardedRef) => {
     const myInputRef = useRef(null);
-    const toggle = () => {
-        if (!disableToggle) {
-            setDocked(!docked);
-            if (myInputRef.current) {
-                myInputRef.current.focus();
+    const debounce = useRef(null);
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        return () => {
+            if (debounce.current) {
+                clearTimeout(debounce.current);
             }
-        }
-    };
+        };
+    }, []);
     const reset = () => {
+        setDebouncedValue('');
         if (onReset) {
             onReset();
         }
-        if (!disableToggle) {
-            setDocked(true);
+    };
+    const handleChange = (e) => {
+        setDebouncedValue(e.target.value);
+        if (debounce.current) {
+            clearTimeout(debounce.current);
         }
+        debounce.current = setTimeout(() => {
+            onChange(e);
+        }, 300);
     };
-    return (_jsxs(SearchInputContainer, { className: "sc-searchinput", disabled: disabled, docked: docked, ...rest, children: [_jsx(Input, { min: '1', type: "text", "aria-label": "search", name: "search", placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, inputRef: (element) => {
+    return (_jsxs(SearchInputContainer, { className: "sc-searchinput", disabled: disabled, ...rest, children: [_jsx(Input, { min: '1', id: id || 'search', type: "search", "aria-label": "search", name: "search", placeholder: placeholder, value: debouncedValue, onChange: handleChange, onReset: reset, size: size, leftIcon: "Search", className: "search-box", disabled: disabled, ref: (element) => {
                     myInputRef.current = element;
                     if (typeof forwardedRef === 'function') {
                         forwardedRef(element);
@@ -86,6 +67,6 @@ const SearchInput = forwardRef(({ disableToggle, placeholder, value, onChange, o
                     else if (forwardedRef) {
                         forwardedRef.current = element;
                     }
-                } }), _jsx(SearchIcon, { onClick: toggle, disabled: !docked, children: _jsx(Icon, { name: "Search" }) }), _jsx(ResetIcon, { onClick: reset, visible: !!value && !docked && !!onReset, children: _jsx(Icon, { name: "Times-circle" }) })] }));
+                } }), debouncedValue && (_jsx(ClearButton, { className: "close-icon", children: _jsx(Button, { icon: _jsx(Icon, { name: "Close" }), tooltip: { overlay: 'Reset' }, onClick: reset }) }))] }));
 });
 export { SearchInput };

package/dist/components/sidebar/Sidebar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":";AAcA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAsIF,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eAgEP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":";AAaA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAwIF,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eA8DP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/sidebar/Sidebar.component.js

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import styled, { css } from 'styled-components';
 import { fontSize, zIndex, sidebarWidth, sidebarItemHeight, } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
-import { Button } from '../button/Button.component';
+import { Button } from '../buttonv2/Buttonv2.component';
 import { Icon } from '../icon/Icon.component';
 import { spacing } from '../../spacing';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
@@ -19,7 +18,8 @@ const Wrapper = styled.div `
       }
     `;
 }}
-
+  margin-top: 1px;
+  border-right: 1px solid ${(props) => props.theme.backgroundLevel3};
   ${(props) => {
     if (props.expanded) {
         return css `
@@ -68,9 +68,10 @@ const SidebarContainer = styled.div `
 
   .sc-button {
     border-radius: 0;
-    background-color: ${getThemePropSelector('backgroundLevel1')};
+    background-color: ${(props) => props.theme.backgroundLevel1};
+    color: ${(props) => props.theme.textPrimary};
     &:hover {
-      background-color: ${getThemePropSelector('highlight')};
+      background-color: ${(props) => props.theme.highlight};
     }
     &:focus-visible {
       ${FocusVisibleStyle}
@@ -125,7 +126,7 @@ const MenuItemSelected = styled.div `
   width: 3px;
   height: 100%;
   right: 0;
-  background-color: ${getThemePropSelector('selectedActive')};
+  background-color: ${(props) => props.theme.selectedActive};
 `;
 const MenuItemIcon = styled.div `
   width: ${sidebarWidth};
@@ -136,7 +137,7 @@ const MenuItemIcon = styled.div `
 `;
 function Sidebar({ expanded, actions, onToggleClick, hoverable, ...rest }) {
     const [hovered, setHovered] = useState(false);
-    return (_jsx(Wrapper, { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), hoverable: hoverable, hovered: hovered, expanded: expanded, children: _jsxs(SidebarContainer, { expanded: expanded, className: "sc-sidebar", hoverable: hoverable, hovered: hovered, ...rest, children: [onToggleClick && (_jsx(MenuItemIcon, { children: _jsx(Button, { size: "larger", variant: "backgroundLevel1", icon: _jsx(Icon, { name: "Lat-menu" }), onClick: () => {
+    return (_jsx(Wrapper, { onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), hoverable: hoverable, hovered: hovered, expanded: expanded, children: _jsxs(SidebarContainer, { expanded: expanded, className: "sc-sidebar", hoverable: hoverable, hovered: hovered, ...rest, children: [onToggleClick && (_jsx(MenuItemIcon, { children: _jsx(Button, { icon: _jsx(Icon, { size: "lg", name: "Lat-menu" }), onClick: () => {
                             setHovered(false);
                             onToggleClick();
                         } }) })), actions.map(({ active, label, onClick, icon = null, ...actionRest }, index) => {

package/dist/components/tablev2/Search.d.ts

@@ -16,7 +16,7 @@ export type SearchProps = {
     displayedName: DisplayedName;
     locale?: TableLocalType;
     totalCount?: number;
-} & Omit<Props, 'disableToggle'>;
+} & Omit<Props, 'disableToggle' | 'onChange'>;
 export declare const TableItemCount: ({ entity, count, locale, }: {
     entity: {
         singular: string;

package/dist/components/tablev2/Search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;AA0BjC,eAAO,MAAM,cAAc;YAKjB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;WACrC,MAAM;YACL,IAAI,GAAG,IAAI;iBAapB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,eAsC7C"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,CAAC;AA0B9C,eAAO,MAAM,cAAc;YAKjB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;WACrC,MAAM;YACL,IAAI,GAAG,IAAI;iBAapB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,eAuC7C"}

package/dist/components/tablev2/Search.js

@@ -40,7 +40,7 @@ export function TableSearch(props) {
     React.useEffect(() => {
         setGlobalFilter(value);
     }, [value, setGlobalFilter, preGlobalFilteredRows]);
-    return (_jsxs(SearchContainer, { children: [displayTotalOf && (_jsx(TableItemCount, { entity: displayedName, count: totalDispayedRows, locale: locale })), _jsx(SearchInput, { value: value, placeholder: translations[locale].search, disableToggle: true, onChange: (evt) => {
+    return (_jsxs(SearchContainer, { children: [displayTotalOf && (_jsx(TableItemCount, { entity: displayedName, count: totalDispayedRows, locale: locale })), _jsx(SearchInput, { value: value, placeholder: translations[locale].search, disableToggle: true, size: "2/3", onChange: (evt) => {
                     if (typeof onChange === 'function') {
                         // @ts-ignore
                         onChange(evt.target.value);

package/dist/components/tablev2/SearchWithQueryParams.d.ts

@@ -2,6 +2,6 @@
 import { SearchProps } from './Search';
 export type SearchWithQueryParamsProps = {
     queryParams?: string;
-} & SearchProps;
-export declare function SearchWithQueryParams(props: any): JSX.Element;
+} & Omit<SearchProps, 'onChange' | 'value'> & Partial<Pick<SearchProps, 'onChange'>>;
+export declare function SearchWithQueryParams(props: SearchWithQueryParamsProps): JSX.Element;
 //# sourceMappingURL=SearchWithQueryParams.d.ts.map

package/dist/components/tablev2/SearchWithQueryParams.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/SearchWithQueryParams.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAyB,WAAW,EAAE,MAAM,UAAU,CAAC;AAE9D,MAAM,MAAM,0BAA0B,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,WAAW,CAAC;AAEhB,wBAAgB,qBAAqB,CAAC,KAAK,KAAA,eA6B1C"}
+{"version":3,"file":"SearchWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/SearchWithQueryParams.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAyB,WAAW,EAAE,MAAM,UAAU,CAAC;AAE9D,MAAM,MAAM,0BAA0B,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,CAAC,GACzC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;AAEzC,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eA6BtE"}

package/dist/components/tablev2/SearchWithQueryParams.js

@@ -7,7 +7,7 @@ export function SearchWithQueryParams(props) {
     const { search, pathname } = useLocation();
     const history = useHistory();
     const params = new URLSearchParams(search);
-    const initialValue = params.get(queryParams);
+    const initialValue = params.get(queryParams) || '';
     const [value, setValue] = useState(initialValue);
     function handleOnChange(value) {
         const { onChange } = props;

package/dist/components/tablev2/Tablestyle.js

@@ -35,8 +35,8 @@ export const HeadRow = styled.div `
   align-items: center;
   height: 2.286rem;
   width: ${(props) => props.hasScrollBar
-    ? `calc(100% - ${props.scrollBarWidth}px - ${borderSize} )!important;` // -4px for border
-    : `calc(100% - ${borderSize} ) !important;`}
+    ? `calc(100% - ${props.scrollBarWidth}px - ${borderSize} )!important` // -4px for border
+    : `calc(100% - ${borderSize} ) !important`};
   height: ${(props) => tableRowHeight[props.rowHeight]}rem;
   table-layout: fixed;
   color: ${(props) => props.theme.textPrimary};

package/dist/components/vegachartv2/VegaChartV2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VegaChartV2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachartv2/VegaChartV2.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,IAAI,MAAM,MAAM,CAAC;AAM7B,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,GAAG,EACV,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,EACnC,QAAQ,EAAE,MAAM,KACb,MAAM,CAAC;CACb,CAAC;AA0PF,eAAO,MAAM,SAAS,gFAAsC,CAAC"}
+{"version":3,"file":"VegaChartV2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachartv2/VegaChartV2.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,IAAI,MAAM,MAAM,CAAC;AAK7B,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,GAAG,EACV,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,EACnC,QAAQ,EAAE,MAAM,KACb,MAAM,CAAC;CACb,CAAC;AA8PF,eAAO,MAAM,SAAS,gFAAsC,CAAC"}

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

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-nocheck
-import React, { useEffect, useContext, useRef, useLayoutEffect, useMemo, } from 'react';
+import React, { useEffect, useRef, useLayoutEffect, useMemo } from 'react';
 import * as vega from 'vega';
 import vegaEmbed from 'vega-embed';
-import { ThemeContext, createGlobalStyle } from 'styled-components';
-import { getThemePropSelector } from '../../utils';
+import { createGlobalStyle, css, useTheme } from 'styled-components';
 import { useCursorX, SyncedCursorChartsContext } from './SyncedCursorCharts';
 import { TooltipHandlerWithPaint } from '../linetemporalchart/tooltip';
 export const TOP = 'top';
@@ -14,68 +13,70 @@ https://github.com/vega/vega-tooltip/blob/master/docs/customizing_your_tooltip.m
 */
 const VegaTooltipTheme = createGlobalStyle `
   #vg-tooltip-element.vg-tooltip.custom-theme {
-    padding: 8px;
-    position: fixed;
-    z-index: 1000;
-    width: calc(100vw/6);
-    font-family: 'Lato';
-    font-size: 12px;
-    border-radius: 3px;
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
-    color: ${getThemePropSelector('textPrimary')};
-    background-color: ${getThemePropSelector('backgroundLevel1')};
-    border: 1px solid ${getThemePropSelector('border')};
-    // customize the title
-    h2 {
-      color: ${getThemePropSelector('textPrimary')};
-      margin-bottom: 10px;
-      font-size: 12px;
-    }
-    table {
-      width: 100%;
-    }
-    table tr td.key {
-      color: ${getThemePropSelector('textSecondary')};
-    }
+    ${(props) => {
+    const { theme } = props;
+    return css `
+        padding: 8px;
+        position: fixed;
+        z-index: 1000;
+        width: calc(100vw / 6);
+        font-family: 'Lato';
+        font-size: 12px;
+        border-radius: 3px;
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+        color: ${theme.textPrimary};
+        background-color: ${theme.backgroundLevel1};
+        border: 1px solid ${theme.border};
+        // customize the title
+        h2 {
+          color: ${theme.textPrimary};
+          margin-bottom: 10px;
+          font-size: 12px;
+        }
+        table {
+          width: 100%;
+        }
+        table tr td.key {
+          color: ${theme.textSecondary};
+        }
+      `;
+}}
+    
   }
 `;
 function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', formatTooltip, onHover, }, ref) {
     // $FlowFixMe
     const { cursorX, setCursorX } = useCursorX();
-    const themeContext = useContext(ThemeContext);
-    // the background color of the view
-    const seriesBackgroundColor = themeContext && themeContext.brand
-        ? themeContext.brand.backgroundLevel1
-        : themeContext.backgroundLevel1;
-    const brandText = themeContext && themeContext.brand
-        ? themeContext.brand.textPrimary
-        : themeContext.textPrimary;
+    const currentTheme = useTheme();
     const themeConfig = {
         config: {
-            background: 'transparent',
+            background: currentTheme.backgroundLevel1,
             axis: {
-                labelColor: brandText,
-                titleColor: brandText,
+                labelColor: currentTheme.textSecondary,
+                titleColor: currentTheme.textSecondary,
                 grid: false,
                 domainColor: 'transparent',
             },
             title: {
-                color: brandText,
+                color: currentTheme.buttonDelete,
                 font: 'Lato',
             },
             view: {
                 stroke: 'transparent',
-                fill: seriesBackgroundColor,
+                fill: currentTheme.backgroundLevel1,
             },
             // the headers provide a title and labels for faceted plots.
             header: {
-                labelColor: brandText,
+                labelColor: currentTheme.textPrimary,
             },
             // the label of max/min
             text: {
-                color: brandText,
+                color: currentTheme.textPrimary,
                 font: 'Lato',
             },
+            legend: {
+                labelColor: currentTheme.textSecondary,
+            },
         },
     };
     const themedSpec = { ...spec, ...themeConfig };
@@ -149,7 +150,7 @@ function VegaChartInternal({ spec, tooltipPosition = BOTTOM, theme = 'custom', f
                 vegaInstance.current.view.finalize();
             }
         }; // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [vegaDOMInstance]);
+    }, [vegaDOMInstance, currentTheme]);
     useLayoutEffect(() => {
         if (vegaInstance.current) {
             const view = vegaInstance.current.view;
@@ -211,6 +212,7 @@ 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/dist/icons/branding-logo.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const Logo: () => JSX.Element;
+export { Logo };
+//# sourceMappingURL=branding-logo.d.ts.map

package/dist/icons/branding-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"branding-logo.d.ts","sourceRoot":"","sources":["../../src/lib/icons/branding-logo.tsx"],"names":[],"mappings":";AAEA,QAAA,MAAM,IAAI,mBA0CT,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/icons/branding-logo.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Logo = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "49", height: "49", viewBox: "0 0 49 49", children: [_jsx("path", { fill: "#3d9bd6", d: "M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z" }), _jsx("path", { fill: "#007664", d: "M21.25 4.42v7.25h3.99V4.33l5.16 2.92 2-3.36L27.14.97A7.7 7.7 0 0 0 23.15 0c-1.36 0-2.72.35-3.89 1.06L14 3.98l1.99 3.36z" }), _jsx("path", { fill: "#ee4642", d: "M21.16 44.25V37h3.99v7.25l5.16-2.92 2 3.36-5.17 2.92a7.9 7.9 0 0 1-7.88 0L14 44.69l1.99-3.36z" }), _jsx("path", { fill: "#2aad8e", d: "M40.43 13.28L34 16.9l1.99 3.36 6.44-3.62v5.83h3.99v-5.92c0-1.33-.37-2.65-1.09-3.8a8.82 8.82 0 0 0-2.9-2.83L37.17 7l-1.99 3.36z" }), _jsx("path", { fill: "#d71d4f", d: "M4.99 32.84l6.43-3.63 2 3.36-6.44 3.63 5.17 2.91-2 3.36-5.25-2.92a7.6 7.6 0 0 1-2.81-2.82A7.1 7.1 0 0 1 1 32.92V27h3.99z" }), _jsx("path", { fill: "#9e2569", d: "M4.08 16.64l6.43 3.62 2-3.36-6.44-3.62 5.17-2.92-2-3.36-5.25 2.92a8.72 8.72 0 0 0-2.9 2.83A7.16 7.16 0 0 0 0 16.64v5.92h3.99z" }), _jsx("path", { fill: "#f79836", d: "M40.34 36.2L34 32.57l1.99-3.36 6.44 3.63V27h3.99v5.92c0 1.33-.37 2.57-1.09 3.81a8.69 8.69 0 0 1-2.9 2.82l-5.26 2.92-1.99-3.36z" }), _jsx("path", { fill: "#007664", d: "M24 15v8.22l7.34-4.06z" }), _jsx("path", { fill: "#9e2569", d: "M23.25 15L16 19.16l7.25 4.06z" }), _jsx("path", { fill: "#d71d4f", d: "M22.25 25.07L15 21v8.13z" }), _jsx("path", { fill: "#2aad8e", d: "M24 24.98l7.25 4.07V21z" }), _jsx("path", { fill: "#ee4642", d: "M23.16 26L16 30.07l7.16 4.15z" }), _jsx("path", { fill: "#f79836", d: "M24 26v8.22l7.25-4.15z" })] }));
+export { Logo };