@citygross/components_v2 0.0.16 → 0.0.17

package/dist/components/AlertBox/AlertBox.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import BoxArrow from '../BoxArrow/BoxArrow.js';
+import { BoxArrow } from '../BoxArrow/BoxArrow.js';
 import { alertBox, iconContainer } from './AlertBox.css.vanilla.js';
 
 function AlertBox({

package/dist/components/BoxArrow/BoxArrow.d.ts

@@ -0,0 +1,10 @@
+import { THardSpacingKeys } from '@citygross/design-tokens_v2';
+
+declare type TBoxArrow = {
+    arrowPlacement?: 'left' | 'right';
+    arrowSpacing?: THardSpacingKeys;
+    background?: string;
+};
+declare const BoxArrow: ({ arrowPlacement, arrowSpacing, background }: TBoxArrow) => JSX.Element;
+
+export { BoxArrow, TBoxArrow };

package/dist/components/BoxArrow/BoxArrow.js

@@ -2,7 +2,11 @@ import { Icons } from '@citygross/icons_v2';
 import React from 'react';
 import { boxArrowContainer } from './BoxArrow.css.vanilla.js';
 
-const BoxArrow = ({ arrowPlacement, arrowSpacing, background }) => {
+const BoxArrow = ({
+  arrowPlacement,
+  arrowSpacing,
+  background
+}) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -16,4 +20,4 @@ const BoxArrow = ({ arrowPlacement, arrowSpacing, background }) => {
   );
 };
 
-export { BoxArrow as default };
+export { BoxArrow };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+declare type TCgButton = {
+    size?: 'small' | 'medium' | 'icon' | 'large';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'tertiary' | 'prio';
+    icon?: React.ReactNode;
+    flexReverse?: boolean;
+    loading?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    fullWidth?: boolean;
+    buttonRef?: React.Ref<HTMLButtonElement>;
+    round?: boolean;
+    className?: string;
+};
+declare const Button: ({ size, variant, icon, flexReverse, disabled, onClick, children, loading, fullWidth, buttonRef, round, className }: TCgButton) => JSX.Element;
+
+export { Button, TCgButton };

package/dist/components/CartItemSummary/CartItemSummary.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Skeleton from '../Skeleton/Skeleton.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
 import { formatPrice } from '@citygross/utils';
 import { H3 } from '../../typography/H3/H3.js';
 import { cartitemsummary, cancelledWrapper, amountText, itemInformationContainer } from './CartItemSummary.css.vanilla.js';

package/dist/components/FormControl/FormControl.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { H3 } from '@citygross/typography';
 import { formControlWrapper, formControlElementWrapper } from './FormControl.css.vanilla.js';
+import { H3 } from '../../typography/H3/H3.js';
 
 var TScreenWidth = /* @__PURE__ */ ((TScreenWidth2) => {
   TScreenWidth2["1/2"] = "calc(50% - 12px)";

package/dist/components/Header/Header.css.vanilla.js

@@ -3,7 +3,6 @@ import './Header.css.ts.vanilla.css';
 var headerContainer = "Header_headerContainer__11gdejs2";
 var headerWrapper = "Header_headerWrapper__11gdejs1";
 var menuIconContainer = "Header_menuIconContainer__11gdejs3";
-var sideModalHeader = "Header_sideModalHeader__11gdejs4";
 var wrapper = "Header_wrapper__11gdejs0";
 
-export { headerContainer, headerWrapper, menuIconContainer, sideModalHeader, wrapper };
+export { headerContainer, headerWrapper, menuIconContainer, wrapper };

package/dist/components/Header/Header.d.ts

@@ -1,11 +1,13 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 declare type THeader = {
     btnLabel?: string;
     btnOnClick?: () => void;
+    onMenuClick?: () => void;
     children?: ReactNode;
-    headerLink?: React.ReactNode;
+    headerLink?: ReactNode;
+    sideModal?: ReactNode;
 };
-declare const Header: ({ btnLabel, btnOnClick, children, headerLink }: THeader) => JSX.Element;
+declare const Header: ({ btnLabel, btnOnClick, onMenuClick, sideModal, headerLink }: THeader) => JSX.Element;
 
 export { Header, THeader };

package/dist/components/Header/Header.js

@@ -1,44 +1,18 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Button } from '../Button/Button.js';
-import { SideModal } from '@citygross/components';
-import { Icons } from '@citygross/icons';
+import { Icons } from '@citygross/icons_v2';
 import { theme } from '@citygross/design-tokens';
-import { wrapper, headerWrapper, headerContainer, menuIconContainer, sideModalHeader } from './Header.css.vanilla.js';
+import { wrapper, headerWrapper, headerContainer, menuIconContainer } from './Header.css.vanilla.js';
 
 const Header = ({
   btnLabel,
   btnOnClick,
-  children,
+  onMenuClick,
+  sideModal,
   headerLink
 }) => {
-  const [showSideModal, setShowSideModal] = useState(false);
   const isMobile = window.innerWidth < (theme.breakpoints?.lg ?? 960);
-  return /* @__PURE__ */ React.createElement("div", { className: wrapper }, headerLink && headerLink, /* @__PURE__ */ React.createElement("div", { className: headerWrapper }, /* @__PURE__ */ React.createElement("div", { className: headerContainer }, isMobile ? /* @__PURE__ */ React.createElement(Icons.LogoFlat, null) : /* @__PURE__ */ React.createElement(Icons.Logo, null), isMobile ? /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: menuIconContainer,
-      onClick: () => setShowSideModal(true)
-    },
-    /* @__PURE__ */ React.createElement(Icons.Menu, null)
-  ) : btnLabel && /* @__PURE__ */ React.createElement(Button, { onClick: btnOnClick, variant: "secondary" }, btnLabel))), showSideModal && /* @__PURE__ */ React.createElement(
-    SideModal,
-    {
-      isVisible: true,
-      onBackdropClick: () => setShowSideModal(false),
-      slideFrom: "right"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: sideModalHeader }, /* @__PURE__ */ React.createElement(Icons.LogoFlat, null), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        icon: /* @__PURE__ */ React.createElement(Icons.Cross, { height: 16, width: 16 }),
-        onClick: () => setShowSideModal(false),
-        round: true,
-        variant: "secondary",
-        size: "small"
-      }
-    )),
-    children
-  ));
+  return /* @__PURE__ */ React.createElement("div", { className: wrapper }, headerLink && headerLink, /* @__PURE__ */ React.createElement("div", { className: headerWrapper }, /* @__PURE__ */ React.createElement("div", { className: headerContainer }, isMobile ? /* @__PURE__ */ React.createElement(Icons.LogoFlat, null) : /* @__PURE__ */ React.createElement(Icons.Logo, null), isMobile ? /* @__PURE__ */ React.createElement("div", { className: menuIconContainer, onClick: () => onMenuClick() }, /* @__PURE__ */ React.createElement(Icons.Menu, null)) : btnLabel && /* @__PURE__ */ React.createElement(Button, { onClick: btnOnClick, variant: "secondary" }, btnLabel))), sideModal);
 };
 
 export { Header };

