@koine/react 2.0.0-beta.14 → 2.0.0-beta.16

package/Sticky/Sticky.mjs

@@ -1,218 +0,0 @@
-export const Sticky = null; // import {
- //   Ref,
- //   CSSProperties,
- //   useState,
- //   useCallback,
- //   useEffect,
- //   useRef,
- // } from "react";
- // /**
- //  * Get current coordinates `left` and `top` of specific element.
- //  */
- // const offsetRelative = (element: HTMLElement) => {
- //   var result = { l: 0, t: 0 };
- //   do {
- //     let offsetTop = element.offsetTop;
- //     let offsetLeft = element.offsetLeft;
- //     if (!isNaN(offsetTop)) result.t += offsetTop;
- //     if (!isNaN(offsetLeft)) result.l += offsetLeft;
- //     // @ts-expect-error just rething everyhting in this file
- //     element =
- //       "BODY" === element.tagName ? element.parentElement : element.offsetParent;
- //   } while (element);
- //   return result;
- // };
- // export type StickyElementProps = {
- //   ref: Ref<HTMLDivElement>;
- //   sticky?: boolean;
- //   style: CSSProperties;
- // };
- // /**
- //  * - `0`: "STATIC": Static position as nothing happened
- //  * - `1`: "VIEWPORT-TOP": Sticked to the top screen edge
- //  * - `2`: "VIEWPORT-BOTTOM": Sticked to the bottom screen edge
- //  * - `4`: "VIEWPORT-UNBOTTOM": ? Scrolling in the middle of the element, neither sticked nor static
- //  * - `3`: "CONTAINER-BOTTOM": ?
- //  */
- // export type StickyStatus = 0 | 1 | 2 | 3;
- // type DimensionsBasic = [
- //   /** containerTop */
- //   number,
- //   /** containerHeight */
- //   number,
- //   /** containerBottom */
- //   number,
- //   /** elementHeight */
- //   number,
- //   /** elementWidth */
- //   number,
- //   /** viewportHeight */
- //   number,
- //   /** maxTranslateY */
- //   number
- // ];
- // type DimensionsOnScroll = [
- //   /** elementLeft */
- //   number,
- //   /** viewportTop */
- //   number,
- //   /** viewportBottom */
- //   number,
- //   /** viewportLeft */
- //   number,
- //   /** topSpacing */
- //   number,
- //   /** bottomSpacing */
- //   number
- //   /** translateY */
- //   // number,
- //   /** lastTopSpacing */
- //   // number,
- //   /** lastBottomSpacing */
- //   // number,
- //   /** lastViewportTop */
- //   // number,
- // ];
- // type Dimensions = DimensionsBasic & DimensionsOnScroll;
- // const getDimensionsBasic = (container: HTMLElement, inner: HTMLElement) => {
- //   const containerTop = offsetRelative(container).t;
- //   const containerHeight = container.clientHeight;
- //   const containerBottom = containerTop + containerHeight;
- //   const elementHeight = inner.offsetHeight;
- //   const elementWidth = inner.offsetWidth;
- //   const viewportHeight = window.innerHeight;
- //   const maxTranslateY = containerHeight - elementHeight;
- //   return [
- //     containerTop,
- //     containerHeight,
- //     containerBottom,
- //     elementHeight,
- //     elementWidth,
- //     viewportHeight,
- //     maxTranslateY,
- //   ] as DimensionsBasic;
- // };
- // const getDimensionsOnScroll = (
- //   wrapper: HTMLElement,
- //   container: HTMLElement,
- //   inner: HTMLElement
- // ) => {
- //   const elementLeft = offsetRelative(wrapper).l;
- //   const viewportTop =
- //     document.documentElement.scrollTop || document.body.scrollTop;
- //   const viewportBottom = viewportTop + window.innerHeight;
- //   const viewportLeft =
- //     document.documentElement.scrollLeft || document.body.scrollLeft;
- //   const topSpacing = 0; // TODO: make it a prop?
- //   const bottomSpacing = 0; // TODO: make it a prop?
- //   // const lastTopSpacing = topSpacing;
- //   // const lastBottomSpacing = bottomSpacing;
- //   return [
- //     elementLeft,
- //     viewportTop,
- //     viewportBottom,
- //     viewportLeft,
- //     topSpacing,
- //     bottomSpacing,
- //   ] as DimensionsOnScroll;
- // };
- // // const getTranslateYonScroll = (dimensions: DimensionsOnScroll, status: StickyStatus) => {
- // //   if (status === 1) {
- // //     // Adjust translate Y in the case decrease top spacing value.
- // //     if (dimensions[5] < dims.lastTopSpacing) {
- // //       dims.translateY += dims.lastTopSpacing - dims.topSpacing;
- // //       this._reStyle = true;
- // //     }
- // //   } else if (status === 2) {
- // //     // Adjust translate Y in the case decrease bottom spacing value.
- // //     if (dims.bottomSpacing < dims.lastBottomSpacing) {
- // //       dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
- // //       this._reStyle = true;
- // //     }
- // //   }
- // // }
- // export type StickyProps = {
- //   /** @default "div" */
- //   Wrapper?: FC<StickyElementProps>;
- //   /** @default "div" */
- //   Inner?: FC<StickyElementProps>;
- //   top: number;
- // };
- // export const Sticky: FC<StickyProps> = ({
- //   Wrapper = "div",
- //   Inner = "div",
- //   children,
- //   top,
- //   ...props
- // }) => {
- //   const [sticky, setSticky] = useState(false);
- //   const [shouldRestyle, setShouldRestyle] = useState<boolean>();
- //   const stickyStatus = useRef<StickyStatus>(0);
- //   const [dimensionsBasic, setDimensionsBasic] = useState<DimensionsBasic>();
- //   const [dimensionsOnScroll, setDimensionsOnScroll] =
- //     useState<DimensionsOnScroll>();
- //   const [translateY, setTranslateY] = useState<number>(0);
- //   const [styleWrapper, setStyleWrapper] = useState({});
- //   const [styleInner, setStyleInner] = useState({});
- //   const [innerWidth, setInnerWidth] = useState<string>();
- //   const wrapperRef = useRef<HTMLDivElement>(null);
- //   const innerRef = useRef<HTMLDivElement>(null);
- //   const handleScroll = useCallback(() => {
- //     const wrapper = wrapperRef?.current;
- //     const container = wrapper?.parentElement || null;
- //     const inner = innerRef?.current;
- //     if (wrapper && inner && container) {
- //       const dimensions = getDimensionsOnScroll(wrapper, container, inner);
- //       setDimensionsOnScroll(dimensions);
- //     }
- //   }, []);
- //   const handleResize = useCallback(() => {
- //     const container = wrapperRef?.current?.parentElement || null;
- //     const inner = innerRef?.current;
- //     if (inner && container) {
- //       setDimensionsBasic(getDimensionsBasic(container, inner));
- //       // if (innerRef?.current) {
- //       //   setInnerWidth(window.getComputedStyle(innerRef.current).width);
- //       // }
- //       // setSticky(wrapperRef.current.getBoundingClientRect().top <= top);
- //     }
- //   }, []);
- //   useEffect(() => {
- //     const container = wrapperRef?.current?.parentElement || null;
- //     const inner = innerRef?.current;
- //     if (inner && container) {
- //       setDimensionsBasic(getDimensionsBasic(container, inner));
- //     }
- //     window.addEventListener("scroll", handleScroll, { passive: true });
- //     window.addEventListener("resize", handleResize, { passive: true });
- //     return () => {
- //       window.removeEventListener("scroll", () => handleScroll);
- //       window.removeEventListener("resize", () => handleResize);
- //     };
- //   }, [wrapperRef, innerRef, handleScroll, handleResize]);
- //   // useEffect(() => {
- //   //   if (sticky) {
- //   //     setStyleInner({
- //   //       position: "fixed",
- //   //       zIndex: 1,
- //   //       top,
- //   //       width: innerWidth,
- //   //     });
- //   //   } else {
- //   //     setStyleInner({});
- //   //   }
- //   // }, [sticky, top, innerWidth]);
- //   return (
- //     <Wrapper
- //       ref={wrapperRef}
- //       sticky={Wrapper === "div" ? undefined : sticky}
- //       style={{
- //         position: "relative",
- //       }}
- //     >
- //       <Inner ref={innerRef} style={styleInner}>
- //         {children}
- //       </Inner>
- //     </Wrapper>
- //   );
- // };

