@laerdal/life-react-components 3.5.1-dev.17 → 3.5.1-dev.18

package/dist/src/Table/TableStyles.js

@@ -1,46 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-/**
- * Import third-party libraries.
- */
-import styled from 'styled-components';
-/**
- * Import custom style properties.
- */
-import { COLORS, focusStyles, scrollBarStyling } from '../styles';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../styles/typography';
-import { Z_INDEXES } from '../styles/z-indexes';
-import { StyledCheckBox } from '../InputFields/Checkbox';
-import { Size } from "../types";
-/**
- * Table styles
- */
-export var TableWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"], ["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200);
-export var StyledTable = styled.table(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"], ["\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"])));
-export var StyledTableHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableHeaderTitle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableHeaderTitleContent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black));
-export var StyledTableHeaderRow = styled.thead(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableHeaderColumns = styled.tr(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableHeaderColumnContent = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"], ["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), COLORS.neutral_200, COLORS.neutral_200);
-export var StyledTableHeaderColumnSortDirection = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n"], ["\n  width: 24px;\n  height: 24px;\n"])));
-export var StyledTableHeaderColumn = styled.th(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
-export var StyledTableBodyRow = styled.tr(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"], ["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), COLORS.white, COLORS.neutral_200, COLORS.primary_100, COLORS.primary_100, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
-export var StyledTableNoRowsLabelRow = styled.tr(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"], ["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), COLORS.neutral_50);
-export var StyledTableBody = styled.tbody(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableCell = styled.td(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""])));
-export var StyledTableCellContent = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  min-height: ", ";\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"], ["\n  min-height: ", ";\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"])), function (props) { return props.withNote ? '64px' : '48px'; }, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
-export var StyledTableCellIcon = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  color: ", ";\n  width: 20px;\n  height: 20px;\n\n  svg {\n    color: ", ";\n    width: 20px;\n    height: 20px;\n  }\n"], ["\n  color: ", ";\n  width: 20px;\n  height: 20px;\n\n  svg {\n    color: ", ";\n    width: 20px;\n    height: 20px;\n  }\n"])), COLORS.neutral_700, COLORS.neutral_700);
-export var StyledTableCellText = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-export var StyledTableCellTextWrapper = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  padding: 12px 0px;\n  width: 100%;\n  ", "\n"], ["\n  padding: 12px 0px;\n  width: 100%;\n  ", "\n"])), function (props) { return !props.textWrap ? "\n  overflow: hidden;\n  text-overflow: ellipsis;\n  " : ""; });
-export var StyledTableCellNoteText = styled.span(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n  display: inline-block;\n  width: 100%;\n"], ["\n  ", "\n  display: inline-block;\n  width: 100%;\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
-export var StyledTableFooter = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableFooterContent = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"], ["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"])), COLORS.neutral_200, COLORS.neutral_200);
-export var StyledTableFooterCurrentInfo = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  padding: 0 16px;\n  ", "\n"], ["\n  padding: 0 16px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
-export var StyledTableFooterControls = styled.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var StyledTableSpinner = styled.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ", ";\n"], ["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ", ";\n"])), function (props) { var _a; return ((_a = props.zindex) !== null && _a !== void 0 ? _a : Z_INDEXES.loader); });
-export var StyledTableFooterCollapseButton = styled.button(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"], ["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"])), COLORS.neutral_200, COLORS.neutral_200, COLORS.white, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), focusStyles, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800);
-export var StyledTableBodyWrapper = styled.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  overflow-x: auto;\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n"], ["\n  overflow-x: auto;\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n"])), scrollBarStyling(Size.Small));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;

package/dist/src/Table/TableTypes.d.ts

@@ -1,199 +0,0 @@
-/// <reference types="react" />
-/**
- * Types for the table.
- */
-import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
-import { ButtonProps } from '../Button/Button';
-import { IconButtonProps } from '../Button/Iconbutton';
-import { HyperlinkProps } from '../HyperLink/HyperLink';
-export interface TableProps {
-    /**
-     * Optional. The title of the table. If provided, a header row will be rendered.
-     */
-    title?: string;
-    /**
-     * Required. An array of TableColumn objects, each representing a column in the table.
-     */
-    columns: TableColumn[];
-    /**
-     * Required. An array of objects, each representing a row in the table.
-     */
-    rows: any[];
-    /**
-     * Optional. A boolean indicating whether the table should have borders.
-     */
-    border?: boolean;
-    /**
-     * Optional. A boolean indicating whether the table should be rendered as an accordion table.
-     * If set to 'true' then there will be no pagination, and all rows will be shown on the first page without pagination controls.
-     */
-    accordion?: boolean;
-    /**
-     * Optional. A boolean indicating initial state of the table if it is shown in 'accordion' mode, if set to true, it will be collapsed.
-     */
-    collapsed?: boolean;
-    /**
-     * Optional. The number of rows to show when the table is shown in accordion mode and collapsed.
-     */
-    collapsedRows?: number;
-    /**
-     * Optional. An object of type TableSortProps, representing the properties for sorting the table.
-     */
-    sortProps?: TableSortProps;
-    /**
-     * Optional. A boolean indicating whether pagination should be done remotely.
-     */
-    remoteOperations?: boolean;
-    /**
-     * Optional. An object of type TablePagination, representing the properties for paginating the table.
-     * Required only if 'remoteOperations' is set to true.
-     */
-    pagination?: TablePagination;
-    /**
-     * Optional. A function to be called when the previous page button is clicked.
-     * Will be called only if 'remoteOperations' is set to true.
-     */
-    onPreviousPageClick?: () => void;
-    /**
-     * Optional. A function to be called when the next page button is clicked.
-     * Will be called only if 'remoteOperations' is set to true.
-     */
-    onNextPageClick?: () => void;
-    /**
-     * Optional. A function to be called when the number of rows per page changes.
-     * Will be called only if 'remoteOperations' is set to true.
-     */
-    onRowsPerPageChange?: (count: number) => void;
-    /**
-     * Optional. A function to be called when the sorting direction changes.
-     * Will be called only if 'remoteOperations' is set to true.
-     */
-    onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void;
-    /**
-     * Optional. A boolean indicating whether a loading indicator should be shown.
-     */
-    showLoadingIndicator?: boolean;
-    /**
-     * Optional. The label to be shown next to the rows per page selector.
-     * Defaults to 'Rows per page'.
-     */
-    rowsPerPageLabel?: string;
-    /**
-     * Optional. The label to be shown when there are no rows in the grid.
-     * Defaults to 'There are no rows to display'
-     */
-    noRowsLabel?: string;
-    /**
-     * Optional. The label to be shown for 'accordion' grid when table is in collapsed state.
-     * Defaults to 'Show more'
-     */
-    showMoreLabel?: string;
-    /**
-     * Optional. The label to be shown for 'accordion' grid when user can 'collapse' some of the rows.
-     * Defaults to 'Show more'
-     */
-    showFewerLabel?: string;
-    /**
-     * Optional. An object representing the properties for a dropdown menu shown in the header of table.
-     */
-    menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;
-    /**
-     * Optional. A boolean indicating whether the rows in the table should be selectable.
-     */
-    selectable?: boolean;
-    /**
-     * Optional. A function to be called when some of the rows get selected or unselected.
-     */
-    onSelectionChange?: (value: any | any[]) => void;
-    /**
-     * Optional. A boolean indicating whether multiple rows can be selected at once.
-     */
-    multiSelect?: boolean;
-    /**
-     * Optional. The key to be used as the unique identifier for each row.
-     */
-    keyExpr?: string;
-    /** Optional. Defines initial state of rows (selected/unselected). */
-    selectedRows?: any[];
-    /** Optional. Z-Index html attribute to be set to loading indicator. */
-    loaderZIndex?: string;
-    /** Optional. Sets value for 'table-layout' css props of Table tag.
-     * If not provided then 'table-layout' will not be set.
-      */
-    layout?: TableLayout;
-}
-export interface TableSortProps {
-    column: string;
-    direction: TableSortingDirection;
-    allowClearingSort?: boolean;
-}
-export interface TableColumn {
-    /**
-     * Required. The key of the column. This should match a key in the row data.
-     */
-    key: string;
-    /**
-     * Optional. The key of the note to be displayed in the column.
-     */
-    noteKey?: string;
-    /**
-     * Required. The name of the column. This will be displayed in the column header.
-     */
-    name: string;
-    /**
-     * Optional. The value to be used for filtering the column.
-     */
-    filterValue?: string;
-    /**
-     * Optional. The icon to be displayed in the column.
-     */
-    icon?: React.ReactNode;
-    /**
-     * Optional. The width of the column. Can be specified as a string (e.g., '100px') or a number (e.g., 100).
-     */
-    width?: string | number;
-    /**
-     * Optional. A function that returns the color for a cell in the column.
-     */
-    colorFn?: (row: any, key: string) => string;
-    /**
-     * Optional. The text alignment for the column. Can be 'right', 'left', or 'center'.
-     */
-    justify?: TableJustification;
-    /**
-     * Optional. A boolean indicating whether the text in the column should be shortened.
-     */
-    shortenText?: boolean;
-    /**
-     * Optional. A function to be called when an action is performed on a cell in the column.
-     */
-    action?: (row: any, event: any) => void;
-    /**
-     * Optional. The type of the column. Can be 'text', 'boolean', 'number', 'custom', 'button', 'icon', or 'link'.
-     */
-    type?: TableColumnTypes;
-    /**
-     * Optional. Additional properties for the column.
-     */
-    additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;
-    /**
-     * Optional. A function that returns custom content for a cell in the column.
-     * Will be used only for button of type 'custom'
-     */
-    customContent?: (row: any, key: string) => any;
-    /**
-     * Optional. A boolean indicating whether the column is sortable.
-     */
-    sortable?: boolean;
-}
-export declare type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
-export declare type TableJustification = 'right' | 'left' | 'center';
-export declare type TableSortingDirection = 'asc' | 'desc';
-export declare type TableLayout = 'auto' | 'fixed';
-export interface TablePagination {
-    from: number;
-    to: number;
-    total: number;
-    currentPage: number;
-    rowsPerPage: number;
-}

package/dist/src/Table/TableTypes.js

@@ -1,2 +0,0 @@
-export {};
-// will override component properties in case of button, icon and link

package/dist/src/Table/index.d.ts

@@ -1,3 +0,0 @@
-export * from './TableTypes';
-export * from './TableStyles';
-export { default as Table } from './Table';

package/dist/src/Table/index.js

@@ -1,3 +0,0 @@
-export * from './TableTypes';
-export * from './TableStyles';
-export { default as Table } from './Table';

package/dist/src/Tabs/HorizontalTabs.d.ts

@@ -1,31 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-export interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Required. Size of the Tabs */
-    size: Size.XSmall | Size.Small | Size.Medium | Size.Large;
-    /** Required: Array of Tabs to show */
-    tabs: HorizontalTab[];
-    /** Optional. For 'default' variant of tabs if this flag is set, then white background will be added to the tabs  */
-    sideFill?: boolean;
-    /** Optional. If set, then whole width of the parent container will be equally split between Tabs, otherwise each tab will take width
-     * required for its content.
-     */
-    fullWidth?: boolean;
-    /** Required. Handler to be called when user tries to change the tab */
-    onTabChange: (to: string) => void;
-    /** Optional. Display variant of the tabs. If not set, then 'default' is used */
-    variant?: 'default' | 'floating';
-}
-export interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {
-    /** Required. Value of the tab */
-    value: string;
-    /** Required. State of the tab, selected or not. Use it to set initial state of the tabs. */
-    selected: boolean;
-    /** Required. URL related with the Tab */
-    to: string;
-}
-declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => React.JSX.Element;
-export default HorizontalTabs;

package/dist/src/Tabs/HorizontalTabs.js

@@ -1,122 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-/**
- * Import custom styles.
- */
-import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
-/**
- * Import third-party libraries.
- */
-import styled from 'styled-components';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles';
-import { Z_INDEXES } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-// Add custom styles
-var HorizontalTabContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ", ";\n  }\n\n"], ["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ", ";\n  }\n\n"])), focusStyles);
-var TabSideFill = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.white);
-var TabButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"], ["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"])), COLORS.neutral_600, Z_INDEXES.active, COLORS.white, COLORS.neutral_800, COLORS.neutral_20, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_500, COLORS.primary_500, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null));
-var HorizontalTabs = function (_a) {
-    var size = _a.size, tabs = _a.tabs, sideFill = _a.sideFill, fullWidth = _a.fullWidth, onTabChange = _a.onTabChange, variant = _a.variant, rest = __rest(_a, ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"]);
-    /**
-     * Informs parent component of tab change and clears focus.
-     * @param to - A link to which user should be navigated.
-     */
-    var doTabChange = function (to) {
-        // Let's inform parent component
-        onTabChange(to);
-        // Let's clear focus
-        if (document.activeElement instanceof HTMLElement) {
-            document.activeElement.blur();
-        }
-    };
-    var _b = React.useState(false), focused = _b[0], setFocused = _b[1];
-    var _c = React.useState(), currentTab = _c[0], setCurrentTab = _c[1];
-    React.useEffect(function () {
-        var selectedTab = tabs.find(function (x) { return x.selected && !x.disabled; });
-        if (selectedTab)
-            setCurrentTab(selectedTab.to);
-    }, [tabs]);
-    var tabListBlur = function () { return setFocused(false); };
-    var tabListFocus = function (e) { return setFocused(true); };
-    var changeTabInternal = function (tab) {
-        tab.selected = true;
-        tabs.forEach(function (x) {
-            if (x.to != tab.to)
-                x.selected = false;
-        });
-        setCurrentTab(tab.to);
-        onTabChange(tab.to);
-    };
-    var tabListKeyDown = function (e) {
-        if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
-            e.preventDefault();
-            if (e.key === 'ArrowRight') {
-                tabs.forEach(function (x, i) {
-                    if (x.to != currentTab)
-                        return;
-                    for (var j = 1; j < tabs.length - 1; j++) {
-                        var nextIndex = j + i;
-                        if (nextIndex > tabs.length - 1)
-                            nextIndex = nextIndex - tabs.length;
-                        if (tabs[nextIndex].disabled)
-                            continue;
-                        changeTabInternal(tabs[nextIndex]);
-                        break;
-                    }
-                });
-            }
-            if (e.key === 'ArrowLeft') {
-                tabs.forEach(function (x, i) {
-                    if (x.to != currentTab)
-                        return;
-                    for (var j = 1; j < tabs.length - 1; j++) {
-                        var nextIndex = i - j;
-                        if (nextIndex < 0)
-                            nextIndex = nextIndex + tabs.length;
-                        if (tabs[nextIndex].disabled)
-                            continue;
-                        changeTabInternal(tabs[nextIndex]);
-                        break;
-                    }
-                });
-            }
-        }
-    };
-    return (React.createElement(HorizontalTabContainer, __assign({ tabIndex: 0, onBlur: tabListBlur, onFocus: tabListFocus, onKeyDown: tabListKeyDown, role: "tablist", "data-testid": 'horizontal-tabs-container' }, rest),
-        variant !== 'floating' && React.createElement(TabSideFill, { tabIndex: -1, className: "".concat(sideFill ? 'fill' : '') }),
-        tabs.map(function (tab, index) {
-            var value = tab.value, selected = tab.selected, to = tab.to, disabled = tab.disabled, className = tab.className, rest = __rest(tab, ["value", "selected", "to", "disabled", "className"]);
-            return (React.createElement(TabButton, __assign({ role: "tab", "data-testid": "tab_".concat(value), key: "".concat(tab, "_").concat(index), "aria-selected": selected, "aria-expanded": selected, tabIndex: -1, onMouseDown: defaultOnMouseDownHandler, style: fullWidth ? { width: "".concat(100 / tabs.length, "%") } : {}, disabled: disabled, className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''), onClick: function () { return !disabled && changeTabInternal(tab); } }, rest), tab.value));
-        })));
-};
-export default HorizontalTabs;
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/Tabs/TabLink.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { NavLinkProps } from 'react-router-dom';
-import { Size } from '../types';
-declare const TabLink: React.ForwardRefExoticComponent<{
-    disabled?: boolean | undefined;
-    forceDeactivate?: boolean | undefined;
-    requiredLine: string;
-    optionalLine?: string | undefined;
-    OptionalLineIcon?: React.ReactNode;
-    endLineIcon?: React.ReactNode;
-    onLinkClick?: ((e: React.MouseEvent) => void) | undefined;
-    testId?: string | undefined;
-    onActiveStateChanged?: ((state: boolean) => void) | undefined;
-    showNotificationDot?: boolean | undefined;
-    size?: Size.Small | Size.Medium | Size.Large | undefined;
-    variant?: "critical" | "positive" | undefined;
-    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
-} & NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export default TabLink;

