@citygross/components 0.7.83 → 0.7.85

package/build/@types/components/BackButton/BackButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TBackButton = {
     label?: string;
     icon?: JSX.Element;

package/build/@types/components/BackgroundImage/BackgroundImage.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TBackgroundImage = {
     image?: JSX.Element;
     children?: JSX.Element;

package/build/@types/components/BoxArrow/BoxArrow.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type TBoxArrow = {
     arrowPlacement?: 'left' | 'right';
     arrowSpacing?: number;

package/build/@types/components/Button/Button.d.ts

@@ -10,7 +10,8 @@ export declare enum ButtonColor {
     'secondary' = 1,
     'white' = 2,
     'darkest' = 3,
-    'lightest' = 4
+    'lightest' = 4,
+    'buttonGray' = 5
 }
 export declare type TButtonColor = keyof typeof ButtonColor;
 export declare type TBaseButton = styles.TButton & {

package/build/@types/components/Button/IconButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as styles from './Button.styles';
 import { TButtonColor } from './Button';
 export declare type TIconButton = styles.TBaseSmallButton & {

package/build/@types/components/CartItemSummary/CartItemSummary.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TSummaryItem } from '../CartSummary/CartSummary';
 export declare type TCartItemSummary = {
     product: TSummaryItem;

package/build/@types/components/CartItemSummary/CartItemSummary.styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const CartItemSummaryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const CancelledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ItemInformationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/CartSummary/CartSummary.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TCartSummary = {
     title?: string;
     subTitle?: string;

package/build/@types/components/Chips/Chip.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import * as styles from './Chip.styles';
 export declare function Chip({ label, checked, onClick, background, activeBackground, loading }: styles.TChip): JSX.Element;

package/build/@types/components/Chips/Chip.styles.d.ts

@@ -14,5 +14,5 @@ export declare const ChipLabel: import("styled-components").StyledComponent<({ s
     size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
     color?: string | undefined;
     lineThrough?: boolean | undefined;
-    fontWeight?: "medium" | "bold" | "regular" | "semiBold" | undefined;
+    fontWeight?: "regular" | "medium" | "semiBold" | "bold" | undefined;
 }) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/DotIndicator/DotIndicator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TDot = {
     color?: string;
     shadow?: string;

package/build/@types/components/Dropdown/Dropdown.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 declare const _default: {
     component: ({ isOpen, onClick, dropdownHeader, children }: import("./Dropdown").TDropdown) => JSX.Element;

package/build/@types/components/FormElements/Input/Input.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import * as styles from './Input.styles';
 export declare function Input({ flexGrow, isValid, fontSize, inputSize, ...props }: styles.InputProps): JSX.Element;

package/build/@types/components/FormElements/TextArea/TextArea.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import * as styles from './TextArea.styles';
 export declare function TextArea({ flexGrow, fontSize, ...props }: styles.TextAreaProps): JSX.Element;

package/build/@types/components/Header/Header.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Header } from './Header';
 declare const _default: {
     component: typeof Header;

package/build/@types/components/HeaderLink/HeaderLink.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type THeaderLink = {
     linkHref: string;
     linkLabel: string;

package/build/@types/components/HeaderLink/HeaderLink.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HeaderLink } from './HeaderLink';
 declare const _default: {
     component: typeof HeaderLink;

package/build/@types/components/HighlightBox/HighlightBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as styles from './HighlightBox.styles';
 export declare type THighlightBox = styles.THighlightBoxContainer & {
     children: JSX.Element;

package/build/@types/components/IconText/IconText.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { TIconText } from './IconText';
 declare const _default: {

package/build/@types/components/IconToolTip/IconToolTip.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TIconToolTip = {
     icon?: JSX.Element;
     header?: JSX.Element;

package/build/@types/components/IconToolTip/IconToolTip.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconToolTip } from './IconToolTip';
 declare const _default: {
     component: typeof IconToolTip;

package/build/@types/components/ListItem/ListItem.d.ts

@@ -14,5 +14,6 @@ export declare type TListItem = {
     boldHeader?: boolean;
     smallSkeleton?: boolean;
     isSmall?: boolean;
+    usedInSearch?: boolean;
 };
-export declare function ListItem({ item, loading, isSmall, fallBackImage, imageAutoHeight, boldHeader, smallSkeleton, children }: TListItem): JSX.Element;
+export declare function ListItem({ item, loading, isSmall, fallBackImage, imageAutoHeight, boldHeader, smallSkeleton, children, usedInSearch }: TListItem): JSX.Element;

package/build/@types/components/ListItem/ListItem.styles.d.ts

@@ -1,6 +1,9 @@
-export declare const ItemInformationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare type TListItem = {
+    usedInSearch?: boolean;
+};
+export declare const ItemInformationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TListItem, never>;
 export declare const ListItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ListLeft: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ListLeft: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TListItem, never>;
 export declare const ListRight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare type TListImageContainer = {
     isSmall?: boolean;

package/build/@types/components/Logo/Logo.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TLogo = {
     logoImage?: JSX.Element;
 };

package/build/@types/components/Logo/Logo.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Logo } from './Logo';
 declare const _default: {
     component: typeof Logo;

package/build/@types/components/MobileTable/MobileTable.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: {
     component: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
     title: string;

package/build/@types/components/Nav/Nav.d.ts

@@ -14,5 +14,7 @@ export declare type TNav = {
     searchValue?: string;
     searchOnSubmit?: () => void;
     onSearchClick?: () => void;
+    closeSearch?: () => void;
+    searchIsOpen?: boolean;
 };
-export declare const Nav: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit }: TNav) => JSX.Element;
+export declare const Nav: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;

package/build/@types/components/Nav/Nav.stories.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { TNav } from './Nav';
 declare const _default: {
-    component: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit }: TNav) => JSX.Element;
+    component: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
     title: string;
     argTypes: {
         onScroll: {

package/build/@types/components/NavMainLink/NavMainLink.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { TNavMainLink } from './NavMainLink';
 declare const _default: {

package/build/@types/components/Pagination/Pagination.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TPagination = {
     totalItems?: number;
     fetchItems: (page: number) => void;

package/build/@types/components/PriceTag/PriceTag.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type TPriceTag = {
+    splash?: string;
+    price: React.ReactElement;
+    color: string;
+};
+export declare const PriceTag: React.FunctionComponent<TPriceTag>;

package/build/@types/components/PriceTag/PriceTag.stories.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { TPriceTag } from './PriceTag';
+declare const _default: {
+    component: React.FunctionComponent<TPriceTag>;
+    title: string;
+};
+export default _default;
+export declare const Default: Story<TPriceTag>;
+export declare const Sale: Story<TPriceTag>;
+export declare const Prio: Story<TPriceTag>;

package/build/@types/components/PriceTag/PriceTag.styles.d.ts

@@ -0,0 +1,7 @@
+declare type TPriceTag = {
+    splash?: string;
+    color?: string;
+};
+export declare const PriceTagWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TPriceTag, never>;
+export declare const Text: import("styled-components").StyledComponent<"h1", import("styled-components").DefaultTheme, TPriceTag, never>;
+export {};

package/build/@types/components/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TProgressBar = {
     maxValue: number;
     currentValue: number;

package/build/@types/components/QuantitySelector/QuantitySelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TQuantitySelector = {
     onIncrement: () => void;
     onDecrement: () => void;

package/build/@types/components/RadioBox/RadioBoxList.styles.d.ts

@@ -8,5 +8,5 @@ export declare const RadioBoxListParagraph: import("styled-components").StyledCo
     size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
     color?: string | undefined;
     lineThrough?: boolean | undefined;
-    fontWeight?: "medium" | "bold" | "regular" | "semiBold" | undefined;
+    fontWeight?: "regular" | "medium" | "semiBold" | "bold" | undefined;
 }) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/RadioListItem/RadioListItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TRadioColor } from '../FormElements/Radio/Radio';
 import { TDot } from '../DotIndicator/DotIndicator';
 import * as styles from './RadioListItem.styles';

package/build/@types/components/RadioListItem/RadioListItem.styles.d.ts

@@ -23,7 +23,7 @@ export declare const DisableText: import("styled-components").StyledComponent<({
     size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
     color?: string | undefined;
     lineThrough?: boolean | undefined;
-    fontWeight?: "medium" | "bold" | "regular" | "semiBold" | undefined;
+    fontWeight?: "bold" | "regular" | "medium" | "semiBold" | undefined;
 }) => JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
 export declare const RadioFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWrapMobile, never>;
 export declare const SecondaryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/SearchBar/SearchBar.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 declare const _default: {
     component: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, searchOnSubmit, ...props }: import("./SearchBar").TSearchBar) => JSX.Element;

package/build/@types/components/SearchListItem/SearchListItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TItem } from '../ListItem/ListItem';
+export declare type TSearchProductItem = {
+    loading?: boolean;
+    item: TItem;
+    price: React.ReactElement;
+    color: string;
+    splash?: string;
+};
+export declare type TSearchListItem = {
+    searchProductItem: TSearchProductItem;
+    button?: React.ReactElement;
+};
+export declare const SearchListItem: React.FunctionComponent<TSearchListItem>;

package/build/@types/components/SearchListItem/SearchListItem.stories.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { TSearchListItem } from './SearchListItem';
+declare const _default: {
+    component: React.FunctionComponent<TSearchListItem>;
+    title: string;
+};
+export default _default;
+export declare const Default: Story<TSearchListItem>;
+export declare const SaleItem: Story<TSearchListItem>;
+export declare const PrioItem: Story<TSearchListItem>;

package/build/@types/components/SearchListItem/SearchListItem.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const SearchListItemWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ListItemWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PriceTagWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/Slider/Slider.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { TSlider } from './Slider';
 declare const _default: {

package/build/@types/components/Spinner/Spinner.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TSpinner = {
     borderColor?: string;
     spinnerColor?: string;

package/build/@types/components/Spinner/Spinner.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { TSpinner } from './Spinner';
 declare const _default: {

package/build/@types/components/StepperMobile/StepperMobile.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IStepperItem } from '../Stepper/StepperList';
 export declare type TStepperMobile = {
     steps: IStepperItem[];

package/build/@types/components/Table/Table.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: {
     component: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
     title: string;

package/build/@types/components/Timeline/Timeline.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type TTimelineItem = {
     primaryText: string;
     time: string;

package/build/@types/components/Timeline/Timeline.styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type TBaseTimelineList = {
     borderStyle: 'dashed' | 'solid';
     borderColor?: string;

package/build/@types/components/Typography/bodyText.stories.d.ts

@@ -7,7 +7,7 @@ declare const _default: {
         size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
         color?: string | undefined;
         lineThrough?: boolean | undefined;
-        fontWeight?: "medium" | "bold" | "regular" | "semiBold" | undefined;
+        fontWeight?: "bold" | "regular" | "medium" | "semiBold" | undefined;
     }) => JSX.Element;
     title: string;
     argTypes: {

package/build/@types/components/Typography/h1.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { H1 } from '@citygross/typography';
 declare const _default: {

package/build/@types/components/Typography/h2.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { H2 } from '@citygross/typography';
 declare const _default: {

package/build/@types/components/Typography/h3.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { H3 } from '@citygross/typography';
 declare const _default: {

package/build/@types/containers/TwoColumnsContainer/TwoColumnsPageContainer.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { TTwoColumnsPageContainer } from './TwoColumnsPageContainer';
 declare const _default: {

package/build/@types/utils/test-utils.d.ts

@@ -1,3 +1,3 @@
-declare const customRender: (ui: any, options?: any) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement>;
+declare const customRender: (ui: any, options?: any) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
 export * from '@testing-library/react';
 export { customRender as render };

package/build/cjs/components/src/components/AlertBox/AlertBox.styles.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var AlertBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"], ["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"])), function (props) { var _a; return props.background || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight); }, function (props) { var _a; return ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockBorderWidth) + "px solid " + props.borderColor; }, function (props) { var _a, _b; return ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall) + "px 0 0 " + ((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall) + "px"; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var AlertBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"], ["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"])), function (props) { var _a; return props.background || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight); }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockBorderWidth, "px solid ").concat(props.borderColor); }, function (props) { var _a, _b; return "".concat((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall, "px 0 0 ").concat((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall, "px"); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
 var IconContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  min-width: ", "px;\n  display: flex;\n  align-items: center;\n"], ["\n  min-width: ", "px;\n  display: flex;\n  align-items: center;\n"])), function (props) { var _a; return props.minWidth || ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md); });
 var templateObject_1, templateObject_2;
 

package/build/cjs/components/src/components/BackgroundImage/BackgroundImage.styles.js

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BackgroundContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  ", "\n"], ["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  ", "\n"])), function (props) { return (props.height ? props.height + "px" : 'auto'); }, function (props) { return (props.height ? props.width + "px" : 'auto'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; }, function (props) {
+var BackgroundContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  ", "\n"], ["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  ", "\n"])), function (props) { return (props.height ? "".concat(props.height, "px") : 'auto'); }, function (props) { return (props.height ? "".concat(props.width, "px") : 'auto'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; }, function (props) {
     var _a;
     return props.onClick &&
-        " \n    cursor: pointer;\n    &:hover {\n        box-shadow: " + ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover) + ";\n        }";
+        " \n    cursor: pointer;\n    &:hover {\n        box-shadow: ".concat((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover, ";\n        }");
 });
 var BackgroundImgContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"])));
 var BackgroundGradient = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n  z-index: 1;\n  position: absolute;\n  top: 0;\n"], ["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n  z-index: 1;\n  position: absolute;\n  top: 0;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.BackgroundOverlayOpacity; });

package/build/cjs/components/src/components/Badge/Badge.styles.js

@@ -12,9 +12,9 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var BaseBadge = styled__default["default"].span(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: ", ";\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  background-color: ", ";\n  color: ", ";\n  font-size: ", "px;\n  padding-top: 2px;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: ", ";\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  background-color: ", ";\n  color: ", ";\n  font-size: ", "px;\n  padding-top: 2px;\n"])), function (props) {
     var _a, _b, _c, _d;
     return props.borderColor && props.borderColor !== 'none'
-        ? "1px solid " + props.borderColor
+        ? "1px solid ".concat(props.borderColor)
         : props.background === ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white)
-            ? "1px solid " + ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.light)
+            ? "1px solid ".concat((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.light)
             : 'none';
 }, function (props) { return props.width; }, function (props) { return props.width; }, function (props) { return props.height; }, function (props) { return props.background; }, function (props) { return props.color; }, function (props) { var _a, _b, _c; return (_c = (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s2; });
 var templateObject_1;

package/build/cjs/components/src/components/Box/Box.styles.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BoxContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\n"], ["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.md; }, function (props) { return props.background; }, function (props) { return (props.rounded ? '5px' : '0'); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.lg; }, function (props) { var _a, _b; return props.padding ? props.padding : (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.lg; }, function (props) { return props.padding && "padding: " + props.padding + "px"; });
+var BoxContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\n"], ["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.md; }, function (props) { return props.background; }, function (props) { return (props.rounded ? '5px' : '0'); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.lg; }, function (props) { var _a, _b; return props.padding ? props.padding : (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.lg; }, function (props) { return props.padding && "padding: ".concat(props.padding, "px"); });
 var templateObject_1;
 
 exports.BoxContainer = BoxContainer;

package/build/cjs/components/src/components/BoxArrow/BoxArrow.styles.js

@@ -13,8 +13,8 @@ var BoxArrowContainer = styled__default["default"].div(templateObject_1 || (temp
     return props.placement === 'right' ? 'flex-end' : 'flex-start';
 }, function (props) {
     return props.placement && props.placement === 'right'
-        ? "margin-right: " + props.margin + "px"
-        : "margin-left: " + props.margin + "px";
+        ? "margin-right: ".concat(props.margin, "px")
+        : "margin-left: ".concat(props.margin, "px");
 });
 var templateObject_1;
 

package/build/cjs/components/src/components/Button/Button.js

@@ -23,6 +23,7 @@ exports.ButtonColor = void 0;
     ButtonColor[ButtonColor["white"] = 2] = "white";
     ButtonColor[ButtonColor["darkest"] = 3] = "darkest";
     ButtonColor[ButtonColor["lightest"] = 4] = "lightest";
+    ButtonColor[ButtonColor["buttonGray"] = 5] = "buttonGray";
 })(exports.ButtonColor || (exports.ButtonColor = {}));
 function Button(_a) {
     var _b;

package/build/cjs/components/src/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/Button/Button.styles.js

@@ -73,36 +73,38 @@ var BaseButton = styled__default["default"].button(templateObject_1 || (template
 var BasePrimaryButton = styled__default["default"](BaseButton)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n"], ["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
     var _a, _b;
     return props.size === 'small'
-        ? ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2) + "px"
-        : ((_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.lineHeight.m1) + "px";
+        ? "".concat((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2, "px")
+        : "".concat((_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.lineHeight.m1, "px");
 }, function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     return props.selected
-        ? " inset 0px 0px 0px 1px " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueMedium) + ",\n          " + ((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.buttonHover)
+        ? " inset 0px 0px 0px 1px ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueMedium, ",\n          ").concat((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.buttonHover)
         : props.xsSize ||
             (props.size &&
                 (props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.primary) ||
-                    props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.secondary)))
+                    props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.secondary) ||
+                    props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.buttonGray)))
             ? ButtonShadow(props.xsSize || props.size)
-            : props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.white) ||
-                props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.lightest)
-                ? "inset 0px 0px 0px 1px " + ((_l = props.theme.palette) === null || _l === void 0 ? void 0 : _l.medium)
+            : props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.white) ||
+                props.color === ((_m = (_l = props === null || props === void 0 ? void 0 : props.theme) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0 ? void 0 : _m.lightest)
+                ? "inset 0px 0px 0px 1px ".concat((_o = props.theme.palette) === null || _o === void 0 ? void 0 : _o.medium)
                 : 'none';
 }, function (props) {
     return ButtonPadding(props.xsSize || props.size, props.icon, props.flexReverse);
 }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return ButtonFontSize(props.size); }, function (props) {
     return ButtonPadding(props.size, props.icon, props.flexReverse);
 }, function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     return props.selected
-        ? " inset 0px 0px 0px 1px " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueMedium) + ",\n            " + ((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.buttonHover)
+        ? " inset 0px 0px 0px 1px ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueMedium, ",\n            ").concat((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.buttonHover)
         : props.size &&
             (props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.primary) ||
-                props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.secondary))
+                props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.secondary) ||
+                props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.buttonGray))
             ? ButtonShadow(props.size)
