@scality/core-ui 0.115.0

package/dist/components/tabsv2/Tabsv2.component.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// @ts-nocheck
+import React, { createContext, useEffect, useState, useCallback } from 'react';
+import { TabBar, ScrollableContainer, TabContent, TabItem, TabsContainer, TabsScroller, } from './StyledTabs';
+import { useHistory, useLocation, useRouteMatch, matchPath, Route, } from 'react-router-dom';
+import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
+import { ScrollButton } from './ScrollButton';
+import { Tab } from './Tab';
+import { useScrollingTabs } from './useScrollingTabs';
+import { ButtonIcon } from '../buttonv2/Buttonv2.component';
+import styled from 'styled-components';
+export const TabsContext = createContext(false);
+const TabIcon = styled(ButtonIcon) `
+  color: ${(props) => props.theme.textSecondary};
+`;
+function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inactiveTabColor, tabContentColor, separatorColor, tabHoverColor, children, className, ...rest }) {
+    const location = useLocation();
+    const history = useHistory();
+    const { url } = useRouteMatch();
+    const [selectedTabIndex, setSelectedTabIndex] = useState(null);
+    const queryURL = new URLSearchParams(location.search);
+    const filteredTabsChildren = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === Tab);
+    const matchQuery = useCallback((query) => {
+        for (const key of Object.keys(query)) {
+            // To support the case of {tab:null}
+            if (queryURL.get(key) === null && !query[key]) {
+                return true;
+            }
+            if (!(queryURL.has(key) && queryURL.get(key) === query[key]))
+                return false;
+        }
+        return true;
+    }, [queryURL]);
+    const serialize = (query) => {
+        if (!query) {
+            return '';
+        }
+        else {
+            const o = Object.fromEntries(Object.entries(query).filter(([_, v]) => v != null));
+            //$FlowFixMe
+            return '?' + new URLSearchParams(o).toString();
+        }
+    };
+    const getPushHistoryPath = (path, query) => {
+        if (path.startsWith('/')) {
+            return `${path}${serialize(query)}`;
+        }
+        return `${url}/${path}${serialize(query)}`;
+    };
+    useEffect(() => {
+        let hasSelectedTab = false;
+        filteredTabsChildren.forEach((child, index) => {
+            const isSelected = !!matchPath(location.pathname, {
+                path: child.props.path.startsWith('/')
+                    ? child.props.path
+                    : url + '/' + child.props.path,
+                exact: child.props.exact,
+                strict: child.props.strict,
+                sensitive: child.props.sensitive,
+            }) && (child.props.query ? matchQuery(child.props.query) : true);
+            if (isSelected) {
+                setSelectedTabIndex(index);
+                hasSelectedTab = true;
+            }
+        });
+        if (!hasSelectedTab)
+            setSelectedTabIndex(null);
+    }, [location.pathname, filteredTabsChildren, matchQuery]);
+    const { scrollButtonEndRef, scrollButtonStartRef, tabsListRef, tabsRef, handleStartScrollClick, handleEndScrollClick, handleTabsScroll, handleKeyDown, displayScroll, } = useScrollingTabs(selectedTabIndex);
+    const tabItems = filteredTabsChildren.map((child, index) => {
+        const { path, query, label, textBadge, children, icon, ...childRest } = child.props;
+        const isSelected = selectedTabIndex === index;
+        return (_jsxs(TabItem, { className: `sc-tabs-item ${isSelected ? 'selected' : ''}`, role: "tab", onClick: () => history.push(getPushHistoryPath(path, query)), selected: isSelected, tabHoverColor: tabHoverColor, inactiveTabColor: inactiveTabColor, activeTabColor: activeTabColor, activeTabSeparator: activeTabSeparator, tabIndex: isSelected ? 0 : -1, onKeyDown: (event) => {
+                if (event.key === ' ' ||
+                    event.key === 'Enter' ||
+                    event.key === 'Spacebar') {
+                    event.preventDefault();
+                    history.push(getPushHistoryPath(path, query));
+                }
+            }, ...childRest, children: [icon && _jsx(TabIcon, { label: label, children: icon }), isSelected ? (_jsx(BasicText, { className: "sc-tabs-item-title", children: label })) : (_jsx(SecondaryText, { className: "sc-tabs-item-title", children: label })), textBadge && (_jsx(EmphaseText, { className: "sc-tabs-item-icon", children: textBadge }))] }, index));
+    });
+    return (_jsx(TabsContext.Provider, { value: true, children: _jsxs(TabsContainer, { className: ['sc-tabs', className].join(' '), tabLineColor: tabLineColor, separatorColor: separatorColor, ...rest, children: [_jsxs(ScrollableContainer, { children: [displayScroll.start && (_jsx(ScrollButton, { ref: scrollButtonStartRef, direction: "left", onClick: handleStartScrollClick })), _jsx(TabsScroller, { ref: tabsRef, onScroll: handleTabsScroll, children: _jsx(TabBar, { onKeyDown: handleKeyDown, ref: tabsListRef, className: "sc-tabs-bar", role: "tablist", children: tabItems }) }), displayScroll.end && (_jsx(ScrollButton, { ref: scrollButtonEndRef, direction: "right", onClick: handleEndScrollClick }))] }), _jsx(TabContent, { className: "sc-tabs-item-content", tabContentColor: tabContentColor, children: filteredTabsChildren.map((tab, index) => (_jsx(Route, { exact: tab.props.exact, sensitive: tab.props.sensitive, strict: tab.props.strict, path: tab.props.path.startsWith('/')
+                            ? tab.props.path
+                            : url + '/' + tab.props.path, children: !tab.props.query ||
+                            (tab.props.query && matchQuery(tab.props.query)) ? (tab.props.children) : (_jsx(_Fragment, {})) }, index))) })] }) }));
+}
+Tabs.Tab = Tab;
+// re-export Tab
+export { Tabs, Tab };