package/Sticky/StickyCss.mjs

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const StickyCss = ({ top, ...props })=>{
-    return /*#__PURE__*/ _jsx("div", {
-        style: {
-            position: "sticky",
-            top: 100
-        },
-        ...props
-    });
-};

package/Sticky/index.mjs

@@ -1 +0,0 @@
-export { StickyCss, StickyCssProps } from "./StickyCss";

package/Tabs/TabsMui.mjs

@@ -1,61 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import TabUnstyled from "@mui/base/Tab";
-import TabPanelUnstyled from "@mui/base/TabPanel";
-import TabsUnstyled from "@mui/base/Tabs";
-import TabsListUnstyled from "@mui/base/TabsList";
-import useTab from "@mui/base/useTab";
-import { forwardRef } from "react";
-import { extendComponent } from "../helpers";
-export const Root = TabsUnstyled;
-export const List = TabsListUnstyled;
-// export const Tab = TabUnstyled as unknown as Props["Tab"];
-export const Indicator = "span";
-export const Panel = TabPanelUnstyled;
-export const Tab = /*#__PURE__*/ forwardRef(function Tab({ children, // component,
-slot, slotProps, slots, Indicator, ...props }, ref) {
-    const { active, /* disabled, */ selected } = useTab({
-        ...props,
-        rootRef: ref
-    });
-    const indicatorProps = {
-        active,
-        /* disabled, */ selected
-    };
-    return /*#__PURE__*/ _jsxs(TabUnstyled, {
-        ...props,
-        children: [
-            children,
-            Indicator && /*#__PURE__*/ _jsx(Indicator, {
-                ...indicatorProps
-            })
-        ]
-    });
-});
-/**
- *
- * Main differences from [Mui Tabs](https://mui.com/material-ui/react-dialog):
- *
- * @resources
- * - [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#tabpanel)
- * - [WAI-ARIA example](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html)
- * - [[Proposal] New tags tabsection, tablist, tab, tabpanel](https://github.com/whatwg/html/issues/1809)
- * - [Native <tab> elements](https://github.com/w3c/html/issues/1704)
- * - [Let's talk about Native HTML Tabs](https://daverupert.com/2021/10/native-html-tabs/)
- *
- * @similar
- * - [Zertz/react-headless-tabs](https://github.com/Zertz/react-headless-tabs)
- *
- * FIXME: it actually works even without forwardRef, check if we do need it
- */ const TabsWithRef = /*#__PURE__*/ forwardRef(function Tabs({ Root: _Root, List: _List, Tab: _Tab, Indicator: _Indicator, Panel: _Panel, ...props }, ref) {
-    return /*#__PURE__*/ _jsx(Root, {
-        ...props,
-        ref: ref
-    });
-});
-export const KoineTabs = extendComponent(TabsWithRef, {
-    Root,
-    List,
-    Tab,
-    Indicator,
-    Panel
-}); // export default Tabs;

