@koine/react 1.0.8 → 1.0.11

package/styles/theme.d.ts

@@ -1,82 +1,82 @@
-export declare type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export declare type Breakpoints = Record<Breakpoint, number>;
-/**
- * You can override the default breakpoints through the .env variable
- *
- * FIXME: find a better way to configure it, the problem is that we use the media
- * queries within this pre-compiled library and thrught it was better to avoid
- * using theming props for a more ergonomic usage.
- *
- * ```.env
- * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
- * ```
- */
-export declare const breakpoints: Breakpoints;
-export declare const createTheme: (options: ThemeOptions) => Theme;
-export declare const useTheme: () => Theme;
-export declare type Theme = {
-    maxWidth: number;
-    gutter: {
-        quarter: number;
-        third: number;
-        half: number;
-        /** @default 60 */
-        normal: number;
-        double: number;
-        triple: number;
-    };
-    breakpoints: Breakpoints;
-    devices: {
-        /** @default "sm" */
-        mobile: keyof Breakpoints;
-        /** @default "md" */
-        tablet: keyof Breakpoints;
-        /** @default "lg" */
-        desktop: keyof Breakpoints;
-    };
-    spaces: {
-        mobile: {
-            /** @default 10 */
-            sm: number;
-            /** @default 20 */
-            md: number;
-            /** @default 40 */
-            lg: number;
-        };
-        tablet: {
-            /** @default 15 */
-            sm: number;
-            /** @default 30 */
-            md: number;
-            /** @default 60 */
-            lg: number;
-        };
-        desktop: {
-            /** @default 20 */
-            sm: number;
-            /** @default 40 */
-            md: number;
-            /** @default 80 */
-            lg: number;
-        };
-    };
-    header: {
-        /** @default "lg" */
-        breakpoint: keyof Breakpoints;
-        /** @default [82, 134] */
-        height: [number, number];
-        /** @default [60, 90] */
-        heightSticky: [number, number];
-        /** @default [76, 76] */
-        logoWidth: [number, number];
-        /** @default [70, 70] */
-        logoWidthSticky: [number, number];
-    };
-};
-export declare type ThemeOptions = {
-    maxWidth?: number;
-    gutter: NonNullable<Theme["gutter"]>;
-    devices?: Theme["devices"];
-    spaces: NonNullable<Theme["spaces"]>;
-    header: NonNullable<Theme["header"]>;
-};
+export declare type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export declare type Breakpoints = Record<Breakpoint, number>;
+/**
+ * You can override the default breakpoints through the .env variable
+ *
+ * FIXME: find a better way to configure it, the problem is that we use the media
+ * queries within this pre-compiled library and thrught it was better to avoid
+ * using theming props for a more ergonomic usage.
+ *
+ * ```.env
+ * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
+ * ```
+ */
+export declare const breakpoints: Breakpoints;
+export declare const createTheme: (options: ThemeOptions) => Theme;
+export declare const useTheme: () => Theme;
+export declare type Theme = {
+    maxWidth: number;
+    gutter: {
+        quarter: number;
+        third: number;
+        half: number;
+        /** @default 60 */
+        normal: number;
+        double: number;
+        triple: number;
+    };
+    breakpoints: Breakpoints;
+    devices: {
+        /** @default "sm" */
+        mobile: keyof Breakpoints;
+        /** @default "md" */
+        tablet: keyof Breakpoints;
+        /** @default "lg" */
+        desktop: keyof Breakpoints;
+    };
+    spaces: {
+        mobile: {
+            /** @default 10 */
+            sm: number;
+            /** @default 20 */
+            md: number;
+            /** @default 40 */
+            lg: number;
+        };
+        tablet: {
+            /** @default 15 */
+            sm: number;
+            /** @default 30 */
+            md: number;
+            /** @default 60 */
+            lg: number;
+        };
+        desktop: {
+            /** @default 20 */
+            sm: number;
+            /** @default 40 */
+            md: number;
+            /** @default 80 */
+            lg: number;
+        };
+    };
+    header: {
+        /** @default "lg" */
+        breakpoint: keyof Breakpoints;
+        /** @default [82, 134] */
+        height: [number, number];
+        /** @default [60, 90] */
+        heightSticky: [number, number];
+        /** @default [76, 76] */
+        logoWidth: [number, number];
+        /** @default [70, 70] */
+        logoWidthSticky: [number, number];
+    };
+};
+export declare type ThemeOptions = {
+    maxWidth?: number;
+    gutter: NonNullable<Theme["gutter"]>;
+    devices?: Theme["devices"];
+    spaces: NonNullable<Theme["spaces"]>;
+    header: NonNullable<Theme["header"]>;
+};

