@citygross/components_v2 0.0.11 → 0.0.13

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

@@ -0,0 +1,87 @@
+.AlertBox_alertBox__1g3gawu0 {
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 2px 0 0 2px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.AlertBox_alertBox_borderLeft_true__1g3gawu1c {
+  border-left-width: 4px;
+  border-left-style: solid;
+}
+.AlertBox_8__1g3gawu30 {
+  min-width: 8px;
+}
+.AlertBox_16__1g3gawu31 {
+  min-width: 16px;
+}
+.AlertBox_24__1g3gawu32 {
+  min-width: 24px;
+}
+.AlertBox_32__1g3gawu33 {
+  min-width: 32px;
+}
+.AlertBox_40__1g3gawu34 {
+  min-width: 40px;
+}
+.AlertBox_48__1g3gawu35 {
+  min-width: 48px;
+}
+.AlertBox_56__1g3gawu36 {
+  min-width: 56px;
+}
+.AlertBox_64__1g3gawu37 {
+  min-width: 64px;
+}
+.AlertBox_72__1g3gawu38 {
+  min-width: 72px;
+}
+.AlertBox_80__1g3gawu39 {
+  min-width: 80px;
+}
+.AlertBox_88__1g3gawu3a {
+  min-width: 88px;
+}
+.AlertBox_96__1g3gawu3b {
+  min-width: 96px;
+}
+.AlertBox_104__1g3gawu3c {
+  min-width: 104px;
+}
+.AlertBox_112__1g3gawu3d {
+  min-width: 112px;
+}
+.AlertBox_120__1g3gawu3e {
+  min-width: 120px;
+}
+.AlertBox_128__1g3gawu3f {
+  min-width: 128px;
+}
+.AlertBox_136__1g3gawu3g {
+  min-width: 136px;
+}
+.AlertBox_144__1g3gawu3h {
+  min-width: 144px;
+}
+.AlertBox_152__1g3gawu3i {
+  min-width: 152px;
+}
+.AlertBox_160__1g3gawu3j {
+  min-width: 160px;
+}
+.AlertBox_168__1g3gawu3k {
+  min-width: 168px;
+}
+.AlertBox_176__1g3gawu3l {
+  min-width: 176px;
+}
+.AlertBox_184__1g3gawu3m {
+  min-width: 184px;
+}
+.AlertBox_192__1g3gawu3n {
+  min-width: 192px;
+}
+.AlertBox_iconContainer__1g3gawu3o {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,10 @@
+import './../../cssUtils/color.css.ts.vanilla.css';
+import './../../cssUtils/border.css.ts.vanilla.css';
+import './../../cssUtils/spacings.css.ts.vanilla.css';
+import './AlertBox.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var alertBox = createRuntimeFn({ defaultClassName: "AlertBox_alertBox__1g3gawu0", 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" }, borderLeft: { true: "AlertBox_alertBox_borderLeft_true__1g3gawu1c" }, padding: { xxxs: "spacings_padding_xxxs__e0awtz1c", xxs: "spacings_padding_xxs__e0awtz1d", xxs2: "spacings_padding_xxs2__e0awtz1e", xs: "spacings_padding_xs__e0awtz1f", xs2: "spacings_padding_xs2__e0awtz1g", sm: "spacings_padding_sm__e0awtz1h", sm2: "spacings_padding_sm2__e0awtz1i", md: "spacings_padding_md__e0awtz1j", lg: "spacings_padding_lg__e0awtz1k", xl: "spacings_padding_xl__e0awtz1l", xxl: "spacings_padding_xxl__e0awtz1m", false: "spacings_padding_false__e0awtz1n" }, borderColor: { primary: "border_borderColor_primary__c3f0gf0", secondary: "border_borderColor_secondary__c3f0gf1", brandYellow: "border_borderColor_brandYellow__c3f0gf2", brandBlue: "border_borderColor_brandBlue__c3f0gf3", brandPurple: "border_borderColor_brandPurple__c3f0gf4", brandPrio: "border_borderColor_brandPrio__c3f0gf5", yellowLighter: "border_borderColor_yellowLighter__c3f0gf6", yellowLight: "border_borderColor_yellowLight__c3f0gf7", blueLight: "border_borderColor_blueLight__c3f0gf8", blueLighter: "border_borderColor_blueLighter__c3f0gf9", blueMedium: "border_borderColor_blueMedium__c3f0gfa", greenLight: "border_borderColor_greenLight__c3f0gfb", greenMedium: "border_borderColor_greenMedium__c3f0gfc", redLight: "border_borderColor_redLight__c3f0gfd", recipeVego: "border_borderColor_recipeVego__c3f0gfe", recipeLactose: "border_borderColor_recipeLactose__c3f0gff", recipeGluten: "border_borderColor_recipeGluten__c3f0gfg", link: "border_borderColor_link__c3f0gfh", white: "border_borderColor_white__c3f0gfi", black: "border_borderColor_black__c3f0gfj", lightest: "border_borderColor_lightest__c3f0gfk", lighter: "border_borderColor_lighter__c3f0gfl", light: "border_borderColor_light__c3f0gfm", medium: "border_borderColor_medium__c3f0gfn", mediumDark: "border_borderColor_mediumDark__c3f0gfo", dark: "border_borderColor_dark__c3f0gfp", darker: "border_borderColor_darker__c3f0gfq", darkest: "border_borderColor_darkest__c3f0gfr", buttonGray: "border_borderColor_buttonGray__c3f0gfs", disabledGray: "border_borderColor_disabledGray__c3f0gft", disabledDarkGray: "border_borderColor_disabledDarkGray__c3f0gfu", placeholder: "border_borderColor_placeholder__c3f0gfv", border: "border_borderColor_border__c3f0gfw", boxShadow: "border_borderColor_boxShadow__c3f0gfx", boxShadowActive: "border_borderColor_boxShadowActive__c3f0gfy", alertRed: "border_borderColor_alertRed__c3f0gfz", alertBlue: "border_borderColor_alertBlue__c3f0gf10", alertGreen: "border_borderColor_alertGreen__c3f0gf11", darkOverlay: "border_borderColor_darkOverlay__c3f0gf12", transparent: "border_borderColor_transparent__c3f0gf13", brandBlueHover: "border_borderColor_brandBlueHover__c3f0gf14", brandYellowHover: "border_borderColor_brandYellowHover__c3f0gf15", brandPrioHover: "border_borderColor_brandPrioHover__c3f0gf16", brandBlueActive: "border_borderColor_brandBlueActive__c3f0gf17", brandYellowActive: "border_borderColor_brandYellowActive__c3f0gf18", brandPrioActive: "border_borderColor_brandPrioActive__c3f0gf19", none: "border_borderColor_none__c3f0gf1a" } }, defaultVariants: {}, compoundVariants: [] });
+var iconContainer = createRuntimeFn({ defaultClassName: "AlertBox_iconContainer__1g3gawu3o", variantClassNames: { minWidth: { "8": "AlertBox_8__1g3gawu30", "16": "AlertBox_16__1g3gawu31", "24": "AlertBox_24__1g3gawu32", "32": "AlertBox_32__1g3gawu33", "40": "AlertBox_40__1g3gawu34", "48": "AlertBox_48__1g3gawu35", "56": "AlertBox_56__1g3gawu36", "64": "AlertBox_64__1g3gawu37", "72": "AlertBox_72__1g3gawu38", "80": "AlertBox_80__1g3gawu39", "88": "AlertBox_88__1g3gawu3a", "96": "AlertBox_96__1g3gawu3b", "104": "AlertBox_104__1g3gawu3c", "112": "AlertBox_112__1g3gawu3d", "120": "AlertBox_120__1g3gawu3e", "128": "AlertBox_128__1g3gawu3f", "136": "AlertBox_136__1g3gawu3g", "144": "AlertBox_144__1g3gawu3h", "152": "AlertBox_152__1g3gawu3i", "160": "AlertBox_160__1g3gawu3j", "168": "AlertBox_168__1g3gawu3k", "176": "AlertBox_176__1g3gawu3l", "184": "AlertBox_184__1g3gawu3m", "192": "AlertBox_192__1g3gawu3n" } }, defaultVariants: { minWidth: "24" }, compoundVariants: [] });
+
+export { alertBox, iconContainer };

package/dist/components/AlertBox/AlertBox.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TPaletteKeys, THardSpacingKeys, TSpacingKeys } from '@citygross/design-tokens_v2';
+
+declare type TAlertBox = {
+    background?: TPaletteKeys;
+    borderColor?: TPaletteKeys;
+    icon?: JSX.Element;
+    children: React.ReactNode;
+    iconMinWidth?: THardSpacingKeys;
+    withArrow?: boolean;
+    arrowPlacement?: 'left' | 'right';
+    arrowSpacing?: THardSpacingKeys;
+    padding?: TSpacingKeys;
+};
+declare function AlertBox({ background, borderColor, icon, iconMinWidth, withArrow, arrowSpacing, arrowPlacement, padding, children }: TAlertBox): JSX.Element;
+
+export { AlertBox, TAlertBox };

package/dist/components/AlertBox/AlertBox.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import BoxArrow from '../BoxArrow/BoxArrow.js';
+import { alertBox, iconContainer } from './AlertBox.css.vanilla.js';
+
+function AlertBox({
+  background = "blueLight",
+  borderColor = "alertBlue",
+  icon,
+  iconMinWidth = 24,
+  withArrow,
+  arrowSpacing,
+  arrowPlacement,
+  padding = "sm",
+  children
+}) {
+  return /* @__PURE__ */ React.createElement("div", null, withArrow && /* @__PURE__ */ React.createElement(
+    BoxArrow,
+    {
+      arrowPlacement,
+      arrowSpacing,
+      background
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: alertBox({
+        backgroundColor: background,
+        borderColor,
+        borderLeft: Boolean(borderColor),
+        padding
+      })
+    },
+    icon && /* @__PURE__ */ React.createElement("div", { className: iconContainer({ minWidth: `${iconMinWidth}` }) }, icon),
+    children
+  ));
+}
+
+export { AlertBox };

package/dist/components/Box/Box.js

@@ -1,22 +1,39 @@
 import React from 'react';
 import { BoxStyle } from './Box.css.vanilla.js';
 
-function Box({ background, borderColor, borderRadius, hoverBackgroundColor, padding, paddingVertical, paddingHorizontal, margin, marginHorizontal, marginVertical, children, ...props }) {
-    return /* @__PURE__ */ React.createElement("div", { ...props }, /* @__PURE__ */ React.createElement("div", {
-        className: BoxStyle({
-            backgroundColor: background,
-            border: Boolean(borderColor),
-            borderColor,
-            borderRadius,
-            padding,
-            paddingVertical,
-            paddingHorizontal,
-            margin,
-            marginHorizontal,
-            marginVertical,
-            hoverBackgroundColor
-        })
-    }, children));
+function Box({
+  background,
+  borderColor,
+  borderRadius,
+  hoverBackgroundColor,
+  padding,
+  paddingVertical,
+  paddingHorizontal,
+  margin,
+  marginHorizontal,
+  marginVertical,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement("div", { ...props }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: BoxStyle({
+        backgroundColor: background,
+        border: Boolean(borderColor),
+        borderColor,
+        borderRadius,
+        padding,
+        paddingVertical,
+        paddingHorizontal,
+        margin,
+        marginHorizontal,
+        marginVertical,
+        hoverBackgroundColor
+      })
+    },
+    children
+  ));
 }
 
 export { Box };

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

@@ -0,0 +1,154 @@
+.BoxArrow_8__11q5o2d0 {
+  margin-right: 8px;
+}
+.BoxArrow_16__11q5o2d1 {
+  margin-right: 16px;
+}
+.BoxArrow_24__11q5o2d2 {
+  margin-right: 24px;
+}
+.BoxArrow_32__11q5o2d3 {
+  margin-right: 32px;
+}
+.BoxArrow_40__11q5o2d4 {
+  margin-right: 40px;
+}
+.BoxArrow_48__11q5o2d5 {
+  margin-right: 48px;
+}
+.BoxArrow_56__11q5o2d6 {
+  margin-right: 56px;
+}
+.BoxArrow_64__11q5o2d7 {
+  margin-right: 64px;
+}
+.BoxArrow_72__11q5o2d8 {
+  margin-right: 72px;
+}
+.BoxArrow_80__11q5o2d9 {
+  margin-right: 80px;
+}
+.BoxArrow_88__11q5o2da {
+  margin-right: 88px;
+}
+.BoxArrow_96__11q5o2db {
+  margin-right: 96px;
+}
+.BoxArrow_104__11q5o2dc {
+  margin-right: 104px;
+}
+.BoxArrow_112__11q5o2dd {
+  margin-right: 112px;
+}
+.BoxArrow_120__11q5o2de {
+  margin-right: 120px;
+}
+.BoxArrow_128__11q5o2df {
+  margin-right: 128px;
+}
+.BoxArrow_136__11q5o2dg {
+  margin-right: 136px;
+}
+.BoxArrow_144__11q5o2dh {
+  margin-right: 144px;
+}
+.BoxArrow_152__11q5o2di {
+  margin-right: 152px;
+}
+.BoxArrow_160__11q5o2dj {
+  margin-right: 160px;
+}
+.BoxArrow_168__11q5o2dk {
+  margin-right: 168px;
+}
+.BoxArrow_176__11q5o2dl {
+  margin-right: 176px;
+}
+.BoxArrow_184__11q5o2dm {
+  margin-right: 184px;
+}
+.BoxArrow_192__11q5o2dn {
+  margin-right: 192px;
+}
+.BoxArrow_8__11q5o2do {
+  margin-left: 8px;
+}
+.BoxArrow_16__11q5o2dp {
+  margin-left: 16px;
+}
+.BoxArrow_24__11q5o2dq {
+  margin-left: 24px;
+}
+.BoxArrow_32__11q5o2dr {
+  margin-left: 32px;
+}
+.BoxArrow_40__11q5o2ds {
+  margin-left: 40px;
+}
+.BoxArrow_48__11q5o2dt {
+  margin-left: 48px;
+}
+.BoxArrow_56__11q5o2du {
+  margin-left: 56px;
+}
+.BoxArrow_64__11q5o2dv {
+  margin-left: 64px;
+}
+.BoxArrow_72__11q5o2dw {
+  margin-left: 72px;
+}
+.BoxArrow_80__11q5o2dx {
+  margin-left: 80px;
+}
+.BoxArrow_88__11q5o2dy {
+  margin-left: 88px;
+}
+.BoxArrow_96__11q5o2dz {
+  margin-left: 96px;
+}
+.BoxArrow_104__11q5o2d10 {
+  margin-left: 104px;
+}
+.BoxArrow_112__11q5o2d11 {
+  margin-left: 112px;
+}
+.BoxArrow_120__11q5o2d12 {
+  margin-left: 120px;
+}
+.BoxArrow_128__11q5o2d13 {
+  margin-left: 128px;
+}
+.BoxArrow_136__11q5o2d14 {
+  margin-left: 136px;
+}
+.BoxArrow_144__11q5o2d15 {
+  margin-left: 144px;
+}
+.BoxArrow_152__11q5o2d16 {
+  margin-left: 152px;
+}
+.BoxArrow_160__11q5o2d17 {
+  margin-left: 160px;
+}
+.BoxArrow_168__11q5o2d18 {
+  margin-left: 168px;
+}
+.BoxArrow_176__11q5o2d19 {
+  margin-left: 176px;
+}
+.BoxArrow_184__11q5o2d1a {
+  margin-left: 184px;
+}
+.BoxArrow_192__11q5o2d1b {
+  margin-left: 192px;
+}
+.BoxArrow_boxArrowContainer__11q5o2d1c {
+  display: flex;
+  margin-bottom: -1px;
+}
+.BoxArrow_boxArrowContainer_placement_left__11q5o2d1d {
+  justify-content: flex-start;
+}
+.BoxArrow_boxArrowContainer_placement_right__11q5o2d1e {
+  justify-content: flex-end;
+}

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

@@ -0,0 +1,6 @@
+import './BoxArrow.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var boxArrowContainer = createRuntimeFn({ defaultClassName: "BoxArrow_boxArrowContainer__11q5o2d1c", variantClassNames: { placement: { left: "BoxArrow_boxArrowContainer_placement_left__11q5o2d1d", right: "BoxArrow_boxArrowContainer_placement_right__11q5o2d1e" }, offsetRight: { "8": "BoxArrow_8__11q5o2d0", "16": "BoxArrow_16__11q5o2d1", "24": "BoxArrow_24__11q5o2d2", "32": "BoxArrow_32__11q5o2d3", "40": "BoxArrow_40__11q5o2d4", "48": "BoxArrow_48__11q5o2d5", "56": "BoxArrow_56__11q5o2d6", "64": "BoxArrow_64__11q5o2d7", "72": "BoxArrow_72__11q5o2d8", "80": "BoxArrow_80__11q5o2d9", "88": "BoxArrow_88__11q5o2da", "96": "BoxArrow_96__11q5o2db", "104": "BoxArrow_104__11q5o2dc", "112": "BoxArrow_112__11q5o2dd", "120": "BoxArrow_120__11q5o2de", "128": "BoxArrow_128__11q5o2df", "136": "BoxArrow_136__11q5o2dg", "144": "BoxArrow_144__11q5o2dh", "152": "BoxArrow_152__11q5o2di", "160": "BoxArrow_160__11q5o2dj", "168": "BoxArrow_168__11q5o2dk", "176": "BoxArrow_176__11q5o2dl", "184": "BoxArrow_184__11q5o2dm", "192": "BoxArrow_192__11q5o2dn" }, offsetLeft: { "8": "BoxArrow_8__11q5o2do", "16": "BoxArrow_16__11q5o2dp", "24": "BoxArrow_24__11q5o2dq", "32": "BoxArrow_32__11q5o2dr", "40": "BoxArrow_40__11q5o2ds", "48": "BoxArrow_48__11q5o2dt", "56": "BoxArrow_56__11q5o2du", "64": "BoxArrow_64__11q5o2dv", "72": "BoxArrow_72__11q5o2dw", "80": "BoxArrow_80__11q5o2dx", "88": "BoxArrow_88__11q5o2dy", "96": "BoxArrow_96__11q5o2dz", "104": "BoxArrow_104__11q5o2d10", "112": "BoxArrow_112__11q5o2d11", "120": "BoxArrow_120__11q5o2d12", "128": "BoxArrow_128__11q5o2d13", "136": "BoxArrow_136__11q5o2d14", "144": "BoxArrow_144__11q5o2d15", "152": "BoxArrow_152__11q5o2d16", "160": "BoxArrow_160__11q5o2d17", "168": "BoxArrow_168__11q5o2d18", "176": "BoxArrow_176__11q5o2d19", "184": "BoxArrow_184__11q5o2d1a", "192": "BoxArrow_192__11q5o2d1b" } }, defaultVariants: {}, compoundVariants: [] });
+
+export { boxArrowContainer };

package/dist/components/BoxArrow/BoxArrow.js

@@ -0,0 +1,19 @@
+import { Icons } from '@citygross/icons_v2';
+import React from 'react';
+import { boxArrowContainer } from './BoxArrow.css.vanilla.js';
+
+const BoxArrow = ({ arrowPlacement, arrowSpacing, background }) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: boxArrowContainer({
+        placement: arrowPlacement,
+        offsetLeft: arrowPlacement === "left" ? arrowSpacing : void 0,
+        offsetRight: arrowPlacement === "right" ? arrowSpacing : void 0
+      })
+    },
+    /* @__PURE__ */ React.createElement(Icons.BoxArrow, { width: 17, height: 8, color: background })
+  );
+};
+
+export { BoxArrow as default };

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

