@koobiq/react-components 0.21.0 → 0.22.0

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,9 @@
+import { AccordionDetails, AccordionSummary } from './components';
+import type { AccordionProps } from './types';
+export declare const AccordionComponent: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof AccordionComponent & {
+    Summary: typeof AccordionSummary;
+    Details: typeof AccordionDetails;
+};
+export declare const Accordion: CompoundedComponent;
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef } from "react";
+import { useId, clsx } from "@koobiq/react-core";
+import { useDisclosureState, useDisclosure, Provider } from "@koobiq/react-primitives";
+import { utilClasses } from "../../styles/utility.js";
+import s from "./Accordion.module.css.js";
+import { AccordionSummary } from "./components/AccordionSummary/AccordionSummary.js";
+import { AccordionDetails } from "./components/AccordionDetails/AccordionDetails.js";
+import { AccordionGroupStateContext } from "./components/AccordionGroup/AccordionGroupContext.js";
+import { AccordionStateContext } from "./AccordionStateContext.js";
+import { AccordionSummaryContext } from "./components/AccordionSummary/AccordionSummaryContext.js";
+import { AccordionDetailsContext } from "./components/AccordionDetails/AccordionDetailsContext.js";
+const textNormal = utilClasses.typography["text-normal"];
+const AccordionComponent = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      id: idProp,
+      defaultExpanded,
+      onExpandedChange,
+      isDisabled: isDisabledProp,
+      isExpanded: isExpandedProp,
+      ...other
+    } = props;
+    const commonProps = {
+      children,
+      onExpandedChange,
+      defaultExpanded,
+      isDisabled: isDisabledProp,
+      isExpanded: isExpandedProp
+    };
+    const defaultId = useId();
+    const id = idProp || defaultId;
+    const groupState = useContext(AccordionGroupStateContext);
+    const isExpanded = groupState ? groupState.expandedKeys?.has(id) : isExpandedProp;
+    const state = useDisclosureState({
+      ...commonProps,
+      isExpanded,
+      onExpandedChange(isExpanded2) {
+        if (groupState) {
+          groupState.toggleKey(id);
+        }
+        props.onExpandedChange?.(isExpanded2);
+      }
+    });
+    const panelRef = useRef(null);
+    const triggerRef = useRef(null);
+    const isDisabled = isDisabledProp || groupState?.isDisabled || false;
+    const { buttonProps: triggerProps, panelProps } = useDisclosure(
+      {
+        ...commonProps,
+        isExpanded,
+        isDisabled
+      },
+      state,
+      panelRef
+    );
+    return /* @__PURE__ */ jsx(
+      Provider,
+      {
+        values: [
+          [AccordionStateContext, state],
+          [AccordionSummaryContext, { ...triggerProps, ref: triggerRef }],
+          [AccordionDetailsContext, { ...panelProps, ref: panelRef }]
+        ],
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(s.base, textNormal, className),
+            id: idProp,
+            ...other,
+            ref,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+AccordionComponent.displayName = "Accordion";
+const Accordion = AccordionComponent;
+Accordion.Summary = AccordionSummary;
+Accordion.Details = AccordionDetails;
+export {
+  Accordion,
+  AccordionComponent
+};

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

@@ -0,0 +1,8 @@
+const base = "kbq-accordion-3163a3";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Accordion/AccordionStateContext.d.ts

@@ -0,0 +1,2 @@
+import type { DisclosureState } from '@koobiq/react-primitives';
+export declare const AccordionStateContext: import("react").Context<DisclosureState>;

package/dist/components/Accordion/AccordionStateContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+const AccordionStateContext = createContext(
+  {}
+);
+export {
+  AccordionStateContext
+};

package/dist/components/Accordion/components/AccordionDetails/AccordionDetails.d.ts

@@ -0,0 +1,2 @@
+import type { AccordionDetailsProps } from './index';
+export declare const AccordionDetails: import("react").ForwardRefExoticComponent<Omit<AccordionDetailsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/components/AccordionDetails/AccordionDetails.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useContext, useEffect } from "react";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useContextProps } from "@koobiq/react-primitives";
+import { Transition } from "react-transition-group";
+import s from "./AccordionDetails.module.css.js";
+import { AccordionDetailsContext } from "./AccordionDetailsContext.js";
+import { AccordionStateContext } from "../../AccordionStateContext.js";
+const TRANSITION_TIMEOUT = 300;
+const AccordionDetails = forwardRef((props, ref) => {
+  const { children, className, style, slotProps, unmountOnExit, ...other } = props;
+  const domRef = useDOMRef(ref);
+  const innerRef = useRef(null);
+  const [panelProps] = useContextProps({}, domRef, AccordionDetailsContext);
+  const { isExpanded } = useContext(AccordionStateContext);
+  useEffect(() => {
+    if (!isExpanded) domRef?.current?.setAttribute("hidden", "until-found");
+  }, []);
+  const transitionProps = mergeProps(
+    {
+      timeout: TRANSITION_TIMEOUT,
+      onEnter: () => {
+        domRef?.current?.removeAttribute("hidden");
+      },
+      onExited: () => {
+        domRef?.current?.setAttribute("hidden", "until-found");
+      },
+      in: isExpanded,
+      nodeRef: domRef,
+      unmountOnExit
+    },
+    slotProps?.transition
+  );
+  return /* @__PURE__ */ jsx(Transition, { ...transitionProps, children: (transition) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: domRef,
+      ...panelProps,
+      "data-transition": transition,
+      className: clsx(s.base, className),
+      style: {
+        "--accordion-details-block-size": `${innerRef.current?.clientHeight}px`,
+        "--accordion-details-duration": `${TRANSITION_TIMEOUT}ms`,
+        ...style
+      },
+      ...other,
+      children: /* @__PURE__ */ jsx("p", { ref: innerRef, children })
+    }
+  ) });
+});
+AccordionDetails.displayName = "AccordionDetails";
+export {
+  AccordionDetails
+};

