@citygross/components_v2 0.0.17 → 0.0.19

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

@@ -1,15 +1,19 @@
 .Header_wrapper__11gdejs0 {
   position: relative;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);
+  background: #FFFFFF;
 }
 .Header_headerWrapper__11gdejs1 {
   background-color: #FFFFFF;
   margin: 0 auto;
-  max-width: 1232px;
   padding: 12px;
+  display: flex;
+  justify-content: center;
 }
 .Header_headerContainer__11gdejs2 {
   display: flex;
+  max-width: 1656px;
+  width: 100%;
   justify-content: space-between;
   align-items: center;
 }

package/dist/components/Header/Header.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button } from '../Button/Button.js';
 import { Icons } from '@citygross/icons_v2';
-import { theme } from '@citygross/design-tokens';
 import { wrapper, headerWrapper, headerContainer, menuIconContainer } from './Header.css.vanilla.js';
+import { breakpoints } from '@citygross/design-tokens_v2';
 
 const Header = ({
   btnLabel,
@@ -11,8 +11,15 @@ const Header = ({
   sideModal,
   headerLink
 }) => {
-  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: () => onMenuClick() }, /* @__PURE__ */ React.createElement(Icons.Menu, null)) : btnLabel && /* @__PURE__ */ React.createElement(Button, { onClick: btnOnClick, variant: "secondary" }, btnLabel))), sideModal);
+  const isMobile = window.innerWidth < (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: () => onMenuClick && onMenuClick()
+    },
+    /* @__PURE__ */ React.createElement(Icons.Menu, null)
+  ) : btnLabel && /* @__PURE__ */ React.createElement(Button, { onClick: btnOnClick, variant: "secondary" }, btnLabel))), sideModal);
 };
 
 export { Header };

package/dist/index.d.ts

@@ -20,7 +20,6 @@ export { Spacer, TSpacer } from './components/Spacer/Spacer.js';
 export { Spinner, TSpinner } from './components/Spinner/Spinner.js';
 export { TTimeline, TTimelineItem, Timeline } from './components/TimeLine/TimeLine.js';
 export { BodyText, TBodyText } from './typography/BodyText/BodyText.js';
-export { Paragraph, TParagraph } from './typography/Paragraph/Paragraph.js';
 export { H1, TH1 } from './typography/H1/H1.js';
 export { H2, TH2 } from './typography/H2/H2.js';
 export { H3, TH3 } from './typography/H3/H3.js';

package/dist/index.js

@@ -20,7 +20,6 @@ export { Spacer } from './components/Spacer/Spacer.js';
 export { Spinner } from './components/Spinner/Spinner.js';
 export { Timeline } from './components/TimeLine/TimeLine.js';
 export { BodyText } from './typography/BodyText/BodyText.js';
-export { Paragraph } from './typography/Paragraph/Paragraph.js';
 export { H1 } from './typography/H1/H1.js';
 export { H2 } from './typography/H2/H2.js';
 export { H3 } from './typography/H3/H3.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components_v2",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "license": "ISC",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -65,7 +65,7 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@citygross/design-tokens_v2": "^0.0.3",
+    "@citygross/design-tokens_v2": "^0.0.4",
     "@citygross/icons_v2": "^0.0.1",
     "@citygross/react-use-bg-wizard": "^0.0.8",
     "@citygross/typography": "^0.0.89",
@@ -79,5 +79,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "6be1d15733156d9450f44f127dfd5521bd7e646d"
+  "gitHead": "566d7b7b19a74421ca9d193c087ae5b8c529bec1"
 }

package/dist/typography/Paragraph/Paragraph.css.vanilla.js

@@ -1,8 +0,0 @@
-import './../../cssUtils/typography.css.ts.vanilla.css';
-import './../../cssUtils/color.css.ts.vanilla.css';
-import 'src/typography/Paragraph/Paragraph.css.ts.vanilla.css';
-import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
-
-var paragraphtStyle = createRuntimeFn({ defaultClassName: "Paragraph__1xnbf7t0", variantClassNames: { fontWeight: { regular: "typography_fontWeight_regular__xithytc", medium: "typography_fontWeight_medium__xithytd", semiBold: "typography_fontWeight_semiBold__xithyte", bold: "typography_fontWeight_bold__xithytf" }, textDecoration: { lineThrough: "typography_textDecoration_lineThrough__xithytq", underline: "typography_textDecoration_underline__xithytr" }, bodyTextSize: { tiny: "typography_bodyTextSize_tiny__xithyts", extraSmall: "typography_bodyTextSize_extraSmall__xithytt", small: "typography_bodyTextSize_small__xithytu", "default": "typography_bodyTextSize_default__xithytv" }, textAlign: { left: "typography_textAlign_left__xithytn", right: "typography_textAlign_right__xithyto", center: "typography_textAlign_center__xithytp" }, 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: { color: "darkest", fontWeight: "regular", bodyTextSize: "default", textAlign: "left" }, compoundVariants: [] });
-
-export { paragraphtStyle };

package/dist/typography/Paragraph/Paragraph.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { TPaletteKeys, TFontWeightKeys } from '@citygross/design-tokens_v2';
-import { TBodyTextSizeKeys, TTextDecoration, TTextAlign } from '../../cssUtils/typography.css.js';
-
-declare type TParagraph = {
-    children: React.ReactNode;
-    size?: TBodyTextSizeKeys;
-    color?: TPaletteKeys;
-    textDecoration?: TTextDecoration;
-    fontWeight?: TFontWeightKeys;
-    textAlign?: TTextAlign;
-    className?: string;
-};
-declare const Paragraph: ({ children, color, fontWeight, textDecoration, size, textAlign, className }: TParagraph) => JSX.Element;
-
-export { Paragraph, TParagraph };

package/dist/typography/Paragraph/Paragraph.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { paragraphtStyle } from './Paragraph.css.vanilla.js';
-
-const Paragraph = ({
-  children,
-  color,
-  fontWeight,
-  textDecoration,
-  size,
-  textAlign,
-  className
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    "p",
-    {
-      className: `${paragraphtStyle({
-        bodyTextSize: size,
-        color,
-        textDecoration,
-        textAlign,
-        fontWeight
-      })} ${className}`
-    },
-    children
-  );
-};
-
-export { Paragraph };