@citygross/components_v2 0.0.12 → 0.0.14

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

@@ -0,0 +1,164 @@
+@keyframes Skeleton_shimmer__i80r920 {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.Skeleton_8__i80r921 {
+  width: 8px;
+}
+.Skeleton_16__i80r922 {
+  width: 16px;
+}
+.Skeleton_24__i80r923 {
+  width: 24px;
+}
+.Skeleton_32__i80r924 {
+  width: 32px;
+}
+.Skeleton_40__i80r925 {
+  width: 40px;
+}
+.Skeleton_48__i80r926 {
+  width: 48px;
+}
+.Skeleton_56__i80r927 {
+  width: 56px;
+}
+.Skeleton_64__i80r928 {
+  width: 64px;
+}
+.Skeleton_72__i80r929 {
+  width: 72px;
+}
+.Skeleton_80__i80r92a {
+  width: 80px;
+}
+.Skeleton_88__i80r92b {
+  width: 88px;
+}
+.Skeleton_96__i80r92c {
+  width: 96px;
+}
+.Skeleton_104__i80r92d {
+  width: 104px;
+}
+.Skeleton_112__i80r92e {
+  width: 112px;
+}
+.Skeleton_120__i80r92f {
+  width: 120px;
+}
+.Skeleton_128__i80r92g {
+  width: 128px;
+}
+.Skeleton_136__i80r92h {
+  width: 136px;
+}
+.Skeleton_144__i80r92i {
+  width: 144px;
+}
+.Skeleton_152__i80r92j {
+  width: 152px;
+}
+.Skeleton_160__i80r92k {
+  width: 160px;
+}
+.Skeleton_168__i80r92l {
+  width: 168px;
+}
+.Skeleton_176__i80r92m {
+  width: 176px;
+}
+.Skeleton_184__i80r92n {
+  width: 184px;
+}
+.Skeleton_192__i80r92o {
+  width: 192px;
+}
+.Skeleton_8__i80r92p {
+  height: 8px;
+}
+.Skeleton_16__i80r92q {
+  height: 16px;
+}
+.Skeleton_24__i80r92r {
+  height: 24px;
+}
+.Skeleton_32__i80r92s {
+  height: 32px;
+}
+.Skeleton_40__i80r92t {
+  height: 40px;
+}
+.Skeleton_48__i80r92u {
+  height: 48px;
+}
+.Skeleton_56__i80r92v {
+  height: 56px;
+}
+.Skeleton_64__i80r92w {
+  height: 64px;
+}
+.Skeleton_72__i80r92x {
+  height: 72px;
+}
+.Skeleton_80__i80r92y {
+  height: 80px;
+}
+.Skeleton_88__i80r92z {
+  height: 88px;
+}
+.Skeleton_96__i80r9210 {
+  height: 96px;
+}
+.Skeleton_104__i80r9211 {
+  height: 104px;
+}
+.Skeleton_112__i80r9212 {
+  height: 112px;
+}
+.Skeleton_120__i80r9213 {
+  height: 120px;
+}
+.Skeleton_128__i80r9214 {
+  height: 128px;
+}
+.Skeleton_136__i80r9215 {
+  height: 136px;
+}
+.Skeleton_144__i80r9216 {
+  height: 144px;
+}
+.Skeleton_152__i80r9217 {
+  height: 152px;
+}
+.Skeleton_160__i80r9218 {
+  height: 160px;
+}
+.Skeleton_168__i80r9219 {
+  height: 168px;
+}
+.Skeleton_176__i80r921a {
+  height: 176px;
+}
+.Skeleton_184__i80r921b {
+  height: 184px;
+}
+.Skeleton_192__i80r921c {
+  height: 192px;
+}
+.Skeleton_skeletonBase__i80r921d {
+  display: inline-block;
+  background-color: #E8E8E8;
+  animation: Skeleton_shimmer__i80r920 3s ease-in-out 0s infinite;
+  background-image: linear-gradient(
+  to right,
+  #E8E8E8 0%,
+  #F7F7F7 50%,
+  #E8E8E8 100%
+);
+  background-size: 200% 100%;
+}

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

@@ -0,0 +1,7 @@
+import './../../cssUtils/border.css.ts.vanilla.css';
+import './Skeleton.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var skeleton = createRuntimeFn({ defaultClassName: "Skeleton__i80r921e Skeleton_skeletonBase__i80r921d", variantClassNames: { borderRadius: { none: "border_borderRadius_none__c3f0gf1b", extraSmall: "border_borderRadius_extraSmall__c3f0gf1c", small: "border_borderRadius_small__c3f0gf1d", "default": "border_borderRadius_default__c3f0gf1e", big: "border_borderRadius_big__c3f0gf1f", bigger: "border_borderRadius_bigger__c3f0gf1g", large: "border_borderRadius_large__c3f0gf1h", round: "border_borderRadius_round__c3f0gf1i" }, width: { "8": "Skeleton_8__i80r921", "16": "Skeleton_16__i80r922", "24": "Skeleton_24__i80r923", "32": "Skeleton_32__i80r924", "40": "Skeleton_40__i80r925", "48": "Skeleton_48__i80r926", "56": "Skeleton_56__i80r927", "64": "Skeleton_64__i80r928", "72": "Skeleton_72__i80r929", "80": "Skeleton_80__i80r92a", "88": "Skeleton_88__i80r92b", "96": "Skeleton_96__i80r92c", "104": "Skeleton_104__i80r92d", "112": "Skeleton_112__i80r92e", "120": "Skeleton_120__i80r92f", "128": "Skeleton_128__i80r92g", "136": "Skeleton_136__i80r92h", "144": "Skeleton_144__i80r92i", "152": "Skeleton_152__i80r92j", "160": "Skeleton_160__i80r92k", "168": "Skeleton_168__i80r92l", "176": "Skeleton_176__i80r92m", "184": "Skeleton_184__i80r92n", "192": "Skeleton_192__i80r92o" }, height: { "8": "Skeleton_8__i80r92p", "16": "Skeleton_16__i80r92q", "24": "Skeleton_24__i80r92r", "32": "Skeleton_32__i80r92s", "40": "Skeleton_40__i80r92t", "48": "Skeleton_48__i80r92u", "56": "Skeleton_56__i80r92v", "64": "Skeleton_64__i80r92w", "72": "Skeleton_72__i80r92x", "80": "Skeleton_80__i80r92y", "88": "Skeleton_88__i80r92z", "96": "Skeleton_96__i80r9210", "104": "Skeleton_104__i80r9211", "112": "Skeleton_112__i80r9212", "120": "Skeleton_120__i80r9213", "128": "Skeleton_128__i80r9214", "136": "Skeleton_136__i80r9215", "144": "Skeleton_144__i80r9216", "152": "Skeleton_152__i80r9217", "160": "Skeleton_160__i80r9218", "168": "Skeleton_168__i80r9219", "176": "Skeleton_176__i80r921a", "184": "Skeleton_184__i80r921b", "192": "Skeleton_192__i80r921c" } }, defaultVariants: {}, compoundVariants: [] });
+
+export { skeleton };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,10 @@
+import { THardSpacingKeys, TBorderRadiusKeys } from '@citygross/design-tokens_v2';
+
+declare type TSkeleton = {
+    width?: THardSpacingKeys;
+    height?: THardSpacingKeys;
+    borderRadius?: TBorderRadiusKeys;
+    className?: string;
+};
+
+export { TSkeleton };

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { skeleton } from './Skeleton.css.vanilla.js';
+
+const Skeleton = ({
+  width,
+  height,
+  borderRadius,
+  className
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: `${skeleton({
+        width,
+        height,
+        borderRadius
+      })} ${className}`
+    }
+  );
+};
+
+export { Skeleton as default };

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

