@citygross/components_v2 0.0.12 → 0.0.14

package/dist/components/CartSummary/CartSummary.js

@@ -0,0 +1,60 @@
+import { formatPrice } from '@citygross/utils';
+import React from 'react';
+import { H3 } from '../../typography/H3/H3.js';
+import { BodyText } from '../../typography/BodyText/BodyText.js';
+import { cartPaymentContainer, cartSummaryTitle, cartSummaryHeader, cartLine, amountWrapper, cartSummaryFooter } from './CartSummary.css.vanilla.js';
+import { Divider } from '../Divider/Divider.js';
+
+const calculateSummaryLine = (items) => {
+  const sumOfItems = items?.reduce(
+    (prev, curr) => {
+      return {
+        cancelledQuantity: prev.cancelledQuantity + (curr?.cancelledQuantity ?? 0),
+        quantity: prev.quantity + curr.quantity,
+        amount: prev.amount + (curr?.amount ?? 0),
+        cancelledAmount: prev.cancelledAmount + (curr?.cancelledAmount ?? 0)
+      };
+    },
+    {
+      cancelledQuantity: 0,
+      quantity: 0,
+      amount: 0,
+      cancelledAmount: 0
+    }
+  );
+  return sumOfItems;
+};
+function CartSummary({
+  saveLabel = "rabatter",
+  shippingLabel = "frakt",
+  totalLabel = "totalt",
+  taxLabel = "varav moms",
+  ...cartSummary
+}) {
+  const charges = cartSummary.charges ?? [];
+  const bags = cartSummary.bags ?? [];
+  const groceries = cartSummary.groceries ?? [];
+  const cateredMeals = cartSummary?.cateredMeals ?? [];
+  const sumOfBags = calculateSummaryLine(bags);
+  const sumOfGroceries = calculateSummaryLine(groceries);
+  const sumOfCateredMeals = calculateSummaryLine(cateredMeals);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: cartPaymentContainer }, cartSummary.title && /* @__PURE__ */ React.createElement("div", { className: cartSummaryTitle }, /* @__PURE__ */ React.createElement(H3, null, cartSummary.title), /* @__PURE__ */ React.createElement(BodyText, null, cartSummary.subTitle)), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cartSummaryHeader({
+        title: Boolean(cartSummary.title)
+      })
+    },
+    (groceries?.length > 0 || cateredMeals?.length > 0) && /* @__PURE__ */ React.createElement("div", { className: cartLine }, /* @__PURE__ */ React.createElement(BodyText, null, "varor", " ", (sumOfGroceries?.quantity ?? 0) + (sumOfCateredMeals?.quantity ?? 0), " ", "st"), /* @__PURE__ */ React.createElement("div", { className: amountWrapper }, sumOfGroceries?.cancelledAmount > 0 && /* @__PURE__ */ React.createElement(BodyText, { textDecoration: "lineThrough", color: "dark" }, formatPrice(
+      (sumOfGroceries?.cancelledAmount ?? 0) + (sumOfCateredMeals?.cancelledAmount ?? 0)
+    )), /* @__PURE__ */ React.createElement(H3, { fontWeight: "semiBold" }, formatPrice(
+      sumOfGroceries.amount + sumOfCateredMeals.amount
+    )))),
+    bags.length > 0 && /* @__PURE__ */ React.createElement("div", { className: cartLine }, /* @__PURE__ */ React.createElement(BodyText, null, "matkassar ", sumOfBags.quantity, " st"), /* @__PURE__ */ React.createElement("div", { className: amountWrapper }, sumOfBags.cancelledAmount > 0 && /* @__PURE__ */ React.createElement(BodyText, { textDecoration: "lineThrough", color: "dark" }, formatPrice(sumOfBags.cancelledAmount)), /* @__PURE__ */ React.createElement(H3, { fontWeight: "semiBold" }, formatPrice(sumOfBags.amount)))),
+    charges?.length > 0 && /* @__PURE__ */ React.createElement(Divider, { marginVertical: "xs" }),
+    charges?.map((charge) => /* @__PURE__ */ React.createElement("div", { className: cartLine, key: charge.name }, /* @__PURE__ */ React.createElement(BodyText, null, charge?.name?.toLowerCase()), /* @__PURE__ */ React.createElement("div", { className: amountWrapper }, charge.cancelledAmount > 0 && /* @__PURE__ */ React.createElement(BodyText, { textDecoration: "lineThrough", color: "dark" }, formatPrice(charge.cancelledAmount)), /* @__PURE__ */ React.createElement(BodyText, null, formatPrice(charge.amount))))),
+    cartSummary.totalDiscount > 0 && /* @__PURE__ */ React.createElement("div", { className: cartLine }, /* @__PURE__ */ React.createElement(BodyText, { color: "alertRed" }, saveLabel), /* @__PURE__ */ React.createElement(BodyText, { color: "alertRed" }, formatPrice(cartSummary.totalDiscount)))
+  ), /* @__PURE__ */ React.createElement("div", { className: cartSummaryFooter }, cartSummary.deliveryFee?.amount && cartSummary.deliveryFee.amount > 0 && /* @__PURE__ */ React.createElement("div", { className: cartLine }, /* @__PURE__ */ React.createElement(BodyText, null, shippingLabel), /* @__PURE__ */ React.createElement(BodyText, null, formatPrice(cartSummary.deliveryFee.amount))), /* @__PURE__ */ React.createElement("div", { className: cartLine }, /* @__PURE__ */ React.createElement(H3, { fontWeight: "semiBold" }, totalLabel), /* @__PURE__ */ React.createElement(H3, { fontWeight: "semiBold" }, formatPrice(cartSummary.totalAmount))), /* @__PURE__ */ React.createElement("div", { className: cartLine }, /* @__PURE__ */ React.createElement(BodyText, null, taxLabel), /* @__PURE__ */ React.createElement(BodyText, null, formatPrice(cartSummary.totalTaxAmount))))));
+}
+
+export { CartSummary };

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

