@scality/core-ui 0.166.0 → 0.168.0

package/stories/navbar.stories.tsx

@@ -11,6 +11,7 @@ const tabs = [
     render: (
       <InlineInput
         id="instanceName"
+        // @ts-ignore
         changeMutation={{
           isLoading: false,
           mutate: () => {},
@@ -174,3 +175,105 @@ export const NavbarWithOnlyLinkTabs = {
     tabs: linkTabs,
   },
 };
+
+export const NavbarDropdownShowcase = {
+  args: {
+    rightActions: [
+      {
+        type: 'dropdown',
+        text: 'Language',
+        variant: 'secondary',
+        size: 'default',
+        items: [
+          {
+            label: 'English',
+            name: 'EN',
+            onClick: action('English selected'),
+          },
+          {
+            label: 'Français',
+            name: 'FR',
+            onClick: action('French selected'),
+          },
+          {
+            label: 'Español',
+            name: 'ES',
+            onClick: action('Spanish selected'),
+          },
+        ],
+      },
+      {
+        type: 'dropdown',
+        text: 'Help',
+        icon: <i className="fas fa-question-circle" />,
+        variant: 'outline',
+        size: 'default',
+        items: [
+          {
+            label: 'Documentation',
+            onClick: action('Documentation clicked'),
+          },
+          {
+            label: 'Tutorials',
+            onClick: action('Tutorials clicked'),
+          },
+          {
+            label: 'Contact Support',
+            onClick: action('Contact Support clicked'),
+          },
+          {
+            label: 'Release Notes',
+            onClick: action('Release Notes clicked'),
+          },
+        ],
+      },
+      {
+        type: 'dropdown',
+        icon: <i className="fas fa-user" />,
+        variant: 'primary',
+        size: 'default',
+        caret: false,
+        items: [
+          {
+            label: 'Profile Settings',
+            onClick: action('Profile clicked'),
+          },
+          {
+            label: 'Preferences',
+            onClick: action('Preferences clicked'),
+          },
+          {
+            label: 'API Keys',
+            onClick: action('API Keys clicked'),
+          },
+          {
+            label: 'Log out',
+            onClick: action('Logout clicked'),
+          },
+        ],
+      },
+    ],
+    tabs: [
+      {
+        selected: true,
+        title: 'Dashboard',
+        link: <a href="/dashboard">Dashboard</a>,
+        onClick: action('Dashboard clicked'),
+      },
+      {
+        selected: false,
+        title: 'Analytics',
+        link: <a href="/analytics">Analytics</a>,
+        onClick: action('Analytics clicked'),
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This story showcases different dropdown variants within the navbar. The dropdowns use the new ButtonV2 styling with variants: secondary, outline, and primary. Notice how the different variants provide visual hierarchy and the icon-only dropdown uses caret: false for a cleaner look.',
+      },
+    },
+  },
+};

package/stories/tabsv2.stories.tsx

@@ -3,12 +3,13 @@ import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component';
 import { Tabs, Tab } from '../src/lib/components/tabsv2/Tabsv2.component';
 import { Wrapper, Title } from './common';
 import { BrowserRouter } from 'react-router-dom';
-import { brand, spacing } from '../src/lib/style/theme';
+import { coreUIAvailableThemes } from '../src/lib/style/theme';
 import styled from 'styled-components';
-import { MemoryRouter, Route, useLocation } from 'react-router';
+import { useLocation } from 'react-router';
+import { spacing } from '../src/lib';
 
 const Content = styled.div`
-  padding: ${spacing.sp24};
+  padding: ${spacing.r24};
   color: ${(props) => props.theme.textPrimary};
   height: 100%;
 `;
@@ -55,13 +56,13 @@ const generateTab = (n = 10, selectedIndex = 0) => {
 };
 
 const customTabStyle = {
-  activeTabColor: brand.selectedActive,
-  activeTabSeparator: brand.statusHealthy,
-  tabLineColor: brand.backgroundLevel3,
-  inactiveTabColor: brand.highlight,
-  tabContentColor: brand.buttonPrimary,
-  separatorColor: brand.statusCritical,
-  tabHoverColor: brand.statusHealthy,
+  activeTabColor: coreUIAvailableThemes.darkRebrand.selectedActive,
+  activeTabSeparator: coreUIAvailableThemes.darkRebrand.statusHealthy,
+  tabLineColor: coreUIAvailableThemes.darkRebrand.backgroundLevel3,
+  inactiveTabColor: coreUIAvailableThemes.darkRebrand.highlight,
+  tabContentColor: coreUIAvailableThemes.darkRebrand.buttonPrimary,
+  separatorColor: coreUIAvailableThemes.darkRebrand.statusCritical,
+  tabHoverColor: coreUIAvailableThemes.darkRebrand.statusHealthy,
 };
 
 const DefaultTabsDetails = (props) => {
@@ -87,52 +88,46 @@ const DefaultTabsDetails = (props) => {
       <Title>
         {location.pathname} / {location.search}
       </Title>
-      <MemoryRouter initialEntries={['/path?tab=group']} initialIndex={0}>
-        <Route
-          path="/:path?"
-          render={() => (
-            <Tabs {...props}>
-              <Tab path="/path" label="Users" withoutPadding>
-                <Content>Users Content</Content>
-              </Tab>
-              <Tab
-                path="/path1"
-                query={{
-                  tab: 'group',
-                }}
-                label="Groups"
-              >
-                {details()}
-              </Tab>
-              <Tab
-                path="/path1"
-                query={{
-                  tab: 'role',
-                }}
-                label="Roles"
-                withoutPadding
-              >
-                <Content>Roles content</Content>
-              </Tab>
-              <Tab
-                path="/path1"
-                query={{
-                  tab: 'policies',
-                }}
-                label="Policies"
-              >
-                <Content>Policies content</Content>
-              </Tab>
-              <Tab path="/path4" label="Storage Location">
-                <Content>Storage Location Content</Content>
-              </Tab>
-              <Tab path="/path5" label="Properties">
-                <Content>Properties Content</Content>
-              </Tab>
-            </Tabs>
-          )}
-        />
-      </MemoryRouter>
+
+      <Tabs {...props}>
+        <Tab path="/path" label="Users" withoutPadding>
+          <Content>Users Content</Content>
+        </Tab>
+        <Tab
+          path="/path1"
+          query={{
+            tab: 'group',
+          }}
+          label="Groups"
+        >
+          {details()}
+        </Tab>
+        <Tab
+          path="/path1"
+          query={{
+            tab: 'role',
+          }}
+          label="Roles"
+          withoutPadding
+        >
+          <Content>Roles content</Content>
+        </Tab>
+        <Tab
+          path="/path1"
+          query={{
+            tab: 'policies',
+          }}
+          label="Policies"
+        >
+          <Content>Policies content</Content>
+        </Tab>
+        <Tab path="/path4" label="Storage Location">
+          <Content>Storage Location Content</Content>
+        </Tab>
+        <Tab path="/path5" label="Properties">
+          <Content>Properties Content</Content>
+        </Tab>
+      </Tabs>
     </>
   );
 };

package/dist/components/areachart/AreaChart.component.d.ts

@@ -1,13 +0,0 @@
-type Props = {
-    id: string;
-    data: Array<Record<string, any>>;
-    xAxis: Record<string, any>;
-    yAxis: Array<Record<string, any>>;
-    color?: Record<string, any>;
-    areas: Array<Record<string, any>>;
-    width?: number;
-    height?: number;
-};
-declare function AreaChart({ id, data, xAxis, yAxis, color, height, width, areas, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
-export { AreaChart };
-//# sourceMappingURL=AreaChart.component.d.ts.map

package/dist/components/areachart/AreaChart.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AreaChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/areachart/AreaChart.component.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,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,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAY,EACZ,KAAY,EACZ,KAAU,EACV,GAAG,IAAI,EACR,EAAE,KAAK,2CAuBP;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/areachart/AreaChart.component.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { VegaChart } from '../vegachart/VegaChart.component';
-function AreaChart({ id, data, xAxis, yAxis, color, height = 300, width = 1000, areas = [], ...rest }) {
-    const lines = yAxis.map((y) => ({
-        mark: {
-            type: 'line',
-        },
-        encoding: {
-            y,
-        },
-    }));
-    const spec = {
-        data: {
-            values: data,
-        },
-        encoding: {
-            x: xAxis,
-            color,
-        },
-        layer: [...lines, ...areas],
-        height,
-        width,
-        ...rest,
-    };
-    return _jsx(VegaChart, { className: "sc-areachart", id: id, spec: spec });
-}
-export { AreaChart };

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

@@ -1,21 +0,0 @@
-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) => import("react/jsx-runtime").JSX.Element;
-export { Chips };
-//# sourceMappingURL=Chips.component.d.ts.map

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

@@ -1 +0,0 @@
-{"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,4CAgCP,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

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

@@ -1,105 +0,0 @@
-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/cloudprogressbar/CloudProgressBar.component.d.ts

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

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

@@ -1 +0,0 @@
-{"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,4CAWvB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -1,38 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-{"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,2CAuBP;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -1,44 +0,0 @@
-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/linechart/LineChart.component.d.ts

@@ -1,21 +0,0 @@
-import { $PropertyType } from 'utility-types';
-import type { Encoding, Field } from 'vega-lite';
-type Props = {
-    id: string;
-    data: Array<Record<string, any>>;
-    xAxis: Record<string, any>;
-    yAxis: Array<Record<string, any>>;
-    color?: Record<string, any>;
-    tooltip?: boolean;
-    lineConfig?: Record<string, any>;
-    width?: number;
-    height?: number;
-    displayTrendLine?: boolean;
-    strokeDashEncodingConfig?: $PropertyType<Encoding<Field>, 'strokeDash'>;
-    opacityEncodingConfig?: $PropertyType<Encoding<Field>, 'opacity'>;
-    tooltipConfig?: $PropertyType<Encoding<Field>, 'tooltip'>;
-    tooltipTheme?: 'light' | 'dark' | 'custom';
-};
-declare function LineChart({ id, data, xAxis, yAxis, color, tooltip, lineConfig, height, width, displayTrendLine, strokeDashEncodingConfig, opacityEncodingConfig, tooltipConfig, tooltipTheme, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
-export { LineChart };
-//# sourceMappingURL=LineChart.component.d.ts.map

package/dist/components/linechart/LineChart.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LineChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linechart/LineChart.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACjD,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,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,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wBAAwB,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC;IACxE,qBAAqB,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;IAClE,aAAa,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;IAC1D,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC5C,CAAC;AAEF,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAe,EACf,UAAU,EACV,MAAY,EACZ,KAAY,EACZ,gBAAwB,EACxB,wBAAwB,EACxB,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,2CAgHP;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}