package/dist/components/Accordion/components/AccordionDetails/AccordionDetails.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-accordiondetails-639d82";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Accordion/components/AccordionDetails/AccordionDetailsContext.d.ts

@@ -0,0 +1,2 @@
+import type { ContextValue } from '@koobiq/react-primitives';
+export declare const AccordionDetailsContext: import("react").Context<ContextValue<import("react").HTMLAttributes<HTMLElement>, HTMLDivElement>>;

package/dist/components/Accordion/components/AccordionDetails/AccordionDetailsContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+const AccordionDetailsContext = createContext(
+  null
+);
+export {
+  AccordionDetailsContext
+};

package/dist/components/Accordion/components/AccordionDetails/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AccordionDetails';
+export * from './AccordionDetailsContext';
+export * from './types';

package/dist/components/Accordion/components/AccordionDetails/types.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TransitionProps } from 'react-transition-group/Transition';
+export type AccordionDetailsRef = ComponentRef<'div'>;
+export type AccordionDetailsProps = ExtendableComponentPropsWithRef<{
+    /** The content of the component. */
+    children?: ReactNode;
+    /** If `true`, unmounts the content when collapsed. */
+    unmountOnExit?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        transition?: Partial<TransitionProps<HTMLElement>>;
+    };
+}, 'div'>;

package/dist/components/Accordion/components/AccordionGroup/AccordionGroup.d.ts

@@ -0,0 +1,2 @@
+import type { AccordionGroupProps } from './index';
+export declare const AccordionGroup: import("react").ForwardRefExoticComponent<Omit<AccordionGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/components/AccordionGroup/AccordionGroup.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import { useDisclosureGroupState } from "@koobiq/react-primitives";
+import s from "./AccordionGroup.module.css.js";
+import { AccordionGroupStateContext } from "./AccordionGroupContext.js";
+const AccordionGroup = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    isDisabled,
+    expandedKeys,
+    onExpandedChange,
+    defaultExpandedKeys,
+    allowsMultipleExpanded,
+    ...other
+  } = props;
+  const state = useDisclosureGroupState({
+    isDisabled,
+    expandedKeys,
+    onExpandedChange,
+    defaultExpandedKeys,
+    allowsMultipleExpanded
+  });
+  return /* @__PURE__ */ jsx("div", { className: clsx(s.base, className), ...other, ref, children: /* @__PURE__ */ jsx(AccordionGroupStateContext.Provider, { value: state, children }) });
+});
+AccordionGroup.displayName = "AccordionGroup";
+export {
+  AccordionGroup
+};

package/dist/components/Accordion/components/AccordionGroup/AccordionGroup.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-accordiongroup-35d80f";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Accordion/components/AccordionGroup/AccordionGroupContext.d.ts