@@ -0,0 +1,23 @@
+.CartItemSummary_cartitemsummary__vltros0 {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.CartItemSummary_cancelledWrapper__vltros1 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.CartItemSummary_itemInformationContainer__vltros2 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.CartItemSummary_amountText__vltros3 {
+  white-space: nowrap;
+}
+@media screen and (min-width: 480px) {
+  .CartItemSummary_cartitemsummary__vltros0 {
+    flex-direction: row;
+  }
+}

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

@@ -0,0 +1,8 @@
+import './CartItemSummary.css.ts.vanilla.css';
+
+var amountText = "CartItemSummary_amountText__vltros3";
+var cancelledWrapper = "CartItemSummary_cancelledWrapper__vltros1";
+var cartitemsummary = "CartItemSummary_cartitemsummary__vltros0";
+var itemInformationContainer = "CartItemSummary_itemInformationContainer__vltros2";
+
+export { amountText, cancelledWrapper, cartitemsummary, itemInformationContainer };

package/dist/components/CartItemSummary/CartItemSummary.d.ts

@@ -0,0 +1,15 @@
+declare type TSummaryItem = {
+    amount: number;
+    cancelledAmount: number;
+    quantity: number;
+    cancelledQuantity: number;
+    name?: string;
+};
+declare type TCartItemSummary = {
+    product: TSummaryItem;
+    withParenthesis?: boolean;
+    unit?: string;
+};
+declare const CartItemSummary: ({ product, withParenthesis, unit }: TCartItemSummary) => JSX.Element;
+
+export { CartItemSummary, TCartItemSummary, TSummaryItem };

package/dist/components/CartItemSummary/CartItemSummary.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BodyText } from '../../typography/BodyText/BodyText.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';
+
+const CartItemSummary = ({
+  product,
+  withParenthesis,
+  unit = "st"
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: cartitemsummary }, product && (product.amount === 0 || product.amount) && product?.cancelledQuantity !== 0 && product?.cancelledQuantity && /* @__PURE__ */ React.createElement("div", { className: cancelledWrapper }, /* @__PURE__ */ React.createElement(BodyText, { size: "small", textDecoration: "lineThrough" }, product?.cancelledQuantity ? `${product.cancelledQuantity} st` : /* @__PURE__ */ React.createElement(Skeleton, { width: 104 })), /* @__PURE__ */ React.createElement(
+    H3,
+    {
+      cx: amountText,
+      lineThrough: true,
+      fontWeight: withParenthesis ? "regular" : "semiBold"
+    },
+    product ? formatPrice(product.cancelledAmount, withParenthesis) : /* @__PURE__ */ React.createElement(Skeleton, { width: 104 })
+  )), /* @__PURE__ */ React.createElement("div", { className: itemInformationContainer }, /* @__PURE__ */ React.createElement(BodyText, { size: "small" }, product?.quantity || product?.quantity === 0 ? `${product.quantity} ${unit}` : /* @__PURE__ */ React.createElement(Skeleton, { width: 104 })), /* @__PURE__ */ React.createElement(
+    H3,
+    {
+      cx: amountText,
+      fontWeight: withParenthesis ? "regular" : "semiBold"
+    },
+    product ? formatPrice(product.amount, withParenthesis) : /* @__PURE__ */ React.createElement(Skeleton, { width: 104 })
+  )));
+};
+
+export { CartItemSummary };

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

