@activecollab/components/dist/cjs/components/Input/Styles.js

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledPasswordIndicatorWrapper = exports.StyledPasswordIndicator = exports.StyledOptionWrapper = exports.StyledOptionRowEnd = exports.StyledOptionName = exports.StyledOptionFlag = exports.StyledOptionCode = exports.StyledInputWrapper = exports.StyledInputSelectTrigger = exports.StyledInput = exports.StyledFlagTriggerLabel = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _BoxSizingStyle = require("../BoxSizingStyle");
var _FontStyle = require("../FontStyle");
var _InputResetStyle = require("../InputResetStyle");
var _Typography = require("../Typography");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var StyledInputWrapper = exports.StyledInputWrapper = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledInputWrapper",
  componentId: "sc-ce8kcp-0"
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
  return props.$mode === "flat" && (0, _styledComponents.css)(["background-color:transparent;border:none;border-radius:none;"]);
}, function (props) {
  return props.$size === "small" && (0, _styledComponents.css)(["border-radius:6px;height:24px;"]);
}, function (props) {
  return props.$size === "big" && (0, _styledComponents.css)(["height:40px;"]);
}, function (props) {
  return props.$size === "biggest" && (0, _styledComponents.css)(["height:48px;"]);
}, function (props) {
  return props.$disabled && (0, _styledComponents.css)(["cursor:default;opacity:50%;"]);
}, function (props) {
  return !props.$disabled && !props.$invalid && (0, _styledComponents.css)(["&:focus-within,&:hover{border-color:var(--color-primary);}"]);
}, function (props) {
  return !props.$disabled && props.$invalid && props.$mode === "outlined" && (0, _styledComponents.css)(["border-color:var(--red-alert);"]);
});
StyledInputWrapper.displayName = "StyledInputWrapper";
var StyledInput = exports.StyledInput = _styledComponents.default.input.withConfig({
  displayName: "Styles__StyledInput",
  componentId: "sc-ce8kcp-1"
})(["", " ", " background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;", " &::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, _InputResetStyle.InputResetStyle, function (props) {
  return props.$mode === "flat" && (0, _styledComponents.css)(["background-color:transparent;"]);
}, function (props) {
  return props.$size === "big" && (0, _styledComponents.css)(["font-size:1rem;"]);
}, function (props) {
  return props.$size === "biggest" && (0, _styledComponents.css)(["font-size:1.25rem;font-weight:700;"]);
}, function (props) {
  return props.disabled && (0, _styledComponents.css)(["cursor:default;"]);
}, function (props) {
  return props.$loading && (0, _styledComponents.css)(["cursor:progress;"]);
}, function (props) {
  return props.align && (0, _styledComponents.css)(["text-align:", ";"], props.align);
}, function (props) {
  return props.$mode === "flat" && props.$invalid && (0, _styledComponents.css)(["color:var(--red-alert);"]);
});
StyledInput.displayName = "StyledInput";
var StyledPasswordIndicatorWrapper = exports.StyledPasswordIndicatorWrapper = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledPasswordIndicatorWrapper",
  componentId: "sc-ce8kcp-2"
})(["display:flex;gap:2px;margin-top:6px;margin-bottom:4px;"]);
StyledPasswordIndicatorWrapper.displayName = "StyledPasswordIndicatorWrapper";
var StyledPasswordIndicator = exports.StyledPasswordIndicator = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledPasswordIndicator",
  componentId: "sc-ce8kcp-3"
})(["width:100%;height:4px;border-radius:6px;background-color:", ";"], function (props) {
  var $strength = props.$strength,
    $index = props.$index;
  if ($strength === 0) {
    return "var(--color-theme-300)";
  } else if ($strength === 1) {
    return $index === 0 ? "var(--red-alert)" : "var(--color-theme-300)";
  } else if ($strength === 2) {
    return $index < 2 ? "var(--color-orange)" : "var(--color-theme-300)";
  } else if ($strength === 3) {
    return $index < 3 ? "var(--color-blue-sky)" : "var(--color-theme-300)";
  } else {
    return "var(--color-sucess-green)";
  }
});
StyledPasswordIndicator.displayName = "StyledPasswordIndicator";
var StyledInputSelectTrigger = exports.StyledInputSelectTrigger = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledInputSelectTrigger",
  componentId: "sc-ce8kcp-4"
})(["display:flex;gap:6px;align-items:center;margin-right:2px;margin-left:8px;color:var(--color-theme-700);font-weight:400;letter-spacing:0.02em;font-size:0.875rem;flex-shrink:0;cursor:", ";pointer-events:", ";", ""], function (props) {
  if (props.$disabled) {
    return "unset";
  }
  return "pointer";
}, function (props) {
  if (props.$disabled) {
    return "none";
  }
  return "unset";
}, function (props) {
  return props.$size === "big" && (0, _styledComponents.css)(["font-size:1rem;"]);
});
StyledInputSelectTrigger.displayName = "StyledInputSelectTrigger";
var StyledFlagTriggerLabel = exports.StyledFlagTriggerLabel = _styledComponents.default.span.withConfig({
  displayName: "Styles__StyledFlagTriggerLabel",
  componentId: "sc-ce8kcp-5"
})(["font-size:", ";"], function (_ref) {
  var $size = _ref.$size;
  return $size === "small" ? "20px" : "24px";
});
StyledFlagTriggerLabel.displayName = "StyledFlagTriggerLabel";
var StyledOptionFlag = exports.StyledOptionFlag = _styledComponents.default.span.withConfig({
  displayName: "Styles__StyledOptionFlag",
  componentId: "sc-ce8kcp-6"
})(["font-size:24px;margin-right:4px;"]);
StyledFlagTriggerLabel.displayName = "StyledOptionFlag";
var StyledOptionName = exports.StyledOptionName = (0, _styledComponents.default)(_Typography.Body2).withConfig({
  displayName: "Styles__StyledOptionName",
  componentId: "sc-ce8kcp-7"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
StyledOptionName.displayName = "StyledOptionName";
var StyledOptionCode = exports.StyledOptionCode = (0, _styledComponents.default)(_Typography.Body2).withConfig({
  displayName: "Styles__StyledOptionCode",
  componentId: "sc-ce8kcp-8"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;color:var(--color-theme-600);flex-shrink:0;"]);
StyledOptionCode.displayName = "StyledOptionCode";
var StyledOptionRowEnd = exports.StyledOptionRowEnd = _styledComponents.default.span.withConfig({
  displayName: "Styles__StyledOptionRowEnd",
  componentId: "sc-ce8kcp-9"
})(["display:flex;align-items:center;gap:8px;"]);
StyledOptionRowEnd.displayName = "StyledOptionRowEnd";
var StyledOptionWrapper = exports.StyledOptionWrapper = _styledComponents.default.span.withConfig({
  displayName: "Styles__StyledOptionWrapper",
  componentId: "sc-ce8kcp-10"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;display:flex;justify-items:center;align-items:center;"]);
StyledOptionWrapper.displayName = "StyledOptionWrapper";
//# sourceMappingURL=Styles.js.map