-            : props.color === ((_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.white) ||
-                props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.lightest)
-                ? "inset 0px 0px 0px 1px " + ((_l = props.theme.palette) === null || _l === void 0 ? void 0 : _l.medium)
+            : props.color === ((_k = (_j = props === null || props === void 0 ? void 0 : props.theme) === null || _j === void 0 ? void 0 : _j.palette) === null || _k === void 0 ? void 0 : _k.white) ||
+                props.color === ((_m = (_l = props === null || props === void 0 ? void 0 : props.theme) === null || _l === void 0 ? void 0 : _l.palette) === null || _m === void 0 ? void 0 : _m.lightest)
+                ? "inset 0px 0px 0px 1px ".concat((_o = props.theme.palette) === null || _o === void 0 ? void 0 : _o.medium)
                 : 'none';
 });
 var ButtonChildContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  width: 100%;\n  gap: ", "px;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  width: 100%;\n  gap: ", "px;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: ", ";\n"])), function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) {
@@ -119,18 +121,18 @@ var LoadingSpinner = styled__default["default"](Spinner.Spinner)(templateObject_
 var BaseIconButton = styled__default["default"](BaseButton)(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"], ["\n  padding: ", "px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { return props.height || 32; }, function (props) { return props.width || 32; }, function (props) { return props.width || 32; }, function (props) {
     var _a;
     return props.shadow && props.border
-        ? "box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15), inset 0px 0px 0px 1px " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium)
+        ? "box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15), inset 0px 0px 0px 1px ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium)
         : props.shadow
             ? 'box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15)'
             : props.border
-                ? "box-shadow: inset 0px 0px 0px 1px " + props.border
+                ? "box-shadow: inset 0px 0px 0px 1px ".concat(props.border)
                 : '';
 }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.iconButtonHover; });
 var BasePaginationButton = styled__default["default"](BaseButton)(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) { return props.height || 36; }, function (props) { return props.width || 36; }, function (props) { return props.width || 36; }, function (props) {
     var _a, _b, _c;
     return props.color !== ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white)
         ? 'box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15)'
-        : "box-shadow: inset 0px 0px 0px 1px " + ((_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.medium);
+        : "box-shadow: inset 0px 0px 0px 1px ".concat((_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.medium);
 });
 var ButtonBadge = styled__default["default"].div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  right: ", "px;\n  padding: 0 7px;\n  background: black;\n  color: white;\n  width: fit-content;\n  border-radius: 100px;\n  font-size: ", "px;\n  line-height: ", "px;\n"], ["\n  position: absolute;\n  top: ", "px;\n  right: ", "px;\n  padding: 0 7px;\n  background: black;\n  color: white;\n  width: fit-content;\n  border-radius: 100px;\n  font-size: ", "px;\n  line-height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeTopPosition; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonBadgeRightPosition; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.xs; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;