@wireapp/react-ui-kit 9.61.1 → 9.62.0

package/lib/Inputs/Select/Select.d.ts

@@ -17,6 +17,9 @@ export interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Op
     wrapperCSS?: CSSObject;
     selectControlCSS?: CSSObject;
     selectContainerCSS?: CSSObject;
+    selectMenuCSS?: CSSObject;
+    selectGroupCSS?: CSSObject;
+    selectGroupHeadingCSS?: CSSObject;
     label?: string;
     helperText?: string;
     error?: ReactElement;
@@ -26,6 +29,7 @@ export interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Op
     isSearchable?: boolean;
     overlayMenu?: boolean;
     menuListHeading?: string;
+    hideControl?: boolean;
 }
-export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, selectControlCSS, selectContainerCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, selectControlCSS, selectContainerCSS, selectMenuCSS, selectGroupCSS, selectGroupHeadingCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, hideControl, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

package/lib/Inputs/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Select/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAevF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CACnF,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,yOAmBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDAuE7B,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Select/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAevF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CACnF,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,OAAO,UAAU,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,4SAuBpF,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,qDA2E7B,CAAC"}

package/lib/Inputs/Select/Select.js

@@ -17,7 +17,7 @@ const SelectOption_1 = require("./SelectOption/SelectOption");
 const SelectValueContainer_1 = require("./SelectValueContainer/SelectValueContainer");
 const enums_1 = require("../../utils/enums");
 const InputLabel_1 = require("../InputLabel");