package/Tabs/TabsMui.stories.mjs

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { StoryTabs, storyTabsArgs, storyTabsMeta } from "@koine/stories";
-import { KoineTabs } from "./TabsMui";
-export default {
-    component: KoineTabs,
-    title: "Base/Tabs",
-    ...storyTabsMeta
-};
-const BareTemplate = (args)=>{
-    // return <StoryTabs {...args} Tabs={KoineTabs} />;
-    return /*#__PURE__*/ _jsx(StoryTabs, {
-        ...args,
-        Tabs: KoineTabs
-    });
-// return <div><Tabs {...args} /></div>;
-};
-export const Bare = BareTemplate.bind({});
-Bare.args = {
-    ...storyTabsArgs
-};

package/Tabs/index.mjs

@@ -1 +0,0 @@
-export * from "./TabsMui";

package/Tabs/sc/bare.mjs

@@ -1,85 +0,0 @@
-// <reference types="@reach/utils/dist/declarations/src/polymorphic" />
-/**
- * @file
- *
- * Here we manage only "vertical" oriented tabs for now
- */ // import styled from "styled-components";
-// import {
-//   Tabs as _Tabs,
-//   TabList as _TabList,
-//   Tab as _Tab,
-//   TabPanels as _TabPanels,
-//   TabPanel as _TabPanel,
-//   TabProps as _TabProps,
-//   TabsProps as _TabsProps,
-//   useTabsContext,
-// } from "@reach/tabs";
-// import { min } from "../../styles/media";
-// import { UnderlineSkewed } from "../../Animations/Underline";
-// import { btnStyleReset } from "../../Buttons/Button";
-// export const Tabs = styled(_Tabs)<TabsProps>`
-//   ${min.sm} {
-//     display: flex;
-//     ${(p) => p.$vertical && "flex-direction: column;"}
-//   }
-// `;
-// export type TabsProps = React.PropsWithChildren<_TabsProps> & {
-//   $vertical?: boolean;
-// };
-// export const TabList = styled(_TabList)`
-//   display: flex;
-//   flex-direction: column;
-//   ${min.sm} {
-//     border-right: 1px solid var(--grey800);
-//   }
-// `;
-// export const TabWrap = styled(_Tab)<TabProps & TabStyledProps>`
-//   ${btnStyleReset}
-//   position: relative;
-//   justify-content: flex-end;
-//   padding: 0.7em;
-//   margin-bottom: 1em;
-//   font-weight: bold;
-//   color: ${(p) => (p.$active ? "var(--accent200)" : "var(--grey300)")};
-//   ${min.sm} {
-//     padding-right: var(--gutter-half);
-//   }
-//   &:hover {
-//     color: ${(p) => (p.$active ? "var(--accent200)" : "var(--accent300)")};
-//   }
-// `;
-// export const TabText = styled.span<TabStyledProps>`
-//   position: relative;
-//   z-index: 1;
-// `;
-// export const TabUnderline = styled(UnderlineSkewed)<TabStyledProps>``;
-// export type TabStyledProps = {
-//   $active: boolean;
-//   $focused: boolean;
-// };
-// export type TabProps = _TabProps & {
-//   idx: number;
-// };
-// export const Tab = ({ children, ...props }: TabProps) => {
-//   const { selectedIndex, focusedIndex } = useTabsContext();
-//   const styledProps = {
-//     $active: props.idx === selectedIndex,
-//     $focused: props.idx === focusedIndex,
-//   };
-//   return (
-//     <TabWrap {...props} {...styledProps}>
-//       {styledProps.$active && (
-//         <TabUnderline {...styledProps} layoutId="Tab-underline" />
-//       )}
-//       <TabText {...styledProps}>{children}</TabText>
-//     </TabWrap>
-//   );
-// };
-// export const TabPanels = styled(_TabPanels)`
-//   flex: 1;
-// `;
-// export const TabPanel = styled(_TabPanel)`
-//   ${min.sm} {
-//     padding-left: var(--gutter-half);
-//   }
-// `;

