@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/Table/TableTypes.d.ts

@@ -1,199 +1,198 @@
-/// <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 type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
-export type TableJustification = 'right' | 'left' | 'center';
-export type TableSortingDirection = 'asc' | 'desc';
-export type TableLayout = 'auto' | 'fixed';
-export interface TablePagination {
-    from: number;
-    to: number;
-    total: number;
-    currentPage: number;
-    rowsPerPage: number;
-}
+/**
+ * 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 type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
+export type TableJustification = 'right' | 'left' | 'center';
+export type TableSortingDirection = 'asc' | 'desc';
+export type TableLayout = 'auto' | 'fixed';
+export interface TablePagination {
+    from: number;
+    to: number;
+    total: number;
+    currentPage: number;
+    rowsPerPage: number;
+}

package/dist/Table/index.d.ts

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

package/dist/Tabs/HorizontalTabs.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _types = require("../types");
@@ -17,7 +16,6 @@ var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
   _excluded2 = ["value", "selected", "to", "disabled", "className"];
-var _templateObject, _templateObject2, _templateObject3;
 /**
  * Import React libraries.
  */
@@ -32,9 +30,141 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
 // Add custom styles
-const 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);
-const 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"])), props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('white', props.theme));
-const 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"])), props => _styles.COLORS.getColor('neutral_600', props.theme), _styles.Z_INDEXES.active, props => _styles.COLORS.getColor('white', props.theme), props => _styles.COLORS.getColor('neutral_800', props.theme), props => _styles.COLORS.getColor('neutral_20', props.theme), props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('primary_500', props.theme), props => _styles.COLORS.getColor('primary_500', props.theme), props => _styles.COLORS.getColor('primary_20', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_100', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _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));
+const HorizontalTabContainer = _styledComponents.default.div`
+  width: 100%;
+  display: flex;
+  position: relative;
+  flex-direction: row;
+
+  &:focus {
+    ${_styles.focusStyles};
+  }
+
+`;
+const TabSideFill = _styledComponents.default.div`
+  position: absolute;
+  border-bottom: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+  bottom: 0;
+  width: 100%;
+
+  &.fill {
+    background: ${props => _styles.COLORS.getColor('white', props.theme)};
+  }
+`;
+const TabButton = _styledComponents.default.button`
+  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+  border: none;
+  background-color: transparent;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+
+  &[aria-selected="true"] {
+    z-index: ${_styles.Z_INDEXES.active};
+  }
+
+  &.floating {
+    border-radius: 2px;
+  }
+  
+  &.selected {
+    background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+    color: ${props => _styles.COLORS.getColor('neutral_800', props.theme)};
+  }
+
+  &.selected.floating {
+    background-color: ${props => _styles.COLORS.getColor('neutral_20', props.theme)};
+  }
+
+  &.default {
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+  }
+  
+  &.default.selected {
+    border-left: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    border-right: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+  }
+
+  &.selected:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -1px;
+    right: -1px;
+    height: 2px;
+    background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
+  }
+
+  &.selected.floating:after {
+    top: unset;
+    bottom: 1px;
+    left: 1px;
+    right: 1px;
+    height: 2px;
+    border-radius: 2px;
+    background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
+  }
+
+
+  &:hover, &:hover.selected {
+    background: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+  }
+
+  &:hover:after {
+    background-color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+  }
+
+  &:active, &:active.selected {
+    background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+    color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    outline: none;
+  }
+
+  &:active:after {
+    background-color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+  }
+
+  &:disabled {
+    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    background: transparent;
+    cursor: not-allowed;
+  }
+
+  // Sizes
+  &.${_types.Size.XSmall} {
+    ${(0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null)}
+    padding: 0px 16px;
+    height: 32px;
+    margin-top: 16px;
+  }
+
+  &.${_types.Size.Small} {
+    ${(0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null)}
+    padding: 0px 16px;
+    height: 40px;
+    margin-top: 8px;
+  }
+
+  &.${_types.Size.Medium} {
+    ${(0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null)}
+    height: 48px;
+    min-width: 96px;
+    padding: 0 16px;
+  }
+
+  &.${_types.Size.Large} {
+    ${(0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)}
+    height: 56px;
+    min-width: 144px;
+    padding: 0 16px;
+  }
+`;
 
 // Add component-specific types
 
@@ -116,7 +246,7 @@ const HorizontalTabs = _ref => {
   }, rest), {}, {
     children: [variant !== 'floating' && /*#__PURE__*/(0, _jsxRuntime.jsx)(TabSideFill, {
       tabIndex: -1,
-      className: "".concat(sideFill ? 'fill' : '')
+      className: `${sideFill ? 'fill' : ''}`
     }), tabs.map((tab, index) => {
       const {
           value,
@@ -128,20 +258,20 @@ const HorizontalTabs = _ref => {
         rest = (0, _objectWithoutProperties2.default)(tab, _excluded2);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabButton, _objectSpread(_objectSpread({
         role: "tab",
-        "data-testid": "tab_".concat(value),
+        "data-testid": `tab_${value}`,
         "aria-selected": selected,
         "aria-expanded": selected,
         tabIndex: -1,
         onMouseDown: _common.defaultOnMouseDownHandler,
         style: fullWidth ? {
-          width: "".concat(100 / tabs.length, "%")
+          width: `${100 / tabs.length}%`
         } : {},
         disabled: disabled,
-        className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''),
+        className: `${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`,
         onClick: () => !disabled && changeTabInternal(tab)
       }, rest), {}, {
         children: tab.value
-      }), "".concat(tab, "_").concat(index));
+      }), `${tab}_${index}`);
     })]
   }));
 };