@sebgroup/green-react 3.28.1 → 3.28.3

package/package.json

@@ -2,15 +2,15 @@
   "name": "@sebgroup/green-react",
   "main": "./src/index.js",
   "module": "./src/index.js",
-  "version": "3.28.1",
+  "version": "3.28.3",
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.78.0",
+    "@sebgroup/green-core": "^1.79.0",
     "@sebgroup/chlorophyll": "^3.6.16",
-    "@sebgroup/extract": "^3.0.1",
+    "@sebgroup/extract": "^3.0.3",
     "@lit/react": "^1.0.2",
     "classnames": "^2.3.2",
     "body-scroll-lock": "^3.1.5"

package/src/lib/datepicker/datepicker.js

@@ -36,7 +36,7 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var max = maxDate ? maxDate : new Date(new Date().getFullYear() + 10, 0, 1);
   var onChangeHandler = function onChangeHandler(e) {
     if (onChange) {
-      onChange(e.detail.value);
+      onChange(e.target.value);
     }
   };
   var _ref = useRef(null);

package/src/lib/dropdown/dropdown.js

@@ -6,6 +6,7 @@ import { GdsDropdown, GdsOption } from '@sebgroup/green-core/components/dropdown
 import { getScopedTagName } from '@sebgroup/green-core/scoping';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
 import { CoreMenuHeading } from '../context-menu/context-menu.js';
+import { IconTriangleExclamation } from '@sebgroup/green-core/react';
 import '@sebgroup/green-core/components/context-menu/context-menu.component';
 
 GdsDropdown.define();
@@ -87,9 +88,13 @@ var Dropdown = function Dropdown(_a) {
       children: [informationLabel && jsx("span", {
         slot: "sub-label",
         children: informationLabel
-      }), validator && jsx("span", {
+      }), validator && jsxs("div", {
         slot: "message",
-        children: validator.message
+        style: {
+          display: 'flex',
+          gap: '0.25rem'
+        },
+        children: [validator.indicator === 'error' && jsx(IconTriangleExclamation, {}), validator.message]
       }), jsx(CoreOption, {
         isPlaceholder: true,
         "aria-hidden": true,

package/src/lib/dropdown/index.js

@@ -8,3 +8,4 @@ import '@sebgroup/green-core/scoping';
 import '@sebgroup/green-core/transitional-styles';
 import '../context-menu/context-menu.js';
 import '@sebgroup/green-core/components/context-menu/context-menu.component';
+import '@sebgroup/green-core/react';

package/src/lib/form/buttonGroup/buttonGroup.js

@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { Button } from '../button/button.js';
 import '@sebgroup/extract';
+import '@sebgroup/green-core/react';
 import { Group } from '../group/group.js';
 import '../../formItem/formItem.js';
 import '@lit/react';

package/src/lib/form/buttonGroup/index.js

@@ -6,6 +6,7 @@ import 'react';
 import 'classnames';
 import '../button/button.js';
 import '@sebgroup/extract';
+import '@sebgroup/green-core/react';
 import '../group/group.js';
 import '../../formItem/formItem.js';
 import '@lit/react';

package/src/lib/form/checkbox/checkbox.js

@@ -4,6 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import classNames from 'classnames';
 import { randomId, validateClassName } from '@sebgroup/extract';
+import { IconTriangleExclamation } from '@sebgroup/green-core/react';
 
 var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
   var ariaDescribedBy = _a['aria-describedby'],
@@ -38,10 +39,17 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
         required: required,
         ref: ref
       }, props)), jsx("i", {})]
-    }), validator && jsx("span", {
+    }), validator && jsxs("span", {
       className: "form-info",
       id: "".concat(uuid, "_message"),
-      children: validator.message
+      style: {
+        display: 'flex',
+        gap: '0.25rem'
+      },
+      children: [jsx(IconTriangleExclamation, {
+        size: "16px",
+        margin: "2xs 0 0 0"
+      }), validator.message]
     })]
   });
 });

package/src/lib/form/checkbox/index.js

@@ -5,3 +5,4 @@ import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '@sebgroup/extract';
+import '@sebgroup/green-core/react';

package/src/lib/form/index.js

@@ -16,6 +16,7 @@ import 'react';
 import 'classnames';
 import '../../../_rollupPluginBabelHelpers.js';
 import '@sebgroup/extract';
+import '@sebgroup/green-core/react';
 import '../formItem/formItem.js';
 import '@lit/react';
 import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';

package/src/lib/form/input/index.js

@@ -13,6 +13,7 @@ import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
 import '@sebgroup/green-core/scoping';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
+import '@sebgroup/green-core/react';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';
 import '../group/group.js';

package/src/lib/form/input/input.js

@@ -13,6 +13,7 @@ import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
 import '@sebgroup/green-core/scoping';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
+import '@sebgroup/green-core/react';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';
 import '../useInput.js';

package/src/lib/form/radioButton/index.js

@@ -13,5 +13,6 @@ import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
 import '@sebgroup/green-core/scoping';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
+import '@sebgroup/green-core/react';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';

package/src/lib/form/radioButton/radioGroup.js

@@ -10,6 +10,7 @@ import '@sebgroup/green-core/scoping';
 import '../../../../_tslib.js';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
+import '@sebgroup/green-core/react';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';
 

package/src/lib/form/textarea/index.js

@@ -11,5 +11,6 @@ import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
 import '@sebgroup/green-core/scoping';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
+import '@sebgroup/green-core/react';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';

package/src/lib/form/textarea/textarea.js

@@ -10,6 +10,7 @@ import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
 import '@sebgroup/green-core/scoping';
 import '../iconButton/iconButton.js';
 import '../button/button.js';
+import '@sebgroup/green-core/react';
 import '../../icons/times.js';
 import '../../icons/infoCircle.js';
 

package/src/lib/formItem/formItem.js

@@ -8,6 +8,7 @@ import { IconTriangleExclamation } from '@sebgroup/green-core/components/icon/ic
 import { getScopedTagName } from '@sebgroup/green-core/scoping';
 import '../../../_tslib.js';
 import { IconButton } from '../form/iconButton/iconButton.js';
+import '@sebgroup/green-core/react';
 import { Times } from '../icons/times.js';
 import { InfoCircle } from '../icons/infoCircle.js';
 import '../form/button/button.js';

package/src/lib/formItem/index.js

@@ -10,5 +10,6 @@ import '@sebgroup/green-core/scoping';
 import '../../../_tslib.js';
 import '../form/iconButton/iconButton.js';
 import '../form/button/button.js';
+import '@sebgroup/green-core/react';
 import '../icons/times.js';
 import '../icons/infoCircle.js';

package/src/lib/select/index.js

@@ -11,6 +11,7 @@ import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
 import '@sebgroup/green-core/scoping';
 import '../form/iconButton/iconButton.js';
 import '../form/button/button.js';
+import '@sebgroup/green-core/react';
 import '../icons/times.js';
 import '../icons/infoCircle.js';
 import '../icons/chevronDown.js';

package/src/lib/select/select.js

@@ -11,6 +11,7 @@ import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
 import '@sebgroup/green-core/scoping';
 import '../form/iconButton/iconButton.js';
 import '../form/button/button.js';
+import '@sebgroup/green-core/react';
 import '../icons/times.js';
 import '../icons/infoCircle.js';