@gobolt/genesis 0.0.10 → 0.0.11

package/dist/components/Layout/Content/ResponsiveContent.js

@@ -0,0 +1,81 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../../../providers/BreakpointThemeProvider.js";
+import { u as s, a } from "../../../Typography-DqI7RslA.js";
+import "../../Avatar/styles.js";
+import "../../Badge/styles.js";
+import "../../Breadcrumb/styles.js";
+import "../../Button/styles.js";
+import "../../Card/styles.js";
+import "../../Checkbox/styles.js";
+import "react";
+import "../../ErrorBoundaryFallback/styles.js";
+import "../../Input/styles.js";
+import "./styles.js";
+import "../../Message/styles.js";
+import "../../Notification/NotificationBadge/styles.js";
+import "../../Notification/styles.js";
+import "../../../styles-BSD221S5.js";
+import "../../Progress/styles.js";
+import "../../../styles/global-styles.js";
+import "../../Row/styles.js";
+import "../../Row/RowLabelValue/styles.js";
+import "../../Row/RowActions/styles.js";
+import "../../SegmentedControls/styles.js";
+import "../../Select/styles.js";
+import "../../Switch/styles.js";
+import "../../../styles-D9iYILpv.js";
+import "../../Tabs/styles.js";
+import "../../Tile/styles.js";
+import "../../Toast/styles.js";
+import "../../Tooltip/styles.js";
+const c = ({
+  width: i = 300,
+  height: r = 300,
+  backgroundColor: o = "#f0f0f0",
+  border: p = "1px solid #ccc",
+  isVertical: e
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    style: {
+      width: e ? "100%" : i,
+      height: e ? 180 : r,
+      minWidth: 180,
+      backgroundColor: o,
+      margin: 0,
+      // important to keep it 0 to prevent layout issues with margin collapsing
+      border: p,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      boxSizing: "border-box"
+    },
+    children: /* @__PURE__ */ t(a, { variant: "body1", children: "Content" })
+  }
+), L = ({
+  total: i = 3,
+  backgroundColor: r,
+  isSidebar: o = !1
+}) => {
+  const { breakpoint: p, theme: e } = s(), m = p === "narrow" || o;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        margin: 0,
+        padding: 0,
+        backgroundColor: r,
+        boxSizing: "border-box",
+        alignItems: "center",
+        justifyContent: "center",
+        display: "flex",
+        flexDirection: m ? "column" : "row",
+        gap: 8
+      },
+      children: [...Array(i)].map((d, n) => /* @__PURE__ */ t(c, { isVertical: m }, n))
+    }
+  );
+};
+export {
+  L as default
+};

package/dist/components/Layout/Content/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Content';
+export type { ContentProps } from './Content';

package/dist/components/Layout/Content/index.js

@@ -0,0 +1,4 @@
+import { Content as o } from "./Content.js";
+export {
+  o as default
+};

package/dist/components/Layout/Content/styles.d.ts

@@ -0,0 +1,11 @@
+import { GenesisTheme } from '../../../styles/theme/genesis-theme.types';
+
+interface StyledContentProps {
+    theme?: GenesisTheme;
+    $isColumn?: boolean;
+}
+export declare const getGenesisClass: ({ sizing }: {
+    sizing: any;
+}, $isColumn: any) => string;
+export declare const Content: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContentProps>> & string;
+export {};

package/dist/components/Layout/Content/styles.js

