@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

package/lib/components/Tabs/TabPanel.d.ts

@@ -23,10 +23,192 @@ interface TabPanelProps {
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledTabPanel: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("../Flex").FlexProps>, import("styled-components").DefaultTheme, Pick<TabPanelProps, "tablistType"> & {
+export declare const StyledTabPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "item" | "xs" | "xl" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "xs" | "xl" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "xs">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "item" | "xl" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "xl">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "item" | "xs" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "sm">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "item" | "xs" | "xl" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "md">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "item" | "xs" | "xl" | "sm" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "lg">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "item" | "xs" | "xl" | "sm" | "md">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}), Pick<TabPanelProps, "tablistType"> & {
     current: boolean;
     level: number;
-}, never>;
+}>> & string & Omit<ForwardRefForwardPropsComponent<import("../Flex").FlexProps>, keyof import("react").Component<any, {}, any>>;
 declare const TabPanel: ForwardRefForwardPropsComponent<TabPanelProps>;
 export default TabPanel;
 //# sourceMappingURL=TabPanel.d.ts.map

package/lib/components/Tabs/TabPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxE,OAAO,KAAK,EAAE,+BAA+B,EAAc,MAAM,aAAa,CAAC;AAS/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAEd,OAAO;WACT,MAAM;SAsFf,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CA4E3D,CAAC;AAIH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxE,OAAO,KAAK,EAAE,+BAA+B,EAAc,MAAM,aAAa,CAAC;AAS/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAEd,OAAO;WACT,MAAM;gIAuFf,CAAC;AAiBH,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CA4E3D,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/lib/components/Tabs/TabPanel.js

@@ -20,7 +20,7 @@ export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme
     min-width: 0;
     max-width: 100%;
 
