@scality/core-ui 0.115.0

package/dist/components/box/Box.d.ts

@@ -0,0 +1,9 @@
+import type { LayoutProps, FlexboxProps, ColorProps, SpaceProps, PositionProps, GridProps, BackgroundProps, BordersProps, TypographyProps, ShadowProps } from 'styled-system';
+export type BoxComponentProps = LayoutProps & FlexboxProps & GridProps & SpaceProps & PositionProps & ColorProps & BackgroundProps & BordersProps & TypographyProps & ShadowProps & {
+    gap?: string | number;
+};
+declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & BordersProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    gap?: string | number | undefined;
+}, never>;
+export { Box };
+//# sourceMappingURL=Box.d.ts.map

package/dist/components/box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/lib/components/box/Box.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EACZ,UAAU,EACV,UAAU,EACV,aAAa,EACb,SAAS,EACT,eAAe,EACf,YAAY,EACZ,eAAe,EACf,WAAW,EACZ,MAAM,eAAe,CAAC;AAEvB,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,YAAY,GACZ,SAAS,GACT,UAAU,GACV,aAAa,GACb,UAAU,GACV,eAAe,GACf,YAAY,GACZ,eAAe,GACf,WAAW,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAE1C,QAAA,MAAM,GAAG;;SAiBR,CAAC;AACF,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/box/Box.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { layout, flexbox, grid, space, position, color, background, border, typography, shadow, system, } from 'styled-system';
+const Box = styled.div `
+  ${layout}
+  ${flexbox}
+  ${grid}
+  ${space}
+  ${position}
+  ${color}
+  ${background}
+  ${border}
+  ${typography}
+  ${shadow}
+  ${system({
+    gap: {
+        property: 'gap',
+        scale: 'space',
+    },
+})}
+`;
+export { Box };

package/dist/components/breadcrumb/Breadcrumb.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    paths: Array<JSX.Element>;
+};
+declare const Breadcrumb: ({ paths, ...rest }: Props) => JSX.Element;
+export { Breadcrumb };
+//# sourceMappingURL=Breadcrumb.component.d.ts.map

package/dist/components/breadcrumb/Breadcrumb.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/breadcrumb/Breadcrumb.component.tsx"],"names":[],"mappings":";AAKA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;CAC3B,CAAC;AAuEF,QAAA,MAAM,UAAU,uBAA6B,KAAK,gBAoBjD,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/breadcrumb/Breadcrumb.component.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ellipsis } from 'polished';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize } from '../../style/theme';
+import { Icon } from '../icon/Icon.component';
+const BreadcrumbContainer = styled.ol `
+  display: flex;
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0;
+  overflow-y: auto;
+`;
+const BreadcrumbItem = styled.li `
+  box-sizing: border-box;
+  height: 100%;
+  font-size: ${fontSize.larger};
+  ${ellipsis('250px')}
+  min-width: 3rem;
+
+  ${(props) => {
+    const { textPrimary, selectedActive, textLink } = props.theme;
+    if (props.active) {
+        return css `
+        * {
+          text-decoration: none;
+          color: ${textPrimary};
+        }
+        color: ${textPrimary};
+      `;
+    }
+    return css `
+      * {
+        text-decoration: none;
+        color: ${textLink};
+      }
+      color: ${textLink};
+      border-bottom: 2px solid transparent;
+      &:hover {
+        * {
+          color: ${selectedActive};
+        }
+        color: ${selectedActive};
+        border-bottom: 2px solid ${selectedActive};
+      }
+    `;
+}}
+`;
+const BreadcrumbSeparator = styled.li `
+  ${(props) => css `
+    color: ${props.theme.textPrimary};
+    padding: ${spacing.r4} ${spacing.r8};
+    display: flex;
+    align-items: center;
+    font-size: ${fontSize.small};
+  `}
+`;
+const withBreadcrumbSeparator = (lastIndex) => (acc, item, index) => {
+    const notLast = index < lastIndex;
+    return notLast
+        ? [
+            ...acc,
+            item,
+            _jsx(BreadcrumbSeparator, { className: "sc-breadcrumb_separator", children: _jsx(Icon, { name: "Chevron-right" }) }, `sc-breadcrumb_separator_${index}`),
+        ]
+        : [...acc, item];
+};
+const Breadcrumb = ({ paths = [], ...rest }) => {
+    const lastIndex = paths.length - 1;
+    const breadcrumbItems = paths
+        .map((item, index) => {
+        return (_jsx(BreadcrumbItem, { className: "sc-breadcrumb_item", active: index === lastIndex, children: item }, `sc-breadcrumb_item_${index}`));
+    })
+        .reduce(withBreadcrumbSeparator(lastIndex), []);
+    return (_jsx(BreadcrumbContainer, { className: "sc-breadcrumb", ...rest, children: breadcrumbItems }));
+};
+export { Breadcrumb };

