baseui/banner/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTrailingIconButton = exports.StyledTrailingContent = exports.StyledTrailingButtonContainer = exports.StyledTitle = exports.StyledRoot = exports.StyledMessageContent = exports.StyledMessage = exports.StyledLeadingContent = exports.StyledBelowContent = void 0;
var _styles = require("../styles");
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', ({
  $theme,
  $backgroundColor,
  $color,
  $nested
}) => {
  const radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
  return {
    backgroundColor: $backgroundColor,
    borderStartStartRadius: radius,
    borderStartEndRadius: radius,
    borderEndStartRadius: radius,
    borderEndEndRadius: radius,
    color: $color,
    display: 'grid',
    gridColumnGap: $theme.sizing.scale600,
    gridTemplateColumns: 'min-content auto min-content',
    gridTemplateRows: 'auto minmax(0, min-content)',
    marginTop: $theme.sizing.scale600,
    marginRight: $theme.sizing.scale600,
    marginBottom: $theme.sizing.scale600,
    marginLeft: $theme.sizing.scale600
  };
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledLeadingContent = exports.StyledLeadingContent = (0, _styles.styled)('div', ({
  $theme,
  $includesArtwork
}) => {
  return {
    alignItems: 'center',
    display: 'flex',
    paddingInlineStart: $includesArtwork ? $theme.sizing.scale600 : null
  };
});
StyledLeadingContent.displayName = "StyledLeadingContent";
StyledLeadingContent.displayName = 'StyledLeadingContent';
const StyledMessageContent = exports.StyledMessageContent = (0, _styles.styled)('div', ({
  $theme,
  $actionPosition
}) => {
  return {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    paddingBlockStart: $theme.sizing.scale600,
    paddingBlockEnd: $actionPosition === _constants.ACTION_POSITION.trailing ? $theme.sizing.scale600 : null
  };
});
StyledMessageContent.displayName = "StyledMessageContent";
StyledMessageContent.displayName = 'StyledMessageContent';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const StyledTrailingContent = exports.StyledTrailingContent = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {
    display: 'flex',
    gridRowEnd: 'span 2',
    marginInlineStart: 'auto'
  };
});
StyledTrailingContent.displayName = "StyledTrailingContent";
StyledTrailingContent.displayName = 'StyledTrailingContent';
const StyledBelowContent = exports.StyledBelowContent = (0, _styles.styled)('div', ({
  $theme,
  $actionPosition
}) => {
  return {
    gridColumnStart: 2,
    paddingBlockStart: $actionPosition === _constants.ACTION_POSITION.below ? $theme.sizing.scale300 : null,
    paddingBlockEnd: $actionPosition === _constants.ACTION_POSITION.below ? $theme.sizing.scale600 : null
  };
});
StyledBelowContent.displayName = "StyledBelowContent";
StyledBelowContent.displayName = 'StyledBelowContent';
const StyledTitle = exports.StyledTitle = (0, _styles.styled)('div', ({
  $theme
}) => {
  return $theme.typography.LabelMedium;
});
StyledTitle.displayName = "StyledTitle";
StyledTitle.displayName = 'StyledTitle';
const StyledMessage = exports.StyledMessage = (0, _styles.styled)('div', ({
  $theme
}) => {
  return $theme.typography.ParagraphMedium;
});
StyledMessage.displayName = "StyledMessage";
StyledMessage.displayName = 'StyledMessage';
const StyledTrailingButtonContainer = exports.StyledTrailingButtonContainer = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {
    display: 'flex',
    alignItems: 'center',
    paddingInlineEnd: $theme.sizing.scale600
  };
});
StyledTrailingButtonContainer.displayName = "StyledTrailingButtonContainer";
StyledTrailingButtonContainer.displayName = 'StyledTrailingButtonContainer';
const StyledTrailingIconButton = exports.StyledTrailingIconButton = (0, _styles.styled)('button', ({
  $theme,
  $nested
}) => {
  const radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
  return {
    alignItems: 'center',
    background: 'none',
    border: 'none',
    borderStartEndRadius: radius,
    borderEndEndRadius: radius,
    color: 'inherit',
    cursor: 'pointer',
    display: 'flex',
    paddingInlineStart: $theme.sizing.scale600,
    paddingInlineEnd: $theme.sizing.scale600,
    ':hover': {
      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
    },
    ':active': {
      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
    }
  };
});
StyledTrailingIconButton.displayName = "StyledTrailingIconButton";
StyledTrailingIconButton.displayName = 'StyledTrailingIconButton';