@sebgroup/green-react 1.0.0-beta.9 → 1.0.1

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useLayoutEffect, useEffect, useMemo, useRef } from 'react';
-import { randomId, validateClassName } from '@sebgroup/extract';
+import { randomId, validateClassName, createStepper, createDropdown, dropdownValues, createDatepicker, months, years } from '@sebgroup/extract';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -10,7 +10,7 @@ var check = function (it) {
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
 var global$r =
-  // eslint-disable-next-line es/no-global-this -- safe
+  // eslint-disable-next-line es-x/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
   // eslint-disable-next-line no-restricted-globals -- safe
@@ -33,13 +33,14 @@ var fails$9 = fails$a;
 
 // Detect IE8's incomplete defineProperty implementation
 var descriptors = !fails$9(function () {
-  // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
   return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
 });
 
 var fails$8 = fails$a;
 
 var functionBindNative = !fails$8(function () {
+  // eslint-disable-next-line es-x/no-function-prototype-bind -- safe
   var test = (function () { /* empty */ }).bind();
   // eslint-disable-next-line no-prototype-builtins -- safe
   return typeof test != 'function' || test.hasOwnProperty('prototype');
@@ -56,7 +57,7 @@ var functionCall = NATIVE_BIND$1 ? call$6.bind(call$6) : function () {
 var objectPropertyIsEnumerable = {};
 
 var $propertyIsEnumerable = {}.propertyIsEnumerable;
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 var getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
 
 // Nashorn ~ JDK8 bug
@@ -197,12 +198,12 @@ if (!version && userAgent) {
 
 var engineV8Version = version;
 
-/* eslint-disable es/no-symbol -- required for testing */
+/* eslint-disable es-x/no-symbol -- required for testing */
 
 var V8_VERSION = engineV8Version;
 var fails$6 = fails$a;
 
-// eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
+// eslint-disable-next-line es-x/no-object-getownpropertysymbols -- required for testing
 var nativeSymbol = !!Object.getOwnPropertySymbols && !fails$6(function () {
   var symbol = Symbol();
   // Chrome 38 Symbol has incorrect toString conversion
@@ -212,7 +213,7 @@ var nativeSymbol = !!Object.getOwnPropertySymbols && !fails$6(function () {
     !Symbol.sham && V8_VERSION && V8_VERSION < 41;
 });
 
-/* eslint-disable es/no-symbol -- required for testing */
+/* eslint-disable es-x/no-symbol -- required for testing */
 
 var NATIVE_SYMBOL$2 = nativeSymbol;
 
@@ -289,7 +290,7 @@ var shared$3 = {exports: {}};
 
 var global$i = global$r;
 
-// eslint-disable-next-line es/no-object-defineproperty -- safe
+// eslint-disable-next-line es-x/no-object-defineproperty -- safe
 var defineProperty$4 = Object.defineProperty;
 
 var setGlobal$3 = function (key, value) {
@@ -313,10 +314,10 @@ var store$2 = sharedStore;
 (shared$3.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.21.1',
+  version: '3.22.2',
   mode: 'global',
   copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.21.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.22.2/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -338,6 +339,7 @@ var hasOwnProperty = uncurryThis$8({}.hasOwnProperty);
 
 // `HasOwnProperty` abstract operation
 // https://tc39.es/ecma262/#sec-hasownproperty
+// eslint-disable-next-line es-x/no-object-hasown -- safe
 var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
   return hasOwnProperty(toObject$2(it), key);
 };
@@ -431,7 +433,7 @@ var createElement = documentCreateElement$2;
 
 // Thanks to IE8 for its funny defineProperty
 var ie8DomDefine = !DESCRIPTORS$9 && !fails$5(function () {
-  // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
   return Object.defineProperty(createElement('div'), 'a', {
     get: function () { return 7; }
   }).a != 7;
@@ -446,7 +448,7 @@ var toPropertyKey$1 = toPropertyKey$2;
 var hasOwn$8 = hasOwnProperty_1;
 var IE8_DOM_DEFINE$1 = ie8DomDefine;
 
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 var $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
 
 // `Object.getOwnPropertyDescriptor` method
@@ -468,7 +470,7 @@ var fails$4 = fails$a;
 // V8 ~ Chrome 36-
 // https://bugs.chromium.org/p/v8/issues/detail?id=3334
 var v8PrototypeDefineBug = DESCRIPTORS$7 && fails$4(function () {
-  // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+  // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
   return Object.defineProperty(function () { /* empty */ }, 'prototype', {
     value: 42,
     writable: false
@@ -495,9 +497,9 @@ var anObject$4 = anObject$5;
 var toPropertyKey = toPropertyKey$2;
 
 var TypeError$3 = global$b.TypeError;
-// eslint-disable-next-line es/no-object-defineproperty -- safe
+// eslint-disable-next-line es-x/no-object-defineproperty -- safe
 var $defineProperty = Object.defineProperty;
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 var $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
 var ENUMERABLE = 'enumerable';
 var CONFIGURABLE$1 = 'configurable';
@@ -653,7 +655,7 @@ var DESCRIPTORS$4 = descriptors;
 var hasOwn$6 = hasOwnProperty_1;
 
 var FunctionPrototype = Function.prototype;
-// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 var getDescriptor = DESCRIPTORS$4 && Object.getOwnPropertyDescriptor;
 
 var EXISTS = hasOwn$6(FunctionPrototype, 'name');
@@ -830,14 +832,14 @@ var hiddenKeys$1 = enumBugKeys$2.concat('length', 'prototype');
 
 // `Object.getOwnPropertyNames` method
 // https://tc39.es/ecma262/#sec-object.getownpropertynames
-// eslint-disable-next-line es/no-object-getownpropertynames -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertynames -- safe
 objectGetOwnPropertyNames.f = Object.getOwnPropertyNames || function getOwnPropertyNames(O) {
   return internalObjectKeys$1(O, hiddenKeys$1);
 };
 
 var objectGetOwnPropertySymbols = {};
 
-// eslint-disable-next-line es/no-object-getownpropertysymbols -- safe
+// eslint-disable-next-line es-x/no-object-getownpropertysymbols -- safe
 objectGetOwnPropertySymbols.f = Object.getOwnPropertySymbols;
 
 var getBuiltIn$1 = getBuiltIn$4;
@@ -956,7 +958,7 @@ var enumBugKeys$1 = enumBugKeys$3;
 
 // `Object.keys` method
 // https://tc39.es/ecma262/#sec-object.keys
-// eslint-disable-next-line es/no-object-keys -- safe
+// eslint-disable-next-line es-x/no-object-keys -- safe
 var objectKeys$2 = Object.keys || function keys(O) {
   return internalObjectKeys(O, enumBugKeys$1);
 };
@@ -971,9 +973,9 @@ var propertyIsEnumerableModule = objectPropertyIsEnumerable;
 var toObject$1 = toObject$3;
 var IndexedObject = indexedObject;
 
-// eslint-disable-next-line es/no-object-assign -- safe
+// eslint-disable-next-line es-x/no-object-assign -- safe
 var $assign = Object.assign;
-// eslint-disable-next-line es/no-object-defineproperty -- required for testing
+// eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
 var defineProperty$3 = Object.defineProperty;
 var concat = uncurryThis$2([].concat);
 
@@ -993,7 +995,7 @@ var objectAssign = !$assign || fails$2(function () {
   // should work with symbols and should have deterministic property order (V8 bug)
   var A = {};
   var B = {};
-  // eslint-disable-next-line es/no-symbol -- safe
+  // eslint-disable-next-line es-x/no-symbol -- safe
   var symbol = Symbol();
   var alphabet = 'abcdefghijklmnopqrst';
   A[symbol] = 7;
@@ -1023,12 +1025,12 @@ var assign = objectAssign;
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
-// eslint-disable-next-line es/no-object-assign -- required for testing
+// eslint-disable-next-line es-x/no-object-assign -- required for testing
 $$2({ target: 'Object', stat: true, forced: Object.assign !== assign }, {
   assign: assign
 });
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -1059,20 +1061,24 @@ function Button({
   children,
   variant,
   onClick,
+  disabled,
   active = false,
-  type = 'button'
+  type = 'button',
+  size
 }) {
   const props = {
-    type
+    type,
+    disabled
   };
   const classNames = [];
   if (variant) classNames.push(variant);
   if (active) classNames.push('active');
+  if (size) classNames.push(size);
   if (classNames.length) props.className = classNames.join(' ');
   if (onClick) props.onClick = onClick;
   return jsx("button", Object.assign({}, props, {
     children: children
-  }), void 0);
+  }));
 }
 
 const ModalHeader = ({
@@ -1088,17 +1094,17 @@ const ModalHeader = ({
   }, {
     children: [jsx("h3", {
       children: _header
-    }, void 0), jsx("button", Object.assign({
+    }), jsxs("button", Object.assign({
       className: "close",
       onClick: handleClose
     }, {
-      children: jsx("span", Object.assign({
+      children: [jsx("span", Object.assign({
         className: "sr-only"
       }, {
         children: "Close"
-      }), void 0)
-    }), void 0)]
-  }), void 0);
+      })), jsx("i", {})]
+    }))]
+  }));
 };
 
 const ModalBody = ({
@@ -1108,7 +1114,7 @@ const ModalBody = ({
     className: "body"
   }, {
     children: children
-  }), void 0);
+  }));
 };
 
 const ModalFooter = ({
@@ -1136,13 +1142,13 @@ const ModalFooter = ({
       onClick: handleDismiss
     }, {
       children: dismiss
-    }), void 0), confirm && jsx(Button, Object.assign({
+    })), confirm && jsx(Button, Object.assign({
       variant: "primary",
       onClick: handleConfirm
     }, {
       children: confirm
-    }), void 0)]
-  }), void 0);
+    }))]
+  }));
 };
 
 const Modal = _a => {
@@ -1159,8 +1165,8 @@ const Modal = _a => {
           return jsxs("aside", Object.assign({
             role: "dialog"
           }, {
-            children: [jsx(ModalHeader, Object.assign({}, props), void 0), jsx(ModalBody, Object.assign({}, props), void 0), jsx(ModalFooter, Object.assign({}, props), void 0)]
-          }), void 0);
+            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
+          }));
         }
 
       case 'takeover':