@@ -0,0 +1,3 @@
+.Spacer_spacer__7fj4w10 {
+  width: 100%;
+}

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

@@ -0,0 +1,7 @@
+import './../../cssUtils/spacings.css.ts.vanilla.css';
+import './Spacer.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var spacer = createRuntimeFn({ defaultClassName: "Spacer_spacer__7fj4w10", variantClassNames: { marginBottomDynamic: { xxxs: "spacings_marginBottomDynamic_xxxs__e0awtz10", xxs: "spacings_marginBottomDynamic_xxs__e0awtz11", xxs2: "spacings_marginBottomDynamic_xxs2__e0awtz12", xs: "spacings_marginBottomDynamic_xs__e0awtz13", xs2: "spacings_marginBottomDynamic_xs2__e0awtz14", sm: "spacings_marginBottomDynamic_sm__e0awtz15", sm2: "spacings_marginBottomDynamic_sm2__e0awtz16", md: "spacings_marginBottomDynamic_md__e0awtz17", lg: "spacings_marginBottomDynamic_lg__e0awtz18", xl: "spacings_marginBottomDynamic_xl__e0awtz19", xxl: "spacings_marginBottomDynamic_xxl__e0awtz1a", false: "spacings_marginBottomDynamic_false__e0awtz1b" } }, defaultVariants: {}, compoundVariants: [] });
+
+export { spacer };

