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

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/List/List.js

@@ -8,27 +8,29 @@ import { ListSection } from "./components/ListSection/ListSection.js";
 import { Typography } from "../Typography/Typography.js";
 import { ListOption } from "./components/ListOption/ListOption.js";
 function ListRender(props, ref) {
-  const { className, label } = props;
+  const { label, className, style, slotProps } = props;
   const domRef = useDOMRef(ref);
   const state = useListState(props);
   const { listBoxProps, labelProps } = useListBox(props, state, domRef);
+  const titleProps = mergeProps(
+    {
+      className: s.label,
+      variant: "text-normal-strong"
+    },
+    slotProps?.label,
+    labelProps
+  );
   const listProps = mergeProps(
     {
-      className: clsx(s.base, className),
-      ref: domRef
+      style,
+      ref: domRef,
+      className: clsx(s.base, className)
     },
+    slotProps?.list,
     listBoxProps
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isNotNil(label) && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "text-normal-strong",
-        className: s.label,
-        ...labelProps,
-        children: label
-      }
-    ),
+    isNotNil(label) && /* @__PURE__ */ jsx(Typography, { ...titleProps, children: label }),
     /* @__PURE__ */ jsx("ul", { ...listProps, children: [...state.collection].map(
       (item) => item.type === "section" ? /* @__PURE__ */ jsx(ListSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx(ListOption, { item, state }, item.key)
     ) })

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

@@ -1,5 +1,6 @@
-import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaListBoxProps } from '@koobiq/react-primitives';
+import type { TypographyProps } from '../Typography';
 export declare const listPropSelectionMode: readonly ["none", "single", "multiple"];
 export type ListPropSelectionMode = (typeof listPropSelectionMode)[number];
 export type ListPropItems<T extends object> = AriaListBoxProps<T>['items'];
@@ -14,8 +15,11 @@ export type ListBaseProps<T extends object> = {
     label?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /** The type of selection that is allowed in the collection. */
     selectionMode?: ListPropSelectionMode;
+    /** Ref to the HTML ul-element. */
     ref?: Ref<HTMLElement>;
     /** The contents of the collection. */
     children?: ListPropChildren<T>;
@@ -36,6 +40,11 @@ export type ListBaseProps<T extends object> = {
     onAction?: ListPropOnAction<T>;
     /** How multiple selection should behave in the collection. */
     selectionBehavior?: ListPropSelectionBehavior<T>;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        label?: TypographyProps;
+        list?: ComponentPropsWithRef<'div'>;
+    };
 };
 export type ListProps<T extends object> = ListBaseProps<T>;
 export type ListRef = ComponentRef<'ul'>;

package/dist/components/Popover/Popover.js