package/styles/theme.js

@@ -34,5 +34,8 @@ const themeDefault = {
         desktop: "lg",
     },
 };
-export const createTheme = (options) => (Object.assign(Object.assign({}, themeDefault), options));
+export const createTheme = (options) => ({
+    ...themeDefault,
+    ...options,
+});
 export const useTheme = _useTheme;

package/tw/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../shared";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/bare";

package/tw/index.js

@@ -0,0 +1,31 @@
+export * from "../shared";
+// export * from "../Alert";
+// export * from "../Animations";
+// export * from "../Autocomplete";
+// export * from "../Bg";
+// export * from "../Breadcrumbs";
+// export * from "../Buttons";
+// export * from "../Carousel";
+// export * from "../Collapsable";
+// export * from "../Debug";
+export { KoineDialog } from "../Dialog/tw/bare";
+// export * from "../Form";
+// export * from "../Forms";
+// export * from "../Grid";
+// export * from "../Hamburger";
+// export * from "../Header";
+// export * from "../Hidden";
+// export * from "../Img";
+// export * from "../Link";
+// export * from "../MenuItem";
+// export * from "../Pagination";
+// export * from "../Pill";
+// export * from "../Progress";
+// export * from "../Rating";
+// // export * from "../Select";
+// export * from "../Sidebar";
+// export * from "../Spacing";
+// export * from "../Sticky";
+// export * from "../styles";
+// export * from "../Tabs";
+// export * from "../Typography";

package/tw/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/tw/index.js",
+  "types": "./index.d.ts"
+}

package/twm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../shared";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/framer";

package/twm/index.js

@@ -0,0 +1,31 @@
+export * from "../shared";
+// export * from "../Alert";
+// export * from "../Animations";
+// export * from "../Autocomplete";
+// export * from "../Bg";
+// export * from "../Breadcrumbs";
+// export * from "../Buttons";
+// export * from "../Carousel";
+// export * from "../Collapsable";
+// export * from "../Debug";
+export { KoineDialog } from "../Dialog/tw/framer";
+// export * from "../Form";
+// export * from "../Forms";
+// export * from "../Grid";
+// export * from "../Hamburger";
+// export * from "../Header";
+// export * from "../Hidden";
+// export * from "../Img";
+// export * from "../Link";
+// export * from "../MenuItem";
+// export * from "../Pagination";
+// export * from "../Pill";
+// export * from "../Progress";
+// export * from "../Rating";
+// // export * from "../Select";
+// export * from "../Sidebar";
+// export * from "../Spacing";
+// export * from "../Sticky";
+// export * from "../styles";
+// export * from "../Tabs";
+// export * from "../Typography";

package/twm/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/twm/index.js",
+  "types": "./index.d.ts"
+}

package/types.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-export declare type Translate = (i18nKey: any, query?: any, options?: any) => string;
-export declare type Option = {
-    value: string;
-    Label?: NonNullable<import("react").ReactNode>;
-    label: NonNullable<import("react").ReactChild | import("react").ReactFragment>;
-};
-export declare type KoineComponentProps<BaseComponentProps, ExtendableProps> = BaseComponentProps & {
-    Koine: ExtendableProps;
-};
-export declare type KoineComponent<Props = any> = string | React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
+/// <reference types="react" />
+export type { KoineImgSmartWrapProps, KoineImgSmartProps } from "./Img/types";
+export declare type Translate = (i18nKey: any, query?: any, options?: any) => string;
+export declare type Option = {
+    value: string;
+    Label?: NonNullable<import("react").ReactNode>;
+    label: NonNullable<import("react").ReactChild | import("react").ReactFragment>;
+};
+export declare type KoineComponentProps<BaseComponentProps, ExtendableProps> = BaseComponentProps & ExtendableProps;
+export declare type KoineComponent<Props = any> = string | React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);

