@laerdal/life-react-components 3.5.2 → 3.5.3

package/dist/Table/TableTypes.d.ts

@@ -7,119 +7,32 @@ 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 {
@@ -128,62 +41,19 @@ export interface TableSortProps {
     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 type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';

package/dist/Table/TableTypes.js.map

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

package/dist/Table/index.cjs

@@ -10,7 +10,7 @@ var _exportNames = {
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
-    return _Table["default"];
+    return _Table.default;
   }
 });
 var _TableTypes = require("./TableTypes");

package/dist/Table/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_TableTypes","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_TableStyles","_Table","_interopRequireDefault"],"sources":["../../src/Table/index.ts"],"sourcesContent":["export * from './TableTypes'\r\nexport * from './TableStyles';\r\nexport {default as Table} from './Table';\r\n"],"mappings":";;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAb,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,YAAA,GAAAb,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAW,YAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,YAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,YAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AACA,IAAAU,MAAA,GAAAC,sBAAA,CAAAf,OAAA","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Table/index.ts"],"sourcesContent":["export * from './TableTypes'\r\nexport * from './TableStyles';\r\nexport {default as Table} from './Table';\r\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA"}

package/dist/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Table"],"sources":["../../src/Table/index.ts"],"sourcesContent":["export * from './TableTypes'\r\nexport * from './TableStyles';\r\nexport {default as Table} from './Table';\r\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,SAAQA,OAAO,IAAIC,KAAK,QAAO,SAAS","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","Table"],"sources":["../../src/Table/index.ts"],"sourcesContent":["export * from './TableTypes'\r\nexport * from './TableStyles';\r\nexport {default as Table} from './Table';\r\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,SAAQA,OAAO,IAAIC,KAAK,QAAO,SAAS"}

package/dist/Tabs/HorizontalTabs.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -20,57 +20,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
   _excluded2 = ["value", "selected", "to", "disabled", "className"];
 var _templateObject, _templateObject2, _templateObject3;
