@koobiq/react-components 0.0.1-beta.4 → 0.0.1-beta.5

package/dist/components/Container/Container.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./Container.module.css.js";

package/dist/components/Container/utils.d.ts

@@ -1,4 +1,4 @@
 import type { ContainerMarginsProp, ContainerMaxInlineSizeProp, ContainerPositionProp } from './types';
 export declare const normalizeMargins: (value: ContainerMarginsProp | undefined) => string | 0 | undefined;
 export declare const normalizeMaxInlineSize: (value: ContainerMaxInlineSizeProp | undefined) => string | undefined;
-export declare const normalizePosition: (value: ContainerPositionProp | undefined) => "0 auto" | "auto 0" | "auto";
+export declare const normalizePosition: (value: ContainerPositionProp | undefined) => "auto" | "0 auto" | "auto 0";

package/dist/components/FlexBox/FlexBox.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { FlexBoxBaseProps } from './index';
+export declare const FlexBox: import("@koobiq/react-core").PolyForwardComponent<"div", FlexBoxBaseProps, ElementType>;
+export type FlexBoxProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FlexBox<As>>;

package/dist/components/FlexBox/FlexBox.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
+import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
+import { flex } from "../layout/flex/flex.js";
+const FlexBox = polymorphicForwardRef(
+  ({
+    as: Tag = "div",
+    gap: gapProp,
+    wrap: wrapProp,
+    flex: flexProp,
+    colGap: colGapProp,
+    rowGap: rowGapProp,
+    direction: directionProp,
+    alignItems: alignItemsProp,
+    justifyContent: justifyContentProp,
+    children,
+    className,
+    ...other
+  }, ref) => {
+    const breakpoints = useMatchedBreakpoints();
+    const flex$1 = getResponsiveValue(flexProp, breakpoints);
+    const gap = getResponsiveValue(gapProp, breakpoints);
+    const colGap = getResponsiveValue(colGapProp, breakpoints);
+    const rowGap = getResponsiveValue(rowGapProp, breakpoints);
+    const wrap = getResponsiveValue(wrapProp, breakpoints);
+    const alignItems = getResponsiveValue(alignItemsProp, breakpoints);
+    const direction = getResponsiveValue(directionProp, breakpoints);
+    const justifyContent = getResponsiveValue(justifyContentProp, breakpoints);
+    const flexCn = flex({
+      gap,
+      flex: flex$1,
+      wrap,
+      colGap,
+      rowGap,
+      direction,
+      alignItems,
+      justifyContent
+    });
+    return /* @__PURE__ */ jsx(Tag, { className: clsx(flexCn, className), ...other, ref, children });
+  }
+);
+FlexBox.displayName = "FlexBox";
+export {
+  FlexBox
+};

package/dist/components/FlexBox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './FlexBox';

package/dist/components/FlexBox/types.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ResponsiveValue } from '../../utils';
+import type { FlexPropGap, FlexPropWrap, FlexPropFlex, FlexPropDirection, FlexPropAlignItems, FlexPropJustifyContent } from '../layout';
+export type FlexBoxBaseProps = {
+    /** Defines the `display` property with `flex` or `inline-flex` value. */
+    flex?: FlexPropFlex | ResponsiveValue<FlexPropFlex>;
+    /** Defines the `flex-wrap` property. */
+    wrap?: FlexPropWrap | ResponsiveValue<FlexPropWrap>;
+    /** Defines the `flex-direction` property. */
+    direction?: FlexPropDirection | ResponsiveValue<FlexPropDirection>;
+    /** Defines the `gap` property. */
+    gap?: FlexPropGap | ResponsiveValue<FlexPropGap>;
+    /** Defines the `column-gap` property. */
+    colGap?: FlexPropGap | ResponsiveValue<FlexPropGap>;
+    /** Defines the `row-gap` property. */
+    rowGap?: FlexPropGap | ResponsiveValue<FlexPropGap>;
+    /** Defines the `justify-content` property. */
+    justifyContent?: FlexPropJustifyContent | ResponsiveValue<FlexPropJustifyContent>;
+    /** Defines the `align-items` property. */
+    alignItems?: FlexPropAlignItems | ResponsiveValue<FlexPropAlignItems>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Inline styles. */
+    style?: CSSProperties;
+};