package/Dialog/Dialog.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import { MotionProps } from "framer-motion";
-import { DialogProps as BaseDialogProps } from "@reach/dialog";
-import { SetRequired } from "@koine/utils";
-export declare const koineDialogBg: import("styled-components").FlattenSimpleInterpolation;
-export declare const koineDialogBackdropMotion: MotionProps;
-export declare const koineDialogInnerMotion: MotionProps;
-export declare const KoineDialogOverlay: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", import("@reach/dialog/dist/declarations/src").DialogOverlayProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const KoineDialogBackdrop: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
-export declare const KoineDialogInner: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, Pick<KoineDialogProps, "$centered">, never>;
-export declare const KoineDialogContent: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", import("@reach/dialog/dist/declarations/src").DialogContentProps>, import("styled-components").DefaultTheme, Pick<KoineDialogProps, "$centered">, never>;
-export declare const KoineDialogCloseButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../Buttons").KoineButtonUiProps & {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const KoineDialogHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const KoineDialogBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const KoineDialogBodyChildren: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare type KoineDialogProps = SetRequired<BaseDialogProps, "onDismiss"> & {
-    title?: string;
-    /** @default true */
-    $centered?: boolean;
-};
-export declare const KoineDialog: ({ children, title, onDismiss, isOpen, $centered, ...props }: KoineDialogProps) => JSX.Element;

package/Dialog/Dialog.js

@@ -1,93 +0,0 @@
-import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from "styled-components";
-import { AnimatePresence, m } from "framer-motion";
-import { MdClear as IconClose } from "react-icons/md";
-import { DialogOverlay as BaseDialogOverlay, DialogContent as BaseDialogContent, } from "@reach/dialog";
-import { min } from "../styles/media";
-import { inset0 } from "../styles/styled";
-import { IconButton } from "../Buttons";
-export const koineDialogBg = css `
-  z-index: 1;
-  position: relative;
-  background: var(--bodyBg);
-  box-shadow: var(--shadow);
-`;
-export const koineDialogBackdropMotion = {
-    animate: {
-        backdropFilter: "blur(10px)",
-        background: "rgba(255,255,255,0.33)",
-    },
-    exit: {
-        backdropFilter: "blur(0px)",
-        background: "rgba(255,255,255,0)",
-        transition: { delay: 0.2 },
-    },
-};
-export const koineDialogInnerMotion = {
-    initial: {
-        // scale: .7,
-        opacity: 0,
-    },
-    animate: {
-        scale: 1,
-        opacity: 1,
-        // transition: { delay: 0.2 },
-    },
-    exit: {
-        scale: 0.9,
-        opacity: 0,
-    },
-};
-export const KoineDialogOverlay = styled(BaseDialogOverlay) `
-  z-index: 100;
-  position: fixed;
-  ${inset0}
-`;
-export const KoineDialogBackdrop = styled(m.div) `
-  z-index: 2;
-  position: fixed;
-  ${inset0}
-  backdrop-filter: blur(0px);
-`;
-export const KoineDialogInner = styled(m.div) `
-  z-index: 3;
-  position: absolute;
-  ${inset0}
-  overflow: hidden scroll;
-  ${(p) => p.$centered &&
-    `${min.sm} {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }`};
-`;
-// export const KoineDialogContent = styled(m(BaseDialogContent))<
-export const KoineDialogContent = styled(BaseDialogContent) `
-  position: relative;
-  outline: 0px;
-  width: 100%;
-  margin: 0 auto;
-`;
-export const KoineDialogCloseButton = styled(IconButton) `
-  position: absolute;
-  padding: 0;
-`;
-export const KoineDialogHeader = styled.div `
-  z-index: 2;
-  position: relative;
-`;
-export const KoineDialogBody = styled.div `
-  position: relative;
-
-  &:hover ${KoineDialogCloseButton} {
-  }
-`;
-export const KoineDialogBodyChildren = styled.div `
-  position: relative;
-  overflow: auto;
-`;
-export const KoineDialog = (_a) => {
-    var { children, title, onDismiss, isOpen, $centered = true } = _a, props = __rest(_a, ["children", "title", "onDismiss", "isOpen", "$centered"]);
-    return (_jsx(AnimatePresence, { children: isOpen && (_jsxs(KoineDialogOverlay, Object.assign({}, props, { onDismiss: onDismiss, isOpen: isOpen }, { children: [_jsx(KoineDialogBackdrop, Object.assign({}, koineDialogBackdropMotion)), _jsx(KoineDialogInner, Object.assign({}, koineDialogInnerMotion, { "$centered": $centered }, { children: _jsxs(KoineDialogContent, Object.assign({ "aria-label": title || "", "$centered": $centered }, { children: [title && _jsx(KoineDialogHeader, { children: title }), _jsxs(KoineDialogBody, { children: [_jsx(KoineDialogCloseButton, Object.assign({ onClick: onDismiss }, { children: _jsx(IconClose, {}) })), _jsx(KoineDialogBodyChildren, { children: children })] })] })) }))] }), "DialogOverlay")) }));
-};

