@scality/core-ui 0.115.0

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Icon } from '../icon/Icon.component';
+import { Button } from './Buttonv2.component';
+export const COPY_STATE_IDLE = 'idle';
+export const COPY_STATE_SUCCESS = 'success';
+export const COPY_STATE_UNSUPPORTED = 'unsupported';
+export const useClipboard = () => {
+    const [copyStatus, setCopyStatus] = useState(COPY_STATE_IDLE);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setCopyStatus(COPY_STATE_IDLE);
+        }, 2000);
+        return () => clearTimeout(timer);
+    }, [copyStatus]);
+    const copyToClipboard = (text) => {
+        if (!navigator || !navigator.clipboard) {
+            setCopyStatus(COPY_STATE_UNSUPPORTED);
+            return;
+        }
+        navigator.clipboard.writeText(text);
+        setCopyStatus(COPY_STATE_SUCCESS);
+    };
+    return {
+        copy: copyToClipboard,
+        copyStatus: copyStatus,
+    };
+};
+export const CopyButton = ({ label, textToCopy, variant, ...props }) => {
+    const { copy, copyStatus } = useClipboard();
+    return (_jsx(Button, { ...props, variant: variant === 'outline' ? 'outline' : undefined, style: {
+            minWidth: 
+            //Just to make sure the width of the button stays the same when copied!
+            variant === 'outline'
+                ? (label ? label.length / 2 : 0) + 7 + 'rem'
+                : undefined,
+        }, label: variant === 'outline'
+            ? copyStatus === COPY_STATE_SUCCESS
+                ? `Copied${label ? ' ' + label + '' : ''}!`
+                : `Copy${label ? ' ' + label : ''}`
+            : undefined, icon: _jsx(Icon, { name: copyStatus === COPY_STATE_SUCCESS ? 'Check' : 'Copy', color: copyStatus === COPY_STATE_SUCCESS ? 'statusHealthy' : undefined }), disabled: copyStatus === COPY_STATE_SUCCESS || props.disabled, onClick: () => copy(textToCopy), type: "button", tooltip: variant !== 'outline'
+            ? {
+                overlay: copyStatus === COPY_STATE_SUCCESS
+                    ? 'Copied !'
+                    : `Copy${label ? ' ' + label : ''}`,
+                overlayStyle: {
+                    maxWidth: '20rem',
+                },
+                placement: 'top',
+            }
+            : undefined }));
+};

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

@@ -0,0 +1,28 @@
+import { HTMLProps } from 'react';
+type CardElementProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const CardHeader: ({ children, className, ...rest }: CardElementProps) => JSX.Element;
+export declare const CardBody: ({ children, className, ...rest }: CardElementProps) => JSX.Element;
+export declare const CardBodyContainer: ({ children, className, ...rest }: CardElementProps) => JSX.Element;
+type CardProps = {
+    width?: string;
+    height?: string;
+    headerBackgroundColor?: string;
+    bodyBackgroundColor?: string;
+    status?: 'healthy' | 'warning' | 'critical';
+    onClick?: () => void;
+    active?: boolean;
+    disabled?: boolean;
+    children: Node;
+    className?: string;
+} & HTMLProps<HTMLDivElement>;
+declare function Card({ width, height, headerBackgroundColor, bodyBackgroundColor, status, onClick, active, disabled, children, className, ...rest }: CardProps): JSX.Element;
+declare namespace Card {
+    var Header: ({ children, className, ...rest }: CardElementProps) => JSX.Element;
+    var Body: ({ children, className, ...rest }: CardElementProps) => JSX.Element;
+    var BodyContainer: ({ children, className, ...rest }: CardElementProps) => JSX.Element;
+}
+export { Card };
+//# sourceMappingURL=Card.component.d.ts.map

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