@@ -0,0 +1,6 @@
+.Divider_divider__1ibthdh0 {
+  width: 100%;
+  height: 1px;
+  margin: 16px 0;
+  background: #E8E8E8;
+}

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

@@ -0,0 +1,7 @@
+import './../../cssUtils/spacings.css.ts.vanilla.css';
+import './Divider.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var divider = createRuntimeFn({ defaultClassName: "Divider_divider__1ibthdh0", variantClassNames: { marginVertical: { xxxs: "spacings_marginVertical_xxxs__e0awtzo", xxs: "spacings_marginVertical_xxs__e0awtzp", xxs2: "spacings_marginVertical_xxs2__e0awtzq", xs: "spacings_marginVertical_xs__e0awtzr", xs2: "spacings_marginVertical_xs2__e0awtzs", sm: "spacings_marginVertical_sm__e0awtzt", sm2: "spacings_marginVertical_sm2__e0awtzu", md: "spacings_marginVertical_md__e0awtzv", lg: "spacings_marginVertical_lg__e0awtzw", xl: "spacings_marginVertical_xl__e0awtzx", xxl: "spacings_marginVertical_xxl__e0awtzy", false: "spacings_marginVertical_false__e0awtzz" } }, defaultVariants: {}, compoundVariants: [] });
+
+export { divider };

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TSpacingKeys } from '@citygross/design-tokens_v2';
+
+declare type TDivider = {
+    marginVertical?: TSpacingKeys;
+};
+declare const Divider: React.FunctionComponent<TDivider>;
+
+export { Divider, TDivider };

package/dist/components/Divider/Divider.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { divider } from './Divider.css.vanilla.js';
+
+const Divider = ({
+  marginVertical
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: divider({ marginVertical }) });
+};
+
+export { Divider };

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

@@ -0,0 +1,8 @@
+.Dot_dot__37teiy0 {
+  height: 8px;
+  width: 8px;
+  min-width: 8px;
+  display: inline-block;
+  border-radius: 100%;
+  box-shadow: 0 0 0 2px;
+}

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