-/**
- * Import React libraries.
- */
-/**
- * Import custom styles.
- */
-/**
- * Import third-party libraries.
- */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // Add custom styles
-var HorizontalTabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ", ";\n  }\n\n"])), _styles.focusStyles);
-var TabSideFill = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('white', props.theme);
-});
-var TabButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
-  return _styles.COLORS.getColor('neutral_600', props.theme);
-}, _styles.Z_INDEXES.active, function (props) {
-  return _styles.COLORS.getColor('white', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_800', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_20', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_20', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, _types.Size.XSmall, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
+var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ", ";\n  }\n\n"])), _styles.focusStyles);
+var TabSideFill = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
+var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.neutral_600, _styles.Z_INDEXES.active, _styles.COLORS.white, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_500, _styles.COLORS.primary_500, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
 
 // Add component-specific types
 
@@ -81,7 +38,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     fullWidth = _ref.fullWidth,
     onTabChange = _ref.onTabChange,
     variant = _ref.variant,
-    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   /**
    * Informs parent component of tab change and clears focus.
    * @param to - A link to which user should be navigated.
@@ -96,11 +53,11 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     }
   };
   var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     focused = _React$useState2[0],
     setFocused = _React$useState2[1];
   var _React$useState3 = React.useState(),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
     currentTab = _React$useState4[0],
     setCurrentTab = _React$useState4[1];
   React.useEffect(function () {
@@ -169,7 +126,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
         to = tab.to,
         disabled = tab.disabled,
         className = tab.className,
-        rest = (0, _objectWithoutProperties2["default"])(tab, _excluded2);
+        rest = (0, _objectWithoutProperties2.default)(tab, _excluded2);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabButton, _objectSpread(_objectSpread({
         role: "tab",
         "data-testid": "tab_".concat(value),
@@ -192,16 +149,16 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
   }));
 };
 HorizontalTabs.propTypes = {
-  tabs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    value: _propTypes["default"].string.isRequired,
-    selected: _propTypes["default"].bool.isRequired,
-    to: _propTypes["default"].string.isRequired
+  tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.string.isRequired,
+    selected: _propTypes.default.bool.isRequired,
+    to: _propTypes.default.string.isRequired
   })).isRequired,
-  sideFill: _propTypes["default"].bool,
-  fullWidth: _propTypes["default"].bool,
-  onTabChange: _propTypes["default"].func.isRequired,
-  variant: _propTypes["default"].oneOf(['default', 'floating'])
+  sideFill: _propTypes.default.bool,
+  fullWidth: _propTypes.default.bool,
+  onTabChange: _propTypes.default.func.isRequired,
+  variant: _propTypes.default.oneOf(['default', 'floating'])
 };
 var _default = HorizontalTabs;
-exports["default"] = _default;
+exports.default = _default;
 //# sourceMappingURL=HorizontalTabs.cjs.map

package/dist/Tabs/HorizontalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.cjs","names":["React","_interopRequireWildcard","require","_types","_styles","_styledComponents","_interopRequireDefault","_common","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","HorizontalTabContainer","styled","div","_taggedTemplateLiteral2","focusStyles","TabSideFill","props","COLORS","getColor","theme","TabButton","button","Z_INDEXES","active","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","_ref","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","_objectWithoutProperties2","doTabChange","to","document","activeElement","HTMLElement","blur","_React$useState","useState","_React$useState2","_slicedToArray2","focused","setFocused","_React$useState3","_React$useState4","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","changeTabInternal","tab","tabListKeyDown","key","preventDefault","j","nextIndex","jsxs","tabIndex","onBlur","onFocus","onKeyDown","role","children","jsx","className","concat","map","index","value","onMouseDown","defaultOnMouseDownHandler","style","width","onClick","propTypes","_propTypes","arrayOf","shape","string","isRequired","bool","func","oneOf","_default","exports"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport Colors from \"../styles/colors\";\r\n\r\n// Add custom styles\r\nconst HorizontalTabContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  position: relative;\r\n  flex-direction: row;\r\n\r\n  &:focus {\r\n    ${focusStyles};\r\n  }\r\n\r\n`;\r\n\r\nconst TabSideFill = styled.div`\r\n  position: absolute;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  bottom: 0;\r\n  width: 100%;\r\n\r\n  &.fill {\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nconst TabButton = styled.button`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  border: none;\r\n  background-color: transparent;\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: flex;\r\n  box-sizing: border-box;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 0;\r\n\r\n  &[aria-selected=\"true\"] {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.floating {\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  &.selected {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &.selected.floating {\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  }\r\n\r\n  &.default {\r\n    border-left: 1px solid transparent;\r\n    border-right: 1px solid transparent;\r\n  }\r\n  \r\n  &.default.selected {\r\n    border-left: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    border-right: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &.selected:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -1px;\r\n    right: -1px;\r\n    height: 2px;\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n  }\r\n\r\n  &.selected.floating:after {\r\n    top: unset;\r\n    bottom: 1px;\r\n    left: 1px;\r\n    right: 1px;\r\n    height: 2px;\r\n    border-radius: 2px;\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n  }\r\n\r\n\r\n  &:hover, &:hover.selected {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:hover:after {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:active, &:active.selected {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    outline: none;\r\n  }\r\n\r\n  &:active:after {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background: transparent;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  // Sizes\r\n  &.${Size.XSmall} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 32px;\r\n    margin-top: 16px;\r\n  }\r\n\r\n  &.${Size.Small} {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 40px;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  &.${Size.Medium} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    height: 48px;\r\n    min-width: 96px;\r\n    padding: 0 16px;\r\n  }\r\n\r\n  &.${Size.Large} {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    height: 56px;\r\n    min-width: 144px;\r\n    padding: 0 16px;\r\n  }\r\n`;\r\n\r\n// Add component-specific types\r\nexport interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Required. Size of the Tabs */\r\n  size: Size.XSmall | Size.Small | Size.Medium | Size.Large;\r\n  /** Required: Array of Tabs to show */\r\n  tabs: HorizontalTab[];\r\n  /** Optional. For 'default' variant of tabs if this flag is set, then white background will be added to the tabs  */\r\n  sideFill?: boolean;\r\n  /** Optional. If set, then whole width of the parent container will be equally split between Tabs, otherwise each tab will take width \r\n   * required for its content.\r\n   */\r\n  fullWidth?: boolean;\r\n  /** Required. Handler to be called when user tries to change the tab */\r\n  onTabChange: (to: string) => void;\r\n  /** Optional. Display variant of the tabs. If not set, then 'default' is used */\r\n  variant?: 'default' | 'floating';\r\n}\r\n\r\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\r\n  /** Required. Value of the tab */\r\n  value: string;\r\n  /** Required. State of the tab, selected or not. Use it to set initial state of the tabs. */\r\n  selected: boolean;\r\n  /** Required. URL related with the Tab */\r\n  to: string;\r\n}\r\n\r\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\r\n  /**\r\n   * Informs parent component of tab change and clears focus.\r\n   * @param to - A link to which user should be navigated.\r\n   */\r\n  const doTabChange = (to: string): void => {\r\n    // Let's inform parent component\r\n    onTabChange(to);\r\n\r\n    // Let's clear focus\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement!.blur();\r\n    }\r\n  };\r\n\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const [currentTab, setCurrentTab] = React.useState<string>();\r\n\r\n  React.useEffect(() => {\r\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\r\n    if (selectedTab)\r\n      setCurrentTab(selectedTab.to);\r\n  }, [tabs]);\r\n\r\n  const tabListBlur = () => setFocused(false);\r\n\r\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\r\n\r\n  const changeTabInternal = (tab: HorizontalTab) => {\r\n    tab.selected = true;\r\n    tabs.forEach(x => {\r\n      if (x.to != tab.to)\r\n        x.selected = false;\r\n    });\r\n    setCurrentTab(tab.to);\r\n    onTabChange(tab.to);\r\n  }\r\n\r\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\r\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\r\n      e.preventDefault();\r\n      if (e.key === 'ArrowRight') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = j + i;\r\n            if (nextIndex > tabs.length - 1)\r\n              nextIndex = nextIndex - tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n\r\n      if (e.key === 'ArrowLeft') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = i - j;\r\n            if (nextIndex < 0)\r\n              nextIndex = nextIndex + tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\r\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\r\n      {\r\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\r\n      }\r\n      {tabs.map((tab: HorizontalTab, index: number) => {\r\n        const {value, selected, to, disabled, className, ...rest} = tab;\r\n        return (\r\n          <TabButton\r\n            role=\"tab\"\r\n            data-testid={`tab_${value}`}\r\n            key={`${tab}_${index}`}\r\n            aria-selected={selected}\r\n            aria-expanded={selected}\r\n            tabIndex={-1}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\r\n            disabled={disabled}\r\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\r\n            onClick={() => !disabled && changeTabInternal(tab)}\r\n            {...rest}>\r\n            {tab.value}\r\n          </TabButton>\r\n        );\r\n      })}\r\n    </HorizontalTabContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalTabs;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","focusStyles","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_600","Z_INDEXES","active","neutral_800","neutral_20","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","doTabChange","to","document","activeElement","HTMLElement","blur","React","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","defaultOnMouseDownHandler","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport Colors from \"../styles/colors\";\r\n\r\n// Add custom styles\r\nconst HorizontalTabContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  position: relative;\r\n  flex-direction: row;\r\n\r\n  &:focus {\r\n    ${focusStyles};\r\n  }\r\n\r\n`;\r\n\r\nconst TabSideFill = styled.div`\r\n  position: absolute;\r\n  border-bottom: 1px solid ${COLORS.neutral_100};\r\n  bottom: 0;\r\n  width: 100%;\r\n\r\n  &.fill {\r\n    background: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst TabButton = styled.button`\r\n  color: ${COLORS.neutral_600};\r\n  border: none;\r\n  background-color: transparent;\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: flex;\r\n  box-sizing: border-box;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 0;\r\n\r\n  &[aria-selected=\"true\"] {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.floating {\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  &.selected {\r\n    background-color: ${COLORS.white};\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &.selected.floating {\r\n    background-color: ${COLORS.neutral_20};\r\n  }\r\n\r\n  &.default {\r\n    border-left: 1px solid transparent;\r\n    border-right: 1px solid transparent;\r\n  }\r\n  \r\n  &.default.selected {\r\n    border-left: 1px solid ${COLORS.neutral_100};\r\n    border-right: 1px solid ${COLORS.neutral_100};\r\n  }\r\n\r\n  &.selected:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -1px;\r\n    right: -1px;\r\n    height: 2px;\r\n    background-color: ${COLORS.primary_500};\r\n  }\r\n\r\n  &.selected.floating:after {\r\n    top: unset;\r\n    bottom: 1px;\r\n    left: 1px;\r\n    right: 1px;\r\n    height: 2px;\r\n    border-radius: 2px;\r\n    background-color: ${COLORS.primary_500};\r\n  }\r\n\r\n\r\n  &:hover, &:hover.selected {\r\n    background: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:hover:after {\r\n    background-color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active, &:active.selected {\r\n    background: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n    outline: none;\r\n  }\r\n\r\n  &:active:after {\r\n    background-color: ${COLORS.primary_800};\r\n  }\r\n\r\n  &:disabled {\r\n    color: ${COLORS.neutral_300};\r\n    background: transparent;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  // Sizes\r\n  &.${Size.XSmall} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 32px;\r\n    margin-top: 16px;\r\n  }\r\n\r\n  &.${Size.Small} {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 40px;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  &.${Size.Medium} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    height: 48px;\r\n    min-width: 96px;\r\n    padding: 0 16px;\r\n  }\r\n\r\n  &.${Size.Large} {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    height: 56px;\r\n    min-width: 144px;\r\n    padding: 0 16px;\r\n  }\r\n`;\r\n\r\n// Add component-specific types\r\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size: Size;\r\n  tabs: HorizontalTab[];\r\n  sideFill?: boolean;\r\n  fullWidth?: boolean;\r\n  onTabChange: (to: string) => void;\r\n  variant?: 'default' | 'floating';\r\n}\r\n\r\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\r\n  value: string;\r\n  selected: boolean;\r\n  to: string;\r\n}\r\n\r\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\r\n  /**\r\n   * Informs parent component of tab change and clears focus.\r\n   * @param to - A link to which user should be navigated.\r\n   */\r\n  const doTabChange = (to: string): void => {\r\n    // Let's inform parent component\r\n    onTabChange(to);\r\n\r\n    // Let's clear focus\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement!.blur();\r\n    }\r\n  };\r\n\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const [currentTab, setCurrentTab] = React.useState<string>();\r\n\r\n  React.useEffect(() => {\r\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\r\n    if (selectedTab)\r\n      setCurrentTab(selectedTab.to);\r\n  }, [tabs]);\r\n\r\n  const tabListBlur = () => setFocused(false);\r\n\r\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\r\n\r\n  const changeTabInternal = (tab: HorizontalTab) => {\r\n    tab.selected = true;\r\n    tabs.forEach(x => {\r\n      if (x.to != tab.to)\r\n        x.selected = false;\r\n    });\r\n    setCurrentTab(tab.to);\r\n    onTabChange(tab.to);\r\n  }\r\n\r\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\r\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\r\n      e.preventDefault();\r\n      if (e.key === 'ArrowRight') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = j + i;\r\n            if (nextIndex > tabs.length - 1)\r\n              nextIndex = nextIndex - tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n\r\n      if (e.key === 'ArrowLeft') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = i - j;\r\n            if (nextIndex < 0)\r\n              nextIndex = nextIndex + tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\r\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\r\n      {\r\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\r\n      }\r\n      {tabs.map((tab: HorizontalTab, index: number) => {\r\n        const {value, selected, to, disabled, className, ...rest} = tab;\r\n        return (\r\n          <TabButton\r\n            role=\"tab\"\r\n            data-testid={`tab_${value}`}\r\n            key={`${tab}_${index}`}\r\n            aria-selected={selected}\r\n            aria-expanded={selected}\r\n            tabIndex={-1}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\r\n            disabled={disabled}\r\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\r\n            onClick={() => !disabled && changeTabInternal(tab)}\r\n            {...rest}>\r\n            {tab.value}\r\n          </TabButton>\r\n        );\r\n      })}\r\n    </HorizontalTabContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalTabs;\r\n"],"mappings":"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"}

package/dist/Tabs/HorizontalTabs.d.ts

@@ -3,29 +3,18 @@
  */
 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 */
+interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {
+    size: Size;
     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;
+declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => JSX.Element;
 export default HorizontalTabs;

package/dist/Tabs/HorizontalTabs.js

@@ -6,8 +6,8 @@ import _pt from "prop-types";
 var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
   _excluded2 = ["value", "selected", "to", "disabled", "className"];
 var _templateObject, _templateObject2, _templateObject3;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
  * Import React libraries.
  */
@@ -30,42 +30,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 // Add custom styles
 var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('white', props.theme);
-});
-var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), function (props) {
-  return COLORS.getColor('neutral_600', props.theme);
-}, Z_INDEXES.active, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_20', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_20', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, 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 TabSideFill = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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));
 
 // Add component-specific types