@c15t/react 0.0.1-rc.3

package/dist/theme/use-style.cjs

@@ -0,0 +1,95 @@
+'use client';
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useStyles: ()=>useStyles
+});
+const external_react_namespaceObject = require("react");
+const external_context_cjs_namespaceObject = require("./context.cjs");
+const merge_styles_cjs_namespaceObject = require("./utils/merge-styles.cjs");
+function useStyles(themeKey, componentStyle) {
+    const { noStyle: contextNoStyle, theme } = (0, external_context_cjs_namespaceObject.useThemeContext)();
+    const mergedNoStyle = 'object' == typeof componentStyle && 'noStyle' in componentStyle ? componentStyle.noStyle : contextNoStyle;
+    const themeStylesObject = (0, external_react_namespaceObject.useMemo)(()=>themeKey ? theme?.[themeKey] : null, [
+        themeKey,
+        theme
+    ]);
+    const initialStyle = (0, external_react_namespaceObject.useMemo)(()=>{
+        const initial = {
+            className: 'string' == typeof componentStyle ? componentStyle : componentStyle?.className,
+            style: void 0
+        };
+        return initial;
+    }, [
+        componentStyle
+    ]);
+    const mergedWithContext = (0, external_react_namespaceObject.useMemo)(()=>{
+        const merged = themeStylesObject ? (0, merge_styles_cjs_namespaceObject.mergeStyles)(initialStyle, themeStylesObject) : initialStyle;
+        return merged;
+    }, [
+        initialStyle,
+        themeStylesObject
+    ]);
+    const finalMergedStyle = (0, external_react_namespaceObject.useMemo)(()=>{
+        const final = componentStyle ? (0, merge_styles_cjs_namespaceObject.mergeStyles)(mergedWithContext, componentStyle) : mergedWithContext;
+        return final;
+    }, [
+        mergedWithContext,
+        componentStyle
+    ]);
+    return (0, external_react_namespaceObject.useMemo)(()=>{
+        if (mergedNoStyle) {
+            if (!themeStylesObject) return {};
+            const noStyleResult = 'string' == typeof themeStylesObject ? {
+                className: themeStylesObject
+            } : {
+                className: themeStylesObject.className,
+                style: themeStylesObject.style
+            };
+            return noStyleResult;
+        }
+        const finalClassName = Array.from(new Set([
+            'string' == typeof componentStyle ? componentStyle : componentStyle?.className,
+            finalMergedStyle.className
+        ].filter(Boolean).flat())).join(' ');
+        return {
+            ...finalMergedStyle,
+            className: finalClassName
+        };
+    }, [
+        finalMergedStyle,
+        mergedNoStyle,
+        themeStylesObject,
+        componentStyle
+    ]);
+}
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});

package/dist/theme/use-style.d.ts

@@ -0,0 +1,32 @@
+import type { AllThemeKeys } from './types/style-keys';
+import type { ClassNameStyle, ThemeValue } from './types/style-types';
+/**
+ * Hook for retrieving and merging styles from theme context and component props.
+ *
+ * @remarks
+ * This hook manages the style resolution process by:
+ * - Retrieving styles from theme context
+ * - Merging with component-level styles
+ * - Handling style disabling through noStyle flags
+ * - Memoizing results for performance
+ *
+ * @param themeKey - The theme key to lookup styles
+ * @param componentStyle - Optional component-level styles to merge
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const styles = useStyles('cookie-banner.root', {
+ *     className: 'custom-class',
+ *     style: { backgroundColor: 'white' }
+ *   });
+ *
+ *   return <div {...styles} />;
+ * };
+ * ```
+ *
+ * @returns An object containing merged className and style properties
+ * @public
+ */
+export declare function useStyles(themeKey: AllThemeKeys, componentStyle?: ThemeValue): ClassNameStyle;
+//# sourceMappingURL=use-style.d.ts.map

package/dist/theme/use-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-style.d.ts","sourceRoot":"","sources":["../../src/theme/use-style.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,wBAAgB,SAAS,CACxB,QAAQ,EAAE,YAAY,EACtB,cAAc,CAAC,EAAE,UAAU,GACzB,cAAc,CA4EhB"}

package/dist/theme/use-style.js