@@ -0,0 +1,7 @@
+import './../../cssUtils/color.css.ts.vanilla.css';
+import './Dot.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var dot = createRuntimeFn({ defaultClassName: "Dot_dot__37teiy0", variantClassNames: { backgroundColor: { primary: "color_backgroundColor_primary__13rr0b21b", secondary: "color_backgroundColor_secondary__13rr0b21c", brandYellow: "color_backgroundColor_brandYellow__13rr0b21d", brandBlue: "color_backgroundColor_brandBlue__13rr0b21e", brandPurple: "color_backgroundColor_brandPurple__13rr0b21f", brandPrio: "color_backgroundColor_brandPrio__13rr0b21g", yellowLighter: "color_backgroundColor_yellowLighter__13rr0b21h", yellowLight: "color_backgroundColor_yellowLight__13rr0b21i", blueLight: "color_backgroundColor_blueLight__13rr0b21j", blueLighter: "color_backgroundColor_blueLighter__13rr0b21k", blueMedium: "color_backgroundColor_blueMedium__13rr0b21l", greenLight: "color_backgroundColor_greenLight__13rr0b21m", greenMedium: "color_backgroundColor_greenMedium__13rr0b21n", redLight: "color_backgroundColor_redLight__13rr0b21o", recipeVego: "color_backgroundColor_recipeVego__13rr0b21p", recipeLactose: "color_backgroundColor_recipeLactose__13rr0b21q", recipeGluten: "color_backgroundColor_recipeGluten__13rr0b21r", link: "color_backgroundColor_link__13rr0b21s", white: "color_backgroundColor_white__13rr0b21t", black: "color_backgroundColor_black__13rr0b21u", lightest: "color_backgroundColor_lightest__13rr0b21v", lighter: "color_backgroundColor_lighter__13rr0b21w", light: "color_backgroundColor_light__13rr0b21x", medium: "color_backgroundColor_medium__13rr0b21y", mediumDark: "color_backgroundColor_mediumDark__13rr0b21z", dark: "color_backgroundColor_dark__13rr0b220", darker: "color_backgroundColor_darker__13rr0b221", darkest: "color_backgroundColor_darkest__13rr0b222", buttonGray: "color_backgroundColor_buttonGray__13rr0b223", disabledGray: "color_backgroundColor_disabledGray__13rr0b224", disabledDarkGray: "color_backgroundColor_disabledDarkGray__13rr0b225", placeholder: "color_backgroundColor_placeholder__13rr0b226", border: "color_backgroundColor_border__13rr0b227", boxShadow: "color_backgroundColor_boxShadow__13rr0b228", boxShadowActive: "color_backgroundColor_boxShadowActive__13rr0b229", alertRed: "color_backgroundColor_alertRed__13rr0b22a", alertBlue: "color_backgroundColor_alertBlue__13rr0b22b", alertGreen: "color_backgroundColor_alertGreen__13rr0b22c", darkOverlay: "color_backgroundColor_darkOverlay__13rr0b22d", transparent: "color_backgroundColor_transparent__13rr0b22e", brandBlueHover: "color_backgroundColor_brandBlueHover__13rr0b22f", brandYellowHover: "color_backgroundColor_brandYellowHover__13rr0b22g", brandPrioHover: "color_backgroundColor_brandPrioHover__13rr0b22h", brandBlueActive: "color_backgroundColor_brandBlueActive__13rr0b22i", brandYellowActive: "color_backgroundColor_brandYellowActive__13rr0b22j", brandPrioActive: "color_backgroundColor_brandPrioActive__13rr0b22k", none: "color_backgroundColor_none__13rr0b22l" }, color: { primary: "color_color_primary__13rr0b20", secondary: "color_color_secondary__13rr0b21", brandYellow: "color_color_brandYellow__13rr0b22", brandBlue: "color_color_brandBlue__13rr0b23", brandPurple: "color_color_brandPurple__13rr0b24", brandPrio: "color_color_brandPrio__13rr0b25", yellowLighter: "color_color_yellowLighter__13rr0b26", yellowLight: "color_color_yellowLight__13rr0b27", blueLight: "color_color_blueLight__13rr0b28", blueLighter: "color_color_blueLighter__13rr0b29", blueMedium: "color_color_blueMedium__13rr0b2a", greenLight: "color_color_greenLight__13rr0b2b", greenMedium: "color_color_greenMedium__13rr0b2c", redLight: "color_color_redLight__13rr0b2d", recipeVego: "color_color_recipeVego__13rr0b2e", recipeLactose: "color_color_recipeLactose__13rr0b2f", recipeGluten: "color_color_recipeGluten__13rr0b2g", link: "color_color_link__13rr0b2h", white: "color_color_white__13rr0b2i", black: "color_color_black__13rr0b2j", lightest: "color_color_lightest__13rr0b2k", lighter: "color_color_lighter__13rr0b2l", light: "color_color_light__13rr0b2m", medium: "color_color_medium__13rr0b2n", mediumDark: "color_color_mediumDark__13rr0b2o", dark: "color_color_dark__13rr0b2p", darker: "color_color_darker__13rr0b2q", darkest: "color_color_darkest__13rr0b2r", buttonGray: "color_color_buttonGray__13rr0b2s", disabledGray: "color_color_disabledGray__13rr0b2t", disabledDarkGray: "color_color_disabledDarkGray__13rr0b2u", placeholder: "color_color_placeholder__13rr0b2v", border: "color_color_border__13rr0b2w", boxShadow: "color_color_boxShadow__13rr0b2x", boxShadowActive: "color_color_boxShadowActive__13rr0b2y", alertRed: "color_color_alertRed__13rr0b2z", alertBlue: "color_color_alertBlue__13rr0b210", alertGreen: "color_color_alertGreen__13rr0b211", darkOverlay: "color_color_darkOverlay__13rr0b212", transparent: "color_color_transparent__13rr0b213", brandBlueHover: "color_color_brandBlueHover__13rr0b214", brandYellowHover: "color_color_brandYellowHover__13rr0b215", brandPrioHover: "color_color_brandPrioHover__13rr0b216", brandBlueActive: "color_color_brandBlueActive__13rr0b217", brandYellowActive: "color_color_brandYellowActive__13rr0b218", brandPrioActive: "color_color_brandPrioActive__13rr0b219", none: "color_color_none__13rr0b21a" } }, defaultVariants: {}, compoundVariants: [] });
+
+export { dot };