package/dist/components/RadioGroup/RadioContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from "react";
 const RadioGroupContext = createContext(
   {}

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,11 +1,12 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { mergeProps, clsx } from "@koobiq/react-core";
 import { RadioGroup as RadioGroup$1 } from "@koobiq/react-primitives";
-import { flex } from "../layout/flex/flex.js";
 import { RadioGroupLabel } from "./components/RadioGroupLabel/RadioGroupLabel.js";
 import { RadioGroupContext } from "./RadioContext.js";
 import { RadioGroupDescription } from "./components/RadioGroupDescription/RadioGroupDescription.js";
+import { flex } from "../layout/flex/flex.js";
 const RadioGroup = forwardRef(
   (props, ref) => {
     const { size, label, children, slotProps, description, orientation } = props;

package/dist/components/Typography/Typography.js

@@ -27,11 +27,11 @@ const Typography = polymorphicForwardRef(
       "data-ellipsis": ellipsis,
       className: clsx(
         s.base,
+        textVariant[variant],
         display && s[display],
         ellipsis && s.ellipsis,
         align && s[`align-${align}`],
-        textVariant[variant],
-        foregroundColor[color],
+        color === "inherit" ? s["color-inherit"] : foregroundColor[color],
         className
       ),
       ...other,

package/dist/components/Typography/Typography.module.css.js

@@ -12,7 +12,8 @@ const s = {
   "align-center": "kbq-typography-align-center-2d47fd",
   "align-initial": "kbq-typography-align-initial-faf6dd",
   "align-inherit": "kbq-typography-align-inherit-00f946",
-  ellipsis
+  ellipsis,
+  "color-inherit": "kbq-typography-color-inherit-35de13"
 };
 export {
   base,

package/dist/components/Typography/types.d.ts

@@ -5,7 +5,7 @@ export declare const typographyPropDisplay: readonly ["block", "inline", "inline
 export type TypographyDisplayVariant = (typeof typographyPropDisplay)[number];
 export declare const typographyPropAlign: readonly ["start", "center", "end", "initial", "inherit"];
 export type TypographyPropAlign = (typeof typographyPropAlign)[number];
-export declare const typographyPropColor: readonly ["white", "white-secondary", "theme", "theme-secondary", "contrast", "on-contrast", "contrast-secondary", "contrast-tertiary", "error", "error-secondary", "error-tertiary", "error-less", "success", "success-less", "success-secondary", "warning", "warning-secondary", "visited"];
+export declare const typographyPropColor: readonly ["white", "white-secondary", "theme", "theme-secondary", "contrast", "on-contrast", "contrast-secondary", "contrast-tertiary", "error", "error-secondary", "error-tertiary", "error-less", "success", "success-less", "success-secondary", "warning", "warning-secondary", "visited", "inherit"];
 export type TypographyPropColor = (typeof typographyPropColor)[number];
 export type TypographyBaseProps = {
     /**

package/dist/components/Typography/types.js

@@ -74,7 +74,8 @@ const typographyPropColor = [
   "success-secondary",
   "warning",
   "warning-secondary",
-  "visited"
+  "visited",
+  "inherit"
 ];
 export {
   typographyPropAlign,

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Provider';
+export * from './FlexBox';
 export * from './Container';
 export * from './Alert';
 export * from './Button';

package/dist/components/layout/flex/flex.d.ts

@@ -13,13 +13,24 @@ export type FlexPropDirection = (typeof flexPropDirection)[number];
 export declare const flexPropOrder: readonly [-1, 0, 1];
 export type FlexPropOrder = (typeof flexPropOrder)[number];
 export type FlexProps = {
-    alignItems?: FlexPropAlignItems;
-    justifyContent?: FlexPropJustifyContent;
+    /** Defines the `gap` property. */
+    gap?: FlexPropGap;
+    /** Defines the `column-gap` property. */
+    colGap?: FlexPropGap;
+    /** Defines the `row-gap` property. */
+    rowGap?: FlexPropGap;
+    /** Defines the `display` property with `flex` or `inline-flex` value. */
     flex?: FlexPropFlex;
+    /** Defines the `flex-wrap` property. */
     wrap?: FlexPropWrap;
-    direction?: FlexPropDirection;
-    gap?: FlexPropGap;
+    /** Defines the `order` property. */
     order?: FlexPropOrder;
+    /** Defines the `flex-direction` property. */
+    direction?: FlexPropDirection;
+    /** Defines the `align-items` property. */
+    alignItems?: FlexPropAlignItems;
+    /** Defines the `justify-content` property. */
+    justifyContent?: FlexPropJustifyContent;
 };
 export type FlexParams = (props: FlexProps, className?: string) => string;
 export declare const flex: FlexParams;

package/dist/components/layout/flex/flex.js

@@ -47,15 +47,20 @@ const flex = (props, className) => {
     wrap,
     direction,
     gap,
+    rowGap: rowGapProp,
+    colGap: colGapProp,
     order: orderProp
   } = props;
   const order = String(orderProp);
+  const colGap = colGapProp ?? gap;
+  const rowGap = rowGapProp ?? gap;
   return clsx(
     s.base,
-    gap && s[`gap_${gap}`],
     flex2 && s[`flex_${flex2}`],
     wrap && s[`wrap_${wrap}`],
     order && s[`order_${order}`],
+    rowGap && s[`gap_row_${rowGap}`],
+    colGap && s[`gap_column_${colGap}`],
     direction && s[`direction_${direction}`],
     alignItems && s[`alignItems_${alignItems}`],
     justifyContent && s[`justifyContent_${justifyContent}`],

package/dist/components/layout/flex/flex.module.css.js

@@ -10,19 +10,32 @@ const direction_row = "kbq-flex-direction_row-8fff0d";
 const direction_column = "kbq-flex-direction_column-29b97b";
 const order_0 = "kbq-flex-order_0-4a6164";
 const order_1 = "kbq-flex-order_1-b5e24c";
-const gap_3xs = "kbq-flex-gap_3xs-5c9d4e";
-const gap_xxs = "kbq-flex-gap_xxs-035614";
-const gap_xs = "kbq-flex-gap_xs-970b31";
-const gap_s = "kbq-flex-gap_s-e9d292";
-const gap_m = "kbq-flex-gap_m-21a099";
-const gap_l = "kbq-flex-gap_l-47c05c";
-const gap_xl = "kbq-flex-gap_xl-d76274";
-const gap_xxl = "kbq-flex-gap_xxl-0e68cb";
-const gap_3xl = "kbq-flex-gap_3xl-497012";
-const gap_4xl = "kbq-flex-gap_4xl-0b7c71";
-const gap_5xl = "kbq-flex-gap_5xl-ed56fe";
-const gap_6xl = "kbq-flex-gap_6xl-0749d1";
-const gap_7xl = "kbq-flex-gap_7xl-0a1536";
+const gap_column_3xs = "kbq-flex-gap_column_3xs-2aea22";
+const gap_column_xxs = "kbq-flex-gap_column_xxs-7586e8";
+const gap_column_xs = "kbq-flex-gap_column_xs-911f68";
+const gap_column_s = "kbq-flex-gap_column_s-a389c1";
+const gap_column_m = "kbq-flex-gap_column_m-21736b";
+const gap_column_l = "kbq-flex-gap_column_l-390cf2";
+const gap_column_xl = "kbq-flex-gap_column_xl-47b33c";
+const gap_column_xxl = "kbq-flex-gap_column_xxl-2f762a";
+const gap_column_3xl = "kbq-flex-gap_column_3xl-e81ba4";
+const gap_column_4xl = "kbq-flex-gap_column_4xl-502e67";
+const gap_column_5xl = "kbq-flex-gap_column_5xl-028451";
+const gap_column_6xl = "kbq-flex-gap_column_6xl-2f1bfa";
+const gap_column_7xl = "kbq-flex-gap_column_7xl-057b8a";
+const gap_row_3xs = "kbq-flex-gap_row_3xs-ea5984";
+const gap_row_xxs = "kbq-flex-gap_row_xxs-a520f4";
+const gap_row_xs = "kbq-flex-gap_row_xs-e62321";
+const gap_row_s = "kbq-flex-gap_row_s-2dab73";
+const gap_row_m = "kbq-flex-gap_row_m-6423db";
+const gap_row_l = "kbq-flex-gap_row_l-f312fe";
+const gap_row_xl = "kbq-flex-gap_row_xl-e85171";
+const gap_row_xxl = "kbq-flex-gap_row_xxl-c2548b";
+const gap_row_3xl = "kbq-flex-gap_row_3xl-34ef28";
+const gap_row_4xl = "kbq-flex-gap_row_4xl-29ec96";
+const gap_row_5xl = "kbq-flex-gap_row_5xl-c7e969";
+const gap_row_6xl = "kbq-flex-gap_row_6xl-afc87a";
+const gap_row_7xl = "kbq-flex-gap_row_7xl-d67bcc";
 const s = {
   base,
   "alignItems_flex-start": "kbq-flex-alignItems_flex-start-56df74",
@@ -48,19 +61,32 @@ const s = {
   "order_-1": "kbq-flex-order_-1-4f5108",
   order_0,
   order_1,
-  gap_3xs,
-  gap_xxs,
-  gap_xs,
-  gap_s,
-  gap_m,
-  gap_l,
-  gap_xl,
-  gap_xxl,
-  gap_3xl,
-  gap_4xl,
-  gap_5xl,
-  gap_6xl,
-  gap_7xl
+  gap_column_3xs,
+  gap_column_xxs,
+  gap_column_xs,
+  gap_column_s,
+  gap_column_m,
+  gap_column_l,
+  gap_column_xl,
+  gap_column_xxl,
+  gap_column_3xl,
+  gap_column_4xl,
+  gap_column_5xl,
+  gap_column_6xl,
+  gap_column_7xl,
+  gap_row_3xs,
+  gap_row_xxs,
+  gap_row_xs,
+  gap_row_s,
+  gap_row_m,
+  gap_row_l,
+  gap_row_xl,
+  gap_row_xxl,
+  gap_row_3xl,
+  gap_row_4xl,
+  gap_row_5xl,
+  gap_row_6xl,
+  gap_row_7xl
 };
 export {
   alignItems_baseline,
@@ -71,19 +97,32 @@ export {
   direction_column,
   direction_row,
   flex_flex,
-  gap_3xl,
-  gap_3xs,
-  gap_4xl,
-  gap_5xl,
-  gap_6xl,
-  gap_7xl,
-  gap_l,
-  gap_m,
-  gap_s,
-  gap_xl,
-  gap_xs,
-  gap_xxl,
-  gap_xxs,
+  gap_column_3xl,
+  gap_column_3xs,
+  gap_column_4xl,
+  gap_column_5xl,
+  gap_column_6xl,
+  gap_column_7xl,
+  gap_column_l,
+  gap_column_m,
+  gap_column_s,
+  gap_column_xl,
+  gap_column_xs,
+  gap_column_xxl,
+  gap_column_xxs,
+  gap_row_3xl,
+  gap_row_3xs,
+  gap_row_4xl,
+  gap_row_5xl,
+  gap_row_6xl,
+  gap_row_7xl,
+  gap_row_l,
+  gap_row_m,
+  gap_row_s,
+  gap_row_xl,
+  gap_row_xs,
+  gap_row_xxl,
+  gap_row_xxs,
   justifyContent_center,
   order_0,
   order_1,

package/dist/index.js

@@ -3,6 +3,7 @@ import { Provider, defaultBreakpoints } from "./components/Provider/Provider.js"
 import { BreakpointsProvider } from "./components/Provider/BreakpointsProvider.js";
 import { ProviderContext, useProvider } from "./components/Provider/ProviderContext.js";
 import { BreakpointsContext, useBreakpoints, useMatchedBreakpoints } from "./components/Provider/BreakpointsContext.js";
+import { FlexBox } from "./components/FlexBox/FlexBox.js";
 import { Container } from "./components/Container/Container.js";
 import { containerMarginsProp, containerPositionProp } from "./components/Container/types.js";
 import { Alert } from "./components/Alert/Alert.js";
@@ -70,6 +71,7 @@ export {
   DialogContent,
   DialogFooter,
   DialogHeader,
+  FlexBox,
   Grid,
   GridItem,
   IconButton,

package/dist/style.css

@@ -51,6 +51,217 @@
 *::-webkit-scrollbar-corner {
   background: none;
 }
+.kbq-flex-7624b3 {
+  --flex-gap: 0;
+  --flex-order: 0;
+  --flex-type: flex;
+  --flex-wrap: nowrap;
+  --flex-direction: row;
+  --flex-align-items: flex-start;
+  --flex-justify-content: flex-start;
+  gap: var(--flex-row-gap) var(--flex-column-gap);
+  order: var(--flex-order);
+  display: var(--flex-type);
+  align-items: var(--flex-align-items);
+  justify-content: var(--flex-justify-content);
+  flex-flow: var(--flex-direction) var(--flex-wrap);
+}
+
+.kbq-flex-alignItems_flex-start-56df74 {
+  --flex-align-items: flex-start;
+}
+
+.kbq-flex-alignItems_flex-end-951e7a {
+  --flex-align-items: flex-end;
+}
+
+.kbq-flex-alignItems_center-05836e {
+  --flex-align-items: center;
+}
+
+.kbq-flex-alignItems_baseline-1e77c2 {
+  --flex-align-items: baseline;
+}
+
+.kbq-flex-alignItems_stretch-f031de {
+  --flex-align-items: stretch;
+}
+
+.kbq-flex-justifyContent_flex-start-05ff2a {
+  --flex-justify-content: flex-start;
+}
+
+.kbq-flex-justifyContent_flex-end-06a105 {
+  --flex-justify-content: flex-end;
+}
+
+.kbq-flex-justifyContent_center-5134e2 {
+  --flex-justify-content: center;
+}
+
+.kbq-flex-justifyContent_space-between-02a3e5 {
+  --flex-justify-content: space-between;
+}
+
+.kbq-flex-justifyContent_space-around-42e955 {
+  --flex-justify-content: space-around;
+}
+
+.kbq-flex-justifyContent_space-evenly-b84975 {
+  --flex-justify-content: space-evenly;
+}
+
+.kbq-flex-flex_flex-de4f74 {
+  --flex-type: flex;
+}
+
+.kbq-flex-flex_inline-flex-a712ef {
+  --flex-type: inline-flex;
+}
+
+.kbq-flex-wrap_wrap-78b98d {
+  --flex-wrap: wrap;
+}
+
+.kbq-flex-wrap_nowrap-902a73 {
+  --flex-wrap: nowrap;
+}
+
+.kbq-flex-wrap_wrap-reverse-dbacf6 {
+  --flex-wrap: wrap-reverse;
+}
+
+.kbq-flex-direction_row-8fff0d {
+  --flex-direction: row;
+}
+
+.kbq-flex-direction_row-reverse-7fa95e {
+  --flex-direction: row-reverse;
+}
+
+.kbq-flex-direction_column-29b97b {
+  --flex-direction: column;
+}
+
+.kbq-flex-direction_column-reverse-04ecc6 {
+  --flex-direction: column-reverse;
+}
+
+.kbq-flex-order_-1-4f5108 {
+  --flex-order: -1;
+}
+
+.kbq-flex-order_0-4a6164 {
+  --flex-order: 0;
+}
+
+.kbq-flex-order_1-b5e24c {
+  --flex-order: 1;
+}
+
+.kbq-flex-gap_column_3xs-2aea22 {
+  --flex-column-gap: var(--kbq-size-3xs);
+}
+
+.kbq-flex-gap_column_xxs-7586e8 {
+  --flex-column-gap: var(--kbq-size-xxs);
+}
+
+.kbq-flex-gap_column_xs-911f68 {
+  --flex-column-gap: var(--kbq-size-xs);
+}
+
+.kbq-flex-gap_column_s-a389c1 {
+  --flex-column-gap: var(--kbq-size-s);
+}
+
+.kbq-flex-gap_column_m-21736b {
+  --flex-column-gap: var(--kbq-size-m);
+}
+
+.kbq-flex-gap_column_l-390cf2 {
+  --flex-column-gap: var(--kbq-size-l);
+}
+
+.kbq-flex-gap_column_xl-47b33c {
+  --flex-column-gap: var(--kbq-size-xl);
+}
+
+.kbq-flex-gap_column_xxl-2f762a {
+  --flex-column-gap: var(--kbq-size-xxl);
+}
+
+.kbq-flex-gap_column_3xl-e81ba4 {
+  --flex-column-gap: var(--kbq-size-3xl);
+}
+
+.kbq-flex-gap_column_4xl-502e67 {
+  --flex-column-gap: var(--kbq-size-4xl);
+}
+
+.kbq-flex-gap_column_5xl-028451 {
+  --flex-column-gap: var(--kbq-size-5xl);
+}
+
+.kbq-flex-gap_column_6xl-2f1bfa {
+  --flex-column-gap: var(--kbq-size-6xl);
+}
+
+.kbq-flex-gap_column_7xl-057b8a {
+  --flex-column-gap: var(--kbq-size-7xl);
+}
+
+.kbq-flex-gap_row_3xs-ea5984 {
+  --flex-row-gap: var(--kbq-size-3xs);
+}
+
+.kbq-flex-gap_row_xxs-a520f4 {
+  --flex-row-gap: var(--kbq-size-xxs);
+}
+
+.kbq-flex-gap_row_xs-e62321 {
+  --flex-row-gap: var(--kbq-size-xs);
+}
+
+.kbq-flex-gap_row_s-2dab73 {
+  --flex-row-gap: var(--kbq-size-s);
+}
+
+.kbq-flex-gap_row_m-6423db {
+  --flex-row-gap: var(--kbq-size-m);
+}
+
+.kbq-flex-gap_row_l-f312fe {
+  --flex-row-gap: var(--kbq-size-l);
+}
+
+.kbq-flex-gap_row_xl-e85171 {
+  --flex-row-gap: var(--kbq-size-xl);
+}
+
+.kbq-flex-gap_row_xxl-c2548b {
+  --flex-row-gap: var(--kbq-size-xxl);
+}
+
+.kbq-flex-gap_row_3xl-34ef28 {
+  --flex-row-gap: var(--kbq-size-3xl);
+}
+
+.kbq-flex-gap_row_4xl-29ec96 {
+  --flex-row-gap: var(--kbq-size-4xl);
+}
+
+.kbq-flex-gap_row_5xl-c7e969 {
+  --flex-row-gap: var(--kbq-size-5xl);
+}
+
+.kbq-flex-gap_row_6xl-afc87a {
+  --flex-row-gap: var(--kbq-size-6xl);
+}
+
+.kbq-flex-gap_row_7xl-d67bcc {
+  --flex-row-gap: var(--kbq-size-7xl);
+}
 .kbq-container-136c61 {
   --container-max-inline-size: intial;
   --container-position: intial;
@@ -1135,6 +1346,10 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+.kbq-typography-color-inherit-35de13 {
+  color: inherit;
+}
 .kbq-checkbox-72cf70 {
   --checkbox-bg-color: var(--kbq-background-bg);
   --checkbox-outline-width: var(--kbq-size-3xs);
@@ -1840,165 +2055,6 @@
 .kbq-inputnumbercountercontrols-counter-1126db {
   inline-size: var(--kbq-size-3xl);
 }
-.kbq-flex-7624b3 {
-  --flex-gap: 0;
-  --flex-order: 0;
-  --flex-type: flex;
-  --flex-wrap: nowrap;
-  --flex-direction: row;
-  --flex-align-items: flex-start;
-  --flex-justify-content: flex-start;
-  gap: var(--flex-gap);
-  order: var(--flex-order);
-  display: var(--flex-type);
-  align-items: var(--flex-align-items);
-  justify-content: var(--flex-justify-content);
-  flex-flow: var(--flex-direction) var(--flex-wrap);
-}
-
-.kbq-flex-alignItems_flex-start-56df74 {
-  --flex-align-items: flex-start;
-}
-
-.kbq-flex-alignItems_flex-end-951e7a {
-  --flex-align-items: flex-end;
-}
-
-.kbq-flex-alignItems_center-05836e {
-  --flex-align-items: center;
-}
-
-.kbq-flex-alignItems_baseline-1e77c2 {
-  --flex-align-items: baseline;
-}
-
-.kbq-flex-alignItems_stretch-f031de {
-  --flex-align-items: stretch;
-}
-
-.kbq-flex-justifyContent_flex-start-05ff2a {
-  --flex-justify-content: flex-start;
-}
-
-.kbq-flex-justifyContent_flex-end-06a105 {
-  --flex-justify-content: flex-end;
-}
-
-.kbq-flex-justifyContent_center-5134e2 {
-  --flex-justify-content: center;
-}
-
-.kbq-flex-justifyContent_space-between-02a3e5 {
-  --flex-justify-content: space-between;
-}
-
-.kbq-flex-justifyContent_space-around-42e955 {
-  --flex-justify-content: space-around;
-}
-
-.kbq-flex-justifyContent_space-evenly-b84975 {
-  --flex-justify-content: space-evenly;
-}
-
-.kbq-flex-flex_flex-de4f74 {
-  --flex-type: flex;
-}
-
-.kbq-flex-flex_inline-flex-a712ef {
-  --flex-type: inline-flex;
-}
-
-.kbq-flex-wrap_wrap-78b98d {
-  --flex-wrap: wrap;
-}
-
-.kbq-flex-wrap_nowrap-902a73 {
-  --flex-wrap: nowrap;
-}
-
-.kbq-flex-wrap_wrap-reverse-dbacf6 {
-  --flex-wrap: wrap-reverse;
-}
-
-.kbq-flex-direction_row-8fff0d {
-  --flex-direction: row;
-}
-
-.kbq-flex-direction_row-reverse-7fa95e {
-  --flex-direction: row-reverse;
-}
-
-.kbq-flex-direction_column-29b97b {
-  --flex-direction: column;
-}
-
-.kbq-flex-direction_column-reverse-04ecc6 {
-  --flex-direction: column-reverse;
-}
-
-.kbq-flex-order_-1-4f5108 {
-  --flex-order: -1;
-}
-
-.kbq-flex-order_0-4a6164 {
-  --flex-order: 0;
-}
-
-.kbq-flex-order_1-b5e24c {
-  --flex-order: 1;
-}
-
-.kbq-flex-gap_3xs-5c9d4e {
-  --flex-gap: var(--kbq-size-3xs);
-}
-
-.kbq-flex-gap_xxs-035614 {
-  --flex-gap: var(--kbq-size-xxs);
-}
-
-.kbq-flex-gap_xs-970b31 {
-  --flex-gap: var(--kbq-size-xs);
-}
-
-.kbq-flex-gap_s-e9d292 {
-  --flex-gap: var(--kbq-size-s);
-}
-
-.kbq-flex-gap_m-21a099 {
-  --flex-gap: var(--kbq-size-m);
-}
-
-.kbq-flex-gap_l-47c05c {
-  --flex-gap: var(--kbq-size-l);
-}
-
-.kbq-flex-gap_xl-d76274 {
-  --flex-gap: var(--kbq-size-xl);
-}
-
-.kbq-flex-gap_xxl-0e68cb {
-  --flex-gap: var(--kbq-size-xxl);
-}
-
-.kbq-flex-gap_3xl-497012 {
-  --flex-gap: var(--kbq-size-3xl);
-}
-
-.kbq-flex-gap_4xl-0b7c71 {
-  --flex-gap: var(--kbq-size-4xl);
-}
-
-.kbq-flex-gap_5xl-ed56fe {
-  --flex-gap: var(--kbq-size-5xl);
-}
-
-.kbq-flex-gap_6xl-0749d1 {
-  --flex-gap: var(--kbq-size-6xl);
-}
-
-.kbq-flex-gap_7xl-0a1536 {
-  --flex-gap: var(--kbq-size-7xl);
-}
 .kbq-radio-c3ed31 {
   --radio-size: ;
   --radio-opacity: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.5",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -22,10 +22,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-primitives": "0.0.1-beta.4",
-    "@koobiq/react-core": "0.0.1-beta.4",
-    "@koobiq/react-icons": "0.0.1-beta.4",
-    "@koobiq/logger": "0.0.1-beta.4"
+    "@koobiq/react-core": "0.0.1-beta.5",
+    "@koobiq/react-icons": "0.0.1-beta.5",
+    "@koobiq/logger": "0.0.1-beta.5",
+    "@koobiq/react-primitives": "0.0.1-beta.5"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",