@@ -1168,8 +1174,8 @@ const Modal = _a => {
           return jsxs("main", Object.assign({
             role: "dialog"
           }, {
-            children: [jsx(ModalHeader, Object.assign({}, props), void 0), jsx(ModalBody, Object.assign({}, props), void 0), jsx(ModalFooter, Object.assign({}, props), void 0)]
-          }), void 0);
+            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
+          }));
         }
 
       default:
@@ -1177,8 +1183,8 @@ const Modal = _a => {
           return jsxs("section", Object.assign({
             role: "dialog"
           }, {
-            children: [jsx(ModalHeader, Object.assign({}, props), void 0), jsx(ModalBody, Object.assign({}, props), void 0), jsx(ModalFooter, Object.assign({}, props), void 0)]
-          }), void 0);
+            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
+          }));
         }
     }
   };
@@ -1197,7 +1203,7 @@ var objectKeys = objectKeys$2;
 
 // `Object.defineProperties` method
 // https://tc39.es/ecma262/#sec-object.defineproperties
-// eslint-disable-next-line es/no-object-defineproperties -- safe
+// eslint-disable-next-line es-x/no-object-defineproperties -- safe
 objectDefineProperties.f = DESCRIPTORS$2 && !V8_PROTOTYPE_DEFINE_BUG ? Object.defineProperties : function defineProperties(O, Properties) {
   anObject$2(O);
   var props = toIndexedObject$1(Properties);
@@ -1285,6 +1291,7 @@ hiddenKeys[IE_PROTO$1] = true;
 
 // `Object.create` method
 // https://tc39.es/ecma262/#sec-object.create
+// eslint-disable-next-line es-x/no-object-create -- safe
 var objectCreate = Object.create || function create(O, Properties) {
   var result;
   if (O !== null) {
@@ -1325,7 +1332,7 @@ var fails$1 = fails$a;
 var correctPrototypeGetter = !fails$1(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
-  // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
+  // eslint-disable-next-line es-x/no-object-getprototypeof -- required for testing
   return Object.getPrototypeOf(new F()) !== F.prototype;
 });
 
@@ -1364,7 +1371,7 @@ var BUGGY_SAFARI_ITERATORS$1 = false;
 // https://tc39.es/ecma262/#sec-%iteratorprototype%-object
 var IteratorPrototype$2, PrototypeOfArrayIteratorPrototype, arrayIterator;
 
-/* eslint-disable es/no-array-prototype-keys -- safe */
+/* eslint-disable es-x/no-array-prototype-keys -- safe */
 if ([].keys) {
   arrayIterator = [].keys();
   // Safari 8 has buggy iterators w/o `next`
@@ -1445,13 +1452,13 @@ var aPossiblePrototype = aPossiblePrototype$1;
 // `Object.setPrototypeOf` method
 // https://tc39.es/ecma262/#sec-object.setprototypeof
 // Works with __proto__ only. Old v8 can't work with null proto objects.
-// eslint-disable-next-line es/no-object-setprototypeof -- safe
+// eslint-disable-next-line es-x/no-object-setprototypeof -- safe
 var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? function () {
   var CORRECT_SETTER = false;
   var test = {};
   var setter;
   try {
-    // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+    // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
     setter = uncurryThis$1(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set);
     setter(test, []);
     CORRECT_SETTER = test instanceof Array;
@@ -1741,7 +1748,7 @@ const Flexbox = _a => {
     className: flexClassName
   }, props, {
     children: children
-  }), void 0);
+  }));
 };
 
 function Card({
@@ -1754,54 +1761,147 @@ function Card({
   }, {
     children: [jsx("header", {
       children: header
-    }, void 0), jsx("p", {
-      children: children
-    }, void 0), jsx("footer", {
+    }), children, jsx("footer", {
       children: footer
-    }, void 0)]
-  }), void 0);
+    })]
+  }));
 }
 