package/dist/components/Dot/Dot.d.ts

@@ -0,0 +1,9 @@
+import { TPaletteKeys } from '@citygross/design-tokens_v2';
+
+declare type TDot = {
+    color?: TPaletteKeys;
+    shadow?: TPaletteKeys;
+};
+declare function Dot({ color, shadow }: TDot): JSX.Element;
+
+export { Dot, TDot };

package/dist/components/Dot/Dot.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { dot } from './Dot.css.vanilla.js';
+
+function Dot({ color = "white", shadow }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: dot({
+        color: shadow,
+        backgroundColor: color
+      })
+    }
+  );
+}
+
+export { Dot };

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

@@ -0,0 +1,21 @@
+.FormControl_formControlWrapper__1fqhaql0 {
+  flex: 1;
+  max-width: 100%;
+}
+.FormControl_formControlElementWrapper__1fqhaql4 {
+  position: relative;
+  padding-bottom: 8px;
+  display: flex;
+  width: 100%;
+}
+@media screen and (min-width: 480px) {
+  .FormControl_screenWidth_1\/2__1fqhaql1 {
+    max-width: calc(50% - 12px);
+  }
+  .FormControl_screenWidth_1\/3__1fqhaql2 {
+    max-width: calc(33% - 12px);
+  }
+  .FormControl_screenWidth_1\/4__1fqhaql3 {
+    max-width: calc(25% - 12px);
+  }
+}

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