-const Select = ({ id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, menuCSS = {}, selectControlCSS = {}, selectContainerCSS = {}, markInvalid = false, required = false, isSearchable = false, overlayMenu = true, menuListHeading, ...props }) => {
+const Select = ({ id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, menuCSS = {}, selectControlCSS = {}, selectContainerCSS = {}, selectMenuCSS = {}, selectGroupCSS = {}, selectGroupHeadingCSS = {}, markInvalid = false, required = false, isSearchable = false, overlayMenu = true, menuListHeading, hideControl = false, ...props }) => {
     const theme = (0, react_1.useTheme)();
     const hasError = !!error;
     return ((0, jsx_runtime_1.jsxs)("div", { 
@@ -35,6 +35,9 @@ const Select = ({ id, label, error, helperText, disabled = false, dataUieName, o
                     menuPosition: overlayMenu ? 'absolute' : 'relative',
                     controlCSS: selectControlCSS,
                     containerCSS: selectContainerCSS,
+                    menuCSS: selectMenuCSS,
+                    groupCSS: selectGroupCSS,
+                    groupHeadingCSS: selectGroupHeadingCSS,
                 }), components: {
                     SelectContainer: SelectContainer_1.SelectContainer,
                     DropdownIndicator: BaseSelectDropdownIndicator_1.BaseSelectDropdownIndicator,
@@ -42,6 +45,7 @@ const Select = ({ id, label, error, helperText, disabled = false, dataUieName, o
                     Menu: (0, SelectMenu_1.SelectMenu)(dataUieName, menuCSS),
                     ValueContainer: SelectValueContainer_1.SelectValueContainer,
                     IndicatorsContainer: SelectIndicatorsContainer_1.SelectIndicatorsContainer,
+                    ...(hideControl && { Control: () => null }),
                     ...(menuListHeading && { MenuList: (0, SelectMenuList_1.SelectMenuList)(menuListHeading, dataUieName) }),
                 }, tabIndex: enums_1.TabIndex.UNFOCUSABLE, isDisabled: disabled, hideSelectedOptions: false, isSearchable: isSearchable, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options, ...props }), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
                     fontSize: theme.fontSizes.small,

package/lib/Inputs/Select/Select.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: <IsMulti extends boolean = false, Group extends import("react-select").GroupBase<import("./Select").Option> = import("react-select").GroupBase<import("./Select").Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, selectControlCSS, selectContainerCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, ...props }: import("./Select").SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    component: <IsMulti extends boolean = false, Group extends import("react-select").GroupBase<import("./Select").Option> = import("react-select").GroupBase<import("./Select").Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, menuCSS, selectControlCSS, selectContainerCSS, selectMenuCSS, selectGroupCSS, selectGroupHeadingCSS, markInvalid, required, isSearchable, overlayMenu, menuListHeading, hideControl, ...props }: import("./Select").SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
@@ -14,6 +14,9 @@ declare const meta: {
         wrapperCSS?: import("@emotion/serialize").CSSObject;
         selectControlCSS?: import("@emotion/serialize").CSSObject;
         selectContainerCSS?: import("@emotion/serialize").CSSObject;
+        selectMenuCSS?: import("@emotion/serialize").CSSObject;
+        selectGroupCSS?: import("@emotion/serialize").CSSObject;
+        selectGroupHeadingCSS?: import("@emotion/serialize").CSSObject;
         label?: string;
         helperText?: string;
         error?: import("react").ReactElement;
@@ -23,6 +26,7 @@ declare const meta: {
         isSearchable?: boolean;
         overlayMenu?: boolean;
         menuListHeading?: string;
+        hideControl?: boolean;
         form?: string;
         name?: string;
         placeholder?: import("react").ReactNode;

package/lib/Inputs/Select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Select/Select.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAUrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Select/Select.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAUrD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC"}

package/lib/Inputs/Select/Select.styles.d.ts

@@ -8,7 +8,10 @@ interface CustomStylesParams {
     menuPosition?: 'absolute' | 'relative';
     controlCSS: CSSObject;
     containerCSS: CSSObject;
+    menuCSS: CSSObject;
+    groupCSS: CSSObject;
+    groupHeadingCSS: CSSObject;
 }
-export declare const customStyles: ({ theme, markInvalid, menuPosition, controlCSS, containerCSS, }: CustomStylesParams) => StylesConfig<Option, false, GroupBase<Option>>;
+export declare const customStyles: ({ theme, markInvalid, menuPosition, controlCSS, containerCSS, menuCSS, groupCSS, groupHeadingCSS, }: CustomStylesParams) => StylesConfig<Option, false, GroupBase<Option>>;
 export {};
 //# sourceMappingURL=Select.styles.d.ts.map

package/lib/Inputs/Select/Select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Select/Select.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAC,SAAS,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AAWrD,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAE3C,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC,UAAU,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,oEAMtB,kBAAkB,KAAG,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAoEnE,CAAC"}
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/Inputs/Select/Select.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAC,SAAS,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AAWrD,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAE3C,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC,UAAU,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,EAAE,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,wGAStB,kBAAkB,KAAG,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAmFnE,CAAC"}

package/lib/Inputs/Select/Select.styles.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.customStyles = void 0;
 const BaseSelect_styles_1 = require("./BaseSelect/BaseSelect.styles");
 const SelectOption_1 = require("./SelectOption/SelectOption");
-const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute', controlCSS, containerCSS, }) => ({
+const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute', controlCSS, containerCSS, menuCSS, groupCSS, groupHeadingCSS, }) => ({
     indicatorSeparator: BaseSelect_styles_1.baseIndicatorSeparatorStyles,
     indicatorsContainer: provided => provided,
     control: (_provided, { isDisabled, selectProps }) => (0, BaseSelect_styles_1.baseControlStyles)({ theme, isDisabled, markInvalid, selectProps, controlCSS }),
@@ -45,6 +45,7 @@ const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute', c
         ...((0, SelectOption_1.isGroup)(options) && {
             minWidth: '400px',
         }),
+        ...menuCSS,
     }),
     menuList: provided => ({
         ...provided,
@@ -87,5 +88,19 @@ const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute', c
         width: '100%',
         display: 'grid',
     }),
+    groupHeading: base => ({
+        ...base,
+        color: theme.general.color,
+        fontSize: theme.fontSizes.small,
+        lineHeight: 1,
+        padding: '8px 16px 6px',
+        textAlign: 'left',
+        ...groupHeadingCSS,
+    }),
+    group: provided => ({
+        ...provided,
+        backgroundColor: theme.Input.backgroundColor,
+        ...groupCSS,
+    }),
 });
 exports.customStyles = customStyles;

package/lib/Navigation/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.js

@@ -4,6 +4,6 @@ exports.BreadcrumbItem = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const BreadcrumbItem_styles_1 = require("./BreadcrumbItem.styles");
 const BreadcrumbItem = ({ name, icon, isActive, onClick, isFirst }) => {
-    return ((0, jsx_runtime_1.jsx)("li", { css: BreadcrumbItem_styles_1.listItemStyles, children: isActive ? ((0, jsx_runtime_1.jsxs)("span", { css: BreadcrumbItem_styles_1.activeItemStyles, children: [icon, name] })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", css: (0, BreadcrumbItem_styles_1.buttonStyles)({ isFirst }), onClick: onClick, children: [icon, name] })) }));
+    return ((0, jsx_runtime_1.jsx)("li", { css: BreadcrumbItem_styles_1.listItemStyles, children: isActive ? ((0, jsx_runtime_1.jsxs)("span", { css: (0, BreadcrumbItem_styles_1.activeItemStyles)({ isFirst }), children: [icon, name] })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", css: (0, BreadcrumbItem_styles_1.buttonStyles)({ isFirst }), onClick: onClick, children: [icon, name] })) }));
 };
 exports.BreadcrumbItem = BreadcrumbItem;

package/lib/Navigation/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styles.d.ts

@@ -3,5 +3,7 @@ export declare const listItemStyles: CSSObject;
 export declare const buttonStyles: ({ isFirst }: {
     isFirst: boolean;
 }) => CSSObject;
-export declare const activeItemStyles: CSSObject;
+export declare const activeItemStyles: ({ isFirst }: {
+    isFirst: boolean;
+}) => CSSObject;
 //# sourceMappingURL=BreadcrumbItem.styles.d.ts.map

package/lib/Navigation/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.styles.d.ts","sourceRoot":"","sources":["../../../../src/Navigation/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,eAAO,MAAM,cAAc,EAAE,SAI5B,CAAC;AAEF,eAAO,MAAM,YAAY,gBAAe;IAAC,OAAO,EAAE,OAAO,CAAA;CAAC,KAAG,SAgB3D,CAAC;AAEH,eAAO,MAAM,gBAAgB,EAAE,SAQ9B,CAAC"}
+{"version":3,"file":"BreadcrumbItem.styles.d.ts","sourceRoot":"","sources":["../../../../src/Navigation/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,eAAO,MAAM,cAAc,EAAE,SAI5B,CAAC;AAEF,eAAO,MAAM,YAAY,gBAAe;IAAC,OAAO,EAAE,OAAO,CAAA;CAAC,KAAG,SAgB3D,CAAC;AAEH,eAAO,MAAM,gBAAgB,gBAAe;IAAC,OAAO,EAAE,OAAO,CAAA;CAAC,KAAG,SAQ/D,CAAC"}

package/lib/Navigation/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.styles.js

@@ -41,12 +41,13 @@ const buttonStyles = ({ isFirst }) => ({
     },
 });
 exports.buttonStyles = buttonStyles;
-exports.activeItemStyles = {
+const activeItemStyles = ({ isFirst }) => ({
     display: 'inline-flex',
     alignItems: 'center',
     gap: '8px',
-    paddingLeft: '8px',
+    paddingLeft: isFirst ? '0' : '8px',
     paddingRight: '0',
     fontSize: '14px',
     color: 'var(--main-color)',
-};
+});
+exports.activeItemStyles = activeItemStyles;

package/lib/Navigation/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -7,4 +7,5 @@ export declare const Default: Story;
 export declare const WithCombinedItems: Story;
 export declare const WithIcons: Story;
 export declare const WithIconsAndCombinedItems: Story;
+export declare const OneItem: Story;
 //# sourceMappingURL=Breadcrumbs.stories.d.ts.map

package/lib/Navigation/Breadcrumbs/Breadcrumbs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/Navigation/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAMlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAavC,CAAC"}
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/Navigation/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAMlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAavC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/lib/Navigation/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithIconsAndCombinedItems = exports.WithIcons = exports.WithCombinedItems = exports.Default = void 0;
+exports.OneItem = exports.WithIconsAndCombinedItems = exports.WithIcons = exports.WithCombinedItems = exports.Default = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Breadcrumbs_1 = require("./Breadcrumbs");
 const Icon_1 = require("../../DataDisplay/Icon");
@@ -30,3 +30,6 @@ exports.WithIconsAndCombinedItems = {
             { name: 'Subfolder 3' },
         ], onItemClick: () => { } })),
 };
+exports.OneItem = {
+    render: () => (0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { items: [{ name: 'Home' }], onItemClick: () => { } }),
+};

package/package.json

@@ -79,6 +79,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.61.1",
-  "gitHead": "3861d76a73c2b981bc27b09fe61ccaa0802e649d"
+  "version": "9.62.0",
+  "gitHead": "a7a921edc66b0dbdb096bdbdeb965ff71f4dcb07"
 }