gd-design-library 0.3.4 → 0.3.5

package/tokens/card.js

@@ -1 +1,187 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../types/common.js"),a=require("../types/card.js"),i=require("../types/typography.js"),n=require("../types/layout.js"),c=require("./font.js"),t=require("./typography.js"),d=require("./values.js"),l=require("./borders.js"),e=require("./display.js"),r=require("./colors.js"),S=require("./shadow.js"),o=require("./spacing.js"),s={border:l.borders.generic({width:d.values.borderThin,color:r.colors.border.default})},u={"&:not(:focus-visible):hover":{boxShadow:"none",outline:l.borders.generic({width:d.values.borderThin,color:r.colors.primary.default})}},V={boxShadow:S.shadows.card.default},C={default:{display:e.display.flex,"&:focus-visible":{outline:l.borders.generic({width:d.values.borderMedium,color:r.colors.border.focus}),"&:hover":{boxShadow:"none"}}},[a.CardVariant.Vertical]:{default:{flexDirection:n.FlexDirection.Column,"&:hover":{...V}},bordered:{...s},highlighted:{...u}},[a.CardVariant.Horizontal]:{default:{flexDirection:n.FlexDirection.Row,"&:hover":{...V}},bordered:{...s},highlighted:{...u}},title:{default:{margin:o.spacing.none,padding:o.spacing.none},[a.CardVariant.Vertical]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{}},[a.CardVariant.Horizontal]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{}}},description:{default:{margin:o.spacing.none,padding:o.spacing.none},[a.CardVariant.Vertical]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{}},[a.CardVariant.Horizontal]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{}}},rating:{default:{display:e.display.flex,alignItems:e.flexAlignItems.start,gap:o.spacing[p.SizeVariant.Sm]},[a.CardVariant.Vertical]:{[a.CardSizeVariant.Default]:{color:r.colors.text.caption,...t.typography[i.TypographyVariant.Caption]},[a.CardSizeVariant.Sm]:{color:r.colors.text.caption,flexDirection:n.FlexDirection.Column,...t.typography[i.TypographyVariant.Caption]}},[a.CardVariant.Horizontal]:{[a.CardSizeVariant.Default]:{color:r.colors.text.caption,...t.typography[i.TypographyVariant.Caption]},[a.CardSizeVariant.Sm]:{color:r.colors.text.caption,flexDirection:n.FlexDirection.Column,...t.typography[i.TypographyVariant.Caption]}}},button:{default:{display:e.display.flex},[a.CardVariant.Vertical]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{}},[a.CardVariant.Horizontal]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{}}},image:{default:{},[a.CardVariant.Vertical]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{}},[a.CardVariant.Horizontal]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{}}},counter:{default:{},[a.CardVariant.Vertical]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{}},[a.CardVariant.Horizontal]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{}}},price:{default:{display:e.display.flex},[a.CardVariant.Vertical]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{"& > div > *":{...t.typography[i.TypographyVariant.H6],fontWeight:c.font.weight.medium}}},[a.CardVariant.Horizontal]:{[a.CardSizeVariant.Default]:{},[a.CardSizeVariant.Sm]:{"& > div > *":{...t.typography[i.TypographyVariant.H6],fontWeight:c.font.weight.medium}}}}};exports.card=C;
+import { font as m } from "./font.js";
+import { typography as r } from "./typography.js";
+import { values as d } from "./values.js";
+import { borders as f } from "./borders.js";
+import { display as l, flexAlignItems as h } from "./display.js";
+import { colors as e } from "./colors.js";
+import { shadows as s } from "./shadow.js";
+import { spacing as a } from "./spacing.js";
+import { CardVariant as t, CardSizeVariant as o } from "../types/card.js";
+import { FlexDirection as n } from "../types/layout.js";
+import { TypographyVariant as i } from "../types/typography.js";
+import { SizeVariant as g } from "../types/common.js";
+const c = {
+  border: f.generic({
+    width: d.borderThin,
+    color: e.border.default
+  })
+}, u = {
+  "&:not(:focus-visible):hover": {
+    boxShadow: "none",
+    outline: f.generic({
+      width: d.borderThin,
+      color: e.primary.default
+    })
+  }
+}, p = {
+  boxShadow: s.card.default
+}, I = {
+  default: {
+    display: l.flex,
+    "&:focus-visible": {
+      outline: f.generic({
+        width: d.borderMedium,
+        color: e.border.focus
+      }),
+      "&:hover": {
+        boxShadow: "none"
+      }
+    }
+  },
+  [t.Vertical]: {
+    default: {
+      flexDirection: n.Column,
+      "&:hover": {
+        ...p
+      }
+    },
+    bordered: {
+      ...c
+    },
+    highlighted: {
+      ...u
+    }
+  },
+  [t.Horizontal]: {
+    default: {
+      flexDirection: n.Row,
+      "&:hover": {
+        ...p
+      }
+    },
+    bordered: {
+      ...c
+    },
+    highlighted: {
+      ...u
+    }
+  },
+  title: {
+    default: {
+      margin: a.none,
+      padding: a.none
+    },
+    [t.Vertical]: {
+      [o.Default]: {},
+      [o.Sm]: {}
+    },
+    [t.Horizontal]: {
+      [o.Default]: {},
+      [o.Sm]: {}
+    }
+  },
+  description: {
+    default: {
+      margin: a.none,
+      padding: a.none
+    },
+    [t.Vertical]: {
+      [o.Default]: {},
+      [o.Sm]: {}
+    },
+    [t.Horizontal]: {
+      [o.Default]: {},
+      [o.Sm]: {}
+    }
+  },
+  rating: {
+    default: {
+      display: l.flex,
+      alignItems: h.start,
+      gap: a[g.Sm]
+    },
+    [t.Vertical]: {
+      [o.Default]: {
+        color: e.text.caption,
+        ...r[i.Caption]
+      },
+      [o.Sm]: {
+        color: e.text.caption,
+        flexDirection: n.Column,
+        ...r[i.Caption]
+      }
+    },
+    [t.Horizontal]: {
+      [o.Default]: {
+        color: e.text.caption,
+        ...r[i.Caption]
+      },
+      [o.Sm]: {
+        color: e.text.caption,
+        flexDirection: n.Column,
+        ...r[i.Caption]
+      }
+    }
+  },
+  button: {
+    default: {
+      display: l.flex
+    },
+    [t.Vertical]: {
+      [o.Default]: {},
+      [o.Sm]: {}
+    },
+    [t.Horizontal]: {
+      [o.Default]: {},
+      [o.Sm]: {}
+    }
+  },
+  image: {
+    default: {},
+    [t.Vertical]: {
+      [o.Default]: {},
+      [o.Sm]: {}
+    },
+    [t.Horizontal]: {
+      [o.Default]: {},
+      [o.Sm]: {}
+    }
+  },
+  counter: {
+    default: {},
+    [t.Vertical]: {
+      [o.Default]: {},
+      [o.Sm]: {}
+    },
+    [t.Horizontal]: {
+      [o.Default]: {},
+      [o.Sm]: {}
+    }
+  },
+  price: {
+    default: {
+      display: l.flex
+    },
+    [t.Vertical]: {
+      [o.Default]: {},
+      [o.Sm]: {
+        "& > div > *": {
+          ...r[i.H6],
+          fontWeight: m.weight.medium
+        }
+      }
+    },
+    [t.Horizontal]: {
+      [o.Default]: {},
+      [o.Sm]: {
+        "& > div > *": {
+          ...r[i.H6],
+          fontWeight: m.weight.medium
+        }
+      }
+    }
+  }
+};
+export {
+  I as card
+};

