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

Braineet design system

"use strict";

exports.__esModule = true;
exports.StyledInput = exports.StyledIconBefore = exports.StyledIcon = exports.StyledBox = exports.InvalidInputStyles = exports.FocusedInputStyles = exports.FilledInputStyles = exports.DisabledInputStyles = exports.DefaultInputStyles = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _utils = require("../../utils");
var _box = _interopRequireDefault(require("../box"));
var _icon = _interopRequireDefault(require("../icon"));
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; }
var DefaultInputStyles = (0, _styledComponents.css)(["background-color:", ";border:2px solid ", ";color:", ";", " &::placeholder{color:", ";}&:not([disabled]):hover{background-color:", ";}"], function (p) {
  return p.theme.colors.background.light.grey;
}, function (p) {
  return p.theme.utils.lighten('black', 0.1);
}, function (p) {
  return p.theme.colors.black;
}, function (props) {
  return props.iconBefore ? (0, _styledComponents.css)(["padding:", " ", " ", " ", ";"], (0, _utils.fluid)(8), (0, _utils.fluid)(8), (0, _utils.fluid)(8), (0, _utils.fluid)(32)) : (0, _styledComponents.css)(["padding:", "};"], (0, _utils.fluid)(8));
}, function (p) {
  return p.theme.colors.black;
}, function (p) {
  return p.theme.utils.lighten('black', 0.1);
});
exports.DefaultInputStyles = DefaultInputStyles;
var FocusedInputStyles = (0, _styledComponents.css)(["", ""], function (props) {
  return props.isInvalid ? "&:focus:not(:disabled, :read-only)  {\n                background-color: " + props.theme.colors.white + ";\n            }" : '';
});
exports.FocusedInputStyles = FocusedInputStyles;
var FilledInputStyles = (0, _styledComponents.css)(["&:not(:placeholder-shown){&:valid:not(:focus),&:invalid:not(:focus){background-color:", ";}}"], function (p) {
  return p.theme.colors.white;
});
exports.FilledInputStyles = FilledInputStyles;
var InvalidInputStyles = (0, _styledComponents.css)(["", ""], function (props) {
  return props.isInvalid ? "\n            border: 2px solid " + props.theme.colors.error + ";\n            padding: " + (0, _utils.fluid)(9) + " " + (0, _utils.fluid)(45) + " " + (0, _utils.fluid)(10) + " " + (0, _utils.fluid)(16) + ";\n            background-color: " + props.theme.colors.white + ";\n        " : '';
});
exports.InvalidInputStyles = InvalidInputStyles;
var DisabledInputStyles = (0, _styledComponents.css)(["&:disabled{cursor:not-allowed;opacity:0.24;}"]);
exports.DisabledInputStyles = DisabledInputStyles;
var StyledBox = (0, _styledComponents.default)(_box.default).withConfig({
  displayName: "styles__StyledBox",
  componentId: "sc-186f60w-0"
})(["position:relative;width:100%;", ";"], function (p) {
  return p.inputBoxStyle;
});
exports.StyledBox = StyledBox;
var StyledInput = _styledComponents.default.input.withConfig({
  displayName: "styles__StyledInput",
  componentId: "sc-186f60w-1"
})(["display:block;width:100%;outline:none;box-sizing:border-box;border-radius:", ";height:", ";&:read-only{cursor:default;}", " ", " ", " ", " ", " ", " ", ""], function (props) {
  return props.theme.borderRadius.md;
}, function (p) {
  return (0, _utils.fluid)(p.$height);
}, DefaultInputStyles, FocusedInputStyles, FilledInputStyles, InvalidInputStyles, DisabledInputStyles, function (p) {
  return p.theme.helpers.getTextStyle('md');
}, function (p) {
  return p.inputStyle;
});
exports.StyledInput = StyledInput;
var StyledIcon = (0, _styledComponents.default)(_icon.default).withConfig({
  displayName: "styles__StyledIcon",
  componentId: "sc-186f60w-2"
})(["position:absolute;right:", ";top:", ";"], function (props) {
  return props.theme.spaces.md;
}, function (props) {
  return props.theme.spaces.md;
});
exports.StyledIcon = StyledIcon;
var StyledIconBefore = (0, _styledComponents.default)(_icon.default).withConfig({
  displayName: "styles__StyledIconBefore",
  componentId: "sc-186f60w-3"
})(["position:absolute;pointer-events:none;left:", ";top:", ";z-index:", ";"], function (props) {
  return props.theme.spaces.md;
}, function (props) {
  return props.theme.spaces.md;
}, function (p) {
  return p.theme.zIndex.front;
});
exports.StyledIconBefore = StyledIconBefore;