@braineet/ui/dist/cjs/components/select/styles.js

Braineet design system

"use strict";

exports.__esModule = true;
exports.StyledSelectedText = exports.StyledSelected = exports.StyledSelect = exports.StyledIconSelect = exports.SelectedIcon = exports.SelectPopoverStyled = exports.Img = void 0;
var _select = require("ariakit/select");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _styledSystem = require("styled-system");
var _utils = require("../../utils");
var _box = _interopRequireDefault(require("../box"));
var _icon = _interopRequireDefault(require("../icon"));
var _text = _interopRequireDefault(require("../text"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* eslint-disable no-nested-ternary */

var selectSize = function selectSize(p) {
  return (0, _styledSystem.variant)({
    prop: 'size',
    variants: {
      sm: {
        height: '32px',
        fontSize: p.theme.typo.text.sm.fontSize
      },
      md: {
        height: '40px',
        fontSize: p.theme.typo.text.md.fontSize
      }
    }
  });
};
var selectedSize = function selectedSize(p) {
  return (0, _styledSystem.variant)({
    prop: 'size',
    variants: {
      sm: {
        fontSize: p.theme.typo.text.sm.fontSize
      },
      md: {
        fontSize: p.theme.typo.text.md.fontSize
      }
    }
  });
};
var Default = (0, _styledComponents.css)(["background-color:", ";padding:0 ", " 0 ", ";color:", ";&:not([disabled]):hover{background-color:", ";}"], function (props) {
  return props.theme.colors.background.light.grey;
}, (0, _utils.fluid)(36), (0, _utils.fluid)(8), function (props) {
  return props.theme.utils.lighten('black', 0.6);
}, function (p) {
  return p.theme.utils.lighten('black', 0.1);
});
var Invalid = (0, _styledComponents.css)(["&[data-invalid]{border:2px solid ", ";padding:0 ", " 0 ", ";background-color:", ";}"], function (p) {
  return p.theme.colors.error;
}, (0, _utils.fluid)(75), (0, _utils.fluid)(16), function (p) {
  return p.theme.colors.white;
});
var Focused = (0, _styledComponents.css)(["&:focus{border:2px solid ", ";}&:focus:not(:disabled),&:focus:not(:focus-visible){background-color:", ";outline:none;}"], function (p) {
  return p.theme.colors.brand;
}, function (props) {
  return props.theme.colors.white;
});
var Disabled = (0, _styledComponents.css)(["&:disabled{opacity:0.24;cursor:not-allowed;}"]);
var Filled = (0, _styledComponents.css)(["&[data-filled]{color:", ";background-color:", ";}"], function (p) {
  return p.theme.colors.black;
}, function (p) {
  return p.theme.colors.white;
});
var StyledSelect = (0, _styledComponents.default)(_select.Select).withConfig({
  displayName: "styles__StyledSelect",
  componentId: "sc-1c3zjd8-0"
})(["display:block;width:100%;outline:none;box-sizing:border-box;border-radius:", ";position:relative;display:", ";text-align:left;box-sizing:border-box;line-height:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border:2px solid ", ";cursor:pointer;", " &:read-only{cursor:default;}", " ", " ", " ", " ", " ", " ", ""], function (props) {
  return props.theme.borderRadius.md;
}, function (props) {
  return !props.disableSearch ? 'block' : 'none';
}, function (p) {
  return p.theme.utils.lighten('black', 0.1);
}, selectSize, (0, _utils.borderRadius)(8), Default, Filled, Focused, Invalid, Disabled, function (p) {
  return p.$buttonStyle;
});
exports.StyledSelect = StyledSelect;
var StyledSelected = (0, _styledComponents.default)(_box.default).withConfig({
  displayName: "styles__StyledSelected",
  componentId: "sc-1c3zjd8-1"
})(["display:flex;align-items:center;vertical-align:middle;height:100%;overflow:hidden;"]);
exports.StyledSelected = StyledSelected;
var StyledSelectedText = (0, _styledComponents.default)(_text.default).withConfig({
  displayName: "styles__StyledSelectedText",
  componentId: "sc-1c3zjd8-2"
})(["color:", ";width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;", ""], function (p) {
  return p.theme.utils.lighten('black', 0.8);
}, selectedSize);
exports.StyledSelectedText = StyledSelectedText;
var SelectedIcon = (0, _styledComponents.default)(_icon.default).withConfig({
  displayName: "styles__SelectedIcon",
  componentId: "sc-1c3zjd8-3"
})(["margin-right:0.5rem;"]);
exports.SelectedIcon = SelectedIcon;
var getIconStyled = function getIconStyled(props) {
  return {
    right: props.height === 40 ? (0, _utils.fluid)(8) : (0, _utils.fluid)(4)
  };
};
var StyledIconSelect = (0, _styledComponents.default)(_icon.default).withConfig({
  displayName: "styles__StyledIconSelect",
  componentId: "sc-1c3zjd8-4"
})(["position:absolute;top:50%;transform:translate(0%,-50%);", ""], function (props) {
  return getIconStyled(props);
});
exports.StyledIconSelect = StyledIconSelect;
var SelectPopoverStyled = (0, _styledComponents.default)(_select.SelectPopover).withConfig({
  displayName: "styles__SelectPopoverStyled",
  componentId: "sc-1c3zjd8-5"
})(["list-style:none;z-index:", ";max-height:min( var(--popover-available-height),", " );max-width:min( var(--popover-available-width),", " );overflow:auto;overscroll-behavior:contain;border:", ";background-color:", ";padding:", ";border-radius:8px;box-shadow:", ";outline:none !important;", ""], function (props) {
  return props.$zIndex || (props.modal || props.portal ? props.theme.zIndex.overlay : props.theme.zIndex.dropdown);
}, function (p) {
  return p.$maxHeightList || '320px';
}, function (p) {
  return p.$maxWidthList || 'var(--popover-available-width)';
}, function (props) {
  return props.isOpen && "2px solid " + props.theme.utils.lighten('black', 0.1);
}, function (props) {
  return props.theme.colors.white;
}, function (p) {
  return p.$padding || '0.5rem';
}, function (props) {
  return props.theme.elevations[4];
}, function (p) {
  return p.$popoverStyles;
});
exports.SelectPopoverStyled = SelectPopoverStyled;
var Img = _styledComponents.default.div.withConfig({
  displayName: "styles__Img",
  componentId: "sc-1c3zjd8-6"
})(["width:24px;height:24px;display:block;background:url('", "') no-repeat;background-size:24px 24px;margin-right:0.5em;"], function (props) {
  return props.path;
});
exports.Img = Img;