@gobolt/genesis 0.2.0 → 0.2.2

package/dist/components/Table/TableControls/TableControls.js

@@ -0,0 +1,36 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import i from "./PrimaryTableControlsRow.js";
+import c from "./SecondaryTableControlsRow.js";
+const m = ({
+  primaryTableRowData: o,
+  secondaryTableRowData: r,
+  onChange: n
+}) => {
+  const e = (s) => {
+    n(s);
+  }, l = (s) => {
+    n(s);
+  };
+  return /* @__PURE__ */ d("div", { "data-testid": "TableControls", style: { margin: "16px 0px" }, children: [
+    /* @__PURE__ */ t(
+      i,
+      {
+        sortOptions: o.sortOptions,
+        searchByPlaceholder: o.searchByPlaceholder,
+        isSortedAscending: o.isSortedAscending,
+        onChange: e
+      }
+    ),
+    r ? /* @__PURE__ */ t(
+      c,
+      {
+        groups: r.groups,
+        totalRecords: r.totalRecords,
+        onChange: l
+      }
+    ) : null
+  ] });
+};
+export {
+  m as default
+};

package/dist/components/Table/TableWithControls/TableWithControls.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("react/jsx-runtime"),g=require("../TableControls/TableControls.cjs"),i=require("../Table.cjs"),d=({tableData:s,tableControlsData:l,onChange:n})=>{const{primaryTableRowData:r,secondaryTableRowData:c}=l,{dataSource:b,columns:u,rowSelection:T}=s,h=e=>{n(e)},C=(e,a,t)=>{console.log("Table changed:",e,a,t),n({event:"tableChange",payload:{pagination:e,filters:a,sorter:t}})};return o.jsxs(o.Fragment,{children:[o.jsx(g,{primaryTableRowData:r,secondaryTableRowData:c,onChange:h}),o.jsx(i,{dataSource:b,columns:u,rowSelection:T,onChange:C})]})};module.exports=d;

package/dist/components/Table/TableWithControls/TableWithControls.d.ts

@@ -1,12 +1,12 @@
 import { TableProps } from '../../..';
