@matthew.ngo/react-form-kit
Version:
Form Kit for React. It consists of a set of components that can be used to create complex forms in a simple and declarative way.
1,403 lines (1,388 loc) • 228 kB
JavaScript
import React, { useState, useCallback, memo, forwardRef, useRef, useEffect, useMemo, useImperativeHandle } from 'react';
import styled, { ThemeProvider, css, keyframes } from 'styled-components';
import { merge, debounce as debounce$1 } from 'lodash-es';
import { AlertCircle, Info, AlertTriangle } from 'lucide-react';
import debounce from 'lodash-es/debounce';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { usePopper } from 'react-popper';
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { FixedSizeList } from 'react-window';
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function asyncGeneratorStep(n, t, e, r, o, a, c) {
try {
var i = n[a](c),
u = i.value;
} catch (n) {
return void e(n);
}
i.done ? t(u) : Promise.resolve(u).then(r, o);
}
function _asyncToGenerator(n) {
return function () {
var t = this,
e = arguments;
return new Promise(function (r, o) {
var a = n.apply(t, e);
function _next(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
}
function _throw(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
}
_next(void 0);
});
};
}
function _createForOfIteratorHelperLoose(r, e) {
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (t) return (t = t.call(r)).next.bind(t);
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
t && (r = t);
var o = 0;
return function () {
return o >= r.length ? {
done: !0
} : {
done: !1,
value: r[o++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (e.includes(n)) continue;
t[n] = r[n];
}
return t;
}
function _regeneratorRuntime() {
_regeneratorRuntime = function () {
return e;
};
var t,
e = {},
r = Object.prototype,
n = r.hasOwnProperty,
o = Object.defineProperty || function (t, e, r) {
t[e] = r.value;
},
i = "function" == typeof Symbol ? Symbol : {},
a = i.iterator || "@@iterator",
c = i.asyncIterator || "@@asyncIterator",
u = i.toStringTag || "@@toStringTag";
function define(t, e, r) {
return Object.defineProperty(t, e, {
value: r,
enumerable: !0,
configurable: !0,
writable: !0
}), t[e];
}
try {
define({}, "");
} catch (t) {
define = function (t, e, r) {
return t[e] = r;
};
}
function wrap(t, e, r, n) {
var i = e && e.prototype instanceof Generator ? e : Generator,
a = Object.create(i.prototype),
c = new Context(n || []);
return o(a, "_invoke", {
value: makeInvokeMethod(t, r, c)
}), a;
}
function tryCatch(t, e, r) {
try {
return {
type: "normal",
arg: t.call(e, r)
};
} catch (t) {
return {
type: "throw",
arg: t
};
}
}
e.wrap = wrap;
var h = "suspendedStart",
l = "suspendedYield",
f = "executing",
s = "completed",
y = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
var p = {};
define(p, a, function () {
return this;
});
var d = Object.getPrototypeOf,
v = d && d(d(values([])));
v && v !== r && n.call(v, a) && (p = v);
var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
function defineIteratorMethods(t) {
["next", "throw", "return"].forEach(function (e) {
define(t, e, function (t) {
return this._invoke(e, t);
});
});
}
function AsyncIterator(t, e) {
function invoke(r, o, i, a) {
var c = tryCatch(t[r], t, o);
if ("throw" !== c.type) {
var u = c.arg,
h = u.value;
return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
invoke("next", t, i, a);
}, function (t) {
invoke("throw", t, i, a);
}) : e.resolve(h).then(function (t) {
u.value = t, i(u);
}, function (t) {
return invoke("throw", t, i, a);
});
}
a(c.arg);
}
var r;
o(this, "_invoke", {
value: function (t, n) {
function callInvokeWithMethodAndArg() {
return new e(function (e, r) {
invoke(t, n, e, r);
});
}
return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
}
});
}
function makeInvokeMethod(e, r, n) {
var o = h;
return function (i, a) {
if (o === f) throw Error("Generator is already running");
if (o === s) {
if ("throw" === i) throw a;
return {
value: t,
done: !0
};
}
for (n.method = i, n.arg = a;;) {
var c = n.delegate;
if (c) {
var u = maybeInvokeDelegate(c, n);
if (u) {
if (u === y) continue;
return u;
}
}
if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
if (o === h) throw o = s, n.arg;
n.dispatchException(n.arg);
} else "return" === n.method && n.abrupt("return", n.arg);
o = f;
var p = tryCatch(e, r, n);
if ("normal" === p.type) {
if (o = n.done ? s : l, p.arg === y) continue;
return {
value: p.arg,
done: n.done
};
}
"throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
}
};
}
function maybeInvokeDelegate(e, r) {
var n = r.method,
o = e.iterator[n];
if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
var i = tryCatch(o, e.iterator, r.arg);
if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
var a = i.arg;
return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
}
function pushTryEntry(t) {
var e = {
tryLoc: t[0]
};
1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
}
function resetTryEntry(t) {
var e = t.completion || {};
e.type = "normal", delete e.arg, t.completion = e;
}
function Context(t) {
this.tryEntries = [{
tryLoc: "root"
}], t.forEach(pushTryEntry, this), this.reset(!0);
}
function values(e) {
if (e || "" === e) {
var r = e[a];
if (r) return r.call(e);
if ("function" == typeof e.next) return e;
if (!isNaN(e.length)) {
var o = -1,
i = function next() {
for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
return next.value = t, next.done = !0, next;
};
return i.next = i;
}
}
throw new TypeError(typeof e + " is not iterable");
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
value: GeneratorFunctionPrototype,
configurable: !0
}), o(GeneratorFunctionPrototype, "constructor", {
value: GeneratorFunction,
configurable: !0
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
var e = "function" == typeof t && t.constructor;
return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
}, e.mark = function (t) {
return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
}, e.awrap = function (t) {
return {
__await: t
};
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
return this;
}), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
void 0 === i && (i = Promise);
var a = new AsyncIterator(wrap(t, r, n, o), i);
return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
return t.done ? t.value : a.next();
});
}, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
return this;
}), define(g, "toString", function () {
return "[object Generator]";
}), e.keys = function (t) {
var e = Object(t),
r = [];
for (var n in e) r.push(n);
return r.reverse(), function next() {
for (; r.length;) {
var t = r.pop();
if (t in e) return next.value = t, next.done = !1, next;
}
return next.done = !0, next;
};
}, e.values = values, Context.prototype = {
constructor: Context,
reset: function (e) {
if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
},
stop: function () {
this.done = !0;
var t = this.tryEntries[0].completion;
if ("throw" === t.type) throw t.arg;
return this.rval;
},
dispatchException: function (e) {
if (this.done) throw e;
var r = this;
function handle(n, o) {
return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
}
for (var o = this.tryEntries.length - 1; o >= 0; --o) {
var i = this.tryEntries[o],
a = i.completion;
if ("root" === i.tryLoc) return handle("end");
if (i.tryLoc <= this.prev) {
var c = n.call(i, "catchLoc"),
u = n.call(i, "finallyLoc");
if (c && u) {
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
} else if (c) {
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
} else {
if (!u) throw Error("try statement without catch or finally");
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
}
}
}
},
abrupt: function (t, e) {
for (var r = this.tryEntries.length - 1; r >= 0; --r) {
var o = this.tryEntries[r];
if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
var i = o;
break;
}
}
i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
var a = i ? i.completion : {};
return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
},
complete: function (t, e) {
if ("throw" === t.type) throw t.arg;
return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
},
finish: function (t) {
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
var r = this.tryEntries[e];
if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
}
},
catch: function (t) {
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
var r = this.tryEntries[e];
if (r.tryLoc === t) {
var n = r.completion;
if ("throw" === n.type) {
var o = n.arg;
resetTryEntry(r);
}
return o;
}
}
throw Error("illegal catch attempt");
},
delegateYield: function (e, r, n) {
return this.delegate = {
iterator: values(e),
resultName: r,
nextLoc: n
}, "next" === this.method && (this.arg = t), y;
}
}, e;
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
/**
* Base theme with standardized values.
*/
var baseTheme = {
colors: {
// Primary Colors
primary: '#FF902F',
primaryLight: '#FFB97C',
// Adjusted based on the provided shades
'primary-hover': '#e5791e',
'primary-100': '#FFF5EC',
'primary-200': '#FFEBDA',
'primary-300': '#FFE1C7',
'primary-400': '#FFD7B4',
'primary-500': '#FFCDA2',
'primary-600': '#FFC38F',
'primary-700': '#FFB97C',
'primary-800': '#FFAF69',
'primary-900': '#FF8012',
'primary-1000': '#FF801F',
// Secondary Colors
secondary: '#212529',
secondaryLight: '#646669',
// Adjusted based on the provided shades
'secondary-hover': '#0d0f10',
'secondary-100': '#E9E9EA',
'secondary-200': '#D3D3D4',
'secondary-300': '#BCBEBF',
'secondary-400': '#A6A8A9',
'secondary-500': '#909294',
'secondary-600': '#7A7C7F',
'secondary-700': '#646669',
'secondary-800': '#4D5154',
'secondary-900': '#373B3E',
// Success Colors
success: '#55CE63',
successLight: '#88DD92',
// Adjusted based on the provided shades
'success-hover': '#39b248',
'success-100': '#EEFAEF',
'success-200': '#DDF5E0',
'success-300': '#CCF0D0',
'success-400': '#BBEBC1',
'success-500': '#AAE7B1',
'success-600': '#99E2A1',
'success-700': '#88DD92',
'success-800': '#77D882',
'success-900': '#66D373',
// Danger Colors
danger: '#FC133D',
dangerLight: '#F96C85',
// Adjusted based on the provided shades
'danger-hover': '#e51037',
'danger-100': '#FEEAEE',
'danger-200': '#FDD5DC',
'danger-300': '#FCC0CB',
'danger-400': '#FBABB9',
'danger-500': '#FB96A8',
'danger-600': '#FA8197',
'danger-700': '#F96C85',
'danger-800': '#F85774',
'danger-900': '#F74262',
// Info Colors
info: '#009EFB',
infoLight: '#4DBBFC',
// Adjusted based on the provided shades
'info-hover': '#0075c7',
'info-100': '#E6F5FF',
'info-200': '#CCECFE',
'info-300': '#B3E2FE',
'info-400': '#99D8FD',
'info-500': '#80CFFD',
'info-600': '#66C5FD',
'info-700': '#4DBBFC',
'info-800': '#33B1FC',
'info-900': '#1AA8FB',
// Warning Colors
warning: '#FFBC34',
warningLight: '#FFD071',
// Adjusted based on the provided shades
'warning-hover': '#e5a62a',
'warning-100': '#FFF8EB',
'warning-200': '#FFF2D6',
'warning-300': '#FFEBC2',
'warning-400': '#FFE4AE',
'warning-500': '#FFDE9A',
'warning-600': '#FFD785',
'warning-700': '#FFD071',
'warning-800': '#FFC95D',
'warning-900': '#FFC348',
// Other Colors
blue: '#00c5fb',
'blue-hover': '#0097c7',
maroon: '#f43b48',
'maroon-hover': '#dc2734',
violet: '#667eea',
'violet-hover': '#5063c9',
dark: '#29344a',
light: '#D5D8DA',
white: '#FFF',
black: '#000',
// Additional Colors
purple: '#9368E9',
'purple-100': '#F4F0FD',
'purple-200': '#E9E1FB',
'purple-300': '#DFD2F8',
'purple-400': '#D4C3F6',
'purple-500': '#C9B4F4',
'purple-600': '#BEA4F2',
'purple-700': '#B395F0',
'purple-800': '#A986ED',
'purple-900': '#9E77EB',
pink: '#FC6075',
'pink-100': '#FFEFF1',
'pink-200': '#FEDFE3',
'pink-300': '#FECFD6',
'pink-400': '#FEBFC8',
'pink-500': '#FEB0BA',
'pink-600': '#FDA0AC',
'pink-700': '#FD909E',
'pink-800': '#FD8091',
'pink-900': '#FF445D',
teal: '#02a8b5',
cyan: '#299cdb',
green: '#35BA67',
orange: '#fbc418',
indigo: '#4d5ddb',
yellow: '#ffd200',
'light-100': '#FCFCFC',
'light-200': '#F9F9F9',
'light-300': '#F5F6F7',
'light-400': '#F2F3F4',
'light-500': '#EFF0F1',
'light-600': '#ECEDEE',
'light-700': '#E9EAEB',
'light-800': '#E5E7E9',
'light-900': '#E2E4E6',
// Text Colors
text: '#5B6670',
'title-color': '#373B3E',
'sub-title': '#4D5154',
'text-muted': '#9595b5',
// Background Colors
background: '#f7f7f7',
'body-dark-bg': '#263238',
'wrapper-bg': '#f1f5f6',
'default-background': '#f7f8f9',
'black-bg': '#16191c',
// Other Theming Colors
'theme-title': '#97A2D2',
'input-bg': '#2c2c50',
'form-control-bg': '#FFF',
// Social Media Colors
facebook: '#3B5998',
twitter: '#00ACEE',
google: '#DD4B39',
telegram: '#0088CC',
linkedin: '#0E76A8',
youtube: '#C4302B',
instagram: '#3F729B',
reddit: '#C6C6C6',
pinterest: '#cc2127',
vk: '#2B587A',
rss: '#EE802F',
skype: '#00AFF0',
xing: '#126567',
tumblr: '#34526F',
email: '#6567A5',
delicious: '#205CC0',
stumbleupon: '#F74425',
digg: '#191919',
blogger: '#FC4F08',
flickr: '#FF0084',
vimeo: '#86C9EF',
yahoo: '#720E9E',
gplus: '#DD4B39',
appstore: '#000',
// Gradient Colors
'primary-gradient': 'linear-gradient(90.31deg, #FF902F -1.02%, #FF2D3D 132.59%)',
'blue-gradient': 'linear-gradient(to right, #00c5fb 0%, #0253cc 100%)',
'maroon-gradient': 'linear-gradient(to right, #f43b48 0%, #453a94 100%)',
'violet-gradient': 'linear-gradient(to right, #667eea 0%, #764ba2 100%)',
// Border Colors
border: '#D3D3D4',
'default-border': '#A6A8A9',
'dark-border': '#2e3840',
'input-border': '#C6C6C6',
error: '#dc3545'
},
spacing: {
gridUnit: 4,
// Define the base grid unit
spacingXXS: 2,
// Added XXS spacing
spacingXS: 4,
spacingSM: 8,
spacingMD: 16,
spacingLG: 24,
spacingXL: 32,
spacingXXL: 48,
spacing3XL: 64,
spacing4XL: 80
// Add more spacing if necessary
},
typography: {
primaryFont: 'Helvetica Neue, Arial, sans-serif',
// Added a generic font family
// Define font sizes based on the grid unit
fontSizeXXS: 8,
// Added XXS font size
fontSizeXS: 10,
// Added XS font size
fontSizeSM: 13,
fontSizeMD: 15,
fontSizeLG: 20,
fontSizeXL: 24,
fontSizeXXL: 30,
fontSize3XL: 36,
fontSize4XL: 48,
// Define font weights
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
fontWeightBold: 700,
// Define headings
h1: '2rem',
// Relative to the base font size
h2: '1.75rem',
h3: '1.5rem',
h4: '1.25rem',
h5: '1.15rem',
h6: '1rem'
},
borders: {
// Define border widths
borderWidth: 1,
borderWidthSM: 1,
borderWidthMD: 2,
borderWidthLG: 4,
// Define border radius
borderRadiusSM: 4,
borderRadiusMD: 6,
borderRadiusLG: 8,
borderRadiusXL: 10,
borderRadius2XL: 12,
borderRadiusRounded: '50%',
borderRadiusPill: '1.5rem'
},
breakpoints: {
// Define breakpoints based on common screen sizes
breakpointXS: '0px',
breakpointSM: '576px',
breakpointMD: '768px',
breakpointLG: '992px',
breakpointXL: '1200px',
breakpointXXL: '1400px'
},
shadows: {
// Define shadows
shadowSM: '0px 4px 8px 0px rgba(255, 255, 255, 0.15)',
// Added light color for better visibility
shadowMD: '0px 4px 16px 0px rgba(255, 255, 255, 0.7)',
// Added light color for better visibility
shadowLG: '0px 4px 24px 0px #BCBCBC40'
},
transitions: {
// Define transitions
transitionXS: '0.1s',
transitionSM: '0.2s',
transitionMD: '0.3s',
// Default transition
transitionLG: '0.4s',
transitionXL: '0.5s',
transitionEase: 'ease',
transitionEaseIn: 'ease-in',
transitionEaseOut: 'ease-out',
transitionEaseInOut: 'ease-in-out',
transitionLinear: 'linear',
// Predefined transition effects
transitionNormal: 'all 0.3s ease',
transitionFast: 'all 0.2s ease-in-out',
transitionSlow: 'all 0.4s ease',
transitionButton: 'background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease',
transitionInput: 'border-color 0.2s ease, box-shadow 0.2s ease'
},
componentDefaults: {
// Define component defaults
buttonPadding: '12px 24px',
// Using spacingMD
inputPadding: '12px',
inputBorder: '1px solid #C6C6C6',
inputBorderFocus: '1px solid #FF902F',
buttonPrimaryBackground: '#FF902F',
buttonPrimaryColor: '#FFF'
},
darkMode: {
// Define dark mode colors
darkBackground: '#333',
darkText: '#FFF',
darkBorder: '#666'
// Add more dark mode colors if necessary
}
};
/**
* Default theme for the form.
* Inherits from baseTheme and overrides specific values.
*/
var defaultTheme = /*#__PURE__*/_extends({}, baseTheme, {
colors: /*#__PURE__*/_extends({}, baseTheme.colors),
space: /*#__PURE__*/_extends({}, baseTheme.spacing, {
xs: baseTheme.spacing.spacingXS + "px",
sm: baseTheme.spacing.spacingSM + "px",
md: baseTheme.spacing.spacingMD + "px",
lg: baseTheme.spacing.spacingLG + "px",
xl: baseTheme.spacing.spacingXL + "px",
'2xl': baseTheme.spacing.spacingXXL + "px",
'3xl': baseTheme.spacing.spacing3XL + "px",
'4xl': baseTheme.spacing.spacing4XL + "px",
'5xl': baseTheme.spacing.spacingXXL * 1.5 + "px",
// Example of calculated value
'6xl': baseTheme.spacing.spacingXXL * 2 + "px",
'7xl': baseTheme.spacing.spacing3XL * 1.5 + "px",
'8xl': baseTheme.spacing.spacing3XL * 2 + "px",
'9xl': baseTheme.spacing.spacing4XL * 1.5 + "px"
// Add more custom spacing if necessary
}),
fontSizes: /*#__PURE__*/_extends({}, baseTheme.typography, {
'8': baseTheme.typography.fontSizeXXS + "px",
'9': baseTheme.typography.fontSizeXS + "px",
'10': baseTheme.typography.fontSizeXS + 2 + "px",
'11': baseTheme.typography.fontSizeXS + 3 + "px",
'12': baseTheme.typography.fontSizeSM - 1 + "px",
'13': baseTheme.typography.fontSizeSM + "px",
'14': baseTheme.typography.fontSizeSM + 1 + "px",
small: baseTheme.typography.fontSizeSM + "px",
medium: baseTheme.typography.fontSizeMD + "px",
'17': baseTheme.typography.fontSizeMD + 2 + "px",
'18': baseTheme.typography.fontSizeMD + 3 + "px",
'19': baseTheme.typography.fontSizeMD + 4 + "px",
large: baseTheme.typography.fontSizeLG + "px",
'22': baseTheme.typography.fontSizeLG + 2 + "px",
'23': baseTheme.typography.fontSizeLG + 3 + "px",
'24': baseTheme.typography.fontSizeXL + "px",
'26': baseTheme.typography.fontSizeXL + 2 + "px",
'28': baseTheme.typography.fontSizeXL + 4 + "px",
'30': baseTheme.typography.fontSizeXXL + "px",
'32': baseTheme.typography.fontSizeXXL + 2 + "px",
'34': baseTheme.typography.fontSizeXXL + 4 + "px",
'36': baseTheme.typography.fontSize3XL + "px",
'40': baseTheme.typography.fontSize3XL + 4 + "px",
'42': baseTheme.typography.fontSize3XL + 6 + "px",
'48': baseTheme.typography.fontSize4XL + "px",
'50': baseTheme.typography.fontSize4XL + 2 + "px",
'54': baseTheme.typography.fontSize4XL + 6 + "px",
'60': baseTheme.typography.fontSize4XL + 12 + "px",
h1: baseTheme.typography.h1,
h2: baseTheme.typography.h2,
h3: baseTheme.typography.h3,
h4: baseTheme.typography.h4,
h5: baseTheme.typography.h5,
h6: baseTheme.typography.h6
}),
fontWeights: /*#__PURE__*/_extends({}, baseTheme.typography, {
lighter: 'lighter',
light: baseTheme.typography.fontWeightLight,
normal: baseTheme.typography.fontWeightRegular,
medium: baseTheme.typography.fontWeightMedium,
semibold: baseTheme.typography.fontWeightBold - 100,
bold: baseTheme.typography.fontWeightBold,
bolder: 'bolder'
}),
radius: /*#__PURE__*/_extends({}, baseTheme.borders, {
sm: baseTheme.borders.borderRadiusSM + "px",
md: baseTheme.borders.borderRadiusMD + "px",
lg: baseTheme.borders.borderRadiusLG + "px",
xl: baseTheme.borders.borderRadiusXL + "px",
'2xl': baseTheme.borders.borderRadius2XL + "px",
rounded: "" + baseTheme.borders.borderRadiusRounded,
pill: "" + baseTheme.borders.borderRadiusPill
}),
breakpoints: /*#__PURE__*/_extends({}, baseTheme.breakpoints, {
// Use the same values as baseTheme
sm: baseTheme.breakpoints.breakpointSM,
md: baseTheme.breakpoints.breakpointMD,
lg: baseTheme.breakpoints.breakpointLG,
xl: baseTheme.breakpoints.breakpointXL
}),
shadows: /*#__PURE__*/_extends({}, baseTheme.shadows, {
// Use the same values as baseTheme
sm: baseTheme.shadows.shadowSM,
md: baseTheme.shadows.shadowMD,
lg: baseTheme.shadows.shadowLG
})
});
/**
* Create a custom theme by extending the default theme.
*
* @param customTheme - The custom theme object.
* @returns The merged theme object.
*/
var createTheme = function createTheme(customTheme) {
return merge({}, defaultTheme, customTheme);
};
var theme = /*#__PURE__*/createTheme({});
var useRadioGroup = function useRadioGroup(value, defaultValue, onChange) {
var _useState = useState(value || defaultValue || ''),
selectedValue = _useState[0],
setSelectedValue = _useState[1];
var handleChange = useCallback(function (newValue) {
if (!value) {
setSelectedValue(newValue);
}
onChange == null || onChange(newValue);
}, [onChange, value]);
return {
selectedValue: value || selectedValue,
handleChange: handleChange
};
};
var StyledRadioGroup = /*#__PURE__*/styled.div.withConfig({
displayName: "styled__StyledRadioGroup"
})(["display:flex;flex-direction:", ";gap:", ";opacity:", ";pointer-events:", ";"], function (_ref) {
var $orientation = _ref.$orientation;
return $orientation === 'vertical' ? 'column' : 'row';
}, function (_ref2) {
var theme = _ref2.theme;
return theme.space.md;
}, function (_ref3) {
var $disabled = _ref3.$disabled;
return $disabled ? '0.5' : '1';
}, function (_ref4) {
var $disabled = _ref4.$disabled;
return $disabled ? 'none' : 'auto';
});
var StyledRadioItem = /*#__PURE__*/styled.label.withConfig({
displayName: "styled__StyledRadioItem"
})(["display:flex;align-items:center;gap:", ";cursor:", ";opacity:", ";input[type='radio']{appearance:none;width:18px;height:18px;border:2px solid ", ";border-radius:50%;margin:0;position:relative;&:checked{border-color:", ";&:after{content:'';width:10px;height:10px;background:", ";border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}}&:focus-visible{outline:2px solid ", ";outline-offset:2px;}}"], function (_ref5) {
var theme = _ref5.theme,
$spacing = _ref5.$spacing;
return theme.space[$spacing];
}, function (_ref6) {
var $disabled = _ref6.$disabled;
return $disabled ? 'not-allowed' : 'pointer';
}, function (_ref7) {
var $disabled = _ref7.$disabled;
return $disabled ? '0.5' : '1';
}, function (_ref8) {
var theme = _ref8.theme,
$error = _ref8.$error;
return $error ? theme.colors.danger : theme.colors.border;
}, function (_ref9) {
var theme = _ref9.theme,
$error = _ref9.$error;
return $error ? theme.colors.danger : theme.colors.primary;
}, function (_ref10) {
var theme = _ref10.theme,
$error = _ref10.$error;
return $error ? theme.colors.danger : theme.colors.primary;
}, function (_ref11) {
var theme = _ref11.theme;
return theme.colors.primary;
});
var StyledError = /*#__PURE__*/styled.div.withConfig({
displayName: "styled__StyledError"
})(["color:", ";font-size:", ";margin-top:", ";"], function (_ref12) {
var theme = _ref12.theme;
return theme.colors.danger;
}, function (_ref13) {
var theme = _ref13.theme;
return theme.fontSizes.small;
}, function (_ref14) {
var theme = _ref14.theme;
return theme.space.xs;
});
var RadioGroup = /*#__PURE__*/memo(function (_ref) {
var options = _ref.options,
value = _ref.value,
defaultValue = _ref.defaultValue,
onChange = _ref.onChange,
_ref$orientation = _ref.orientation,
orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$error = _ref.error,
error = _ref$error === void 0 ? '' : _ref$error,
_ref$spacing = _ref.spacing,
spacing = _ref$spacing === void 0 ? 'md' : _ref$spacing,
_ref$labelPosition = _ref.labelPosition,
labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
className = _ref.className,
style = _ref.style,
_ref$ariaLabel = _ref.ariaLabel,
ariaLabel = _ref$ariaLabel === void 0 ? 'Radio Group' : _ref$ariaLabel,
ariaDescribedby = _ref.ariaDescribedby,
ariaInvalid = _ref.ariaInvalid,
ariaRequired = _ref.ariaRequired,
ariaDisabled = _ref.ariaDisabled,
_ref$role = _ref.role,
role = _ref$role === void 0 ? 'radiogroup' : _ref$role,
_ref$tabIndex = _ref.tabIndex,
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
testId = _ref.testId;
var _useRadioGroup = useRadioGroup(value, defaultValue, onChange),
selectedValue = _useRadioGroup.selectedValue,
handleChange = _useRadioGroup.handleChange;
return React.createElement(ThemeProvider, {
theme: theme
}, React.createElement(StyledRadioGroup, {
"$orientation": orientation,
"$disabled": disabled,
"$error": !!error,
className: className,
style: style,
role: role,
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-invalid": ariaInvalid,
"aria-required": ariaRequired,
"aria-disabled": ariaDisabled,
tabIndex: tabIndex,
"data-testid": testId
}, options.map(function (option) {
return React.createElement(StyledRadioItem, {
key: option.value,
"$labelPosition": labelPosition,
"$spacing": spacing,
"$disabled": disabled || option.disabled,
"$error": !!error
}, React.createElement("input", {
type: "radio",
value: option.value,
checked: selectedValue === option.value,
onChange: function onChange() {
return handleChange(option.value);
},
disabled: disabled || option.disabled,
"aria-label": typeof option.label === 'string' ? option.label : undefined
}), option.label);
}), error && React.createElement(StyledError, null, error)));
});
RadioGroup.displayName = 'RadioGroup';
var StyledContainer = /*#__PURE__*/styled.div.withConfig({
displayName: "styled__StyledContainer"
})(["display:flex;flex-direction:column;gap:", ";opacity:", ";pointer-events:", ";"], function (props) {
return props.theme.space.md;
}, function (props) {
return props.$disabled ? 0.5 : 1;
}, function (props) {
return props.$disabled ? 'none' : 'auto';
});
var StyledDropZone = /*#__PURE__*/styled.div.withConfig({
displayName: "styled__StyledDropZone"
})(["border:2px dashed ", ";border-radius:", ";padding:", ";text-align:center;background-color:", ";transition:all ", ";cursor:", ";&:hover{border-color:", ";background-color:", ";}"], function (props) {
return props.$isDragging ? props.theme.colors.primary : props.theme.colors.border;
}, function (props) {
return props.theme.radius.md;
}, function (props) {
return props.theme.space.xl;
}, function (props) {
return props.$isDragging ? props.theme.colors['primary-100'] : props.theme.colors['light-300'];
}, function (props) {
return props.theme.transitions.transitionNormal;
}, function (props) {
return props.$disabled ? 'default' : 'pointer';
}, function (props) {
return !props.$disabled && props.theme.colors.primary;
}, function (props) {
return !props.$disabled && props.theme.colors['primary-100'];
});
var StyledFileInput = /*#__PURE__*/styled.input.withConfig({
displayName: "styled__StyledFileInput"
})(["display:none;"]);
var StyledButton = /*#__PURE__*/styled.button.withConfig({
displayName: "styled__StyledButton"
})(["background-color:", ";color:", ";border:none;border-radius:", ";padding:", ";cursor:pointer;transition:background-color ", ";&:hover:not(:disabled){background-color:", ";}&:disabled{opacity:0.5;cursor:default;}"], function (props) {
return props.theme.colors.primary;
}, function (props) {
return props.theme.colors.white;
}, function (props) {
return props.theme.radius.md;
}, function (props) {
return props.theme.componentDefaults.buttonPadding;
}, function (props) {
return props.theme.transitions.transitionNormal;
}, function (props) {
return props.theme.colors['primary-hover'];
});
var StyledFileList = /*#__PURE__*/styled.ul.withConfig({
displayName: "styled__StyledFileList"
})(["list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:", ";"], function (props) {
return props.theme.space.sm;
});
var StyledFileItem = /*#__PURE__*/styled.li.withConfig({
displayName: "styled__StyledFileItem"
})(["display:flex;align-items:center;gap:", ";padding:", ";border:1px solid ", ";border-radius:", ";background-color:", ";"], function (props) {
return props.theme.space.sm;
}, function (props) {
return props.theme.space.sm;
}, function (props) {
return props.theme.colors.border;
}, function (props) {
return props.theme.radius.sm;
}, function (props) {
return props.theme.colors['light-100'];
});
var StyledPreview = /*#__PURE__*/styled.img.withConfig({
displayName: "styled__StyledPreview"
})(["width:40px;height:40px;object-fit:cover;border-radius:", ";"], function (props) {
return props.theme.radius.sm;
});
var StyledProgressBar = /*#__PURE__*/styled.div.withConfig({
displayName: "styled__StyledProgressBar"
})(["width:100%;height:4px;background-color:", ";border-radius:", ";overflow:hidden;position:relative;&:after{content:'';position:absolute;top:0;left:0;height:100%;width:", "%;background-color:", ";transition:width ", ";}"], function (props) {
return props.theme.colors['light-300'];
}, function (props) {
return props.theme.radius.pill;
}, function (props) {
return props.$progress;
}, function (props) {
return props.theme.colors.primary;
}, function (props) {
return props.theme.transitions.transitionNormal;
});
var StyledError$1 = /*#__PURE__*/styled.div.withConfig({
displayName: "styled__StyledError"
})(["color:", ";font-size:", ";margin-top:", ";"], function (props) {
return props.theme.colors.danger;
}, function (props) {
return props.theme.fontSizes.small;
}, function (props) {
return props.theme.space.xs;
});
var validateFile = function validateFile(file, options) {
var maxSize = options.maxSize,
minSize = options.minSize,
allowedTypes = options.allowedTypes;
if (maxSize && file.size > maxSize) {
return "File size exceeds " + formatFileSize(maxSize);
}
if (minSize && file.size < minSize) {
return "File size must be at least " + formatFileSize(minSize);
}
if (allowedTypes && allowedTypes.length > 0) {
var _file$name$split$pop;
var fileType = file.type || '';
var fileExtension = ((_file$name$split$pop = file.name.split('.').pop()) == null ? void 0 : _file$name$split$pop.toLowerCase()) || '';
var isAllowed = allowedTypes.some(function (type) {
if (type.startsWith('.')) {
return fileExtension === type.slice(1);
}
return fileType === type || fileType.startsWith(type + "/");
});
if (!isAllowed) {
return "File type not allowed. Accepted types: " + allowedTypes.join(', ');
}
}
return null;
};
var formatFileSize = function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
var k = 1024;
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
var i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};
var FileUpload = /*#__PURE__*/forwardRef(function (_ref, ref) {
var _ref$accept = _ref.accept,
accept = _ref$accept === void 0 ? '' : _ref$accept,
_ref$multiple = _ref.multiple,
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
_ref$maxFileSize = _ref.maxFileSize,
maxFileSize = _ref$maxFileSize === void 0 ? Infinity : _ref$maxFileSize,
onFileChange = _ref.onFileChange,
onComplete = _ref.onComplete,
onError = _ref.onError,
_ref$autoUpload = _ref.autoUpload,
autoUpload = _ref$autoUpload === void 0 ? true : _ref$autoUpload,
_ref$dragDrop = _ref.dragDrop,
dragDrop = _ref$dragDrop === void 0 ? false : _ref$dragDrop,
_ref$preview = _ref.preview,
preview = _ref$preview === void 0 ? false : _ref$preview,
_ref$buttonLabel = _ref.buttonLabel,
buttonLabel = _ref$buttonLabel === void 0 ? 'Choose File' : _ref$buttonLabel,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$readOnly = _ref.readOnly,
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
className = _ref.className,
style = _ref.style,
_ref$ariaLabel = _ref.ariaLabel,
ariaLabel = _ref$ariaLabel === void 0 ? 'File Upload' : _ref$ariaLabel,
_ref$validation = _ref.validation,
validation = _ref$validation === void 0 ? {} : _ref$validation,
_ref$progressIndicato = _ref.progressIndicator,
progressIndicator = _ref$progressIndicato === void 0 ? true : _ref$progressIndicato,
_ref$cancelUpload = _ref.cancelUpload,
cancelUpload = _ref$cancelUpload === void 0 ? false : _ref$cancelUpload,
_ref$maxFiles = _ref.maxFiles,
maxFiles = _ref$maxFiles === void 0 ? Infinity : _ref$maxFiles,
_ref$fileTypes = _ref.fileTypes,
fileTypes = _ref$fileTypes === void 0 ? [] : _ref$fileTypes,
_ref$showFileSize = _ref.showFileSize,
showFileSize = _ref$showFileSize === void 0 ? false : _ref$showFileSize,
_ref$showFileName = _ref.showFileName,
showFileName = _ref$showFileName === void 0 ? true : _ref$showFileName,
_ref$showFileList = _ref.showFileList,
showFileList = _ref$showFileList === void 0 ? true : _ref$showFileList,
_ref$clearFiles = _ref.clearFiles,
clearFiles = _ref$clearFiles === void 0 ? false : _ref$clearFiles,
_ref$openFileDialog = _ref.openFileDialog,
openFileDialog = _ref$openFileDialog === void 0 ? true : _ref$openFileDialog,
_ref$uploadUrl = _ref.uploadUrl,
uploadUrl = _ref$uploadUrl === void 0 ? '' : _ref$uploadUrl,
_ref$headers = _ref.headers,
headers = _ref$headers === void 0 ? {} : _ref$headers,
_ref$withCredentials = _ref.withCredentials,
withCredentials = _ref$withCredentials === void 0 ? false : _ref$withCredentials,
_ref$method = _ref.method,
method = _ref$method === void 0 ? 'POST' : _ref$method;
var _useState = useState([]),
files = _useState[0],
setFiles = _useState[1];
var _useState2 = useState(false),
isDragging = _useState2[0],
setIsDragging = _useState2[1];
var _useState3 = useState(''),
error = _useState3[0],
setError = _useState3[1];
var fileInputRef = useRef(null);
var abortControllerRef = useRef(null);
var handleFileSelect = useCallback(function (selectedFiles) {
var newFiles = Array.from(selectedFiles).map(function (file) {
return {
file: file,
progress: 0,
status: 'pending'
};
});
// Validate files
for (var _iterator = _createForOfIteratorHelperLoose(newFiles), _step; !(_step = _iterator()).done;) {
var fileInfo = _step.value;
var validationError = validateFile(fileInfo.file, _extends({
maxSize: maxFileSize,
allowedTypes: fileTypes
}, validation));
if (validationError) {
fileInfo.error = validationError;
fileInfo.status = 'error';
}
}
setFiles(function (prev) {
return [].concat(prev, newFiles).slice(0, maxFiles);
});
onFileChange == null || onFileChange(newFiles.map(function (f) {
return f.file;
}));
if (autoUpload && uploadUrl) {
uploadFiles(newFiles);
}
}, [maxFileSize, fileTypes, validation, maxFiles, autoUpload, uploadUrl, onFileChange]);
var uploadFiles = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(filesToUpload) {
var formData, response, result;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (uploadUrl) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
formData = new FormData();
filesToUpload.forEach(function (fileInfo) {
if (fileInfo.status === 'pending') {
formData.append('files', fileInfo.file);
}
});
abortControllerRef.current = new AbortController();
_context.prev = 5;
_context.next = 8;
return fetch(uploadUrl, {
method: method,
headers: headers,
body: formData,
credentials: withCredentials ? 'include' : 'same-origin',
signal: abortControllerRef.current.signal
});
case 8:
response = _context.sent;
if (response.ok) {
_context.next = 11;
break;
}
throw new Error("Upload failed: " + response.statusText);
case 11:
_context.next = 13;
return response.json();
case 13:
result = _context.sent;
onComplete == null || onComplete(result);
setFiles(function (prev) {
return prev.map(function (file) {
return _extends({}, file, {
status: 'completed',
progress: 100
});
});
});
_context.next = 21;
break;
case 18:
_context.prev = 18;
_context.t0 = _context["catch"](5);
if (_context.t0 instanceof Error) {
setError(_context.t0.message);
onError == null || onError(_context.t0);
}
case 21:
case "end":
return _context.stop();
}
}, _callee, null, [[5, 18]]);
}));
return function uploadFiles(_x) {
return _ref2.apply(this, arguments);
};
}();
var handleDrop = useCallback(function (e) {
e.preventDefault();
setIsDragging(false);
if (!disabled && !readOnly) {
handleFileSelect(e.dataTransfer.files);
}
}, [disabled, readOnly, handleFileSelect]);
var handleDragOver = useCallback(function (e) {
e.preventDefault();
if (!disabled && !readOnly) {
setIsDragging(true);
}
}, [disabled, readOnly]);
var handleDragLeave = useCallback(function (e) {
e.preventDefault();
setIsDragging(false);
}, []);
var handleCancelUpload = useCallback(function () {
if (abortControllerRef.current) {
abortControllerRef.current.abort();
abortControllerRef.current = null;
}
}, []);
var handleClearFiles = useCallback(function () {
setFiles([]);
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
}, []);
var handleButtonClick = useCallback(function () {
if (openFileDialog && fileInputRef.current && !disabled && !readOnly) {
fileInputRef.current.click();
}
}, [openFileDialog, disabled, readOnly]);
useEffect(function () {
return function () {
// Cleanup previews
files.forEach(function (fileInfo) {
if (fileInfo.preview) {
URL.revokeObjectURL(fileInfo.preview);
}
});
// Cancel any ongoing uploads
handleCancelUpload();
};
}, [files]);
return React.createElement(ThemeProvider, {
theme: theme
}, React.createElement(StyledContainer, {
ref: ref,
className: className,
style: style,
"$disabled": disabled
}, dragDrop && React.createElement(StyledDropZone, {
onDrop: handleDrop,
onDragOver: handleDragOver,
onDragLeave: handleDragLeave,
"$isDragging": isDragging,
"$disabled": disabled
}, isDragging ? 'Drop files here' : 'Drag files here or click to upload'), React.createElement(StyledFileInput, {
ref: fileInputRef,
type: "file",
accept: Array.isArray(accept) ? accept.join(',') : accept,
multiple: multiple,
onChange: function onChange(e) {
return handleFileSelect(e.target.files);
},
disabled: disabled || readOnly,
"aria-label": ariaLabel
}), !dragDrop && React.createElement(StyledButton, {
type: "button",
onClick: handleButtonClick,
disabled: disabled || readOnly
}, buttonLabel), error && React.createElement(StyledError$1, null, error), showFileList && files.length > 0 && React.createElement(StyledFileList, null, files.map(function (fileInfo, index) {
return React.createElement(StyledFileItem, {
key: index
}, preview && fileInfo.file.type.startsWith('image/') && React.createElement(StyledPreview, {
src: URL.createObjectURL(fileInfo.file),
alt: fileInfo.file.name
}), showFileName && React.createElement("span", null, fileInfo.file.name), showFileSize && React.createElement("span", null, "(", formatFileSize(fileInfo.file.size), ")"), progressIndicator && fileInfo.status === 'uploading' && React.createElement(StyledProgressBar, {
"$progress": fileInfo.progress
}), fileInfo.error && React.createElement(StyledError$1, null, fileInfo.error));
})), cancelUpload && React.createElement(StyledButton, {
type: "button",
onClick: handleCancelUpload,
disabled: disabled || readOnly
}, "Cancel Upload"), clearFiles && files.length > 0 && React.createElement(StyledButton, {
type: "button",
onClick: handleClearFiles,
disabled: disabled || readOnly
}, "Clear Files")));
});
FileUpload.displayName = 'FileUpload';
var TimePicker = function TimePicker() {
return React.createElement("div", null, "TimePicker");
};
var AutoComplete = function AutoComplete() {
return React.createElement("div", null, "AutoComplete");
};
var CheckboxGroup = function CheckboxGroup() {
return React.createElement("div", null, "CheckboxGroup");
};
var InputControl = function InputControl() {
return React.createElement("div", null, "InputControl");
};
var InputIcon = function InputIcon() {
return React.createElement("div", null, "InputIcon");
};
var DatePicker = function DatePicker() {
return React.createElement("div", null, "DatePicker");
};
var fadeIn = /*#__PURE__*/keyframes(["from{opacity:0;}to{opacity:1;}"]);
var slideIn = /*#__PURE__*/keyframes(["from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}"]);
var getAnimationStyles = function getAnimationStyles(animation) {
switch (animation) {
case 'fade':
return css(["animation:", " ", " ", ";"], fadeIn, function (props) {
return props.theme.transitions.transitionMD;
}, function (props) {
return props.theme.transitions.transitionEaseInOut;
});
case 'slide':
return css(["animation:", " ", " ", ";"], slideIn, function (props) {
return props.theme.transitions.transitionMD;
}, function (props) {
return props.theme.transitions.transitionEaseInOut;
});
default:
return '';
}
};
var getTypeStyles = function getTypeStyles(type) {
switch (type) {
case 'warning':
return css(["color:", ";background-color:", ";"], function (props) {
return props.theme.colors.warning;
}, function (props) {
return props.theme.colors['warning-100'];
});
case 'info':
return css(["color:", ";background-color:", ";"], function (props) {
return props.theme.colors.info;
}, function (props) {
return props.theme.colors['info-100'];
});
default:
return css(["color:", ";background-color:", ";"], function (props) {
return props.theme.colors.danger;
}, function (props) {
return props.theme.colors['danger-100'];
});
}
};
var StyledErrorContainer = /*#__PURE__*/styled.div.withConfig({
displayName: "styled__StyledErrorContainer"
})(["display:", ";align-items:center;gap:", ";padding:", " ", ";border-radius:", ";font-size:", ";font-weight:", ";margin:", " 0;", " ", " ", ""], function (props) {
return props.$show ? 'flex' : 'none';
}, function (props) {
return props.theme.space.xs;
}, function (props) {
return props.theme.space.xs;
}, function (props) {
return props.theme.space.sm;
}, function (props) {
return props.theme.radius.sm;
}, function (props) {
return props.theme.fontSizes[12];
}, function (props) {
return props.theme.fontWeights.medium;
}, function (props) {
return props.$position === 'below' ? props.theme.space.xs : '0';
}, function (props) {
return getTypeStyles(props.$type);
}, function (props) {
return getAnimationStyles(props.$animation);
}, function (props) {
return props.$position === 'sid