@trops/dash-react 1.0.50 → 1.0.52

package/dist/index.js

@@ -3,7 +3,7 @@ import * as SolidIcons from '@fortawesome/free-solid-svg-icons';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 export * from '@fortawesome/free-solid-svg-icons';
 import * as BrandIcons from '@fortawesome/free-brands-svg-icons';
-import React, { createContext, useContext, useState, useCallback, useMemo, createElement, useEffect, useRef, Fragment, Children } from 'react';
+import React, { createContext, useContext, useState, useCallback, useMemo, useRef, useEffect, createElement, Fragment, Children } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Dialog, Transition } from '@headlessui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -30,27 +30,28 @@ var ThemeContext = /*#__PURE__*/createContext({
   rawThemes: null
 });
 
+function _createForOfIteratorHelper$2(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$j(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _typeof$K(o) { "@babel/helpers - typeof"; return _typeof$K = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$K(o); }
 function ownKeys$E(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), !0).forEach(function (r) { _defineProperty$F(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty$F(e, r, t) { return (r = _toPropertyKey$J(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey$J(t) { var i = _toPrimitive$J(t, "string"); return "symbol" == _typeof$K(i) ? i : i + ""; }
 function _toPrimitive$J(t, r) { if ("object" != _typeof$K(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$K(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray$e(r, e) { return _arrayWithHoles$e(r) || _iterableToArrayLimit$e(r, e) || _unsupportedIterableToArray$i(r, e) || _nonIterableRest$e(); }
-function _nonIterableRest$e() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray$i(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$i(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$i(r, a) : void 0; } }
-function _arrayLikeToArray$i(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 _iterableToArrayLimit$e(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles$e(r) { if (Array.isArray(r)) return r; }
+function _slicedToArray$f(r, e) { return _arrayWithHoles$f(r) || _iterableToArrayLimit$f(r, e) || _unsupportedIterableToArray$j(r, e) || _nonIterableRest$f(); }
+function _nonIterableRest$f() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray$j(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$j(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$j(r, a) : void 0; } }
+function _arrayLikeToArray$j(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 _iterableToArrayLimit$f(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles$f(r) { if (Array.isArray(r)) return r; }
 var ThemePreviewProvider = function ThemePreviewProvider(_ref) {
   var children = _ref.children;
   var parentCtx = useContext(ThemeContext);
   var _useState = useState(null),
-    _useState2 = _slicedToArray$e(_useState, 2),
+    _useState2 = _slicedToArray$f(_useState, 2),
     previewTheme = _useState2[0],
     setPreviewThemeState = _useState2[1];
   var _useState3 = useState(true),
-    _useState4 = _slicedToArray$e(_useState3, 2),
+    _useState4 = _slicedToArray$f(_useState3, 2),
     showPreview = _useState4[0],
     setShowPreview = _useState4[1];
   var isPreview = previewTheme !== null && showPreview;
@@ -76,6 +77,70 @@ var ThemePreviewProvider = function ThemePreviewProvider(_ref) {
     });
   }, [parentCtx, isPreview, previewTheme]);
 
+  // Inject CSS custom properties when the active theme has a
+  // `cssVars` map. ThemeModel emits this for themes with
+  // arbitrary-color (hex) channels — see PRD
+  // `arbitrary-color-themes.md`, FR-003. Tracks which variables we
+  // wrote so a transition theme-with-cssVars → theme-without
+  // cleanly removes them (no flash: we set the new set before
+  // removing the stale ones).
+  var writtenVarsRef = useRef(new Set());
+  useEffect(function () {
+    var _ctxValue$currentThem;
+    var cssVars = ctxValue === null || ctxValue === void 0 || (_ctxValue$currentThem = ctxValue.currentTheme) === null || _ctxValue$currentThem === void 0 ? void 0 : _ctxValue$currentThem.cssVars;
+    var root = typeof document !== "undefined" ? document.documentElement : null;
+    if (!root) return undefined;
+    var newSet = new Set();
+    if (cssVars && _typeof$K(cssVars) === "object") {
+      for (var _i = 0, _Object$entries = Object.entries(cssVars); _i < _Object$entries.length; _i++) {
+        var _Object$entries$_i = _slicedToArray$f(_Object$entries[_i], 2),
+          varName = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+        root.style.setProperty(varName, value);
+        newSet.add(varName);
+      }
+    }
+    // Remove any vars from a prior theme that aren't in the new set.
+    var _iterator = _createForOfIteratorHelper$2(writtenVarsRef.current),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _varName = _step.value;
+        if (!newSet.has(_varName)) {
+          root.style.removeProperty(_varName);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    writtenVarsRef.current = newSet;
+    return undefined;
+  }, [ctxValue]);
+
+  // Final cleanup on unmount — remove any vars still attached to
+  // :root so the theme system leaves no stylesheet residue.
+  useEffect(function () {
+    return function () {
+      var root = typeof document !== "undefined" ? document.documentElement : null;
+      if (!root) return;
+      var _iterator2 = _createForOfIteratorHelper$2(writtenVarsRef.current),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var varName = _step2.value;
+          root.style.removeProperty(varName);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      writtenVarsRef.current = new Set();
+    };
+  }, []);
+
   // Preview control bag — passed to render-prop children and available via useThemePreview
   var previewControls = useMemo(function () {
     return {
@@ -508,12 +573,12 @@ var styleClassNames = {
 
 var _themeObjects$BUTTON, _themeObjects$BUTTON_, _themeObjects$BUTTON_2, _themeObjects$BUTTON_3, _themeObjects$BUTTON_4, _themeObjects$BUTTON_5, _themeObjects$MENU_IT, _themeObjects$TABS_TR, _colorMap;
 function _typeof$J(o) { "@babel/helpers - typeof"; return _typeof$J = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$J(o); }
-function _toConsumableArray$5(r) { return _arrayWithoutHoles$5(r) || _iterableToArray$5(r) || _unsupportedIterableToArray$h(r) || _nonIterableSpread$5(); }
+function _toConsumableArray$5(r) { return _arrayWithoutHoles$5(r) || _iterableToArray$5(r) || _unsupportedIterableToArray$i(r) || _nonIterableSpread$5(); }
 function _nonIterableSpread$5() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray$h(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$h(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$h(r, a) : void 0; } }
+function _unsupportedIterableToArray$i(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$i(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$i(r, a) : void 0; } }
 function _iterableToArray$5(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles$5(r) { if (Array.isArray(r)) return _arrayLikeToArray$h(r); }
-function _arrayLikeToArray$h(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 _arrayWithoutHoles$5(r) { if (Array.isArray(r)) return _arrayLikeToArray$i(r); }
+function _arrayLikeToArray$i(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 ownKeys$D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), !0).forEach(function (r) { _defineProperty$E(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty$E(e, r, t) { return (r = _toPropertyKey$I(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -919,6 +984,252 @@ var getDefaultStylesForItem = function getDefaultStylesForItem(itemName) {
   return itemName in colorMap ? _objectSpread$D({}, colorMap[itemName]) : {};
 };
 
+function _slicedToArray$e(r, e) { return _arrayWithHoles$e(r) || _iterableToArrayLimit$e(r, e) || _unsupportedIterableToArray$h(r, e) || _nonIterableRest$e(); }
+function _nonIterableRest$e() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray$h(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$h(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$h(r, a) : void 0; } }
+function _arrayLikeToArray$h(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 _iterableToArrayLimit$e(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles$e(r) { if (Array.isArray(r)) return r; }
+/**
+ * colorMath — pure-function helpers for working with hex colors.
+ *
+ * Used by the theme system to support arbitrary-color themes (PRD:
+ * `dash-electron/docs/requirements/prd/arbitrary-color-themes.md`).
+ * Standalone — no React, no dependencies beyond JavaScript primitives.
+ *
+ * Exports:
+ *   - isHexColor(value)         → boolean
+ *   - normalizeHex(input)       → "#rrggbb" or null
+ *   - hexToRgb(hex)             → { r, g, b } or null
+ *   - rgbToHex({r,g,b})         → "#rrggbb"
+ *   - rgbToHsl({r,g,b})         → { h, s, l }  (h 0..360, s/l 0..1)
+ *   - hslToRgb({h,s,l})         → { r, g, b }  (0..255)
+ *   - deriveShades(hex)         → { 50, 100, 200, ..., 950 } hex map
+ *   - contrastRatio(hexA, hexB) → 1..21
+ */
+
+var HEX_REGEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+function isHexColor(value) {
+  return typeof value === "string" && HEX_REGEX.test(value.trim());
+}
+
+/**
+ * Normalize a user-supplied hex string. Accepts `4A154B`, `#4A154B`,
+ * `#abc`, `#abcd`, `#aabbccdd`. Returns lowercase `#rrggbb` (alpha
+ * dropped) or null if invalid.
+ */
+function normalizeHex(input) {
+  if (typeof input !== "string") return null;
+  var s = input.trim().toLowerCase();
+  if (!s.startsWith("#")) s = "#".concat(s);
+  if (!HEX_REGEX.test(s)) return null;
+  if (s.length === 4) {
+    // #rgb → #rrggbb
+    s = "#".concat(s[1]).concat(s[1]).concat(s[2]).concat(s[2]).concat(s[3]).concat(s[3]);
+  } else if (s.length === 5) {
+    // #rgba → #rrggbb (drop alpha)
+    s = "#".concat(s[1]).concat(s[1]).concat(s[2]).concat(s[2]).concat(s[3]).concat(s[3]);
+  } else if (s.length === 9) {
+    // #rrggbbaa → #rrggbb
+    s = s.slice(0, 7);
+  }
+  return s;
+}
+function hexToRgb(hex) {
+  var normalized = normalizeHex(hex);
+  if (!normalized) return null;
+  var n = parseInt(normalized.slice(1), 16);
+  return {
+    r: n >> 16 & 0xff,
+    g: n >> 8 & 0xff,
+    b: n & 0xff
+  };
+}
+function rgbToHex(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  var clamp = function clamp(v) {
+    return Math.max(0, Math.min(255, Math.round(v)));
+  };
+  var toHex = function toHex(v) {
+    return clamp(v).toString(16).padStart(2, "0");
+  };
+  return "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b));
+}
+function rgbToHsl(_ref2) {
+  var r = _ref2.r,
+    g = _ref2.g,
+    b = _ref2.b;
+  var R = r / 255;
+  var G = g / 255;
+  var B = b / 255;
+  var max = Math.max(R, G, B);
+  var min = Math.min(R, G, B);
+  var l = (max + min) / 2;
+  var h = 0;
+  var s = 0;
+  if (max !== min) {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case R:
+        h = (G - B) / d + (G < B ? 6 : 0);
+        break;
+      case G:
+        h = (B - R) / d + 2;
+        break;
+      default:
+        h = (R - G) / d + 4;
+        break;
+    }
+    h *= 60;
+  }
+  return {
+    h: h,
+    s: s,
+    l: l
+  };
+}
+function hslToRgb(_ref3) {
+  var h = _ref3.h,
+    s = _ref3.s,
+    l = _ref3.l;
+  if (s === 0) {
+    var v = l * 255;
+    return {
+      r: v,
+      g: v,
+      b: v
+    };
+  }
+  var c = (1 - Math.abs(2 * l - 1)) * s;
+  var x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  var m = l - c / 2;
+  var rp;
+  var gp;
+  var bp;
+  if (h < 60) {
+    rp = c;
+    gp = x;
+    bp = 0;
+  } else if (h < 120) {
+    rp = x;
+    gp = c;
+    bp = 0;
+  } else if (h < 180) {
+    rp = 0;
+    gp = c;
+    bp = x;
+  } else if (h < 240) {
+    rp = 0;
+    gp = x;
+    bp = c;
+  } else if (h < 300) {
+    rp = x;
+    gp = 0;
+    bp = c;
+  } else {
+    rp = c;
+    gp = 0;
+    bp = x;
+  }
+  return {
+    r: (rp + m) * 255,
+    g: (gp + m) * 255,
+    b: (bp + m) * 255
+  };
+}
+
+/**
+ * Derive an 11-shade Tailwind-like palette from a base hex.
+ *
+ * Returns `{ "50": "#…", "100": "#…", …, "900": "#…", "950": "#…" }`.
+ *
+ * Strategy: keep the input's hue + saturation; vary lightness across
+ * fixed targets that approximate Tailwind's stock palette structure.
+ * Shade `500` preserves the user's lightness (so picking a known
+ * Tailwind hex like `#3b82f6` produces a `500` close to Tailwind
+ * `blue-500`). Lighter shades approach white; darker approach black.
+ *
+ * For very dark (`l < 0.20`) or very light (`l > 0.80`) inputs we
+ * snap shade `500` to `0.50` so the ramp stays balanced — otherwise
+ * the input might land at e.g. shade `900` and produce no visible
+ * darker steps.
+ */
+function deriveShades(hex) {
+  var rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  var _rgbToHsl = rgbToHsl(rgb),
+    h = _rgbToHsl.h,
+    s = _rgbToHsl.s,
+    l = _rgbToHsl.l;
+  var baseL = l < 0.2 || l > 0.8 ? 0.5 : l;
+  var targets = {
+    50: 0.96,
+    100: 0.9,
+    200: 0.8,
+    300: 0.68,
+    400: 0.55,
+    500: baseL,
+    600: 0.42,
+    700: 0.32,
+    800: 0.22,
+    900: 0.13,
+    950: 0.08
+  };
+  // Slight saturation curve: lighter shades fade saturation toward
+  // white-ish; darker shades fade toward black-ish. Mirrors how
+  // Tailwind's stock palette feels.
+  var satFor = function satFor(targetL) {
+    if (targetL > 0.85) return s * 0.4;
+    if (targetL < 0.15) return s * 0.7;
+    return s;
+  };
+  var out = {};
+  for (var _i = 0, _Object$entries = Object.entries(targets); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray$e(_Object$entries[_i], 2),
+      shade = _Object$entries$_i[0],
+      targetL = _Object$entries$_i[1];
+    var rgbOut = hslToRgb({
+      h: h,
+      s: satFor(targetL),
+      l: targetL
+    });
+    out[shade] = rgbToHex(rgbOut);
+  }
+  return out;
+}
+
+/**
+ * WCAG-relative luminance (0..1). Used by `contrastRatio`.
+ */
+function relativeLuminance(_ref4) {
+  var r = _ref4.r,
+    g = _ref4.g,
+    b = _ref4.b;
+  var channel = function channel(v) {
+    var sRGB = v / 255;
+    return sRGB <= 0.03928 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+
+/**
+ * WCAG contrast ratio between two hex colors. Returns a value in
+ * [1, 21]. WCAG AA target is 4.5 for normal text; AAA is 7.
+ */
+function contrastRatio(hexA, hexB) {
+  var rgbA = hexToRgb(hexA);
+  var rgbB = hexToRgb(hexB);
+  if (!rgbA || !rgbB) return null;
+  var lA = relativeLuminance(rgbA);
+  var lB = relativeLuminance(rgbB);
+  var lighter = Math.max(lA, lB);
+  var darker = Math.min(lA, lB);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
 function _typeof$I(o) { "@babel/helpers - typeof"; return _typeof$I = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$I(o); }
 /**
  * deepCopy
@@ -1062,18 +1373,18 @@ var LayoutContainer = function LayoutContainer(_ref) {
 };
 
 function _typeof$H(o) { "@babel/helpers - typeof"; return _typeof$H = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$H(o); }
-var _excluded$C = ["children", "border", "className", "padding", "defaultPadding", "direction"],
+var _excluded$C = ["children", "border", "className", "padding", "defaultPadding", "rounded", "direction"],
   _excluded2$f = ["children", "scrollable", "className", "onClick", "defaultPadding", "padding"],
-  _excluded3$f = ["children", "className", "defaultPadding", "padding"],
-  _excluded4$3 = ["horizontal", "children", "onClick", "width", "height", "padding", "scrollable", "grow", "className", "direction", "defaultPadding", "border"],
-  _excluded5$3 = ["children", "border", "className", "padding", "defaultPadding", "direction"],
+  _excluded3$f = ["children", "className", "defaultPadding", "padding", "rounded"],
+  _excluded4$3 = ["horizontal", "children", "onClick", "width", "height", "padding", "scrollable", "grow", "className", "direction", "defaultPadding", "border", "rounded"],
+  _excluded5$3 = ["children", "border", "className", "padding", "defaultPadding", "rounded", "direction"],
   _excluded6$3 = ["children", "scrollable", "className", "onClick", "defaultPadding", "padding", "height", "width"],
-  _excluded7$3 = ["children", "className", "defaultPadding", "padding"],
-  _excluded8$3 = ["horizontal", "children", "onClick", "width", "height", "padding", "scrollable", "className", "direction", "grow", "defaultPadding", "border"],
-  _excluded9$3 = ["children", "border", "className", "padding", "defaultPadding", "direction"],
+  _excluded7$3 = ["children", "className", "defaultPadding", "padding", "rounded"],
+  _excluded8$3 = ["horizontal", "children", "onClick", "width", "height", "padding", "scrollable", "className", "direction", "grow", "defaultPadding", "border", "rounded"],
+  _excluded9$3 = ["children", "border", "className", "padding", "defaultPadding", "rounded", "direction"],
   _excluded0$2 = ["children", "scrollable", "className", "space", "onClick", "defaultPadding", "padding", "height", "width"],
-  _excluded1$2 = ["children", "className", "padding", "defaultPadding"],
-  _excluded10$2 = ["horizontal", "children", "onClick", "width", "height", "padding", "scrollable", "className", "grow", "defaultPadding", "border"];
+  _excluded1$2 = ["children", "className", "padding", "defaultPadding", "rounded"],
+  _excluded10$2 = ["horizontal", "children", "onClick", "width", "height", "padding", "scrollable", "className", "grow", "defaultPadding", "border", "rounded"];
 function ownKeys$C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), !0).forEach(function (r) { _defineProperty$D(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty$D(e, r, t) { return (r = _toPropertyKey$H(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -1091,6 +1402,8 @@ var PanelHeader = function PanelHeader(_ref) {
     padding = _ref$padding === void 0 ? true : _ref$padding,
     _ref$defaultPadding = _ref.defaultPadding,
     defaultPadding = _ref$defaultPadding === void 0 ? "p-6" : _ref$defaultPadding,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? "rounded-t" : _ref$rounded,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? "horizontal" : _ref$direction,
     props = _objectWithoutProperties$C(_ref, _excluded$C);
@@ -1105,7 +1418,7 @@ var PanelHeader = function PanelHeader(_ref) {
   var id = getUUID$1("", "panel-header");
   return /*#__PURE__*/jsx("div", {
     id: id,
-    className: "flex ".concat(direction === "horizontal" ? "flex-row" : "flex-col", " rounded-t ").concat(border === true ? "border-b" : "", " justify-between items-center ").concat(padding === true ? defaultPadding : "p-0", " ").concat(className, " ").concat(styles.string),
+    className: "flex ".concat(direction === "horizontal" ? "flex-row" : "flex-col", " ").concat(rounded, " ").concat(border === true ? "border-b" : "", " justify-between items-center ").concat(padding === true ? defaultPadding : "p-0", " ").concat(className, " ").concat(styles.string),
     children: children
   });
 };
@@ -1150,6 +1463,8 @@ var PanelFooter = function PanelFooter(_ref3) {
     defaultPadding = _ref3$defaultPadding === void 0 ? "p-6" : _ref3$defaultPadding,
     _ref3$padding = _ref3.padding,
     padding = _ref3$padding === void 0 ? true : _ref3$padding,
+    _ref3$rounded = _ref3.rounded,
+    rounded = _ref3$rounded === void 0 ? "rounded-b" : _ref3$rounded,
     props = _objectWithoutProperties$C(_ref3, _excluded3$f);
   var _useContext4 = useContext(ThemeContext),
     currentTheme = _useContext4.currentTheme;
@@ -1158,7 +1473,7 @@ var PanelFooter = function PanelFooter(_ref3) {
     grow: false
   }));
   return /*#__PURE__*/jsx("div", {
-    className: "flex flex-row rounded-b justify-between items-center ".concat(className, " ").concat(styles.string, " ").concat(padding === true ? defaultPadding : "p-0"),
+    className: "flex flex-row ".concat(rounded, " justify-between items-center ").concat(className, " ").concat(styles.string, " ").concat(padding === true ? defaultPadding : "p-0"),
     children: children
   });
 };
@@ -1185,6 +1500,8 @@ var Panel = function Panel(_ref4) {
     defaultPadding = _ref4$defaultPadding === void 0 ? "p-6" : _ref4$defaultPadding,
     _ref4$border = _ref4.border,
     border = _ref4$border === void 0 ? true : _ref4$border,
+    _ref4$rounded = _ref4.rounded,
+    rounded = _ref4$rounded === void 0 ? "rounded-lg" : _ref4$rounded,
     props = _objectWithoutProperties$C(_ref4, _excluded4$3);
   // Fetch the Styles from the utility
   var _useContext5 = useContext(ThemeContext),
@@ -1199,7 +1516,7 @@ var Panel = function Panel(_ref4) {
   return /*#__PURE__*/jsx(LayoutContainer, {
     prefix: "panel",
     direction: horizontal === true ? "row" : "col",
-    className: "".concat(className, " ").concat(styles.string, " ").concat(height, " ").concat(width, " rounded-lg ").concat(border === true ? "border" : "", " ").concat(padding === true ? defaultPadding : "p-0"),
+    className: "".concat(className, " ").concat(styles.string, " ").concat(height, " ").concat(width, " ").concat(rounded, " ").concat(border === true ? "border" : "", " ").concat(padding === true ? defaultPadding : "p-0"),
     onClick: onClick,
     scrollable: scrollable // must include this here as we separated props
     ,
@@ -1228,6 +1545,8 @@ var PanelHeader2 = function PanelHeader2(_ref5) {
     padding = _ref5$padding === void 0 ? true : _ref5$padding,
     _ref5$defaultPadding = _ref5.defaultPadding,
     defaultPadding = _ref5$defaultPadding === void 0 ? "p-4" : _ref5$defaultPadding,
+    _ref5$rounded = _ref5.rounded,
+    rounded = _ref5$rounded === void 0 ? "rounded-t" : _ref5$rounded,
     _ref5$direction = _ref5.direction,
     direction = _ref5$direction === void 0 ? "horizontal" : _ref5$direction,
     props = _objectWithoutProperties$C(_ref5, _excluded5$3);
@@ -1238,7 +1557,7 @@ var PanelHeader2 = function PanelHeader2(_ref5) {
     grow: false
   }));
   return /*#__PURE__*/jsx("div", {
-    className: "flex ".concat(direction === "horizontal" ? "flex-row" : "flex-col", " rounded-t ").concat(border === true ? "border-b" : "", " justify-between items-center ").concat(padding === true ? defaultPadding : "p-0", " ").concat(className, " ").concat(styles.string),
+    className: "flex ".concat(direction === "horizontal" ? "flex-row" : "flex-col", " ").concat(rounded, " ").concat(border === true ? "border-b" : "", " justify-between items-center ").concat(padding === true ? defaultPadding : "p-0", " ").concat(className, " ").concat(styles.string),
     children: children
   });
 };
@@ -1282,6 +1601,8 @@ var PanelFooter2 = function PanelFooter2(_ref7) {
     defaultPadding = _ref7$defaultPadding === void 0 ? "p-4" : _ref7$defaultPadding,
     _ref7$padding = _ref7.padding,
     padding = _ref7$padding === void 0 ? true : _ref7$padding,
+    _ref7$rounded = _ref7.rounded,
+    rounded = _ref7$rounded === void 0 ? "rounded-b" : _ref7$rounded,
     props = _objectWithoutProperties$C(_ref7, _excluded7$3);
   var _useContext8 = useContext(ThemeContext),
     currentTheme = _useContext8.currentTheme;
@@ -1290,7 +1611,7 @@ var PanelFooter2 = function PanelFooter2(_ref7) {
     grow: false
   }));
   return /*#__PURE__*/jsx("div", {
-    className: "flex flex-row rounded-b justify-between items-center ".concat(className, " ").concat(styles.string, " ").concat(padding === true ? defaultPadding : "p-0"),
+    className: "flex flex-row ".concat(rounded, " justify-between items-center ").concat(className, " ").concat(styles.string, " ").concat(padding === true ? defaultPadding : "p-0"),
     children: children
   });
 };
@@ -1316,6 +1637,8 @@ var Panel2 = function Panel2(_ref8) {
     defaultPadding = _ref8$defaultPadding === void 0 ? "p-4" : _ref8$defaultPadding,
     _ref8$border = _ref8.border,
     border = _ref8$border === void 0 ? true : _ref8$border,
+    _ref8$rounded = _ref8.rounded,
+    rounded = _ref8$rounded === void 0 ? "rounded-md" : _ref8$rounded,
     props = _objectWithoutProperties$C(_ref8, _excluded8$3);
   var _useContext9 = useContext(ThemeContext),
     currentTheme = _useContext9.currentTheme;
@@ -1328,7 +1651,7 @@ var Panel2 = function Panel2(_ref8) {
   }));
   return /*#__PURE__*/jsx(LayoutContainer, _objectSpread$C(_objectSpread$C({
     direction: horizontal === true ? "row" : "col",
-    className: "".concat(className, " ").concat(styles.string, " ").concat(height, " ").concat(width, " rounded-md ").concat(border === true ? "border" : "", " ").concat(padding === true ? defaultPadding : "p-0"),
+    className: "".concat(className, " ").concat(styles.string, " ").concat(height, " ").concat(width, " ").concat(rounded, " ").concat(border === true ? "border" : "", " ").concat(padding === true ? defaultPadding : "p-0"),
     onClick: onClick,
     scrollable: scrollable,
     space: false
@@ -1356,6 +1679,8 @@ var PanelHeader3 = function PanelHeader3(_ref9) {
     padding = _ref9$padding === void 0 ? true : _ref9$padding,
     _ref9$defaultPadding = _ref9.defaultPadding,
     defaultPadding = _ref9$defaultPadding === void 0 ? "p-2" : _ref9$defaultPadding,
+    _ref9$rounded = _ref9.rounded,
+    rounded = _ref9$rounded === void 0 ? "rounded-t" : _ref9$rounded,
     _ref9$direction = _ref9.direction,
     direction = _ref9$direction === void 0 ? "horizontal" : _ref9$direction,
     props = _objectWithoutProperties$C(_ref9, _excluded9$3);
@@ -1366,7 +1691,7 @@ var PanelHeader3 = function PanelHeader3(_ref9) {
     grow: false
   }));
   return /*#__PURE__*/jsx("div", {
-    className: "flex ".concat(direction === "horizontal" ? "flex-row" : "flex-col", " rounded-t ").concat(border === true ? "border-b" : "", " justify-between items-center ").concat(padding === true ? defaultPadding : "p-0", " ").concat(className, " ").concat(styles.string),
+    className: "flex ".concat(direction === "horizontal" ? "flex-row" : "flex-col", " ").concat(rounded, " ").concat(border === true ? "border-b" : "", " justify-between items-center ").concat(padding === true ? defaultPadding : "p-0", " ").concat(className, " ").concat(styles.string),
     children: children
   });
 };
@@ -1419,6 +1744,8 @@ var PanelFooter3 = function PanelFooter3(_ref1) {
     padding = _ref1$padding === void 0 ? true : _ref1$padding,
     _ref1$defaultPadding = _ref1.defaultPadding,
     defaultPadding = _ref1$defaultPadding === void 0 ? "p-2" : _ref1$defaultPadding,
+    _ref1$rounded = _ref1.rounded,
+    rounded = _ref1$rounded === void 0 ? "rounded-b" : _ref1$rounded,
     props = _objectWithoutProperties$C(_ref1, _excluded1$2);
   var _useContext10 = useContext(ThemeContext),
     currentTheme = _useContext10.currentTheme;
@@ -1427,7 +1754,7 @@ var PanelFooter3 = function PanelFooter3(_ref1) {
     grow: false
   }));
   return /*#__PURE__*/jsx("div", {
-    className: "flex flex-row rounded-b justify-between items-center ".concat(padding === true ? defaultPadding : "p-0", " ").concat(className, " ").concat(styles.string),
+    className: "flex flex-row ".concat(rounded, " justify-between items-center ").concat(padding === true ? defaultPadding : "p-0", " ").concat(className, " ").concat(styles.string),
     children: children
   });
 };
@@ -1452,6 +1779,8 @@ var Panel3 = function Panel3(_ref10) {
     defaultPadding = _ref10$defaultPadding === void 0 ? "p-2" : _ref10$defaultPadding,
     _ref10$border = _ref10.border,
     border = _ref10$border === void 0 ? true : _ref10$border,
+    _ref10$rounded = _ref10.rounded,
+    rounded = _ref10$rounded === void 0 ? "rounded" : _ref10$rounded,
     props = _objectWithoutProperties$C(_ref10, _excluded10$2);
   var _useContext11 = useContext(ThemeContext),
     currentTheme = _useContext11.currentTheme;
@@ -1465,7 +1794,7 @@ var Panel3 = function Panel3(_ref10) {
   }));
   return /*#__PURE__*/jsx(LayoutContainer, _objectSpread$C(_objectSpread$C({
     direction: horizontal === true ? "row" : "col",
-    className: "".concat(className, " ").concat(styles.string, " ").concat(height, " ").concat(width, " rounded ").concat(border === true ? "border" : "", " ").concat(padding === true ? defaultPadding : "p-0"),
+    className: "".concat(className, " ").concat(styles.string, " ").concat(height, " ").concat(width, " ").concat(rounded, " ").concat(border === true ? "border" : "", " ").concat(padding === true ? defaultPadding : "p-0"),
     onClick: onClick,
     scrollable: scrollable,
     space: false
@@ -2192,6 +2521,10 @@ var MenuItem = function MenuItem(_ref) {
     grow = _ref$grow === void 0 ? false : _ref$grow,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "px-3 py-2" : _ref$padding,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? "rounded-md" : _ref$rounded,
     id = _ref.id;
   var _useContext = useContext(ThemeContext),
     currentTheme = _useContext.currentTheme;
@@ -2210,7 +2543,7 @@ var MenuItem = function MenuItem(_ref) {
   return /*#__PURE__*/jsx("div", {
     id: uuid,
     onClick: onClick,
-    className: "flex flex-row ".concat(styles.string, " ").concat(border === true && "border-4", " px-3 py-2 rounded-md items-center space-x-2 text-sm transition-colors duration-150 focus-visible:outline-none ").concat(className),
+    className: "flex flex-row ".concat(styles.string, " ").concat(border === true && "border-4", " ").concat(padding, " ").concat(rounded, " items-center space-x-2 text-sm transition-colors duration-150 focus-visible:outline-none ").concat(className),
     children: children
   });
 };
@@ -2240,6 +2573,10 @@ var MenuItem2 = function MenuItem2(_ref2) {
     className = _ref2$className === void 0 ? "" : _ref2$className,
     _ref2$grow = _ref2.grow,
     grow = _ref2$grow === void 0 ? false : _ref2$grow,
+    _ref2$padding = _ref2.padding,
+    padding = _ref2$padding === void 0 ? "px-3 py-1.5" : _ref2$padding,
+    _ref2$rounded = _ref2.rounded,
+    rounded = _ref2$rounded === void 0 ? "rounded-md" : _ref2$rounded,
     id = _ref2.id;
   var _useContext2 = useContext(ThemeContext),
     currentTheme = _useContext2.currentTheme;
@@ -2254,7 +2591,7 @@ var MenuItem2 = function MenuItem2(_ref2) {
     selected: selected,
     grow: grow
   });
-  var baseStyles = "".concat(onClick && "cursor-pointer", " px-3 py-1.5 rounded-md items-center space-x-2 ").concat(border === true && "border-2");
+  var baseStyles = "".concat(onClick && "cursor-pointer", " ").concat(padding, " ").concat(rounded, " items-center space-x-2 ").concat(border === true && "border-2");
   var baseTextStyles = "text-sm font-medium";
   var uuid = getUUID$1(id, "menu-item");
   return /*#__PURE__*/jsx("div", {
@@ -2292,6 +2629,10 @@ var MenuItem3 = function MenuItem3(_ref3) {
     className = _ref3$className === void 0 ? "" : _ref3$className,
     _ref3$grow = _ref3.grow,
     grow = _ref3$grow === void 0 ? false : _ref3$grow,
+    _ref3$padding = _ref3.padding,
+    padding = _ref3$padding === void 0 ? "px-3 py-1.5" : _ref3$padding,
+    _ref3$rounded = _ref3.rounded,
+    rounded = _ref3$rounded === void 0 ? "rounded-md" : _ref3$rounded,
     id = _ref3.id;
     _ref3.type;
   var _useContext3 = useContext(ThemeContext),
@@ -2307,7 +2648,7 @@ var MenuItem3 = function MenuItem3(_ref3) {
     selected: selected,
     grow: grow
   });
-  var baseStyles = "".concat(onClick && "cursor-pointer", " px-3 py-1.5 rounded-md items-center space-x-2 ").concat(border === true && "border-2");
+  var baseStyles = "".concat(onClick && "cursor-pointer", " ").concat(padding, " ").concat(rounded, " items-center space-x-2 ").concat(border === true && "border-2");
   var baseTextStyles = "text-sm font-normal";
   var uuid = getUUID$1(id, "menu-item");
   return /*#__PURE__*/jsx("div", {
@@ -3087,7 +3428,7 @@ var Breadcrumbs3 = function Breadcrumbs3(props) {
 };
 
 function _typeof$A(o) { "@babel/helpers - typeof"; return _typeof$A = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$A(o); }
-var _excluded$t = ["title", "message", "children", "onClose", "className"];
+var _excluded$t = ["title", "message", "children", "onClose", "className", "padding", "rounded", "divider"];
 function ownKeys$v(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$v(Object(t), !0).forEach(function (r) { _defineProperty$w(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty$w(e, r, t) { return (r = _toPropertyKey$A(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -3106,6 +3447,12 @@ var Alert = function Alert(_ref) {
     onClose = _ref$onClose === void 0 ? null : _ref$onClose,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "p-4" : _ref$padding,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? "rounded-md" : _ref$rounded,
+    _ref$divider = _ref.divider,
+    divider = _ref$divider === void 0 ? true : _ref$divider,
     props = _objectWithoutProperties$t(_ref, _excluded$t);
   var _useContext = useContext(ThemeContext),
     currentTheme = _useContext.currentTheme;
@@ -3116,7 +3463,7 @@ var Alert = function Alert(_ref) {
   var uuid = getUUID$1("", "alert");
   return /*#__PURE__*/jsx("div", {
     id: uuid,
-    className: "border border-l-4 ".concat(styles.backgroundColor, " ").concat(styles.borderColor, " ").concat(styles.textColor, " rounded-md p-4 text-base ").concat(className),
+    className: "border ".concat(divider ? "border-l-4" : "", " ").concat(styles.backgroundColor, " ").concat(styles.borderColor, " ").concat(styles.textColor, " ").concat(rounded, " ").concat(padding, " text-base ").concat(className),
     role: "alert",
     children: /*#__PURE__*/jsxs("div", {
       className: "flex items-start justify-between",
@@ -3140,16 +3487,20 @@ var Alert = function Alert(_ref) {
   });
 };
 var Alert2 = function Alert2(props) {
+  var _props$padding, _props$rounded;
   var _useContext2 = useContext(ThemeContext),
     currentTheme = _useContext2.currentTheme;
   var styles = getStylesForItem(themeObjects.ALERT_2, currentTheme, _objectSpread$v(_objectSpread$v({}, props), {}, {
     scrollable: false,
     grow: false
   }));
+  var padding = (_props$padding = props.padding) !== null && _props$padding !== void 0 ? _props$padding : "p-3";
+  var rounded = (_props$rounded = props.rounded) !== null && _props$rounded !== void 0 ? _props$rounded : "rounded-md";
+  var divider = props.divider !== false;
   var uuid = getUUID$1("", "alert-2");
   return /*#__PURE__*/jsx("div", {
     id: uuid,
-    className: "border border-l-4 ".concat(styles.backgroundColor, " ").concat(styles.borderColor, " ").concat(styles.textColor, " rounded-md p-3 text-sm ").concat(props.className || ""),
+    className: "border ".concat(divider ? "border-l-4" : "", " ").concat(styles.backgroundColor, " ").concat(styles.borderColor, " ").concat(styles.textColor, " ").concat(rounded, " ").concat(padding, " text-sm ").concat(props.className || ""),
     role: "alert",
     children: /*#__PURE__*/jsxs("div", {
       className: "flex items-start justify-between",
@@ -3173,16 +3524,20 @@ var Alert2 = function Alert2(props) {
   });
 };
 var Alert3 = function Alert3(props) {
+  var _props$padding2, _props$rounded2;
   var _useContext3 = useContext(ThemeContext),
     currentTheme = _useContext3.currentTheme;
   var styles = getStylesForItem(themeObjects.ALERT_3, currentTheme, _objectSpread$v(_objectSpread$v({}, props), {}, {
     scrollable: false,
     grow: false
   }));
+  var padding = (_props$padding2 = props.padding) !== null && _props$padding2 !== void 0 ? _props$padding2 : "p-2";
+  var rounded = (_props$rounded2 = props.rounded) !== null && _props$rounded2 !== void 0 ? _props$rounded2 : "rounded-md";
+  var divider = props.divider !== false;
   var uuid = getUUID$1("", "alert-3");
   return /*#__PURE__*/jsx("div", {
     id: uuid,
-    className: "border border-l-4 ".concat(styles.backgroundColor, " ").concat(styles.borderColor, " ").concat(styles.textColor, " rounded-md p-2 text-sm ").concat(props.className || ""),
+    className: "border ".concat(divider ? "border-l-4" : "", " ").concat(styles.backgroundColor, " ").concat(styles.borderColor, " ").concat(styles.textColor, " ").concat(rounded, " ").concat(padding, " text-sm ").concat(props.className || ""),
     role: "alert",
     children: /*#__PURE__*/jsxs("div", {
       className: "flex items-start justify-between",
@@ -3760,7 +4115,7 @@ function dispatchInputChange(handler, event) {
 }
 
 function _typeof$v(o) { "@babel/helpers - typeof"; return _typeof$v = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$v(o); }
-var _excluded$o = ["label", "value", "onChange", "placeholder", "type", "id", "className", "inputClassName", "autoFocus", "disabled", "backgroundColor", "textColor", "borderColor", "placeholderTextColor", "focusRingColor", "focusBorderColor"];
+var _excluded$o = ["label", "value", "onChange", "placeholder", "type", "id", "className", "inputClassName", "autoFocus", "disabled", "backgroundColor", "textColor", "borderColor", "placeholderTextColor", "focusRingColor", "focusBorderColor", "height", "padding"];
 function ownKeys$q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty$r(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty$r(e, r, t) { return (r = _toPropertyKey$v(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -3801,6 +4156,10 @@ var InputText = function InputText(_ref) {
     focusRingColor = _ref$focusRingColor === void 0 ? null : _ref$focusRingColor,
     _ref$focusBorderColor = _ref.focusBorderColor,
     focusBorderColor = _ref$focusBorderColor === void 0 ? null : _ref$focusBorderColor,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "h-10" : _ref$height,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "px-3 py-2" : _ref$padding,
     htmlProps = _objectWithoutProperties$o(_ref, _excluded$o);
   var _useContext = useContext(ThemeContext),
     currentTheme = _useContext.currentTheme;
@@ -3836,13 +4195,13 @@ var InputText = function InputText(_ref) {
       placeholder: placeholder,
       disabled: disabled,
       autoFocus: autoFocus,
-      className: "w-full h-10 border shadow-sm px-3 py-2 ".concat(styles.string, " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 ").concat(styles.focusRingColor || "", " ").concat(inputClassName)
+      className: "w-full ".concat(height, " border shadow-sm ").concat(padding, " ").concat(styles.string, " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 ").concat(styles.focusRingColor || "", " ").concat(inputClassName)
     }))]
   });
 };
 
 function _typeof$u(o) { "@babel/helpers - typeof"; return _typeof$u = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$u(o); }
-var _excluded$n = ["label", "value", "onChange", "placeholder", "rows", "id", "className", "inputClassName", "disabled", "backgroundColor", "textColor", "borderColor", "placeholderTextColor", "focusRingColor", "focusBorderColor"];
+var _excluded$n = ["label", "value", "onChange", "placeholder", "rows", "id", "className", "inputClassName", "disabled", "backgroundColor", "textColor", "borderColor", "placeholderTextColor", "focusRingColor", "focusBorderColor", "padding"];
 function ownKeys$p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty$q(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty$q(e, r, t) { return (r = _toPropertyKey$u(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -3881,6 +4240,8 @@ var TextArea = function TextArea(_ref) {
     focusRingColor = _ref$focusRingColor === void 0 ? null : _ref$focusRingColor,
     _ref$focusBorderColor = _ref.focusBorderColor,
     focusBorderColor = _ref$focusBorderColor === void 0 ? null : _ref$focusBorderColor,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "px-3 py-2" : _ref$padding,
     htmlProps = _objectWithoutProperties$n(_ref, _excluded$n);
   var _useContext = useContext(ThemeContext),
     currentTheme = _useContext.currentTheme;
@@ -3915,7 +4276,7 @@ var TextArea = function TextArea(_ref) {
       },
       placeholder: placeholder,
       disabled: disabled,
-      className: "w-full border px-3 py-2 ".concat(styles.string, " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 ").concat(styles.focusRingColor || "", " ").concat(inputClassName)
+      className: "w-full border ".concat(padding, " ").concat(styles.string, " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 ").concat(styles.focusRingColor || "", " ").concat(inputClassName)
     }))]
   });
 };
@@ -5161,9 +5522,9 @@ var CodeRenderer = function CodeRenderer(_ref) {
 };
 
 function _typeof$i(o) { "@babel/helpers - typeof"; return _typeof$i = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$i(o); }
-var _excluded$c = ["text", "textSize", "onClick", "className", "children"],
-  _excluded2$5 = ["text", "textSize", "onClick", "className", "active", "children"],
-  _excluded3$5 = ["text", "textSize", "onClick", "className", "children"];
+var _excluded$c = ["text", "textSize", "onClick", "className", "children", "padding", "rounded", "border"],
+  _excluded2$5 = ["text", "textSize", "onClick", "className", "active", "children", "padding", "rounded", "border"],
+  _excluded3$5 = ["text", "textSize", "onClick", "className", "children", "padding", "rounded", "border"];
 function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty$f(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty$f(e, r, t) { return (r = _toPropertyKey$i(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -5180,18 +5541,24 @@ var Tag = function Tag(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     children = _ref.children,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? "px-3 py-1.5" : _ref$padding,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? "rounded" : _ref$rounded,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? true : _ref$border,
     props = _objectWithoutProperties$c(_ref, _excluded$c);
   var _useContext = useContext(ThemeContext),
     currentTheme = _useContext.currentTheme;
   var styles = getStylesForItem(themeObjects.TAG, currentTheme, _objectSpread$e(_objectSpread$e({}, props), {}, {
     grow: false
   }));
-  var stylesCalculated = "".concat(styles.string, " font-medium rounded border ").concat(onClick !== null ? "cursor-pointer" : "", " ").concat(textSize, " ").concat(className);
+  var stylesCalculated = "".concat(styles.string, " font-medium ").concat(rounded, " ").concat(border ? "border" : "", " ").concat(onClick !== null ? "cursor-pointer" : "", " ").concat(textSize, " ").concat(className);
   var uuid = getUUID$1("", "tag");
   return /*#__PURE__*/jsx("span", {
     id: uuid,
     onClick: onClick,
-    className: "flex flex-row w-fit ".concat(stylesCalculated, " px-3 py-1.5 whitespace-nowrap items-center justify-center transition-colors duration-150"),
+    className: "flex flex-row w-fit ".concat(stylesCalculated, " ").concat(padding, " whitespace-nowrap items-center justify-center transition-colors duration-150"),
     children: children !== undefined ? children : text
   });
 };
@@ -5206,6 +5573,12 @@ var Tag2 = function Tag2(_ref2) {
     _ref2$active = _ref2.active,
     active = _ref2$active === void 0 ? false : _ref2$active,
     children = _ref2.children,
+    _ref2$padding = _ref2.padding,
+    padding = _ref2$padding === void 0 ? "px-2 py-1" : _ref2$padding,
+    _ref2$rounded = _ref2.rounded,
+    rounded = _ref2$rounded === void 0 ? "rounded" : _ref2$rounded,
+    _ref2$border = _ref2.border,
+    border = _ref2$border === void 0 ? true : _ref2$border,
     props = _objectWithoutProperties$c(_ref2, _excluded2$5);
   var _useContext2 = useContext(ThemeContext),
     currentTheme = _useContext2.currentTheme;
@@ -5213,12 +5586,12 @@ var Tag2 = function Tag2(_ref2) {
     grow: false
   }));
   var colorClasses = active ? "".concat(styles.activeBackgroundColor || styles.backgroundColor || "", " ").concat(styles.activeTextColor || styles.textColor || "") : "".concat(styles.backgroundColor || "", " ").concat(styles.textColor || "", " ").concat(styles.hoverBackgroundColor || "", " ").concat(styles.hoverTextColor || "");
-  var stylesCalculated = "".concat(colorClasses, " ").concat(styles.borderColor || "", " font-medium rounded border ").concat(onClick !== null ? "cursor-pointer" : "", " ").concat(textSize, " ").concat(className);
+  var stylesCalculated = "".concat(colorClasses, " ").concat(styles.borderColor || "", " font-medium ").concat(rounded, " ").concat(border ? "border" : "", " ").concat(onClick !== null ? "cursor-pointer" : "", " ").concat(textSize, " ").concat(className);
   var uuid = getUUID$1("", "tag-2");
   return /*#__PURE__*/jsx("span", {
     id: uuid,
     onClick: onClick,
-    className: "flex flex-row w-fit ".concat(stylesCalculated, " px-2 py-1 whitespace-nowrap items-center justify-center transition-colors duration-150"),
+    className: "flex flex-row w-fit ".concat(stylesCalculated, " ").concat(padding, " whitespace-nowrap items-center justify-center transition-colors duration-150"),
     children: children !== undefined ? children : text
   });
 };
@@ -5231,18 +5604,24 @@ var Tag3 = function Tag3(_ref3) {
     _ref3$className = _ref3.className,
     className = _ref3$className === void 0 ? "" : _ref3$className,
     children = _ref3.children,
+    _ref3$padding = _ref3.padding,
+    padding = _ref3$padding === void 0 ? "px-1.5 py-0.5" : _ref3$padding,
+    _ref3$rounded = _ref3.rounded,
+    rounded = _ref3$rounded === void 0 ? "rounded" : _ref3$rounded,
+    _ref3$border = _ref3.border,
+    border = _ref3$border === void 0 ? true : _ref3$border,
     props = _objectWithoutProperties$c(_ref3, _excluded3$5);
   var _useContext3 = useContext(ThemeContext),
     currentTheme = _useContext3.currentTheme;
   var styles = getStylesForItem(themeObjects.TAG_3, currentTheme, _objectSpread$e(_objectSpread$e({}, props), {}, {
     grow: false
   }));
-  var stylesCalculated = "".concat(styles.string, " font-normal rounded border ").concat(onClick !== null ? "cursor-pointer" : "", " ").concat(textSize, " ").concat(className);
+  var stylesCalculated = "".concat(styles.string, " font-normal ").concat(rounded, " ").concat(border ? "border" : "", " ").concat(onClick !== null ? "cursor-pointer" : "", " ").concat(textSize, " ").concat(className);
   var uuid = getUUID$1("", "tag-3");
   return /*#__PURE__*/jsx("span", {
     id: uuid,
     onClick: onClick,
-    className: "flex flex-row w-fit ".concat(stylesCalculated, " px-1.5 py-0.5 whitespace-nowrap items-center justify-center transition-colors duration-150"),
+    className: "flex flex-row w-fit ".concat(stylesCalculated, " ").concat(padding, " whitespace-nowrap items-center justify-center transition-colors duration-150"),
     children: children !== undefined ? children : text
   });
 };
@@ -10312,5 +10691,5 @@ if (process.env.NODE_ENV !== "development") {
   console.log = function () {};
 }
 
-export { Accordion, Accordion2, Accordion3, Alert, Alert2, Alert3, AlertBanner, AlgoliaRefinementList, AlgoliaSearchBox, Breadcrumbs, Breadcrumbs2, Breadcrumbs3, Button, Button2, Button3, ButtonIcon, ButtonIcon2, ButtonIcon3, Caption, Caption2, Caption3, Card, Card2, Card3, Checkbox, Code, Code2, Code3, CodeEditorInline, CodeEditorVS, CodeRenderer, CommandPalette, ConfirmationModal, Container, DashPanel, DashPanel2, DashPanel3, DataList, Divider, Divider2, Divider3, DragComponent, Drawer, DropComponent, DropdownPanel, DropdownPanel2, DropdownPanel3, EmptyState, ErrorMessage, FormField, FormLabel, Heading, Heading2, Heading3, Icon, Icon2, Icon3, InputText, LayoutContainer, MainSection, Menu, Menu2, Menu3, MenuItem, MenuItem2, MenuItem3, MockAlgolia, MockLayout, MockWrapper, Modal, Navbar, PalettePreviewPane, Panel, Panel2, Panel3, Paragraph, Paragraph2, Paragraph3, ProgressBar, ProgressBar2, ProgressBar3, RadioGroup, RichText, SLACK_QUICK_REACTION_SHORTCODES, SearchInput, SelectInput, SelectMenu, SelectableCard, SettingsModal, Sidebar, Skeleton, Slider, StatCard, StatusBadge, Stepper, SubHeading, SubHeading2, SubHeading3, Switch, TabbedNavbar, Table, Table2, Table3, Tabs, Tabs2, Tabs3, Tag, Tag2, Tag3, TextArea, ThemeContext, ThemeFromUrlPane, ThemePreviewBanner, ThemePreviewContext, ThemePreviewProvider, Toast, Toast2, Toast3, Toggle, Toggle2, Toggle3, Tooltip, WS_STATES, WebSocketStatus, WidgetChrome, WidgetContext, capitalizeFirstLetter, colorNames, colorTypes, deepCopy, getCSSStyleForClassname, getClassForObjectType, getDefaultStylesForItem, getRandomInt, getStyleName, getStylesForItem, getUUID$1 as getUUID, isObject, mock, mockText, objectTypes, shades, slackEmojiForName, styleClassNames, tailwindHeightFractions, themeObjects, themeVariants, useLazyEnrichment, useSidebar, useThemePreview, withRouter };
+export { Accordion, Accordion2, Accordion3, Alert, Alert2, Alert3, AlertBanner, AlgoliaRefinementList, AlgoliaSearchBox, Breadcrumbs, Breadcrumbs2, Breadcrumbs3, Button, Button2, Button3, ButtonIcon, ButtonIcon2, ButtonIcon3, Caption, Caption2, Caption3, Card, Card2, Card3, Checkbox, Code, Code2, Code3, CodeEditorInline, CodeEditorVS, CodeRenderer, CommandPalette, ConfirmationModal, Container, DashPanel, DashPanel2, DashPanel3, DataList, Divider, Divider2, Divider3, DragComponent, Drawer, DropComponent, DropdownPanel, DropdownPanel2, DropdownPanel3, EmptyState, ErrorMessage, FormField, FormLabel, Heading, Heading2, Heading3, Icon, Icon2, Icon3, InputText, LayoutContainer, MainSection, Menu, Menu2, Menu3, MenuItem, MenuItem2, MenuItem3, MockAlgolia, MockLayout, MockWrapper, Modal, Navbar, PalettePreviewPane, Panel, Panel2, Panel3, Paragraph, Paragraph2, Paragraph3, ProgressBar, ProgressBar2, ProgressBar3, RadioGroup, RichText, SLACK_QUICK_REACTION_SHORTCODES, SearchInput, SelectInput, SelectMenu, SelectableCard, SettingsModal, Sidebar, Skeleton, Slider, StatCard, StatusBadge, Stepper, SubHeading, SubHeading2, SubHeading3, Switch, TabbedNavbar, Table, Table2, Table3, Tabs, Tabs2, Tabs3, Tag, Tag2, Tag3, TextArea, ThemeContext, ThemeFromUrlPane, ThemePreviewBanner, ThemePreviewContext, ThemePreviewProvider, Toast, Toast2, Toast3, Toggle, Toggle2, Toggle3, Tooltip, WS_STATES, WebSocketStatus, WidgetChrome, WidgetContext, capitalizeFirstLetter, colorNames, colorTypes, contrastRatio, deepCopy, deriveShades, getCSSStyleForClassname, getClassForObjectType, getDefaultStylesForItem, getRandomInt, getStyleName, getStylesForItem, getUUID$1 as getUUID, hexToRgb, hslToRgb, isHexColor, isObject, mock, mockText, normalizeHex, objectTypes, rgbToHex, rgbToHsl, shades, slackEmojiForName, styleClassNames, tailwindHeightFractions, themeObjects, themeVariants, useLazyEnrichment, useSidebar, useThemePreview, withRouter };
 //# sourceMappingURL=index.js.map