package/tokens/carousel.js

@@ -1 +1,216 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../constants/positioning.js"),n=require("../types/common.js"),l=require("../types/layout.js");require("react");const i=require("../utils/layout.js"),e=require("./display.js"),r=require("./cursors.js"),a=require("./colors.js"),t=require("./spacing.js"),s={default:{},container:{default:{position:"relative",overflow:"hidden",width:"100%",display:e.display.flex,zIndex:o.Z_INDEX.FIRST,gap:"1rem"},variant:{cards:{gap:"1rem"},single:{".embla__slide":{padding:0}}},layout:{horizontal:{flexDirection:"column"},vertical:{flexDirection:"row",height:"100%"}}},contentContainer:{flexDirection:"column",height:"100%",width:"100%",position:"absolute",justifyContent:i.calculateJustify("center"),alignItems:e.flexAlignItems.center,zIndex:"100"},carouselViewport:{overflow:"hidden"},carouselViewportSlideWrapper:{display:e.display.flex},carouselSlide:{flex:`${t.spacing.none} ${t.spacing.none} auto`,width:"100%",padding:t.spacing.none,"& img":{width:"100%",height:"auto",objectFit:"cover",borderRadius:t.spacing.none}},footer:{display:e.display.flex,justifyContent:i.calculateJustify("between"),alignItems:e.flexAlignItems.center},footerControls:{display:e.display.flex},contentSlide:{display:e.display.block,paddingLeft:t.spacing.sm,"&:first-child":{paddingLeft:t.spacing.none}},carouselControlsWrapper:{position:"relative"},carouselControls:{display:e.display.flex,justifyContent:i.calculateJustify("between"),alignItems:e.flexAlignItems.center,position:"absolute",top:"50%",left:t.spacing.none,transform:"translateY(-50%)",width:"100%",padding:"0.5rem 1rem",zIndex:o.Z_INDEX.HIGH},carouselArrowButton:{background:"none",border:"none",fontSize:"1.5rem",cursor:"pointer",padding:"0.25rem 0.5rem",display:e.display.flex,alignItems:e.flexAlignItems.center,justifyContent:i.calculateJustify("center"),transition:"opacity 0.3s ease","&:disabled":{opacity:"0.3",cursor:"not-allowed"}},carouselDots:{display:e.display.flex,justifyContent:i.calculateJustify("center"),gap:"0.5rem",marginTop:"1rem"},carouselDot:{default:{width:"8px",height:"8px",border:"none",cursor:r.cursors.pointer,transition:"width 0.3s ease"},active:{backgroundColor:a.colors.bg.fill.primary.default,width:"32px","&:hover":{}},nonActive:{backgroundColor:a.colors.bg.fill.disabled,"&:hover":{}}},carouselThumbs:{default:{display:e.display.flex,justifyContent:i.calculateJustify("center"),gap:"0.5rem"},vertical:{flexDirection:l.FlexDirection.Column,flex:"0 0 50px",overflowX:"hidden",alignItems:e.flexAlignItems.center},horizontal:{overflowX:"auto"}},carouselThumbsViewport:{default:{overflow:"hidden"},vertical:{maxHeight:"300px"},horizontal:{width:"200px"}},carouselThumbsWrapper:{default:{},vertical:{display:e.display.block,height:"100%"},horizontal:{display:e.display.flex}},carouselThumb:{default:{minWidth:"40px",minHeight:"40px",border:"none",padding:t.spacing.none,background:"none",cursor:r.cursors.pointer,opacity:.4,transition:"opacity 0.3s ease-in-out","&:hover":{opacity:1}},active:{opacity:1},vertical:{height:"40px"},horizontal:{marginLeft:"5px"}},controlsButton:{width:t.spacing[n.SizeVariant.Xl],height:t.spacing[n.SizeVariant.Xl],"& svg":{}},icons:{base:{width:9,height:9},controlLeft:{name:"arrowLeft"},controlRight:{name:"arrowRight"}}};exports.carousel=s;
+import { display as e, flexAlignItems as i } from "./display.js";
+import { cursors as r } from "./cursors.js";
+import { colors as n } from "./colors.js";
+import { spacing as o } from "./spacing.js";
+import { FlexDirection as s } from "../types/layout.js";
+import { calculateJustify as t } from "../utils/layout.js";
+import { Z_INDEX as a } from "../constants/positioning.js";
+import { SizeVariant as l } from "../types/common.js";
+const x = {
+  default: {},
+  container: {
+    default: {
+      position: "relative",
+      overflow: "hidden",
+      width: "100%",
+      display: e.flex,
+      zIndex: a.FIRST,
+      gap: "1rem"
+    },
+    variant: {
+      cards: {
+        gap: "1rem"
+      },
+      single: {
+        ".embla__slide": {
+          padding: 0
+        }
+      }
+    },
+    layout: {
+      horizontal: {
+        flexDirection: "column"
+      },
+      vertical: {
+        flexDirection: "row",
+        height: "100%"
+      }
+    }
+  },
+  contentContainer: {
+    flexDirection: "column",
+    height: "100%",
+    width: "100%",
+    position: "absolute",
+    justifyContent: t("center"),
+    alignItems: i.center,
+    zIndex: "100"
+  },
+  carouselViewport: {
+    overflow: "hidden"
+  },
+  carouselViewportSlideWrapper: {
+    display: e.flex
+  },
+  carouselSlide: {
+    flex: `${o.none} ${o.none} auto`,
+    width: "100%",
+    padding: o.none,
+    "& img": {
+      width: "100%",
+      height: "auto",
+      objectFit: "cover",
+      borderRadius: o.none
+    }
+  },
+  footer: {
+    display: e.flex,
+    justifyContent: t("between"),
+    alignItems: i.center
+  },
+  footerControls: {
+    display: e.flex
+  },
+  contentSlide: {
+    display: e.block,
+    paddingLeft: o.sm,
+    "&:first-child": {
+      paddingLeft: o.none
+    }
+  },
+  carouselControlsWrapper: {
+    position: "relative"
+  },
+  carouselControls: {
+    display: e.flex,
+    justifyContent: t("between"),
+    alignItems: i.center,
+    position: "absolute",
+    top: "50%",
+    left: o.none,
+    transform: "translateY(-50%)",
+    width: "100%",
+    padding: "0.5rem 1rem",
+    zIndex: a.HIGH
+  },
+  carouselArrowButton: {
+    background: "none",
+    border: "none",
+    fontSize: "1.5rem",
+    cursor: "pointer",
+    padding: "0.25rem 0.5rem",
+    display: e.flex,
+    alignItems: i.center,
+    justifyContent: t("center"),
+    transition: "opacity 0.3s ease",
+    "&:disabled": {
+      opacity: "0.3",
+      cursor: "not-allowed"
+    }
+  },
+  carouselDots: {
+    display: e.flex,
+    justifyContent: t("center"),
+    gap: "0.5rem",
+    marginTop: "1rem"
+  },
+  carouselDot: {
+    default: {
+      width: "8px",
+      height: "8px",
+      border: "none",
+      cursor: r.pointer,
+      transition: "width 0.3s ease"
+    },
+    active: {
+      backgroundColor: n.bg.fill.primary.default,
+      width: "32px",
+      "&:hover": {}
+    },
+    nonActive: {
+      backgroundColor: n.bg.fill.disabled,
+      "&:hover": {}
+    }
+  },
+  carouselThumbs: {
+    default: {
+      display: e.flex,
+      justifyContent: t("center"),
+      gap: "0.5rem"
+    },
+    vertical: {
+      flexDirection: s.Column,
+      flex: "0 0 50px",
+      overflowX: "hidden",
+      alignItems: i.center
+    },
+    horizontal: {
+      overflowX: "auto"
+    }
+  },
+  carouselThumbsViewport: {
+    default: {
+      overflow: "hidden"
+    },
+    vertical: {
+      maxHeight: "300px"
+    },
+    horizontal: {
+      width: "200px"
+    }
+  },
+  carouselThumbsWrapper: {
+    default: {},
+    vertical: {
+      display: e.block,
+      height: "100%"
+    },
+    horizontal: {
+      display: e.flex
+    }
+  },
+  carouselThumb: {
+    default: {
+      minWidth: "40px",
+      minHeight: "40px",
+      border: "none",
+      padding: o.none,
+      background: "none",
+      cursor: r.pointer,
+      opacity: 0.4,
+      transition: "opacity 0.3s ease-in-out",
+      "&:hover": {
+        opacity: 1
+      }
+    },
+    active: {
+      opacity: 1
+    },
+    vertical: {
+      height: "40px"
+    },
+    horizontal: {
+      marginLeft: "5px"
+    }
+  },
+  controlsButton: {
+    width: o[l.Xl],
+    height: o[l.Xl],
+    "& svg": {}
+  },
+  icons: {
+    base: {
+      width: 9,
+      height: 9
+    },
+    controlLeft: {
+      name: "arrowLeft"
+    },
+    controlRight: {
+      name: "arrowRight"
+    }
+  }
+};
+export {
+  x as carousel
+};