@@ -0,0 +1,7 @@
+import './FormControl.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var formControlElementWrapper = createRuntimeFn({ defaultClassName: "FormControl_formControlElementWrapper__1fqhaql4", variantClassNames: { screenWidth: { "1/2": "FormControl_screenWidth_1/2__1fqhaql1", "1/3": "FormControl_screenWidth_1/3__1fqhaql2", "1/4": "FormControl_screenWidth_1/4__1fqhaql3" } }, defaultVariants: {}, compoundVariants: [] });
+var formControlWrapper = "FormControl_formControlWrapper__1fqhaql0";
+
+export { formControlElementWrapper, formControlWrapper };

package/dist/components/FormControl/FormControl.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+declare enum TScreenWidth {
+    '1/2' = "calc(50% - 12px)",
+    '1/3' = "calc(33% - 12px)",
+    '1/4' = "calc(25% - 12px)"
+}
+declare type TFormControl = {
+    title?: string;
+    children: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    isValid?: boolean;
+    screenWidth?: '1/2' | '1/3' | '1/4';
+};
+declare function FormControl({ title, children, errorMessage, isValid, screenWidth }: TFormControl): JSX.Element;
+
+export { FormControl, TFormControl, TScreenWidth };

package/dist/components/FormControl/FormControl.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { H3 } from '@citygross/typography';
+import { formControlWrapper, formControlElementWrapper } from './FormControl.css.vanilla.js';
+
+var TScreenWidth = /* @__PURE__ */ ((TScreenWidth2) => {
+  TScreenWidth2["1/2"] = "calc(50% - 12px)";
+  TScreenWidth2["1/3"] = "calc(33% - 12px)";
+  TScreenWidth2["1/4"] = "calc(25% - 12px)";
+  return TScreenWidth2;
+})(TScreenWidth || {});
+function FormControl({
+  title,
+  children,
+  errorMessage,
+  isValid = true,
+  screenWidth
+}) {
+  return /* @__PURE__ */ React.createElement("div", { className: formControlWrapper }, title && /* @__PURE__ */ React.createElement("div", { className: formControlElementWrapper() }, /* @__PURE__ */ React.createElement(H3, null, title)), /* @__PURE__ */ React.createElement("div", { className: formControlElementWrapper({ screenWidth }) }, children), errorMessage && !isValid && errorMessage);
+}
+
+export { FormControl, TScreenWidth };

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

@@ -0,0 +1,60 @@
+.Input_padding_small__oylrxv0 {
+  padding: 4px 8px;
+}
+.Input_padding_default__oylrxv1 {
+  padding: 8px 16px;
+}
+.Input_flexGrow_true__oylrxv2 {
+  flex-grow: 1;
+}
+.Input_inputWrapper__oylrxv3 {
+  position: relative;
+  display: inline-block;
+}
+.Input_input__oylrxv5 {
+  outline: none;
+  border-radius: 2px;
+  background-color: #FFFFFF;
+  color: #333333;
+  transition: box-shadow 250ms ease;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #979797;
+}
+.Input_input__oylrxv5:focus, .Input_input__oylrxv5:hover {
+  border-color: #0069AE;
+}
+.Input_input__oylrxv5:focus {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
+}
+.Input_input__oylrxv5::placeholder {
+  color: #979797;
+}
+.Input_input__oylrxv5:disabled::placeholder {
+  color: #DBDBDB;
+}
+.Input_input_withIcon_true__oylrxvi {
+  width: 100%;
+  padding-right: 45px;
+}
+.Input_input_inValid_true__oylrxvj {
+  border-color: #E02721;
+}
+.Input_input_inValid_true__oylrxvj:focus, .Input_input_inValid_true__oylrxvj:hover {
+  border-color: #E02721;
+}
+.Input_input_customFocus_false__oylrxvk:focus-visible:not(:hover) {
+  outline: none;
+  box-shadow: 0 0 0 2px #fff,0 0 0 4px #000,0 0 0 6px #fff;
+  transition: all 0.1s ease-in-out;
+}
+.Input_iconWrapper__oylrxvl {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  height: 100%;
+  right: 16px;
+  top: 0;
+  cursor: pointer;
+}

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