package/Tabs/tw/bare.mjs

@@ -1,15 +0,0 @@
-import { classed, extendComponent } from "../../helpers";
-// import type { ComponentsProps } from "../TabsMui";
-import * as _ from "../TabsMui";
-export const Root = classed(_.Root)`< class="tabs`;
-export const List = classed(_.List)`< class="tabsList flex`;
-export const Tab = classed(_.Tab)`< class="tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none`;
-export const Indicator = classed(_.Indicator)`< class="tabsIndicator`;
-export const Panel = classed(_.Panel)`< class="tabsPanel`;
-export const KoineTabs = extendComponent(_.KoineTabs, {
-    Root,
-    List,
-    Tab,
-    Indicator,
-    Panel
-});

package/Tabs/tw/index.stories.mjs

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { StoryTabs, storyTabsArgs, storyTabsMeta } from "@koine/stories";
-import { KoineTabs as bareComp } from "./bare";
-import { KoineTabs as materialComp } from "./material";
-// import { classed } from "../../helpers";
-export default {
-    title: "Base/Tabs/Tailwind",
-    ...storyTabsMeta
-};
-const bareTemplate = (args)=>{
-    return /*#__PURE__*/ _jsx(StoryTabs, {
-        ...args,
-        Tabs: bareComp
-    });
-};
-export const bare = bareTemplate.bind({});
-bare.args = storyTabsArgs;
-const materialTemplate = (args)=>{
-    return /*#__PURE__*/ _jsx(StoryTabs, {
-        ...args,
-        Tabs: materialComp
-    });
-};
-export const material = materialTemplate.bind({});
-material.args = storyTabsArgs;

