@koobiq/react-components 0.8.0 → 0.10.0

package/dist/components/Textarea/Textarea.d.ts

@@ -4,11 +4,10 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
     required?: boolean;
     hiddenLabel?: boolean;
     readonly?: boolean;
-} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationState" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "style" | "className" | "cols" | "rows" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "errorMessage" | "isLabelHidden" | "expand"> & {
+} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "cols" | "rows" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "isLabelHidden" | "expand"> & {
     className?: string;
     style?: import("react").CSSProperties;
     variant?: import("./types").TextareaPropVariant;
-    errorMessage?: import("react").ReactNode;
     fullWidth?: boolean;
     isLabelHidden?: boolean;
     labelPlacement?: import("./types").TextareaPropLabelPlacement;

package/dist/components/Textarea/Textarea.js

@@ -9,7 +9,7 @@ import { FormControl } from "../FormControl/FormControl.js";
 const Textarea = forwardRef((props, ref) => {
   const {
     variant = "filled",
-    fullWidth = false,
+    fullWidth,
     hiddenLabel,
     isLabelHidden: isLabelHiddenProp,
     disabled,
@@ -31,11 +31,11 @@ const Textarea = forwardRef((props, ref) => {
     label,
     ...other
   } = props;
-  const isDisabled = isDisabledProp ?? disabled ?? false;
-  const isRequired = isRequiredProp ?? required ?? false;
-  const isReadOnly = isReadOnlyProp ?? readonly ?? false;
-  const isInvalid = isInvalidProp ?? error ?? false;
-  const isLabelHidden = isLabelHiddenProp ?? hiddenLabel ?? false;
+  const isDisabled = isDisabledProp ?? disabled;
+  const isRequired = isRequiredProp ?? required;
+  const isReadOnly = isReadOnlyProp ?? readonly;
+  const isInvalid = isInvalidProp ?? error;
+  const isLabelHidden = isLabelHiddenProp ?? hiddenLabel;
   if (process.env.NODE_ENV !== "production" && "disabled" in props) {
     deprecate(
       'Textarea: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -43,7 +43,7 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
   );
   const captionProps = mergeProps({ children: caption }, slotProps?.caption);
   const errorProps = mergeProps(
-    { isInvalid, children: errorMessage },
+    { children: errorMessage, className: s.error },
     slotProps?.errorMessage
   );
   const groupProps = {

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

@@ -15,35 +15,30 @@ export type TextareaPropLabelAlign = FormControlPropLabelAlign;
 type TextareaDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
-     * @default false
      * @deprecated
      * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
      */
     disabled?: boolean;
     /**
      * If `true`, the input will indicate an error.
-     * @default false
      * @deprecated
      * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
      */
     error?: boolean;
     /**
      * If `true`, the label is displayed as required and the input element is required.
-     * @default false
      * @deprecated
      * The "required" prop is deprecated. Use "isRequired" prop to replace it.
      */
     required?: boolean;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
-     * @default false
      * @deprecated
      * The "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.
      */
     hiddenLabel?: boolean;
     /**
      * If `true`, the input can be selected but not changed by the user.
-     * @default false
      * @deprecated
      * The "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.
      */
@@ -59,16 +54,12 @@ export type TextareaProps = ExtendableProps<{
      * @default 'filled'
      */
     variant?: TextareaPropVariant;
-    /** An error message for the field. */
-    errorMessage?: ReactNode;
     /**
      * If true, the input will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
-     * @default false
      */
     isLabelHidden?: boolean;
     /**
@@ -103,6 +94,6 @@ export type TextareaProps = ExtendableProps<{
         textarea?: FieldInputProps<'textarea'>;
         errorMessage?: FieldErrorProps;
     };
-}, TextareaDeprecatedProps & Omit<TextFieldProps<HTMLTextAreaElement>, 'description' | 'validationBehavior' | 'validationState' | 'validate' | 'children' | 'style' | 'className' | 'inputElementType'>>;
+}, TextareaDeprecatedProps & Omit<TextFieldProps<HTMLTextAreaElement>, 'description' | 'validationState' | 'children' | 'style' | 'className' | 'inputElementType'>>;
 export type TextareaRef = ComponentRef<'textarea'>;
 export {};

package/dist/components/TimePicker/TimePicker.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'react';
-import type { TimeValue } from '@koobiq/react-primitives';
+import { type TimeValue } from '@koobiq/react-primitives';
 import type { TimePickerComponent, TimePickerProps, TimePickerRef } from './types';
 export declare function TimePickerRender<T extends TimeValue>(props: Omit<TimePickerProps<T>, 'ref'>, ref: Ref<TimePickerRef>): import("react/jsx-runtime").JSX.Element;
 export declare const TimePicker: TimePickerComponent;

package/dist/components/TimePicker/TimePicker.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useLocale, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { IconClock16 } from "@koobiq/react-icons";
-import { useTimeFieldState, removeDataAttributes, useTimeField } from "@koobiq/react-primitives";
+import { useTimeFieldState, removeDataAttributes, useTimeField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./TimePicker.module.css.js";
 import { FormControl } from "../FormControl/FormControl.js";
 import { FormControlLabel } from "../FormControlLabel/FormControlLabel.js";
@@ -18,6 +18,7 @@ function TimePickerRender(props, ref) {
   const {
     isLabelHidden,
     labelPlacement,
+    errorMessage,
     labelAlign,
     caption,
     label,
@@ -28,7 +29,6 @@ function TimePickerRender(props, ref) {
     className,
     endAddon,
     startAddon,
-    errorMessage,
     "data-testid": testId
   } = props;
   const state = useTimeFieldState({
@@ -40,9 +40,11 @@ function TimePickerRender(props, ref) {
     fieldProps,
     descriptionProps,
     errorMessageProps,
+    inputProps,
     ...validation
   } = useTimeField(removeDataAttributes(props), state, domRef);
-  const { isInvalid, isDisabled, isRequired, isReadOnly } = state;
+  const { isDisabled, isRequired, isReadOnly } = state;
+  const { isInvalid } = validation;
   const rootProps = mergeProps(
     {
       style,
@@ -51,10 +53,10 @@ function TimePickerRender(props, ref) {
       labelAlign,
       "data-testid": testId,
       "data-variant": variant,
-      "data-invalid": isInvalid,
-      "data-disabled": isDisabled,
-      "data-required": isRequired,
-      "data-readonly": isReadOnly,
+      "data-invalid": isInvalid || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-required": isRequired || void 0,
+      "data-readonly": isReadOnly || void 0,
       className: clsx(s.base, className)
     },
     slotProps?.root
@@ -90,8 +92,7 @@ function TimePickerRender(props, ref) {
   const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
   const errorProps = mergeProps(
     {
-      isInvalid,
-      children: typeof errorMessage === "function" ? errorMessage({ ...validation }) : errorMessage
+      children: errorMessage
     },
     slotProps?.errorMessage,
     errorMessageProps
@@ -104,11 +105,14 @@ function TimePickerRender(props, ref) {
         {
           ...groupProps,
           slotProps: { startAddon: { className: s.startAddon } },
-          children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)) })
+          children: /* @__PURE__ */ jsxs(FieldInputDate, { ...controlProps, children: [
+            state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)),
+            /* @__PURE__ */ jsx("input", { ...inputProps })
+          ] })
         }
       ),
       /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FieldError, { ...errorProps }) })
     ] })
   ] });
 }

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