package/dist/components/ListItem/ListItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import FallbackIcon from './assets/fallback_grocery.js';
 import { listItemContainer, listLeft, listImageContainer, listImage, itemInformationContainer, listRight } from './ListItem.css.vanilla.js';
 import { BodyText } from '../../typography/BodyText/BodyText.js';
-import Skeleton from '../Skeleton/Skeleton.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
 
 var EListItemAlignment = /* @__PURE__ */ ((EListItemAlignment2) => {
   EListItemAlignment2["CENTER"] = "center";

package/dist/components/OrderTable/OrderTable.css.d.ts

@@ -0,0 +1,44 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+
+declare const BorderPosition: {
+    Top: string;
+    Bottom: string;
+    None: string;
+    TopAndBottom: string;
+};
+declare const borderStyle: Record<string | number, string>;
+declare const orderTr: _vanilla_extract_recipes.RuntimeFn<{
+    borderStyle: Record<string | number, string>;
+    disableHover: {
+        true: {
+            selectors: {
+                '&:hover': {
+                    backgroundColor: "transparent";
+                };
+            };
+        };
+    };
+    mobile: {
+        true: {
+            selectors: {
+                '&:hover': {
+                    backgroundColor: "transparent";
+                };
+            };
+        };
+    };
+}>;
+declare const orderTd: _vanilla_extract_recipes.RuntimeFn<{
+    borderStyle: Record<string | number, string>;
+    lineThrough: {
+        true: {
+            textDecoration: "line-through";
+            color: string;
+        };
+    };
+}>;
+declare const orderTable: string;
+declare const orderThead: string;
+declare const orderTh: string;
+
+export { BorderPosition, borderStyle, orderTable, orderTd, orderTh, orderThead, orderTr };

package/dist/components/OrderTable/OrderTable.css.ts.vanilla.css

@@ -0,0 +1,57 @@
+.OrderTable_borderStyle_top__1nxgvnk0 {
+  border-top: 1px solid #E8E8E8;
+}
+.OrderTable_borderStyle_bottom__1nxgvnk1 {
+  border-bottom: 1px solid #E8E8E8;
+}
+.OrderTable_borderStyle_topAndBottom__1nxgvnk2 {
+  border-top: 1px solid #E8E8E8;
+  border-bottom: 1px solid #E8E8E8;
+}
+.OrderTable_orderTr__1nxgvnk3:hover {
+  cursor: pointer;
+  background-color: #F7F7F7;
+}
+.OrderTable_orderTr_disableHover_true__1nxgvnk7:hover {
+  background-color: transparent;
+}
+.OrderTable_orderTr_mobile_true__1nxgvnk8:hover {
+  background-color: transparent;
+}
+.OrderTable_orderTd__1nxgvnk9 {
+  padding: 16px 14px;
+  font-size: 15px;
+  text-align: left;
+  color: #333333;
+}
+.OrderTable_orderTd__1nxgvnk9:last-child {
+  text-align: right;
+}
+.OrderTable_orderTd__1nxgvnk9:first-child {
+  text-align: start;
+}
+.OrderTable_orderTd_lineThrough_true__1nxgvnkd {
+  text-decoration: line-through;
+  color: #979797;
+}
+.OrderTable_orderTable__1nxgvnke {
+  width: 100%;
+  border: none;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.OrderTable_orderThead__1nxgvnkf {
+  border-bottom: 1px solid #E8E8E8;
+}
+.OrderTable_orderTh__1nxgvnkg {
+  position: relative;
+  padding: 12px 14px;
+  font-size: 15px;
+  text-align: left;
+}
+.OrderTable_orderTh__1nxgvnkg:last-child {
+  text-align: right;
+}
+.OrderTable_orderTh__1nxgvnkg:first-child {
+  text-align: start;
+}

package/dist/components/OrderTable/OrderTable.css.vanilla.js

@@ -0,0 +1,12 @@
+import './OrderTable.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var BorderPosition = { Top: "top", Bottom: "bottom", None: "none", TopAndBottom: "topAndBottom" };
+var borderStyle = { top: "OrderTable_borderStyle_top__1nxgvnk0", bottom: "OrderTable_borderStyle_bottom__1nxgvnk1", topAndBottom: "OrderTable_borderStyle_topAndBottom__1nxgvnk2" };
+var orderTable = "OrderTable_orderTable__1nxgvnke";
+var orderTd = createRuntimeFn({ defaultClassName: "OrderTable_orderTd__1nxgvnk9", variantClassNames: { borderStyle: { top: "OrderTable_borderStyle_top__1nxgvnk0", bottom: "OrderTable_borderStyle_bottom__1nxgvnk1", topAndBottom: "OrderTable_borderStyle_topAndBottom__1nxgvnk2" }, lineThrough: { true: "OrderTable_orderTd_lineThrough_true__1nxgvnkd" } }, defaultVariants: {}, compoundVariants: [] });
+var orderTh = "OrderTable_orderTh__1nxgvnkg";
+var orderThead = "OrderTable_orderThead__1nxgvnkf";
+var orderTr = createRuntimeFn({ defaultClassName: "OrderTable_orderTr__1nxgvnk3", variantClassNames: { borderStyle: { top: "OrderTable_borderStyle_top__1nxgvnk0", bottom: "OrderTable_borderStyle_bottom__1nxgvnk1", topAndBottom: "OrderTable_borderStyle_topAndBottom__1nxgvnk2" }, disableHover: { true: "OrderTable_orderTr_disableHover_true__1nxgvnk7" }, mobile: { true: "OrderTable_orderTr_mobile_true__1nxgvnk8" } }, defaultVariants: {}, compoundVariants: [] });
+
+export { BorderPosition, borderStyle, orderTable, orderTd, orderTh, orderThead, orderTr };

package/dist/components/OrderTableMobile/OrderTableMobile.css.ts.vanilla.css

@@ -0,0 +1,17 @@
+.OrderTableMobile_mobileOrderLine__1n1lr3j0 {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  row-gap: 12px;
+  border-top: 1px solid #E8E8E8;
+  padding: 12px;
+}
+.OrderTableMobile_mobileOrderLine__1n1lr3j0:hover {
+  background-color: #F7F7F7;
+}
+.OrderTableMobile_mobileOrderLineLabel__1n1lr3j1 {
+  grid-column: 1;
+  padding-right:  35px;
+}
+.OrderTableMobile_mobileOrderLineValue__1n1lr3j2 {
+  grid-column: 2;
+}

package/dist/components/OrderTableMobile/OrderTableMobile.css.vanilla.js

@@ -0,0 +1,7 @@
+import './OrderTableMobile.css.ts.vanilla.css';
+
+var mobileOrderLine = "OrderTableMobile_mobileOrderLine__1n1lr3j0";
+var mobileOrderLineLabel = "OrderTableMobile_mobileOrderLineLabel__1n1lr3j1";
+var mobileOrderLineValue = "OrderTableMobile_mobileOrderLineValue__1n1lr3j2";
+
+export { mobileOrderLine, mobileOrderLineLabel, mobileOrderLineValue };

package/dist/components/OrderTableMobile/OrderTableMobile.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+declare type TMobileOrderLine = {
+    orderNumber?: string;
+    deliveryString?: React.ReactNode;
+    orderStatus?: string | null;
+    orderAmount?: string | null;
+    cancelled?: boolean;
+};
+declare const MobileOrderLine: ({ deliveryString, orderAmount, orderStatus, orderNumber, cancelled }: TMobileOrderLine) => JSX.Element;
+
+export { MobileOrderLine };

package/dist/components/OrderTableMobile/OrderTableMobile.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import { mobileOrderLine, mobileOrderLineLabel, mobileOrderLineValue } from './OrderTableMobile.css.vanilla.js';
+import { BodyText } from '../../typography/BodyText/BodyText.js';
+
+const MobileOrderLine = ({
+  deliveryString,
+  orderAmount,
+  orderStatus,
+  orderNumber,
+  cancelled
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: mobileOrderLine }, /* @__PURE__ */ React.createElement(BodyText, { className: mobileOrderLineLabel, fontWeight: "semiBold" }, "ordernr"), /* @__PURE__ */ React.createElement(
+    BodyText,
+    {
+      className: mobileOrderLineValue,
+      textDecoration: cancelled ? "lineThrough" : null,
+      color: cancelled ? "darkest" : "black"
+    },
+    orderNumber || /* @__PURE__ */ React.createElement(Skeleton, null)
+  ), /* @__PURE__ */ React.createElement(BodyText, { className: mobileOrderLineLabel }, "leveransdatum"), /* @__PURE__ */ React.createElement("div", { className: mobileOrderLineValue }, deliveryString), /* @__PURE__ */ React.createElement(BodyText, { className: mobileOrderLineLabel }, "Status"), /* @__PURE__ */ React.createElement(
+    BodyText,
+    {
+      className: mobileOrderLineValue,
+      textDecoration: cancelled ? "lineThrough" : null,
+      color: cancelled ? "darkest" : "black"
+    },
+    orderStatus || /* @__PURE__ */ React.createElement(Skeleton, null)
+  ), /* @__PURE__ */ React.createElement(BodyText, { className: mobileOrderLineLabel }, "Kostnad"), /* @__PURE__ */ React.createElement(
+    BodyText,
+    {
+      className: mobileOrderLineValue,
+      textDecoration: cancelled ? "lineThrough" : null,
+      color: cancelled ? "darkest" : "black"
+    },
+    orderAmount || /* @__PURE__ */ React.createElement(Skeleton, null)
+  ));
+};
+
+export { MobileOrderLine };

package/dist/components/Pagination/Pagination.css.ts.vanilla.css

@@ -0,0 +1,16 @@
+.Pagination_paginationButtonWrapper__139elee0 {
+  padding: 0 4px;
+}
+.Pagination_leftPaginationButtonWrapper__139elee1 {
+  padding: 0 4px;
+  width: 44px;
+}
+.Pagination_flex__139elee2 {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+.Pagination_paginationButton__139elee3 {
+  width: 32px;
+  height: 32px;
+}

package/dist/components/Pagination/Pagination.css.vanilla.js

@@ -0,0 +1,8 @@
+import './Pagination.css.ts.vanilla.css';
+
+var flex = "Pagination_flex__139elee2";
+var leftPaginationButtonWrapper = "Pagination_leftPaginationButtonWrapper__139elee1";
+var paginationButton = "Pagination_paginationButton__139elee3";
+var paginationButtonWrapper = "Pagination_paginationButtonWrapper__139elee0";
+
+export { flex, leftPaginationButtonWrapper, paginationButton, paginationButtonWrapper };

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+declare type TPagination = {
+    totalItems?: number;
+    fetchItems: (page: number) => void;
+    currentPage: number;
+    itemsPerPage?: number;
+    setPage?: (page: number) => void;
+    numOfPaginationsToShow?: number;
+    rightIcon?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+};
+declare function Pagination({ totalItems, currentPage, fetchItems, itemsPerPage, setPage, numOfPaginationsToShow, rightIcon, leftIcon }: TPagination): JSX.Element;
+
+export { Pagination, TPagination };

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Box } from '../Box/Box.js';
+import { flex, leftPaginationButtonWrapper, paginationButton, paginationButtonWrapper } from './Pagination.css.vanilla.js';
+import { Button } from '../Button/Button.js';
+
+function createPagination(totalItems, itemsPerPage, numOfPaginationsToShow) {
+  const amountOfPages = Math.ceil((totalItems || 0) / (itemsPerPage ?? 6));
+  if (amountOfPages === 0 || itemsPerPage === 0) {
+    return [];
+  }
+  const pagination = [];
+  let block = [];
+  let counter = 0;
+  new Array(amountOfPages).fill(0).map((_, index) => {
+    if (counter < (numOfPaginationsToShow ?? 4) - 1) {
+      counter++;
+      block.push(index);
+      if (index === amountOfPages - 1) {
+        pagination.push(block);
+      }
+    } else {
+      counter = 0;
+      block.push(index);
+      pagination.push(block);
+      block = [];
+    }
+    return null;
+  });
+  return pagination;
+}
+function Pagination({
+  totalItems,
+  currentPage,
+  fetchItems,
+  itemsPerPage,
+  setPage,
+  numOfPaginationsToShow = 4,
+  rightIcon,
+  leftIcon
+}) {
+  const [currentIndex, setIndex] = useState(
+    Math.floor((currentPage - 1) / numOfPaginationsToShow)
+  );
+  const pagination = createPagination(
+    totalItems,
+    itemsPerPage,
+    numOfPaginationsToShow
+  );
+  return /* @__PURE__ */ React.createElement(Box, null, pagination && pagination.length > 0 && leftIcon && /* @__PURE__ */ React.createElement("div", { className: flex }, /* @__PURE__ */ React.createElement("div", { className: leftPaginationButtonWrapper }, currentIndex > 0 && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "secondary",
+      size: "icon",
+      onClick: () => {
+        setPage && setPage(currentPage - 1);
+        setIndex(currentIndex - 1);
+      },
+      className: paginationButton
+    },
+    leftIcon
+  )), pagination?.[currentIndex]?.map((page) => /* @__PURE__ */ React.createElement("div", { className: paginationButtonWrapper, key: page }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "icon",
+      variant: currentPage === page + 1 ? "tertiary" : "secondary",
+      className: paginationButton,
+      onClick: () => fetchItems(page + 1)
+    },
+    page + 1
+  ))), pagination.length > 1 && currentIndex < pagination.length - 1 && rightIcon && /* @__PURE__ */ React.createElement("div", { className: paginationButtonWrapper }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "icon",
+      variant: "secondary",
+      onClick: () => setIndex(currentIndex + 1),
+      className: paginationButton
+    },
+    rightIcon
+  ))));
+}
+
+export { Pagination };

