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

package/Spacing/Spacing.mjs

@@ -1,55 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from "styled-components";
-import isUndefined from "@koine/utils/isUndefined";
-import { spacingBottom, spacingTop } from "../styles/spacing";
-const Root = styled.div`
-  ${(p)=>p.$top && spacingTop.call(p.theme, ...p.$top)}
-  ${(p)=>p.$bottom && spacingBottom.call(p.theme, ...p.$bottom)}
-`;
-const extractDirectionArgs = (raw)=>{
-    const [size, factor, property, devices] = raw.split(":");
-    const factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
-    const devicesArg = devices?.split(",");
-    return [
-        size,
-        factorArg,
-        property,
-        devicesArg
-    ];
-};
-/**
- * Usage:
- *
- * ```jsx
- * <Spacing top="sm" />
- * <Spacing top="sm:1.5" />
- * <Spacing top="sm:1.5" bottom="lg" />
- * <Spacing vertical="sm:1.5:margin:mobile" />
- * <Spacing top="sm:1.5:padding:mobile" />
- * <Spacing top="sm:2:padding:tablet,desktop" />
- * ```
- */ export const Spacing = ({ top, bottom, vertical, ...props })=>{
-    let $top;
-    let $bottom;
-    if (top) {
-        $top = extractDirectionArgs(top);
-    }
-    if (bottom) {
-        $bottom = extractDirectionArgs(bottom);
-    }
-    if (vertical) {
-        $top = extractDirectionArgs(vertical);
-        $bottom = $top;
-    }
-    if (!$top && !$bottom && !vertical) {
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return /*#__PURE__*/ _jsx(_Fragment, {
-            children: props.children
-        });
-    }
-    return /*#__PURE__*/ _jsx(Root, {
-        $top: $top,
-        $bottom: $bottom,
-        ...props
-    });
-};

package/Spacing/index.d.ts

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

package/Spacing/index.mjs

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

package/Sticky/Sticky.d.ts

@@ -1,2 +0,0 @@
-export type StickyProps = {};
-export declare const Sticky: null;

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export type StickyCssProps = React.ComponentProps<"div"> & {
-    top: number;
-};
-export declare const StickyCss: ({ top, ...props }: StickyCssProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/Sticky/index.mjs

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

package/Tabs/TabsMui.d.ts

@@ -1,85 +0,0 @@
-/// <reference types="react" />
-import TabUnstyled, { type TabProps as TabUnstyledProps } from "@mui/base/Tab";
-import TabPanelUnstyled, { type TabPanelProps as TabPanelUnstyledProps } from "@mui/base/TabPanel";
-import TabsUnstyled, { type TabsProps as TabsUnstyledProps } from "@mui/base/Tabs";
-import TabsListUnstyled, { type TabsListProps as TabsListUnstyledProps } from "@mui/base/TabsList";
-import { type UseTabReturnValue } from "@mui/base/useTab";
-import type { MotionProps } from "framer-motion";
-import type { Simplify } from "@koine/utils";
-import { type WithComponents } from "../helpers";
-type ReducedTabsUnstyledProps = Omit<TabsUnstyledProps, "component" | "slots" | "slotProps">;
-export type OwnProps = React.PropsWithChildren<ReducedTabsUnstyledProps & {
-    mTab?: MotionProps;
-}>;
-export type Components = {
-    Root: {
-        type: typeof TabsUnstyled;
-        props: React.PropsWithChildren<ReducedTabsUnstyledProps>;
-    };
-    List: {
-        type: typeof TabsListUnstyled;
-        props: TabsListUnstyledProps;
-    };
-    Tab: {
-        type: typeof TabUnstyled;
-        props: TabUnstyledProps & {
-            Indicator?: Props["Indicator"];
-        };
-        motionable: true;
-    };
-    Indicator: {
-        type: "span";
-        props: React.PropsWithChildren<Pick<UseTabReturnValue, "active" | /* "disabled" | */ "selected">>;
-        motionable: true;
-    };
-    Panel: {
-        type: typeof TabPanelUnstyled;
-        props: TabPanelUnstyledProps;
-    };
-};
-export type ComponentsProps = {
-    [Name in keyof Components]: Components[Name]["props"];
-};
-export type Props = Simplify<WithComponents<OwnProps, Components>>;
-export type TabsProps = Props;
-export type KoineTabsProps = Props;
-export declare const Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
-export declare const List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
-export declare const Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
-    children?: import("react").ReactNode;
-}>>;
-export declare const Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
-export declare const Tab: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
-export declare const KoineTabs: ((props: Omit<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-    mTab?: MotionProps | undefined;
-    children?: import("react").ReactNode;
-    Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
-    List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
-    Tab: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tab").TabTypeMap<{}, "button">>;
-    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
-        children?: import("react").ReactNode;
-    }>>;
-    Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").FunctionComponentElement<any>) & {
-    Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
-    List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
-    Tab: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
-    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
-        children?: import("react").ReactNode;
-    }>>;
-    Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
-} & {
-    defaultProps: {
-        Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
-        List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
-        Tab: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
-        Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
-            children?: import("react").ReactNode;
-        }>>;
-        Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
-    };
-};
-export {};

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

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

package/Tabs/index.mjs

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

package/Tabs/sc/bare.d.ts

@@ -1,5 +0,0 @@
-/**
- * @file
- *
- * Here we manage only "vertical" oriented tabs for now
- */

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);
-//   }
-// `;