@citygross/components 0.7.84 → 0.7.86

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.stories.d.ts

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

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/SearchBar/SearchBar.styles.d.ts

@@ -5,6 +5,7 @@ export interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement>
     inputSize?: 'small' | 'medium';
     isOpen?: boolean;
     activeBorderColor?: string;
+    hideInMobile?: boolean;
 }
 declare type SearchResultContainerProps = {
     background?: string;
@@ -14,7 +15,9 @@ declare type SearchResultContainerProps = {
 export declare const SearchResultContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SearchResultContainerProps, never>;
 export declare const SearchRightLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<SearchResultContainerProps, "isOpen">, never>;
 export declare const SearchBarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SearchInputProps, never>;
-export declare const SearchForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {}, never>;
 export declare const SearchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SearchInputProps, never>;
+export declare const MobileSearchFormContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SearchForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, SearchInputProps, never>;
+export declare const MobileSearchIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SearchLeftIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}