-import { TableControlsProps } from '../TableControls';
+import { TableControlsData } from '../TableControls/TableControls';
 export interface TableWithControlsProps {
-    tableControlsData: TableControlsProps;
+    tableControlsData: TableControlsData;
     tableData: TableProps<Record<string, any>>;
-    onUpdate: (event: {
+    onChange: (event: {
         event: string;
         payload: any;
     }) => void;
 }
-declare const TableWithControls: ({ tableData, tableControlsData, onUpdate, }: TableWithControlsProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableWithControls: ({ tableData, tableControlsData, onChange, }: TableWithControlsProps) => import("react/jsx-runtime").JSX.Element;
 export default TableWithControls;

package/dist/components/Table/TableWithControls/TableWithControls.js

@@ -0,0 +1,39 @@
+import { jsxs as h, Fragment as m, jsx as l } from "react/jsx-runtime";
+import g from "../TableControls/TableControls.js";
+import d from "../Table.js";
+const x = ({
+  tableData: t,
+  tableControlsData: r,
+  onChange: a
+}) => {
+  const { primaryTableRowData: s, secondaryTableRowData: c } = r, { dataSource: b, columns: C, rowSelection: T } = t;
+  return /* @__PURE__ */ h(m, { children: [
+    /* @__PURE__ */ l(
+      g,
+      {
+        primaryTableRowData: s,
+        secondaryTableRowData: c,
+        onChange: (o) => {
+          a(o);
+        }
+      }
+    ),
+    /* @__PURE__ */ l(
+      d,
+      {
+        dataSource: b,
+        columns: C,
+        rowSelection: T,
+        onChange: (o, e, n) => {
+          console.log("Table changed:", o, e, n), a({
+            event: "tableChange",
+            payload: { pagination: o, filters: e, sorter: n }
+          });
+        }
+      }
+    )
+  ] });
+};
+export {
+  x as default
+};

package/dist/components/Table/TableWithControls/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './TableWithControls';
 export type { TableWithControlsProps } from './TableWithControls';
+export { useTableWithControls } from './useTableWithControls';

package/dist/components/Table/TableWithControls/useTableWithControls.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),T=require("../useTable.cjs"),C=require("../__mocks__/table-mocks.cjs"),l={primaryTableRowData:{sortOptions:[{value:"status",label:o.jsx("span",{children:"Status"})},{value:"address",label:o.jsx("span",{children:"Address"})},{value:"job_subtype",label:o.jsx("span",{children:"Type"})}],searchByPlaceholder:"Search by Address",isSortedAscending:!0},secondaryTableRowData:{groups:{orders:["Cancelled","Paused"],warehouse:["D2C"],availability:["Out of Stock"]},totalRecords:0}},O={columns:C.mockColumns,filters:{order:"asc"},fetchUrl:"/table/data",fetchOptions:{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({filters:{order:"asc",search:"",page:1,per_page:10,sort:null}})}},m=w=>{const[c,a]=r.useState(O),[n,d]=r.useState(l.secondaryTableRowData.groups),[u,f]=r.useState(l.primaryTableRowData),{secondaryTableRowData:b}=l,y={...b,groups:n},{dataSource:i,columns:p,rowSelection:h}=T.useTable(c);if(!i)return null;const g=(t,s)=>{const e={...n};e[t]=e[t].filter(S=>S!==s),d(e)};return{onChange:t=>{if(t.event==="inputChange"&&a(s=>({...s,filters:{...s.filters,search:t.payload},fetchOptions:{...s.fetchOptions,body:JSON.stringify({filters:{...s.filters,search:t.payload}})}})),t.event==="primaryChange"){const{value:s}=t.payload;a(e=>({...e,filters:{...e.filters,sort:s},fetchOptions:{...e.fetchOptions,body:JSON.stringify({filters:{...e.filters,sort:s}})}}))}if(t.event==="groupItemClick"){const{title:s,item:e}=t.payload;g(s,e)}if(t.event==="orderClick"){f(e=>({...e,isSortedAscending:!e.isSortedAscending}));const s=t.payload.value;a(e=>({...e,filters:{...e.filters,order:s},fetchOptions:{...e.fetchOptions,body:JSON.stringify({filters:{...e.filters,order:s}})}}))}},primaryTableRowData:u,secondaryTableRowData:y,dataSource:i,columns:p,rowSelection:h}};exports.useTableWithControls=m;

package/dist/components/Table/TableWithControls/useTableWithControls.d.ts

@@ -0,0 +1,31 @@
+import { UseTableConfig } from '../useTable';
+import { ActionEvent } from '../Table';
+export declare const useTableWithControls: (tableConfig: UseTableConfig) => {
+    onChange: (actionEvent: ActionEvent) => void;
+    primaryTableRowData: {
+        sortOptions: {
+            value: string;
+            label: import("react/jsx-runtime").JSX.Element;
+        }[];
+        searchByPlaceholder: string;
+        isSortedAscending: boolean;
+    };
+    secondaryTableRowData: {
+        groups: {
+            orders: string[];
+            warehouse: string[];
+            availability: string[];
+        };
+        totalRecords: number;
+    };
+    dataSource: Record<string, any>[];
+    columns: import('antd').TableColumnsType<Record<string, any>>;
+    rowSelection: {
+        type: import('../Table').SelectionType;
+        onChange: (selectedRowKeys: React.Key[], selectedRows: Record<string, any>[]) => void;
+        getCheckboxProps: (record: Record<string, any>) => {
+            disabled: boolean;
+            name: any;
+        };
+    };
+};

package/dist/components/Table/TableWithControls/useTableWithControls.js

@@ -0,0 +1,133 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as r } from "react";
+import { useTable as C } from "../useTable.js";
+import { mockColumns as T } from "../__mocks__/table-mocks.js";
+const l = {
+  primaryTableRowData: {
+    sortOptions: [
+      { value: "status", label: /* @__PURE__ */ a("span", { children: "Status" }) },
+      { value: "address", label: /* @__PURE__ */ a("span", { children: "Address" }) },
+      { value: "job_subtype", label: /* @__PURE__ */ a("span", { children: "Type" }) }
+    ],
+    searchByPlaceholder: "Search by Address",
+    isSortedAscending: !0
+  },
+  secondaryTableRowData: {
+    groups: {
+      orders: ["Cancelled", "Paused"],
+      warehouse: ["D2C"],
+      availability: ["Out of Stock"]
+    },
+    totalRecords: 0
+  }
+}, S = {
+  columns: T,
+  filters: {
+    order: "asc"
+  },
+  fetchUrl: "/table/data",
+  fetchOptions: {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      filters: {
+        order: "asc",
+        search: "",
+        page: 1,
+        per_page: 10,
+        sort: null
+      }
+    })
+  }
+}, J = (O) => {
+  const [c, o] = r(
+    S
+  ), [i, d] = r(
+    l.secondaryTableRowData.groups
+  ), [f, u] = r(
+    l.primaryTableRowData
+  ), { secondaryTableRowData: p } = l, y = {
+    ...p,
+    groups: i
+  }, { dataSource: n, columns: b, rowSelection: h } = C(c);
+  if (!n) return null;
+  const g = (t, s) => {
+    const e = { ...i };
+    e[t] = e[t].filter((m) => m !== s), d(e);
+  };
+  return {
+    onChange: (t) => {
+      if (t.event === "inputChange" && o((s) => ({
+        ...s,
+        filters: {
+          ...s.filters,
+          search: t.payload
+        },
+        fetchOptions: {
+          ...s.fetchOptions,
+          body: JSON.stringify({
+            filters: {
+              ...s.filters,
+              search: t.payload
+            }
+          })
+        }
+      })), t.event === "primaryChange") {
+        const { value: s } = t.payload;
+        o((e) => ({
+          ...e,
+          filters: {
+            ...e.filters,
+            sort: s
+          },
+          fetchOptions: {
+            ...e.fetchOptions,
+            body: JSON.stringify({
+              filters: {
+                ...e.filters,
+                sort: s
+              }
+            })
+          }
+        }));
+      }
+      if (t.event === "groupItemClick") {
+        const { title: s, item: e } = t.payload;
+        g(s, e);
+      }
+      if (t.event === "orderClick") {
+        u((e) => ({
+          ...e,
+          isSortedAscending: !e.isSortedAscending
+        }));
+        const s = t.payload.value;
+        o((e) => ({
+          ...e,
+          filters: {
+            ...e.filters,
+            order: s
+          },
+          fetchOptions: {
+            ...e.fetchOptions,
+            body: JSON.stringify({
+              filters: {
+                ...e.filters,
+                order: s
+              }
+            })
+          }
+        }));
+      }
+    },
+    primaryTableRowData: f,
+    secondaryTableRowData: y,
+    dataSource: n,
+    columns: b,
+    rowSelection: h
+  };
+};
+export {
+  J as useTableWithControls
+};