package/tokens/chat.js

@@ -1 +1,118 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../types/chat.js"),i=require("./utils.js"),e=require("./colors.js"),o=require("./display.js"),d=require("./spacing.js"),a={minHeight:"56px",height:"56px",display:o.display.flex,overflow:"hidden",alignItems:o.flexAlignItems.center,padding:"0 24px",borderBottom:"1px solid",borderColor:e.colors.neutral["grey.30"]},r={position:"absolute",display:o.display.block,flexDirection:"column",left:0,top:0,right:0,bottom:0,backgroundColor:i.hexToRgba(e.colors.neutral.black,.1)},n={wrapper:{default:{display:o.display.flex,position:"relative",minHeight:"500px",height:"100%",width:"100%",overflow:"hidden"}},content:{default:{boxSizing:"border-box",position:"relative",width:"100%",height:"100%",display:o.display.flex,flexDirection:"column",justifyContent:"flex-end",paddingBottom:i.getSpacing(8),gap:i.getSpacing(4),"@media (max-width: 768px)":{paddingLeft:"24px",paddingRight:"24px"},"@media (min-width: 768px) and (max-width: 1280px)":{paddingLeft:"80px",paddingRight:"80px"},"@media (min-width: 1280px)":{paddingLeft:"260px",paddingRight:"260px"}}},mainHeader:{...a},body:{display:o.display.flex,flex:1,flexDirection:"column"},sidebar:{minWidth:"250px",maxWidth:"250px",overflow:"hidden",borderRight:"1px solid",backgroundColor:e.colors.neutral.white,borderColor:e.colors.neutral["grey.30"],flex:"0 0 250px",display:o.display.flex,flexDirection:"column",minHeight:"100%"},sidebarWrapper:{default:{},[t.ChatLayoutVariant.Auto]:{"@media (max-width: 768px)":{...r}},[t.ChatLayoutVariant.Desktop]:{},[t.ChatLayoutVariant.Drawer]:{...r}},sidebarHeader:{...a},toggleButton:{default:{height:"24px",backgroundColor:e.colors.transparent,padding:d.spacing.none,transform:"rotate(270deg)","&:hover":{backgroundColor:e.colors.transparent}},open:{transform:"rotate(90deg)"}},toggleIcon:{name:"arrowDown",fill:e.colors.neutral["grey.90"],width:24,height:24}};exports.chat=n;
+import { hexToRgba as d, getSpacing as i } from "./utils.js";
+import { colors as e } from "./colors.js";
+import { flexAlignItems as n, display as o } from "./display.js";
+import { spacing as l } from "./spacing.js";
+import { ChatLayoutVariant as t } from "../types/chat.js";
+const r = {
+  minHeight: "56px",
+  height: "56px",
+  display: o.flex,
+  overflow: "hidden",
+  alignItems: n.center,
+  padding: "0 24px",
+  borderBottom: "1px solid",
+  borderColor: e.neutral["grey.30"]
+}, a = {
+  position: "absolute",
+  display: o.block,
+  flexDirection: "column",
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: d(e.neutral.black, 0.1)
+}, f = {
+  wrapper: {
+    default: {
+      display: o.flex,
+      position: "relative",
+      minHeight: "500px",
+      height: "100%",
+      width: "100%",
+      overflow: "hidden"
+    }
+  },
+  content: {
+    default: {
+      boxSizing: "border-box",
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      display: o.flex,
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      paddingBottom: i(8),
+      gap: i(4),
+      "@media (max-width: 768px)": {
+        paddingLeft: "24px",
+        paddingRight: "24px"
+      },
+      "@media (min-width: 768px) and (max-width: 1280px)": {
+        paddingLeft: "80px",
+        paddingRight: "80px"
+      },
+      "@media (min-width: 1280px)": {
+        paddingLeft: "260px",
+        paddingRight: "260px"
+      }
+    }
+  },
+  mainHeader: {
+    ...r
+  },
+  body: {
+    display: o.flex,
+    flex: 1,
+    flexDirection: "column"
+  },
+  sidebar: {
+    minWidth: "250px",
+    maxWidth: "250px",
+    overflow: "hidden",
+    borderRight: "1px solid",
+    backgroundColor: e.neutral.white,
+    borderColor: e.neutral["grey.30"],
+    flex: "0 0 250px",
+    display: o.flex,
+    flexDirection: "column",
+    minHeight: "100%"
+  },
+  sidebarWrapper: {
+    default: {},
+    [t.Auto]: {
+      "@media (max-width: 768px)": {
+        ...a
+      }
+    },
+    [t.Desktop]: {},
+    [t.Drawer]: {
+      ...a
+    }
+  },
+  sidebarHeader: {
+    ...r
+  },
+  toggleButton: {
+    default: {
+      height: "24px",
+      backgroundColor: e.transparent,
+      padding: l.none,
+      transform: "rotate(270deg)",
+      "&:hover": {
+        backgroundColor: e.transparent
+      }
+    },
+    open: {
+      transform: "rotate(90deg)"
+    }
+  },
+  toggleIcon: {
+    name: "arrowDown",
+    fill: e.neutral["grey.90"],
+    width: 24,
+    height: 24
+  }
+};
+export {
+  f as chat
+};