package/Forms/Form/Form.d.ts

@@ -1,31 +0,0 @@
-/// <reference types="react" />
-export declare const FormRoot: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {}, never>;
-export declare const FormOverlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const FormFeedback: import("styled-components").StyledComponent<import("react").FC<import("../../Alert").AlertProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare type FormProps = React.ComponentPropsWithoutRef<"form"> & {
-    action: string;
-    ok?: boolean;
-    Ok?: typeof FormFeedback;
-    okProps?: object;
-    fail?: boolean;
-    Fail?: typeof FormFeedback;
-    failProps?: object;
-    loading?: boolean;
-    /** Whether the form should collapse on `ok` */
-    collapseOnOk?: boolean;
-    /** Whether the form should collapse on `fail` */
-    collapseOnFail?: boolean;
-    /**
-     * Determines the time (in ms) that the `Ok` component wait before collapsing
-     * When <= 0 the `Ok` component will persist
-     *
-     * @default 3000 */
-    okTimeout?: number;
-    /**
-     * Determines the time (in ms) that the `Fail` component wait before collapsing
-     * When <= 0 the `Fail` component will persist
-     *
-     * @default 3000 */
-    failTimeout?: number;
-};
-export declare const Form: React.FC<FormProps>;

package/Forms/Form/Form.js

@@ -1,64 +0,0 @@
-import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import styled from "styled-components";
-import { overlay, centered } from "../../styles/styled";
-import { Collapsable } from "../../Collapsable";
-import { ProgressCircular } from "../../Progress";
-import { Alert } from "../../Alert";
-export const FormRoot = styled.form `
-  position: relative;
-`;
-export const FormOverlay = styled.div `
-  z-index: 4;
-  ${overlay}
-  ${centered}
-  background: rgba(var(--bodyBg--rgb),.8);
-  pointer-events: none;
-  backdrop-filter: blur(2px);
-`;
-export const FormFeedback = styled(Alert) `
-  padding: 2em 0;
-`;
-export const Form = (_a) => {
-    var { ok, fail, loading, Ok = FormFeedback, okProps = {
-        children: "Sent!",
-    }, Fail = FormFeedback, failProps = {
-        children: "Failed.",
-    }, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children } = _a, props = __rest(_a, ["ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
-    const [expanded, setExpanded] = useState("");
-    const commonProps = {
-        head: null,
-        components: {
-            HeadIcon: null,
-        },
-    };
-    useEffect(() => {
-        if (!loading) {
-            if (ok)
-                setExpanded("ok");
-            else if (fail)
-                setExpanded("fail");
-        }
-    }, [ok, fail, loading]);
-    useEffect(() => {
-        let timeout;
-        if (expanded === "fail" && failTimeout) {
-            timeout = setTimeout(() => setExpanded(""), failTimeout);
-        }
-        else if (expanded === "ok" && okTimeout) {
-            timeout = setTimeout(() => setExpanded(""), okTimeout);
-        }
-        return () => {
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-        };
-    }, [expanded, failTimeout, okTimeout]);
-    let formExpanded = true;
-    if (collapseOnFail && fail)
-        formExpanded = false;
-    if (collapseOnOk && ok)
-        formExpanded = false;
-    return (_jsxs(FormRoot, Object.assign({ method: "post", noValidate: true }, props, { children: [_jsx(Collapsable, Object.assign({}, commonProps, { expanded: formExpanded, recalc: loading, body: _jsxs(_Fragment, { children: [children, loading && (_jsx(FormOverlay, { children: _jsx(ProgressCircular, { size: "2em", color: "var(--accent300)" }) }))] }) })), _jsx(Collapsable, Object.assign({}, commonProps, { expanded: expanded === "ok" && !loading, body: _jsx(Ok, Object.assign({}, okProps)) })), _jsx(Collapsable, Object.assign({}, commonProps, { expanded: expanded === "fail" && !loading, body: _jsx(Fail, Object.assign({}, failProps)) }))] })));
-};

package/Img/Img.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export declare type KoineImgProps = {};
-export declare const KoineImg: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
-export declare type KoineImgSmartWrapProps = {
-    $loaded?: boolean;
-    $error?: boolean;
-    $bg?: React.CSSProperties["backgroundColor"];
-};
-export declare type KoineImgSmartProps = KoineImgProps & {
-    Wrap: React.FC<KoineImgSmartWrapProps>;
-};

package/Tabs/Tabs.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-import { TabProps as _TabProps, TabsProps as _TabsProps } from "@reach/tabs";
-export declare const TabsStyled: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", _TabsProps>, import("styled-components").DefaultTheme, _TabsProps & {
-    $vertical?: boolean | undefined;
-}, never>;
-export declare type TabsProps = _TabsProps & {
-    $vertical?: boolean;
-};
-export declare const Tabs: (props: TabsProps) => JSX.Element;
-export declare const TabList: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").MemoComponent<"div", import("@reach/tabs/dist/declarations/src").TabListProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const TabWrap: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"button", _TabProps>, import("styled-components").DefaultTheme, _TabProps & {
-    idx: number;
-} & TabStyledProps, never>;
-export declare const TabText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TabStyledProps, never>;
-export declare const TabUnderline: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"i">>, import("styled-components").DefaultTheme, TabStyledProps, never>;
-export declare type TabStyledProps = {
-    $active: boolean;
-    $focused: boolean;
-};
-export declare type TabProps = _TabProps & {
-    idx: number;
-};
-export declare const Tab: ({ children, ...props }: TabProps) => JSX.Element;
-export declare const TabPanels: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").MemoComponent<"div", import("@reach/tabs/dist/declarations/src").TabPanelsProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const TabPanel: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", import("@reach/tabs/dist/declarations/src").TabPanelProps>, import("styled-components").DefaultTheme, {}, never>;

