baseui/button-group/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledRoot = void 0;
var _styles = require("../styles");
var _button = require("../button");
var _constants = require("./constants");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', ({
  $padding,
  $wrap,
  $size,
  $theme
}) => {
  return {
    display: 'flex',
    columnGap: $theme.sizing.scale300,
    rowGap: $size === _button.SIZE.xSmall || $size === _button.SIZE.mini ? $theme.sizing.scale500 : $theme.sizing.scale300,
    ...getWrapStyles({
      $wrap
    }),
    ...getPaddingStyles({
      $padding,
      $theme
    })
  };
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const getWrapStyles = ({
  $wrap
}) => {
  if (typeof $wrap === 'boolean') {
    return $wrap ? {
      flexWrap: 'wrap'
    } : {
      overflowX: 'auto',
      scrollbarWidth: 'none'
    };
  }
  return {};
};
const getPaddingStyles = ({
  $padding,
  $theme
}) => {
  switch ($padding) {
    case _constants.PADDING.default:
      return {
        paddingLeft: $theme.sizing.scale600,
        paddingRight: $theme.sizing.scale600
      };
    case _constants.PADDING.none:
      return {
        paddingLeft: 0,
        paddingRight: 0
      };
    case _constants.PADDING.custom:
    default:
      return Object.freeze({});
  }
};