gd-design-library 0.3.3 → 0.3.5

package/package.json

@@ -1,10 +1,25 @@
 {
   "name": "gd-design-library",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "license": "MIT",
+  "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
-  "module": "./index.js",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./styles.css": "./assets/styles.css",
+    "./*": {
+      "import": "./*.js",
+      "types": "./*.d.ts"
+    }
+  },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",

package/stories/Introduction/ThemeJsonPreview.d.ts

@@ -0,0 +1,2 @@
+export declare const ThemeJsonPreview: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ThemeDownloadLink: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/stories/components/TokenViewer/TokenViewer.d.ts

@@ -0,0 +1,2 @@
+import { TokenViewerProps } from './TokenViewer.types';
+export declare const TokenViewer: ({ tokens, tokensDescription, path, indent }: TokenViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/stories/components/TokenViewer/TokenViewer.types.d.ts

@@ -0,0 +1,12 @@
+export interface TokenViewerProps {
+    tokens: Record<string, unknown>;
+    path?: string;
+    indent?: number;
+    tokensDescription?: Record<string, unknown>;
+}
+export interface JsonNodeProps {
+    indent: number;
+    value: object | number | string;
+    path?: string;
+    tokensDescription?: Record<string, unknown>;
+}

package/stories/components/TokenViewer/TokenViewerStyled.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+interface CommonTokenViewerStyledProps<T = HTMLDivElement> extends PropsWithChildren, HTMLAttributes<T> {
+}
+export declare const TokenViewerStyled: ({ ...rest }: CommonTokenViewerStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const JsonLineStyled: ({ ...rest }: CommonTokenViewerStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const JsonNodeStyled: ({ ...rest }: CommonTokenViewerStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const JsonKeyStyled: ({ ...rest }: CommonTokenViewerStyledProps<HTMLSpanElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BraceStyled: ({ ...rest }: CommonTokenViewerStyledProps<HTMLSpanElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ValueStyled: ({ ...rest }: CommonTokenViewerStyledProps<HTMLSpanElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TooltipStyled: ({ ...rest }: CommonTokenViewerStyledProps<HTMLSpanElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/stories/components/TokenViewer/index.d.ts

@@ -0,0 +1 @@
+export * from './TokenViewer';

package/tokens/accordion.js

@@ -1 +1,72 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../utils/helpers.js");require("react");const i=require("../types/typography.js"),t=require("./colors.js"),r=require("./display.js"),s=require("./cursors.js"),e=require("./spacing.js"),a=require("./borders.js"),n=require("./values.js"),d={header:{default:{width:"100%",textAlign:i.TextAlign.Left,cursor:s.cursors.pointer,border:a.borders.none,backgroundColor:t.colors.transparent,paddingTop:e.spacing.md,paddingBottom:e.spacing.md,display:r.display.flex,alignItems:r.flexAlignItems.center,":first-child":{flex:"1"}}},content:{default:{overflow:"hidden",transition:o.get(n.values,"transitions.accordion.toggle"),height:"auto"},opened:{paddingTop:e.spacing.md,paddingBottom:e.spacing.md},closed:{maxHeight:e.spacing.none,paddingTop:e.spacing.none,paddingBottom:e.spacing.none}},item:{default:{position:"relative",padding:e.spacing.none,"&::after":{content:'""',position:"absolute",bottom:e.spacing.none,left:e.spacing.none,right:e.spacing.none,height:"1px",width:"100%",backgroundColor:o.get(t.colors,"border.default")}}},icon:{default:{transition:o.get(n.values,"transitions.accordion.icon")},opened:{transform:o.get(n.values,"transform.rotateUp")},closed:{transform:o.get(n.values,"transform.rotateReset")}}};exports.accordion=d;
+import { colors as r } from "./colors.js";
+import { flexAlignItems as e, display as i } from "./display.js";
+import { cursors as d } from "./cursors.js";
+import { spacing as o } from "./spacing.js";
+import { borders as a } from "./borders.js";
+import { values as n } from "./values.js";
+import { get as t } from "../utils/helpers.js";
+import { TextAlign as m } from "../types/typography.js";
+const x = {
+  header: {
+    default: {
+      width: "100%",
+      textAlign: m.Left,
+      cursor: d.pointer,
+      border: a.none,
+      backgroundColor: r.transparent,
+      paddingTop: o.md,
+      paddingBottom: o.md,
+      display: i.flex,
+      alignItems: e.center,
+      ":first-child": {
+        flex: "1"
+      }
+    }
+  },
+  content: {
+    default: {
+      overflow: "hidden",
+      transition: t(n, "transitions.accordion.toggle"),
+      height: "auto"
+    },
+    opened: {
+      paddingTop: o.md,
+      paddingBottom: o.md
+    },
+    closed: {
+      maxHeight: o.none,
+      paddingTop: o.none,
+      paddingBottom: o.none
+    }
+  },
+  item: {
+    default: {
+      position: "relative",
+      padding: o.none,
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        bottom: o.none,
+        left: o.none,
+        right: o.none,
+        height: "1px",
+        width: "100%",
+        backgroundColor: t(r, "border.default")
+      }
+    }
+  },
+  icon: {
+    default: {
+      transition: t(n, "transitions.accordion.icon")
+    },
+    opened: {
+      transform: t(n, "transform.rotateUp")
+    },
+    closed: {
+      transform: t(n, "transform.rotateReset")
+    }
+  }
+};
+export {
+  x as accordion
+};

package/tokens/animations.js

@@ -1 +1,63 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t={spinKeyframes:{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}},bounceKeyframes:{"0%, 80%, 100%":{transform:"scale(1) translateY(0)"},"40%":{transform:"scale(1) translateY(-15px)"}},slideIn:{"0%":{transform:"translateY(100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},slideOut:{"0%":{transform:"translateY(0)",opacity:1},"100%":{transform:"translateY(100%)",opacity:0}},blinkKeyframes:{"0%":{opacity:1},"50%":{opacity:.4},"100%":{opacity:1}},progressIndeterminate:{"0%":{transform:"translateX(-100%)"},"50%":{transform:"translateX(120%)"},"100%":{transform:"translateX(350%)"}}};exports.animations=t;
+const a = {
+  spinKeyframes: {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  },
+  bounceKeyframes: {
+    "0%, 80%, 100%": {
+      transform: "scale(1) translateY(0)"
+    },
+    "40%": {
+      transform: "scale(1) translateY(-15px)"
+    }
+  },
+  slideIn: {
+    "0%": {
+      transform: "translateY(100%)",
+      opacity: 0
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: 1
+    }
+  },
+  slideOut: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: 1
+    },
+    "100%": {
+      transform: "translateY(100%)",
+      opacity: 0
+    }
+  },
+  blinkKeyframes: {
+    "0%": {
+      opacity: 1
+    },
+    "50%": {
+      opacity: 0.4
+    },
+    "100%": {
+      opacity: 1
+    }
+  },
+  progressIndeterminate: {
+    "0%": {
+      transform: "translateX(-100%)"
+    },
+    "50%": {
+      transform: "translateX(120%)"
+    },
+    "100%": {
+      transform: "translateX(350%)"
+    }
+  }
+};
+export {
+  a as animations
+};

package/tokens/avatar.d.ts

@@ -67,24 +67,31 @@ export declare const avatar: {
     };
     fallbackText: {
         default: {
-            variant: TypographyVariant;
-            align: TextAlign;
+            overflow: string;
+            textOverflow: string;
+            whiteSpace: string;
         };
-        size: {
-            xs: {
-                variant: TypographyVariant;
-            };
-            sm: {
-                variant: TypographyVariant;
-            };
-            md: {
+        attrs: {
+            default: {
                 variant: TypographyVariant;
+                align: TextAlign;
             };
-            lg: {
-                variant: TypographyVariant;
-            };
-            xl: {
-                variant: TypographyVariant;
+            size: {
+                xs: {
+                    variant: TypographyVariant;
+                };
+                sm: {
+                    variant: TypographyVariant;
+                };
+                md: {
+                    variant: TypographyVariant;
+                };
+                lg: {
+                    variant: TypographyVariant;
+                };
+                xl: {
+                    variant: TypographyVariant;
+                };
             };
         };
     };

package/tokens/avatar.js

@@ -1 +1,153 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../utils/helpers.js");require("react");const i=require("../types/common.js"),r=require("../types/typography.js"),a=require("./colors.js"),t=require("./borders.js"),o={default:{borderRadius:"50%",position:"relative",width:42,height:42},imageWrapper:{default:{borderRadius:"50%",overflow:"hidden",height:"100%",width:"100%",alignContent:"center",backgroundColor:e.get(a.colors,"bg.fill.primary.default")}},badge:{default:{position:"absolute",borderRadius:"50%",backgroundColor:e.get(a.colors,"bg.fill.success.primary.default"),width:16,height:16,border:t.borders.generic({width:"2.3px",color:"white",type:"solid"}),top:-2,right:0},size:{[i.SizeVariant.Xs]:{width:8,height:8,border:t.borders.generic({width:"1px",color:"white",type:"solid"}),top:-1,right:0},[i.SizeVariant.Sm]:{width:14,height:14,border:t.borders.generic({width:"2px",color:"white",type:"solid"}),top:-2,right:0},[i.SizeVariant.Md]:{width:16,height:16,border:t.borders.generic({width:"2.3px",color:"white",type:"solid"}),top:-2,right:0},[i.SizeVariant.Lg]:{width:18,height:18,border:t.borders.generic({width:"2.7px",color:"white",type:"solid"}),top:-1,right:0},[i.SizeVariant.Xl]:{width:22,height:22,border:t.borders.generic({width:"3px",color:"white",type:"solid"}),top:0,right:0}}},fallbackText:{default:{variant:r.TypographyVariant.H6,align:r.TextAlign.Center},size:{[i.SizeVariant.Xs]:{variant:r.TypographyVariant.Caption},[i.SizeVariant.Sm]:{variant:r.TypographyVariant.Body2},[i.SizeVariant.Md]:{variant:r.TypographyVariant.H6},[i.SizeVariant.Lg]:{variant:r.TypographyVariant.H5},[i.SizeVariant.Xl]:{variant:r.TypographyVariant.H4}}},size:{[i.SizeVariant.Xs]:{width:24,height:24},[i.SizeVariant.Sm]:{width:38,height:38},[i.SizeVariant.Md]:{width:42,height:42},[i.SizeVariant.Lg]:{width:52,height:52},[i.SizeVariant.Xl]:{width:80,height:80}}};exports.avatar=o;
+import { colors as r } from "./colors.js";
+import { borders as i } from "./borders.js";
+import { TypographyVariant as e, TextAlign as h } from "../types/typography.js";
+import { get as o } from "../utils/helpers.js";
+import { SizeVariant as t } from "../types/common.js";
+const n = {
+  default: {
+    borderRadius: "50%",
+    position: "relative",
+    // Default size variant (MD)
+    width: 42,
+    height: 42
+  },
+  imageWrapper: {
+    default: {
+      borderRadius: "50%",
+      overflow: "hidden",
+      height: "100%",
+      width: "100%",
+      alignContent: "center",
+      backgroundColor: o(r, "bg.fill.primary.default")
+    }
+  },
+  badge: {
+    default: {
+      position: "absolute",
+      borderRadius: "50%",
+      backgroundColor: o(r, "bg.fill.success.primary.default"),
+      // Default size variant (MD)
+      width: 16,
+      height: 16,
+      border: i.generic({
+        width: "2.3px",
+        color: "white",
+        type: "solid"
+      }),
+      top: -2,
+      right: 0
+    },
+    size: {
+      [t.Xs]: {
+        width: 8,
+        height: 8,
+        border: i.generic({
+          width: "1px",
+          color: "white",
+          type: "solid"
+        }),
+        top: -1,
+        right: 0
+      },
+      [t.Sm]: {
+        width: 14,
+        height: 14,
+        border: i.generic({
+          width: "2px",
+          color: "white",
+          type: "solid"
+        }),
+        top: -2,
+        right: 0
+      },
+      [t.Md]: {
+        width: 16,
+        height: 16,
+        border: i.generic({
+          width: "2.3px",
+          color: "white",
+          type: "solid"
+        }),
+        top: -2,
+        right: 0
+      },
+      [t.Lg]: {
+        width: 18,
+        height: 18,
+        border: i.generic({
+          width: "2.7px",
+          color: "white",
+          type: "solid"
+        }),
+        top: -1,
+        right: 0
+      },
+      [t.Xl]: {
+        width: 22,
+        height: 22,
+        border: i.generic({
+          width: "3px",
+          color: "white",
+          type: "solid"
+        }),
+        top: 0,
+        right: 0
+      }
+    }
+  },
+  fallbackText: {
+    default: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    attrs: {
+      default: {
+        variant: e.H6,
+        align: h.Center
+      },
+      size: {
+        [t.Xs]: {
+          variant: e.Caption
+        },
+        [t.Sm]: {
+          variant: e.Body2
+        },
+        [t.Md]: {
+          variant: e.H6
+        },
+        [t.Lg]: {
+          variant: e.H5
+        },
+        [t.Xl]: {
+          variant: e.H4
+        }
+      }
+    }
+  },
+  size: {
+    [t.Xs]: {
+      width: 24,
+      height: 24
+    },
+    [t.Sm]: {
+      width: 38,
+      height: 38
+    },
+    [t.Md]: {
+      width: 42,
+      height: 42
+    },
+    [t.Lg]: {
+      width: 52,
+      height: 52
+    },
+    [t.Xl]: {
+      width: 80,
+      height: 80
+    }
+  }
+};
+export {
+  n as avatar
+};

package/tokens/borders.js

@@ -1 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../utils/helpers.js");require("react");const e=require("./colors.js"),r=({width:o="1px",color:s=e.colors.transparent,type:t="solid"}={})=>`${o} ${t} ${s}`,n={none:0,generic:r,focus:r({width:"2px",color:c.get(e.colors,"border.focus")})};exports.borders=n;
+import { colors as r } from "./colors.js";
+import { get as c } from "../utils/helpers.js";
+const o = ({
+  width: t = "1px",
+  color: e = r.transparent,
+  type: s = "solid"
+} = {}) => `${t} ${s} ${e}`, i = {
+  none: 0,
+  generic: o,
+  focus: o({
+    width: "2px",
+    color: c(r, "border.focus")
+  })
+};
+export {
+  i as borders
+};

package/tokens/breadcrumbs.js

@@ -1 +1,37 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../utils/helpers.js");require("react");const r=require("../types/common.js"),t=require("./spacing.js"),o=require("./colors.js"),e=a.get(o.colors,"icon.primary.default"),i={default:{display:"flex",alignItems:"center",gap:10},bordered:{padding:`${t.spacing[r.SizeVariant.Md]} ${t.spacing[r.SizeVariant.Lg]}`,border:`1px solid ${o.colors.border.default}`},item:{itemStart:{default:{color:e}},itemEnd:{default:{color:e}}},separator:{default:{display:"flex",alignItems:"center",color:e}}};exports.breadcrumbs=i;
+import { spacing as e } from "./spacing.js";
+import { colors as t } from "./colors.js";
+import { get as a } from "../utils/helpers.js";
+import { SizeVariant as o } from "../types/common.js";
+const r = a(t, "icon.primary.default"), f = {
+  default: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10
+  },
+  bordered: {
+    padding: `${e[o.Md]} ${e[o.Lg]}`,
+    border: `1px solid ${t.border.default}`
+  },
+  item: {
+    itemStart: {
+      default: {
+        color: r
+      }
+    },
+    itemEnd: {
+      default: {
+        color: r
+      }
+    }
+  },
+  separator: {
+    default: {
+      display: "flex",
+      alignItems: "center",
+      color: r
+    }
+  }
+};
+export {
+  f as breadcrumbs
+};

package/tokens/button.js

@@ -1 +1,146 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../utils/helpers.js");require("react");const a=require("../types/common.js"),e=require("../types/button.js"),n=require("./borders.js"),r=require("./colors.js"),t=require("./spacing.js"),i=require("./cursors.js"),l=require("./display.js"),s=require("./values.js"),d=require("./utils.js"),c={default:{border:n.borders.none,outline:n.borders.none,padding:`${t.spacing[a.SizeVariant.Sm]} ${t.spacing[a.SizeVariant.Lg]}`,display:l.display.flex,alignItems:l.flexAlignItems.center,gap:t.spacing[a.SizeVariant.Sm],transition:o.get(s.values,"transitions.button.default"),cursor:i.cursors.pointer,"&:focus-visible":d.getFocusStyles({inset:"-6px"}),"&:disabled, &:disabled *":{cursor:i.cursors.default,color:o.get(r.colors,"text.disabled")}},icon:{padding:t.spacing[a.SizeVariant.Sm],"& span":{display:l.display.flex,justifyContent:l.flexAlignItems.center,alignItems:l.flexAlignItems.center}},content:{default:{display:l.display.flex,alignItems:l.flexAlignItems.center,justifyContent:l.flexAlignItems.center,width:"100%",minWidth:"0"}},fullWidth:{width:"100%"},startIcon:{default:{}},endIcon:{default:{}},[e.ButtonVariant.Contained]:{[e.ButtonColorVariant.Primary]:{background:o.get(r.colors,"bg.fill.primary.default"),color:o.get(r.colors,"text.active"),"&:hover":{background:o.get(r.colors,"bg.fill.primary.hover")},"&:disabled":{background:o.get(r.colors,"bg.fill.disabled")}},[e.ButtonColorVariant.Secondary]:{color:o.get(r.colors,"neutral.white"),background:o.get(r.colors,"bg.fill.error.primary.default"),"&:hover":{background:o.get(r.colors,"bg.fill.error.primary.hover")},"&:disabled":{background:o.get(r.colors,"bg.fill.disabled")}}},[e.ButtonVariant.Outlined]:{[e.ButtonColorVariant.Primary]:{border:n.borders.generic({width:s.values.borderMedium,color:o.get(r.colors,"border.secondary.default")}),background:o.get(r.colors,"bg.fill.secondary.default"),color:o.get(r.colors,"text.active"),"&:hover":{background:o.get(r.colors,"bg.fill.secondary.hover")},"&:disabled":{background:o.get(r.colors,"bg.fill.secondary.default")}},[e.ButtonColorVariant.Secondary]:{color:o.get(r.colors,"text.error"),background:o.get(r.colors,"bg.fill.error.secondary.default"),"&:hover":{background:o.get(r.colors,"bg.fill.error.secondary.hover")},"&:disabled":{background:o.get(r.colors,"bg.fill.disabled")}}},[e.ButtonVariant.Text]:{[e.ButtonColorVariant.Primary]:{padding:t.spacing.xs,background:o.get(r.colors,"bg.fill.secondary.default"),color:o.get(r.colors,"text.active"),"&:hover":{background:o.get(r.colors,"bg.fill.secondary.hover")},"&:disabled":{background:o.get(r.colors,"bg.fill.secondary.default")}},[e.ButtonColorVariant.Secondary]:{padding:t.spacing.xs,background:o.get(r.colors,"bg.fill.secondary.default"),color:o.get(r.colors,"text.active"),"&:not(:disabled):hover":{textDecoration:"underline"},"&:disabled":{background:o.get(r.colors,"bg.fill.secondary.default")}}},[e.ButtonVariant.Inherit]:{[e.ButtonColorVariant.Primary]:{backgroundColor:r.colors.bg.fill.primary.default,padding:t.spacing.xs,"&:disabled":{background:r.colors.bg.fill.disabled}},[e.ButtonColorVariant.Secondary]:{padding:t.spacing.xs,backgroundColor:r.colors.transparent,"&:hover":{background:r.colors.bg.fill.secondary.hover}}}};exports.button=c;
+import { borders as t } from "./borders.js";
+import { colors as r } from "./colors.js";
+import { spacing as e } from "./spacing.js";
+import { cursors as c } from "./cursors.js";
+import { flexAlignItems as a, display as n } from "./display.js";
+import { values as b } from "./values.js";
+import { getFocusStyles as s } from "./utils.js";
+import { ButtonVariant as l, ButtonColorVariant as d } from "../types/button.js";
+import { get as o } from "../utils/helpers.js";
+import { SizeVariant as i } from "../types/common.js";
+const S = {
+  default: {
+    border: t.none,
+    outline: t.none,
+    padding: `${e[i.Sm]} ${e[i.Lg]}`,
+    display: n.flex,
+    alignItems: a.center,
+    gap: e[i.Sm],
+    transition: o(b, "transitions.button.default"),
+    cursor: c.pointer,
+    "&:focus-visible": s({
+      inset: "-6px"
+    }),
+    "&:disabled, &:disabled *": {
+      cursor: c.default,
+      color: o(r, "text.disabled")
+    }
+  },
+  icon: {
+    padding: e[i.Sm],
+    "& span": {
+      display: n.flex,
+      justifyContent: a.center,
+      alignItems: a.center
+    }
+  },
+  content: {
+    default: {
+      display: n.flex,
+      alignItems: a.center,
+      justifyContent: a.center,
+      width: "100%",
+      minWidth: "0"
+    }
+  },
+  fullWidth: {
+    width: "100%"
+  },
+  startIcon: {
+    default: {}
+  },
+  endIcon: {
+    default: {}
+  },
+  [l.Contained]: {
+    [d.Primary]: {
+      background: o(r, "bg.fill.primary.default"),
+      color: o(r, "text.active"),
+      "&:hover": {
+        background: o(r, "bg.fill.primary.hover")
+      },
+      "&:disabled": {
+        background: o(r, "bg.fill.disabled")
+      }
+    },
+    [d.Secondary]: {
+      color: o(r, "neutral.white"),
+      background: o(r, "bg.fill.error.primary.default"),
+      "&:hover": {
+        background: o(r, "bg.fill.error.primary.hover")
+      },
+      "&:disabled": {
+        background: o(r, "bg.fill.disabled")
+      }
+    }
+  },
+  [l.Outlined]: {
+    [d.Primary]: {
+      border: t.generic({
+        width: b.borderMedium,
+        color: o(r, "border.secondary.default")
+      }),
+      background: o(r, "bg.fill.secondary.default"),
+      color: o(r, "text.active"),
+      "&:hover": {
+        background: o(r, "bg.fill.secondary.hover")
+      },
+      "&:disabled": {
+        background: o(r, "bg.fill.secondary.default")
+      }
+    },
+    [d.Secondary]: {
+      color: o(r, "text.error"),
+      background: o(r, "bg.fill.error.secondary.default"),
+      "&:hover": {
+        background: o(r, "bg.fill.error.secondary.hover")
+      },
+      "&:disabled": {
+        background: o(r, "bg.fill.disabled")
+      }
+    }
+  },
+  [l.Text]: {
+    [d.Primary]: {
+      padding: e.xs,
+      background: o(r, "bg.fill.secondary.default"),
+      color: o(r, "text.active"),
+      "&:hover": {
+        background: o(r, "bg.fill.secondary.hover")
+      },
+      "&:disabled": {
+        background: o(r, "bg.fill.secondary.default")
+      }
+    },
+    [d.Secondary]: {
+      padding: e.xs,
+      background: o(r, "bg.fill.secondary.default"),
+      color: o(r, "text.active"),
+      "&:not(:disabled):hover": {
+        textDecoration: "underline"
+      },
+      "&:disabled": {
+        background: o(r, "bg.fill.secondary.default")
+      }
+    }
+  },
+  [l.Inherit]: {
+    [d.Primary]: {
+      backgroundColor: r.bg.fill.primary.default,
+      padding: e.xs,
+      "&:disabled": {
+        background: r.bg.fill.disabled
+      }
+    },
+    [d.Secondary]: {
+      padding: e.xs,
+      backgroundColor: r.transparent,
+      "&:hover": {
+        background: r.bg.fill.secondary.hover
+      }
+    }
+  }
+};
+export {
+  S as button
+};