@@ -0,0 +1,61 @@
+'use client';
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__context_js_80e2871f__ from "./context.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_merge_styles_js_2f2d47eb__ from "./utils/merge-styles.js";
+function useStyles(themeKey, componentStyle) {
+    const { noStyle: contextNoStyle, theme } = (0, __WEBPACK_EXTERNAL_MODULE__context_js_80e2871f__.useThemeContext)();
+    const mergedNoStyle = 'object' == typeof componentStyle && 'noStyle' in componentStyle ? componentStyle.noStyle : contextNoStyle;
+    const themeStylesObject = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>themeKey ? theme?.[themeKey] : null, [
+        themeKey,
+        theme
+    ]);
+    const initialStyle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const initial = {
+            className: 'string' == typeof componentStyle ? componentStyle : componentStyle?.className,
+            style: void 0
+        };
+        return initial;
+    }, [
+        componentStyle
+    ]);
+    const mergedWithContext = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const merged = themeStylesObject ? (0, __WEBPACK_EXTERNAL_MODULE__utils_merge_styles_js_2f2d47eb__.mergeStyles)(initialStyle, themeStylesObject) : initialStyle;
+        return merged;
+    }, [
+        initialStyle,
+        themeStylesObject
+    ]);
+    const finalMergedStyle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const final = componentStyle ? (0, __WEBPACK_EXTERNAL_MODULE__utils_merge_styles_js_2f2d47eb__.mergeStyles)(mergedWithContext, componentStyle) : mergedWithContext;
+        return final;
+    }, [
+        mergedWithContext,
+        componentStyle
+    ]);
+    return (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (mergedNoStyle) {
+            if (!themeStylesObject) return {};
+            const noStyleResult = 'string' == typeof themeStylesObject ? {
+                className: themeStylesObject
+            } : {
+                className: themeStylesObject.className,
+                style: themeStylesObject.style
+            };
+            return noStyleResult;
+        }
+        const finalClassName = Array.from(new Set([
+            'string' == typeof componentStyle ? componentStyle : componentStyle?.className,
+            finalMergedStyle.className
+        ].filter(Boolean).flat())).join(' ');
+        return {
+            ...finalMergedStyle,
+            className: finalClassName
+        };
+    }, [
+        finalMergedStyle,
+        mergedNoStyle,
+        themeStylesObject,
+        componentStyle
+    ]);
+}
+export { useStyles };

package/dist/theme/utils/merge-styles.cjs

@@ -0,0 +1,62 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    mergeStyles: ()=>mergeStyles
+});
+const cn_cjs_namespaceObject = require("../../ui/libs/cn.cjs");
+function mergeStyles(style1, style2) {
+    const getThemeValue = (style)=>{
+        if ('string' == typeof style || void 0 === style) return style;
+        if ('className' in style || 'style' in style || 'noStyle' in style) return style;
+    };
+    const s1 = getThemeValue(Array.isArray(style1) ? style1[0] : style1);
+    const s2 = getThemeValue(style2);
+    if ('object' == typeof s1 && s1?.noStyle || 'object' == typeof s2 && s2?.noStyle) return {
+        className: void 0,
+        style: void 0
+    };
+    const className = (0, cn_cjs_namespaceObject.cnExt)([
+        'string' == typeof s1 ? s1 : s1?.className,
+        'string' == typeof s2 ? s2 : s2?.className,
+        'object' == typeof s1 && s1?.baseClassName,
+        'object' == typeof s2 && s2?.baseClassName
+    ]);
+    const style = {
+        ...'object' == typeof s1 && s1?.style,
+        ...'object' == typeof s2 && s2?.style
+    };
+    return {
+        className: className || void 0,
+        style: Object.keys(style).length > 0 ? style : void 0
+    };
+}
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});

package/dist/theme/utils/merge-styles.d.ts

@@ -0,0 +1,3 @@
+import type { ClassNameStyle, ThemeValue } from '..';
+export declare function mergeStyles(style1: ThemeValue, style2?: ThemeValue): ClassNameStyle;
+//# sourceMappingURL=merge-styles.d.ts.map

package/dist/theme/utils/merge-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-styles.d.ts","sourceRoot":"","sources":["../../../src/theme/utils/merge-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAGrD,wBAAgB,WAAW,CAC1B,MAAM,EAAE,UAAU,EAClB,MAAM,CAAC,EAAE,UAAU,GACjB,cAAc,CA2ChB"}

package/dist/theme/utils/merge-styles.js