@@ -0,0 +1,9 @@
+import './../../cssUtils/typography.css.ts.vanilla.css';
+import './Input.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var iconWrapper = "Input_iconWrapper__oylrxvl";
+var input = createRuntimeFn({ defaultClassName: "Input_input__oylrxv5", variantClassNames: { padding: { small: "Input_padding_small__oylrxv0", "default": "Input_padding_default__oylrxv1" }, fontSize: { xs: "typography_fontSize_xs__xithyt3", s1: "typography_fontSize_s1__xithyt4", s2: "typography_fontSize_s2__xithyt5", s3: "typography_fontSize_s3__xithyt6", s4: "typography_fontSize_s4__xithyt7", m1: "typography_fontSize_m1__xithyt8", m2: "typography_fontSize_m2__xithyt9", l1: "typography_fontSize_l1__xithyta", code: "typography_fontSize_code__xithytb" }, flexGrow: { true: "Input_flexGrow_true__oylrxv2" }, withIcon: { true: "Input_input_withIcon_true__oylrxvi" }, inValid: { true: "Input_input_inValid_true__oylrxvj" }, customFocus: { false: "Input_input_customFocus_false__oylrxvk" } }, defaultVariants: { padding: "default", fontSize: "s3" }, compoundVariants: [] });
+var inputWrapper = createRuntimeFn({ defaultClassName: "Input_inputWrapper__oylrxv3", variantClassNames: { flexGrow: { true: "Input_flexGrow_true__oylrxv2" } }, defaultVariants: {}, compoundVariants: [] });
+
+export { iconWrapper, input, inputWrapper };

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,16 @@
+import { TFontSizeKeys } from '@citygross/design-tokens_v2';
+import React, { InputHTMLAttributes } from 'react';
+
+declare type TInput = InputHTMLAttributes<HTMLInputElement> & {
+    icon?: JSX.Element;
+    iconOnClick?: () => void;
+    flexGrow?: boolean;
+    inValid?: boolean;
+    fontSize?: TFontSizeKeys;
+    inputSize?: 'small' | 'medium';
+};
+declare function Input({ icon, iconOnClick, flexGrow, inValid, fontSize, inputSize, inputRef, ...props }: TInput & {
+    inputRef?: React.RefObject<HTMLInputElement>;
+}): JSX.Element;
+
+export { Input, TInput };

package/dist/components/Input/Input.js

@@ -0,0 +1,49 @@
+import { inputWrapper, input, iconWrapper } from './Input.css.vanilla.js';
+import React, { useState } from 'react';
+
+function Input({
+  icon,
+  iconOnClick,
+  flexGrow,
+  inValid,
+  fontSize,
+  inputSize = "medium",
+  inputRef,
+  ...props
+}) {
+  const [customFocus, setCustomFocus] = useState(false);
+  return icon ? /* @__PURE__ */ React.createElement("div", { className: inputWrapper({ flexGrow }) }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      className: input({
+        flexGrow,
+        fontSize,
+        padding: inputSize === "small" ? "small" : "default",
+        withIcon: Boolean(icon),
+        inValid
+      }),
+      ref: inputRef,
+      ...props
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: iconWrapper, onClick: iconOnClick }, icon)) : /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      className: input({
+        flexGrow,
+        fontSize,
+        padding: inputSize === "small" ? "small" : "default",
+        withIcon: Boolean(icon),
+        inValid,
+        customFocus
+      }),
+      ref: inputRef,
+      onMouseDown: () => {
+        setCustomFocus(true);
+      },
+      onBlur: () => setCustomFocus(false),
+      ...props
+    }
+  );
+}
+
+export { Input };

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

