@scality/core-ui 0.115.0

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

@@ -0,0 +1,136 @@
+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 { Icon } from '../icon/Icon.component';
+import { spacing } from '../../spacing';
+const Wrapper = styled.div `
+  flex-shrink: 0;
+  ${(props) => {
+    const { backgroundLevel1, textPrimary } = props.theme;
+    return css `
+      background-color: ${backgroundLevel1};
+      color: ${textPrimary};
+      .fas {
+        color: ${textPrimary};
+      }
+    `;
+}}
+
+  ${(props) => {
+    if (props.expanded) {
+        return css `
+        width: auto;
+      `;
+    }
+    return css `
+      width: ${sidebarWidth};
+    `;
+}}
+
+  ${(props) => {
+    const { backgroundLevel1 } = props.theme;
+    if (props.hoverable && props.hovered && !props.expanded) {
+        return css `
+        .sc-sidebar {
+          position: relative;
+          width: fit-content;
+          height: 100%;
+          background-color: ${backgroundLevel1};
+          z-index: ${zIndex.sidebar};
+        }
+      `;
+    }
+}}
+`;
+const SidebarContainer = styled.div `
+  ${(props) => {
+    const { backgroundLevel1 } = props.theme;
+    return css `
+      background-color: ${backgroundLevel1};
+    `;
+}}
+
+  ${(props) => {
+    if (props.expanded ||
+        (props.hoverable && props.hovered && !props.expanded)) {
+        return css `
+        width: auto;
+      `;
+    }
+    return css `
+      width: ${sidebarWidth};
+    `;
+}}
+
+  .sc-button {
+    border-radius: 0;
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    &:hover {
+      background-color: ${getThemePropSelector('highlight')};
+    }
+    height: ${sidebarItemHeight};
+    width: ${sidebarWidth};
+    padding: 0px;
+  }
+`;
+const SidebarItem = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  justify-content: flex-start;
+  .fas {
+    font-size: ${fontSize.larger};
+  }
+
+  ${(props) => {
+    const { textPrimary, highlight } = props.theme;
+    return props.active
+        ? css `
+          background-color: ${highlight};
+          color: ${textPrimary};
+          cursor: default;
+        `
+        : css `
+          &:hover {
+            background-color: ${highlight};
+            color: ${textPrimary};
+          }
+          &:active {
+            background-color: ${highlight};
+            color: ${textPrimary};
+          }
+        `;
+}}
+`;
+const MenuItemText = styled.div `
+  margin-right: ${spacing.r20};
+`;
+// selected border-right
+const MenuItemSelected = styled.div `
+  position: absolute;
+  width: 3px;
+  height: 100%;
+  right: 0;
+  background-color: ${getThemePropSelector('selectedActive')};
+`;
+const MenuItemIcon = styled.div `
+  width: ${sidebarWidth};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: ${sidebarItemHeight};
+`;
+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: () => {
+                            setHovered(false);
+                            onToggleClick();
+                        } }) })), actions.map(({ active, label, onClick, icon = null, ...actionRest }, index) => {
+                    return (_jsxs(SidebarItem, { className: "sc-sidebar-item", active: active, title: label, onClick: onClick, ...actionRest, children: [!!icon && _jsx(MenuItemIcon, { children: icon }), (expanded || (hoverable && hovered)) && (_jsx(MenuItemText, { children: label })), active && _jsx(MenuItemSelected, {})] }, index));
+                })] }) }));
+}
+export { Sidebar };

package/dist/components/spacedbox/SpacedBox.d.ts

@@ -0,0 +1,34 @@
+type SpacingValue = 0 | 1 | 2 | 4 | 8 | 12 | 14 | 16 | 20 | 24 | 28 | 32;
+export type Props = {
+    m?: SpacingValue;
+    mt?: SpacingValue;
+    mr?: SpacingValue;
+    mb?: SpacingValue;
+    ml?: SpacingValue;
+    mx?: SpacingValue;
+    my?: SpacingValue;
+    p?: SpacingValue;
+    pt?: SpacingValue;
+    pr?: SpacingValue;
+    pb?: SpacingValue;
+    pl?: SpacingValue;
+    px?: SpacingValue;
+    py?: SpacingValue;
+};
+/**
+ * @deprecated
+ * Please use Box with import { Box } from '@scality/core-ui/dist/next';
+ *
+ * Most common use cases:
+ *
+ * `<SpacedBox m={14}><Component /></SpacedBox>`
+ *
+ * `<SpacedBox as={SpanComponent}><Component /></SpacedBox>`
+ *
+ * Props : m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py
+ *
+ * Values: 0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32
+ */
+declare const SpacedBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Props, never>;
+export { SpacedBox };
+//# sourceMappingURL=SpacedBox.d.ts.map

package/dist/components/spacedbox/SpacedBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpacedBox.d.ts","sourceRoot":"","sources":["../../../src/lib/components/spacedbox/SpacedBox.ts"],"names":[],"mappings":"AAEA,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AACzE,MAAM,MAAM,KAAK,GAAG;IAClB,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;CACnB,CAAC;AAmEF;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,SAAS,4GAed,CAAC;AACF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/spacedbox/SpacedBox.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import { spacing } from '../../style/theme';
+const validValue = [0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32];
+const createSpacingFn = (propsName, spacingFields) => (props) => {
+    if (!props[propsName] && props[propsName] !== 0) {
+        return null;
+    }
+    //@ts-ignore -- this is ensured below
+    let value = props[propsName];
+    if (!validValue.includes(value)) {
+        console.warn(`'${propsName}' props should be a number in this list: ` +
+            '0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32');
+        return null;
+    }
+    const result = spacingFields
+        .map((param) => `${param}: ${spacing[`sp${value}`]}`)
+        .join(';');
+    return result;
+};
+const m = createSpacingFn('m', ['margin']);
+const mt = createSpacingFn('mt', ['margin-top']);
+const mr = createSpacingFn('mr', ['margin-right']);
+const mb = createSpacingFn('mb', ['margin-bottom']);
+const ml = createSpacingFn('ml', ['margin-left']);
+const mx = createSpacingFn('mx', ['margin-left', 'margin-right']);
+const my = createSpacingFn('my', ['margin-top', 'margin-bottom']);
+const p = createSpacingFn('p', ['padding']);
+const pt = createSpacingFn('pt', ['padding-top']);
+const pr = createSpacingFn('pr', ['padding-right']);
+const pb = createSpacingFn('pb', ['padding-bottom']);
+const pl = createSpacingFn('pl', ['padding-left']);
+const px = createSpacingFn('px', ['padding-left', 'padding-right']);
+const py = createSpacingFn('py', ['padding-top', 'padding-bottom']);
+/**
+ * @deprecated
+ * Please use Box with import { Box } from '@scality/core-ui/dist/next';
+ *
+ * Most common use cases:
+ *
+ * `<SpacedBox m={14}><Component /></SpacedBox>`
+ *
+ * `<SpacedBox as={SpanComponent}><Component /></SpacedBox>`
+ *
+ * Props : m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py
+ *
+ * Values: 0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32
+ */
+const SpacedBox = styled.div `
+  ${m};
+  ${mt};
+  ${mr};
+  ${mb};
+  ${ml};
+  ${mx};
+  ${my};
+  ${p};
+  ${pt};
+  ${pr};
+  ${pb};
+  ${pl};
+  ${px};
+  ${py};
+`;
+export { SpacedBox };

package/dist/components/sparkline/SparkLine.component.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+type Props = {
+    id: string;
+    title?: string;
+    width?: number;
+    height?: number;
+    data: Array<Record<string, any>>;
+    xAxis: Record<string, any>;
+    yAxis: Record<string, any>;
+    row: Record<string, any>;
+    lineConfig?: Record<string, any>;
+    sparkLineColor?: string;
+    upTrendColor?: string;
+    bottomTrendColor?: string;
+};
+declare function SparkLine({ id, title, width, height, data, xAxis, yAxis, row, lineConfig, sparkLineColor, upTrendColor, bottomTrendColor, }: Props): JSX.Element;
+export declare const Sparkline: typeof SparkLine;
+export {};
+//# sourceMappingURL=SparkLine.component.d.ts.map

package/dist/components/sparkline/SparkLine.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparkLine.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/SparkLine.component.tsx"],"names":[],"mappings":";AAEA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,KAAK,EACL,KAAW,EACX,MAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,EACL,GAAG,EACH,UAAU,EACV,cAAc,EACd,YAA2B,EAC3B,gBAAwB,GACzB,EAAE,KAAK,eA+IP;AAED,eAAO,MAAM,SAAS,kBAAY,CAAC"}

package/dist/components/sparkline/SparkLine.component.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VegaChart } from '../vegachart/VegaChart.component';
+import { yellowOrange, green } from '../../style/theme';
+function SparkLine({ id, title, width = 300, height = 80, data, xAxis, yAxis, row, lineConfig, sparkLineColor, upTrendColor = yellowOrange, bottomTrendColor = green, }) {
+    const spec = {
+        title: {
+            text: title,
+        },
+        data: {
+            values: data,
+        },
+        facet: {
+            row,
+        },
+        spec: {
+            width,
+            height,
+            layer: [
+                // display the sparkline chart
+                {
+                    mark: {
+                        type: 'line',
+                        ...lineConfig,
+                    },
+                    encoding: {
+                        x: xAxis,
+                        y: yAxis,
+                        color: {
+                            value: sparkLineColor,
+                        },
+                    },
+                }, // display the label to specify the max/min data
+                {
+                    mark: {
+                        type: 'text',
+                        style: 'labelMin',
+                        align: 'bottom',
+                        dy: height / 2,
+                        dx: width / 2 + 10,
+                    },
+                    encoding: {
+                        text: {
+                            aggregate: 'min',
+                            field: 'y',
+                            type: 'quantitative',
+                        },
+                    },
+                },
+                {
+                    mark: {
+                        type: 'text',
+                        style: 'labelMax',
+                        align: 'top',
+                        dy: -(height / 2),
+                        dx: width / 2 + 10,
+                    },
+                    encoding: {
+                        text: {
+                            aggregate: 'max',
+                            field: 'y',
+                            type: 'quantitative',
+                        },
+                    },
+                }, // display the up and bottom trend line
+                {
+                    mark: {
+                        type: 'rule',
+                        style: 'ruleMaxEnd',
+                        color: upTrendColor,
+                    },
+                    encoding: {
+                        y: {
+                            aggregate: 'max',
+                            field: 'y',
+                            type: 'quantitative',
+                        },
+                        x: {
+                            value: width - 15,
+                        },
+                        x2: {
+                            value: width,
+                        },
+                    },
+                },
+                {
+                    mark: {
+                        type: 'rule',
+                        style: 'ruleMaxStart',
+                        color: upTrendColor,
+                        opacity: 0.1,
+                    },
+                    encoding: {
+                        y: {
+                            aggregate: 'max',
+                            field: 'y',
+                            type: 'quantitative',
+                        },
+                        x: {
+                            value: 0,
+                        },
+                        x2: {
+                            value: width - 15,
+                        },
+                    },
+                },
+                {
+                    mark: {
+                        type: 'rule',
+                        style: 'ruleMinEnd',
+                        color: bottomTrendColor,
+                    },
+                    encoding: {
+                        y: {
+                            value: height,
+                        },
+                        x: {
+                            value: width - 15,
+                        },
+                        x2: {
+                            value: width,
+                        },
+                    },
+                },
+                {
+                    mark: {
+                        type: 'rule',
+                        style: 'ruleMinStart',
+                        color: bottomTrendColor,
+                        opacity: 0.1,
+                    },
+                    encoding: {
+                        y: {
+                            value: height,
+                        },
+                        x: {
+                            value: 0,
+                        },
+                        x2: {
+                            value: width - 15,
+                        },
+                    },
+                },
+            ],
+        },
+    };
+    return _jsx(VegaChart, { className: "sc-sparkline", id: id, spec: spec });
+}
+export const Sparkline = SparkLine;

package/dist/components/statuswrapper/Statuswrapper.component.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Status } from '../constants';
+type Props = {
+    status: Status;
+    children: React.ReactNode;
+};
+declare function StatusWrapper({ status, children }: Props): JSX.Element;
+export { StatusWrapper };
+//# sourceMappingURL=Statuswrapper.component.d.ts.map

package/dist/components/statuswrapper/Statuswrapper.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statuswrapper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/statuswrapper/Statuswrapper.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA+CtC,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,KAAK,eAQjD;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/statuswrapper/Statuswrapper.component.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faQuestionCircle, faExclamationCircle, faTimesCircle, } from '@fortawesome/free-solid-svg-icons';
+const BadgeWrapper = styled.span `
+  height: fit-content;
+  width: fit-content;
+  position: relative;
+  margin-right: 0.5rem;
+  display: inline-block;
+`;
+const BadgeStyled = styled(FontAwesomeIcon) `
+  ${(props) => {
+    const theme = props.theme;
+    return css `
+      background: ${theme.backgroundLevel1};
+      border-radius: 50%;
+      color: ${theme.textSecondary};
+      position: absolute;
+      top: -25%;
+      right: -35%;
+      transform: scale(0.5);
+      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    `;
+}}
+`;
+const getBadgeIcon = (status) => {
+    switch (status) {
+        case 'warning':
+            return faExclamationCircle;
+        case 'critical':
+            return faTimesCircle;
+        case 'unknown':
+            return faQuestionCircle;
+        case 'healthy':
+        default:
+            return null;
+    }
+};
+function StatusWrapper({ status, children }) {
+    const icon = getBadgeIcon(status);
+    return (_jsxs(BadgeWrapper, { children: [children, icon !== null && _jsx(BadgeStyled, { icon: icon })] }));
+}
+export { StatusWrapper };

package/dist/components/steppers/Stepper.component.d.ts

@@ -0,0 +1,14 @@
+/// <reference path="../../../src/lib/components/steppers/Stepper.component.d.ts" />
+/// <reference types="react" />
+export interface StepperContextType {
+    next: (props: Record<string, unknown>) => void;
+    prev: (props: Record<string, unknown>) => void;
+}
+declare global {
+    interface Window {
+        StepperContext: React.Context<StepperContextType | null>;
+    }
+}
+export declare const useStepper: UseStepper;
+export declare const Stepper: Stepper;
+//# sourceMappingURL=Stepper.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/steppers/Stepper.component.tsx"],"names":[],"mappings":";;AAIA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC/C,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CAChD;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;KAC1D;CACF;AAMD,eAAO,MAAM,UAAU,EAAE,UASxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAgCrB,CAAC"}

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference path="./Stepper.component.d.ts" />
+import { createContext, useContext, useState } from 'react';
+import { Steppers } from './Steppers.component';
+import { Box } from '../box/Box';
+if (!window.StepperContext) {
+    window.StepperContext = createContext(null);
+}
+//@ts-ignore
+export const useStepper = (index, steps) => {
+    const context = useContext(window.StepperContext);
+    if (context === null) {
+        throw new Error('Cannot use useStepper outside of Stepper');
+    }
+    const { next, prev } = context;
+    return { next, prev };
+};
+export const Stepper = ({ steps }) => {
+    const [stepProps, setStepProps] = useState({ step: 0, props: {} });
+    const next = (props) => {
+        setStepProps({ step: stepProps.step + 1, props });
+    };
+    const prev = (props) => {
+        setStepProps({ step: stepProps.step - 1, props });
+    };
+    const { Component } = steps[stepProps.step];
+    const StepperContext = window.StepperContext;
+    return (_jsx(StepperContext.Provider, { value: { next, prev }, children: _jsxs(Box, { display: "flex", gap: 32, flex: 1, height: "100%", children: [_jsx(Steppers, { activeStep: stepProps.step, steps: steps.map((step) => {
+                        return {
+                            title: step.label,
+                        };
+                    }) }), _jsx(Component, { ...stepProps.props })] }) }));
+};

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+type StepProps = {
+    title: React.ReactNode;
+    content?: React.ReactNode;
+    active?: boolean;
+    completed?: boolean;
+    isLast?: boolean;
+    index?: number;
+    error?: boolean;
+    inProgress?: boolean;
+};
+type Props = {
+    steps: Array<StepProps>;
+    activeStep: number;
+};
+declare function Steppers({ steps, activeStep, ...rest }: Props): JSX.Element;
+export { Steppers };
+//# sourceMappingURL=Steppers.component.d.ts.map

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

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

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { gray, white } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+import { Loader } from '../loader/Loader.component';
+const SteppersContainer = styled.div `
+  padding-top: 4rem;
+  padding-left: 2rem;
+`;
+const StepContainer = styled.div `
+  display: flex;
+  min-height: 50px;
+  min-width: 20rem;
+`;
+const Panel = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const Circle = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+
+  ${(props) => {
+    const { statusCritical, statusHealthy, selectedActive, buttonSecondary } = props.theme;
+    if (props.error) {
+        return css `
+        background-color: ${statusCritical};
+        color: ${white};
+      `;
+    }
+    else if (props.active) {
+        return css `
+        background-color: ${selectedActive};
+        color: ${white};
+        svg {
+          fill: ${white};
+        }
+      `;
+    }
+    else if (props.completed) {
+        return css `
+        background-color: ${statusHealthy};
+        color: ${white};
+      `;
+    }
+    else {
+        return css `
+        background-color: ${buttonSecondary};
+        color: ${white};
+      `;
+    }
+}};
+`;
+const StepHeader = styled.span `
+  padding: 8px;
+  color: ${(props) => props.active
+    ? getThemePropSelector('textPrimary')
+    : getThemePropSelector('textSecondary')};
+`;
+const StepContent = styled.div `
+  padding: ${spacing.r8};
+`;
+const BottomBar = styled.hr `
+  flex-grow: 1;
+  margin: 0;
+  border: none;
+  margin: 4px 14px;
+
+  ${(props) => {
+    if (props.completed) {
+        return css `
+        border-left: 2px solid ${props.theme.statusHealthy};
+      `;
+    }
+    else {
+        return css `
+        border-left: 2px solid ${gray};
+      `;
+    }
+}};
+`;
+function Step(props) {
+    const { title, content, active, completed, isLast, index = 0, error, inProgress, } = props;
+    const circleContent = completed ? _jsx(Icon, { name: "Check" }) : index + 1;
+    return (_jsxs(StepContainer, { children: [_jsxs(Panel, { children: [_jsx(Circle, { active: active, error: error, completed: completed, children: active && inProgress ? (_jsx(Loader, { size: "base" })) : (_jsx("span", { children: circleContent })) }), !isLast && _jsx(BottomBar, { completed: completed })] }), _jsxs(Panel, { children: [_jsx(StepHeader, { active: active, children: title }), active && _jsx(StepContent, { children: content })] })] }));
+}
+function Steppers({ steps, activeStep, ...rest }) {
+    return (_jsx(SteppersContainer, { className: "sc-steppers", ...rest, children: steps.map(({ title, content, ...stepRest }, index) => (_jsx(Step, { title: title, content: content, active: index === activeStep, completed: index < activeStep, isLast: index === steps.length - 1, index: index, ...stepRest }, index))) }));
+}
+export { Steppers };

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Row } from 'react-table';
+import { TableHeightKeyType, TableLocalType, TableVariantType } from './TableUtils';
+type MultiSelectableContentProps<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
+    onMultiSelectionChanged?: (rows: Row<DATA_ROW>[]) => void;
+    onSingleRowSelected?: (row: Row<DATA_ROW>) => void;
+    onToggleAll?: (selected: boolean) => void;
+    rowHeight?: TableHeightKeyType;
+    separationLineVariant?: TableVariantType;
+    backgroundVariant?: TableVariantType;
+    locale?: TableLocalType;
+    customItemKey?: (index: number, data: DATA_ROW) => string;
+    hasScrollbar?: boolean;
+    isLoadingMoreItems?: boolean;
+    children?: (rows: JSX.Element) => JSX.Element;
+};
+/**
+ * FIXME Need to spend time to change the type to something like this
+ */
+export declare const MultiSelectableContent: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight, separationLineVariant, backgroundVariant, locale, customItemKey, isLoadingMoreItems, children, }: MultiSelectableContentProps<DATA_ROW>) => JSX.Element;
+export {};
+//# sourceMappingURL=MultiSelectableContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/MultiSelectableContent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAWlC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAqBtB,KAAK,2BAA2B,CAC9B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qBAAqB,CAAC,EAAE,gBAAgB,CAAC;IACzC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IACrC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CAC/C,CAAC;AAEF;;GAEG;AAcH,eAAO,MAAM,sBAAsB,sSAwPlC,CAAC"}