-    :focus-visible {
+    &:focus-visible {
       outline: none;
       box-shadow: ${tablistType === 'horizontal' && level > 1
         ? theme.base.shadow['focus-inset']
@@ -62,6 +62,7 @@ export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme
 
       &&& ${StyledCardContent} {
         padding: 0;
+
         ${StyledCard} {
           border: 0;
           padding: 0;
@@ -105,6 +106,7 @@ const StyledButton = styled(Button)(({ theme }) => {
     return css `
     padding-inline: calc(${theme.base.spacing});
     opacity: 0;
+
     &:focus {
       opacity: 1;
     }
@@ -134,7 +136,7 @@ const TabPanel = forwardRef(function TabPanel({ tabId, currentTabId, title, tabl
                 direction: 'column',
                 rowGap: 1,
                 ...(tablistType === 'horizontal' && {
-                    pad: level > 1 ? [1, 1.5, undefined] : [1, undefined, undefined]
+                    pad: level > 1 ? [1, 1.5] : [1, undefined, undefined]
                 })
             }, item: { grow: 1 }, current: currentTab, inert: currentTab ? undefined : '', role: 'tabpanel', "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: tabPanelRef, tabIndex: 0, tablistType: tablistType, level: level, children: [title && _jsx(Text, { variant: `h${Math.min(2 + level, 6)}`, children: title }), children, tablistRef?.current && showReturnButton && (_jsx(StyledButton, { variant: 'link', onClick: () => {
                         getFocusables(tablistRef)[0]?.focus();

package/lib/components/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';\nimport type { ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport { StyledCardContent } from '../Card/CardContent';\nimport { StyledCard } from '../Card/Card';\nimport { StyledCardHeader } from '../Card/CardHeader';\n\nimport type { TabsProps } from './Tabs.types';\nimport TabsContext from './TabsContext';\nimport { StyledAllTabsWrapper, StyledTabs } from './Tabs.styles';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   */\n  currentTabId?: string;\n  /** The title for the tab panel */\n  title?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref to the tablist element. */\n  tablistRef?: RefObject<HTMLElement>;\n  /**\n   * The tablist type indicates what direction the tabs are rendered in.\n   * @default 'horizontal'\n   */\n  tablistType?: TabsProps['type'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled(Flex)<\n  Pick<TabPanelProps, 'tablistType'> & {\n    current: boolean;\n    level: number;\n  }\n>(({ current, tablistType, level, theme }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus-visible {\n      outline: none;\n      box-shadow: ${tablistType === 'horizontal' && level > 1\n        ? theme.base.shadow['focus-inset']\n        : theme.base.shadow.focus};\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n\n    ${tablistType === 'horizontal' &&\n    level > 1 &&\n    css`\n      background-color: ${theme.base.palette['primary-background']};\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-block-start: none;\n      border-end-start-radius: calc(0.5rem * 0.5);\n      border-end-end-radius: calc(0.5rem * 0.5);\n    `}\n\n    ${theme.components.tabs.detached &&\n    tablistType === 'horizontal' &&\n    css`\n      background: ${theme.base.palette['primary-background']};\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-block-start: none;\n      border-radius: var(--border-radius, ${theme.base['border-radius']});\n      border-start-start-radius: 0;\n      border-start-end-radius: 0;\n      padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n\n      &&& ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {\n        padding: 0;\n        @media (width < ${theme.base.breakpoints.sm}) {\n          padding: 0;\n        }\n      }\n\n      &&& ${StyledCardContent} {\n        padding: 0;\n        ${StyledCard} {\n          border: 0;\n          padding: 0;\n        }\n      }\n\n      &&& ${StyledCard} {\n        padding: calc(2 * ${theme.base.spacing});\n        padding-block-start: ${theme.base.spacing};\n        border: 0.0625rem solid ${theme.base.palette['border-line']};\n        border-radius: var(--border-radius, ${theme.base['border-radius']});\n        background: ${theme.components.card.background};\n      }\n\n      &&& > ${StyledCard} {\n        padding: 0;\n        border: 0;\n      }\n\n      ${StyledAllTabsWrapper} {\n        ${StyledTabs} {\n          margin-block-end: 0;\n        }\n      }\n\n      ${level > 1 &&\n      css`\n        :has(&) {\n          ${StyledAllTabsWrapper} {\n            ${StyledTabs} {\n              margin: 0;\n            }\n          }\n        }\n      `}\n    `}\n  `;\n});\n\nStyledTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    padding-inline: calc(${theme.base.spacing});\n    opacity: 0;\n    &:focus {\n      opacity: 1;\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst TabPanel: ForwardRefForwardPropsComponent<TabPanelProps> = forwardRef(function TabPanel(\n  {\n    tabId,\n    currentTabId,\n    title,\n    tablistRef,\n    tablistType = 'horizontal',\n    children,\n    ...restProps\n  }: PropsWithoutRef<TabPanelProps>,\n  ref: TabPanelProps['ref']\n) {\n  const t = useI18n();\n  const tabPanelRef = useConsolidatedRef(ref);\n  const [showReturnButton, setShowReturnButton] = useState(false);\n  const { level } = useContext(TabsContext);\n\n  const onFocusChange = useCallback((isFocused: boolean) => {\n    if (!isFocused) {\n      setShowReturnButton(false);\n    }\n  }, []);\n\n  useFocusWithin([tabPanelRef], onFocusChange);\n\n  const contextValue = useMemo(\n    () => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }),\n    [level, tablistType]\n  );\n\n  const onKeyUp = () => {\n    if (tabPanelRef.current?.contains(document.activeElement)) {\n      setShowReturnButton(true);\n    }\n  };\n  useEvent('keyup', onKeyUp);\n\n  const currentTab = currentTabId && tabId ? currentTabId === tabId : true;\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <StyledTabPanel\n        {...restProps}\n        container={{\n          direction: 'column',\n          rowGap: 1,\n          ...(tablistType === 'horizontal' && {\n            pad: level > 1 ? [1, 1.5, undefined] : [1, undefined, undefined]\n          })\n        }}\n        item={{ grow: 1 }}\n        current={currentTab}\n        inert={currentTab ? undefined : ''}\n        role='tabpanel'\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={tabPanelRef}\n        tabIndex={0}\n        tablistType={tablistType}\n        level={level}\n      >\n        {title && <Text variant={`h${Math.min(2 + level, 6)}` as HeadingTag}>{title}</Text>}\n        {children}\n        {tablistRef?.current && showReturnButton && (\n          <StyledButton\n            variant='link'\n            onClick={() => {\n              getFocusables(tablistRef)[0]?.focus();\n            }}\n          >\n            {t('return_to_tab_list')}\n          </StyledButton>\n        )}\n      </StyledTabPanel>\n    </TabsContext.Provider>\n  );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';\nimport type { ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport { StyledCardContent } from '../Card/CardContent';\nimport { StyledCard } from '../Card/Card';\nimport { StyledCardHeader } from '../Card/CardHeader';\n\nimport type { TabsProps } from './Tabs.types';\nimport TabsContext from './TabsContext';\nimport { StyledAllTabsWrapper, StyledTabs } from './Tabs.styles';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   */\n  currentTabId?: string;\n  /** The title for the tab panel */\n  title?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref to the tablist element. */\n  tablistRef?: RefObject<HTMLElement>;\n  /**\n   * The tablist type indicates what direction the tabs are rendered in.\n   * @default 'horizontal'\n   */\n  tablistType?: TabsProps['type'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled(Flex)<\n  Pick<TabPanelProps, 'tablistType'> & {\n    current: boolean;\n    level: number;\n  }\n>(({ current, tablistType, level, theme }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: ${tablistType === 'horizontal' && level > 1\n        ? theme.base.shadow['focus-inset']\n        : theme.base.shadow.focus};\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n\n    ${tablistType === 'horizontal' &&\n    level > 1 &&\n    css`\n      background-color: ${theme.base.palette['primary-background']};\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-block-start: none;\n      border-end-start-radius: calc(0.5rem * 0.5);\n      border-end-end-radius: calc(0.5rem * 0.5);\n    `}\n\n    ${theme.components.tabs.detached &&\n    tablistType === 'horizontal' &&\n    css`\n      background: ${theme.base.palette['primary-background']};\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-block-start: none;\n      border-radius: var(--border-radius, ${theme.base['border-radius']});\n      border-start-start-radius: 0;\n      border-start-end-radius: 0;\n      padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n\n      &&& ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {\n        padding: 0;\n        @media (width < ${theme.base.breakpoints.sm}) {\n          padding: 0;\n        }\n      }\n\n      &&& ${StyledCardContent} {\n        padding: 0;\n\n        ${StyledCard} {\n          border: 0;\n          padding: 0;\n        }\n      }\n\n      &&& ${StyledCard} {\n        padding: calc(2 * ${theme.base.spacing});\n        padding-block-start: ${theme.base.spacing};\n        border: 0.0625rem solid ${theme.base.palette['border-line']};\n        border-radius: var(--border-radius, ${theme.base['border-radius']});\n        background: ${theme.components.card.background};\n      }\n\n      &&& > ${StyledCard} {\n        padding: 0;\n        border: 0;\n      }\n\n      ${StyledAllTabsWrapper} {\n        ${StyledTabs} {\n          margin-block-end: 0;\n        }\n      }\n\n      ${level > 1 &&\n      css`\n        :has(&) {\n          ${StyledAllTabsWrapper} {\n            ${StyledTabs} {\n              margin: 0;\n            }\n          }\n        }\n      `}\n    `}\n  `;\n});\n\nStyledTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    padding-inline: calc(${theme.base.spacing});\n    opacity: 0;\n\n    &:focus {\n      opacity: 1;\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst TabPanel: ForwardRefForwardPropsComponent<TabPanelProps> = forwardRef(function TabPanel(\n  {\n    tabId,\n    currentTabId,\n    title,\n    tablistRef,\n    tablistType = 'horizontal',\n    children,\n    ...restProps\n  }: PropsWithoutRef<TabPanelProps>,\n  ref: TabPanelProps['ref']\n) {\n  const t = useI18n();\n  const tabPanelRef = useConsolidatedRef(ref);\n  const [showReturnButton, setShowReturnButton] = useState(false);\n  const { level } = useContext(TabsContext);\n\n  const onFocusChange = useCallback((isFocused: boolean) => {\n    if (!isFocused) {\n      setShowReturnButton(false);\n    }\n  }, []);\n\n  useFocusWithin([tabPanelRef], onFocusChange);\n\n  const contextValue = useMemo(\n    () => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }),\n    [level, tablistType]\n  );\n\n  const onKeyUp = () => {\n    if (tabPanelRef.current?.contains(document.activeElement)) {\n      setShowReturnButton(true);\n    }\n  };\n  useEvent('keyup', onKeyUp);\n\n  const currentTab = currentTabId && tabId ? currentTabId === tabId : true;\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <StyledTabPanel\n        {...restProps}\n        container={{\n          direction: 'column',\n          rowGap: 1,\n          ...(tablistType === 'horizontal' && {\n            pad: level > 1 ? [1, 1.5] : [1, undefined, undefined]\n          })\n        }}\n        item={{ grow: 1 }}\n        current={currentTab}\n        inert={currentTab ? undefined : ''}\n        role='tabpanel'\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={tabPanelRef}\n        tabIndex={0}\n        tablistType={tablistType}\n        level={level}\n      >\n        {title && <Text variant={`h${Math.min(2 + level, 6)}` as HeadingTag}>{title}</Text>}\n        {children}\n        {tablistRef?.current && showReturnButton && (\n          <StyledButton\n            variant='link'\n            onClick={() => {\n              getFocusables(tablistRef)[0]?.focus();\n            }}\n          >\n            {t('return_to_tab_list')}\n          </StyledButton>\n        )}\n      </StyledTabPanel>\n    </TabsContext.Provider>\n  );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}

package/lib/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAmD,MAAM,OAAO,CAAC;AAMhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAyBhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAwF9C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAuJpD,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAmD,MAAM,OAAO,CAAC;AAMhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAyBhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAwF9C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAiLpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Tabs/Tabs.js

@@ -71,7 +71,7 @@ const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentT
     const wrapperRef = useConsolidatedRef(ref, setWrapper);
     const { level } = useContext(TabsContext);
     const [hasScrollBar, setHasScrollBar] = useState(false);
-    const { components: { tabs: { detached: tabsDetached } } } = useTheme();
+    const { base: { spacing: themeSpacing }, components: { tabs: { detached: tabsDetached } } } = useTheme();
     // Used to keep a reference for every tab in order to focus them with key presses
     const [tabRefMap, getTabRef] = useRefMap();
     // Handles arrow keypresses for changing the focus
@@ -106,6 +106,29 @@ const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentT
         const currentTabEl = tabRefMap.get(currentTabId);
         currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }, [currentTabId]);
+    useEffect(() => {
+        const currentTabEl = tabRefMap.get(currentTabId);
+        if (!currentTabEl || !wrapper)
+            return;
+        // raf to ensure layout is stable before reading offset values
+        const rafId = requestAnimationFrame(() => {
+            if (type === 'horizontal') {
+                // Horizontal tabs need left position and width for sliding animation
+                const left = currentTabEl.offsetLeft;
+                const width = currentTabEl.offsetWidth;
+                wrapper.style.setProperty('--indicator-left', `${left}px`);
+                wrapper.style.setProperty('--indicator-width', `${width}px`);
+            }
+            else {
+                // Vertical tabs need height and top position for sliding animation
+                const height = currentTabEl.offsetHeight;
+                const top = currentTabEl.offsetTop;
+                wrapper.style.setProperty('--indicator-height', `${height}px`);
+                wrapper.style.setProperty('--indicator-top', `${top}px`);
+            }
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [currentTabId, type, tabRefMap, wrapper, tabsDetached, themeSpacing]);
     useEffect(() => {
         if (!wrapper)
             return;

package/lib/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, KeyboardEvent, MouseEvent, PropsWithoutRef, Ref } from 'react';\nimport { useContext, forwardRef, useEffect, useMemo, useRef, useState, Fragment } from 'react';\n\nimport SearchInput from '../SearchInput';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport type { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useI18n,\n  useTheme,\n  useUID,\n  useRefMap\n} from '../../hooks';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport { registerIcon } from '../Icon/Icon';\nimport type { MenuItemProps, MenuProps } from '../Menu';\nimport { createStringMatcher, debounce } from '../../utils';\n\nimport TabsContext from './TabsContext';\nimport {\n  StyledErrorIcon,\n  StyledAllTabsButton,\n  StyledTabs,\n  StylesAllTabsButtonWrapper,\n  StyledAllTabsWrapper,\n  StyledSeparator\n} from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\nimport Tab from './Tab';\n\nregisterIcon(arrowMicroDownIcon);\n\ntype TabItem = TabsProps['tabs'][number];\n\nconst AllTabsButton = ({\n  tabs,\n  tabRefMap,\n  currentTabId,\n  onTabClick\n}: Pick<TabsProps, 'tabs' | 'currentTabId' | 'onTabClick'> & {\n  tabRefMap: Map<string, HTMLAnchorElement | HTMLButtonElement | null>;\n}) => {\n  const menuId = useUID();\n  const t = useI18n();\n  const menuButtonRef = useRef<HTMLButtonElement>(null);\n  const [search, setSearch] = useState('');\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const [focusControlEl, setFocusControlEl] = useState<MenuProps['focusControlEl']>();\n\n  const searchRegex = createStringMatcher(search);\n\n  const itemsToRender = useMemo(() => {\n    return tabs\n      .filter(({ name }) => searchRegex.test(name))\n      .map(({ id, name, count, disabled, errors }) => {\n        const selected = id === currentTabId;\n        const item: MenuItemProps = { id, primary: name, selected, count, disabled };\n        if (errors) {\n          item.visual = <StyledErrorIcon name='warn-solid' />;\n        }\n        return item;\n      });\n  }, [tabs, search, currentTabId]);\n\n  useEscape(() => {\n    if (!search) {\n      menuButtonRef.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n      menuButtonRef.current?.focus();\n    }\n  }, searchEleRef);\n\n  return (\n    <StyledAllTabsButton\n      ref={menuButtonRef}\n      text={t('all_tabs')}\n      iconOnly\n      variant='simple'\n      icon='arrow-micro-down'\n      menu={{\n        listId: menuId,\n        mode: 'single-select',\n        items: itemsToRender,\n        focusControlEl,\n        accent: search ? searchRegex : undefined,\n        onItemClick: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          onTabClick?.(id, event);\n          setSearch('');\n          tabRefMap.get(id)?.focus();\n        },\n        header: (\n          <SearchInput\n            ref={searchEleRef}\n            onSearchChange={setSearch}\n            value={search}\n            role='searchbox'\n            aria-controls={menuId}\n          />\n        )\n      }}\n      popover={{\n        onHide: () => {\n          setFocusControlEl(undefined);\n          setSearch('');\n        },\n        onShow: () => {\n          if (searchEleRef.current) {\n            setFocusControlEl(searchEleRef.current);\n            searchEleRef.current.focus();\n          }\n        }\n      }}\n    />\n  );\n};\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(function Tabs(\n  {\n    tabs = [],\n    type = 'horizontal',\n    currentTabId,\n    onTabClick,\n    ...restProps\n  }: PropsWithoutRef<TabsProps>,\n  ref: Ref<HTMLElement>\n) {\n  const [wrapper, setWrapper] = useElement<HTMLDivElement>();\n  const wrapperRef = useConsolidatedRef(ref, setWrapper);\n  const { level } = useContext(TabsContext);\n  const [hasScrollBar, setHasScrollBar] = useState(false);\n  const {\n    components: {\n      tabs: { detached: tabsDetached }\n    }\n  } = useTheme();\n\n  // Used to keep a reference for every tab in order to focus them with key presses\n  const [tabRefMap, getTabRef] = useRefMap<HTMLButtonElement | HTMLAnchorElement | null>();\n\n  // Handles arrow keypresses for changing the focus\n  const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n    if (tabs.length) {\n      const { key } = event;\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n        const nextTab = tabRefMap.get(tabs[nextIndex].id) as HTMLButtonElement;\n\n        if (!nextTab?.disabled) {\n          nextTab?.focus();\n        } else {\n          changeTabFocus(event, nextIndex);\n        }\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n        const prevTab = tabRefMap.get(tabs[prevIndex].id) as HTMLButtonElement;\n        if (!prevTab?.disabled) {\n          prevTab?.focus();\n        } else {\n          changeTabFocus(event, prevIndex);\n        }\n      }\n    }\n  };\n\n  useAfterInitialEffect(() => {\n    const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });\n    wrapperRef.current?.dispatchEvent(event);\n\n    const currentTabEl = tabRefMap.get(currentTabId);\n    currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [currentTabId]);\n\n  useEffect(() => {\n    if (!wrapper) return;\n\n    const ro = new ResizeObserver(\n      debounce(([entry]) => {\n        if (!entry?.target.isConnected || !(entry.target instanceof HTMLElement)) return;\n\n        setHasScrollBar(entry.target.scrollWidth > entry.target.offsetWidth);\n      }, 1)\n    );\n\n    ro.observe(wrapper);\n\n    return () => {\n      ro.disconnect();\n    };\n  }, [wrapper]);\n\n  const shouldRenderAllTabsButton = type === 'horizontal' && hasScrollBar;\n\n  const TabList = (\n    <Flex\n      {...restProps}\n      container={{\n        direction: type !== 'horizontal' ? 'column' : undefined\n      }}\n      item={{ shrink: 0 }}\n      as={StyledTabs}\n      ref={wrapperRef}\n      role='tablist'\n      aria-orientation={type}\n      hasScrollBar={hasScrollBar}\n      level={level}\n    >\n      {tabs.map((tab: TabItem, i) => {\n        const { href, name, count, id, disabled, errors } = tab;\n        const selected = id === currentTabId;\n\n        return (\n          <Fragment key={id}>\n            {level > 1 && !tabsDetached && (\n              <StyledSeparator\n                transparent={\n                  selected ||\n                  (i === 0 ? !shouldRenderAllTabsButton : tabs[i - 1].id === currentTabId)\n                }\n              />\n            )}\n            <Tab\n              id={id}\n              aria-selected={selected}\n              aria-controls={`${id}-panel`}\n              content={name}\n              count={count}\n              href={href}\n              selected={selected}\n              onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                onTabClick?.(id, event);\n              }}\n              role='tab'\n              ref={getTabRef(id)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                  e.preventDefault();\n                  changeTabFocus(e, i);\n                }\n              }}\n              as={href ? Link : undefined}\n              tabIndex={selected ? undefined : -1}\n              aria-label={name}\n              type={type}\n              disabled={disabled}\n              errors={errors}\n            />\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n\n  return shouldRenderAllTabsButton ? (\n    <Flex container={{ alignItems: 'stretch' }} as={StyledAllTabsWrapper} level={level}>\n      <Flex container as={StylesAllTabsButtonWrapper}>\n        <AllTabsButton\n          tabs={tabs}\n          tabRefMap={tabRefMap}\n          currentTabId={currentTabId}\n          onTabClick={onTabClick}\n        />\n      </Flex>\n      {TabList}\n    </Flex>\n  ) : (\n    TabList\n  );\n});\n\nexport default Tabs;\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACV,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,kBAAkB,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5D,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,UAAU,EACV,0BAA0B,EAC1B,oBAAoB,EACpB,eAAe,EAChB,MAAM,eAAe,CAAC;AAEvB,OAAO,GAAG,MAAM,OAAO,CAAC;AAExB,YAAY,CAAC,kBAAkB,CAAC,CAAC;AAIjC,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,UAAU,EAGX,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAA+B,CAAC;IAEpF,MAAM,WAAW,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAEhD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,IAAI;aACR,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC5C,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;YAC7C,MAAM,QAAQ,GAAG,EAAE,KAAK,YAAY,CAAC;YACrC,MAAM,IAAI,GAAkB,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;YAC7E,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,MAAM,GAAG,KAAC,eAAe,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC;YACtD,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,IAAI,aAAa,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;YACtF,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC;IACH,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO,CACL,KAAC,mBAAmB,IAClB,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,CAAC,CAAC,UAAU,CAAC,EACnB,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,aAAa;YACpB,cAAc;YACd,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;YACxC,WAAW,EAAE,CAAC,EAAU,EAAE,KAAwD,EAAE,EAAE;gBACpF,UAAU,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;gBACxB,SAAS,CAAC,EAAE,CAAC,CAAC;gBACd,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;YAC7B,CAAC;YACD,MAAM,EAAE,CACN,KAAC,WAAW,IACV,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,SAAS,EACzB,KAAK,EAAE,MAAM,EACb,IAAI,EAAC,WAAW,mBACD,MAAM,GACrB,CACH;SACF,EACD,OAAO,EAAE;YACP,MAAM,EAAE,GAAG,EAAE;gBACX,iBAAiB,CAAC,SAAS,CAAC,CAAC;gBAC7B,SAAS,CAAC,EAAE,CAAC,CAAC;YAChB,CAAC;YACD,MAAM,EAAE,GAAG,EAAE;gBACX,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;oBACzB,iBAAiB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;oBACxC,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBAC/B,CAAC;YACH,CAAC;SACF,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,IAAI,GAAgD,UAAU,CAAC,SAAS,IAAI,CAChF,EACE,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,YAAY,EACnB,YAAY,EACZ,UAAU,EACV,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC3D,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IACvD,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,EAC/B,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EACjC,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,iFAAiF;IACjF,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,SAAS,EAAgD,CAAC;IAEzF,kDAAkD;IAClD,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,KAAa,EAAQ,EAAE;QACnE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YACtB,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,WAAW,EAAE,CAAC;gBAChD,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC1D,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAsB,CAAC;gBAEvE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;oBACvB,OAAO,EAAE,KAAK,EAAE,CAAC;gBACnB,CAAC;qBAAM,CAAC;oBACN,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;iBAAM,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACpD,MAAM,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;gBAC5D,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAsB,CAAC;gBACvE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;oBACvB,OAAO,EAAE,KAAK,EAAE,CAAC;gBACnB,CAAC;qBAAM,CAAC;oBACN,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,oBAAoB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACjF,UAAU,CAAC,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;QAEzC,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QACjD,YAAY,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QAEjD,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO;YAAE,OAAO;QAEtC,8DAA8D;QAC9D,MAAM,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACvC,IAAI,IAAI,KAAK,YAAY,EAAE,CAAC;gBAC1B,qEAAqE;gBACrE,MAAM,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC;gBACrC,MAAM,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC;gBACvC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,kBAAkB,EAAE,GAAG,IAAI,IAAI,CAAC,CAAC;gBAC3D,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;YAC/D,CAAC;iBAAM,CAAC;gBACN,mEAAmE;gBACnE,MAAM,MAAM,GAAG,YAAY,CAAC,YAAY,CAAC;gBACzC,MAAM,GAAG,GAAG,YAAY,CAAC,SAAS,CAAC;gBACnC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;gBAC/D,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,GAAG,IAAI,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,EAAE,GAAG,IAAI,cAAc,CAC3B,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACnB,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,YAAY,WAAW,CAAC;gBAAE,OAAO;YAEjF,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QACvE,CAAC,EAAE,CAAC,CAAC,CACN,CAAC;QAEF,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEpB,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,UAAU,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,yBAAyB,GAAG,IAAI,KAAK,YAAY,IAAI,YAAY,CAAC;IAExE,MAAM,OAAO,GAAG,CACd,KAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;SACxD,EACD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,SAAS,sBACI,IAAI,EACtB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,YAEX,IAAI,CAAC,GAAG,CAAC,CAAC,GAAY,EAAE,CAAC,EAAE,EAAE;YAC5B,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC;YACxD,MAAM,QAAQ,GAAG,EAAE,KAAK,YAAY,CAAC;YAErC,OAAO,CACL,MAAC,QAAQ,eACN,KAAK,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,CAC7B,KAAC,eAAe,IACd,WAAW,EACT,QAAQ;4BACR,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,YAAY,CAAC,GAE1E,CACH,EACD,KAAC,GAAG,IACF,EAAE,EAAE,EAAE,mBACS,QAAQ,mBACR,GAAG,EAAE,QAAQ,EAC5B,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,KAAwD,EAAE,EAAE;4BACpE,UAAU,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;wBAC1B,CAAC,EACD,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,SAAS,CAAC,EAAE,CAAC,EAClB,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;4BAC9B,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gCACxE,CAAC,CAAC,cAAc,EAAE,CAAC;gCACnB,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;4BACvB,CAAC;wBACH,CAAC,EACD,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC3B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,gBACvB,IAAI,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,GACd,KAlCW,EAAE,CAmCN,CACZ,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;IAEF,OAAO,yBAAyB,CAAC,CAAC,CAAC,CACjC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,oBAAoB,EAAE,KAAK,EAAE,KAAK,aAChF,KAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,0BAA0B,YAC5C,KAAC,aAAa,IACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,GACG,EACN,OAAO,IACH,CACR,CAAC,CAAC,CAAC,CACF,OAAO,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import type { FunctionComponent, KeyboardEvent, MouseEvent, PropsWithoutRef, Ref } from 'react';\nimport { useContext, forwardRef, useEffect, useMemo, useRef, useState, Fragment } from 'react';\n\nimport SearchInput from '../SearchInput';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport type { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useI18n,\n  useTheme,\n  useUID,\n  useRefMap\n} from '../../hooks';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport { registerIcon } from '../Icon/Icon';\nimport type { MenuItemProps, MenuProps } from '../Menu';\nimport { createStringMatcher, debounce } from '../../utils';\n\nimport TabsContext from './TabsContext';\nimport {\n  StyledErrorIcon,\n  StyledAllTabsButton,\n  StyledTabs,\n  StylesAllTabsButtonWrapper,\n  StyledAllTabsWrapper,\n  StyledSeparator\n} from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\nimport Tab from './Tab';\n\nregisterIcon(arrowMicroDownIcon);\n\ntype TabItem = TabsProps['tabs'][number];\n\nconst AllTabsButton = ({\n  tabs,\n  tabRefMap,\n  currentTabId,\n  onTabClick\n}: Pick<TabsProps, 'tabs' | 'currentTabId' | 'onTabClick'> & {\n  tabRefMap: Map<string, HTMLAnchorElement | HTMLButtonElement | null>;\n}) => {\n  const menuId = useUID();\n  const t = useI18n();\n  const menuButtonRef = useRef<HTMLButtonElement>(null);\n  const [search, setSearch] = useState('');\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const [focusControlEl, setFocusControlEl] = useState<MenuProps['focusControlEl']>();\n\n  const searchRegex = createStringMatcher(search);\n\n  const itemsToRender = useMemo(() => {\n    return tabs\n      .filter(({ name }) => searchRegex.test(name))\n      .map(({ id, name, count, disabled, errors }) => {\n        const selected = id === currentTabId;\n        const item: MenuItemProps = { id, primary: name, selected, count, disabled };\n        if (errors) {\n          item.visual = <StyledErrorIcon name='warn-solid' />;\n        }\n        return item;\n      });\n  }, [tabs, search, currentTabId]);\n\n  useEscape(() => {\n    if (!search) {\n      menuButtonRef.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n      menuButtonRef.current?.focus();\n    }\n  }, searchEleRef);\n\n  return (\n    <StyledAllTabsButton\n      ref={menuButtonRef}\n      text={t('all_tabs')}\n      iconOnly\n      variant='simple'\n      icon='arrow-micro-down'\n      menu={{\n        listId: menuId,\n        mode: 'single-select',\n        items: itemsToRender,\n        focusControlEl,\n        accent: search ? searchRegex : undefined,\n        onItemClick: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          onTabClick?.(id, event);\n          setSearch('');\n          tabRefMap.get(id)?.focus();\n        },\n        header: (\n          <SearchInput\n            ref={searchEleRef}\n            onSearchChange={setSearch}\n            value={search}\n            role='searchbox'\n            aria-controls={menuId}\n          />\n        )\n      }}\n      popover={{\n        onHide: () => {\n          setFocusControlEl(undefined);\n          setSearch('');\n        },\n        onShow: () => {\n          if (searchEleRef.current) {\n            setFocusControlEl(searchEleRef.current);\n            searchEleRef.current.focus();\n          }\n        }\n      }}\n    />\n  );\n};\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(function Tabs(\n  {\n    tabs = [],\n    type = 'horizontal',\n    currentTabId,\n    onTabClick,\n    ...restProps\n  }: PropsWithoutRef<TabsProps>,\n  ref: Ref<HTMLElement>\n) {\n  const [wrapper, setWrapper] = useElement<HTMLDivElement>();\n  const wrapperRef = useConsolidatedRef(ref, setWrapper);\n  const { level } = useContext(TabsContext);\n  const [hasScrollBar, setHasScrollBar] = useState(false);\n  const {\n    base: { spacing: themeSpacing },\n    components: {\n      tabs: { detached: tabsDetached }\n    }\n  } = useTheme();\n\n  // Used to keep a reference for every tab in order to focus them with key presses\n  const [tabRefMap, getTabRef] = useRefMap<HTMLButtonElement | HTMLAnchorElement | null>();\n\n  // Handles arrow keypresses for changing the focus\n  const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n    if (tabs.length) {\n      const { key } = event;\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n        const nextTab = tabRefMap.get(tabs[nextIndex].id) as HTMLButtonElement;\n\n        if (!nextTab?.disabled) {\n          nextTab?.focus();\n        } else {\n          changeTabFocus(event, nextIndex);\n        }\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n        const prevTab = tabRefMap.get(tabs[prevIndex].id) as HTMLButtonElement;\n        if (!prevTab?.disabled) {\n          prevTab?.focus();\n        } else {\n          changeTabFocus(event, prevIndex);\n        }\n      }\n    }\n  };\n\n  useAfterInitialEffect(() => {\n    const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });\n    wrapperRef.current?.dispatchEvent(event);\n\n    const currentTabEl = tabRefMap.get(currentTabId);\n    currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [currentTabId]);\n\n  useEffect(() => {\n    const currentTabEl = tabRefMap.get(currentTabId);\n\n    if (!currentTabEl || !wrapper) return;\n\n    // raf to ensure layout is stable before reading offset values\n    const rafId = requestAnimationFrame(() => {\n      if (type === 'horizontal') {\n        // Horizontal tabs need left position and width for sliding animation\n        const left = currentTabEl.offsetLeft;\n        const width = currentTabEl.offsetWidth;\n        wrapper.style.setProperty('--indicator-left', `${left}px`);\n        wrapper.style.setProperty('--indicator-width', `${width}px`);\n      } else {\n        // Vertical tabs need height and top position for sliding animation\n        const height = currentTabEl.offsetHeight;\n        const top = currentTabEl.offsetTop;\n        wrapper.style.setProperty('--indicator-height', `${height}px`);\n        wrapper.style.setProperty('--indicator-top', `${top}px`);\n      }\n    });\n\n    return () => cancelAnimationFrame(rafId);\n  }, [currentTabId, type, tabRefMap, wrapper, tabsDetached, themeSpacing]);\n\n  useEffect(() => {\n    if (!wrapper) return;\n\n    const ro = new ResizeObserver(\n      debounce(([entry]) => {\n        if (!entry?.target.isConnected || !(entry.target instanceof HTMLElement)) return;\n\n        setHasScrollBar(entry.target.scrollWidth > entry.target.offsetWidth);\n      }, 1)\n    );\n\n    ro.observe(wrapper);\n\n    return () => {\n      ro.disconnect();\n    };\n  }, [wrapper]);\n\n  const shouldRenderAllTabsButton = type === 'horizontal' && hasScrollBar;\n\n  const TabList = (\n    <Flex\n      {...restProps}\n      container={{\n        direction: type !== 'horizontal' ? 'column' : undefined\n      }}\n      item={{ shrink: 0 }}\n      as={StyledTabs}\n      ref={wrapperRef}\n      role='tablist'\n      aria-orientation={type}\n      hasScrollBar={hasScrollBar}\n      level={level}\n    >\n      {tabs.map((tab: TabItem, i) => {\n        const { href, name, count, id, disabled, errors } = tab;\n        const selected = id === currentTabId;\n\n        return (\n          <Fragment key={id}>\n            {level > 1 && !tabsDetached && (\n              <StyledSeparator\n                transparent={\n                  selected ||\n                  (i === 0 ? !shouldRenderAllTabsButton : tabs[i - 1].id === currentTabId)\n                }\n              />\n            )}\n            <Tab\n              id={id}\n              aria-selected={selected}\n              aria-controls={`${id}-panel`}\n              content={name}\n              count={count}\n              href={href}\n              selected={selected}\n              onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                onTabClick?.(id, event);\n              }}\n              role='tab'\n              ref={getTabRef(id)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                  e.preventDefault();\n                  changeTabFocus(e, i);\n                }\n              }}\n              as={href ? Link : undefined}\n              tabIndex={selected ? undefined : -1}\n              aria-label={name}\n              type={type}\n              disabled={disabled}\n              errors={errors}\n            />\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n\n  return shouldRenderAllTabsButton ? (\n    <Flex container={{ alignItems: 'stretch' }} as={StyledAllTabsWrapper} level={level}>\n      <Flex container as={StylesAllTabsButtonWrapper}>\n        <AllTabsButton\n          tabs={tabs}\n          tabRefMap={tabRefMap}\n          currentTabId={currentTabId}\n          onTabClick={onTabClick}\n        />\n      </Flex>\n      {TabList}\n    </Flex>\n  ) : (\n    TabList\n  );\n});\n\nexport default Tabs;\n"]}

package/lib/components/Tabs/Tabs.styles.d.ts

@@ -1,16 +1,18 @@
-export declare const StylesAllTabsButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StylesAllTabsButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTabs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     hasScrollBar: boolean;
     level: number;
-}, never>;
-export declare const StyledAllTabsButton: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../MenuButton").MenuButtonProps> & {
+}>> & string;
+export declare const StyledAllTabsButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../MenuButton").MenuButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../MenuButton").MenuButtonProps> & {
     getTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
-}, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledErrorIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Icon").IconProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAllTabsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+}, keyof import("react").Component<any, {}, any>>;
+export declare const StyledErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Icon").IconProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledAllTabsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     level: number;
-}, never>;
-export declare const StyledSeparator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+}>> & string;
+export declare const StyledSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     transparent: boolean;
-}, never>;
+}>> & string;
 //# sourceMappingURL=Tabs.styles.d.ts.map

package/lib/components/Tabs/Tabs.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,0BAA0B,yGAmBtC,CAAC;AAIF,eAAO,MAAM,UAAU;kBACP,OAAO;WACd,MAAM;SAwHb,CAAC;AAIH,eAAO,MAAM,mBAAmB;;uDAI/B,CAAC;AAIF,eAAO,MAAM,eAAe,0KAI3B,CAAC;AAIF,eAAO,MAAM,oBAAoB;WACxB,MAAM;SA6Bd,CAAC;AAIF,eAAO,MAAM,eAAe;iBAA8B,OAAO;SAOhE,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,0BAA0B,6NAmBtC,CAAC;AAIF,eAAO,MAAM,UAAU;kBACP,OAAO;WACd,MAAM;YAwOb,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;;iDAI/B,CAAC;AAIF,eAAO,MAAM,eAAe,kYAI3B,CAAC;AAIF,eAAO,MAAM,oBAAoB;WACxB,MAAM;YAoCd,CAAC;AAIF,eAAO,MAAM,eAAe;iBAA8B,OAAO;YAOhE,CAAC"}