package/Tabs/tw/material.mjs

@@ -1,14 +0,0 @@
-import { classed, extendComponent } from "../../helpers";
-import { KoineTabs as _ } from "./bare";
-export const Root = classed(_.Root)`< class="`;
-export const List = classed(_.List)`< class="border-b-gray-200 border-b border-solid`;
-export const Tab = classed(_.Tab)`< class="flex-col relative py-3 px-4 uppercase`; // ${p => p.selected ? "text-cyan-600" : ""}
-export const Indicator = classed(_.Indicator)`< class="absolute bottom-0 w-full h-[2px] ${(p)=>p.selected ? "bg-current" : ""}`;
-export const Panel = classed(_.Panel)`< class="tabsPanel`;
-export const KoineTabs = extendComponent(_, {
-    Root,
-    List,
-    Tab,
-    Indicator,
-    Panel
-});

package/Tabs/useTabs.mjs

@@ -1,46 +0,0 @@
-import useControlled from "@mui/utils/useControlled";
-import React, { useCallback, useId, useMemo } from "react";
-export const useTabs = (props)=>{
-    const { value: valueProp, defaultValue, onChange, orientation, direction, selectionFollowsFocus } = props;
-    const [value, setValue] = useControlled({
-        controlled: valueProp,
-        default: defaultValue,
-        name: "Tabs",
-        state: "value"
-    });
-    const idPrefix = useId();
-    const onSelected = useCallback((e, newValue)=>{
-        setValue(newValue);
-        if (onChange) {
-            onChange(e, newValue);
-        }
-    }, [
-        onChange,
-        setValue
-    ]);
-    const getRootProps = ()=>{
-        return {};
-    };
-    const tabsContextValue = useMemo(()=>{
-        return {
-            idPrefix,
-            value,
-            onSelected,
-            orientation,
-            direction,
-            selectionFollowsFocus
-        };
-    }, [
-        idPrefix,
-        value,
-        onSelected,
-        orientation,
-        direction,
-        selectionFollowsFocus
-    ]);
-    return {
-        getRootProps,
-        tabsContextValue
-    };
-};
-export default useTabs;

package/Typography/CopyPasteVisible.mjs

@@ -1,6 +0,0 @@
-import styled from "styled-components";
-export const CopyPasteVisible = styled.span`
-  color: transparent;
-  opacity: 0;
-  font-size: 0;
-`;

package/Typography/Native.mjs

@@ -1,47 +0,0 @@
-import styled from "styled-components";
-import { min } from "../styles/media";
-export const p = `
-  margin: 0 0 1em 0;
-`;
-export const h1 = `
-  margin: 0 0 10px 0;
-  font-size: 30px;
-  font-weight: 800;
-  line-height: var(--headingsLineHeight);
-  ${min.md} {
-    font-size: 50px;
-  }
-`;
-export const h2 = `
-  margin: 0 0 1em 0;
-  font-size: 24px;
-  font-weight: 800;
-  line-height: var(--headingsLineHeight);
-`;
-export const h3 = `
-  margin: 0 0 1em 0;
-  font-size: 20px;
-  font-weight: 600;
-  line-height: var(--headingsLineHeight);
-`;
-export const h4 = `
-  margin: 0 0 1em 0;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: var(--headingsLineHeight);
-`;
-export const P = styled.div`
-  ${p}
-`;
-export const H1 = styled.div`
-  ${h1}
-`;
-export const H2 = styled.div`
-  ${h2}
-`;
-export const H3 = styled.div`
-  ${h3}
-`;
-export const H4 = styled.div`
-  ${h4}
-`;