@@ -0,0 +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;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;AA6D5E,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"}

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

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+import styled from 'styled-components';
+import { hex2RGB } from '../../utils';
+const CardContext = createContext(null);
+function withCompoundCheck(Component) {
+    return ({ children, className, ...rest }) => (_jsx(CardContext.Consumer, { children: (value) => {
+            const componentName = Component.displayName;
+            if (!value) {
+                throw new Error(`${componentName ? componentName : 'This component'} cannot be rendered outside the Card component`);
+            }
+            return (_jsx(Component, { className: [
+                    componentName ? `sc-${componentName.toLowerCase()}` : null,
+                    className,
+                ].join(' '), ...rest, children: children }));
+        } }));
+}
+const StyledCardHeader = styled.div `
+  padding: 0.7rem;
+  border-radius: 3px;
+  font-weight: bold;
+`;
+StyledCardHeader.displayName = 'CardHeader';
+const StyledCardBody = styled.div `
+  padding: 0.7rem 0;
+  color: ${(props) => props.theme.textPrimary};
+`;
+StyledCardBody.displayName = 'CardBody';
+const StyledCardBodyContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+`;
+StyledCardBodyContainer.displayName = 'CardBodyContainer';
+export const CardHeader = withCompoundCheck(StyledCardHeader);
+export const CardBody = withCompoundCheck(StyledCardBody);
+export const CardBodyContainer = withCompoundCheck(StyledCardBodyContainer);
+const StyledCard = styled.div `
+  border-radius: 3px;
+  display: flex;
+  flex-flow: column;
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  background: ${(props) => props.theme[props.bodyBackgroundColor || 'backgroundLevel3']};
+
+  ${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});`;
+}}
+    ${(props) => props.disabled && 'opacity: 0.3;'}
+  }
+
+  ${(props) => props.onClick && !props.disabled
+    ? `
+      cursor: pointer;
+
+      &:hover {
+        box-shadow: 0 0 0 2px ${props.theme.highlight};
+      }
+
+      &:focus {
+        outline: 2px solid ${props.theme.buttonSecondary};
+        outline-offset: 2px;
+      }
+    `
+    : ''};
+
+  &.active {
+    box-shadow: 0 0 0 1px
+      ${(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 }) {
+    let colorStatus = null;
+    if (status) {
+        colorStatus =
+            status === 'healthy'
+                ? 'backgroundLevel4'
+                : '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 &&
+                    (event.key === ' ' ||
+                        event.key === 'Enter' ||
+                        event.key === 'Spacebar')) {
+                    event.preventDefault();
+                    onClick();
+                }
+            }, ...rest, children: children }) }));
+}
+Card.Header = CardHeader;
+Card.Body = CardBody;
+Card.BodyContainer = CardBodyContainer;
+export { Card };

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

@@ -0,0 +1,10 @@
+import { ChangeEvent, InputHTMLAttributes } from 'react';
+declare const Checkbox: import("react").ForwardRefExoticComponent<{
+    label?: string | undefined;
+    value?: string | undefined;
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
+} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+export { Checkbox };
+//# sourceMappingURL=Checkbox.component.d.ts.map

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

@@ -0,0 +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;AAcrE,QAAA,MAAM,QAAQ;;;;;oBAHG,YAAY,gBAAgB,CAAC,KAAK,IAAI;4FA0BtD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { spacing, Stack } from '../../spacing';
+import { Text } from '../text/Text.component';
+const Checkbox = forwardRef(({ disabled, checked, label, value, onChange, ...rest }, ref) => {
+    return (_jsx(StyledCheckbox, { checked: checked, disabled: disabled, className: "sc-checkbox", children: _jsxs(Stack, { children: [_jsx("input", { type: "checkbox", checked: checked, disabled: disabled, value: value, onChange: onChange, ref: ref, ...rest }), label && _jsx(Text, { children: label })] }) }));
+});
+export { Checkbox };
+const StyledCheckbox = styled.label `
+  ${(props) => (props.disabled ? 'opacity: 0.5;' : '')}
+  /* Basic styling */
+
+  [type='checkbox'] {
+    width: 0.75rem;
+    height: 0.75rem;
+    color: ${(props) => props.theme.textPrimary};
+    vertical-align: middle;
+    -webkit-appearance: none;
+    background: none;
+    border: 0;
+    outline: 0;
+    flex-grow: 0;
+    border-radius: ${spacing.r2};
+    background-color: ${(props) => props.theme.backgroundLevel1};
+    transition: background 300ms;
+    cursor: pointer;
+  }
+
+  /* Pseudo element for check styling */
+
+  [type='checkbox']::before {
+    content: '';
+    color: transparent;
+    display: block;
+    width: inherit;
+    height: inherit;
+    border-radius: inherit;
+    border: 0;
+    background-color: transparent;
+    background-size: contain;
+    box-shadow: inset 0 0 0 ${spacing.r1}
+      ${(props) => props.theme.textSecondary};
+  }
+
+  /* Checked */
+
+  [type='checkbox']:checked {
+    background-color: ${(props) => props.theme.selectedActive};
+  }
+
+  [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-repeat: no-repeat;
+    background-position: center;
+  }
+
+  /* Indeterminate */
+
+  [type='checkbox']:indeterminate::before {
+    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");
+  }
+
+  /* Hover & focus */
+  [type='checkbox']:hover {
+    ${(props) => !props.disabled && `background-color: ${props.theme.highlight};`}
+  }
+
+  [type='checkbox']:hover::before {
+    ${(props) => !props.disabled &&
+    `box-shadow: inset 0 0 0 ${spacing.r1} ${props.theme.selectedActive};`}
+  }
+
+  [type='checkbox']:focus-visible:enabled {
+    outline: dashed ${spacing.r2} ${(props) => props.theme.selectedActive};
+    outline-offset: ${spacing.r2};
+  }
+
+  /* Disabled */
+
+  [type='checkbox']:checked:disabled {
+    cursor: not-allowed;
+    background-color: ${(props) => props.theme.selectedActive};
+  }
+
+  [type='checkbox']:not(:checked):disabled {
+    cursor: not-allowed;
+    background-color: ${(props) => props.theme.textSecondary};
+  }
+`;

package/dist/components/chips/Chips.component.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Size } from '../constants';
+type Props = {
+    text: string;
+    variant?: 'statusHealthy' | 'statusWarning' | 'statusCritical' | 'infoPrimary' | 'infoSecondary';
+    icon?: JSX.Element;
+    onClick?: (arg0: any) => void;
+    onRemove?: (arg0: any) => void;
+    size?: Size;
+};
+export declare const ChipsIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    variant: any;
+    text: string;
+    size: Size;
+}, never>;
+export declare const ChipsText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    icon: any;
+    isRemovable: boolean;
+}, never>;
+declare const Chips: ({ text, variant, icon, onClick, onRemove, size, }: Props) => JSX.Element;
+export { Chips };
+//# sourceMappingURL=Chips.component.d.ts.map

package/dist/components/chips/Chips.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chips.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chips/Chips.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EACJ,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,aAAa,GACb,eAAe,CAAC;IACpB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AA0FF,eAAO,MAAM,SAAS;aACX,GAAG;UACN,MAAM;UACN,IAAI;SAOX,CAAC;AACF,eAAO,MAAM,SAAS;UAAuB,GAAG;iBAAe,OAAO;SAKrE,CAAC;AAEF,QAAA,MAAM,KAAK,sDAOR,KAAK,gBAgCP,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/chips/Chips.component.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lighten } from 'polished';
+import styled, { css } from 'styled-components';
+import { fontSize, grayLight, white } from '../../style/theme';
+import { Button } from '../button/Button.component';
+import { Icon } from '../icon/Icon.component';
+const ChipsContainer = styled.div `
+  display: inline-flex;
+  .sc-chips-remove {
+    padding-right: 10px;
+    color: ${white};
+    &:hover {
+      color: ${grayLight};
+    }
+  }
+  ${(props) => {
+    switch (props.size) {
+        case 'smaller':
+            return css `
+          border-radius: 10px;
+          .sc-chips-icon {
+            border-radius: 10px;
+            padding: 5px;
+          }
+        `;
+        case 'small':
+            return css `
+          border-radius: 12px;
+          .sc-chips-icon {
+            border-radius: 12px;
+            padding: 6px;
+          }
+        `;
+        case 'large':
+            return css `
+          border-radius: 14px;
+          .sc-chips-icon {
+            border-radius: 14px;
+            padding: 6px;
+          }
+        `;
+        case 'larger':
+            return css `
+          border-radius: 17px;
+          .sc-chips-icon {
+            border-radius: 17px;
+            padding: 7px;
+          }
+        `;
+        default:
+            return css `
+          border-radius: 12px;
+          .sc-chips-icon {
+            border-radius: 12px;
+            padding: 6px;
+          }
+        `;
+    }
+}}
+  ${(props) => {
+    const brand = props.theme;
+    return css `
+      color: ${brand.textReverse};
+    `;
+}}
+
+  ${(props) => {
+    const brand = props.theme;
+    const brandLight = lighten(0.1, brand[props.variant]).toString();
+    return props.onClick
+        ? css `
+          background-color: ${brand[props.variant]};
+          font-size: ${fontSize[props.size || 'base']};
+          &:hover {
+            cursor: pointer;
+            background-color: ${brandLight};
+          }
+          &:active {
+            background-color: ${brand[props.variant]};
+          }
+        `
+        : css `
+          background-color: ${brand[props.variant]};
+          font-size: ${fontSize[props.size || 'base']};
+        `;
+}}
+`;
+export const ChipsIcon = styled.span `
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(props) => lighten(0.15, props.theme[props.variant]).toString()};
+`;
+export const ChipsText = styled.span `
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${(props) => (props.icon || props.isRemovable ? '5px' : '5px 10px')};
+`;
+const Chips = ({ text = '', variant = 'infoPrimary', icon = undefined, onClick, onRemove, size = 'base', }) => (_jsxs(ChipsContainer, { className: "sc-chips", onClick: onClick, variant: variant, icon: icon, size: size, children: [icon && (_jsx(ChipsIcon, { className: "sc-chips-icon", text: text, variant: variant, size: size, children: icon })), _jsx(ChipsText, { className: "sc-chips-text", icon: icon, isRemovable: !!onRemove, children: text }), onRemove && (_jsx(Button
+        // @ts-ignore
+        , { 
+            // @ts-ignore
+            className: "sc-chips-remove", size: size, inverted: true, icon: _jsx(Icon, { name: "Close" }), onClick: onRemove }))] }));
+export { Chips };

package/dist/components/circularprogressbar/CircularProgressBar.component.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type Props = {
+    percent: number;
+    radius: number;
+    strokeWidth?: number;
+    title?: string;
+    color?: string;
+    backgroundColor?: string;
+    children?: JSX.Element;
+};
+declare function CircularProgressBar({ percent, radius, strokeWidth, title, color, backgroundColor, children, ...rest }: Props): JSX.Element;
+export { CircularProgressBar };
+//# sourceMappingURL=CircularProgressBar.component.d.ts.map

package/dist/components/circularprogressbar/CircularProgressBar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressBar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/circularprogressbar/CircularProgressBar.component.tsx"],"names":[],"mappings":";AAMA,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,WAAgB,EAChB,KAAK,EACL,KAAK,EACL,eAAe,EACf,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,KAAK,eA8BP;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/circularprogressbar/CircularProgressBar.component.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircularProgressBarContainer, Title, ProgressCircle, BackgroundCircle, } from './CircularProgressBar.component.style';
+function CircularProgressBar({ percent, radius, strokeWidth = 10, title, color, backgroundColor, children, ...rest }) {
+    const centerPointCoordinate = strokeWidth / 2 + radius;
+    const svgSize = centerPointCoordinate * 2;
+    const CIRCUMFERENCE = Math.PI * (radius * 2);
+    return (_jsxs(CircularProgressBarContainer, { className: "sc-circularprogressbar", ...rest, children: [title && _jsx(Title, { children: title }), _jsxs("svg", { width: svgSize, height: svgSize, children: [_jsx(BackgroundCircle, { cx: centerPointCoordinate, cy: centerPointCoordinate, backgroundColor: backgroundColor, r: radius, strokeWidth: strokeWidth }), _jsx(ProgressCircle, { percent: percent, color: color, circumference: CIRCUMFERENCE, cx: centerPointCoordinate, cy: centerPointCoordinate, r: radius, strokeWidth: strokeWidth, transform: `rotate(-90 ${centerPointCoordinate}  ${centerPointCoordinate})` }), children] })] }));
+}
+export { CircularProgressBar };

package/dist/components/circularprogressbar/CircularProgressBar.component.style.d.ts

@@ -0,0 +1,11 @@
+import { EmphaseText } from '../text/Text.component';
+export declare const CircularProgressBarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<typeof EmphaseText, import("styled-components").DefaultTheme, {}, never>;
+export declare const ProgressCircle: import("styled-components").StyledComponent<"circle", import("styled-components").DefaultTheme, {
+    circumference: number;
+    percent: number;
+}, never>;
+export declare const BackgroundCircle: import("styled-components").StyledComponent<"circle", import("styled-components").DefaultTheme, {
+    backgroundColor?: string | undefined;
+}, never>;
+//# sourceMappingURL=CircularProgressBar.component.style.d.ts.map

package/dist/components/circularprogressbar/CircularProgressBar.component.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressBar.component.style.d.ts","sourceRoot":"","sources":["../../../src/lib/components/circularprogressbar/CircularProgressBar.component.style.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,eAAO,MAAM,4BAA4B,yGAGxC,CAAC;AACF,eAAO,MAAM,KAAK,sHAKjB,CAAC;AACF,eAAO,MAAM,cAAc;mBACV,MAAM;aACZ,MAAM;SAShB,CAAC;AACF,eAAO,MAAM,gBAAgB;;SAI5B,CAAC"}

package/dist/components/circularprogressbar/CircularProgressBar.component.style.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { getThemePropSelector } from '../../utils';
+import { EmphaseText } from '../text/Text.component';
+export const CircularProgressBarContainer = styled.div `
+  display: inline-block;
+  color: ${getThemePropSelector('textPrimary')};
+`;
+export const Title = styled(EmphaseText) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${spacing.r8};
+`;
+export const ProgressCircle = styled.circle `
+  stroke-dasharray: ${({ circumference }) => circumference};
+  stroke-dashoffset: ${({ percent, circumference }) => ((100 - percent) / 100) * circumference};
+  stroke: ${(props) => props.color || props.theme.statusHealthy};
+  stroke-width: ${(props) => props.strokeWidth};
+  stroke-linecap: round;
+  fill: none;
+`;
+export const BackgroundCircle = styled.circle `
+  fill: none;
+  stroke: ${(props) => props.backgroundColor || props.theme.backgroundLevel1};
+  stroke-width: ${(props) => props.strokeWidth};
+`;

