gd-design-library 0.3.4 → 0.4.0

package/tokens/price.js

@@ -1 +1,32 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../types/common.js"),t=require("../types/typography.js"),i=require("./display.js"),n=require("./spacing.js"),e=require("./font.js"),o=require("./colors.js"),a={default:{display:i.display.flex,alignItems:i.flexAlignItems.center,gap:n.spacing[r.SizeVariant.Sm]},currentPrice:{default:{fontSize:e.font.size[t.TypographyVariant.H3],fontWeight:e.font.weight.medium,lineHeight:e.font.line.height[t.TypographyVariant.H3],color:o.colors.text.default}},oldPrice:{default:{fontSize:e.font.size[t.TypographyVariant.H4],fontWeight:e.font.weight.medium,lineHeight:e.font.line.height[t.TypographyVariant.H4],color:o.colors.text.disabled}}};exports.price=a;
+import { flexAlignItems as o, display as r } from "./display.js";
+import { spacing as l } from "./spacing.js";
+import { font as e } from "./font.js";
+import { colors as t } from "./colors.js";
+import { TypographyVariant as i } from "../types/typography.js";
+import { SizeVariant as m } from "../types/common.js";
+const h = {
+  default: {
+    display: r.flex,
+    alignItems: o.center,
+    gap: l[m.Sm]
+  },
+  currentPrice: {
+    default: {
+      fontSize: e.size[i.H3],
+      fontWeight: e.weight.medium,
+      lineHeight: e.line.height[i.H3],
+      color: t.text.default
+    }
+  },
+  oldPrice: {
+    default: {
+      fontSize: e.size[i.H4],
+      fontWeight: e.weight.medium,
+      lineHeight: e.line.height[i.H4],
+      color: t.text.disabled
+    }
+  }
+};
+export {
+  h as price
+};

package/tokens/progressbar.js

@@ -1 +1,60 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");const r=require("../utils/layout.js"),t=require("./colors.js"),i=require("./spacing.js"),e=require("./display.js"),l=require("./font.js"),n=require("./values.js"),o={styledProgressBar:{default:{width:"100%",display:e.display.block}},styledTrack:{default:{position:"relative",width:"100%",height:i.spacing.md,overflow:"hidden",backgroundColor:t.colors.bg.default}},styledDeterminateFill:{default:{display:e.display.flex,alignItems:e.flexAlignItems.center,justifyContent:r.calculateJustify("end"),paddingRight:i.spacing.none,whiteSpace:"nowrap",height:"100%",backgroundColor:t.colors.bg.fill.primary.default,transition:n.values.transitions.progressbar.styledDeterminateFill}},styledIndeterminateFill:{default:{backgroundColor:t.colors.bg.fill.primary.default,width:"30%",height:"100%"}},styledIndeterminateFillAnimations:{animationName:"progressIndeterminate",animationProps:"1.2s infinite ease-in-out"},styledPercentLabel:{default:{display:e.display.flex,alignItems:e.flexAlignItems.center,color:t.colors.neutral.black,fontSize:l.font.size.caption,fontWeight:l.font.weight.normal,height:"100%",userSelect:"none"}}};exports.progressbar=o;
+import { colors as e } from "./colors.js";
+import { spacing as i } from "./spacing.js";
+import { flexAlignItems as r, display as t } from "./display.js";
+import { font as l } from "./font.js";
+import { values as o } from "./values.js";
+import { calculateJustify as a } from "../utils/layout.js";
+const g = {
+  styledProgressBar: {
+    default: {
+      width: "100%",
+      display: t.block
+    }
+  },
+  styledTrack: {
+    default: {
+      position: "relative",
+      width: "100%",
+      height: i.md,
+      overflow: "hidden",
+      backgroundColor: e.bg.default
+    }
+  },
+  styledDeterminateFill: {
+    default: {
+      display: t.flex,
+      alignItems: r.center,
+      justifyContent: a("end"),
+      paddingRight: i.none,
+      whiteSpace: "nowrap",
+      height: "100%",
+      backgroundColor: e.bg.fill.primary.default,
+      transition: o.transitions.progressbar.styledDeterminateFill
+    }
+  },
+  styledIndeterminateFill: {
+    default: {
+      backgroundColor: e.bg.fill.primary.default,
+      width: "30%",
+      height: "100%"
+    }
+  },
+  styledIndeterminateFillAnimations: {
+    animationName: "progressIndeterminate",
+    animationProps: "1.2s infinite ease-in-out"
+  },
+  styledPercentLabel: {
+    default: {
+      display: t.flex,
+      alignItems: r.center,
+      color: e.neutral.black,
+      fontSize: l.size.caption,
+      fontWeight: l.weight.normal,
+      height: "100%",
+      userSelect: "none"
+    }
+  }
+};
+export {
+  g as progressbar
+};