package/dist/components/Spacer/Spacer.d.ts

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

package/dist/components/Spacer/Spacer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { spacer } from './Spacer.css.vanilla.js';
+
+const Spacer = ({ spacing }) => /* @__PURE__ */ React.createElement("div", { className: spacer({ marginBottomDynamic: spacing }) });
+
+export { Spacer };

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

@@ -0,0 +1,171 @@
+@keyframes Spinner_spin__1rywg3p0 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.Spinner_size_small__1rywg3p1 {
+  height: 16px;
+  width: 16px;
+  border-width: 2.1333333333333333;
+  border-style: solid;
+}
+.Spinner_size_medium__1rywg3p2 {
+  height: 24px;
+  width: 24px;
+  border-width: 3.2;
+  border-style: solid;
+}
+.Spinner_size_large__1rywg3p3 {
+  height: 32px;
+  width: 32px;
+  border-width: 4.266666666666667;
+  border-style: solid;
+}
+.Spinner_spinnerColor_primary__1rywg3p4 {
+  border-top-color: #FFE522;
+}
+.Spinner_spinnerColor_secondary__1rywg3p5 {
+  border-top-color: #0069AE;
+}
+.Spinner_spinnerColor_brandYellow__1rywg3p6 {
+  border-top-color: #FFE522;
+}
+.Spinner_spinnerColor_brandBlue__1rywg3p7 {
+  border-top-color: #0069AE;
+}
+.Spinner_spinnerColor_brandPurple__1rywg3p8 {
+  border-top-color: #A71680;
+}
+.Spinner_spinnerColor_brandPrio__1rywg3p9 {
+  border-top-color: #a80073;
+}
+.Spinner_spinnerColor_yellowLighter__1rywg3pa {
+  border-top-color: #FFFBE7;
+}
+.Spinner_spinnerColor_yellowLight__1rywg3pb {
+  border-top-color: #FFF7D1;
+}
+.Spinner_spinnerColor_blueLight__1rywg3pc {
+  border-top-color: #ECF7FE;
+}
+.Spinner_spinnerColor_blueLighter__1rywg3pd {
+  border-top-color: #D3EDFD;
+}
+.Spinner_spinnerColor_blueMedium__1rywg3pe {
+  border-top-color: #92B9D3;
+}
+.Spinner_spinnerColor_greenLight__1rywg3pf {
+  border-top-color: #F2FDF2;
+}
+.Spinner_spinnerColor_greenMedium__1rywg3pg {
+  border-top-color: #BEE5BE;
+}
+.Spinner_spinnerColor_redLight__1rywg3ph {
+  border-top-color: #FCE9E9;
+}
+.Spinner_spinnerColor_recipeVego__1rywg3pi {
+  border-top-color: #65DB69;
+}
+.Spinner_spinnerColor_recipeLactose__1rywg3pj {
+  border-top-color: #8CCDF0;
+}
+.Spinner_spinnerColor_recipeGluten__1rywg3pk {
+  border-top-color: #D5642A;
+}
+.Spinner_spinnerColor_link__1rywg3pl {
+  border-top-color: #0072BB;
+}
+.Spinner_spinnerColor_white__1rywg3pm {
+  border-top-color: #FFFFFF;
+}
+.Spinner_spinnerColor_black__1rywg3pn {
+  border-top-color: #000000;
+}
+.Spinner_spinnerColor_lightest__1rywg3po {
+  border-top-color: #F7F7F7;
+}
+.Spinner_spinnerColor_lighter__1rywg3pp {
+  border-top-color: #F1F1F1;
+}
+.Spinner_spinnerColor_light__1rywg3pq {
+  border-top-color: #E8E8E8;
+}
+.Spinner_spinnerColor_medium__1rywg3pr {
+  border-top-color: #DBDBDB;
+}
+.Spinner_spinnerColor_mediumDark__1rywg3ps {
+  border-top-color: #6C6C6C;
+}
+.Spinner_spinnerColor_dark__1rywg3pt {
+  border-top-color: #979797;
+}
+.Spinner_spinnerColor_darker__1rywg3pu {
+  border-top-color: #4A4A4A;
+}
+.Spinner_spinnerColor_darkest__1rywg3pv {
+  border-top-color: #333333;
+}
+.Spinner_spinnerColor_buttonGray__1rywg3pw {
+  border-top-color: #E5E4E5;
+}
+.Spinner_spinnerColor_disabledGray__1rywg3px {
+  border-top-color: #B8B8B8;
+}
+.Spinner_spinnerColor_disabledDarkGray__1rywg3py {
+  border-top-color: #5c5c5c;
+}
+.Spinner_spinnerColor_placeholder__1rywg3pz {
+  border-top-color: #8f8f8f;
+}
+.Spinner_spinnerColor_border__1rywg3p10 {
+  border-top-color: #0069AE;
+}
+.Spinner_spinnerColor_boxShadow__1rywg3p11 {
+  border-top-color: #E1E1E1;
+}
+.Spinner_spinnerColor_boxShadowActive__1rywg3p12 {
+  border-top-color: rgba(7, 52, 99, 0.15);
+}
+.Spinner_spinnerColor_alertRed__1rywg3p13 {
+  border-top-color: #E02721;
+}
+.Spinner_spinnerColor_alertBlue__1rywg3p14 {
+  border-top-color: #0072BB;
+}
+.Spinner_spinnerColor_alertGreen__1rywg3p15 {
+  border-top-color: #3F9A3C;
+}
+.Spinner_spinnerColor_darkOverlay__1rywg3p16 {
+  border-top-color: rgba(0, 0, 0, 0.6);
+}
+.Spinner_spinnerColor_transparent__1rywg3p17 {
+  border-top-color: #ffffff00;
+}
+.Spinner_spinnerColor_brandBlueHover__1rywg3p18 {
+  border-top-color: #005C99;
+}
+.Spinner_spinnerColor_brandYellowHover__1rywg3p19 {
+  border-top-color: #F5D800;
+}
+.Spinner_spinnerColor_brandPrioHover__1rywg3p1a {
+  border-top-color: #90136F;
+}
+.Spinner_spinnerColor_brandBlueActive__1rywg3p1b {
+  border-top-color: #004D80;
+}
+.Spinner_spinnerColor_brandYellowActive__1rywg3p1c {
+  border-top-color: #DBC100;
+}
+.Spinner_spinnerColor_brandPrioActive__1rywg3p1d {
+  border-top-color: #7A105E;
+}
+.Spinner_spinnerColor_none__1rywg3p1e {
+  border-top-color: none;
+}
+.Spinner_spinnerWrapper__1rywg3p1f {
+  border-radius: 50%;
+  animation: Spinner_spin__1rywg3p0 1s linear infinite;
+}

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