package/dist/components/cloudprogressbar/CloudProgressBar.component.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type CloudProgressBarProps = {
+    percentage: number;
+    borderSize: string;
+    cloudColor?: string;
+    progressCloudColor?: string;
+    children: JSX.Element;
+};
+declare const CloudProgressBar: ({ percentage, borderSize, cloudColor, progressCloudColor, children, }: CloudProgressBarProps) => JSX.Element;
+export { CloudProgressBar };
+//# sourceMappingURL=CloudProgressBar.component.d.ts.map

package/dist/components/cloudprogressbar/CloudProgressBar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloudProgressBar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/cloudprogressbar/CloudProgressBar.component.tsx"],"names":[],"mappings":";AAEA,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,CAAC;AA6EF,QAAA,MAAM,gBAAgB,0EAMnB,qBAAqB,gBAWvB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/cloudprogressbar/CloudProgressBar.component.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css, keyframes } from 'styled-components';
+import { coreUIAvailableThemes } from '../../style/theme';
+const keyFrameCloud = (props) => {
+    return keyframes `
+    from {
+      height:100%
+    } 
+    to {
+      height:${100 - props.percentage}%
+    }`;
+};
+const Container = styled.div `
+  ${(props) => {
+    return css `
+      text-align: center;
+      position: relative;
+    `;
+}}
+`;
+const ContainerProgress = styled.div `
+  ${(props) => {
+    return css `
+      animation-duration: 1s;
+      animation-fill-mode: both;
+      animation-name: ${keyFrameCloud};
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      overflow: hidden;
+    `;
+}}
+`;
+const Cloud = ({ strokeColor, borderSize }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 15 72 42", enableBackground: "new 0 0 72 72", children: _jsx("g", { children: _jsx("path", { fill: "none", stroke: strokeColor, strokeWidth: borderSize, strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10", d: "M15.9,30.3c0,0.4-0.4,0.8-0.8,0.8C10,31.6,6,36.7,6,42.9c0,6.6,4.5,11.9,10.2,11.9h38.7C61,54.8,66,49.1,66,42.2c0-6.6-4.6-12.1-10.4-12.5c-0.4,0-0.8-0.3-0.9-0.8c-1.3-6.7-7.3-11.7-14.3-11.7c-4.6,0-8.7,2.1-11.3,5.4C28.8,23,28.3,23.1,28,23c-1-0.4-2.1-0.6-3.3-0.6C20.1,22.3,16.3,25.8,15.9,30.3z" }) }) }));
+const CloudProgress = ({ strokeColor, percentage, borderSize }) => (_jsx(ContainerProgress, { percentage: percentage, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 15 72 42", enableBackground: "new 0 0 72 72", children: _jsx("g", { children: _jsx("path", { fill: "none", stroke: strokeColor, strokeWidth: borderSize, strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10", d: "M15.9,30.3c0,0.4-0.4,0.8-0.8,0.8C10,31.6,6,36.7,6,42.9c0,6.6,4.5,11.9,10.2,11.9h38.7C61,54.8,66,49.1,66,42.2c0-6.6-4.6-12.1-10.4-12.5c-0.4,0-0.8-0.3-0.9-0.8c-1.3-6.7-7.3-11.7-14.3-11.7c-4.6,0-8.7,2.1-11.3,5.4C28.8,23,28.3,23.1,28,23c-1-0.4-2.1-0.6-3.3-0.6C20.1,22.3,16.3,25.8,15.9,30.3z" }) }) }) }));
+const CloudProgressBar = ({ percentage = 0, borderSize = '2px', cloudColor = coreUIAvailableThemes.darkRebrand.statusHealthy, progressCloudColor = coreUIAvailableThemes.darkRebrand.backgroundLevel1, children, }) => (_jsxs(Container, { className: "sc-cloudprogressbar", children: [_jsx(Cloud, { strokeColor: progressCloudColor, borderSize: borderSize }), _jsx(CloudProgress, { strokeColor: cloudColor, percentage: percentage, borderSize: borderSize }), children] }));
+export { CloudProgressBar };

