@redocly/graphql-docs/lib-esm/src/common/components/Box.js

Redocly GraphQL docs

import{jsx as c}from"react/jsx-runtime";import{css as a}from"styled-components";import{LayoutVariant as d}from"@redocly/theme";import{styled as e}from"../../styled-components.js";import{useSettings as f}from"../../settings/index.js";const x=a`
  padding: ${({rowGap:t=0})=>`calc(var(--spacing-unit) * ${t}) 0`};

  &:first-of-type {
    padding-top: 0;
  }

  &:last-of-type {
    padding-bottom: 0;
  }

  & > & {
    padding-left: ${({gutter:t=0})=>`calc(var(--spacing-unit) * ${t})`};
    padding-right: ${({gutter:t=0})=>`calc(var(--spacing-unit) * ${t})`};

    &:first-of-type {
      padding-left: 0;
    }

    &:last-of-type {
      padding-right: 0;
    }
  }
`,s=a`
  ${({direction:t,basis:i,wrap:o,align:n,justify:p,gap:r,isStacked:l=!1})=>a`
    flex-direction: ${l?"column":t};
    flex-basis: ${i};
    flex-wrap: ${o};
    align-items: ${n};
    justify-content: ${p};
    gap: ${r};
  `}

  ${({gutter:t})=>t!=null?x:""};
`,g=e.div`
  display: flex;
  width: 100%;

  ${s};
`,B=e.div`
  display: inline-flex;
  align-items: center;

  ${s};
`;function h({children:t,...i}){const{layout:o}=f(),n=o===d.STACKED;return c(g,{isStacked:n,...i,children:t})}export{h as Box,s as BoxCss,x as BoxGap,g as BoxWrapper,B as InlineBox};