@@ -0,0 +1,7 @@
+import './../../cssUtils/border.css.ts.vanilla.css';
+import './Spinner.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var spinnerWrapper = createRuntimeFn({ defaultClassName: "Spinner_spinnerWrapper__1rywg3p1f", variantClassNames: { size: { small: "Spinner_size_small__1rywg3p1", medium: "Spinner_size_medium__1rywg3p2", large: "Spinner_size_large__1rywg3p3" }, 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" }, spinnerColor: { primary: "Spinner_spinnerColor_primary__1rywg3p4", secondary: "Spinner_spinnerColor_secondary__1rywg3p5", brandYellow: "Spinner_spinnerColor_brandYellow__1rywg3p6", brandBlue: "Spinner_spinnerColor_brandBlue__1rywg3p7", brandPurple: "Spinner_spinnerColor_brandPurple__1rywg3p8", brandPrio: "Spinner_spinnerColor_brandPrio__1rywg3p9", yellowLighter: "Spinner_spinnerColor_yellowLighter__1rywg3pa", yellowLight: "Spinner_spinnerColor_yellowLight__1rywg3pb", blueLight: "Spinner_spinnerColor_blueLight__1rywg3pc", blueLighter: "Spinner_spinnerColor_blueLighter__1rywg3pd", blueMedium: "Spinner_spinnerColor_blueMedium__1rywg3pe", greenLight: "Spinner_spinnerColor_greenLight__1rywg3pf", greenMedium: "Spinner_spinnerColor_greenMedium__1rywg3pg", redLight: "Spinner_spinnerColor_redLight__1rywg3ph", recipeVego: "Spinner_spinnerColor_recipeVego__1rywg3pi", recipeLactose: "Spinner_spinnerColor_recipeLactose__1rywg3pj", recipeGluten: "Spinner_spinnerColor_recipeGluten__1rywg3pk", link: "Spinner_spinnerColor_link__1rywg3pl", white: "Spinner_spinnerColor_white__1rywg3pm", black: "Spinner_spinnerColor_black__1rywg3pn", lightest: "Spinner_spinnerColor_lightest__1rywg3po", lighter: "Spinner_spinnerColor_lighter__1rywg3pp", light: "Spinner_spinnerColor_light__1rywg3pq", medium: "Spinner_spinnerColor_medium__1rywg3pr", mediumDark: "Spinner_spinnerColor_mediumDark__1rywg3ps", dark: "Spinner_spinnerColor_dark__1rywg3pt", darker: "Spinner_spinnerColor_darker__1rywg3pu", darkest: "Spinner_spinnerColor_darkest__1rywg3pv", buttonGray: "Spinner_spinnerColor_buttonGray__1rywg3pw", disabledGray: "Spinner_spinnerColor_disabledGray__1rywg3px", disabledDarkGray: "Spinner_spinnerColor_disabledDarkGray__1rywg3py", placeholder: "Spinner_spinnerColor_placeholder__1rywg3pz", border: "Spinner_spinnerColor_border__1rywg3p10", boxShadow: "Spinner_spinnerColor_boxShadow__1rywg3p11", boxShadowActive: "Spinner_spinnerColor_boxShadowActive__1rywg3p12", alertRed: "Spinner_spinnerColor_alertRed__1rywg3p13", alertBlue: "Spinner_spinnerColor_alertBlue__1rywg3p14", alertGreen: "Spinner_spinnerColor_alertGreen__1rywg3p15", darkOverlay: "Spinner_spinnerColor_darkOverlay__1rywg3p16", transparent: "Spinner_spinnerColor_transparent__1rywg3p17", brandBlueHover: "Spinner_spinnerColor_brandBlueHover__1rywg3p18", brandYellowHover: "Spinner_spinnerColor_brandYellowHover__1rywg3p19", brandPrioHover: "Spinner_spinnerColor_brandPrioHover__1rywg3p1a", brandBlueActive: "Spinner_spinnerColor_brandBlueActive__1rywg3p1b", brandYellowActive: "Spinner_spinnerColor_brandYellowActive__1rywg3p1c", brandPrioActive: "Spinner_spinnerColor_brandPrioActive__1rywg3p1d", none: "Spinner_spinnerColor_none__1rywg3p1e" } }, defaultVariants: { size: "medium", borderColor: "lighter", spinnerColor: "brandBlue" }, compoundVariants: [] });
+
+export { spinnerWrapper };

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,10 @@
+import { TPaletteKeys } from '@citygross/design-tokens_v2';
+
+declare type TSpinner = {
+    borderColor?: TPaletteKeys;
+    spinnerColor?: TPaletteKeys;
+    size?: 'small' | 'medium' | 'large';
+};
+declare const Spinner: ({ borderColor, size, spinnerColor }: TSpinner) => JSX.Element;
+
+export { Spinner, TSpinner };

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { spinnerWrapper } from './Spinner.css.vanilla.js';
+
+const Spinner = ({ borderColor, size, spinnerColor }) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: spinnerWrapper({
+        borderColor,
+        size,
+        spinnerColor
+      })
+    }
+  );
+};
+
+export { Spinner };

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