package/dist/components/collapsiblepanel/CollapsiblePanel.component.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type Props = {
+    expanded: boolean;
+    onHeaderClick: (arg0: any) => void;
+    children: React.ReactNode;
+    headerItems: Array<JSX.Element>;
+};
+declare function CollapsiblePanel({ expanded, onHeaderClick, children, headerItems, }: Props): JSX.Element;
+export { CollapsiblePanel };
+//# sourceMappingURL=CollapsiblePanel.component.d.ts.map

package/dist/components/collapsiblepanel/CollapsiblePanel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsiblePanel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/collapsiblepanel/CollapsiblePanel.component.tsx"],"names":[],"mappings":";AAIA,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAqCF,iBAAS,gBAAgB,CAAC,EACxB,QAAgB,EAChB,aAAa,EACb,QAAQ,EACR,WAAgB,GACjB,EAAE,KAAK,eAuBP;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/collapsiblepanel/CollapsiblePanel.component.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize } from '../../style/theme';
+import { Icon } from '../icon/Icon.component';
+const ARROW = {
+    colapsed: 'fas fa-angle-down',
+    expanded: 'fas fa-angle-up',
+};
+const HeaderText = styled.div `
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+`;
+const HeaderItem = styled.div `
+  margin-right: ${spacing.r16};
+  display: flex;
+  flex-grow: 1;
+`;
+const HeaderIcon = styled.div `
+  font-size: ${fontSize.larger};
+  margin: 0 ${spacing.r16};
+`;
+const CollapsiblePanelContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  background-color: ${(props) => props.theme.backgroundLevel1};
+  color: ${(props) => props.theme.textPrimary};
+`;
+const HeaderContainer = styled.div `
+  display: flex;
+  cursor: pointer;
+  padding: ${spacing.r16};
+`;
+const ExpandedContainer = styled.div `
+  padding: ${spacing.r16};
+  color: ${(props) => props.theme.textPrimary};
+  background-color: ${(props) => props.theme.backgroundLevel1};
+`;
+function CollapsiblePanel({ expanded = false, onHeaderClick, children, headerItems = [], }) {
+    return (_jsxs(CollapsiblePanelContainer, { className: "sc-collapsiblepanel", children: [_jsxs(HeaderContainer, { onClick: onHeaderClick, className: "sc-collapsiblepanel-header", children: [_jsx(HeaderText, { children: headerItems.map((item, index) => (_jsx(HeaderItem, { children: item }, index))) }), _jsx(HeaderIcon, { children: _jsx(Icon, { name: expanded ? 'Dropdown-up' : 'Dropdown-down' }) })] }), expanded && (_jsx(ExpandedContainer, { className: "sc-collapsiblepanel-content", children: children }))] }));
+}
+export { CollapsiblePanel };

package/dist/components/constants.d.ts

@@ -0,0 +1,27 @@
+export declare const LOADER_SIZE: {
+    [Key in Size]: Key;
+};
+export type Size = 'smaller' | 'small' | 'base' | 'large' | 'larger' | 'huge' | 'massive';
+export type Variant = 'base' | 'selected' | 'healthy' | 'warning' | 'danger';
+export declare const QUERY_LAST_SEVEN_DAYS = "now-7d";
+export declare const QUERY_LAST_TWENTY_FOUR_HOURS = "now-24h";
+export declare const QUERY_LAST_ONE_HOUR = "now-1h";
+export declare const LAST_SEVEN_DAYS = "Last 7 days";
+export declare const LAST_TWENTY_FOUR_HOURS = "Last 24 hours";
+export declare const LAST_ONE_HOUR = "Last 1 hour";
+export declare const SAMPLE_DURATION_LAST_SEVEN_DAYS: number;
+export declare const SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS: number;
+export declare const SAMPLE_DURATION_LAST_ONE_HOUR: number;
+export declare const SAMPLE_FREQUENCY_LAST_SEVEN_DAYS: number;
+export declare const SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS = 720;
+export declare const SAMPLE_FREQUENCY_LAST_ONE_HOUR = 30;
+export type QueryTimeSpan = {
+    query: string;
+    label: string;
+    duration: number;
+    frequency: number;
+};
+export declare const queryTimeSpansCodes: QueryTimeSpan[];
+export declare const NAN_STRING = "NAN";
+export type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
+//# sourceMappingURL=constants.d.ts.map