package/dist/components/button/Button.component.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { Size } from '../constants';
+type Props = {
+    text?: string;
+    size?: Size;
+    variant?: 'buttonPrimary' | 'buttonSecondary' | 'buttonDelete' | 'backgroundLevel1';
+    outlined?: boolean;
+    inverted?: boolean;
+    disabled?: boolean;
+    icon?: JSX.Element;
+    href?: string;
+    title?: string;
+    type?: string;
+    isLoading?: boolean;
+    onClick?: (arg0: any) => void;
+};
+export declare const ButtonStyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const ButtonIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const ButtonText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const ButtonContent: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+/**
+ * @deprecated
+ * You should use ButtonV2 with
+ * import { Button } from '@scality/core-ui/dist/next';
+ */
+declare function Button({ text, href, icon, size, variant, outlined, disabled, onClick, title, isLoading, type, inverted, ...rest }: Props): JSX.Element;
+export { Button };
+//# sourceMappingURL=Button.component.d.ts.map

package/dist/components/button/Button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/button/Button.component.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IAIZ,OAAO,CAAC,EACJ,eAAe,GACf,iBAAiB,GACjB,cAAc,GACd,kBAAkB,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,YAAY,4GA+LxB,CAAC;AACF,eAAO,MAAM,UAAU,0GAStB,CAAC;AACF,eAAO,MAAM,UAAU,0GAItB,CAAC;AACF,eAAO,MAAM,aAAa,0GAEzB,CAAC;AAGF;;;;GAIG;AACH,iBAAS,MAAM,CAAC,EACd,IAAS,EACT,IAAS,EACT,IAAW,EACX,IAAa,EACb,OAAyB,EACzB,QAAgB,EAChB,QAAgB,EAChB,OAAO,EACP,KAAU,EACV,SAAiB,EACjB,IAAe,EACf,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,KAAK,eAgDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/button/Button.component.js