@@ -0,0 +1,34 @@
+.CartSummary_cartPaymentContainer__1h2882h0 {
+  background-color: #FFFBE7;
+}
+.CartSummary_cartSummaryHeader__1h2882h1 {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.CartSummary_cartSummaryHeader_title_true__1h2882h2 {
+  padding-top: 16px;
+}
+.CartSummary_cartSummaryFooter__1h2882h3 {
+  padding: 24px;
+  background-color: #FFF7D1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.CartSummary_cartLine__1h2882h4 {
+  display: flex;
+  justify-content: space-between;
+}
+.CartSummary_amountWrapper__1h2882h5 {
+  display: flex;
+  gap: 8px;
+}
+.CartSummary_cartSummaryTitle__1h2882h6 {
+  padding: 24px 0 16px;
+  margin: 0 24px;
+  display: flex;
+  gap: 8px;
+  border-bottom: 1px solid #E8E8E8;
+}

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

@@ -0,0 +1,11 @@
+import './CartSummary.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var amountWrapper = "CartSummary_amountWrapper__1h2882h5";
+var cartLine = "CartSummary_cartLine__1h2882h4";
+var cartPaymentContainer = "CartSummary_cartPaymentContainer__1h2882h0";
+var cartSummaryFooter = "CartSummary_cartSummaryFooter__1h2882h3";
+var cartSummaryHeader = createRuntimeFn({ defaultClassName: "CartSummary_cartSummaryHeader__1h2882h1", variantClassNames: { title: { true: "CartSummary_cartSummaryHeader_title_true__1h2882h2" } }, defaultVariants: {}, compoundVariants: [] });
+var cartSummaryTitle = "CartSummary_cartSummaryTitle__1h2882h6";
+
+export { amountWrapper, cartLine, cartPaymentContainer, cartSummaryFooter, cartSummaryHeader, cartSummaryTitle };

package/dist/components/CartSummary/CartSummary.d.ts

@@ -0,0 +1,26 @@
+import { TSummaryItem } from '../CartItemSummary/CartItemSummary.js';
+
+declare type TCartSummary = {
+    title?: string;
+    subTitle?: string;
+    bags?: TSummaryItem[];
+    groceries?: TSummaryItem[];
+    charges?: TSummaryItem[];
+    cateredMeals?: TSummaryItem[];
+    deliveryFee?: {
+        amount: number;
+        taxAmount: number;
+        taxPercentage: number;
+        totalDiscountAmount: number;
+    };
+    totalAmount: number;
+    totalDiscount: number;
+    totalTaxAmount: number;
+    totalLabel?: string;
+    taxLabel?: string;
+    shippingLabel?: string;
+    saveLabel?: string;
+};
+declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, ...cartSummary }: TCartSummary): JSX.Element;
+
+export { CartSummary, TCartSummary };

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