package/Typography/ReadMore.mjs

@@ -1,114 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { m, useSpring } from "framer-motion";
-import React, { useMemo, useRef, useState } from "react";
-import styled from "styled-components";
-// import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
-import { useIsomorphicLayoutEffect } from "../hooks";
-const Root = styled.div``;
-const Content = styled.div`
-  & p:first-child {
-    margin-top: 0;
-  }
-`;
-const BtnWrap = styled.span`
-  display: flex;
-  justify-content: flex-end;
-  transition: transform 0.18s ease-in-out;
-  text-align: right;
-  transform: translateY(${(p)=>p.$expanded ? "0" : "-100%"});
-  opacity: ${(p)=>p.$expanded ? 0 : 1};
-`;
-const BtnFader = styled.div`
-  width: 30%;
-  transition: transform 0.18s ease-in-out;
-  background: linear-gradient(45deg, transparent 50%, ${(p)=>p.$bg} 70%);
-`;
-const Btn = styled.span`
-  padding: 0 10px 0 10px;
-  line-height: ${(p)=>p.$lineHeight ? p.$lineHeight : "inherit"};
-  background: var(--bodyBg);
-  color: var(--grey600);
-  white-space: nowrap;
-  font-size: ${(p)=>p.$fontSize}px;
-  cursor: pointer;
-`;
-const BtnIcon = styled.span`
-  display: inline-block;
-  margin: 0 0 0 4px;
-  transition: transform 0.18s ease-in-out;
-  ${(p)=>p.$expanded ? "transform: rotate(180deg);" : ""};
-  font-size: ${(p)=>p.$fontSize}px;
-`;
-export const ReadMore = ({ lines = 3, lineHeight = 1.6, fontSize = 14, bg = "var(--bodyBg)", expand = "Expand", collapse = "Collapse", ...props })=>{
-    const defaultMaxHeight = lines * (lineHeight * fontSize);
-    const [expanded, setExpanded] = useState(false);
-    const [maxHeight, setMaxHeight] = useState(defaultMaxHeight);
-    const [fullHeight, setFullHeight] = useState(0);
-    const [exceeds, setExceeds] = useState(false);
-    const content = useRef(null);
-    const height = useSpring(defaultMaxHeight);
-    const styles = useMemo(()=>exceeds ? {
-            height,
-            overflow: "hidden"
-        } : {}, [
-        exceeds,
-        height
-    ]);
-    const handleExpandClick = ()=>{
-        setExpanded((prevExpanded)=>!prevExpanded);
-    };
-    useIsomorphicLayoutEffect(()=>{
-        if (content.current) {
-            const elementHeight = content.current.offsetHeight;
-            const newExceeds = elementHeight > maxHeight;
-            if (!newExceeds) {
-                setMaxHeight(elementHeight);
-            }
-            setExceeds(newExceeds);
-            setFullHeight(elementHeight);
-        }
-    }, [
-        content,
-        maxHeight
-    ]);
-    useIsomorphicLayoutEffect(()=>{
-        height.set(expanded ? fullHeight : maxHeight);
-    }, [
-        expanded,
-        height,
-        fullHeight,
-        maxHeight
-    ]);
-    return /*#__PURE__*/ _jsxs(Root, {
-        children: [
-            /*#__PURE__*/ _jsx(m.div, {
-                style: styles,
-                children: /*#__PURE__*/ _jsx(Content, {
-                    ref: content,
-                    ...props
-                })
-            }),
-            exceeds && /*#__PURE__*/ _jsxs(BtnWrap, {
-                $expanded: expanded,
-                children: [
-                    /*#__PURE__*/ _jsx(BtnFader, {
-                        $bg: bg
-                    }),
-                    /*#__PURE__*/ _jsxs(Btn, {
-                        $fontSize: fontSize,
-                        $lineHeight: lineHeight,
-                        onClick: handleExpandClick,
-                        "aria-expanded": expanded,
-                        "aria-label": expanded ? collapse : expand,
-                        children: [
-                            expanded ? collapse : expand,
-                            /*#__PURE__*/ _jsx(BtnIcon, {
-                                $expanded: expanded
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-};