-function Alert({
+const SquareExclamation = jsx("svg", Object.assign({
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-hidden": "true",
+  focusable: "false"
+}, {
+  children: jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z",
+    fill: "#333333"
+  })
+}));
+
+const SquareInfo = jsx("svg", Object.assign({
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, {
+  children: jsx("path", {
+    d: "M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z",
+    fill: "#333333"
+  })
+}));
+
+const Check = jsx("svg", Object.assign({
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, {
+  children: jsx("path", {
+    d: "M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z",
+    fill: "white"
+  })
+}));
+
+const ChevronDown = jsx("svg", Object.assign({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 448 512"
+}, {
+  children: jsx("path", {
+    d: "M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"
+  })
+}));
+
+function AlertRibbon({
   type,
   header,
   footer,
   children,
   closeText,
-  isCloseable = true
+  isCloseable = true,
+  onClose,
+  role,
+  "aria-live": ariaLive,
+  closeAriaLabel
 }) {
   const [closeButton, setCloseButton] = useState();
   useEffect(() => {
     if (!isCloseable) {
       setCloseButton(null);
     } else {
-      if (closeText) setCloseButton(jsx(Button, Object.assign({
-        variant: "ghost"
+      if (closeText) setCloseButton(jsxs("button", Object.assign({
+        className: "close"
       }, {
-        children: jsx("span", Object.assign({
+        children: [jsx("span", Object.assign({
           className: "sr-only"
         }, {
           children: closeText
-        }), void 0)
-      }), void 0));else setCloseButton(jsx("button", {
+        })), jsx("i", {})]
+      })));else setCloseButton(jsxs("button", Object.assign({
         className: "close"
-      }, void 0));
+      }, {
+        children: [jsx("span", Object.assign({
+          className: "sr-only"
+        }, {
+          children: "Close"
+        })), jsx("i", {})]
+      })));
     }
   }, [isCloseable, closeText]);
+
+  const renderIcon = () => {
+    switch (type) {
+      case "danger":
+      case "warning":
+        return SquareExclamation;
+
+      case "success":
+        return Check;
+
+      default:
+        return SquareInfo;
+    }
+  };
+
   return jsxs("div", Object.assign({
-    role: "alert",
-    className: type
+    className: `alert-ribbon ${type}`,
+    role: role,
+    "aria-live": ariaLive
   }, {
-    children: [header && jsxs("header", {
-      children: [/*#__PURE__*/React.isValidElement(header) ? header : jsx("h3", {
+    children: [jsx("i", Object.assign({
+      "aria-hidden": "true"
+    }, {
+      children: renderIcon()
+    })), jsxs("div", Object.assign({
+      className: "alert-ribbon__content"
+    }, {
+      children: [header && /*#__PURE__*/React.isValidElement(header) ? header : jsx("span", Object.assign({
+        className: "header"
+      }, {
         children: header
-      }, void 0), closeButton]
-    }, void 0), jsx("p", {
-      children: children
-    }, void 0), footer && jsx("footer", {
-      children: footer
-    }, void 0)]
-  }), void 0);
+      })), jsx("p", {
+        children: children
+      })]
+    })), closeButton && jsx("button", Object.assign({
+      className: "close",
+      type: "button",
+      "aria-label": closeAriaLabel !== null && closeAriaLabel !== void 0 ? closeAriaLabel : "Close alert",
+      onClick: event => {
+        onClose && onClose(event);
+      }
+    }, {
+      children: jsx("i", {})
+    })), footer && jsxs("div", Object.assign({
+      className: "alert-ribbon__footer"
+    }, {
+      children: [" ", footer, " "]
+    }))]
+  }));
 }
 
 const ButtonGroup = ({
@@ -1829,9 +1929,10 @@ const ButtonGroup = ({
   }, [children, selected, variant]);
   return jsx(Group, {
     children: buttons.map(props => jsx(Button, Object.assign({}, props), props.key))
-  }, void 0);
+  });
 };
 