@@ -0,0 +1,16 @@
+import { d as o } from "../../../styled-components.browser.esm-CZ1XM4o4.js";
+const t = ({ sizing: i }, e) => `
+  display: flex;
+  flex-direction: ${e ? "column" : "row"};
+  width: 100%;
+  height: 100%;
+  padding: ${i.Size4}px;
+  margin: 0;
+  box-sizing: border-box;
+ `, r = o.div`
+  ${({ theme: i, $isColumn: e }) => t(i, e)}
+`;
+export {
+  r as Content,
+  t as getGenesisClass
+};

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface LayoutProps {
+    children?: React.ReactNode;
+    isColumn?: boolean;
+    style?: React.CSSProperties;
+}
+declare const Layout: ({ children, isColumn, style }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+export default Layout;

package/dist/components/Layout/Layout.js

@@ -0,0 +1,6 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Content as e } from "./Content/Content.js";
+const m = ({ children: t, isColumn: o = !1, style: a }) => /* @__PURE__ */ r(e, { "data-testid": "Layout", isColumn: o, style: a, children: t });
+export {
+  m as default
+};

package/dist/components/Layout/MainLayout/MainLayout.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export interface MainLayoutProps {
+    header?: React.ReactNode;
+    main?: React.ReactNode;
+    footer?: React.ReactNode;
+    sidebar?: React.ReactNode;
+}
+declare const MainLayout: ({ header, main, footer, sidebar }: MainLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export default MainLayout;

package/dist/components/Layout/MainLayout/MainLayout.js

@@ -0,0 +1,28 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import i from "../Layout.js";
+import { Sidebar as h, Header as o, Main as d, Footer as u } from "./styles.js";
+import "../../../providers/BreakpointThemeProvider.js";
+import { u as m } from "../../../Typography-DqI7RslA.js";
+const C = ({ header: n, main: l, footer: t, sidebar: c }) => {
+  const { breakpoint: s } = m();
+  return c ? s === "narrow" ? /* @__PURE__ */ e(i, { isColumn: !0, children: [
+    /* @__PURE__ */ r(h, { children: c }),
+    /* @__PURE__ */ r(o, { children: n }),
+    /* @__PURE__ */ r(d, { children: l }),
+    /* @__PURE__ */ r(u, { children: t })
+  ] }) : /* @__PURE__ */ e(i, { children: [
+    /* @__PURE__ */ r(i, { isColumn: !0, style: { width: "250px" }, children: /* @__PURE__ */ r(h, { children: c }) }),
+    /* @__PURE__ */ e(i, { isColumn: !0, style: { flex: 1 }, children: [
+      /* @__PURE__ */ r(o, { children: n }),
+      /* @__PURE__ */ r(d, { children: l }),
+      /* @__PURE__ */ r(u, { children: t })
+    ] })
+  ] }) : /* @__PURE__ */ e(i, { isColumn: !0, children: [
+    /* @__PURE__ */ r(o, { children: n }),
+    /* @__PURE__ */ r(d, { children: l }),
+    /* @__PURE__ */ r(u, { children: t })
+  ] });
+};
+export {
+  C as default
+};

package/dist/components/Layout/MainLayout/__stories__/MainLayout.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as MainLayout } from '../MainLayout';
+
+declare const meta: Meta<typeof MainLayout>;
+export default meta;
+type Story = StoryObj<typeof MainLayout>;
+export declare const MainColumn: Story;
+export declare const WithSidebar: Story;
+export declare const WithSidebarAndContent: Story;

package/dist/components/Layout/MainLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MainLayout';
+export type { MainLayoutProps } from './MainLayout';

package/dist/components/Layout/MainLayout/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./MainLayout.js";
+export {
+  o as default
+};

package/dist/components/Layout/MainLayout/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Sidebar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Header: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Main: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Footer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Layout/MainLayout/styles.js