package/tokens/radiogroup.js

@@ -1,4 +1,68 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../types/typography.js"),n=require("../types/layout.js"),r=require("./borders.js"),e=require("./spacing.js"),l=require("./display.js"),s=require("./font.js"),t=require("./cursors.js"),o=require("./colors.js"),c={input:{position:"absolute",opacity:0,pointerEvents:"none"},default:{margin:e.spacing.none,padding:e.spacing.none,border:r.borders.none},label:{default:{display:l.display.block,padding:`${e.spacing.sm} ${e.spacing.md}`,fontSize:s.font.size.p,fontWeight:s.font.weight.medium,cursor:t.cursors.inherit,color:o.colors.text.caption,width:"100%",height:"100%",alignContent:i.TextAlign.Center,textAlign:i.TextAlign.Center},disabled:{},selected:{},hover:{"&:hover":{color:o.colors.neutral["grey.90"]}}},item:{default:{position:"relative",cursor:t.cursors.pointer,border:r.borders.generic({width:"1px",type:"solid",color:o.colors.border.default}),"&:focus-within":{outline:`2px solid ${o.colors.border.focus}`,outlineOffset:"-1px"}},disabled:{cursor:t.cursors.notAllowed,backgroundColor:o.colors.bg.default,"&::after":{content:'""',position:"absolute",top:e.spacing.none,left:e.spacing.none,width:"100%",height:"100%",background:`
+import { borders as r } from "./borders.js";
+import { spacing as e } from "./spacing.js";
+import { display as d } from "./display.js";
+import { font as i } from "./font.js";
+import { cursors as t } from "./cursors.js";
+import { colors as o } from "./colors.js";
+import { FlexDirection as n } from "../types/layout.js";
+import { TextAlign as l } from "../types/typography.js";
+const b = {
+  input: {
+    position: "absolute",
+    opacity: 0,
+    pointerEvents: "none"
+  },
+  default: {
+    margin: e.none,
+    padding: e.none,
+    border: r.none
+  },
+  label: {
+    default: {
+      display: d.block,
+      padding: `${e.sm} ${e.md}`,
+      fontSize: i.size.p,
+      fontWeight: i.weight.medium,
+      cursor: t.inherit,
+      color: o.text.caption,
+      width: "100%",
+      height: "100%",
+      alignContent: l.Center,
+      textAlign: l.Center
+    },
+    disabled: {},
+    selected: {},
+    hover: {
+      "&:hover": {
+        color: o.neutral["grey.90"]
+      }
+    }
+  },
+  item: {
+    default: {
+      position: "relative",
+      cursor: t.pointer,
+      border: r.generic({
+        width: "1px",
+        type: "solid",
+        color: o.border.default
+      }),
+      "&:focus-within": {
+        outline: `2px solid ${o.border.focus}`,
+        outlineOffset: "-1px"
+      }
+    },
+    disabled: {
+      cursor: t.notAllowed,
+      backgroundColor: o.bg.default,
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: e.none,
+        left: e.none,
+        width: "100%",
+        height: "100%",
+        background: `
           linear-gradient(
               to top right,
               transparent 49%,
@@ -6,4 +70,41 @@
             #E5E5E5 51%,
               transparent 51%
           )
-      `}},selected:{boxShadow:`0 0 0 1px ${o.colors.neutral.black}`,border:r.borders.generic({width:"1px",type:"solid",color:o.colors.neutral.black})},hover:{"&:hover":{border:r.borders.generic({width:"1px",type:"solid",color:o.colors.neutral.black})}}},layouts:{column:{display:"flex",flexDirection:n.FlexDirection.Column},row:{display:"flex",flexDirection:n.FlexDirection.Row},grid:{display:"grid"}}};exports.radiogroup=c;
+      `
+      }
+    },
+    selected: {
+      boxShadow: `0 0 0 1px ${o.neutral.black}`,
+      border: r.generic({
+        width: "1px",
+        type: "solid",
+        color: o.neutral.black
+      })
+    },
+    hover: {
+      "&:hover": {
+        border: r.generic({
+          width: "1px",
+          type: "solid",
+          color: o.neutral.black
+        })
+      }
+    }
+  },
+  layouts: {
+    column: {
+      display: "flex",
+      flexDirection: n.Column
+    },
+    row: {
+      display: "flex",
+      flexDirection: n.Row
+    },
+    grid: {
+      display: "grid"
+    }
+  }
+};
+export {
+  b as radiogroup
+};

package/tokens/radius.js

@@ -1 +1,14 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../types/common.js"),i={default:"6px",none:"0px",[e.SizeVariant.Xs]:"2px",[e.SizeVariant.Sm]:"4px",[e.SizeVariant.Md]:"8px",[e.SizeVariant.Lg]:"16px",[e.SizeVariant.Xl]:"32px",round:"50%"};exports.radius=i;
+import { SizeVariant as p } from "../types/common.js";
+const o = {
+  default: "6px",
+  none: "0px",
+  [p.Xs]: "2px",
+  [p.Sm]: "4px",
+  [p.Md]: "8px",
+  [p.Lg]: "16px",
+  [p.Xl]: "32px",
+  round: "50%"
+};
+export {
+  o as radius
+};

package/tokens/rating.js

@@ -1 +1,73 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../utils/helpers.js");require("react");const e=require("../types/common.js"),r=require("./cursors.js"),i=require("./display.js"),a=require("./values.js"),s={default:{display:i.display.inlineFlex,gap:0,position:"relative",overflow:"hidden"},progress:{default:{position:"absolute",display:i.display.flex,overflow:"hidden",left:0,svg:{flexShrink:0,flexGrow:0}}},radioInput:{default:{display:i.display.none}},label:{default:{cursor:r.cursors.pointer},active:{"&:hover":{transform:"scale(1.2)",transition:t.get(a.values,"transitions.rating.label")}},readOnly:{cursor:r.cursors.default}},size:{[e.SizeVariant.Sm]:{width:12,height:12},[e.SizeVariant.Md]:{width:24,height:24},[e.SizeVariant.Lg]:{width:48,height:48},[e.SizeVariant.Xl]:{width:60,height:60}},icons:{rateActive:{name:"star"},rateInactive:{name:"starOutlined"}}};exports.rating=s;
+import { cursors as i } from "./cursors.js";
+import { display as e } from "./display.js";
+import { values as r } from "./values.js";
+import { get as o } from "../utils/helpers.js";
+import { SizeVariant as t } from "../types/common.js";
+const f = {
+  default: {
+    display: e.inlineFlex,
+    gap: 0,
+    position: "relative",
+    overflow: "hidden"
+  },
+  progress: {
+    default: {
+      position: "absolute",
+      display: e.flex,
+      overflow: "hidden",
+      left: 0,
+      svg: {
+        flexShrink: 0,
+        flexGrow: 0
+      }
+    }
+  },
+  radioInput: {
+    default: {
+      display: e.none
+    }
+  },
+  label: {
+    default: {
+      cursor: i.pointer
+    },
+    active: {
+      "&:hover": {
+        transform: "scale(1.2)",
+        transition: o(r, "transitions.rating.label")
+      }
+    },
+    readOnly: {
+      cursor: i.default
+    }
+  },
+  size: {
+    [t.Sm]: {
+      width: 12,
+      height: 12
+    },
+    [t.Md]: {
+      width: 24,
+      height: 24
+    },
+    [t.Lg]: {
+      width: 48,
+      height: 48
+    },
+    [t.Xl]: {
+      width: 60,
+      height: 60
+    }
+  },
+  icons: {
+    rateActive: {
+      name: "star"
+    },
+    rateInactive: {
+      name: "starOutlined"
+    }
+  }
+};
+export {
+  f as rating
+};

package/tokens/reset.js

@@ -1 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css           */const e={};exports.reset=e;
+const e = {};
+export {
+  e as reset
+};

package/tokens/row.js

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={default:{display:"flex"}};exports.row=e;
+const e = {
+  default: {
+    display: "flex"
+  }
+};
+export {
+  e as row
+};

package/tokens/scroll.js

@@ -1 +1,99 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../constants/positioning.js"),n=require("./colors.js"),r=require("./display.js"),e=require("./spacing.js"),o=require("./values.js"),t=8,l={container:{default:{position:"relative",display:r.display.flex,overflow:"auto",isolation:"isolate",maxBlockSize:"100%","&::-webkit-scrollbar, &::-webkit-scrollbar-thumb":{background:"transparent",width:"0",height:"0"}}},content:{default:{position:"relative",zIndex:i.Z_INDEX.ZERO,flex:1,flexBasis:"auto",height:"max-content"}},scrollbars:{default:{position:"sticky",top:"0",left:"0",zIndex:i.Z_INDEX.FIRST,minWidth:"calc(100% - 1px)",minHeight:"calc(100% - 1px)",maxWidth:"calc(100% - 1px)",maxHeight:"calc(100% - 1px)",float:"left",marginRight:"calc(-100% + 1px)",marginInlineStart:"0",marginInlineEnd:"calc(-100% + 1px)",pointerEvents:"none"}},scrollbar:{default:{position:"absolute",pointerEvents:"auto",opacity:.2,transition:o.values.transitions.scroll.scrollbar,"&:hover":{opacity:1}},vertical:{right:0,bottom:`${t}px`,top:0,width:`${t}px`},horizontal:{left:0,bottom:0,right:`${t}px`,height:`${t}px`}},thumb:{default:{position:"absolute",cursor:"pointer",pointerEvents:"auto",background:n.colors.neutral["grey.80"],backgroundClip:"content-box",boxSizing:"border-box"},vertical:{right:0,bottom:0,top:0,width:`${t}px`,minHeight:e.spacing.md,transition:o.values.transitions.scroll.thumb},horizontal:{left:0,right:0,bottom:0,height:`${t}px`,minWidth:e.spacing.md,transition:o.values.transitions.scroll.thumb}}};exports.scroll=l;
+import { colors as n } from "./colors.js";
+import { display as a } from "./display.js";
+import { spacing as i } from "./spacing.js";
+import { values as o } from "./values.js";
+import { Z_INDEX as r } from "../constants/positioning.js";
+const t = 8, m = {
+  container: {
+    default: {
+      position: "relative",
+      display: a.flex,
+      overflow: "auto",
+      isolation: "isolate",
+      maxBlockSize: "100%",
+      "&::-webkit-scrollbar, &::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        width: "0",
+        height: "0"
+      }
+    }
+  },
+  content: {
+    default: {
+      position: "relative",
+      zIndex: r.ZERO,
+      flex: 1,
+      flexBasis: "auto",
+      height: "max-content"
+    }
+  },
+  scrollbars: {
+    default: {
+      position: "sticky",
+      top: "0",
+      left: "0",
+      zIndex: r.FIRST,
+      minWidth: "calc(100% - 1px)",
+      minHeight: "calc(100% - 1px)",
+      maxWidth: "calc(100% - 1px)",
+      maxHeight: "calc(100% - 1px)",
+      float: "left",
+      marginRight: "calc(-100% + 1px)",
+      marginInlineStart: "0",
+      marginInlineEnd: "calc(-100% + 1px)",
+      pointerEvents: "none"
+    }
+  },
+  scrollbar: {
+    default: {
+      position: "absolute",
+      pointerEvents: "auto",
+      opacity: 0.2,
+      transition: o.transitions.scroll.scrollbar,
+      "&:hover": {
+        opacity: 1
+      }
+    },
+    vertical: {
+      right: 0,
+      bottom: `${t}px`,
+      top: 0,
+      width: `${t}px`
+    },
+    horizontal: {
+      left: 0,
+      bottom: 0,
+      right: `${t}px`,
+      height: `${t}px`
+    }
+  },
+  thumb: {
+    default: {
+      position: "absolute",
+      cursor: "pointer",
+      pointerEvents: "auto",
+      background: n.neutral["grey.80"],
+      backgroundClip: "content-box",
+      boxSizing: "border-box"
+    },
+    vertical: {
+      right: 0,
+      bottom: 0,
+      top: 0,
+      width: `${t}px`,
+      minHeight: i.md,
+      transition: o.transitions.scroll.thumb
+    },
+    horizontal: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      height: `${t}px`,
+      minWidth: i.md,
+      transition: o.transitions.scroll.thumb
+    }
+  }
+};
+export {
+  m as scroll
+};

package/tokens/search.js

@@ -1 +1,45 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./spacing.js"),r=require("./colors.js"),i=require("./display.js"),n={default:{},input:{default:{width:"100%",boxSizing:"border-box"}},dropdownHeader:{row:{},link:{default:{},typography:{}},icon:{}},renderer:{row:{width:"100%",padding:`${e.spacing.md} ${e.spacing.md} 0`},link:{display:i.display.flex,alignItems:i.flexAlignItems.center,"&:after":{borderBottom:"none"},"& svg":{marginLeft:e.spacing.md}},linkIcon:{fill:r.colors.icon.primary.active,name:"arrowRight",width:10,height:10}}};exports.search=n;
+import { spacing as r } from "./spacing.js";
+import { colors as i } from "./colors.js";
+import { flexAlignItems as o, display as e } from "./display.js";
+const a = {
+  default: {},
+  input: {
+    default: {
+      width: "100%",
+      boxSizing: "border-box"
+    }
+  },
+  dropdownHeader: {
+    row: {},
+    link: {
+      default: {},
+      typography: {}
+    },
+    icon: {}
+  },
+  renderer: {
+    row: {
+      width: "100%",
+      padding: `${r.md} ${r.md} 0`
+    },
+    link: {
+      display: e.flex,
+      alignItems: o.center,
+      "&:after": {
+        borderBottom: "none"
+      },
+      "& svg": {
+        marginLeft: r.md
+      }
+    },
+    linkIcon: {
+      fill: i.icon.primary.active,
+      name: "arrowRight",
+      width: 10,
+      height: 10
+    }
+  }
+};
+export {
+  a as search
+};

package/tokens/searchModal.js

@@ -1 +1,159 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../utils/helpers.js");require("react");const s=require("../utils/layout.js"),n=require("../types/common.js"),o=require("../types/typography.js"),r=require("../types/layout.js"),c=require("../types/button.js"),e=require("./utils.js"),a=require("./typography.js"),l=require("./icon.js"),t=require("./display.js"),g=require("./cursors.js"),d=require("./font.js"),i=require("./colors.js"),u={default:{},wrapper:{padding:`${e.getSpacing(4)} ${e.getSpacing(3)}`,overflowY:"auto"},input:{default:{'& input[type="search"]':{padding:`${e.getSpacing(3)} 0 ${e.getSpacing(3)} ${e.getSpacing(7)}`,height:"54px",fontSize:d.font.size[o.TypographyVariant.Body2],"&::placeholder":{color:p.get(i.colors,["neutral","grey.60"])},"&::-webkit-search-cancel-button":{appearance:t.display.none},"&::-ms-clear":{display:t.display.none}}},endIcon:{margin:`0 ${e.getSpacing(3)} 0 0`,padding:e.getSpacing(2),cursor:g.cursors.pointer},icons:{close:{name:"cross",width:12,height:12}}},loader:{default:{display:t.display.flex,flexDirection:r.FlexDirection.Column,gap:e.getSpacing(2)}},items:{default:{display:t.display.flex,flexDirection:r.FlexDirection.Column},newSearchBtn:{styles:{textAlign:"left",color:i.colors.text.default,padding:`${e.getSpacing(2)} ${e.getSpacing(4)}`,...a.typography[o.TypographyVariant.Body2],".gd-button__content":{justifyContent:t.flexAlignItems.start}},attrs:{variant:c.ButtonVariant.Text}},noResult:{display:t.display.flex,flexDirection:r.FlexDirection.Row,alignItems:t.flexAlignItems.center,gap:e.getSpacing(2),padding:`${e.getSpacing(2)} ${e.getSpacing(4)}`,color:i.colors.text.caption,...a.typography[o.TypographyVariant.Body2]},groupTitle:{textAlign:"left",padding:`${e.getSpacing(2)} ${e.getSpacing(4)}`,color:i.colors.text.caption,...a.typography[o.TypographyVariant.Body2]},item:{styles:{textAlign:"left",gap:e.getSpacing(2),padding:`${e.getSpacing()} ${e.getSpacing(4)}`,color:i.colors.text.default,".gd-button__content":{display:t.display.block},...a.typography[o.TypographyVariant.Body2]},attrs:{variant:c.ButtonVariant.Text}},itemRow:{alignItems:t.flexAlignItems.center,justifyContent:s.calculateJustify("between"),gap:e.getSpacing(2),flexWrap:"noWrap"},itemColumn:{gap:e.getSpacing(.5),minWidth:0,flexWrap:"noWrap"},itemContent:{default:{},title:{flex:1,minWidth:0,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"},description:{flex:1,minWidth:0,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",color:i.colors.text.caption},date:{flex:"0 0",whiteSpace:"nowrap",color:i.colors.text.caption}},icons:{newChat:{name:"edit",fill:i.colors.icon.primary.default,...l.icon.size[n.SizeVariant.Sm]},noResults:{name:"search",...l.icon.size[n.SizeVariant.Sm]},item:{fill:i.colors.icon.primary.default,...l.icon.size[n.SizeVariant.Sm]}}}};exports.searchModal=u;
+import { getSpacing as t } from "./utils.js";
+import { typography as r } from "./typography.js";
+import { icon as n } from "./icon.js";
+import { flexAlignItems as a, display as o } from "./display.js";
+import { cursors as m } from "./cursors.js";
+import { font as c } from "./font.js";
+import { colors as e } from "./colors.js";
+import { calculateJustify as f } from "../utils/layout.js";
+import { ButtonVariant as d } from "../types/button.js";
+import { FlexDirection as l } from "../types/layout.js";
+import { get as s } from "../utils/helpers.js";
+import { SizeVariant as p } from "../types/common.js";
+import { TypographyVariant as i } from "../types/typography.js";
+const z = {
+  default: {},
+  wrapper: {
+    padding: `${t(4)} ${t(3)}`,
+    overflowY: "auto"
+  },
+  input: {
+    default: {
+      '& input[type="search"]': {
+        padding: `${t(3)} 0 ${t(3)} ${t(7)}`,
+        height: "54px",
+        fontSize: c.size[i.Body2],
+        "&::placeholder": {
+          color: s(e, ["neutral", "grey.60"])
+        },
+        "&::-webkit-search-cancel-button": {
+          appearance: o.none
+        },
+        "&::-ms-clear": {
+          display: o.none
+        }
+      }
+    },
+    endIcon: {
+      margin: `0 ${t(3)} 0 0`,
+      padding: t(2),
+      cursor: m.pointer
+    },
+    icons: {
+      close: {
+        name: "cross",
+        width: 12,
+        height: 12
+      }
+    }
+  },
+  loader: {
+    default: {
+      display: o.flex,
+      flexDirection: l.Column,
+      gap: t(2)
+    }
+  },
+  items: {
+    default: {
+      display: o.flex,
+      flexDirection: l.Column
+    },
+    newSearchBtn: {
+      styles: {
+        textAlign: "left",
+        color: e.text.default,
+        padding: `${t(2)} ${t(4)}`,
+        ...r[i.Body2],
+        ".gd-button__content": {
+          justifyContent: a.start
+        }
+      },
+      attrs: {
+        variant: d.Text
+      }
+    },
+    noResult: {
+      display: o.flex,
+      flexDirection: l.Row,
+      alignItems: a.center,
+      gap: t(2),
+      padding: `${t(2)} ${t(4)}`,
+      color: e.text.caption,
+      ...r[i.Body2]
+    },
+    groupTitle: {
+      textAlign: "left",
+      padding: `${t(2)} ${t(4)}`,
+      color: e.text.caption,
+      ...r[i.Body2]
+    },
+    item: {
+      styles: {
+        textAlign: "left",
+        gap: t(2),
+        padding: `${t()} ${t(4)}`,
+        color: e.text.default,
+        ".gd-button__content": {
+          display: o.block
+        },
+        ...r[i.Body2]
+      },
+      attrs: {
+        variant: d.Text
+      }
+    },
+    itemRow: {
+      alignItems: a.center,
+      justifyContent: f("between"),
+      gap: t(2),
+      flexWrap: "noWrap"
+    },
+    itemColumn: {
+      gap: t(0.5),
+      minWidth: 0,
+      flexWrap: "noWrap"
+    },
+    itemContent: {
+      default: {},
+      title: {
+        flex: 1,
+        minWidth: 0,
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        overflow: "hidden"
+      },
+      description: {
+        flex: 1,
+        minWidth: 0,
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        color: e.text.caption
+      },
+      date: {
+        flex: "0 0",
+        whiteSpace: "nowrap",
+        color: e.text.caption
+      }
+    },
+    icons: {
+      newChat: {
+        name: "edit",
+        fill: e.icon.primary.default,
+        ...n.size[p.Sm]
+      },
+      noResults: {
+        name: "search",
+        ...n.size[p.Sm]
+      },
+      item: {
+        fill: e.icon.primary.default,
+        ...n.size[p.Sm]
+      }
+    }
+  }
+};
+export {
+  z as searchModal
+};