+/* eslint-disable-next-line */
 const validateInputValue = (target, rules, setError) => {
   const errorMessage = validateInputValueErrors(rules, target);
   errorMessage ? setErrorInsert(setError, target.name) : setErrorRemove(setError, target.name);
@@ -1849,17 +1950,24 @@ const validateInputValueErrors = (rules, target) => {
 
   return validateTextInputValues(value, rules);
 };
+/* eslint-disable-next-line */
+
 
 const setErrorInsert = (setError, name) => {
+  /* eslint-disable-next-line */
   setError(errors => {
     return Object.assign(Object.assign({}, errors), {
       [name]: true
     });
   });
 };
+/* eslint-disable-next-line */
+
 
 const setErrorRemove = (setError, name) => {
+  /* eslint-disable-next-line */
   setError(errors => {
+    /* eslint-disable-next-line */
     const newError = Object.assign({}, errors);
     delete newError[name];
     return newError;
@@ -1893,9 +2001,15 @@ const FormProvider = _a => {
     onFormSubmit
   } = _a,
       props = __rest(_a, ["children", "direction", "formSize", "onSubmit", "onFormSubmit"]);
+  /* eslint-disable-next-line */
+
 
   const [values, setValues] = React.useState();
+  /* eslint-disable-next-line */
+
   const [errors, setErrors] = React.useState();
+  /* eslint-disable-next-line */
+
   const [fields, setFields] = React.useState({});
 
   const formSubmit = event => {
@@ -1935,12 +2049,12 @@ const FormProvider = _a => {
       onReset: resetForm
     }, {
       children: children
-    }), void 0)
-  }), void 0);
+    }))
+  }));
 };
 
 const Form = props => {
-  return jsx(FormProvider, Object.assign({}, props), void 0);
+  return jsx(FormProvider, Object.assign({}, props));
 };
 
 const FormItems = ({
@@ -1955,24 +2069,33 @@ const FormItems = ({
     errors
   } = useFormContext();
   React.useEffect(() => {
+    /* eslint-disable-next-line */
     setFields(fields => Object.assign(Object.assign({}, fields), {
       [name]: validate === null || validate === void 0 ? void 0 : validate.rules
     }));
+    /* eslint-disable-next-line */
 
     const removeValues = values => {
+      /* eslint-disable-next-line */
       const newValues = Object.assign({}, values);
       delete newValues[name];
       return newValues;
     };
 
     return () => {
+      /* eslint-disable-next-line */
       setFields(fields => removeValues(fields));
+      /* eslint-disable-next-line */
+
       setValues(values => removeValues(values));
+      /* eslint-disable-next-line */
+
       setErrors(errors => removeValues(errors));
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onChange = event => {
+    if (!event.target) return;
     const {
       value,
       name,
@@ -1983,6 +2106,8 @@ const FormItems = ({
 
     if (type === 'checkbox') {
       inputValue = checked ? value : null;
+      /* eslint-disable-next-line */
+
       checked ? setValues(values => Object.assign(Object.assign({}, values), {
         [name]: value
       })) : setValues(values => Object.assign(Object.assign({}, values), {
@@ -1990,6 +2115,8 @@ const FormItems = ({
       }));
     } else {
       inputValue = value;
+      /* eslint-disable-next-line */
+
       setValues(values => Object.assign(Object.assign({}, values), {
         [name]: value
       }));
@@ -2002,6 +2129,8 @@ const FormItems = ({
       checked
     }, validate === null || validate === void 0 ? void 0 : validate.rules, setErrors);
   };
+  /* eslint-disable-next-line */
+
 
   return /*#__PURE__*/React.cloneElement(children, {
     validator: (errors === null || errors === void 0 ? void 0 : errors[name]) && validate,
@@ -2024,12 +2153,12 @@ function Group({
       className: groupClassName
     }, {
       children: children
-    }), void 0), error && jsx("span", Object.assign({
+    })), error && jsx("span", Object.assign({
       className: "form-info"
     }, {
       children: errorMessage
-    }), void 0)]
-  }), void 0);
+    }))]
+  }));
 }
 
 const useInput = (props, onChanges, onChangeInput) => {
@@ -2083,7 +2212,7 @@ const RenderInput = (type, props, onChange, onChangeInput, label, info, validato
   if (!label && !info) return jsx("input", Object.assign({
     type: type,
     value: value
-  }, propsWithDescription), void 0);
+  }, propsWithDescription));
   return jsxs("div", Object.assign({
     className: "form-group"
   }, {
@@ -2091,22 +2220,22 @@ const RenderInput = (type, props, onChange, onChangeInput, label, info, validato
       htmlFor: inputProps.id
     }, {
       children: label
-    }), void 0), info && jsx("span", Object.assign({
+    })), info && jsx("span", Object.assign({
       className: "form-info",
       id: `${inputProps.id}_info`
     }, {
       children: info
-    }), void 0), jsx("input", Object.assign({
+    })), jsx("input", Object.assign({
       type: type,
       value: value
     }, propsWithDescription, {
       className: validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)
-    }), void 0), validator && jsx("span", Object.assign({
+    })), validator && jsx("span", Object.assign({
       className: "form-info"
     }, {
       children: validator.message
-    }), void 0)]
-  }), void 0);
+    }))]
+  }));
 };
 const TextInput = _a => {
   var {
@@ -2154,20 +2283,24 @@ const Checkbox = _a => {
 
   const inputProps = useInput(props, onChange);
   const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
-  return jsxs(Fragment, {
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
     children: [jsxs("label", Object.assign({
       htmlFor: inputProps.id,
       className: `form-control ${validatorClassName}`
     }, {
       children: [label, jsx("input", Object.assign({
         type: "checkbox"
-      }, inputProps), void 0), jsx("span", {}, void 0), jsx("i", {}, void 0)]
-    }), void 0), validator && jsx("span", Object.assign({
+      }, inputProps, {
+        className: validatorClassName
+      })), jsx("i", {})]
+    })), validator && jsx("span", Object.assign({
       className: "form-info"
     }, {
       children: validator.message
-    }), void 0)]
-  }, void 0);
+    }))]
+  }));
 };
 const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
@@ -2189,10 +2322,10 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
     }, props, {
       className: validator,
       ref: ref
-    }), void 0), jsx("span", {
+    })), jsx("span", {
       children: label
-    }, void 0), jsx("i", {}, void 0)]
-  }), void 0);
+    }), jsx("i", {})]
+  }));
 });
 
 const Text = ({
@@ -2201,7 +2334,7 @@ const Text = ({
   className: "form-text"
 }, {
   children: children
-}), void 0);
+}));
 
 var wellKnownSymbol$1 = wellKnownSymbol$8;
 