package/dist/components/Table/__mocks__/table-mocks.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),o=require("../../Badge/Badge.cjs"),a=e=>e&&e.replace(/([A-Z])/g," $1").replace(/^./,t=>t.toUpperCase()),c=[{key:"number",title:"Number",dataIndex:"number"},{key:"timeslot",title:"Timeslot",dataIndex:"timerange"},{key:"status",title:"Status",dataIndex:"status",render:e=>{const t={in_progress:"warning",scheduled:"generic",completed:"success"},r=e==="in_progress"?"in progress":e;return n.createElement(o,{label:a(r),state:t[e]})}},{key:"address",title:"Address",render:e=>{const{address:{nickname:t,address:r}}=e;return t?`${t} (${r})`:r}},{title:"Type",dataIndex:"job_subtype",render:e=>{const t={delivery:"info",pickup:"success"};return n.createElement(o,{label:a(e),state:t[e]})}}],s=c.map(e=>({...e}));s[1].sorter=!0;s[2].sorter=!0;s[4].sorter=!0;exports.mockColumns=c;exports.mockColumnsWithSort=s;

package/dist/components/Table/__mocks__/table-mocks.js

@@ -0,0 +1,63 @@
+import a from "react";
+import n from "../../Badge/Badge.js";
+const o = (e) => e && e.replace(/([A-Z])/g, " $1").replace(/^./, (t) => t.toUpperCase()), c = [
+  {
+    key: "number",
+    title: "Number",
+    dataIndex: "number"
+  },
+  {
+    key: "timeslot",
+    title: "Timeslot",
+    dataIndex: "timerange"
+  },
+  {
+    key: "status",
+    title: "Status",
+    dataIndex: "status",
+    render: (e) => {
+      const t = {
+        in_progress: "warning",
+        scheduled: "generic",
+        completed: "success"
+      }, r = e === "in_progress" ? "in progress" : e;
+      return a.createElement(n, {
+        label: o(r),
+        state: t[e]
+      });
+    }
+  },
+  {
+    key: "address",
+    title: "Address",
+    render: (e) => {
+      const {
+        address: { nickname: t, address: r }
+      } = e;
+      return t ? `${t} (${r})` : r;
+    }
+  },
+  {
+    title: "Type",
+    dataIndex: "job_subtype",
+    render: (e) => {
+      const t = {
+        delivery: "info",
+        pickup: "success"
+      };
+      return a.createElement(n, {
+        label: o(e),
+        state: t[e]
+      });
+    }
+  }
+], s = c.map((e) => ({
+  ...e
+}));
+s[1].sorter = !0;
+s[2].sorter = !0;
+s[4].sorter = !0;
+export {
+  c as mockColumns,
+  s as mockColumnsWithSort
+};