@@ -0,0 +1,28 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ui_libs_cn_js_c64d687d__ from "../../ui/libs/cn.js";
+function mergeStyles(style1, style2) {
+    const getThemeValue = (style)=>{
+        if ('string' == typeof style || void 0 === style) return style;
+        if ('className' in style || 'style' in style || 'noStyle' in style) return style;
+    };
+    const s1 = getThemeValue(Array.isArray(style1) ? style1[0] : style1);
+    const s2 = getThemeValue(style2);
+    if ('object' == typeof s1 && s1?.noStyle || 'object' == typeof s2 && s2?.noStyle) return {
+        className: void 0,
+        style: void 0
+    };
+    const className = (0, __WEBPACK_EXTERNAL_MODULE__ui_libs_cn_js_c64d687d__.cnExt)([
+        'string' == typeof s1 ? s1 : s1?.className,
+        'string' == typeof s2 ? s2 : s2?.className,
+        'object' == typeof s1 && s1?.baseClassName,
+        'object' == typeof s2 && s2?.baseClassName
+    ]);
+    const style = {
+        ...'object' == typeof s1 && s1?.style,
+        ...'object' == typeof s2 && s2?.style
+    };
+    return {
+        className: className || void 0,
+        style: Object.keys(style).length > 0 ? style : void 0
+    };
+}
+export { mergeStyles };

package/dist/ui/components/accordion.cjs