@@ -2311,6 +2444,8 @@ if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototy
 }
 
 const RadioGroup = ({
+  defaultSelected,
+  valueSelected,
   description,
   title,
   validator,
@@ -2319,13 +2454,15 @@ const RadioGroup = ({
   name,
   children
 }) => {
-  const [checked, setChecked] = React.useState();
+  const [selected, setSelected] = React.useState(valueSelected !== null && valueSelected !== void 0 ? valueSelected : defaultSelected);
   const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
 
-  const onChanges = event => {
-    setChecked(event.target.value);
-    onChangeRadio && onChangeRadio(event.target.value);
-    onChange && onChange(event);
+  const handleOnChange = event => {
+    if (event.target.value !== selected) {
+      setSelected(event.target.value);
+      onChangeRadio && onChangeRadio(event.target.value);
+      onChange && onChange(event);
+    }
   };
 
   const radioBtnRef = React.useRef(null);
@@ -2336,7 +2473,7 @@ const RadioGroup = ({
       const form = (_a = radioBtnRef === null || radioBtnRef === void 0 ? void 0 : radioBtnRef.current) === null || _a === void 0 ? void 0 : _a.form;
 
       const resetListner = () => {
-        setChecked(undefined);
+        setSelected(undefined);
       };
 
       form === null || form === void 0 ? void 0 : form.addEventListener('reset', resetListner);
@@ -2344,7 +2481,8 @@ const RadioGroup = ({
     } else {
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       return () => {};
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
   return jsxs("div", Object.assign({
     className: "form-group"
@@ -2352,27 +2490,29 @@ const RadioGroup = ({
     children: [jsxs("fieldset", Object.assign({
       className: validatorClassName
     }, {
-      children: [jsx("legend", {
+      children: [title && jsx("legend", {
         children: title
-      }, void 0), jsx("span", Object.assign({
+      }), description && jsx("span", Object.assign({
         className: "form-info"
       }, {
         children: description
-      }), void 0), React.Children.map(children, Child => {
-        return /*#__PURE__*/React.isValidElement(Child) ? /*#__PURE__*/React.cloneElement(Child, {
-          validator: validatorClassName,
-          onChange: onChanges,
-          checked: checked === Child.props.value,
-          name,
-          ref: radioBtnRef
-        }) : Child;
+      })), jsx("div", {
+        children: React.Children.map(children, radioButton => {
+          return /*#__PURE__*/React.isValidElement(radioButton) ? /*#__PURE__*/React.cloneElement(radioButton, {
+            validator: validatorClassName,
+            onChange: handleOnChange,
+            checked: selected === radioButton.props.value,
+            name,
+            ref: radioBtnRef
+          }) : radioButton;
+        })
       })]
-    }), void 0), (validator === null || validator === void 0 ? void 0 : validator.message) && jsx("span", Object.assign({
+    })), (validator === null || validator === void 0 ? void 0 : validator.message) && jsx("span", Object.assign({
       className: "form-info"
     }, {
       children: validator === null || validator === void 0 ? void 0 : validator.message
-    }), void 0)]
-  }), void 0);
+    }))]
+  }));
 };
 
 const ListItem = _a => {
@@ -2388,15 +2528,15 @@ const ListItem = _a => {
       children: jsxs("div", {
         children: [jsx("dt", {
           children: tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.title
-        }, void 0), tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.definition.map((item, index) => jsx("dd", {
+        }), tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.definition.map((item, index) => jsx("dd", {
           children: item
         }, index))]
-      }, void 0)
-    }, void 0);
+      })
+    });
   } else {
     return jsx("li", Object.assign({}, props, {
       children: children
-    }), void 0);
+    }));
   }
 };
 
@@ -2414,7 +2554,7 @@ const List = _a => {
       children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem, {
         children: child
       }, index))
-    }), void 0);
+    }));
   } else if (listType !== 'table') {
     return jsx("ul", Object.assign({}, props, {
       className: listType
@@ -2422,20 +2562,20 @@ const List = _a => {
       children: children === null || children === void 0 ? void 0 : children.map((child, index) => jsx(ListItem, {
         children: child
       }, index))
-    }), void 0);
+    }));
   } else {
     return jsxs("figure", {
       children: [jsx("figcaption", Object.assign({
         className: "table-list-caption"
       }, {
         children: tableCaption
-      }), void 0), jsx("dl", {
+      })), jsx("dl", {
         children: tableData === null || tableData === void 0 ? void 0 : tableData.map((data, index) => jsx(ListItem, {
           listType: listType,
           tableRowData: data
         }, index))
-      }, void 0)]
-    }, void 0);
+      })]
+    });
   }
 };
 
@@ -2453,11 +2593,11 @@ const Link = _a => {
       role: button ? 'button' : undefined,
       className: className
     }, props);
-    setAnchorProps(newProps);
+    setAnchorProps(newProps); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [button]);
   return jsx("a", Object.assign({}, anchorProps, {
     children: children
-  }), void 0);
+  }));
 };
 
 const Navbar = ({
@@ -2484,7 +2624,7 @@ const Navbar = ({
       href: _brandLink,
       target: "_blank",
       className: "brand"
-    }, void 0), jsx("div", Object.assign({
+    }), jsx("div", Object.assign({
       className: "container-fluid"
     }, {
       children: jsxs("div", Object.assign({
@@ -2499,48 +2639,691 @@ const Navbar = ({
           }, {
             children: jsx("h1", {
               children: title
-            }, void 0)
-          }), void 0) : jsx("h1", {
+            })
+          })) : jsx("h1", {
             children: title
-          }, void 0)
-        }), void 0), jsx("div", Object.assign({
+          })
+        })), jsx("div", Object.assign({
           className: "col-auto"
         }, {
           children: jsx("div", Object.assign({
             className: "group size-sm"
           }, {
             children: children
-          }), void 0)
-        }), void 0)]
-      }), void 0)
-    }), void 0)]
-  }), void 0);
+          }))
+        }))]
+      }))
+    }))]
+  }));
 };
 
 function Badge(_a) {
   var {
-    title,
+    children,
     badgeType,
     isCloseable,
-    closeText
+    closeText,
+    customColor,
+    customBackgroundColor
   } = _a,
-      props = __rest(_a, ["title", "badgeType", "isCloseable", "closeText"]);
+      props = __rest(_a, ["children", "badgeType", "isCloseable", "closeText", "customColor", "customBackgroundColor"]);
 
-  return jsxs("span", Object.assign({}, props, {
-    className: `badge ${badgeType}`
+  const [isClosed, setIsClosed] = React.useState(false);
+  const [type, setType] = React.useState('');
+  React.useEffect(() => {
+    if (badgeType) {
+      setType(badgeType);
+    }
+
+    if (!!customColor || !!customBackgroundColor) {
+      setType('');
+    }
+  }, [badgeType, customColor, customBackgroundColor]);
+  return !isClosed ? jsxs("span", Object.assign({}, props, {
+    className: `badge ${type}`,
+    style: {
+      color: customColor,
+      backgroundColor: customBackgroundColor
+    }
   }, {
     children: [jsx("strong", {
-      children: title
-    }, void 0), isCloseable && jsx("button", Object.assign({
-      className: "close"
+      children: children
+    }), isCloseable && jsxs("button", Object.assign({
+      type: "button",
+      className: "close",
+      onClick: () => setIsClosed(true)
     }, {
-      children: jsx("span", Object.assign({
-        className: "sr-only"
+      children: [closeText, jsx("i", {})]
+    }))]
+  })) : null;
+}
+
+const noop = () => {};
+
+const useStepper = ({
+  min,
+  max,
+  value: _value = 0,
+  step: _step = 1,
+  id: _id = randomId(),
+  onChange
+}) => {
+  const pStepper = {
+    down: noop,
+    setMax: noop,
+    setMin: noop,
+    setStep: noop,
+    setValue: noop,
+    up: noop
+  };
+  const [stepper, setStepper] = useState(pStepper);
+  const [data, setData] = useState({
+    id: _id,
+    value: _value,
+    min,
+    max,
+    step: _step
+  }); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (max !== data.max) stepper.setMax(max);
+  }, [stepper, max]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (min !== data.min) stepper.setMin(min);
+  }, [stepper, min]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (_step !== data.step) stepper.setStep(_step || 1);
+  }, [stepper, _step]); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (_value !== data.value) stepper.setValue(_value || 0, false);
+  }, [stepper, _value]);
+  useEffect(() => {
+    setStepper(createStepper({
+      id: _id,
+      value: _value,
+      min,
+      max,
+      step: _step,
+      onChange
+    }, setData)); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return [stepper, data];
+};
+
+function Stepper(_a) {
+  var {
+    label,
+    description,
+    statusMessage,
+    validator
+  } = _a,
+      stepperArgs = __rest(_a, ["label", "description", "statusMessage", "validator"]);
+
+  const [stepper, data] = useStepper(stepperArgs);
+
+  const onChangeEvent = e => {
+    stepper.setValue(e.target.valueAsNumber);
+  };
+
+  const PrimitiveStepper = jsxs("div", Object.assign({
+    className: `group group-border group-stepper ${validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)}`
+  }, {
+    children: [jsx("button", Object.assign({
+      onClick: () => stepper.down()
+    }, {
+      children: "-"
+    })), jsx("input", {
+      id: data.id,
+      type: "number",
+      onChange: onChangeEvent,
+      onFocus: ({
+        target
+      }) => target.select(),
+      placeholder: "0",
+      value: data.value
+    }), jsx("button", Object.assign({
+      onClick: () => stepper.up()
+    }, {
+      children: "+"
+    }))]
+  }));
+
+  if (!label && !description && !statusMessage && !validator) return PrimitiveStepper;
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
+    children: [label && jsx("label", Object.assign({
+      htmlFor: data.id
+    }, {
+      children: label
+    })), description && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: description
+    })), jsxs("div", Object.assign({
+      className: "stepper-wrapper"
+    }, {
+      children: [PrimitiveStepper, validator && jsx("span", Object.assign({
+        className: "form-info"
       }, {
-        children: closeText
-      }), void 0)
-    }), void 0)]
-  }), void 0);
+        children: validator.message
+      }))]
+    }))]
+  }));
 }
 