package/dist/components/tabsv2/useScrollingTabs.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare const useScrollingTabs: (selectedTabIndex: number | null | undefined) => {
+    scrollButtonStartRef: import("react").MutableRefObject<HTMLDivElement | null | undefined>;
+    scrollButtonEndRef: import("react").MutableRefObject<HTMLDivElement | null | undefined>;
+    tabsRef: import("react").MutableRefObject<any>;
+    tabsListRef: import("react").RefObject<HTMLDivElement>;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    handleTabsScroll: () => void;
+    handleStartScrollClick: () => void;
+    handleEndScrollClick: () => void;
+    displayScroll: {
+        start: boolean;
+        end: boolean;
+    };
+};
+export { useScrollingTabs };
+//# sourceMappingURL=useScrollingTabs.d.ts.map

package/dist/components/tabsv2/useScrollingTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollingTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/useScrollingTabs.ts"],"names":[],"mappings":";AAmIA,QAAA,MAAM,gBAAgB,qBAAsB,MAAM,GAAG,IAAI,GAAG,SAAS;;;;;2BA0JrC,aAAa;;;;;;;;CA+C5C,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/tabsv2/useScrollingTabs.js

@@ -0,0 +1,261 @@
+/*
+The Tabs component uses a lot of the code from Material-UI Scrollable Tabs to have the same behavior as it.
+Here is the license of material-ui:
+
+The MIT License (MIT)
+
+Copyright (c) 2014 Call-Em-All
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+function easeInOutSin(time) {
+    return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
+}
+function animate(property, element, to) {
+    const duration = 1000; // standard
+    let start = null;
+    const from = element[property];
+    let cancelled = false;
+    const cancel = () => {
+        cancelled = true;
+    };
+    const step = (timestamp) => {
+        if (cancelled) {
+            return;
+        }
+        if (start === null) {
+            start = timestamp;
+        }
+        const time = Math.min(1, (timestamp - start) / duration);
+        element[property] = easeInOutSin(time) * (to - from) + from;
+        if (time >= 1) {
+            return;
+        }
+        requestAnimationFrame(step);
+    };
+    if (from === to) {
+        return cancel;
+    }
+    requestAnimationFrame(step);
+    return cancel;
+}
+const nextItem = (list, item) => {
+    if (list === item) {
+        return list.firstChild;
+    }
+    if (item && item.nextElementSibling) {
+        return item.nextElementSibling;
+    }
+    return list.firstChild;
+};
+const previousItem = (list, item) => {
+    if (list === item) {
+        return list.lastChild;
+    }
+    if (item && item.previousElementSibling) {
+        return item.previousElementSibling;
+    }
+    return list.lastChild;
+};
+const moveFocus = (list, currentFocus, traversalFunction) => {
+    let wrappedOnce = false;
+    let nextFocus = traversalFunction(list, currentFocus);
+    while (nextFocus) {
+        // Prevent infinite loop.
+        if (nextFocus === list.firstChild) {
+            if (wrappedOnce) {
+                return;
+            }
+            wrappedOnce = true;
+        }
+        if (!nextFocus.hasAttribute('tabindex')) {
+            // Move to the next element.
+            nextFocus = traversalFunction(list, nextFocus);
+        }
+        else {
+            nextFocus.focus();
+            return;
+        }
+    }
+};
+const useScrollingTabs = (selectedTabIndex) => {
+    const [displayScroll, setDisplayScroll] = useState({
+        start: false,
+        end: false,
+    });
+    const scrollButtonEndRef = useRef(null);
+    const scrollButtonStartRef = useRef(null);
+    const tabsListRef = useRef(null);
+    const tabsRef = useRef(null);
+    const scroll = (scrollValue) => {
+        animate('scrollLeft', tabsRef.current, scrollValue);
+    };
+    const moveTabsScroll = (delta) => {
+        let scrollValue = tabsRef.current.scrollLeft;
+        scrollValue += delta;
+        scroll(scrollValue);
+    };
+    const getScrollSize = (isStart = false) => {
+        if (!tabsListRef.current)
+            return 0;
+        const fullContainerSize = tabsListRef.current.clientWidth;
+        const containerSize = tabsRef.current.clientWidth;
+        let totalSize = 0;
+        const children = Array.from(tabsListRef.current.children);
+        for (let i = 0; i < children.length; i += 1) {
+            const tab = children[i];
+            if (totalSize + tab.clientWidth > containerSize) {
+                break;
+            }
+            totalSize += tab.clientWidth;
+        }
+        const cornerChild = isStart ? children[0] : children[children.length - 1];
+        if (totalSize +
+            tabsRef.current.scrollLeft +
+            containerSize +
+            cornerChild.clientWidth >
+            fullContainerSize) {
+            totalSize += cornerChild.clientWidth;
+        }
+        return totalSize;
+    };
+    const handleStartScrollClick = () => {
+        moveTabsScroll(-1 * getScrollSize(true));
+    };
+    const handleEndScrollClick = () => {
+        moveTabsScroll(getScrollSize(false));
+    };
+    const getTabsMeta = useCallback(() => {
+        const tabsNode = tabsRef.current;
+        let tabsMeta;
+        if (tabsNode) {
+            const rect = tabsNode.getBoundingClientRect();
+            tabsMeta = {
+                scrollLeft: tabsNode.scrollLeft,
+                left: rect.left,
+                right: rect.right,
+            };
+        }
+        let selectedTabMeta;
+        if (tabsNode && tabsListRef.current && selectedTabIndex) {
+            const children = tabsListRef.current.children;
+            if (children.length > 0) {
+                const tab = children[selectedTabIndex];
+                selectedTabMeta = tab ? tab.getBoundingClientRect() : null;
+            }
+        }
+        return {
+            tabsMeta,
+            selectedTabMeta,
+        };
+    }, [selectedTabIndex]);
+    const scrollSelectedIntoView = useCallback(() => {
+        const { tabsMeta, selectedTabMeta } = getTabsMeta();
+        if (!selectedTabMeta || !tabsMeta)
+            return;
+        if (selectedTabMeta.left < tabsMeta.left) {
+            // left side of button is out of view
+            const nextScrollStart = tabsMeta.scrollLeft + (selectedTabMeta.left - tabsMeta.left);
+            scroll(nextScrollStart);
+        }
+        else if (selectedTabMeta.right > tabsMeta.right) {
+            // right side of button is out of view
+            let nextScrollStart = tabsMeta.scrollLeft + (selectedTabMeta.right - tabsMeta.right);
+            if (scrollButtonEndRef.current &&
+                ((displayScroll.start && !displayScroll.end) ||
+                    (!displayScroll.start && displayScroll.end))) {
+                nextScrollStart +=
+                    scrollButtonEndRef.current.getBoundingClientRect().width;
+            }
+            scroll(nextScrollStart);
+        }
+    }, // we do not want to re-trigger this function if display.start / display.end are modified
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getTabsMeta]);
+    const updateScrollButtonState = useCallback(() => {
+        if (tabsRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = tabsRef.current;
+            let showStartScroll = scrollLeft > 1;
+            let showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+            if (showStartScroll !== displayScroll.start ||
+                showEndScroll !== displayScroll.end) {
+                setDisplayScroll({
+                    start: showStartScroll,
+                    end: showEndScroll,
+                });
+            }
+        }
+    }, [displayScroll.end, displayScroll.start]);
+    useEffect(() => {
+        window.addEventListener('resize', updateScrollButtonState);
+        return () => {
+            window.removeEventListener('resize', updateScrollButtonState);
+        };
+    }, [updateScrollButtonState]);
+    const handleTabsScroll = useMemo(() => () => updateScrollButtonState(), [updateScrollButtonState]);
+    useEffect(() => {
+        updateScrollButtonState();
+    });
+    // scroll to selected tab on first render
+    useEffect(() => {
+        scrollSelectedIntoView();
+    }, [scrollSelectedIntoView, selectedTabIndex]);
+    const handleKeyDown = (event) => {
+        const list = tabsListRef.current;
+        const ownerDocument = (list && list.ownerDocument) || document;
+        const currentFocus = ownerDocument.activeElement;
+        const role = currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.getAttribute('role');
+        if (role !== 'tab' || !list) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                moveFocus(list, currentFocus, previousItem);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                moveFocus(list, currentFocus, nextItem);
+                break;
+            case 'Home':
+                event.preventDefault();
+                moveFocus(list, null, nextItem);
+                break;
+            case 'End':
+                event.preventDefault();
+                moveFocus(list, null, previousItem);
+                break;
+            default:
+                break;
+        }
+    };
+    return {
+        scrollButtonStartRef,
+        scrollButtonEndRef,
+        tabsRef,
+        tabsListRef,
+        handleKeyDown,
+        handleTabsScroll,
+        handleStartScrollClick,
+        handleEndScrollClick,
+        displayScroll,
+    };
+};
+export { useScrollingTabs };

package/dist/components/text/Text.component.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { CoreUITheme } from '../../style/theme';
+type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
+type Props = {
+    children: React.ReactNode | string;
+    status?: Status;
+    id?: string;
+};
+export declare const SmallerEmphaseTextStyle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    statusColor: string;
+}, never>;
+export declare function BasicText({ children, ...rest }: Props): JSX.Element;
+export declare function SecondaryText({ children, ...rest }: Props): JSX.Element;
+export declare function LargerText({ children, ...rest }: Props): JSX.Element;
+export declare function EmphaseText({ children, ...rest }: Props): JSX.Element;
+export declare function StatusText({ children, status, ...rest }: Props): JSX.Element;
+export declare function LargeText({ children, ...rest }: Props): JSX.Element;
+export declare function SmallerText({ children, ...rest }: Props): JSX.Element;
+export declare function SmallerSecondaryText({ children, ...rest }: Props): JSX.Element;
+export declare function SmallerEmphaseText({ children, status, ...rest }: Props): JSX.Element;
+export declare function ChartTitleText({ children, ...rest }: Props): JSX.Element;
+export declare const GentleEmphaseSecondaryText: import("styled-components").StyledComponent<typeof SecondaryText, import("styled-components").DefaultTheme, {
+    alignRight?: boolean | undefined;
+}, never>;
+export declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    variant?: "ChartTitle" | "Basic" | "Smaller" | "Larger" | "Large" | undefined;
+    color?: keyof CoreUITheme | undefined;
+    isEmphazed?: boolean | undefined;
+    isGentleEmphazed?: boolean | undefined;
+}, never>;
+export declare const Link: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
+export {};
+//# sourceMappingURL=Text.component.d.ts.map

package/dist/components/text/Text.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAE1D;AACD,eAAO,MAAM,0BAA0B;;SAWtC,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;SA+ChB,CAAC;AAEF,eAAO,MAAM,IAAI,uGAehB,CAAC"}

package/dist/components/text/Text.component.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+const BasicTextStyle = styled.span `
+  color: ${(props) => props.theme.textPrimary};
+  font-size: 1rem;
+  line-height: ${spacing.r24};
+  font-weight: 400;
+`;
+const SecondaryTextStyle = styled(BasicTextStyle) `
+  color: ${(props) => props.theme.textSecondary};
+`;
+const LargerTextStyle = styled(BasicTextStyle) `
+  font-size: 1.43rem;
+  line-height: 1.5;
+`;
+const EmphaseTextStyle = styled(BasicTextStyle) `
+  font-weight: 700;
+`;
+const StatusTextStyle = styled(BasicTextStyle) `
+  color: ${(props) => props.theme[`${props.statusColor}`]};
+`;
+const LargetStyle = styled(BasicTextStyle) `
+  font-size: 1.14rem;
+  line-height: 1.5;
+`;
+const SmallerTextStyle = styled(BasicTextStyle) `
+  font-size: 0.71rem;
+  line-height: 1.4;
+  letter-spacing: 2%; // to be defined, percentage value is not valid
+`;
+const SmallerSecondaryTextStyle = styled(SmallerTextStyle) `
+  color: ${(props) => props.theme.textSecondary};
+`;
+const getStatusColor = (status) => {
+    let statusColor;
+    switch (status) {
+        case 'healthy':
+            statusColor = 'statusHealthy';
+            break;
+        case 'warning':
+            statusColor = 'statusWarning';
+            break;
+        case 'critical':
+            statusColor = 'statusCritical';
+            break;
+        default:
+            statusColor = 'textSecondary';
+    }
+    return statusColor;
+};
+export const SmallerEmphaseTextStyle = styled(SmallerTextStyle) `
+  font-weight: 700;
+  color: ${(props) => props.theme[`${props.statusColor}`]};
+`;
+const ChartTitleTextStyle = styled(BasicTextStyle) `
+  letter-spacing: ${spacing.r2};
+`;
+export function BasicText({ children, ...rest }) {
+    return _jsx(BasicTextStyle, { ...rest, children: children });
+}
+export function SecondaryText({ children, ...rest }) {
+    return _jsx(SecondaryTextStyle, { ...rest, children: children });
+}
+export function LargerText({ children, ...rest }) {
+    return _jsx(LargerTextStyle, { ...rest, children: children });
+}
+export function EmphaseText({ children, ...rest }) {
+    return _jsx(EmphaseTextStyle, { ...rest, children: children });
+}
+export function StatusText({ children, status, ...rest }) {
+    const statusColor = getStatusColor(status);
+    return (_jsx(StatusTextStyle, { statusColor: statusColor, ...rest, children: children }));
+}
+export function LargeText({ children, ...rest }) {
+    return _jsx(LargetStyle, { ...rest, children: children });
+}
+export function SmallerText({ children, ...rest }) {
+    return _jsx(SmallerTextStyle, { ...rest, children: children });
+}
+export function SmallerSecondaryText({ children, ...rest }) {
+    return (_jsx(SmallerSecondaryTextStyle, { ...rest, children: children }));
+}
+export function SmallerEmphaseText({ children, status, ...rest }) {
+    const statusColor = getStatusColor(status);
+    return (_jsx(SmallerEmphaseTextStyle, { statusColor: statusColor, ...rest, children: children }));
+}
+export function ChartTitleText({ children, ...rest }) {
+    return _jsx(ChartTitleTextStyle, { ...rest, children: children });
+}
+export const GentleEmphaseSecondaryText = styled(SecondaryText) `
+  font-style: italic;
+  ${(props) => props.alignRight
+    ? `
+    text-align: right;
+    display: block;
+  `
+    : ''}
+`;
+export const Text = styled.span `
+  color: ${(props) => props.theme[props.color || 'textPrimary']};
+  ${(props) => props.variant === 'Larger'
+    ? `
+  font-size: 1.43rem;
+  line-height: 1.5;
+      `
+    : props.variant === 'Large'
+        ? `
+  font-size: 1.14rem;
+  line-height: 1.5;
+      `
+        : props.variant === 'Smaller'
+            ? `
+  font-size: 0.71rem;
+  line-height: 1.4;
+  letter-spacing: 2%;// to be defined, percentage value is not valid
+      `
+            : `
+  font-size: 1rem;
+  line-height: ${spacing.r24};
+      `}
+
+  ${(props) => props.isEmphazed
+    ? `
+  font-weight: 700;
+      `
+    : `
+  font-weight: 400;
+      `}
+
+  ${(props) => props.isGentleEmphazed
+    ? `
+  font-style: italic;
+      `
+    : ``}
+    
+  ${(props) => props.variant === 'ChartTitle' && `letter-spacing: ${spacing.r2};`}
+`;
+export const Link = styled.a `
+  font-size: 1rem;
+  line-height: ${spacing.r24};
+  color: ${(props) => props.theme.textLink};
+  cursor: pointer;
+  text-decoration-line: none;
+  width: fit-content;
+  &:hover {
+    text-decoration-line: underline;
+  }
+  // :focus-visible is the keyboard-only version of :focus
+  &:focus-visible {
+    outline: dashed ${spacing.r2} ${(props) => props.theme.textLink};
+    outline-offset: ${spacing.r2};
+  }
+`;

package/dist/components/textarea/TextArea.component.d.ts

@@ -0,0 +1,10 @@
+import React, { CSSProperties } from 'react';
+type TextAreaVariant = 'code' | 'text';
+type RefType = HTMLTextAreaElement | null;
+export declare const TextArea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    variant?: TextAreaVariant | undefined;
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+} & React.RefAttributes<RefType>>;
+export {};
+//# sourceMappingURL=TextArea.component.d.ts.map

package/dist/components/textarea/TextArea.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/textarea/TextArea.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAIf,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AAMvC,KAAK,OAAO,GAAG,mBAAmB,GAAG,IAAI,CAAC;AA2F1C,eAAO,MAAM,QAAQ;;YA9FX,aAAa,CAAC,OAAO,CAAC;aACrB,aAAa,CAAC,QAAQ,CAAC;iCA6FiC,CAAC"}

package/dist/components/textarea/TextArea.component.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+const TextAreaContainer = styled.textarea `
+  padding: ${spacing.r12} ${spacing.r8};
+  border-radius: 4px;
+  resize: vertical;
+  font-family: ${(props) => props.variant === 'code' ? 'Courier New' : 'Lato'};
+  font-size: ${spacing.f14};
+
+  ${(props) => props.disabled &&
+    css `
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+
+  ${(props) => props.width &&
+    css `
+      width: ${props.width};
+    `}
+
+  ${(props) => props.height &&
+    css `
+      height: ${props.height};
+    `}
+
+  &:placeholder-shown {
+    font-style: italic;
+  }
+  &::placeholder {
+    color: ${(props) => props.theme.textSecondary};
+  }
+  &:hover {
+    ${(props) => !props.disabled &&
+    `border: ${spacing.r1} solid ${props.theme.infoPrimary};`}
+  }
+  &:focus {
+    border: ${spacing.r1} solid ${(props) => props.theme.infoPrimary};
+  }
+  ${(props) => {
+    const { border, textSecondary, backgroundLevel1, selectedActive } = props.theme;
+    return css `
+      border-color: ${border};
+      color: ${textSecondary};
+      background: ${backgroundLevel1};
+      &:focus {
+        border-color: ${selectedActive};
+        outline: none;
+      }
+    `;
+}}
+`;
+function TextAreaElement({ rows = 3, cols = 20, width, height, variant = 'code', ...rest }, ref) {
+    if (width || height) {
+        return (_jsx(TextAreaContainer, { className: "sc-textarea", width: width, height: height, variant: variant, ...rest, ref: ref }));
+    }
+    return (_jsx(TextAreaContainer, { className: "sc-textarea", rows: rows, cols: cols, variant: variant, ...rest, ref: ref }));
+}
+export const TextArea = forwardRef(TextAreaElement);

package/dist/components/textbadge/TextBadge.component.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Props = {
+    text: string;
+    className?: string;
+    variant?: 'statusHealthy' | 'statusWarning' | 'statusCritical' | 'infoPrimary' | 'infoSecondary';
+};
+export declare function TextBadge({ text, variant, className, ...rest }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=TextBadge.component.d.ts.map

package/dist/components/textbadge/TextBadge.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextBadge.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/textbadge/TextBadge.component.tsx"],"names":[],"mappings":";AAkBA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EACJ,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,aAAa,GACb,eAAe,CAAC;CACrB,CAAC;AACF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,OAAuB,EACvB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eAUP"}

package/dist/components/textbadge/TextBadge.component.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontWeight } from '../../style/theme';
+const StyledTextBadge = styled.span `
+  ${({ theme, variant }) => `
+      background-color: ${theme[variant]};
+      color: ${variant === 'infoSecondary' ? theme.textPrimary : theme.textReverse};
+      padding: 2px ${spacing.r4};
+      border-radius: 4px;
+      font-size: 0.9rem;
+      font-weight: ${fontWeight.bold};
+      margin: 0 ${spacing.r4} 0 ${spacing.r4};
+    `}
+`;
+export function TextBadge({ text, variant = 'infoPrimary', className, ...rest }) {
+    return (_jsx(StyledTextBadge, { className: ['sc-text-badge', className].join(' '), variant: variant, ...rest, children: text }));
+}