package/dist/components/Table/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from './Table';
 export type { TableProps } from './Table';
+export { useTable } from './useTable';
+export type { UseTableConfig } from './useTable';

package/dist/components/Table/styles.cjs

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../utils/styled.cjs"),r=require("../../node_modules/antd/es/table/Table.cjs"),t=({colors:e,borderRadius:l,sizing:a})=>`
+  &.ant-table-wrapper {
+    // Add your custom styles here
+  }
+  
+  .ant-table {
+    // Add your custom table styles here
+  }
+
+  .ant-table-thead > tr > th {
+    // Add your custom header styles here
+  }
+
+  .ant-table-tbody > tr  {
+    // Add your custom row styles here
+  }
+
+  .ant-table-tbody > tr > td {
+    // Add your custom cell styles here
+    font-family: 'Inter', sans-serif;
+    font-size: 14px;
+  }
+`,o=s.styled(r)`
+  ${({theme:e})=>t(e)}
+`;exports.Table=o;exports.getGenesisClass=t;

package/dist/components/Table/styles.js

@@ -0,0 +1,31 @@
+import { styled as e } from "../../utils/styled.js";
+import r from "../../node_modules/antd/es/table/Table.js";
+const s = ({ colors: t, borderRadius: o, sizing: a }) => `
+  &.ant-table-wrapper {
+    // Add your custom styles here
+  }
+  
+  .ant-table {
+    // Add your custom table styles here
+  }
+
+  .ant-table-thead > tr > th {
+    // Add your custom header styles here
+  }
+
+  .ant-table-tbody > tr  {
+    // Add your custom row styles here
+  }
+
+  .ant-table-tbody > tr > td {
+    // Add your custom cell styles here
+    font-family: 'Inter', sans-serif;
+    font-size: 14px;
+  }
+`, n = e(r)`
+  ${({ theme: t }) => s(t)}
+`;
+export {
+  n as Table,
+  s as getGenesisClass
+};

package/dist/components/Table/useTable.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),D=(a,e)=>{if(!e||Array.isArray(e)&&e.length===0)return[...a];if(Array.isArray(e))return[...a].sort((s,i)=>{for(const r of e){if(!r.field)continue;const n=r.field,o=s[n],u=i[n];if(o<u)return r.order==="ascend"?-1:1;if(o>u)return r.order==="ascend"?1:-1}return 0});if(e.field){const s=e.field;return[...a].sort((i,r)=>{const n=i[s],o=r[s];return e.order==="ascend"?n<o?-1:n>o?1:0:e.order==="descend"?n<o?1:n>o?-1:0:0})}return[...a]},w=a=>{const{columns:e,filters:s=null,fetchUrl:i="/table/data",fetchOptions:r={method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(s)},selectionType:n="checkbox",simulateDelay:o=0}=a,[u,b]=l.useState([]),[h,f]=l.useState({dataSource:[],columns:[],error:null}),[y,g]=l.useState([]);l.useEffect(()=>{(async()=>{try{const S=(await(await fetch(i,r)).json()).data||[];b(S),f({dataSource:S,columns:e,error:null})}catch(t){console.error("Error fetching table data:",t),f({dataSource:[],columns:e,error:t instanceof Error?t:new Error(String(t))})}})()},[r]),l.useCallback(c=>{setTimeout(()=>{const t=D(u,c);f(d=>({...d,dataSource:t}))},o)},[u]);const p=l.useCallback((c,t)=>{console.log("Row Selected:",c,t),g(t)},[]);return{...h,rowSelection:{type:n,onChange:p,getCheckboxProps:c=>({disabled:!1,name:c.id})},selectedRows:y}};exports.useTable=w;

package/dist/components/Table/useTable.d.ts

@@ -0,0 +1,24 @@
+import { ColumnsType } from 'antd/es/table';
+import { SelectionType } from './Table';
+export type UseTableConfig = {
+    columns: ColumnsType<any>;
+    filters?: Record<string, any>;
+    fetchUrl?: string;
+    fetchOptions?: RequestInit;
+    selectionType?: SelectionType;
+    simulateDelay?: number;
+};
+export declare const useTable: <T extends Record<string, any>>(useTableConfig: any) => {
+    rowSelection: {
+        type: SelectionType;
+        onChange: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+        getCheckboxProps: (record: T) => {
+            disabled: boolean;
+            name: any;
+        };
+    };
+    selectedRows: T[];
+    dataSource: T[];
+    columns: ColumnsType<T>;
+    error: Error | null;
+};

package/dist/components/Table/useTable.js

@@ -0,0 +1,93 @@
+import { useState as f, useEffect as m, useCallback as S } from "react";
+const w = (a, e) => {
+  if (!e || Array.isArray(e) && e.length === 0)
+    return [...a];
+  if (Array.isArray(e))
+    return [...a].sort((c, i) => {
+      for (const r of e) {
+        if (!r.field) continue;
+        const n = r.field, o = c[n], l = i[n];
+        if (o < l) return r.order === "ascend" ? -1 : 1;
+        if (o > l) return r.order === "ascend" ? 1 : -1;
+      }
+      return 0;
+    });
+  if (e.field) {
+    const c = e.field;
+    return [...a].sort((i, r) => {
+      const n = i[c], o = r[c];
+      return e.order === "ascend" ? n < o ? -1 : n > o ? 1 : 0 : e.order === "descend" ? n < o ? 1 : n > o ? -1 : 0 : 0;
+    });
+  }
+  return [...a];
+}, C = (a) => {
+  const {
+    columns: e,
+    filters: c = null,
+    fetchUrl: i = "/table/data",
+    fetchOptions: r = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(c)
+    },
+    selectionType: n = "checkbox",
+    simulateDelay: o = 0
+  } = a, [l, y] = f([]), [p, u] = f({
+    dataSource: [],
+    columns: [],
+    error: null
+  }), [b, g] = f([]);
+  m(() => {
+    (async () => {
+      try {
+        const h = (await (await fetch(i, r)).json()).data || [];
+        y(h), u({
+          dataSource: h,
+          columns: e,
+          error: null
+        });
+      } catch (t) {
+        console.error("Error fetching table data:", t), u({
+          dataSource: [],
+          columns: e,
+          error: t instanceof Error ? t : new Error(String(t))
+        });
+      }
+    })();
+  }, [r]), S(
+    (s) => {
+      setTimeout(() => {
+        const t = w(l, s);
+        u((d) => ({
+          ...d,
+          dataSource: t
+        }));
+      }, o);
+    },
+    [l]
+  );
+  const D = S(
+    (s, t) => {
+      console.log("Row Selected:", s, t), g(t);
+    },
+    []
+  );
+  return {
+    ...p,
+    rowSelection: {
+      type: n,
+      onChange: D,
+      getCheckboxProps: (s) => ({
+        disabled: !1,
+        // Add your disable logic here
+        name: s.id
+      })
+    },
+    selectedRows: b
+  };
+};
+export {
+  C as useTable
+};

package/dist/components/Tabs/Tabs.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("react/jsx-runtime"),n=require("./styles.cjs"),o=({items:t,onChange:e,selectedId:s})=>{const r=t.map(({id:a,label:c})=>({key:a,label:c}));return i.jsx(n.Tabs,{items:r,activeKey:s,onChange:e,type:"card",state:"active"})};module.exports=o;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Tabs as c } from "./styles.js";
+const n = ({ items: t, onChange: a, selectedId: e }) => {
+  const s = t.map(
+    ({ id: r, label: m }) => ({
+      key: r,
+      label: m
+    })
+  );
+  return /* @__PURE__ */ o(
+    c,
+    {
+      items: s,
+      activeKey: e,
+      onChange: a,
+      type: "card",
+      state: "active"
+    }
+  );
+};
+export {
+  n as default
+};

package/dist/components/Tabs/styles.cjs

@@ -0,0 +1,96 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../utils/styled.cjs"),i=require("../../node_modules/antd/es/tabs/index.cjs"),r=({colors:t,borderRadius:e,sizing:a},s="primary",b="active")=>`
+  &.ant-tabs {
+    background: #F4F4F4;
+
+    .ant-tabs-nav {
+      margin-bottom: 0;
+    }
+    
+    /* Fix for tab navigation list to ensure no gaps */
+    .ant-tabs-nav-list {
+      overflow: hidden;
+      border-radius: 0;
+      display: flex;
+      box-sizing: border-box;
+    }
+    
+    .ant-tabs-tab {
+      background: #EEEEEE;
+      margin: 0; /* Important: no margin between tabs */
+      padding: 8px 16px;
+      border-radius: 0 !important;
+      float: none; /* Prevent default float behavior */
+      position: relative;
+      
+      /* Use single side borders to prevent double borders */
+      border-left: 1px solid ${t.surface.border};
+
+      margin-right: -2px;
+      user-select: none;
+      color: ${t.onsurface.copy};
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 14px;
+      display: flex;
+      
+      &:hover {
+        background: ${t.interactive.utility.hover};
+      }
+
+      border-top: 0px;
+      
+      &:first-child {
+        border-radius: 0 !important;
+        border-left: none;
+      }
+      
+      /* Only apply right border to the last tab */
+      &:last-child, &.ant-tabs-tab-btn:last-child {
+        border-right: 3px solid ${t.surface.border};
+      }
+
+      .ant-tabs-tab-btn {
+        color: #3E3E3E;
+        user-select: none;
+        background: transparent;
+
+        &:hover {
+          background: ${t.interactive.utility.hover};
+        }
+
+        &:focus {
+          background: transparent;
+        }
+
+        &:active {
+          background: transparent;
+        }
+      }
+    
+      &.ant-tabs-tab-active {
+        background: ${t.interactive.utility.active}; 
+        user-select: none;
+        
+        .ant-tabs-tab-btn {
+          color: #222222;
+        }
+
+        &:hover {
+          background: ${t.interactive.utility.hover};
+        }
+
+        &:focus {
+          background: ${t.interactive.utility.active};
+        }
+
+        &:active {
+          background: ${t.interactive.utility.active};
+        }
+      }
+    }
+  }
+`,o=n.styled(i)`
+  ${({theme:t,type:e,state:a})=>r(t,e,a)}
+`;exports.Tabs=o;exports.getGenesisClass=r;