@@ -0,0 +1,178 @@
+.TimeLine_baseTimeLineItem__vvpfow0 {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  padding: 8px 0;
+  position: relative;
+}
+.TimeLine_baseTimeLineItem__vvpfow0 > * &:nth-child(2) {
+  flex-grow: 1;
+}
+.TimeLine_baseTimeLine__vvpfow1 {
+  display: flex;
+  flex-direction: column;
+}
+.TimeLine_timeLineH3__vvpfow2 {
+  padding-bottom: 16px;
+}
+.TimeLine_borderColor_primary__vvpfow3::before {
+  border-color: #FFE522;
+}
+.TimeLine_borderColor_secondary__vvpfow4::before {
+  border-color: #0069AE;
+}
+.TimeLine_borderColor_brandYellow__vvpfow5::before {
+  border-color: #FFE522;
+}
+.TimeLine_borderColor_brandBlue__vvpfow6::before {
+  border-color: #0069AE;
+}
+.TimeLine_borderColor_brandPurple__vvpfow7::before {
+  border-color: #A71680;
+}
+.TimeLine_borderColor_brandPrio__vvpfow8::before {
+  border-color: #a80073;
+}
+.TimeLine_borderColor_yellowLighter__vvpfow9::before {
+  border-color: #FFFBE7;
+}
+.TimeLine_borderColor_yellowLight__vvpfowa::before {
+  border-color: #FFF7D1;
+}
+.TimeLine_borderColor_blueLight__vvpfowb::before {
+  border-color: #ECF7FE;
+}
+.TimeLine_borderColor_blueLighter__vvpfowc::before {
+  border-color: #D3EDFD;
+}
+.TimeLine_borderColor_blueMedium__vvpfowd::before {
+  border-color: #92B9D3;
+}
+.TimeLine_borderColor_greenLight__vvpfowe::before {
+  border-color: #F2FDF2;
+}
+.TimeLine_borderColor_greenMedium__vvpfowf::before {
+  border-color: #BEE5BE;
+}
+.TimeLine_borderColor_redLight__vvpfowg::before {
+  border-color: #FCE9E9;
+}
+.TimeLine_borderColor_recipeVego__vvpfowh::before {
+  border-color: #65DB69;
+}
+.TimeLine_borderColor_recipeLactose__vvpfowi::before {
+  border-color: #8CCDF0;
+}
+.TimeLine_borderColor_recipeGluten__vvpfowj::before {
+  border-color: #D5642A;
+}
+.TimeLine_borderColor_link__vvpfowk::before {
+  border-color: #0072BB;
+}
+.TimeLine_borderColor_white__vvpfowl::before {
+  border-color: #FFFFFF;
+}
+.TimeLine_borderColor_black__vvpfowm::before {
+  border-color: #000000;
+}
+.TimeLine_borderColor_lightest__vvpfown::before {
+  border-color: #F7F7F7;
+}
+.TimeLine_borderColor_lighter__vvpfowo::before {
+  border-color: #F1F1F1;
+}
+.TimeLine_borderColor_light__vvpfowp::before {
+  border-color: #E8E8E8;
+}
+.TimeLine_borderColor_medium__vvpfowq::before {
+  border-color: #DBDBDB;
+}
+.TimeLine_borderColor_mediumDark__vvpfowr::before {
+  border-color: #6C6C6C;
+}
+.TimeLine_borderColor_dark__vvpfows::before {
+  border-color: #979797;
+}
+.TimeLine_borderColor_darker__vvpfowt::before {
+  border-color: #4A4A4A;
+}
+.TimeLine_borderColor_darkest__vvpfowu::before {
+  border-color: #333333;
+}
+.TimeLine_borderColor_buttonGray__vvpfowv::before {
+  border-color: #E5E4E5;
+}
+.TimeLine_borderColor_disabledGray__vvpfoww::before {
+  border-color: #B8B8B8;
+}
+.TimeLine_borderColor_disabledDarkGray__vvpfowx::before {
+  border-color: #5c5c5c;
+}
+.TimeLine_borderColor_placeholder__vvpfowy::before {
+  border-color: #8f8f8f;
+}
+.TimeLine_borderColor_border__vvpfowz::before {
+  border-color: #0069AE;
+}
+.TimeLine_borderColor_boxShadow__vvpfow10::before {
+  border-color: #E1E1E1;
+}
+.TimeLine_borderColor_boxShadowActive__vvpfow11::before {
+  border-color: rgba(7, 52, 99, 0.15);
+}
+.TimeLine_borderColor_alertRed__vvpfow12::before {
+  border-color: #E02721;
+}
+.TimeLine_borderColor_alertBlue__vvpfow13::before {
+  border-color: #0072BB;
+}
+.TimeLine_borderColor_alertGreen__vvpfow14::before {
+  border-color: #3F9A3C;
+}
+.TimeLine_borderColor_darkOverlay__vvpfow15::before {
+  border-color: rgba(0, 0, 0, 0.6);
+}
+.TimeLine_borderColor_transparent__vvpfow16::before {
+  border-color: #ffffff00;
+}
+.TimeLine_borderColor_brandBlueHover__vvpfow17::before {
+  border-color: #005C99;
+}
+.TimeLine_borderColor_brandYellowHover__vvpfow18::before {
+  border-color: #F5D800;
+}
+.TimeLine_borderColor_brandPrioHover__vvpfow19::before {
+  border-color: #90136F;
+}
+.TimeLine_borderColor_brandBlueActive__vvpfow1a::before {
+  border-color: #004D80;
+}
+.TimeLine_borderColor_brandYellowActive__vvpfow1b::before {
+  border-color: #DBC100;
+}
+.TimeLine_borderColor_brandPrioActive__vvpfow1c::before {
+  border-color: #7A105E;
+}
+.TimeLine_borderColor_none__vvpfow1d::before {
+  border-color: none;
+}
+.TimeLine_baseTimeLineList__vvpfow1e {
+  position: relative;
+}
+.TimeLine_baseTimeLineList__vvpfow1e:before {
+  content: "";
+  height: calc(100% - 32px);
+  position: absolute;
+  top: 16px;
+  left: 3px;
+  border-width: 1px;
+}
+.TimeLine_baseTimeLineList_borderStyle_solid__vvpfow1f:before {
+  border-style: solid;
+}
+.TimeLine_baseTimeLineList_borderStyle_dashed__vvpfow1g:before {
+  border-style: dashed;
+}
+.TimeLine_baseTimeLineList_borderStyle_none__vvpfow1h:before {
+  border-style: none;
+}

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

