@bothub-chat/ui

Version:
Bothub UI Components
32 lines (29 loc) • 2.21 kB
JavaScript
import{styled as e,css as o}from"styled-components";import{Typography as r}from"../typography/index.js";import"react";import"unified";import"remark-parse";import"remark-gfm";import"mdast-util-to-markdown";import{colorToRgba as t}from"../../utils/colors/colorToRgba.js";import"../../utils/colors/calculateGrayScale.js";import"../../utils/colors/calculateAccentColors.js";import"tslib";const a=e.a.withConfig({displayName:"styled__ScrollableTabsTab",componentId:"sc-mv61cj-0"})(["all:unset;cursor:pointer;display:flex;align-items:center;flex-shrink:0;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;"," ",";&:before{content:'';display:block;position:absolute;inset:0;transition:background 0.2s;",";}&:hover:before{background-color:",";}& > *{position:relative;z-index:1;}"],({$fullWidth:e})=>e&&o`
      justify-content: center;
      flex: 1;
    `,({$variant:e})=>"primary"===e?o`
          padding: 12.5px 16px;
          gap: 16px;

          svg {
            width: 24px;
            height: 24px;
          }
        `:o`
          padding: 10px 18px;
          gap: 10px;

          svg {
            width: 18px;
            height: 18px;
          }
        `,({$variant:e,$selected:r})=>r?o`
          border-radius: ${()=>"primary"===e?16:8}px;
          background: linear-gradient(90deg, #1c64f2 0%, #d41cf2 100%);
          opacity: 0.2;
        `:"primary"===e?o`
          border-radius: 16px;
          border: 1px solid ${({theme:e})=>e.colors.grayScale.gray3};
          background-color: ${({theme:e})=>e.colors.base.black};
        `:"secondary"===e?o`
          border-radius: 8px;
          background-color: ${({theme:e})=>e.colors.grayScale.gray7};
        `:void 0,({theme:e})=>t(e.colors.accent.primary,.2)),i=e(r).attrs(e=>({variant:"primary"===e.$variant?"body-l-regular":"button-sm"})).withConfig({displayName:"styled__ScrollableTabsTabLabel",componentId:"sc-mv61cj-1"})([""]),l=e.div.withConfig({displayName:"styled__ScrollableTabsFullWidth",componentId:"sc-mv61cj-2"})(["width:100%;display:flex;justify-content:space-between;gap:8px;overflow:hidden;"]);export{l as ScrollableTabsFullWidth,a as ScrollableTabsTab,i as ScrollableTabsTabLabel};