package/dist/components/RippleContainer/RippleContainer.css.ts.vanilla.css

@@ -0,0 +1,168 @@
+@keyframes RippleContainer_slide__r9yswj0 {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 120%;
+  }
+}
+.RippleContainer_afterBackground_primary__r9yswj1::after {
+  background-color: #FFE522;
+}
+.RippleContainer_afterBackground_secondary__r9yswj2::after {
+  background-color: #0069AE;
+}
+.RippleContainer_afterBackground_brandYellow__r9yswj3::after {
+  background-color: #FFE522;
+}
+.RippleContainer_afterBackground_brandBlue__r9yswj4::after {
+  background-color: #0069AE;
+}
+.RippleContainer_afterBackground_brandPurple__r9yswj5::after {
+  background-color: #A71680;
+}
+.RippleContainer_afterBackground_brandPrio__r9yswj6::after {
+  background-color: #a80073;
+}
+.RippleContainer_afterBackground_yellowLighter__r9yswj7::after {
+  background-color: #FFFBE7;
+}
+.RippleContainer_afterBackground_yellowLight__r9yswj8::after {
+  background-color: #FFF7D1;
+}
+.RippleContainer_afterBackground_blueLight__r9yswj9::after {
+  background-color: #ECF7FE;
+}
+.RippleContainer_afterBackground_blueLighter__r9yswja::after {
+  background-color: #D3EDFD;
+}
+.RippleContainer_afterBackground_blueMedium__r9yswjb::after {
+  background-color: #92B9D3;
+}
+.RippleContainer_afterBackground_greenLight__r9yswjc::after {
+  background-color: #F2FDF2;
+}
+.RippleContainer_afterBackground_greenMedium__r9yswjd::after {
+  background-color: #BEE5BE;
+}
+.RippleContainer_afterBackground_redLight__r9yswje::after {
+  background-color: #FCE9E9;
+}
+.RippleContainer_afterBackground_recipeVego__r9yswjf::after {
+  background-color: #65DB69;
+}
+.RippleContainer_afterBackground_recipeLactose__r9yswjg::after {
+  background-color: #8CCDF0;
+}
+.RippleContainer_afterBackground_recipeGluten__r9yswjh::after {
+  background-color: #D5642A;
+}
+.RippleContainer_afterBackground_link__r9yswji::after {
+  background-color: #0072BB;
+}
+.RippleContainer_afterBackground_white__r9yswjj::after {
+  background-color: #FFFFFF;
+}
+.RippleContainer_afterBackground_black__r9yswjk::after {
+  background-color: #000000;
+}
+.RippleContainer_afterBackground_lightest__r9yswjl::after {
+  background-color: #F7F7F7;
+}
+.RippleContainer_afterBackground_lighter__r9yswjm::after {
+  background-color: #F1F1F1;
+}
+.RippleContainer_afterBackground_light__r9yswjn::after {
+  background-color: #E8E8E8;
+}
+.RippleContainer_afterBackground_medium__r9yswjo::after {
+  background-color: #DBDBDB;
+}
+.RippleContainer_afterBackground_mediumDark__r9yswjp::after {
+  background-color: #6C6C6C;
+}
+.RippleContainer_afterBackground_dark__r9yswjq::after {
+  background-color: #979797;
+}
+.RippleContainer_afterBackground_darker__r9yswjr::after {
+  background-color: #4A4A4A;
+}
+.RippleContainer_afterBackground_darkest__r9yswjs::after {
+  background-color: #333333;
+}
+.RippleContainer_afterBackground_buttonGray__r9yswjt::after {
+  background-color: #E5E4E5;
+}
+.RippleContainer_afterBackground_disabledGray__r9yswju::after {
+  background-color: #B8B8B8;
+}
+.RippleContainer_afterBackground_disabledDarkGray__r9yswjv::after {
+  background-color: #5c5c5c;
+}
+.RippleContainer_afterBackground_placeholder__r9yswjw::after {
+  background-color: #8f8f8f;
+}
+.RippleContainer_afterBackground_border__r9yswjx::after {
+  background-color: #0069AE;
+}
+.RippleContainer_afterBackground_boxShadow__r9yswjy::after {
+  background-color: #E1E1E1;
+}
+.RippleContainer_afterBackground_boxShadowActive__r9yswjz::after {
+  background-color: rgba(7, 52, 99, 0.15);
+}
+.RippleContainer_afterBackground_alertRed__r9yswj10::after {
+  background-color: #E02721;
+}
+.RippleContainer_afterBackground_alertBlue__r9yswj11::after {
+  background-color: #0072BB;
+}
+.RippleContainer_afterBackground_alertGreen__r9yswj12::after {
+  background-color: #3F9A3C;
+}
+.RippleContainer_afterBackground_darkOverlay__r9yswj13::after {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.RippleContainer_afterBackground_transparent__r9yswj14::after {
+  background-color: #ffffff00;
+}
+.RippleContainer_afterBackground_brandBlueHover__r9yswj15::after {
+  background-color: #005C99;
+}
+.RippleContainer_afterBackground_brandYellowHover__r9yswj16::after {
+  background-color: #F5D800;
+}
+.RippleContainer_afterBackground_brandPrioHover__r9yswj17::after {
+  background-color: #90136F;
+}
+.RippleContainer_afterBackground_brandBlueActive__r9yswj18::after {
+  background-color: #004D80;
+}
+.RippleContainer_afterBackground_brandYellowActive__r9yswj19::after {
+  background-color: #DBC100;
+}
+.RippleContainer_afterBackground_brandPrioActive__r9yswj1a::after {
+  background-color: #7A105E;
+}
+.RippleContainer_afterBackground_none__r9yswj1b::after {
+  background-color: none;
+}
+.RippleContainer_rippleContainer__r9yswj1c {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+.RippleContainer_rippleContainer__r9yswj1c::after {
+  content: "";
+  height: 200%;
+  left: -100%;
+  opacity: 0.2;
+  position: absolute;
+  top: -30%;
+  transform: rotate(35deg);
+  width: 50px;
+  z-index: 2;
+}
+.RippleContainer_rippleContainer__r9yswj1c:hover::after {
+  animation: RippleContainer_slide__r9yswj0 750ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
+}