@@ -0,0 +1,204 @@
+'use client';
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Root: ()=>AccordionRoot,
+    Header: ()=>AccordionHeader,
+    Arrow: ()=>AccordionArrow,
+    Content: ()=>AccordionContent,
+    Icon: ()=>AccordionIcon,
+    Item: ()=>AccordionItem,
+    Trigger: ()=>AccordionTrigger
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("./accordion.css");
+const react_accordion_namespaceObject = require("@radix-ui/react-accordion");
+const external_react_namespaceObject = require("react");
+const box_cjs_namespaceObject = require("../../primitives/box.cjs");
+const index_cjs_namespaceObject = require("../../theme/index.cjs");
+const external_icon_cjs_namespaceObject = require("./icon.cjs");
+const ACCORDION_ROOT_NAME = 'AccordionRoot';
+const ACCORDION_ITEM_NAME = 'AccordionItem';
+const ACCORDION_ICON_NAME = 'AccordionIcon';
+const ACCORDION_ARROW_NAME = 'AccordionArrow';
+const ACCORDION_TRIGGER_NAME = 'AccordionTrigger';
+const ACCORDION_CONTENT_NAME = 'AccordionContent';
+const AccordionHeader = react_accordion_namespaceObject.Header;
+const AccordionRoot = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ className, themeKey = 'accordion.root', baseClassName, noStyle, style, ...rest }, forwardedRef)=>{
+    const { noStyle: contextNoStyle } = (0, index_cjs_namespaceObject.useThemeContext)();
+    const accordionStyle = (0, index_cjs_namespaceObject.useStyles)(themeKey, {
+        baseClassName: [
+            baseClassName,
+            'c15t-accordion'
+        ],
+        className,
+        noStyle: contextNoStyle || noStyle,
+        style
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_accordion_namespaceObject.Root, {
+        ref: forwardedRef,
+        ...rest,
+        ...accordionStyle
+    });
+});
+AccordionRoot.displayName = ACCORDION_ROOT_NAME;
+const AccordionItem = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ className, themeKey, baseClassName, noStyle, style, ...rest }, forwardedRef)=>{
+    const { noStyle: contextNoStyle } = (0, index_cjs_namespaceObject.useThemeContext)();
+    const accordionItemStyle = (0, index_cjs_namespaceObject.useStyles)(themeKey ?? 'accordion.item', {
+        baseClassName: [
+            baseClassName,
+            'c15t-accordion-item'
+        ],
+        className,
+        noStyle: contextNoStyle || noStyle,
+        style
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_accordion_namespaceObject.Item, {
+        ref: forwardedRef,
+        ...rest,
+        ...accordionItemStyle
+    });
+});
+AccordionItem.displayName = ACCORDION_ITEM_NAME;
+const AccordionTrigger = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ children, className, themeKey, baseClassName, noStyle, style, ...rest }, forwardedRef)=>{
+    const { noStyle: contextNoStyle } = (0, index_cjs_namespaceObject.useThemeContext)();
+    const accordionTriggerStyle = (0, index_cjs_namespaceObject.useStyles)(themeKey ?? 'accordion.trigger-inner', {
+        baseClassName: [
+            baseClassName,
+            'c15t-accordion-trigger-inner'
+        ],
+        className,
+        noStyle: contextNoStyle || noStyle,
+        style
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_accordion_namespaceObject.Trigger, {
+        ref: forwardedRef,
+        ...rest,
+        ...accordionTriggerStyle,
+        children: children
+    });
+});
+AccordionTrigger.displayName = ACCORDION_TRIGGER_NAME;
+function AccordionIcon({ className, themeKey, baseClassName, noStyle, style, as, ...rest }) {
+    const accordionIconStyle = (0, index_cjs_namespaceObject.useStyles)(themeKey ?? 'accordion.icon', {
+        baseClassName: [
+            baseClassName,
+            'c15t-accordion-icon'
+        ],
+        className,
+        noStyle,
+        style
+    });
+    const Component = as || 'div';
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {
+        ...rest,
+        ...accordionIconStyle
+    });
+}
+AccordionIcon.displayName = ACCORDION_ICON_NAME;
+function AccordionArrow({ openIcon = {
+    Element: (0, external_icon_cjs_namespaceObject.LucideIcon)({
+        title: 'Open',
+        iconPath: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+            d: "M5 12h14M12 5v14"
+        })
+    }),
+    themeKey: 'accordion.arrow.open'
+}, closeIcon = {
+    Element: (0, external_icon_cjs_namespaceObject.LucideIcon)({
+        title: 'Close',
+        iconPath: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+            d: "M5 12h14"
+        })
+    }),
+    themeKey: 'accordion.arrow.close'
+}, ...rest }) {
+    const accordionArrowOpenStyle = (0, index_cjs_namespaceObject.useStyles)(openIcon.themeKey, {
+        baseClassName: [
+            openIcon.baseClassName,
+            'c15t-accordion-arrow-open'
+        ],
+        className: openIcon.className,
+        noStyle: openIcon.noStyle,
+        style: openIcon.style
+    });
+    const accordionArrowClosedStyle = (0, index_cjs_namespaceObject.useStyles)(closeIcon.themeKey, {
+        baseClassName: [
+            closeIcon.baseClassName,
+            'c15t-accordion-arrow-close'
+        ],
+        className: closeIcon.className,
+        noStyle: closeIcon.noStyle,
+        style: closeIcon.style
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(openIcon.Element, {
+                ...rest,
+                ...accordionArrowOpenStyle
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(closeIcon.Element, {
+                ...rest,
+                ...accordionArrowClosedStyle
+            })
+        ]
+    });
+}
+AccordionArrow.displayName = ACCORDION_ARROW_NAME;
+const AccordionContent = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ children, className, theme, ...rest }, forwardedRef)=>{
+    const { noStyle: contextNoStyle } = (0, index_cjs_namespaceObject.useThemeContext)();
+    const accordionContentStyle = (0, index_cjs_namespaceObject.useStyles)(theme?.content?.themeKey ?? 'accordion.content', {
+        baseClassName: [
+            theme?.content?.baseClassName,
+            'c15t-accordion-content'
+        ],
+        className,
+        noStyle: theme?.content?.noStyle || contextNoStyle,
+        style: theme?.content?.style
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_accordion_namespaceObject.Content, {
+        ref: forwardedRef,
+        ...rest,
+        ...accordionContentStyle,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(box_cjs_namespaceObject.Box, {
+            ...theme?.contentInner,
+            baseClassName: [
+                theme?.content?.baseClassName,
+                'c15t-accordion-content-inner'
+            ],
+            themeKey: theme?.contentInner?.themeKey ?? 'accordion.content-inner',
+            children: children
+        })
+    });
+});
+AccordionContent.displayName = ACCORDION_CONTENT_NAME;
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});

package/dist/ui/components/accordion.css