@@ -0,0 +1,2 @@
+import type { DisclosureGroupState } from '@koobiq/react-primitives';
+export declare const AccordionGroupStateContext: import("react").Context<DisclosureGroupState | null>;

package/dist/components/Accordion/components/AccordionGroup/AccordionGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const AccordionGroupStateContext = createContext(null);
+export {
+  AccordionGroupStateContext
+};

package/dist/components/Accordion/components/AccordionGroup/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AccordionGroup';
+export * from './AccordionGroupContext';
+export * from './types';

package/dist/components/Accordion/components/AccordionGroup/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { DisclosureGroupProps as AriaDisclosureGroupProps } from '@koobiq/react-primitives';
+export type AccordionGroupProps = ExtendableComponentPropsWithRef<AriaDisclosureGroupProps & {
+    children?: ReactNode;
+}, 'div'>;
+export type AccordionGroupRef = ComponentRef<'div'>;

package/dist/components/Accordion/components/AccordionSummary/AccordionSummary.d.ts

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

package/dist/components/Accordion/components/AccordionSummary/AccordionSummary.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { polymorphicForwardRef, mergeProps, clsx } from "@koobiq/react-core";
+import { IconChevronRight16 } from "@koobiq/react-icons";
+import { useContextProps, Button } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { AccordionStateContext } from "../../AccordionStateContext.js";
+import s from "./AccordionSummary.module.css.js";
+import { AccordionSummaryContext } from "./AccordionSummaryContext.js";
+import { AnimatedIcon } from "../../../AnimatedIcon/AnimatedIcon.js";
+const textBig = utilClasses.typography["text-big"];
+const AccordionSummary = polymorphicForwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    as: Tag = "h3",
+    expandIcon: expandIconProp,
+    expandIconPlacement = "before-content",
+    hideExpandIcon,
+    slotProps,
+    ...other
+  } = props;
+  const { isExpanded } = useContext(AccordionStateContext);
+  const [triggerPropsAria, triggerRef] = useContextProps(
+    { children },
+    void 0,
+    AccordionSummaryContext
+  );
+  const expandIconProps = mergeProps(
+    {
+      className: s.expandIcon,
+      "data-expanded": isExpanded || void 0,
+      "aria-hidden": "true"
+    },
+    slotProps?.expandIcon
+  );
+  const triggerProps = mergeProps(
+    triggerPropsAria,
+    {
+      "data-slot": "trigger",
+      className: ({ isHovered, isDisabled }) => clsx(
+        s.trigger,
+        isHovered && s.hovered,
+        isDisabled && s.disabled,
+        s[expandIconPlacement]
+      ),
+      ref: triggerRef
+    },
+    slotProps?.trigger
+  );
+  const expandIconDefault = /* @__PURE__ */ jsx(
+    AnimatedIcon,
+    {
+      icons: [/* @__PURE__ */ jsx(IconChevronRight16, {}, "expand-icon")],
+      directions: [0, 90],
+      activeIndex: +isExpanded
+    }
+  );
+  const expandIcon = hideExpandIcon ? null : /* @__PURE__ */ jsx("span", { ...expandIconProps, children: expandIconProp?.(isExpanded) ?? expandIconDefault });
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: clsx(s.base, textBig, className),
+      "data-expanded": isExpanded || void 0,
+      "data-expand-icon-placement": expandIconPlacement,
+      ...other,
+      ref,
+      children: /* @__PURE__ */ jsxs(Button, { ...triggerProps, children: [
+        expandIconPlacement === "before-content" && expandIcon,
+        triggerProps?.children,
+        expandIconPlacement !== "before-content" && expandIcon
+      ] })
+    }
+  );
+});
+AccordionSummary.displayName = "AccordionSummary";
+export {
+  AccordionSummary
+};

package/dist/components/Accordion/components/AccordionSummary/AccordionSummary.module.css.js

@@ -0,0 +1,24 @@
+const base = "kbq-accordionsummary-17bfb5";
+const trigger = "kbq-accordionsummary-trigger-8096e7";
+const hovered = "kbq-accordionsummary-hovered-3a99cb";
+const disabled = "kbq-accordionsummary-disabled-5a76af";
+const separately = "kbq-accordionsummary-separately-f6c597";
+const expandIcon = "kbq-accordionsummary-expandIcon-54a6fc";
+const s = {
+  base,
+  trigger,
+  hovered,
+  disabled,
+  "after-content": "kbq-accordionsummary-after-content-58ad40",
+  separately,
+  expandIcon
+};
+export {
+  base,
+  s as default,
+  disabled,
+  expandIcon,
+  hovered,
+  separately,
+  trigger
+};