package/Tabs/Tabs.js

@@ -1,67 +0,0 @@
-import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @file
- *
- * Here we manage only "vertical" oriented tabs for now
- */
-import { AnimateSharedLayout } from "framer-motion";
-import styled from "styled-components";
-import { Tabs as _Tabs, TabList as _TabList, Tab as _Tab, TabPanels as _TabPanels, TabPanel as _TabPanel, useTabsContext, } from "@reach/tabs";
-import { min } from "../styles/media";
-import { UnderlineSkewed } from "../Animations/Underline";
-import { btnStyleReset } from "../Buttons";
-export const TabsStyled = styled(_Tabs) `
-  ${min.sm} {
-    display: flex;
-    ${(p) => p.$vertical && "flex-direction: column;"}
-  }
-`;
-export const Tabs = (props) => {
-    return (_jsx(AnimateSharedLayout, { children: _jsx(TabsStyled, Object.assign({}, props)) }));
-};
-export const TabList = styled(_TabList) `
-  display: flex;
-  flex-direction: column;
-  ${min.sm} {
-    border-right: 1px solid var(--grey800);
-  }
-`;
-export const TabWrap = styled(_Tab) `
-  ${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 `
-  position: relative;
-  z-index: 1;
-`;
-export const TabUnderline = styled(UnderlineSkewed) ``;
-export const Tab = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const { selectedIndex, focusedIndex } = useTabsContext();
-    const styledProps = {
-        $active: props.idx === selectedIndex,
-        $focused: props.idx === focusedIndex,
-    };
-    return (_jsxs(TabWrap, Object.assign({}, props, styledProps, { children: [styledProps.$active && (_jsx(TabUnderline, Object.assign({}, styledProps, { layoutId: "Tab-underline" }))), _jsx(TabText, Object.assign({}, styledProps, { children: children }))] })));
-};
-export const TabPanels = styled(_TabPanels) `
-  flex: 1;
-`;
-export const TabPanel = styled(_TabPanel) `
-  ${min.sm} {
-    padding-left: var(--gutter-half);
-  }
-`;