@@ -0,0 +1,9 @@
+import './TimeLine.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var baseTimeLine = "TimeLine_baseTimeLine__vvpfow1";
+var baseTimeLineItem = "TimeLine_baseTimeLineItem__vvpfow0";
+var baseTimeLineList = createRuntimeFn({ defaultClassName: "TimeLine_baseTimeLineList__vvpfow1e", variantClassNames: { borderStyle: { solid: "TimeLine_baseTimeLineList_borderStyle_solid__vvpfow1f", dashed: "TimeLine_baseTimeLineList_borderStyle_dashed__vvpfow1g", none: "TimeLine_baseTimeLineList_borderStyle_none__vvpfow1h" }, borderColor: { primary: "TimeLine_borderColor_primary__vvpfow3", secondary: "TimeLine_borderColor_secondary__vvpfow4", brandYellow: "TimeLine_borderColor_brandYellow__vvpfow5", brandBlue: "TimeLine_borderColor_brandBlue__vvpfow6", brandPurple: "TimeLine_borderColor_brandPurple__vvpfow7", brandPrio: "TimeLine_borderColor_brandPrio__vvpfow8", yellowLighter: "TimeLine_borderColor_yellowLighter__vvpfow9", yellowLight: "TimeLine_borderColor_yellowLight__vvpfowa", blueLight: "TimeLine_borderColor_blueLight__vvpfowb", blueLighter: "TimeLine_borderColor_blueLighter__vvpfowc", blueMedium: "TimeLine_borderColor_blueMedium__vvpfowd", greenLight: "TimeLine_borderColor_greenLight__vvpfowe", greenMedium: "TimeLine_borderColor_greenMedium__vvpfowf", redLight: "TimeLine_borderColor_redLight__vvpfowg", recipeVego: "TimeLine_borderColor_recipeVego__vvpfowh", recipeLactose: "TimeLine_borderColor_recipeLactose__vvpfowi", recipeGluten: "TimeLine_borderColor_recipeGluten__vvpfowj", link: "TimeLine_borderColor_link__vvpfowk", white: "TimeLine_borderColor_white__vvpfowl", black: "TimeLine_borderColor_black__vvpfowm", lightest: "TimeLine_borderColor_lightest__vvpfown", lighter: "TimeLine_borderColor_lighter__vvpfowo", light: "TimeLine_borderColor_light__vvpfowp", medium: "TimeLine_borderColor_medium__vvpfowq", mediumDark: "TimeLine_borderColor_mediumDark__vvpfowr", dark: "TimeLine_borderColor_dark__vvpfows", darker: "TimeLine_borderColor_darker__vvpfowt", darkest: "TimeLine_borderColor_darkest__vvpfowu", buttonGray: "TimeLine_borderColor_buttonGray__vvpfowv", disabledGray: "TimeLine_borderColor_disabledGray__vvpfoww", disabledDarkGray: "TimeLine_borderColor_disabledDarkGray__vvpfowx", placeholder: "TimeLine_borderColor_placeholder__vvpfowy", border: "TimeLine_borderColor_border__vvpfowz", boxShadow: "TimeLine_borderColor_boxShadow__vvpfow10", boxShadowActive: "TimeLine_borderColor_boxShadowActive__vvpfow11", alertRed: "TimeLine_borderColor_alertRed__vvpfow12", alertBlue: "TimeLine_borderColor_alertBlue__vvpfow13", alertGreen: "TimeLine_borderColor_alertGreen__vvpfow14", darkOverlay: "TimeLine_borderColor_darkOverlay__vvpfow15", transparent: "TimeLine_borderColor_transparent__vvpfow16", brandBlueHover: "TimeLine_borderColor_brandBlueHover__vvpfow17", brandYellowHover: "TimeLine_borderColor_brandYellowHover__vvpfow18", brandPrioHover: "TimeLine_borderColor_brandPrioHover__vvpfow19", brandBlueActive: "TimeLine_borderColor_brandBlueActive__vvpfow1a", brandYellowActive: "TimeLine_borderColor_brandYellowActive__vvpfow1b", brandPrioActive: "TimeLine_borderColor_brandPrioActive__vvpfow1c", none: "TimeLine_borderColor_none__vvpfow1d" } }, defaultVariants: {}, compoundVariants: [] });
+var timeLineH3 = "TimeLine_timeLineH3__vvpfow2";
+
+export { baseTimeLine, baseTimeLineItem, baseTimeLineList, timeLineH3 };

package/dist/components/TimeLine/TimeLine.d.ts

@@ -0,0 +1,25 @@
+import { TPaletteKeys } from '@citygross/design-tokens_v2';
+
+declare type TTimelineItem = {
+    primaryText: string;
+    time: string;
+    secondaryText?: string;
+    tiernaryText?: string;
+};
+declare type TTimeline = {
+    items: TTimelineItem[];
+    title?: string;
+    mobileTitle?: string;
+    current: number;
+    dotColor?: TPaletteKeys;
+    dotActiveColor?: TPaletteKeys;
+    dotShadow?: TPaletteKeys;
+    borderStyle?: 'dashed' | 'solid';
+    borderColor?: TPaletteKeys;
+    completedColor?: TPaletteKeys;
+    color?: TPaletteKeys;
+    reversed?: boolean;
+};
+declare function Timeline({ items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow, borderStyle, borderColor, color, reversed, completedColor }: TTimeline): JSX.Element;
+
+export { TTimeline, TTimelineItem, Timeline };