@@ -0,0 +1,69 @@
+import { d } from "../../../styled-components.browser.esm-CZ1XM4o4.js";
+const n = d.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  margin: 0;
+  padding: ${({ theme: i }) => i.sizing.Size4 + "px"};
+
+  @media ${({ theme: i }) => i.breakpoints.wide} {
+    padding: ${({ theme: i }) => i.sizing.Size8 + "px"};
+  }
+
+  @media ${({ theme: i }) => i.breakpoints.medium} {
+    padding: ${({ theme: i }) => i.sizing.Size16 + "px"};
+  }
+`, a = d.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  margin: 0;
+  padding: ${({ theme: i }) => i.sizing.Size4 + "px"};
+
+  @media ${({ theme: i }) => i.breakpoints.wide} {
+    padding: ${({ theme: i }) => i.sizing.Size8 + "px"};
+  }
+
+  @media ${({ theme: i }) => i.breakpoints.medium} {
+    padding: ${({ theme: i }) => i.sizing.Size16 + "px"};
+  }
+`, p = d.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1;
+  width: 100%;
+  margin: 0;
+  padding: ${({ theme: i }) => i.sizing.Size4 + "px"};
+
+  @media ${({ theme: i }) => i.breakpoints.wide} {
+    padding: ${({ theme: i }) => i.sizing.Size8 + "px"};
+  }
+
+  @media ${({ theme: i }) => i.breakpoints.medium} {
+    padding: ${({ theme: i }) => i.sizing.Size16 + "px"};
+  }
+`, o = d.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  margin: 0;
+  padding: ${({ theme: i }) => i.sizing.Size4 + "px"};
+
+  @media ${({ theme: i }) => i.breakpoints.wide} {
+    padding: ${({ theme: i }) => i.sizing.Size8 + "px"};
+  }
+
+  @media ${({ theme: i }) => i.breakpoints.medium} {
+    padding: ${({ theme: i }) => i.sizing.Size16 + "px"};
+  }
+`;
+export {
+  o as Footer,
+  a as Header,
+  p as Main,
+  n as Sidebar
+};

package/dist/components/Layout/__stories__/Layout.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Layout } from '../Layout';
+
+declare const meta: Meta<typeof Layout>;
+export default meta;
+type Story = StoryObj<typeof Layout>;
+export declare const LayoutStory: Story;