@@ -0,0 +1,158 @@
+.c15t-accordion {
+  --c15t-accordion-padding: .875rem;
+  --c15t-accordion-radius: .625rem;
+  --c15t-accordion-duration: .2s;
+  --c15t-accordion-ease: cubic-bezier(.4, 0, .2, 1);
+  --c15t-accordion-icon-size: 1.25rem;
+  --c15t-accordion-bg-default: #fff;
+  --c15t-accordion-bg-hover: #f7f7f7;
+  --c15t-accordion-border-color: #ebebeb;
+  --c15t-accordion-text-color: #171717;
+  --c15t-accordion-icon-color: #5c5c5c;
+  --c15t-accordion-arrow-color: #a3a3a3;
+  --c15t-accordion-content-color: #5c5c5c;
+  --c15t-accordion-focus-ring: #476cff;
+
+  & > :not([hidden]) ~ :not([hidden]) {
+    --c15t-space-y-reverse: 0;
+    margin-top: calc(1rem  * calc(1 - var(--c15t-space-y-reverse)));
+    margin-bottom: calc(1rem  * var(--c15t-space-y-reverse));
+  }
+}
+
+.dark .c15t-accordion {
+  --c15t-accordion-bg-default: #171717;
+  --c15t-accordion-bg-hover: #1c1c1c;
+  --c15t-accordion-border-color: #333;
+  --c15t-accordion-text-color: #e6e6e6;
+  --c15t-accordion-icon-color: #999;
+  --c15t-accordion-arrow-color: #ccc;
+  --c15t-accordion-content-color: #999;
+  --c15t-accordion-focus-ring: #99aeff;
+}
+
+.c15t-accordion-item {
+  padding: var(--c15t-accordion-padding);
+  background-color: var(--c15t-accordion-bg-default);
+  box-shadow: inset 0 0 0 1px var(--c15t-accordion-border-color);
+  transition: all var(--c15t-accordion-duration) var(--c15t-accordion-ease);
+  border-radius: var(--c15t-accordion-radius);
+  position: relative;
+}
+
+.c15t-accordion-item:is(:hover, :focus-within, [data-state="open"]) {
+  background-color: var(--c15t-accordion-bg-hover);
+  box-shadow: inset 0 0 0 1px #0000;
+}
+
+.c15t-accordion-trigger-inner {
+  width: calc(100% + (var(--c15t-accordion-padding) * 2));
+  margin: calc(-1 * var(--c15t-accordion-padding));
+  padding: var(--c15t-accordion-padding);
+  letter-spacing: -.006em;
+  text-align: left;
+  color: var(--c15t-accordion-text-color);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: .625rem;
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  display: grid;
+}
+
+.c15t-accordion-trigger:focus-visible {
+  outline: 2px solid var(--c15t-accordion-focus-ring);
+  outline-offset: -2px;
+  border-radius: calc(var(--c15t-accordion-radius)  - 2px);
+}
+
+.c15t-accordion-icon {
+  width: var(--c15t-accordion-icon-size);
+  height: var(--c15t-accordion-icon-size);
+  color: var(--c15t-accordion-icon-color);
+  flex-shrink: 0;
+}
+
+.c15t-accordion-arrow-open, .c15t-accordion-arrow-close {
+  width: var(--c15t-accordion-icon-size);
+  height: var(--c15t-accordion-icon-size);
+  transition: color var(--c15t-accordion-duration) var(--c15t-accordion-ease);
+  flex-shrink: 0;
+}
+
+.c15t-accordion-arrow-open {
+  color: var(--c15t-accordion-arrow-color);
+}
+
+.c15t-accordion-item:hover .c15t-accordion-arrow-open {
+  color: var(--c15t-accordion-icon-color);
+}
+
+.c15t-accordion-arrow-close {
+  color: var(--c15t-accordion-icon-color);
+  display: none;
+}
+
+.c15t-accordion-item[data-state="open"] .c15t-accordion-arrow-open {
+  display: none;
+}
+
+.c15t-accordion-item[data-state="open"] .c15t-accordion-arrow-close {
+  display: block;
+}
+
+.c15t-accordion-content {
+  overflow: hidden;
+}
+
+@keyframes c15t-accordion-down {
+  from {
+    opacity: 0;
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes c15t-accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    height: 0;
+  }
+}
+
+.c15t-accordion-content[data-state="open"] {
+  animation: c15t-accordion-down var(--c15t-accordion-duration) var(--c15t-accordion-ease);
+}
+
+.c15t-accordion-content[data-state="closed"] {
+  animation: c15t-accordion-up var(--c15t-accordion-duration) var(--c15t-accordion-ease);
+}
+
+.c15t-accordion-content-inner {
+  letter-spacing: -.006em;
+  color: var(--c15t-accordion-content-color);
+  padding-top: .375rem;
+  font-size: .875rem;
+  line-height: 1.25rem;
+}
+
+.c15t-accordion-trigger {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+