@@ -0,0 +1,72 @@
+.ListItem_itemInformationContainer__60ftl90 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.ListItem_itemInformationContainer_padding_none__60ftl91 {
+  padding: 0;
+}
+.ListItem_itemInformationContainer_padding_default__60ftl92 {
+  padding: 8px;
+}
+.ListItem_listItemContainer__60ftl93 {
+  display: flex;
+  justify-content: space-between;
+}
+.ListItem_listItemContainer__60ftl93 > p {
+  padding: 1px 0px;
+}
+.ListItem_listLeft__60ftl94 {
+  display: flex;
+  gap: 16px;
+}
+.ListItem_listLeft_alignItems_inherit__60ftl95 {
+  align-items: inherit;
+}
+.ListItem_listLeft_alignItems_center__60ftl96 {
+  align-items: center;
+}
+.ListItem_listRight__60ftl97 {
+  display: flex;
+  gap: 16px;
+}
+.ListItem_listRight_alignItems_top__60ftl98 {
+  align-items: flex-start;
+}
+.ListItem_listRight_alignItems_center__60ftl99 {
+  align-items: center;
+}
+.ListItem_listImageContainer__60ftl9a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+}
+.ListItem_listImageContainer_size_small__60ftl9b {
+  width: 32px;
+  height: 32px;
+}
+.ListItem_listImageContainer_size_default__60ftl9c {
+  width: 64px;
+  height: 64px;
+}
+.ListItem_listImage__60ftl9d {
+  max-width: 100%;
+}
+.ListItem_listImage_height_auto__60ftl9e {
+  max-height: 100%;
+}
+.ListItem_listImage_height_small__60ftl9f {
+  max-height: 32px;
+}
+.ListItem_listImage_height_default__60ftl9g {
+  max-height: 50px;
+}
+@media screen and (min-width: 480px) {
+  .ListItem_listLeft__60ftl94 {
+    gap: 20px;
+  }
+  .ListItem_listRight__60ftl97 {
+    gap: 20px;
+  }
+}

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