package/dist/components/Accordion/components/AccordionSummary/AccordionSummaryContext.d.ts

@@ -0,0 +1,2 @@
+import type { ContextValue } from '@koobiq/react-primitives';
+export declare const AccordionSummaryContext: import("react").Context<ContextValue<import("@react-types/button").AriaButtonProps<"button">, HTMLButtonElement>>;

package/dist/components/Accordion/components/AccordionSummary/AccordionSummaryContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+const AccordionSummaryContext = createContext(
+  null
+);
+export {
+  AccordionSummaryContext
+};

package/dist/components/Accordion/components/AccordionSummary/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AccordionSummary';
+export * from './AccordionSummaryContext';
+export * from './types';

package/dist/components/Accordion/components/AccordionSummary/types.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentRef, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
+import type { ButtonProps } from '@koobiq/react-primitives';
+export type AccordionSummaryRef = ComponentRef<'h3'>;
+export declare const accordionSummaryPropExpandIconPlacement: readonly ["before-content", "after-content", "separately"];
+export type AccordionSummaryPropExpandIconPlacement = (typeof accordionSummaryPropExpandIconPlacement)[number];
+export type AccordionSummaryProps = {
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Renders a custom expand icon. Receives the current expanded state. */
+    expandIcon?: (isExpanded: boolean) => ReactElement;
+    /**
+     * Controls where the expand icon is placed relative to the content.
+     * @default 'before-content'
+     */
+    expandIconPlacement?: AccordionSummaryPropExpandIconPlacement;
+    /** If `true`, hides the expand icon. */
+    hideExpandIcon?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        trigger?: Omit<ButtonProps, 'children'>;
+        expandIcon?: ComponentPropsWithRef<'span'>;
+    };
+};

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

@@ -0,0 +1,3 @@
+export * from './AccordionSummary';
+export * from './AccordionDetails';
+export * from './AccordionGroup';

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

@@ -0,0 +1,4 @@
+export * from './Accordion';
+export * from './components/AccordionGroup';
+export * from './AccordionStateContext';
+export * from './types';

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

@@ -0,0 +1,8 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { AriaDisclosureProps } from '@koobiq/react-primitives';
+export type AccordionProps = ExtendableComponentPropsWithRef<AriaDisclosureProps & {
+    /** The content of the component. */
+    children?: ReactNode;
+}, 'div'>;
+export type AccordionRef = ComponentRef<'div'>;

package/dist/components/Dialog/Dialog.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect } from "react";
 import { useBoolean, useDOMRef, mergeProps, clsx, useElementSize, useEventListener } from "@koobiq/react-core";
