@chayns-components/core/lib/cjs/components/file-select/FileSelect.styles.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledUploadedFilesList = exports.StyledMotionFileSelectList = exports.StyledFileSelectWrapper = exports.StyledFileSelectText = exports.StyledFileSelectContainer = exports.StyledFileSelect = void 0;
var _react = require("motion/react");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const StyledFileSelect = exports.StyledFileSelect = _styledComponents.default.div``;
const StyledFileSelectWrapper = exports.StyledFileSelectWrapper = _styledComponents.default.div`
    display: flex;

    cursor: ${({
  $isDisabled
}) => $isDisabled ? 'default' : 'pointer'};
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
`;
const StyledUploadedFilesList = exports.StyledUploadedFilesList = _styledComponents.default.div`
    ${({
  $shouldShowBorder,
  theme
}) => $shouldShowBorder && (0, _styledComponents.css)`
            border-top: 1px solid ${theme.headline};
        `}
`;
const StyledFileSelectContainer = exports.StyledFileSelectContainer = _styledComponents.default.div`
    border: ${({
  theme
}) => theme.text} 1px dashed;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px;
    justify-content: center;
    width: 100%;

    ${({
  $isImageSelection
}) => $isImageSelection && (0, _styledComponents.css)`
            border-left: none;
        `}

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
            &:focus-visible {
                transition: none;
                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
            }
        `}
`;
const StyledFileSelectText = exports.StyledFileSelectText = _styledComponents.default.p`
    color: ${({
  theme
}) => theme.text};
`;
const StyledMotionFileSelectList = exports.StyledMotionFileSelectList = (0, _styledComponents.default)(_react.motion.div)``;
//# sourceMappingURL=FileSelect.styles.js.map