@@ -12,6 +12,7 @@ const Popover = forwardRef(
     const {
       placement: placementProp = "top",
       arrowBoundaryOffset = 20,
+      containerPadding = 12,
       hideArrow = false,
       size = "medium",
       crossOffset = 0,
@@ -58,9 +59,9 @@ const Popover = forwardRef(
         isNonModal,
         crossOffset,
         maxHeight: 480,
+        containerPadding,
         popoverRef: domRef,
         arrowBoundaryOffset,
-        containerPadding: 24,
         placement: placementProp,
         isKeyboardDismissDisabled: disableExitOnEscapeKeyDown,
         triggerRef: anchorRef || controlRef
@@ -88,6 +89,13 @@ const Popover = forwardRef(
       },
       slotProps?.dialog
     );
+    const backdropProps = mergeProps(
+      {
+        className: s.underlay
+      },
+      slotProps?.backdrop,
+      underlayProps
+    );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       control?.({
         onClick: onPress,
@@ -111,7 +119,7 @@ const Popover = forwardRef(
               portalContainer,
               disableFocusManagement,
               children: [
-                /* @__PURE__ */ jsx("div", { ...underlayProps, className: s.underlay }),
+                /* @__PURE__ */ jsx("div", { ...backdropProps }),
                 /* @__PURE__ */ jsxs(
                   "div",
                   {

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

@@ -57,7 +57,7 @@ export type PopoverProps = {
      * */
     placement?: PopoverPropPlacement;
     /** The ref for the element which the popover positions itself with respect to. */
-    anchorRef?: RefObject<HTMLElement>;
+    anchorRef?: RefObject<HTMLElement | null>;
     /**
      * If `true`, the arrow isn't shown.
      * @default false
@@ -77,6 +77,12 @@ export type PopoverProps = {
      * @default 0
      */
     arrowBoundaryOffset?: number;
+    /**
+     * The placement padding that should be applied between the element and its
+     * surrounding container.
+     * @default 12
+     */
+    containerPadding?: number;
     /**
      * The additional offset applied along the main axis between the element and its
      * anchor element.
@@ -93,5 +99,6 @@ export type PopoverProps = {
     slotProps?: {
         dialog?: DialogProps;
         arrow?: ComponentPropsWithRef<'div'>;
+        backdrop?: ComponentPropsWithRef<'div'>;
     };
 };

package/dist/components/Provider/BreakpointsProvider.d.ts

@@ -3,8 +3,9 @@ import type { Breakpoints } from './types';
 export type BreakpointsProviderProps = {
     children: ReactNode;
     breakpoints: Breakpoints;
+    defaultMatches?: boolean[];
 };
 export declare const BreakpointsProvider: {
-    ({ children, breakpoints: _breakpoints, }: BreakpointsProviderProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, defaultMatches, breakpoints: _breakpoints, }: BreakpointsProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Provider/BreakpointsProvider.js

@@ -4,9 +4,16 @@ import { BreakpointsContext } from "./BreakpointsContext.js";
 import { useBreakpoints } from "./utils/useBreakpoints.js";
 const BreakpointsProvider = ({
   children,
+  defaultMatches,
   breakpoints: _breakpoints
 }) => {
-  const breakpoints = useBreakpoints(_breakpoints);
+  const breakpoints = useBreakpoints(
+    _breakpoints,
+    defaultMatches && {
+      ssr: true,
+      defaultMatches
+    }
+  );
   return /* @__PURE__ */ jsx(BreakpointsContext.Provider, { value: breakpoints, children });
 };
 BreakpointsProvider.displayName = "BreakpointsProvider";

package/dist/components/Provider/Provider.d.ts

@@ -1,6 +1,6 @@
 import type { Breakpoints, ProviderProps } from './types';
 export declare const defaultBreakpoints: Breakpoints;
 export declare const Provider: {
-    ({ breakpoints, children, locale, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
+    ({ breakpoints, breakpointsFallback, children, locale, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Provider/Provider.js

@@ -19,9 +19,17 @@ const defaultBreakpoints = {
 };
 const Provider = ({
   breakpoints = defaultBreakpoints,
+  breakpointsFallback,
   children,
   locale
-}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(BreakpointsProvider, { breakpoints, children }) }) });
+}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(
+  BreakpointsProvider,
+  {
+    breakpoints,
+    defaultMatches: breakpointsFallback,
+    children
+  }
+) }) });
 Provider.displayName = "Provider";
 export {
   Provider,

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

@@ -10,7 +10,12 @@ export type Breakpoints = {
     [custom: string]: number | undefined;
 };
 export type ProviderProps = {
+    /** The content of the component. */
     children?: ReactNode;
+    /** Responsive breakpoints for your application. */
     breakpoints?: Breakpoints;
+    /** SSR-fallback for responsive breakpoints for your application. */
+    breakpointsFallback?: boolean[];
+    /** The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. Defaults to the browser/OS language setting. */
     locale?: I18nProviderProps['locale'];
 };

package/dist/components/Provider/utils/useBreakpoints.d.ts

@@ -1,2 +1,3 @@
+import type { UseMediaQueryOptions } from '@koobiq/react-core';
 import type { Breakpoints } from '../types';
-export declare function useBreakpoints(breakpoints: Breakpoints): {};
+export declare function useBreakpoints(breakpoints: Breakpoints, options?: UseMediaQueryOptions): {};

package/dist/components/Provider/utils/useBreakpoints.js

@@ -1,10 +1,10 @@
 "use client";
 import { useMediaQuery } from "@koobiq/react-core";
-function useBreakpoints(breakpoints) {
+function useBreakpoints(breakpoints, options) {
   const queries = Object.values(breakpoints).map(
     (width) => `(min-width: ${width}px)`
   );
-  const matches = useMediaQuery(queries);
+  const matches = useMediaQuery(queries, options);
   return Object.keys(breakpoints).reduce(
     (acc, item, index) => ({ ...acc, [item]: matches[index] }),
     {}

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/Tooltip/Tooltip.d.ts

@@ -7,7 +7,7 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     control?: import("./types").TooltipPropControl;
     placement?: import("./types").TooltipPropPlacement;
-    anchorRef?: import("react").RefObject<HTMLElement>;
+    anchorRef?: import("react").RefObject<HTMLElement | null>;
     arrowBoundaryOffset?: number;
     offset?: number;
     crossOffset?: number;

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

@@ -34,7 +34,7 @@ export type TooltipProps = {
      * */
     placement?: TooltipPropPlacement;
     /** The ref for the element which the popover positions itself with respect to. */
-    anchorRef?: RefObject<HTMLElement>;
+    anchorRef?: RefObject<HTMLElement | null>;
     /**
      * The minimum distance the arrow's edge should be from the edge of the overlay element.
      * @default 0

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.6",
   "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/logger": "0.0.1-beta.6",
+    "@koobiq/react-icons": "0.0.1-beta.6",
+    "@koobiq/react-primitives": "0.0.1-beta.6",
+    "@koobiq/react-core": "0.0.1-beta.6"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",