package/dist/src/Tabs/TabLink.js

@@ -1,76 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { NavLink } from 'react-router-dom';
-import styled from 'styled-components';
-import { NotificationDot } from '../NotificationDot';
-import { Size } from '../types';
-import { COLORS, focusStyles } from '../styles';
-import { Z_INDEXES } from '../styles/z-indexes';
-import { defaultOnMouseDownHandler } from '../common';
-import { useState } from 'react';
-var OptionalLineWrapperWithIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
-var TopWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
-var TextContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"], ["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
-var StyledNotification = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 15px 0 0 !important;\n"], ["\n  margin: 0 15px 0 0 !important;\n"])));
-var EndLineIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0 15px 0 0 !important;\n"], ["\n  margin: 0 15px 0 0 !important;\n"])));
-var OptionalLineWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 12px;\n"], ["\n  font-size: 12px;\n"])));
-//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
-var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n\n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"], ["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n\n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_600, function (props) { return (props.disabled ? COLORS.neutral_100 : 'transparent'); }, function (props) { return (props.disabled ? 'not-allowed' : 'pointer'); }, focusStyles, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
-var TabLink = React.forwardRef(function (_a, ref) {
-    var to = _a.to, _b = _a.disabled, disabled = _b === void 0 ? false : _b, requiredLine = _a.requiredLine, optionalLine = _a.optionalLine, OptionalLineIcon = _a.OptionalLineIcon, onLinkClick = _a.onLinkClick, forceDeactivate = _a.forceDeactivate, testId = _a.testId, _c = _a.showNotificationDot, showNotificationDot = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? Size.Small : _d, endLineIcon = _a.endLineIcon, onActiveStateChanged = _a.onActiveStateChanged, _e = _a.variant, variant = _e === void 0 ? 'critical' : _e, children = _a.children, containerOnMouseEnter = _a.containerOnMouseEnter, containerOnMouseLeave = _a.containerOnMouseLeave, className = _a.className, rest = __rest(_a, ["to", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"]);
-    var _f = useState(false), activeState = _f[0], setActiveState = _f[1];
-    return (React.createElement(Wrapper, { disabled: disabled, className: disabled ? 'disabled' : '', onMouseEnter: containerOnMouseEnter, onMouseLeave: containerOnMouseLeave },
-        React.createElement(React.Fragment, null,
-            React.createElement(NavLink, __assign({ to: forceDeactivate ? 'invalid' : to.toString(), 
-                //disabled={disabled}
-                className: function (_a) {
-                    var isActive = _a.isActive;
-                    onActiveStateChanged && onActiveStateChanged(activeState);
-                    if (forceDeactivate) {
-                        if (disabled)
-                            return 'disabled';
-                        else
-                            return '';
-                    }
-                    if (isActive != activeState)
-                        setActiveState(isActive);
-                    return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
-                }, onMouseDown: defaultOnMouseDownHandler, tabIndex: disabled ? -1 : 0, role: "tab", "aria-selected": activeState, onClick: function (e) { return !disabled && onLinkClick && onLinkClick(e); }, ref: ref, "data-testid": testId }, rest),
-                React.createElement(TextContainer, null,
-                    React.createElement(TopWrapper, null,
-                        React.createElement("span", null, requiredLine)),
-                    optionalLine && OptionalLineIcon ? (React.createElement(OptionalLineWrapperWithIcon, null,
-                        OptionalLineIcon,
-                        !!optionalLine && React.createElement("span", null, optionalLine))) : optionalLine ? (React.createElement(OptionalLineWrapper, null,
-                        React.createElement("span", null, optionalLine))) : (React.createElement(React.Fragment, null))),
-                React.createElement(StyledNotification, null, showNotificationDot && React.createElement(NotificationDot, { testId: "NotificationDot", size: size, variant: variant })),
-                endLineIcon && React.createElement(EndLineIcon, null, endLineIcon)),
-            children)));
-});
-export default TabLink;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/Tabs/Tabs.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Size } from '../types';
-declare type TabsProps = {
-    children?: any;
-    size: Size;
-};
-declare const Tabs: React.FunctionComponent<TabsProps>;
-export default Tabs;

package/dist/src/Tabs/Tabs.js

@@ -1,62 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { Size } from '../types';
-var getHeight = function (size) {
-    switch (size) {
-        case Size.Small:
-            return '48px';
-        case Size.Medium:
-            return '56px';
-        case Size.Large:
-            return '64px';
-        default:
-            return '48px';
-    }
-};
-var getFontSize = function (size) {
-    switch (size) {
-        case Size.Small:
-            return '16px';
-        case Size.Medium:
-            return '18px';
-        case Size.Large:
-            return '20px';
-        default:
-            return '20px';
-    }
-};
-var getTopMargin = function (size) {
-    switch (size) {
-        case Size.Small:
-            return '6px';
-        case Size.Medium:
-            return '10px';
-        case Size.Large:
-            return '12px';
-        default:
-            return '12px';
-    }
-};
-var getBottomMargin = function (size) {
-    switch (size) {
-        case Size.Small:
-            return '2px';
-        case Size.Medium:
-            return '3px';
-        case Size.Large:
-            return '4px';
-        default:
-            return '4px';
-    }
-};
-var Nav = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ", ";\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ", ";\n    margin: ", " 0 ", " 16px;\n  }\n  a > div:only-of-type {\n    font-size: ", ";\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ", ";\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ", ";\n    margin: ", " 0 ", " 16px;\n  }\n  a > div:only-of-type {\n    font-size: ", ";\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n"])), function (props) { return getHeight(props.size); }, function (props) { return getFontSize(props.size); }, function (props) { return getTopMargin(props.size); }, function (props) { return getBottomMargin(props.size); }, function (props) { return getFontSize(props.size); });
-var Tabs = function (_a) {
-    var children = _a.children, size = _a.size;
-    return (React.createElement(Nav, { role: "tablist", size: size }, children));
-};
-export default Tabs;
-var templateObject_1;