@@ -0,0 +1,227 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+// Legacy Button should not be use anymore
+import { lighten } from 'polished';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight, white } from '../../style/theme';
+import { Loader } from '../loader/Loader.component';
+export const ButtonStyled = styled.button `
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+  display: inline-flex;
+  user-select: none;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  text-decoration: none;
+  font-weight: ${fontWeight.base};
+
+  &:hover,
+  &:focus,
+  &:active {
+    outline: none;
+    cursor: pointer;
+  }
+
+  ${(props) => {
+    switch (props.size) {
+        case 'smaller':
+            return css `
+          padding: 7px 14px;
+          font-size: ${fontSize.smaller};
+          border-radius: 4px;
+          height: 27px;
+        `;
+        case 'small':
+            return css `
+          padding: 8px 16px;
+          font-size: ${fontSize.small};
+          border-radius: 5px;
+          height: 30px;
+        `;
+        case 'large':
+            return css `
+          padding: 10px 20px;
+          font-size: ${fontSize.large};
+          border-radius: 7px;
+          height: 40px;
+        `;
+        case 'larger':
+            return css `
+          padding: 11px 22px;
+          font-size: ${fontSize.larger};
+          border-radius: 8px;
+          height: 48px;
+        `;
+        case 'base':
+        default:
+            return css `
+          padding: 12px 16px;
+          font-size: ${fontSize.base};
+          border-radius: 6px;
+          height: 32px;
+        `;
+    }
+}}
+
+  ${(props) => {
+    if (props.isLoading) {
+        return css `
+        > span {
+          display: flex;
+          .sc-loader {
+            margin: 0px ${spacing.r4};
+            svg {
+              fill: ${props.theme.textPrimary} !important;
+            }
+          }
+        }
+      `;
+    }
+    if (props.outlined) {
+        return css `
+        border-width: 1px;
+        border-style: solid;
+        border-color: ${props.theme.buttonSecondary};
+        // to be checked
+        background-color: ${props.theme.backgroundLevel1};
+        color: ${props.theme.textPrimary};
+
+        &:hover {
+          border-color: ${props.theme.infoPrimary};
+          color: ${props.theme.textPrimary};
+        }
+      `;
+    }
+    else if (props.variant === 'buttonPrimary') {
+        return css `
+        background-color: ${props.theme.buttonPrimary};
+        border: 1px solid ${props.theme.buttonPrimary};
+        color: ${props.theme.textPrimary};
+        &:hover {
+          background-color: ${props.theme.highlight};
+          outline: none;
+          border: 1px solid ${props.theme.infoPrimary};
+        }
+      `;
+    }
+    else if (props.variant === 'buttonSecondary') {
+        return css `
+        background-color: ${props.theme.buttonSecondary};
+        border: 1px solid ${props.theme.buttonSecondary};
+        color: ${props.theme.textPrimary};
+        &:hover {
+          background-color: ${props.theme.infoPrimary};
+          border: 1px solid ${props.theme.infoPrimary};
+        }
+      `;
+    }
+    else if (props.variant === 'buttonDelete') {
+        return css `
+        background-color: ${props.theme.buttonDelete};
+        border: 1px solid ${props.theme.buttonDelete};
+        color: ${props.theme.statusCritical};
+        &:hover {
+          background-color: ${props.theme.statusCritical};
+          border: 1px solid ${props.theme.infoPrimary};
+          color: ${props.theme.textPrimary};
+        }
+      `;
+    }
+    else if (props.variant === 'backgroundLevel1') {
+        return css `
+        background-color: ${props.theme.backgroundLevel1};
+        color: ${props.theme.textPrimary};
+        &:hover {
+          background-color: ${props.theme.highlight};
+        }
+      `;
+    }
+    else {
+        return css `
+        background-color: ${props.theme.backgroundLevel1};
+        border: 1px solid ${props.theme.backgroundLevel1};
+        color: ${props.theme.statusCritical};
+        &:hover {
+          background-color: ${props.theme.backgroundLevel1};
+          border: 1px solid ${props.theme.infoPrimary};
+          color: ${props.theme.textPrimary};
+        }
+      `;
+    }
+}}
+
+${(props) => {
+    const brandLighter = lighten(0.2, props.theme[props.variant]).toString();
+    return css `
+      ${props.disabled
+        ? `
+          box-shadow: none;
+          pointer-events: none;
+          opacity: 0.3;
+          border-color: ${brandLighter};
+          color: ${white};
+        `
+        : null}
+    `;
+}}
+
+${(props) => {
+    const brandLighter = lighten(0.2, props.theme[props.variant]).toString();
+    const brandLight = lighten(0.1, props.theme[props.variant]).toString();
+    return css `
+      ${!props.text && props.icon && props.inverted
+        ? `
+        padding: 0;
+        height: auto;
+        border: none;
+        background-color: transparent;
+        color: ${props.disabled ? brandLight : props.theme[props.variant]};
+
+        &:hover{
+          background-color: transparent;
+          color: ${brandLight};
+          border: none;
+        }
+
+        &:active {
+          background-color: transparent;
+          color: ${brandLighter};
+        }
+        `
+        : null}
+    `;
+}}
+`;
+export const ButtonIcon = styled.span `
+  ${(props) => props.text &&
+    css `
+      padding-right: 8px;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    `}
+`;
+export const ButtonText = styled.span `
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const ButtonContent = styled.span `
+  position: relative;
+`;
+const Anchor = ButtonStyled.withComponent('a');
+/**
+ * @deprecated
+ * You should use ButtonV2 with
+ * import { Button } from '@scality/core-ui/dist/next';
+ */
+function Button({ text = '', href = '', icon = null, size = 'base', variant = 'buttonPrimary', outlined = false, disabled = false, onClick, title = '', isLoading = false, type = 'button', inverted = false, ...rest }) {
+    return href && href.length ? (_jsxs(Anchor, { className: "sc-button", href: href, variant: variant, outlined: outlined, disabled: disabled, size: size, title: title, ...rest, children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), _jsx(ButtonText, { children: text })] })) : (_jsx(ButtonStyled, { className: "sc-button", variant: variant, outlined: outlined, disabled: disabled || isLoading, size: size, onClick: onClick, title: title, isLoading: isLoading, type: type, inverted: inverted, icon: icon, text: text, ...rest, children: _jsxs(ButtonContent, { children: [isLoading && _jsx(Loader, { size: size }), _jsxs("span", { className: "sc-button-text", children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), _jsx(ButtonText, { children: text })] })] }) }));
+}
+export { Button };

package/dist/components/buttonv2/Buttonv2.component.d.ts

@@ -0,0 +1,34 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import { Loader } from '../loader/Loader.component';
+import { Props as TooltipProps } from '../tooltip/Tooltip.component';
+export type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'label'> & {
+    variant?: 'primary' | 'secondary' | 'danger' | 'outline';
+    size?: 'default' | 'inline';
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    icon?: React.ReactNode;
+    label?: React.ReactNode;
+    tooltip?: Omit<TooltipProps, 'children'>;
+    isLoading?: boolean;
+};
+export declare const ButtonStyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "label" | "size"> & {
+    variant?: "outline" | "danger" | "primary" | "secondary" | undefined;
+    size?: "default" | "inline" | undefined;
+    disabled?: boolean | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+    icon?: React.ReactNode;
+    label?: React.ReactNode;
+    tooltip?: Omit<TooltipProps, "children"> | undefined;
+    isLoading?: boolean | undefined;
+}, never>;
+export declare const ButtonLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const ButtonIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    label: React.ReactNode;
+}, never>;
+export declare const ButtonLoader: import("styled-components").StyledComponent<typeof Loader, import("styled-components").DefaultTheme, {
+    label: any;
+    variant: any;
+}, never>;
+declare function Button({ variant, size, disabled, label, icon, onClick, tooltip, isLoading, ...rest }: Props): JSX.Element;
+export { Button };
+//# sourceMappingURL=Buttonv2.component.d.ts.map

package/dist/components/buttonv2/Buttonv2.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC9E,MAAM,MAAM,KAAK,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,YAAY;;;;uBANL,gBAAgB,CAAC,iBAAiB,CAAC,KAAK,IAAI;WACvD,MAAM,SAAS;YACd,MAAM,SAAS;;;SA6JxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,MAAM,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eAqDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -0,0 +1,198 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+import { Loader } from '../loader/Loader.component';
+import { Tooltip } from '../tooltip/Tooltip.component';
+export const ButtonStyled = styled.button `
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  user-select: none;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  text-decoration: none;
+  font-family: 'Lato';
+  font-weight: ${fontWeight.base};
+
+  padding: ${spacing.r4} ${spacing.r8};
+  font-size: ${fontSize.base};
+  border-radius: ${spacing.r4};
+  height: ${(props) => (props.size === 'inline' ? spacing.r24 : spacing.r32)};
+  ${(props) => {
+    const brand = props.theme;
+    switch (props.variant) {
+        case 'primary':
+            return css `
+          background-color: ${brand.buttonPrimary};
+          border: ${spacing.r1} solid ${brand.buttonPrimary};
+          color: ${brand.textSecondary};
+          &:hover:enabled {
+            cursor: pointer;
+            border: ${spacing.r1} solid ${brand.infoPrimary};
+            color: ${brand.textPrimary};
+          }
+          // :focus-visible is the keyboard-only version of :focus
+          &:focus-visible:enabled {
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
+            color: ${brand.textPrimary};
+          }
+          &:active:enabled {
+            cursor: pointer;
+            color: ${brand.textPrimary};
+            border: ${spacing.r1} solid ${brand.infoSecondary};
+          }
+        `;
+        case 'secondary':
+            return css `
+          background-color: ${brand.buttonSecondary};
+          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          color: ${brand.textSecondary};
+          &:hover:enabled {
+            cursor: pointer;
+            border: ${spacing.r1} solid ${brand.infoPrimary};
+            color: ${brand.textPrimary};
+          }
+          &:focus-visible:enabled {
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
+            color: ${brand.textPrimary};
+          }
+          &:active:enabled {
+            cursor: pointer;
+            color: ${brand.textPrimary};
+            border: ${spacing.r1} solid ${brand.buttonSecondary};
+          }
+        `;
+        case 'danger':
+            return css `
+          background-color: ${brand.buttonDelete};
+          border: ${spacing.r1} solid ${brand.buttonDelete};
+          color: ${brand.statusCritical};
+          &:hover:enabled {
+            cursor: pointer;
+            border: ${spacing.r1} solid ${brand.infoPrimary};
+          }
+          &:focus-visible:enabled {
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
+          }
+          &:active:enabled {
+            cursor: pointer;
+            border: ${spacing.r1} solid ${brand.infoSecondary};
+          }
+        `;
+        case 'outline':
+            return css `
+          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          background-color: transparent;
+          color: ${brand.textPrimary};
+          &:hover:enabled {
+            cursor: pointer;
+            border-color: ${brand.infoPrimary};
+            color: ${brand.textPrimary};
+          }
+          &:focus-visible:enabled {
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
+            border-color: ${brand.buttonSecondary};
+          }
+          &:active:enabled {
+            cursor: pointer;
+            border: ${spacing.r1} solid ${brand.infoSecondary};
+            color: ${brand.textPrimary};
+          }
+        `;
+        default:
+    }
+}}
+
+  ${(props) => {
+    return css `
+      ${props.disabled
+        ? `
+          cursor: not-allowed !important;
+          pointer-events: auto !important;
+          opacity: 0.5;
+        `
+        : null}
+    `;
+}}
+
+
+  ${(props) => {
+    const brand = props.theme;
+    return css `
+      ${props.icon && !props.label && !props.variant
+        ? `
+          background-color: transparent;
+          border: none;
+          color: ${brand.textSecondary};
+
+        &:hover{
+          cursor: pointer;
+          border: none;
+          color: ${brand.textPrimary};
+        }
+        &:focus-visible:enabled {
+          outline: dashed ${spacing.r2} ${brand.selectedActive};
+        }
+        &:active {
+          cursor: pointer;
+          color: ${brand.textPrimary};
+        }
+        `
+        : null}
+    `;
+}}
+`;
+export const ButtonLabel = styled.span `
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const ButtonIcon = styled.span `
+  ${(props) => props.label &&
+    css `
+      padding-right: ${spacing.r8};
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    `}
+`;
+export const ButtonLoader = styled(Loader) `
+  ${(props) => {
+    return css `
+      margin-right: ${props.label ? spacing.r8 : '0'};
+      svg {
+        fill: ${props.variant === 'danger'
+        ? props.theme.statusCritical
+        : props.variant === 'outline'
+            ? props.theme.textPrimary
+            : props.theme.textSecondary};
+      }
+    `;
+}}
+`;
+function Button({ variant, size, disabled, label, icon, onClick, tooltip, isLoading, ...rest }) {
+    if (!icon && !label) {
+        console.warn('Please specify either icon or label prop for the button component.');
+    }
+    if (!label && icon && !tooltip) {
+        console.warn('Please specify the tooltip for the standalone icon button.');
+    }
+    return (_jsx(Tooltip, { placement: tooltip ? tooltip.placement : undefined, overlay: tooltip && tooltip.overlay, overlayStyle: tooltip && tooltip.overlayStyle, children: _jsx(ButtonStyled, { className: "sc-button", variant: variant, disabled: isLoading || disabled, label: label, icon: icon, onClick: onClick, size: size, ...rest, children: _jsxs(_Fragment, { children: [icon &&
+                        (isLoading ? (_jsx(ButtonLoader, { size: "small", variant: variant, label: label })) : (_jsx(ButtonIcon, { label: label, "aria-label": tooltip &&
+                                tooltip.overlay &&
+                                typeof tooltip.overlay === 'string'
+                                ? tooltip.overlay
+                                : undefined, children: icon }))), !icon && isLoading && (_jsx(ButtonLoader, { size: "small", variant: variant, label: label })), _jsx(ButtonLabel, { children: label })] }) }) }));
+}
+export { Button };