@@ -0,0 +1,11 @@
+import './ListItem.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var itemInformationContainer = createRuntimeFn({ defaultClassName: "ListItem_itemInformationContainer__60ftl90", variantClassNames: { padding: { none: "ListItem_itemInformationContainer_padding_none__60ftl91", "default": "ListItem_itemInformationContainer_padding_default__60ftl92" } }, defaultVariants: { padding: "default" }, compoundVariants: [] });
+var listImage = createRuntimeFn({ defaultClassName: "ListItem_listImage__60ftl9d", variantClassNames: { height: { auto: "ListItem_listImage_height_auto__60ftl9e", small: "ListItem_listImage_height_small__60ftl9f", "default": "ListItem_listImage_height_default__60ftl9g" } }, defaultVariants: { height: "default" }, compoundVariants: [] });
+var listImageContainer = createRuntimeFn({ defaultClassName: "ListItem_listImageContainer__60ftl9a", variantClassNames: { size: { small: "ListItem_listImageContainer_size_small__60ftl9b", "default": "ListItem_listImageContainer_size_default__60ftl9c" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var listItemContainer = "ListItem_listItemContainer__60ftl93";
+var listLeft = createRuntimeFn({ defaultClassName: "ListItem_listLeft__60ftl94", variantClassNames: { alignItems: { inherit: "ListItem_listLeft_alignItems_inherit__60ftl95", center: "ListItem_listLeft_alignItems_center__60ftl96" } }, defaultVariants: { alignItems: "center" }, compoundVariants: [] });
+var listRight = createRuntimeFn({ defaultClassName: "ListItem_listRight__60ftl97", variantClassNames: { alignItems: { top: "ListItem_listRight_alignItems_top__60ftl98", center: "ListItem_listRight_alignItems_center__60ftl99" } }, defaultVariants: { alignItems: "center" }, compoundVariants: [] });
+
+export { itemInformationContainer, listImage, listImageContainer, listItemContainer, listLeft, listRight };

package/dist/components/ListItem/ListItem.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TPaletteKeys } from '@citygross/design-tokens_v2';
+
+declare type TItem = {
+    name?: string;
+    image?: string;
+    description?: string;
+    secondaryDescription?: React.ReactNode;
+};
+declare enum EListItemAlignment {
+    CENTER = "center",
+    TOP = "flex-start"
+}
+declare type TListItem = {
+    item?: TItem;
+    loading?: boolean;
+    children?: React.ReactNode;
+    fallBackImage?: string;
+    imageAutoHeight?: boolean;
+    boldHeader?: boolean;
+    smallSkeleton?: boolean;
+    isSmall?: boolean;
+    usedInSearch?: boolean;
+    alignment?: EListItemAlignment;
+    textColor?: TPaletteKeys;
+};
+declare function ListItem({ item, loading, isSmall, fallBackImage, imageAutoHeight, boldHeader, smallSkeleton, children, alignment, textColor, usedInSearch }: TListItem): JSX.Element;
+
+export { EListItemAlignment, ListItem, TItem, TListItem };

package/dist/components/ListItem/ListItem.js

@@ -0,0 +1,92 @@
+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';
+
+var EListItemAlignment = /* @__PURE__ */ ((EListItemAlignment2) => {
+  EListItemAlignment2["CENTER"] = "center";
+  EListItemAlignment2["TOP"] = "flex-start";
+  return EListItemAlignment2;
+})(EListItemAlignment || {});
+function ListItem({
+  item,
+  loading,
+  isSmall,
+  fallBackImage,
+  imageAutoHeight,
+  boldHeader,
+  smallSkeleton,
+  children,
+  alignment = "center" /* CENTER */,
+  textColor,
+  usedInSearch
+}) {
+  return /* @__PURE__ */ React.createElement("div", { className: listItemContainer }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: listLeft({
+        alignItems: usedInSearch || alignment === "flex-start" /* TOP */ ? "inherit" : "center"
+      })
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: listImageContainer({
+          size: isSmall ? "small" : "default"
+        })
+      },
+      /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          className: listImage({
+            height: imageAutoHeight ? "auto" : isSmall ? "small" : "default"
+          }),
+          src: item?.image || fallBackImage || FallbackIcon,
+          alt: item?.name,
+          onError: (e) => {
+            const target = e.target;
+            target.onerror = null;
+            target.src = fallBackImage || FallbackIcon;
+          }
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: itemInformationContainer({
+          padding: usedInSearch || alignment === "flex-start" /* TOP */ ? "none" : "default"
+        })
+      },
+      /* @__PURE__ */ React.createElement(
+        BodyText,
+        {
+          fontWeight: boldHeader ? "semiBold" : "regular",
+          color: textColor || "darkest",
+          size: isSmall ? "extraSmall" : "default"
+        },
+        item?.name || /* @__PURE__ */ React.createElement(Skeleton, { width: smallSkeleton ? 152 : 192, height: 16 })
+      ),
+      loading ? /* @__PURE__ */ React.createElement(BodyText, { size: "small" }, /* @__PURE__ */ React.createElement(Skeleton, { width: smallSkeleton ? 152 : 192, height: 16 })) : item?.description ? /* @__PURE__ */ React.createElement(
+        BodyText,
+        {
+          size: isSmall ? "tiny" : "small",
+          color: textColor || "dark"
+        },
+        item?.description
+      ) : null,
+      item?.secondaryDescription && item.secondaryDescription
+    )
+  ), children && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: listRight({
+        alignItems: alignment === "flex-start" /* TOP */ ? "top" : "center"
+      })
+    },
+    children
+  ));
+}
+
+export { EListItemAlignment, ListItem };

package/dist/components/ListItem/assets/fallback_grocery.js

@@ -0,0 +1,3 @@
+var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\n    <title>shopping_cart_loaded</title>\n    <desc>Created with Sketch.</desc>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\n                </g>\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                </g>\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                </g>\n            </g>\n        </g>\n    </g>\n</svg>";
+
+export { FallbackIcon as default };