rds-ui-system 2.0.20 → 2.0.21

package/dist/lib/components/atoms/Modal/Modal.d.ts

@@ -12,6 +12,7 @@ export interface ModalProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   customHeight?: boolean
   height?: string
   onClick?: () => void
+  customClasses?: string
 }
 export declare const Modal: ({
   children,
@@ -20,4 +21,5 @@ export declare const Modal: ({
   onClick,
   width,
   height,
+  customClasses,
 }: ModalProps) => import('react/jsx-runtime').JSX.Element

package/dist/rds-ui-system.es.js

@@ -20,17 +20,17 @@ function x1() {
     f = Object.prototype.hasOwnProperty,
     g = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,
     v = { key: !0, ref: !0, __self: !0, __source: !0 }
-  function o(w, d, j) {
+  function d(w, o, j) {
     var u,
       c = {},
       _ = null,
       b = null
-    j !== void 0 && (_ = '' + j), d.key !== void 0 && (_ = '' + d.key), d.ref !== void 0 && (b = d.ref)
-    for (u in d) f.call(d, u) && !v.hasOwnProperty(u) && (c[u] = d[u])
-    if (w && w.defaultProps) for (u in ((d = w.defaultProps), d)) c[u] === void 0 && (c[u] = d[u])
+    j !== void 0 && (_ = '' + j), o.key !== void 0 && (_ = '' + o.key), o.ref !== void 0 && (b = o.ref)
+    for (u in o) f.call(o, u) && !v.hasOwnProperty(u) && (c[u] = o[u])
+    if (w && w.defaultProps) for (u in ((o = w.defaultProps), o)) c[u] === void 0 && (c[u] = o[u])
     return { $$typeof: i, type: w, key: _, ref: b, props: c, _owner: g.current }
   }
-  return ($.Fragment = h), ($.jsx = o), ($.jsxs = o), $
+  return ($.Fragment = h), ($.jsx = d), ($.jsxs = d), $
 }
 var U = {}
 /**
@@ -55,9 +55,9 @@ function f1() {
             f = Symbol.for('react.fragment'),
             g = Symbol.for('react.strict_mode'),
             v = Symbol.for('react.profiler'),
-            o = Symbol.for('react.provider'),
+            d = Symbol.for('react.provider'),
             w = Symbol.for('react.context'),
-            d = Symbol.for('react.forward_ref'),
+            o = Symbol.for('react.forward_ref'),
             j = Symbol.for('react.suspense'),
             u = Symbol.for('react.suspense_list'),
             c = Symbol.for('react.memo'),
@@ -115,9 +115,9 @@ function f1() {
                 l !== null &&
                 (l.$$typeof === _ ||
                   l.$$typeof === c ||
-                  l.$$typeof === o ||
+                  l.$$typeof === d ||
                   l.$$typeof === w ||
-                  l.$$typeof === d || // This needs to include all possible module reference object
+                  l.$$typeof === o || // This needs to include all possible module reference object
                   // types supported by any Flight configuration anywhere since
                   // we don't know which Flight build this will end up being used
                   // with.
@@ -164,10 +164,10 @@ function f1() {
                 case w:
                   var r = l
                   return ce(r) + '.Consumer'
-                case o:
+                case d:
                   var s = l
                   return ce(s._context) + '.Provider'
-                case d:
+                case o:
                   return Fe(l, l.render, 'ForwardRef')
                 case c:
                   var n = l.displayName || null
@@ -389,7 +389,7 @@ function f1() {
             }
             if (typeof l == 'object')
               switch (l.$$typeof) {
-                case d:
+                case o:
                   return Ue(l.render)
                 case c:
                   return z(l.type, r, s)
@@ -706,7 +706,7 @@ Check the top-level render call using <` +
               if (typeof r == 'function') s = r.propTypes
               else if (
                 typeof r == 'object' &&
-                (r.$$typeof === d || // Note: Memo only checks outer props here.
+                (r.$$typeof === o || // Note: Memo only checks outer props here.
                   // Inner props are checked in the reconciler.
                   r.$$typeof === c)
               )
@@ -2945,12 +2945,12 @@ const ne = {
     isOutlined: f = !1,
     onClick: g,
     children: v,
-    type: o,
+    type: d,
     customClasses: w,
-    iconName: d = 'Block',
+    iconName: o = 'Block',
   }) =>
     /* @__PURE__ */ e.jsx('button', {
-      type: o,
+      type: d,
       className: `flex flex-col items-center transition-color duration-100 
       justify-center gap-2 overflow-hidden rounded
       ${
@@ -2969,13 +2969,13 @@ const ne = {
           ? /* @__PURE__ */ e.jsx(e.Fragment, {
               children: /* @__PURE__ */ e.jsx('div', {
                 className: 'p-[0.5em]',
-                children: v || /* @__PURE__ */ e.jsx('span', { children: ne[d](f == !1, h == !0) }),
+                children: v || /* @__PURE__ */ e.jsx('span', { children: ne[o](f == !1, h == !0) }),
               }),
             })
           : /* @__PURE__ */ e.jsxs('div', {
               className: 'flex justify-center items-center flex-grow-0 flex-shrink-0 relative gap-2 px-6 py-2.5',
               children: [
-                i == 'ICONPLUS' && /* @__PURE__ */ e.jsx('span', { children: ne[d](f == !1, h == !0) }),
+                i == 'ICONPLUS' && /* @__PURE__ */ e.jsx('span', { children: ne[o](f == !1, h == !0) }),
                 /* @__PURE__ */ e.jsx('p', {
                   className: `flex-grow-0 flex-shrink-0 text-[0.8750em] text-center 
             `,
@@ -2998,17 +2998,17 @@ const ne = {
     isDisabled: f = !1,
     isError: g = !1,
     onChange: v,
-    value: o,
+    value: d,
     name: w,
-    type: d,
+    type: o,
     id: j,
     supportingText: u,
     isRequired: c,
   }) => {
-    const [_, b] = N(o || '')
+    const [_, b] = N(d || '')
     K(() => {
-      b(o || '')
-    }, [o])
+      b(d || '')
+    }, [d])
     const E = (a) => {
         const { value: m } = a.target
         b(m), v && v(a)
@@ -3038,7 +3038,7 @@ const ne = {
             id: j,
             value: _,
             name: w,
-            type: d,
+            type: o,
             onChange: E,
             placeholder: t,
             className: F,
@@ -3102,9 +3102,9 @@ const ne = {
   },
   M1 = ({ options: t, selectedCatOptions: i, setSelectedCatOptions: h, variant: f = 'DEFAULT' }) => {
     const [g, v] = N(null),
-      o = {},
+      d = {},
       w = t,
-      d = (a) => {
+      o = (a) => {
         const m = a.classId.split('_')[0],
           H = parseInt(m.split('.')[0])
         return (
@@ -3122,9 +3122,9 @@ const ne = {
           a
         )
       },
-      j = w.map((a) => d(a))
+      j = w.map((a) => o(a))
     Object.values(j).forEach((a) => {
-      o[a.groupName] || (o[a.groupName] = []), o[a.groupName].push(a)
+      d[a.groupName] || (d[a.groupName] = []), d[a.groupName].push(a)
     })
     const u = (a) => {
         v((m) => (m === a ? null : a))
@@ -3150,8 +3150,8 @@ const ne = {
     return /* @__PURE__ */ e.jsx(e.Fragment, {
       children: /* @__PURE__ */ e.jsx('div', {
         className: 'w-full overflow-hidden border rounded border-brand-black',
-        children: Object.keys(o).map((a) => {
-          const m = o[a],
+        children: Object.keys(d).map((a) => {
+          const m = d[a],
             H = a === g
           return /* @__PURE__ */ e.jsxs(
             'div',
@@ -3330,16 +3330,16 @@ const ne = {
     isError: f = !1,
     isRequired: g = !1,
     onChange: v,
-    checked: o,
+    checked: d,
     id: w,
-    readOnly: d,
+    readOnly: o,
   }) => {
-    const [j, u] = N(o || !1),
+    const [j, u] = N(d || !1),
       [c, _] = N(!1)
     return (
       K(() => {
-        u(o || !1)
-      }, [o]),
+        u(d || !1)
+      }, [d]),
       /* @__PURE__ */ e.jsxs('div', {
         className: `relative flex items-start justify-start gap-2 ${h ? 'opacity-50 pointer-events-none' : ''} bg-red`,
         children: [
@@ -3362,7 +3362,7 @@ const ne = {
                 stroke: f || g ? '#e2001a' : c ? 'black' : '#AFB0B7',
                 strokeWidth: c ? 3 : 1,
               }),
-              (j || o) &&
+              (j || d) &&
                 /* @__PURE__ */ e.jsx('path', {
                   d: 'M13.9887 5L8.28867 10.8L5.78867 8.3L3.88867 10.1L8.28867 14.5L15.8887 6.9L13.9887 5Z',
                   fill: 'black',
@@ -3382,7 +3382,7 @@ const ne = {
             onChange: (b) => {
               u(b.target.checked), v && v(b)
             },
-            readOnly: d,
+            readOnly: o,
             className: 'h-[1.2em] w-[1.2em] absolute opacity-0 cursor-pointer',
             onMouseEnter: () => _(!0),
             onMouseLeave: () => _(!1),
@@ -3449,16 +3449,16 @@ const ne = {
     isError: f = !1,
     isRequired: g = !1,
     onChange: v,
-    checked: o,
+    checked: d,
     id: w,
-    readOnly: d,
+    readOnly: o,
   }) => {
-    const [j, u] = N(o || !1),
+    const [j, u] = N(d || !1),
       [c, _] = N(!1)
     return (
       K(() => {
-        u(o || !1)
-      }, [o]),
+        u(d || !1)
+      }, [d]),
       /* @__PURE__ */ e.jsxs('div', {
         className: `relative flex items-start justify-start gap-2 ${h ? 'opacity-50 pointer-events-none' : ''} bg-red`,
         children: [
@@ -3498,7 +3498,7 @@ const ne = {
             onChange: (b) => {
               u(b.target.checked), v && v(b)
             },
-            readOnly: d,
+            readOnly: o,
             className: 'h-[1.2em] w-[1.2em] absolute opacity-0 cursor-pointer',
             onMouseEnter: () => _(!0),
             onMouseLeave: () => _(!1),
@@ -3520,9 +3520,9 @@ const ne = {
     onSelectionChange: f,
     label: g,
     prepopulatedId: v,
-    boxText: o,
+    boxText: d,
     isDisabled: w,
-    topPull: d,
+    topPull: o,
   }) => {
     const [j, u] = N(!1),
       c = () => {
@@ -3540,7 +3540,7 @@ const ne = {
       children: [
         /* @__PURE__ */ e.jsx('div', {
           className: `absolute top-[-0.5em] left-[0.7em] flex items-center rounded justify-start px-1 bg-white 
-        ${d && j ? 'opacity-0' : 'opacity-100'}`,
+        ${o && j ? 'opacity-0' : 'opacity-100'}`,
           children: /* @__PURE__ */ e.jsx('p', { className: 'text-xs text-left text-black', children: g }),
         }),
         /* @__PURE__ */ e.jsxs('div', {
@@ -3550,7 +3550,7 @@ const ne = {
               className: 'overflow-hidden',
               children: /* @__PURE__ */ e.jsx('div', {
                 className: 'my-2 text-base text-left text-black dropdown-header h-[1.6em] w-[40em]',
-                children: o || h,
+                children: d || h,
               }),
             }),
             /* @__PURE__ */ e.jsx('div', {
@@ -3610,7 +3610,7 @@ const ne = {
           ],
         }),
         /* @__PURE__ */ e.jsx('div', {
-          className: `dropdown-list absolute  w-full overflow-hidden rounded-b ${d ? '-mt-[13.05em]' : ''}
+          className: `dropdown-list absolute  w-full overflow-hidden rounded-b ${o ? '-mt-[13.05em]' : ''}
           transition-all duration-100 ${j ? 'h-[13em]' : 'h-[0em] pointer-events-none'}`,
           children:
             j &&
@@ -3659,17 +3659,17 @@ const ne = {
     options: f,
     isDisabled: g,
     label: v,
-    variant: o = 'DEFAULT',
+    variant: d = 'DEFAULT',
   }) => {
-    const [w, d] = N(!1),
+    const [w, o] = N(!1),
       j = d1(null),
       u = () => {
-        w && d(!1)
+        w && o(!1)
       }
     return /* @__PURE__ */ e.jsxs('div', {
       onMouseLeave: u,
       onClick: () => {
-        d(!0)
+        o(!0)
       },
       className: `cursor-pointer relative py-[0.7em] px-[1em] border border-black rounded h-[3.1em]
                 ${g ? 'bg-brand-grey-light pointer-events-none' : 'bg-brand-white pointer-events-auto'}`,
@@ -3785,12 +3785,12 @@ const ne = {
     children: f,
     bold: g,
     small: v,
-    important: o,
+    important: d,
     customClasses: w,
-    title: d,
+    title: o,
   }) =>
     /* @__PURE__ */ e.jsx('p', {
-      title: d,
+      title: o,
       className: `${g1[t]} ${g ? 'font-semibold' : ''} ${w || ''} ${
         i ? 'opacity-[0.3] cursor-not-allowed pointer-events-none' : ''
       }`,
@@ -3810,9 +3810,9 @@ const ne = {
     variant: f = 'DEFAULT',
     isDisabled: g = !1,
     isError: v = !1,
-    defaultValue: o,
+    defaultValue: d,
     isRequired: w,
-    onChange: d,
+    onChange: o,
     supportingText: j,
     id: u,
   }) => {
@@ -3836,9 +3836,9 @@ const ne = {
           /* @__PURE__ */ e.jsx('textarea', {
             id: u,
             value: t,
-            defaultValue: o,
+            defaultValue: d,
             placeholder: i,
-            onChange: d,
+            onChange: o,
             className: c,
           }),
           j &&
@@ -3866,7 +3866,15 @@ const ne = {
   J1 = {
     DEFAULT: 'default',
   },
-  K1 = ({ children: t, customWidth: i, customHeight: h, onClick: f, width: g = '60', height: v = '30' }) => {
+  K1 = ({
+    children: t,
+    customWidth: i,
+    customHeight: h,
+    onClick: f,
+    width: g = '60',
+    height: v = '30',
+    customClasses: d,
+  }) => {
     K(
       () => (
         (document.body.style.overflow = 'hidden'),
@@ -3876,8 +3884,8 @@ const ne = {
       ),
       [],
     )
-    const o = i ? g : 'auto',
-      w = h ? v : 'auto'
+    const w = i ? g : 'auto',
+      o = h ? v : 'auto'
     return /* @__PURE__ */ e.jsxs(e.Fragment, {
       children: [
         /* @__PURE__ */ e.jsx('div', {
@@ -3886,9 +3894,9 @@ const ne = {
           style: { opacity: '0.6' },
         }),
         /* @__PURE__ */ e.jsx('div', {
-          className: `fixed z-50 flex items-center justify-center p-8 overflow-hidden h-auto w-auto
-        lg:w-[${o}em] lg:h-[${w}em] -translate-x-1/2 -translate-y-1/2 border border-white rounded-md top-1/2 left-1/2 bg-brand-white`,
-          style: { width: `${o}em`, height: `${w}em` },
+          className: `fixed z-50 items-center justify-center p-8 overflow-hidden h-auto w-auto ${d || ''}
+        lg:w-[${w}em] lg:h-[${o}em] -translate-x-1/2 -translate-y-1/2 border border-white rounded-md top-1/2 left-1/2 bg-brand-white`,
+          style: { width: `${w}em`, height: `${o}em` },
           children: t || 'test',
         }),
       ],

package/dist/rds-ui-system.umd.js

@@ -26,17 +26,17 @@
       w = Object.prototype.hasOwnProperty,
       v = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,
       j = { key: !0, ref: !0, __self: !0, __source: !0 }
-    function d(p, f, u) {
+    function f(p, d, u) {
       var m,
         h = {},
         V = null,
         _ = null
-      u !== void 0 && (V = '' + u), f.key !== void 0 && (V = '' + f.key), f.ref !== void 0 && (_ = f.ref)
-      for (m in f) w.call(f, m) && !j.hasOwnProperty(m) && (h[m] = f[m])
-      if (p && p.defaultProps) for (m in ((f = p.defaultProps), f)) h[m] === void 0 && (h[m] = f[m])
+      u !== void 0 && (V = '' + u), d.key !== void 0 && (V = '' + d.key), d.ref !== void 0 && (_ = d.ref)
+      for (m in d) w.call(d, m) && !j.hasOwnProperty(m) && (h[m] = d[m])
+      if (p && p.defaultProps) for (m in ((d = p.defaultProps), d)) h[m] === void 0 && (h[m] = d[m])
       return { $$typeof: i, type: p, key: V, ref: _, props: h, _owner: v.current }
     }
-    return (O.Fragment = o), (O.jsx = d), (O.jsxs = d), O
+    return (O.Fragment = o), (O.jsx = f), (O.jsxs = f), O
   }
   var S = {}
   /**
@@ -60,9 +60,9 @@
               w = Symbol.for('react.fragment'),
               v = Symbol.for('react.strict_mode'),
               j = Symbol.for('react.profiler'),
-              d = Symbol.for('react.provider'),
+              f = Symbol.for('react.provider'),
               p = Symbol.for('react.context'),
-              f = Symbol.for('react.forward_ref'),
+              d = Symbol.for('react.forward_ref'),
               u = Symbol.for('react.suspense'),
               m = Symbol.for('react.suspense_list'),
               h = Symbol.for('react.memo'),
@@ -120,9 +120,9 @@
                   l !== null &&
                   (l.$$typeof === V ||
                     l.$$typeof === h ||
-                    l.$$typeof === d ||
-                    l.$$typeof === p ||
                     l.$$typeof === f ||
+                    l.$$typeof === p ||
+                    l.$$typeof === d ||
                     l.$$typeof === pe ||
                     l.getModuleId !== void 0))
               )
@@ -166,10 +166,10 @@
                   case p:
                     var r = l
                     return ge(r) + '.Consumer'
-                  case d:
+                  case f:
                     var s = l
                     return ge(s._context) + '.Provider'
-                  case f:
+                  case d:
                     return A1(l, l.render, 'ForwardRef')
                   case h:
                     var a = l.displayName || null
@@ -370,7 +370,7 @@
               }
               if (typeof l == 'object')
                 switch (l.$$typeof) {
-                  case f:
+                  case d:
                     return Z1(l.render)
                   case h:
                     return X(l.type, r, s)
@@ -655,7 +655,7 @@ Check the top-level render call using <` +
                 if (r == null || typeof r == 'string') return
                 var s
                 if (typeof r == 'function') s = r.propTypes
-                else if (typeof r == 'object' && (r.$$typeof === f || r.$$typeof === h)) s = r.propTypes
+                else if (typeof r == 'object' && (r.$$typeof === d || r.$$typeof === h)) s = r.propTypes
                 else return
                 if (s) {
                   var a = Z(r)
@@ -2889,12 +2889,12 @@ Check the top-level render call using <` +
       isOutlined: w = !1,
       onClick: v,
       children: j,
-      type: d,
+      type: f,
       customClasses: p,
-      iconName: f = 'Block',
+      iconName: d = 'Block',
     }) =>
       e.jsx('button', {
-        type: d,
+        type: f,
         className: `flex flex-col items-center transition-color duration-100 
       justify-center gap-2 overflow-hidden rounded
       ${
@@ -2913,13 +2913,13 @@ Check the top-level render call using <` +
             ? e.jsx(e.Fragment, {
                 children: e.jsx('div', {
                   className: 'p-[0.5em]',
-                  children: j || e.jsx('span', { children: Q[f](w == !1, o == !0) }),
+                  children: j || e.jsx('span', { children: Q[d](w == !1, o == !0) }),
                 }),
               })
             : e.jsxs('div', {
                 className: 'flex justify-center items-center flex-grow-0 flex-shrink-0 relative gap-2 px-6 py-2.5',
                 children: [
-                  i == 'ICONPLUS' && e.jsx('span', { children: Q[f](w == !1, o == !0) }),
+                  i == 'ICONPLUS' && e.jsx('span', { children: Q[d](w == !1, o == !0) }),
                   e.jsx('p', {
                     className: `flex-grow-0 flex-shrink-0 text-[0.8750em] text-center 
             `,
@@ -2940,17 +2940,17 @@ Check the top-level render call using <` +
       isDisabled: w = !1,
       isError: v = !1,
       onChange: j,
-      value: d,
+      value: f,
       name: p,
-      type: f,
+      type: d,
       id: u,
       supportingText: m,
       isRequired: h,
     }) => {
-      const [V, _] = M.useState(d || '')
+      const [V, _] = M.useState(f || '')
       M.useEffect(() => {
-        _(d || '')
-      }, [d])
+        _(f || '')
+      }, [f])
       const T = (c) => {
           const { value: C } = c.target
           _(C), j && j(c)
@@ -2976,7 +2976,7 @@ Check the top-level render call using <` +
                   children: i || 'label',
                 }),
               }),
-            e.jsx('input', { id: u, value: V, name: p, type: f, onChange: T, placeholder: t, className: U }),
+            e.jsx('input', { id: u, value: V, name: p, type: d, onChange: T, placeholder: t, className: U }),
             e.jsx('div', {
               style: { background: 'transparent' },
               className:
@@ -3032,9 +3032,9 @@ Check the top-level render call using <` +
     ze = { DEFAULT: 'bg-black hover:bg-black-800 active:bg-grey-900' },
     Xe = ({ options: t, selectedCatOptions: i, setSelectedCatOptions: o, variant: w = 'DEFAULT' }) => {
       const [v, j] = M.useState(null),
-        d = {},
+        f = {},
         p = t,
-        f = (c) => {
+        d = (c) => {
           const C = c.classId.split('_')[0],
             k = parseInt(C.split('.')[0])
           return (
@@ -3052,9 +3052,9 @@ Check the top-level render call using <` +
             c
           )
         },
-        u = p.map((c) => f(c))
+        u = p.map((c) => d(c))
       Object.values(u).forEach((c) => {
-        d[c.groupName] || (d[c.groupName] = []), d[c.groupName].push(c)
+        f[c.groupName] || (f[c.groupName] = []), f[c.groupName].push(c)
       })
       const m = (c) => {
           j((C) => (C === c ? null : c))
@@ -3080,8 +3080,8 @@ Check the top-level render call using <` +
       return e.jsx(e.Fragment, {
         children: e.jsx('div', {
           className: 'w-full overflow-hidden border rounded border-brand-black',
-          children: Object.keys(d).map((c) => {
-            const C = d[c],
+          children: Object.keys(f).map((c) => {
+            const C = f[c],
               k = c === v
             return e.jsxs(
               'div',
@@ -3252,16 +3252,16 @@ Check the top-level render call using <` +
       isError: w = !1,
       isRequired: v = !1,
       onChange: j,
-      checked: d,
+      checked: f,
       id: p,
-      readOnly: f,
+      readOnly: d,
     }) => {
-      const [u, m] = M.useState(d || !1),
+      const [u, m] = M.useState(f || !1),
         [h, V] = M.useState(!1)
       return (
         M.useEffect(() => {
-          m(d || !1)
-        }, [d]),
+          m(f || !1)
+        }, [f]),
         e.jsxs('div', {
           className: `relative flex items-start justify-start gap-2 ${
             o ? 'opacity-50 pointer-events-none' : ''
@@ -3286,7 +3286,7 @@ Check the top-level render call using <` +
                   stroke: w || v ? '#e2001a' : h ? 'black' : '#AFB0B7',
                   strokeWidth: h ? 3 : 1,
                 }),
-                (u || d) &&
+                (u || f) &&
                   e.jsx('path', {
                     d: 'M13.9887 5L8.28867 10.8L5.78867 8.3L3.88867 10.1L8.28867 14.5L15.8887 6.9L13.9887 5Z',
                     fill: 'black',
@@ -3306,7 +3306,7 @@ Check the top-level render call using <` +
               onChange: (_) => {
                 m(_.target.checked), j && j(_)
               },
-              readOnly: f,
+              readOnly: d,
               className: 'h-[1.2em] w-[1.2em] absolute opacity-0 cursor-pointer',
               onMouseEnter: () => V(!0),
               onMouseLeave: () => V(!1),
@@ -3365,16 +3365,16 @@ Check the top-level render call using <` +
       isError: w = !1,
       isRequired: v = !1,
       onChange: j,
-      checked: d,
+      checked: f,
       id: p,
-      readOnly: f,
+      readOnly: d,
     }) => {
-      const [u, m] = M.useState(d || !1),
+      const [u, m] = M.useState(f || !1),
         [h, V] = M.useState(!1)
       return (
         M.useEffect(() => {
-          m(d || !1)
-        }, [d]),
+          m(f || !1)
+        }, [f]),
         e.jsxs('div', {
           className: `relative flex items-start justify-start gap-2 ${
             o ? 'opacity-50 pointer-events-none' : ''
@@ -3416,7 +3416,7 @@ Check the top-level render call using <` +
               onChange: (_) => {
                 m(_.target.checked), j && j(_)
               },
-              readOnly: f,
+              readOnly: d,
               className: 'h-[1.2em] w-[1.2em] absolute opacity-0 cursor-pointer',
               onMouseEnter: () => V(!0),
               onMouseLeave: () => V(!1),
@@ -3434,9 +3434,9 @@ Check the top-level render call using <` +
       onSelectionChange: w,
       label: v,
       prepopulatedId: j,
-      boxText: d,
+      boxText: f,
       isDisabled: p,
-      topPull: f,
+      topPull: d,
     }) => {
       const [u, m] = M.useState(!1),
         h = () => {
@@ -3454,7 +3454,7 @@ Check the top-level render call using <` +
         children: [
           e.jsx('div', {
             className: `absolute top-[-0.5em] left-[0.7em] flex items-center rounded justify-start px-1 bg-white 
-        ${f && u ? 'opacity-0' : 'opacity-100'}`,
+        ${d && u ? 'opacity-0' : 'opacity-100'}`,
             children: e.jsx('p', { className: 'text-xs text-left text-black', children: v }),
           }),
           e.jsxs('div', {
@@ -3464,7 +3464,7 @@ Check the top-level render call using <` +
                 className: 'overflow-hidden',
                 children: e.jsx('div', {
                   className: 'my-2 text-base text-left text-black dropdown-header h-[1.6em] w-[40em]',
-                  children: d || o,
+                  children: f || o,
                 }),
               }),
               e.jsx('div', {
@@ -3524,7 +3524,7 @@ Check the top-level render call using <` +
             ],
           }),
           e.jsx('div', {
-            className: `dropdown-list absolute  w-full overflow-hidden rounded-b ${f ? '-mt-[13.05em]' : ''}
+            className: `dropdown-list absolute  w-full overflow-hidden rounded-b ${d ? '-mt-[13.05em]' : ''}
           transition-all duration-100 ${u ? 'h-[13em]' : 'h-[0em] pointer-events-none'}`,
             children:
               u &&
@@ -3569,17 +3569,17 @@ Check the top-level render call using <` +
       options: w,
       isDisabled: v,
       label: j,
-      variant: d = 'DEFAULT',
+      variant: f = 'DEFAULT',
     }) => {
-      const [p, f] = M.useState(!1),
+      const [p, d] = M.useState(!1),
         u = M.useRef(null),
         m = () => {
-          p && f(!1)
+          p && d(!1)
         }
       return e.jsxs('div', {
         onMouseLeave: m,
         onClick: () => {
-          f(!0)
+          d(!0)
         },
         className: `cursor-pointer relative py-[0.7em] px-[1em] border border-black rounded h-[3.1em]
                 ${v ? 'bg-brand-grey-light pointer-events-none' : 'bg-brand-white pointer-events-auto'}`,
@@ -3687,12 +3687,12 @@ Check the top-level render call using <` +
       children: w,
       bold: v,
       small: j,
-      important: d,
+      important: f,
       customClasses: p,
-      title: f,
+      title: d,
     }) =>
       e.jsx('p', {
-        title: f,
+        title: d,
         className: `${fe[t]} ${v ? 'font-semibold' : ''} ${p || ''} ${
           i ? 'opacity-[0.3] cursor-not-allowed pointer-events-none' : ''
         }`,
@@ -3710,9 +3710,9 @@ Check the top-level render call using <` +
       variant: w = 'DEFAULT',
       isDisabled: v = !1,
       isError: j = !1,
-      defaultValue: d,
+      defaultValue: f,
       isRequired: p,
-      onChange: f,
+      onChange: d,
       supportingText: u,
       id: m,
     }) => {
@@ -3733,7 +3733,7 @@ Check the top-level render call using <` +
                   children: o || 'label',
                 }),
               }),
-            e.jsx('textarea', { id: m, value: t, defaultValue: d, placeholder: i, onChange: f, className: h }),
+            e.jsx('textarea', { id: m, value: t, defaultValue: f, placeholder: i, onChange: d, className: h }),
             u &&
               e.jsx('p', {
                 className: `flex-grow w-[178px] h-[1em] text-[1em] text-left ml-[1em] mt-[0.1em]
@@ -3753,7 +3753,15 @@ Check the top-level render call using <` +
         children: o || 'test',
       }),
     g1 = { DEFAULT: 'default' },
-    v1 = ({ children: t, customWidth: i, customHeight: o, onClick: w, width: v = '60', height: j = '30' }) => {
+    v1 = ({
+      children: t,
+      customWidth: i,
+      customHeight: o,
+      onClick: w,
+      width: v = '60',
+      height: j = '30',
+      customClasses: f,
+    }) => {
       M.useEffect(
         () => (
           (document.body.style.overflow = 'hidden'),
@@ -3763,8 +3771,8 @@ Check the top-level render call using <` +
         ),
         [],
       )
-      const d = i ? v : 'auto',
-        p = o ? j : 'auto'
+      const p = i ? v : 'auto',
+        d = o ? j : 'auto'
       return e.jsxs(e.Fragment, {
         children: [
           e.jsx('div', {
@@ -3773,9 +3781,9 @@ Check the top-level render call using <` +
             style: { opacity: '0.6' },
           }),
           e.jsx('div', {
-            className: `fixed z-50 flex items-center justify-center p-8 overflow-hidden h-auto w-auto
-        lg:w-[${d}em] lg:h-[${p}em] -translate-x-1/2 -translate-y-1/2 border border-white rounded-md top-1/2 left-1/2 bg-brand-white`,
-            style: { width: `${d}em`, height: `${p}em` },
+            className: `fixed z-50 items-center justify-center p-8 overflow-hidden h-auto w-auto ${f || ''}
+        lg:w-[${p}em] lg:h-[${d}em] -translate-x-1/2 -translate-y-1/2 border border-white rounded-md top-1/2 left-1/2 bg-brand-white`,
+            style: { width: `${p}em`, height: `${d}em` },
             children: t || 'test',
           }),
         ],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rds-ui-system",
   "private": false,
-  "version": "2.0.20",
+  "version": "2.0.21",
   "packageManager": "pnpm@8.4.0",
   "main": "./dist/rds-ui-system.umd.js",
   "module": "./dist/rds-ui-system.es.js",