package/dist/components/buttonv2/CopyButton.component.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { Props } from './Buttonv2.component';
+export declare const COPY_STATE_IDLE = "idle";
+export declare const COPY_STATE_SUCCESS = "success";
+export declare const COPY_STATE_UNSUPPORTED = "unsupported";
+export declare const useClipboard: () => {
+    copy: (text: any) => void;
+    copyStatus: string;
+};
+export declare const CopyButton: ({ label, textToCopy, variant, ...props }: {
+    label?: string | undefined;
+    textToCopy: string;
+    variant?: "outline" | "ghost" | undefined;
+} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "label" | "size"> & {
+    variant?: "outline" | "danger" | "primary" | "secondary" | undefined;
+    size?: "default" | "inline" | undefined;
+    disabled?: boolean | undefined;
+    onClick?: ((event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
+    icon?: import("react").ReactNode;
+    label?: import("react").ReactNode;
+    tooltip?: Omit<import("../tooltip/Tooltip.component").Props, "children"> | undefined;
+    isLoading?: boolean | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=CopyButton.component.d.ts.map

package/dist/components/buttonv2/CopyButton.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/CopyButton.component.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAU,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,eAAe,SAAS,CAAC;AACtC,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAC5C,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,YAAY;;;CAuBxB,CAAC;AAEF,eAAO,MAAM,UAAU;;gBAOT,MAAM;;;;;;;;;;;iBAiDnB,CAAC"}