@@ -24,7 +24,6 @@ export type TimePickerProps<T extends TimeValue> = {
     variant?: DateInputPropVariant;
     /**
      * If true, the input will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
     /** The props used for each slot inside. */
@@ -40,7 +39,6 @@ export type TimePickerProps<T extends TimeValue> = {
     ref?: Ref<HTMLDivElement>;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
-     * @default false
      */
     isLabelHidden?: boolean;
     /**

package/dist/components/Toggle/Toggle.js

@@ -25,11 +25,11 @@ const Toggle = forwardRef(
       className,
       ...other
     } = props;
-    const isDisabled = isDisabledProp ?? disabled ?? false;
+    const isDisabled = isDisabledProp ?? disabled;
     const isSelected = isSelectedProp ?? checked;
-    const isInvalid = isInvalidProp ?? error ?? false;
+    const isInvalid = isInvalidProp ?? error;
     const defaultSelected = defaultSelectedProp ?? defaultChecked;
-    const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+    const isReadOnly = isReadOnlyProp ?? readonly;
     if (process.env.NODE_ENV !== "production" && "disabled" in props) {
       deprecate(
         'Toggle: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'

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

@@ -8,14 +8,12 @@ export type TogglePropLabelPlacement = (typeof togglePropLabelPlacement)[number]
 type ToggleDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
-     * @default false
      * @deprecated
      * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
      */
     disabled?: boolean;
     /**
      * If `true`, the component will indicate an error.
-     * @default false
      * @deprecated
      * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
      */
@@ -28,7 +26,6 @@ type ToggleDeprecatedProps = {
     checked?: boolean;
     /**
      * It prevents the user from changing the value of the checkbox.
-     * @default false
      * @deprecated
      * The "readonly" prop is deprecated. Use "isReadonly" prop to replace it.
      */

package/dist/components/Tooltip/Tooltip.js

@@ -9,15 +9,15 @@ import { utilClasses } from "../../styles/utility.js";
 import s from "./Tooltip.module.css.js";
 const Tooltip = forwardRef((props, ref) => {
   const {
+    variant = "contrast",
+    placement: placementProp = "top",
+    closeDelay = 120,
     delay = 120,
-    disabled,
-    open,
     isDisabled: isDisabledProp,
     isOpen: isOpenProp,
-    closeDelay = 120,
-    hideArrow = false,
-    variant = "contrast",
-    placement: placementProp = "top",
+    disabled,
+    open,
+    hideArrow,
     control,
     children,
     anchorRef,
@@ -30,7 +30,7 @@ const Tooltip = forwardRef((props, ref) => {
     ...other
   } = props;
   const isOpen = isOpenProp ?? open;
-  const isDisabled = isDisabledProp ?? disabled ?? false;
+  const isDisabled = isDisabledProp ?? disabled;
   if (process.env.NODE_ENV !== "production" && "open" in props) {
     deprecate(
       'Tooltip: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
@@ -114,9 +114,9 @@ const Tooltip = forwardRef((props, ref) => {
           "div",
           {
             ...tooltipProps,
-            "data-arrow": showArrow,
+            "data-arrow": showArrow || void 0,
             "data-variant": variant,
-            "data-placement": placement,
+            "data-placement": placement || void 0,
             "data-transition": transition,
             children: [
               showArrow && /* @__PURE__ */ jsx(

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

@@ -11,14 +11,12 @@ export type TooltipPropPlacement = (typeof tooltipPropPlacement)[number];
 type TooltipDeprecatedProps = {
     /**
      * If `true`, the component is shown.
-     * @default false
      * @deprecated
      * The "open" prop is deprecated. Use "isOpen" prop to replace it.
      */
     open?: boolean;
     /**
      * If `true`, the component is disabled.
-     * @deprecated
      * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
      */
     disabled?: boolean;
@@ -59,7 +57,6 @@ export type TooltipProps = ExtendableProps<{
     crossOffset?: number;
     /**
      * If `true`, the arrow isn't shown.
-     * @default false
      */
     hideArrow?: boolean;
     /**

package/dist/style.css

@@ -1352,7 +1352,7 @@
   font-family: inherit;
 }
 
-.kbq-utility-list-792630 {
+.kbq-utility-list-792630, .kbq-utility-list-792630 ul {
   outline: none;
   margin: 0;
   padding: 0;
@@ -1360,6 +1360,22 @@
   overflow: auto;
 }
 
+.kbq-utility-list-792630[data-padded] {
+  padding-block: var(--kbq-size-xxs);
+}
+
+.kbq-utility-list-792630[data-padded] .kbq-utility-list-item-862731, .kbq-utility-list-792630[data-padded] .kbq-utility-list-heading-3c364a {
+  border-inline: var(--kbq-size-xxs) solid transparent;
+  background-clip: padding-box;
+}
+
+.kbq-utility-list-heading-3c364a {
+  -webkit-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  padding: var(--kbq-size-s) var(--kbq-size-m);
+}
+
 .kbq-utility-list-item-862731 {
   --list-item-bg-color: ;
   --list-item-outline-color: transparent;
@@ -1367,17 +1383,33 @@
   cursor: pointer;
   box-sizing: border-box;
   gap: var(--kbq-size-s);
-  border-radius: var(--kbq-size-s);
   color: var(--kbq-foreground-contrast);
-  background-color: var(--list-item-bg-color);
   padding: var(--kbq-size-xs) var(--kbq-size-m);
-  outline-offset: calc(-1 * var(--list-item-outline-width));
-  outline: var(--list-item-outline-width) solid var(--list-item-outline-color);
-  transition: border-color var(--kbq-transition-default), border-radius var(--kbq-transition-default), background-color var(--kbq-transition-default), color var(--kbq-transition-default);
+  z-index: var(--kbq-layer-absolute);
+  transition: border-color var(--kbq-transition-default), border-radius var(--kbq-transition-default), color var(--kbq-transition-default);
+  outline: none;
   flex-shrink: 0;
   align-items: center;
   text-decoration: none;
   display: flex;
+  position: relative;
+}
+
+.kbq-utility-list-item-862731 > * {
+  z-index: var(--kbq-layer-absolute);
+}
+
+.kbq-utility-list-item-862731:before {
+  content: "";
+  outline-offset: calc(-1 * var(--list-item-outline-width));
+  outline: var(--list-item-outline-width) solid var(--list-item-outline-color);
+  transition: background-color var(--kbq-transition-default);
+  background-color: var(--list-item-bg-color);
+  border-radius: var(--kbq-size-s);
+  pointer-events: none;
+  z-index: -1;
+  position: absolute;
+  inset: 0;
 }
 
 .kbq-utility-list-item-862731:where([data-hovered="true"]) {
@@ -1426,12 +1458,12 @@
   --list-item-bg-color: var(--kbq-states-background-contrast-less-active);
 }
 
-.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])) {
+.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])):before {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
 }
 
-.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]) + :is([data-selected="true"], [data-focus-visible="true"]) {
+.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]) + :is([data-selected="true"], [data-focus-visible="true"]):before {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
@@ -1996,6 +2028,13 @@
   --badge-bg-color: ;
   --badge-color: var(--kbq-foreground-contrast);
 }
+.kbq-input-hasStartAddon-fac70d {
+  --field-padding-inline-start: 36px;
+}
+
+.kbq-input-hasEndAddon-12fbf6 {
+  --field-padding-inline-end: 36px;
+}
 .kbq-field-25e8f8 {
   --field-size-height: 32px;
   --field-input-padding-inline-start: var(--kbq-size-m);
@@ -3110,24 +3149,6 @@
 .kbq-list-label-e4431c {
   padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
-
-.kbq-list-divider-fd5123 {
-  margin-inline: calc(var(--kbq-size-xxs) * -1);
-  inline-size: initial;
-}
-.kbq-listsection-d94a57 {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: auto;
-}
-
-.kbq-listsection-heading-5bd9e3 {
-  -webkit-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  padding: var(--kbq-size-s) var(--kbq-size-m);
-}
 .kbq-divider-16da20 {
   border-style: solid;
   border-color: var(--kbq-line-contrast-less);
@@ -3202,7 +3223,6 @@
 
 .kbq-select-list-8ffac0 {
   inline-size: 100%;
-  padding: var(--kbq-size-xxs);
 }
 
 .kbq-select-popover-79fc05 {
@@ -3298,9 +3318,10 @@
   padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
 
-.kbq-selectlist-divider-7c167f {
-  margin-inline: calc(var(--kbq-size-xxs) * -1);
-  inline-size: initial;
+.kbq-selectlist-empty-e6a9b0 {
+  color: var(--kbq-foreground-contrast-secondary);
+  padding-block: var(--kbq-size-xs);
+  padding-inline: var(--kbq-size-l);
 }
 .kbq-taggroup-container-c4d544 {
   inline-size: calc(100% + var(--kbq-size-s));
@@ -3450,28 +3471,9 @@
   min-inline-size: 200px;
   max-inline-size: 640px;
 }
-.kbq-menuinner-0117f8 {
-  padding: var(--kbq-size-xxs);
+.kbq-menulist-0e5f46 {
   inline-size: 100%;
 }
-
-.kbq-menuinner-divider-acbe04 {
-  margin-inline: calc(var(--kbq-size-xxs) * -1);
-  inline-size: initial;
-}
-.kbq-menusection-6a5530 {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: auto;
-}
-
-.kbq-menusection-heading-2be1f1 {
-  -webkit-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  padding: var(--kbq-size-s) var(--kbq-size-m);
-}
 .kbq-buttontogglegroup-79a88d {
   --thumb-inline-size-start: ;
   --thumb-transform-start: ;

package/dist/styles/utility.d.ts

@@ -70,5 +70,6 @@ export declare const utilClasses: {
     };
     list: string;
     listItem: string;
+    listHeading: string;
     scrollable: string;
 };

package/dist/styles/utility.js

@@ -71,7 +71,8 @@ const utilClasses = {
   color,
   typography,
   list: s.list,
-  listItem: s["list-item"]
+  listItem: s["list-item"],
+  listHeading: s["list-heading"]
 };
 export {
   utilClasses

package/dist/styles/utility.module.css.js

@@ -67,7 +67,8 @@ const s = {
   "italic-compact-strong": "kbq-utility-italic-compact-strong-d8e16e",
   inherit,
   list,
-  "list-item": "kbq-utility-list-item-862731"
+  "list-item": "kbq-utility-list-item-862731",
+  "list-heading": "kbq-utility-list-heading-3c364a"
 };
 export {
   s as default,

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './getResponsiveValue';
 export * from './capitalizeFirstLetter';
+export * from './isPrimitiveNode';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.8.0",
-    "@koobiq/react-core": "0.8.0",
-    "@koobiq/react-icons": "0.8.0",
-    "@koobiq/react-primitives": "0.8.0"
+    "@koobiq/react-core": "0.10.0",
+    "@koobiq/logger": "0.10.0",
+    "@koobiq/react-icons": "0.10.0",
+    "@koobiq/react-primitives": "0.10.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",

package/dist/components/List/components/ListSection/ListSection.module.css.js

@@ -1,11 +0,0 @@
-const base = "kbq-listsection-d94a57";
-const heading = "kbq-listsection-heading-5bd9e3";
-const s = {
-  base,
-  heading
-};
-export {
-  base,
-  s as default,
-  heading
-};

package/dist/components/Menu/components/MenuInner/MenuInner.d.ts

@@ -1,6 +0,0 @@
-import type { ComponentRef, ReactElement } from 'react';
-import type { AriaMenuOptions } from '@koobiq/react-primitives';
-export type MenuInnerProps<T> = AriaMenuOptions<T>;
-export type MenuInnerComponent = <T>(props: MenuInnerProps<T>) => ReactElement | null;
-export type MenuInnerRef = ComponentRef<'ul'>;
-export declare const MenuInner: MenuInnerComponent;

package/dist/components/Menu/components/MenuInner/MenuInner.module.css.js

@@ -1,11 +0,0 @@
-const base = "kbq-menuinner-0117f8";
-const divider = "kbq-menuinner-divider-acbe04";
-const s = {
-  base,
-  divider
-};
-export {
-  base,
-  s as default,
-  divider
-};

package/dist/components/Menu/components/MenuInner/index.d.ts

@@ -1 +0,0 @@
-export * from './MenuInner';

package/dist/components/Menu/components/MenuSection/MenuSection.module.css.js

@@ -1,11 +0,0 @@
-const base = "kbq-menusection-6a5530";
-const heading = "kbq-menusection-heading-2be1f1";
-const s = {
-  base,
-  heading
-};
-export {
-  base,
-  s as default,
-  heading
-};