-export { Alert, Badge, Button, ButtonGroup, Card, Checkbox, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, RadioButton, RadioGroup, RenderInput, Text, TextInput };
+const Select = /*#__PURE__*/React.forwardRef(({
+  id,
+  className,
+  children,
+  validator,
+  label,
+  labelInformation,
+  defaultValue,
+  value,
+  testId,
+  onChange,
+  onSelect
+}, ref) => {
+  const selectId = id !== null && id !== void 0 ? id : randomId();
+  const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
+  return jsx(Fragment, {
+    children: jsx("div", Object.assign({
+      className: `form-group ${validator && 'validated'}`
+    }, {
+      children: jsxs("div", Object.assign({
+        className: "gds--select"
+      }, {
+        children: [label && jsx("label", Object.assign({
+          htmlFor: selectId
+        }, {
+          children: label
+        })), labelInformation && jsx("div", Object.assign({
+          className: "form-info"
+        }, {
+          children: labelInformation
+        })), jsxs("div", Object.assign({
+          className: `gsd--select-wrapper ${validatorClassName}`
+        }, {
+          children: [jsx("select", Object.assign({
+            id: selectId,
+            "data-testid": testId,
+            className: className,
+            defaultValue: defaultValue,
+            value: value,
+            ref: ref,
+            onChange: event => {
+              onChange && onChange(event);
+            }
+          }, {
+            children: children
+          })), ChevronDown]
+        })), (validator === null || validator === void 0 ? void 0 : validator.message) && jsx("div", Object.assign({
+          className: "form-info"
+        }, {
+          children: validator.message
+        }))]
+      }))
+    }))
+  });
+});
+const Option = _a => {
+  var {
+    value,
+    children
+  } = _a,
+      rest = __rest(_a, ["value", "children"]);
+
+  return jsx("option", Object.assign({
+    value: value
+  }, rest, {
+    children: children
+  }));
+};
+const OptionGroup = ({
+  label,
+  disabled,
+  children
+}) => {
+  return jsx("optgroup", Object.assign({
+    label: label,
+    disabled: disabled
+  }, {
+    children: children
+  }));
+};
+
+const useDropdown = ({
+  id,
+  value,
+  texts,
+  options,
+  loop,
+  multiSelect,
+  searchable,
+  searchFilter,
+  compareWith,
+  useValue,
+  display,
+  togglerRef,
+  listboxRef,
+  onChange,
+  validator
+}) => {
+  const [handler, setHandler] = useState();
+  const [dropdown, setDropdown] = useState();
+  const [togglerProps, setTogglerProps] = useState({});
+  const [listboxProps, setListboxProps] = useState({});
+  const [listItems, setListItems] = useState([]);
+  const [multiSelectProps, setMultiSelectProps] = useState({}); // When dropdown data changes
+
+  useEffect(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+
+    if (!dropdown) return;
+    const {
+      elements: {
+        toggler,
+        listbox
+      }
+    } = dropdown;
+    const newToggleProps = Object.assign(Object.assign({}, toggler === null || toggler === void 0 ? void 0 : toggler.attributes), {
+      className: (_a = toggler === null || toggler === void 0 ? void 0 : toggler.classes) === null || _a === void 0 ? void 0 : _a.join(' '),
+      children: (_b = dropdown === null || dropdown === void 0 ? void 0 : dropdown.texts) === null || _b === void 0 ? void 0 : _b.select,
+      onClick: () => handler === null || handler === void 0 ? void 0 : handler.toggle()
+    });
+    setTogglerProps(newToggleProps);
+    const newListboxProps = Object.assign(Object.assign({}, listbox === null || listbox === void 0 ? void 0 : listbox.attributes), {
+      className: (_c = listbox === null || listbox === void 0 ? void 0 : listbox.classes) === null || _c === void 0 ? void 0 : _c.join(' ')
+    });
+    setListboxProps(newListboxProps);
+
+    if (!dropdown.isMultiSelect) {
+      const newListItems = dropdown.options.map(o => {
+        var _a;
+
+        return Object.assign(Object.assign({}, o.attributes), {
+          className: (_a = o.classes) === null || _a === void 0 ? void 0 : _a.join(' '),
+          children: o[dropdown.display],
+          selected: o.selected,
+          onClick: () => handler === null || handler === void 0 ? void 0 : handler.select(o)
+        });
+      });
+      setListItems(newListItems);
+    } else {
+      const checkboxes = dropdown.options.map(o => ({
+        labelProps: Object.assign(Object.assign({}, o.attributes), {
+          className: ['form-control', ...o.classes].join(' ')
+        }),
+        inputProps: {
+          defaultChecked: o.selected,
+          type: 'checkbox',
+          onClick: () => handler === null || handler === void 0 ? void 0 : handler.select(o, false)
+        },
+        spanProps: {
+          children: o[dropdown.display]
+        }
+      }));
+      const newMultiselect = {
+        fieldsetProps: {
+          'aria-describedby': (_f = (_e = (_d = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _d === void 0 ? void 0 : _d.fieldset) === null || _e === void 0 ? void 0 : _e.attributes) === null || _f === void 0 ? void 0 : _f.id,
+          'aria-multiselectable': true,
+          role: 'listbox',
+          tabIndex: -1
+        },
+        legendProps: {
+          className: 'sr-only',
+          id: (_j = (_h = (_g = dropdown === null || dropdown === void 0 ? void 0 : dropdown.elements) === null || _g === void 0 ? void 0 : _g.fieldset) === null || _h === void 0 ? void 0 : _h.attributes) === null || _j === void 0 ? void 0 : _j.id,
+          children: dropdown.texts.optionsDescription
+        },
+        checkboxes
+      };
+      setMultiSelectProps(newMultiselect);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [dropdown]); // When dropdown properties change
+
+  useEffect(() => {
+    if (!dropdown) return;
+    handler === null || handler === void 0 ? void 0 : handler.update({
+      id,
+      value,
+      texts,
+      options,
+      loop,
+      multiSelect,
+      searchable,
+      searchFilter,
+      compareWith,
+      useValue,
+      display,
+      validator
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, texts, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display]);
+  useEffect(() => {
+    if (!dropdown) return;
+    handler === null || handler === void 0 ? void 0 : handler.selectByValue(value);
+    console.log('new value'); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]); // When validator changes
+
+  useEffect(() => {
+    if (!dropdown) return;
+    if (validator) handler === null || handler === void 0 ? void 0 : handler.validate(validator); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validator]); // Create dropdown handler
+
+  useEffect(() => {
+    if (!handler && togglerRef.current && listboxRef.current) {
+      setHandler(createDropdown({
+        id,
+        value,
+        texts,
+        options,
+        loop,
+        multiSelect,
+        searchable,
+        searchFilter,
+        compareWith,
+        useValue,
+        display,
+        validator
+      }, togglerRef.current, listboxRef.current, listboxRef.current, dd => setDropdown(dd), value => onChange === null || onChange === void 0 ? void 0 : onChange(value)));
+    }
+
+    return () => handler === null || handler === void 0 ? void 0 : handler.destroy(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [togglerRef, listboxRef]);
+  return {
+    dropdown: handler,
+    togglerProps,
+    listboxProps,
+    listItems,
+    multiSelectProps
+  };
+};
+
+const Dropdown = ({
+  compareWith,
+  display,
+  id,
+  informationLabel,
+  label,
+  loop,
+  multiSelect,
+  onChange,
+  options,
+  searchFilter,
+  searchable,
+  texts,
+  useValue,
+  validator,
+  value
+}) => {
+  var _a;
+
+  const togglerRef = useRef(null);
+  const listboxRef = useRef(null);
+  const {
+    dropdown,
+    listboxProps,
+    togglerProps,
+    listItems,
+    multiSelectProps
+  } = useDropdown({
+    id,
+    value,
+    options,
+    loop,
+    multiSelect,
+    searchable,
+    searchFilter,
+    compareWith,
+    useValue,
+    display,
+    togglerRef,
+    listboxRef,
+    texts,
+    onChange,
+    validator
+  });
+
+  const getListBoxProps = props => {
+    var _a, _b, _c;
+
+    if (Object.keys(props).length === 0) return {
+      role: 'listbox',
+      tabIndex: -1,
+      className: (_c = (_b = (_a = dropdownValues().elements) === null || _a === void 0 ? void 0 : _a.listbox) === null || _b === void 0 ? void 0 : _b.classes) === null || _c === void 0 ? void 0 : _c.join(' ')
+    };
+    return props;
+  };
+
+  return jsxs("div", Object.assign({
+    className: "form-group"
+  }, {
+    children: [label && jsx("label", Object.assign({
+      htmlFor: togglerProps.id
+    }, {
+      children: label
+    })), informationLabel && jsx("div", Object.assign({
+      className: "form-info"
+    }, {
+      children: informationLabel
+    })), jsx("button", Object.assign({
+      type: "button"
+    }, togglerProps, {
+      ref: togglerRef
+    }, {
+      children: jsx("span", {
+        children: togglerProps.children
+      })
+    })), jsxs("div", Object.assign({}, getListBoxProps(listboxProps), {
+      ref: listboxRef
+    }, {
+      children: [jsxs("button", Object.assign({
+        type: "button",
+        className: "close m-4 m-sm-2 d-block d-sm-none",
+        onClick: dropdown === null || dropdown === void 0 ? void 0 : dropdown.close
+      }, {
+        children: [jsx("span", Object.assign({
+          className: "sr-only"
+        }, {
+          children: dropdown === null || dropdown === void 0 ? void 0 : dropdown.dropdown.texts.close
+        })), jsx("i", {})]
+      })), (dropdown === null || dropdown === void 0 ? void 0 : dropdown.dropdown.isMultiSelect) ? jsx("div", Object.assign({
+        className: "sg-fieldset-container"
+      }, {
+        children: jsxs("fieldset", Object.assign({}, multiSelectProps.fieldsetProps, {
+          children: [jsx("legend", Object.assign({}, multiSelectProps.legendProps)), jsx("div", {
+            children: (_a = multiSelectProps.checkboxes) === null || _a === void 0 ? void 0 : _a.map(checkboxItem => jsxs("label", Object.assign({}, checkboxItem.labelProps, {
+              children: [jsx("input", Object.assign({}, checkboxItem.inputProps)), jsx("span", Object.assign({}, checkboxItem.spanProps)), jsx("i", {})]
+            }), checkboxItem.labelProps.id))
+          })]
+        }))
+      })) : jsx("ul", Object.assign({
+        role: "listbox"
+      }, {
+        children: listItems.map(liProps => jsx("li", Object.assign({}, liProps), liProps.id))
+      }))]
+    })), validator && jsx("span", Object.assign({
+      className: "form-info"
+    }, {
+      children: validator === null || validator === void 0 ? void 0 : validator.message
+    }))]
+  }));
+};
+
+const useDatepicker = (datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options = {}) => {
+  const dataStub = {
+    formattedSelectedDate: '',
+    calendar: {
+      headers: [],
+      calendarGrid: []
+    }
+  };
+  const [data, setData] = useState(dataStub);
+  const [state, setState] = useState({
+    isActive: false
+  });
+  const datepickerStub = {};
+  const [datepicker, setDatepicker] = useState(datepickerStub);
+  useEffect(() => {
+    if (!datepicker.open && datepickerRef.current && datepickerDialogRef.current && dateInputRef.current && datepickerTriggerRef.current) {
+      setDatepicker(createDatepicker((data, state) => {
+        if (data) setData(data);
+        if (state) setState(state);
+      }, options, datepickerRef.current, datepickerDialogRef.current, dateInputRef.current, datepickerTriggerRef.current));
+    }
+  }, [datepicker, datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options]);
+  return {
+    datepicker,
+    data,
+    state
+  };
+};
+
+const Datepicker = (options = {}) => {
+  const [uuid] = useState(randomId());
+  const id = `sgr-datepicker-${uuid}`;
+  const datepickerRef = useRef(null);
+  const datepickerTriggerRef = useRef(null);
+  const datepickerDialogRef = useRef(null);
+  const dateInputRef = useRef(null);
+  const {
+    datepicker,
+    data,
+    state
+  } = useDatepicker(datepickerRef, datepickerDialogRef, dateInputRef, datepickerTriggerRef, options);
+  useEffect(() => {
+    var _a;
+
+    const selDateSub = (_a = datepicker.selectedDate$) === null || _a === void 0 ? void 0 : _a.subscribe(newDate => options.onChange && options.onChange(newDate));
+    return () => selDateSub === null || selDateSub === void 0 ? void 0 : selDateSub.unsubscribe();
+  }, [datepicker, options]);
+
+  const classNames = day => Object.entries({
+    disabled: !day.currentMonth,
+    'sg-date-today': day.today // 'sg-date-holiday': day.holiday,
+
+  }).map(([className, add]) => add ? className : '').join(' ');
+
+  return jsxs(Fragment, {
+    children: [jsxs("div", Object.assign({
+      className: "form-group"
+    }, {
+      children: [jsx("label", Object.assign({
+        htmlFor: id
+      }, {
+        children: "Date"
+      })), jsxs("div", Object.assign({
+        className: "group",
+        ref: datepickerRef
+      }, {
+        children: [jsx("input", {
+          ref: dateInputRef,
+          id: id,
+          type: "text",
+          placeholder: "yyyy-mm-dd",
+          value: data.formattedSelectedDate,
+          onChange: e => datepicker.select(e.target.value)
+        }), jsx("button", Object.assign({
+          ref: datepickerTriggerRef,
+          type: "button",
+          className: "primary",
+          onClick: () => datepicker.toggle()
+        }, {
+          children: jsx("i", Object.assign({
+            className: "sg-icon sg-icon-calendar"
+          }, {
+            children: "Select date"
+          }))
+        }))]
+      })), jsx("span", Object.assign({
+        className: "form-info"
+      }, {
+        children: "Select a date"
+      }))]
+    })), jsx("div", Object.assign({
+      ref: datepickerDialogRef,
+      className: `popover popover-datepicker ${state.isActive ? 'active' : ''}`,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Choose Date"
+    }, {
+      children: state.isActive && jsxs("div", Object.assign({
+        className: "sg-date"
+      }, {
+        children: [jsxs("header", {
+          children: [jsx("button", Object.assign({
+            className: "link",
+            onClick: () => datepicker.sub(1, 'months')
+          }, {
+            children: jsx("i", Object.assign({
+              className: "sg-icon sg-icon-previous"
+            }, {
+              children: "Previous month"
+            }))
+          })), jsx(Dropdown, {
+            options: months({}),
+            texts: {
+              placeholder: data.monthName
+            }
+          }), jsx(Dropdown, {
+            options: years({}),
+            texts: {
+              placeholder: data.year + ''
+            }
+          }), jsx("button", Object.assign({
+            className: "link",
+            onClick: () => datepicker.add(1, 'months')
+          }, {
+            children: jsx("i", Object.assign({
+              className: "sg-icon sg-icon-next"
+            }, {
+              children: "Next month"
+            }))
+          }))]
+        }), jsx("main", {
+          children: jsxs("table", Object.assign({
+            role: "grid"
+          }, {
+            children: [jsx("thead", {
+              children: jsx("tr", {
+                children: data.calendar.headers.map((header, ix) => jsx("th", Object.assign({
+                  scope: "col",
+                  abbr: header.abbr,
+                  className: header.type === 'week' ? 'sg-week-header' : 'sg-day-header'
+                }, {
+                  children: header.displayText
+                }), `week_${ix}`))
+              })
+            }), jsx("tbody", {
+              children: data.calendar.calendarGrid.map((week, ix) => jsxs("tr", {
+                children: [data.calendar.weekNumbers ? jsx("th", Object.assign({
+                  className: "sg-week-number"
+                }, {
+                  children: data.calendar.weekNumbers[ix]
+                })) : '', week.map(day => jsx("td", Object.assign({
+                  "data-date": day.formattedDate,
+                  className: classNames(day),
+                  title: day.today ? 'Today' : '',
+                  tabIndex: day.highlighted || day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) || day.today && !(data === null || data === void 0 ? void 0 : data.highlightedDate) && !(data === null || data === void 0 ? void 0 : data.selectedDate) ? 0 : -1,
+                  role: day.selected ? 'gridcell' : undefined,
+                  "aria-selected": day.selected && !(data === null || data === void 0 ? void 0 : data.highlightedDate) ? true : undefined,
+                  onClick: () => {
+                    day.currentMonth && datepicker.select(day.date);
+                  }
+                }, {
+                  children: day.day
+                }), day.day))]
+              }, `week_${ix}`))
+            })]
+          }))
+        })]
+      }))
+    }))]
+  });
+};
+
+export { AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItems, Group, Link, List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Stepper, Text, TextInput };