-import { useDialog, Provider, ButtonContext } from "@koobiq/react-primitives";
+import { useDialog, Provider, ButtonContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
 import { utilClasses } from "../../styles/utility.js";
 import s from "./Dialog.module.css.js";
 import { DialogBodyContext, DialogBody } from "./components/DialogBody.js";
@@ -56,6 +56,7 @@ const DialogComponent = forwardRef(
             ButtonContext,
             {
               slots: {
+                [DEFAULT_SLOT]: {},
                 close: {
                   onPress: onClose
                 }

package/dist/components/index.d.ts

@@ -42,6 +42,7 @@ export * from './Tabs';
 export * from './Autocomplete';
 export * from './ToastProvider';
 export * from './Breadcrumbs';
+export * from './Accordion';
 export * from './layout';
 export { useListData, useAsyncList, type ListData, type ListOptions, type AsyncListData, type AsyncListOptions, type AsyncListLoadFunction, type AsyncListLoadOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, useFilter, type Locale, type SortDescriptor, type Selection, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -104,9 +104,18 @@ import { toastPlacement, toastPropStatus, toastStackDirection } from "./componen
 import { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs.js";
 import { breadcrumbsPropOverflowMode, breadcrumbsPropSize } from "./components/Breadcrumbs/types.js";
 import { BreadcrumbItem } from "./components/Breadcrumbs/components/BreadcrumbItem/BreadcrumbItem.js";
+import { Accordion, AccordionComponent } from "./components/Accordion/Accordion.js";
+import { AccordionGroup } from "./components/Accordion/components/AccordionGroup/AccordionGroup.js";
+import { AccordionGroupStateContext } from "./components/Accordion/components/AccordionGroup/AccordionGroupContext.js";
+import { AccordionStateContext } from "./components/Accordion/AccordionStateContext.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
+  Accordion,
+  AccordionComponent,
+  AccordionGroup,
+  AccordionGroupStateContext,
+  AccordionStateContext,
   Alert,
   AnimatedIcon,
   Autocomplete,

package/dist/style.css

@@ -5083,6 +5083,104 @@
   letter-spacing: var(--kbq-typography-subheading-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-subheading-line-height)  - var(--kbq-typography-subheading-font-size)) / 2);
 }
+.kbq-accordion-3163a3 {
+  --accordion-outline-width: var(--kbq-size-3xs);
+  --accordion-outline-color: transparent;
+  transition: outline-color var(--kbq-transition-default);
+  outline-offset: calc(-1 * var(--accordion-outline-width));
+  outline: var(--accordion-outline-width) solid var(--accordion-outline-color);
+  flex-direction: column;
+  display: flex;
+}
+
+.kbq-accordion-3163a3:has([data-slot="trigger"][data-focus-visible="true"]) {
+  --accordion-outline-color: var(--kbq-states-line-focus-theme);
+}
+.kbq-accordionsummary-17bfb5 {
+  --accordion-summary-block-size: 36px;
+  --accordion-summary-color: var(--kbq-foreground-contrast);
+  --accordion-summary-expand-icon-color: var(--kbq-icon-contrast-fade);
+  margin: unset;
+  min-block-size: var(--accordion-summary-block-size);
+}
+
+.kbq-accordionsummary-17bfb5 > * {
+  cursor: pointer;
+}
+
+.kbq-accordionsummary-17bfb5:has(:disabled) > * {
+  cursor: not-allowed;
+}
+
+.kbq-accordionsummary-trigger-8096e7 {
+  inline-size: 100%;
+  font: inherit;
+  text-align: start;
+  gap: var(--kbq-size-xxs);
+  padding: var(--kbq-size-s);
+  color: var(--accordion-summary-color);
+  background: none;
+  border: none;
+  outline: none;
+  display: flex;
+}
+
+.kbq-accordionsummary-hovered-3a99cb {
+  --accordion-summary-expand-icon-color: var(--kbq-icon-contrast);
+}
+
+.kbq-accordionsummary-disabled-5a76af {
+  --accordion-summary-color: var(--kbq-foreground-contrast-secondary);
+  --accordion-summary-expand-icon-color: var(--kbq-states-icon-disabled);
+}
+
+.kbq-accordionsummary-after-content-58ad40, .kbq-accordionsummary-separately-f6c597 {
+  padding: var(--kbq-size-s) var(--kbq-size-m);
+}
+
+.kbq-accordionsummary-separately-f6c597 .kbq-accordionsummary-expandIcon-54a6fc {
+  margin-inline-start: auto;
+}
+
+.kbq-accordionsummary-expandIcon-54a6fc {
+  block-size: var(--kbq-size-xxl);
+  inline-size: var(--kbq-size-xxl);
+  color: var(--accordion-summary-expand-icon-color);
+  transition: color var(--kbq-transition-default);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.kbq-accordiondetails-639d82 {
+  --accordion-details-duration: .3s;
+  --accordion-details-block-size: 0;
+  --accordion-details-padding: 0 var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);
+  opacity: 1;
+  will-change: block-size;
+  transition: block-size var(--kbq-transition-slow), opacity var(--kbq-transition-slow);
+  transition-duration: var(--accordion-details-duration);
+  overflow: hidden;
+}
+
+.kbq-accordiondetails-639d82 > * {
+  padding: var(--accordion-details-padding);
+  margin: unset;
+}
+
+.kbq-accordiondetails-639d82[data-transition="entering"], .kbq-accordiondetails-639d82[data-transition="entered"] {
+  opacity: 1;
+  block-size: var(--accordion-details-block-size);
+}
+
+.kbq-accordiondetails-639d82[data-transition="exiting"], .kbq-accordiondetails-639d82[data-transition="exited"] {
+  opacity: 0;
+  block-size: 0;
+}
+.kbq-accordiongroup-35d80f {
+  flex-direction: column;
+  display: flex;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

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