kwikid-components-react
Version:
KwikID's Component Library in React
56 lines (55 loc) • 7.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.KwikUIStyleInputOtpWrapper = exports.KwikUIStyleInputOtpSingleContainer = exports.KwikUIStyleInputOtpOutsideLabel = exports.KwikUIStyleInputOtpMessagesContainer = exports.KwikUIStyleInputOtpLabel = exports.KwikUIStyleInputOtpContainer = exports.KwikUIStyleInputOtpBoxesContainer = exports.KwikUIStyleInputOtpBox = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _Shape = require("../../../../shared/definitions/Shape");
var _Size = require("../../../../shared/definitions/Size");
var _Input = require("../../../../shared/styles/Input.style");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15; // InputOtp.style.ts
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); }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
const KwikUIStyleInputOtpWrapper = exports.KwikUIStyleInputOtpWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: var(--kwikui-space-s);\n width: 100%;\n"])));
const KwikUIStyleInputOtpLabel = exports.KwikUIStyleInputOtpLabel = _styledComponents.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n position: absolute;\n top: 0;\n margin-left: calc(-1 * var(--kwikui-space-xxs));\n transform: translate(0, -50%);\n background-color: var(--kwikui-color-white);\n padding: 0 var(--kwikui-space-xxs);\n"])), _Input.KwikUIStyleInputLabel);
const KwikUIStyleInputOtpContainer = exports.KwikUIStyleInputOtpContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: stretch;\n width: 100%;\n background: transparent;\n border: none;\n padding: 0;\n margin: 0;\n"])));
const KwikUIStyleInputOtpBoxesContainer = exports.KwikUIStyleInputOtpBoxesContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n gap: var(--kwikui-space-s);\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: center;\n"])));
const KwikUIStyleInputOtpBox = exports.KwikUIStyleInputOtpBox = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n flex: 0 0 auto;\n aspect-ratio: 1;\n min-width: unset;\n padding: 0;\n position: relative;\n overflow: hidden;\n\n input {\n ", "\n ", "\n ", "\n text-align: center;\n width: 100%;\n height: 100%;\n\n &::placeholder {\n ", "\n }\n }\n\n ", "\n\n ", "\n"])), _Input.KwikUIStyleInputContainerBase, _Input.KwikUIStyleInputStatus, _Input.KwikUIStyleInputContainerDisabled, _Input.KwikUIStyleInputContainerSize, _Input.KwikUIStyleInputContainerShape, _Input.KwikUIStyleInputContainerSize, _Input.KwikUIStyleInputReset, _Input.KwikUIStyleInputBase, _Input.KwikUIStyleInputSize, _Input.KwikUIStyleInputPlaceholder, _ref => {
let {
shape
} = _ref;
switch (shape) {
case _Shape.IKwikUIShape.ROUNDED:
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n border-radius: 2rem;\n "])));
case _Shape.IKwikUIShape.CURVED:
return (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border-radius: 0.25rem;\n "])));
case _Shape.IKwikUIShape.RECTANGLE:
return (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-radius: 0rem;\n "])));
default:
return (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n border-radius: 0.25rem;\n "])));
}
}, _ref2 => {
let {
size
} = _ref2;
switch (size) {
case _Size.IKwikUISize.XS:
return (0, _styledComponents.css)(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n width: calc(3 * var(--kwikui-font-size-xs));\n height: calc(3 * var(--kwikui-font-size-xs));\n "])));
case _Size.IKwikUISize.S:
return (0, _styledComponents.css)(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n width: calc(3 * var(--kwikui-font-size-s));\n height: calc(3 * var(--kwikui-font-size-s));\n "])));
case _Size.IKwikUISize.M:
return (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n width: calc(3 * var(--kwikui-font-size-m));\n height: calc(3 * var(--kwikui-font-size-m));\n "])));
case _Size.IKwikUISize.L:
return (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n width: calc(3 * var(--kwikui-font-size-l));\n height: calc(3 * var(--kwikui-font-size-l));\n "])));
case _Size.IKwikUISize.XL:
return (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n width: calc(3 * var(--kwikui-font-size-xl));\n height: calc(3 * var(--kwikui-font-size-xl));\n "])));
}
});
const KwikUIStyleInputOtpOutsideLabel = exports.KwikUIStyleInputOtpOutsideLabel = _styledComponents.default.label(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n ", "\n margin-bottom: var(--kwikui-space-xs);\n color: ", ";\n"])), _Input.KwikUIStyleInputLabel, _ref3 => {
let {
disabled
} = _ref3;
return disabled ? "var(--kwikui-color-disabled-text)" : "inherit";
});
const KwikUIStyleInputOtpSingleContainer = exports.KwikUIStyleInputOtpSingleContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n ", "\n ", "\n position: relative;\n width: 100%;\n\n input {\n ", "\n ", "\n ", "\n width: 100%;\n letter-spacing: 0.5em;\n &::placeholder {\n ", "\n letter-spacing: normal;\n }\n }\n"])), _Input.KwikUIStyleInputContainerBase, _Input.KwikUIStyleInputStatus, _Input.KwikUIStyleInputContainerDisabled, _Input.KwikUIStyleInputContainerSize, _Input.KwikUIStyleInputContainerShape, _Input.KwikUIStyleInputReset, _Input.KwikUIStyleInputBase, _Input.KwikUIStyleInputSize, _Input.KwikUIStyleInputPlaceholder);
const KwikUIStyleInputOtpMessagesContainer = exports.KwikUIStyleInputOtpMessagesContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n width: 100%;\n margin-top: var(--kwikui-space-xxs);\n font-size: var(--kwikui-font-size-s);\n"])));