package/tokens/chatbubble.js

@@ -1 +1,56 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../types/typography.js"),i=require("../types/layout.js"),e=require("./utils.js"),t=require("./display.js"),a=require("./colors.js"),r=require("./typography.js"),n={default:{display:t.display.flex,flexDirection:i.FlexDirection.Column,gap:e.getSpacing(2),clear:"both",margin:`${e.getSpacing(2)} 0`,...r.typography[l.TypographyVariant.Body2]},question:{padding:`${e.getSpacing(2)} ${e.getSpacing(4)}`,textAlign:"right",float:"right",backgroundColor:a.colors.bg.default,minWidth:"320px",maxWidth:"566px"},answer:{padding:e.getSpacing(4)},pending:{},fulfilled:{},rejected:{},content:{default:{gap:e.getSpacing(2),display:t.display.flex,flexDirection:i.FlexDirection.Column},pending:{alignItems:t.flexAlignItems.start},fulfilled:{},rejected:{}},actions:{display:t.display.flex,flexDirection:i.FlexDirection.Row},loader:{props:{name:"dots",size:"xs",withWrapper:!1}}};exports.chatbubble=n;
+import { getSpacing as e } from "./utils.js";
+import { display as i, flexAlignItems as o } from "./display.js";
+import { colors as r } from "./colors.js";
+import { typography as l } from "./typography.js";
+import { FlexDirection as t } from "../types/layout.js";
+import { TypographyVariant as a } from "../types/typography.js";
+const s = {
+  default: {
+    display: i.flex,
+    flexDirection: t.Column,
+    gap: e(2),
+    clear: "both",
+    margin: `${e(2)} 0`,
+    ...l[a.Body2]
+  },
+  question: {
+    padding: `${e(2)} ${e(4)}`,
+    textAlign: "right",
+    float: "right",
+    backgroundColor: r.bg.default,
+    minWidth: "320px",
+    maxWidth: "566px"
+  },
+  answer: {
+    padding: e(4)
+  },
+  pending: {},
+  fulfilled: {},
+  rejected: {},
+  content: {
+    default: {
+      gap: e(2),
+      display: i.flex,
+      flexDirection: t.Column
+    },
+    pending: {
+      alignItems: o.start
+    },
+    fulfilled: {},
+    rejected: {}
+  },
+  actions: {
+    display: i.flex,
+    flexDirection: t.Row
+  },
+  loader: {
+    props: {
+      name: "dots",
+      size: "xs",
+      withWrapper: !1
+    }
+  }
+};
+export {
+  s as chatbubble
+};