package/dist/components/Layout/__tests__/Layout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Layout/__tests__/Layout.test.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { a as n } from "../../../setup-CKu7-AfI.js";
+import c from "../Layout.js";
+describe("<Layout />", () => {
+  let o;
+  beforeEach(() => {
+    o = {};
+  });
+  const e = () => n(/* @__PURE__ */ t(c, { ...o }));
+  it("should render correctly", () => {
+    const { container: r } = e();
+    expect(r).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,2 @@
+export { default } from './Layout';
+export type { LayoutProps } from './Layout';

package/dist/components/Layout/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Layout.js";
+export {
+  o as default
+};

package/dist/components/Message/Message.d.ts

@@ -1,12 +1,14 @@
+import { default as React } from 'react';
 import { STATE, SIZE } from '../../constants';
 
+export type MessageAction = {
+    label?: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
 export interface MessageProps {
     state: keyof typeof STATE;
     message: string;
-    action?: {
-        label?: string;
-        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    };
+    action?: MessageAction;
     size?: Extract<keyof typeof SIZE, "small" | "standard">;
 }
 declare const Message: ({ state, message, action, size, }: MessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Message/Message.js

@@ -1,58 +1,77 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { TYPOGRAPHY_VARIANT as f, STATE as s, SIZE as m } from "../../constants/index.js";
-import { n as p } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useState as f } from "react";
+import { TYPOGRAPHY_VARIANT as g, STATE as o, SIZE as d } from "../../constants/index.js";
+import "../Avatar/styles.js";
 import "../Badge/styles.js";
+import "../../providers/BreakpointThemeProvider.js";
+import { a as u, R } from "../../Typography-DqI7RslA.js";
+import { n as I } from "../../styled-components.browser.esm-CZ1XM4o4.js";
 import "../Breadcrumb/styles.js";
-import "../../providers/ThemeProvider.js";
-import { a as u, R as g, b as d, c as I, d as R, e as y } from "../../Typography-aGoDUl4R.js";
 import "../Button/styles.js";
+import "../Card/styles.js";
 import "../Checkbox/styles.js";
 import "../ErrorBoundaryFallback/styles.js";
 import "../Input/styles.js";
+import "../Layout/Content/styles.js";
+import "../Notification/NotificationBadge/styles.js";
 import "../Notification/styles.js";
-import "react";
+import "../../styles-BSD221S5.js";
+import "../Progress/styles.js";
+import "../../styles/global-styles.js";
+import "../Row/styles.js";
+import "../Row/RowLabelValue/styles.js";
+import "../Row/RowActions/styles.js";
+import "../SegmentedControls/styles.js";
 import "../Select/styles.js";
+import "../Switch/styles.js";
+import "../../styles-D9iYILpv.js";
+import "../Tabs/styles.js";
+import "../Tile/styles.js";
 import "../Toast/styles.js";
-import { MessageRow as T, MessageContent as w, ActionButton as h } from "./styles.js";
-const x = (o, r) => {
-  switch (o) {
-    case s.error:
+import "../Tooltip/styles.js";
+import { MessageRow as v, MessageContent as k, ActionButton as y } from "./styles.js";
+import { R as T, a as h, b as w, c as C } from "../../MinusCircleOutlined-Shz0RRQV.js";
+const x = (e, r) => {
+  switch (e) {
+    case o.error:
       return r.colors.status.error.onsurface;
-    case s.success:
+    case o.success:
       return r.colors.status.success.onsurface;
-    case s.warning:
+    case o.warning:
       return r.colors.status.warning.onsurface;
-    case s.generic:
+    case o.generic:
       return r.colors.status.generic.onsurface;
-    case s.info:
+    case o.info:
     default:
       return r.colors.status.info.onsurface;
   }
-}, A = (o, r) => {
-  switch (o) {
-    case s.warning:
-      return /* @__PURE__ */ e(y, { style: { color: r } });
-    case s.error:
-      return /* @__PURE__ */ e(R, { style: { color: r } });
-    case s.success:
-      return /* @__PURE__ */ e(I, { style: { color: r } });
-    case s.generic:
-      return /* @__PURE__ */ e(d, { style: { color: r } });
-    case s.info:
+}, A = (e, r) => {
+  switch (e) {
+    case o.warning:
+      return /* @__PURE__ */ t(C, { style: { color: r } });
+    case o.error:
+      return /* @__PURE__ */ t(w, { style: { color: r } });
+    case o.success:
+      return /* @__PURE__ */ t(R, { style: { color: r } });
+    case o.generic:
+      return /* @__PURE__ */ t(h, { style: { color: r } });
+    case o.info:
     default:
-      return /* @__PURE__ */ e(g, { style: { color: r } });
+      return /* @__PURE__ */ t(T, { style: { color: r } });
   }
-}, V = ({
-  state: o = s.info,
+}, ir = ({
+  state: e = o.info,
   message: r,
-  action: t,
-  size: l = m.standard
+  action: s,
+  size: i = d.standard
 }) => {
-  const n = p(), c = x(o, n), a = f.message;
-  return /* @__PURE__ */ i(T, { state: o, size: l, children: [
-    /* @__PURE__ */ i(w, { children: [
-      A(o, c),
-      /* @__PURE__ */ e(
+  const n = I(), c = x(e, n), a = g.message, [l, m] = f(
+    n.colors.interactive.link.active
+  );
+  return /* @__PURE__ */ p(v, { state: e, size: i, children: [
+    /* @__PURE__ */ p(k, { action: s, size: i, children: [
+      A(e, c),
+      /* @__PURE__ */ t(
         u,
         {
           variant: a,
@@ -62,17 +81,25 @@ const x = (o, r) => {
         }
       )
     ] }),
-    t ? /* @__PURE__ */ e(h, { onClick: t.onClick, children: /* @__PURE__ */ e(
-      u,
+    s ? /* @__PURE__ */ t(
+      y,
       {
-        variant: a,
-        color: n.colors.interactive.link.active,
-        isText: !0,
-        children: t.label
+        onClick: s == null ? void 0 : s.onClick,
+        onMouseEnter: () => m(n.colors.interactive.link.hover),
+        onMouseLeave: () => m(n.colors.interactive.link.active),
+        children: /* @__PURE__ */ t(
+          u,
+          {
+            variant: a,
+            color: l,
+            isText: !0,
+            children: s.label
+          }
+        )
       }
-    ) }) : null
+    ) : null
   ] });
 };
 export {
-  V as default
+  ir as default
 };

package/dist/components/Message/__tests__/Message.test.js

@@ -1,5 +1,5 @@
 import { jsx as c } from "react/jsx-runtime";
-import { v as r, f as a, a as i } from "../../../setup-BvfREoHl.js";
+import { v as r, f as a, a as i } from "../../../setup-CKu7-AfI.js";
 import m from "../Message.js";
 import { STATE as s } from "../../../constants/index.js";
 describe("<Message />", () => {

package/dist/components/Message/styles.d.ts

@@ -4,5 +4,6 @@ export declare const MessageRow: import('styled-components/dist/types').IStyledC
 }>> & string;
 export declare const MessageContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     size?: string;
+    action?: unknown;
 }>> & string;
 export declare const ActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/components/Message/styles.js

@@ -4,27 +4,27 @@ const s = o.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: ${({ theme: t }) => t.sizing.Size4}px;
-  padding: ${({ theme: t }) => t.sizing.Size3}px;
-  background-color: ${({ theme: t, state: e }) => t.colors.status[e].surface};
-  width: ${({ theme: t, state: e, size: i }) => i === "standard" ? "320px" : "240px"};
+  gap: ${({ theme: e }) => e.sizing.Size4}px;
+  padding: ${({ theme: e }) => e.sizing.Size3}px;
+  background-color: ${({ theme: e, state: t }) => e.colors.status[t].surface};
+  width: ${({ theme: e, state: t, size: i }) => i === "standard" ? "320px" : "240px"};
   pointer-events: none;
   cursor: default;
-  border-radius: ${({ theme: t }) => t.borderRadius.BorderRadiusSm}px;
+  border-radius: ${({ theme: e }) => e.borderRadius.BorderRadiusSm}px;
 `, d = o.div`
   display: flex;
   align-items: center;
-  gap: ${({ theme: t }) => t.sizing.Size2}px;
+  gap: ${({ theme: e }) => e.sizing.Size2}px;
   flex: 1;
-  max-width: ${({ size: t }) => t === "standard" ? "320px" : "240px"};
+  max-width: ${({ size: e, action: t }) => e === "standard" || !t ? "320px" : "240px"};
 
   .ant-typography {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
-    font-family: ${({ theme: t }) => t.typography.fontFamily};
-    line-height: ${({ theme: t, size: e }) => e === n.standard ? t.typography.lineHeight : "23px"};
-    font-size: ${({ theme: t, size: e }) => e === "standard" ? t.typography.body2 : t.typography.body1};
+    font-family: ${({ theme: e }) => e.typography.fontFamily};
+    line-height: ${({ theme: e, size: t }) => t === n.standard ? e.typography.lineHeight : "23px"};
+    font-size: ${({ theme: e, size: t }) => t === "standard" ? e.typography.body2 : e.typography.body1};
   }
 `, p = o.button`
   text-decoration: underline;
@@ -32,7 +32,11 @@ const s = o.div`
   background: none;
   cursor: pointer;
   pointer-events: all;
-  color: ${({ theme: t }) => t.colors.interactive.link.active};
+  color: ${({ theme: e }) => e.colors.interactive.link.active};
+
+  &:hover {
+    color: ${({ theme: e }) => e.colors.interactive.link.hover};
+  }
 `;
 export {
   p as ActionButton,