@bothub-chat/ui/dist/components/checkbox/styled.js

Bothub UI Components

import{styled as e,css as o}from"styled-components";import{CheckSmallIcon as r}from"../../icons/check-small/index.js";import{Typography as i}from"../typography/index.js";import{Skeleton as c}from"../skeleton/index.js";const t=e.label.withConfig({displayName:"styled__CheckboxStyled",componentId:"sc-im2c17-0"})(["display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;"," "," ",""],(({$disabled:e})=>e?o`
        cursor: not-allowed;
      `:o`
      cursor: pointer;
    `),(({$fullWidth:e})=>e&&o`
      width: 100%;
    `),(({$rowReverse:e})=>e&&o`
      flex-direction: row-reverse;
    `)),s=e.span.withConfig({displayName:"styled__CheckboxBlock",componentId:"sc-im2c17-1"})(["display:inline-flex;width:20px;height:20px;justify-content:center;background:",";border:1px solid ",";border-radius:2px;overflow:hidden;cursor:pointer;flex-shrink:0;box-sizing:border-box;&:hover{border-color:",";}svg{visibility:hidden;}"],(({theme:e})=>e.colors.grayScale.gray3),(({theme:e})=>e.colors.grayScale.gray1),(({theme:e,$checkedColor:o})=>o||e.colors.accent.primary)),l=e(c).withConfig({displayName:"styled__CheckboxBlockSkeleton",componentId:"sc-im2c17-2"})(["width:20px;height:20px;border-radius:2px;"]),n=e(i).attrs({variant:"input-sm"}).withConfig({displayName:"styled__CheckboxLabel",componentId:"sc-im2c17-3"})(["display:inline-flex;width:100%;align-items:center;gap:8px;cursor:inherit;"]),d=e(r).attrs({size:20}).withConfig({displayName:"styled__CheckboxCheckedIcon",componentId:"sc-im2c17-4"})([""]),a=e.input.withConfig({displayName:"styled__CheckboxInput",componentId:"sc-im2c17-5"})(["width:0;height:0;opacity:0;cursor:pointer;position:absolute;&:checked + span{"," svg{visibility:visible;}}&:checked:not(:disabled) + ",":hover{","}&:disabled + ","{border-color:",";background:",";cursor:not-allowed;svg{path{fill:",";}}}&:focus-visible + ","{border-color:",";}"],(({theme:e,$checkedColor:r})=>{const i=r||e.colors.accent.primary;return o`
        border-color: ${i};
        background: ${i};
      `}),s,(({theme:e,$checkedColor:r})=>{const i=r||e.colors.accent.strong;return o`
        border-color: ${i};
        background: ${i};
      `}),s,(({theme:e})=>e.colors.grayScale.gray1),(({theme:e})=>e.colors.grayScale.gray1),(({theme:e})=>e.colors.grayScale.gray6),s,(({theme:e})=>e.colors.base.white));export{s as CheckboxBlock,l as CheckboxBlockSkeleton,d as CheckboxCheckedIcon,a as CheckboxInput,n as CheckboxLabel,t as CheckboxStyled};