@x15ventures/x15-ui-library 3.14.0 → 3.15.1

package/dist/cjs/autoGenerated/libraryThemes.js

@@ -17,8 +17,8 @@ const libraryThemes = exports.libraryThemes = {
       "map": "index.min.css.map"
     },
     "versioned": {
-      "css": "index.min.3.14.0.css",
-      "map": "index.min.3.14.0.css.map"
+      "css": "index.min.3.15.1.css",
+      "map": "index.min.3.15.1.css.map"
     }
   },
   "cba": {
@@ -32,8 +32,8 @@ const libraryThemes = exports.libraryThemes = {
       "map": "cba.min.css.map"
     },
     "versioned": {
-      "css": "cba.min.3.14.0.css",
-      "map": "cba.min.3.14.0.css.map"
+      "css": "cba.min.3.15.1.css",
+      "map": "cba.min.3.15.1.css.map"
     }
   },
   "creditSavvy": {
@@ -47,8 +47,8 @@ const libraryThemes = exports.libraryThemes = {
       "map": "creditSavvy.min.css.map"
     },
     "versioned": {
-      "css": "creditSavvy.min.3.14.0.css",
-      "map": "creditSavvy.min.3.14.0.css.map"
+      "css": "creditSavvy.min.3.15.1.css",
+      "map": "creditSavvy.min.3.15.1.css.map"
     }
   },
   "doshii": {
@@ -62,8 +62,8 @@ const libraryThemes = exports.libraryThemes = {
       "map": "doshii.min.css.map"
     },
     "versioned": {
-      "css": "doshii.min.3.14.0.css",
-      "map": "doshii.min.3.14.0.css.map"
+      "css": "doshii.min.3.15.1.css",
+      "map": "doshii.min.3.15.1.css.map"
     }
   },
   "homeIn": {
@@ -77,8 +77,8 @@ const libraryThemes = exports.libraryThemes = {
       "map": "homeIn.min.css.map"
     },
     "versioned": {
-      "css": "homeIn.min.3.14.0.css",
-      "map": "homeIn.min.3.14.0.css.map"
+      "css": "homeIn.min.3.15.1.css",
+      "map": "homeIn.min.3.15.1.css.map"
     }
   },
   "x15Core": {
@@ -92,8 +92,8 @@ const libraryThemes = exports.libraryThemes = {
       "map": "x15Core.min.css.map"
     },
     "versioned": {
-      "css": "x15Core.min.3.14.0.css",
-      "map": "x15Core.min.3.14.0.css.map"
+      "css": "x15Core.min.3.15.1.css",
+      "map": "x15Core.min.3.15.1.css.map"
     }
   }
 };

package/dist/cjs/autoGenerated/libraryThemes.js.map

@@ -1 +1 @@
-{"version":3,"file":"libraryThemes.js","names":["libraryThemes","exports","_default","default"],"sources":["../../../src/autoGenerated/libraryThemes.ts"],"sourcesContent":["/* eslint-disable */\nexport const libraryThemes = {\n  \"base\": {\n    \"buildPath\": \"styles\",\n    \"dev\": {\n      \"css\": \"index.css\",\n      \"map\": \"index.css.map\"\n    },\n    \"min\": {\n      \"css\": \"index.min.css\",\n      \"map\": \"index.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"index.min.3.14.0.css\",\n      \"map\": \"index.min.3.14.0.css.map\"\n    }\n  },\n  \"cba\": {\n    \"buildPath\": \"styles/themes/cba\",\n    \"dev\": {\n      \"css\": \"cba.css\",\n      \"map\": \"cba.css.map\"\n    },\n    \"min\": {\n      \"css\": \"cba.min.css\",\n      \"map\": \"cba.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"cba.min.3.14.0.css\",\n      \"map\": \"cba.min.3.14.0.css.map\"\n    }\n  },\n  \"creditSavvy\": {\n    \"buildPath\": \"styles/themes/creditSavvy\",\n    \"dev\": {\n      \"css\": \"creditSavvy.css\",\n      \"map\": \"creditSavvy.css.map\"\n    },\n    \"min\": {\n      \"css\": \"creditSavvy.min.css\",\n      \"map\": \"creditSavvy.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"creditSavvy.min.3.14.0.css\",\n      \"map\": \"creditSavvy.min.3.14.0.css.map\"\n    }\n  },\n  \"doshii\": {\n    \"buildPath\": \"styles/themes/doshii\",\n    \"dev\": {\n      \"css\": \"doshii.css\",\n      \"map\": \"doshii.css.map\"\n    },\n    \"min\": {\n      \"css\": \"doshii.min.css\",\n      \"map\": \"doshii.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"doshii.min.3.14.0.css\",\n      \"map\": \"doshii.min.3.14.0.css.map\"\n    }\n  },\n  \"homeIn\": {\n    \"buildPath\": \"styles/themes/homeIn\",\n    \"dev\": {\n      \"css\": \"homeIn.css\",\n      \"map\": \"homeIn.css.map\"\n    },\n    \"min\": {\n      \"css\": \"homeIn.min.css\",\n      \"map\": \"homeIn.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"homeIn.min.3.14.0.css\",\n      \"map\": \"homeIn.min.3.14.0.css.map\"\n    }\n  },\n  \"x15Core\": {\n    \"buildPath\": \"styles/themes/x15Core\",\n    \"dev\": {\n      \"css\": \"x15Core.css\",\n      \"map\": \"x15Core.css.map\"\n    },\n    \"min\": {\n      \"css\": \"x15Core.min.css\",\n      \"map\": \"x15Core.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"x15Core.min.3.14.0.css\",\n      \"map\": \"x15Core.min.3.14.0.css.map\"\n    }\n  }\n}; export default libraryThemes;"],"mappings":";;;;;;AAAA;AACO,MAAMA,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG;EAC3B,MAAM,EAAE;IACN,WAAW,EAAE,QAAQ;IACrB,KAAK,EAAE;MACL,KAAK,EAAE,WAAW;MAClB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,eAAe;MACtB,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,sBAAsB;MAC7B,KAAK,EAAE;IACT;EACF,CAAC;EACD,KAAK,EAAE;IACL,WAAW,EAAE,mBAAmB;IAChC,KAAK,EAAE;MACL,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,aAAa;MACpB,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,oBAAoB;MAC3B,KAAK,EAAE;IACT;EACF,CAAC;EACD,aAAa,EAAE;IACb,WAAW,EAAE,2BAA2B;IACxC,KAAK,EAAE;MACL,KAAK,EAAE,iBAAiB;MACxB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,qBAAqB;MAC5B,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,4BAA4B;MACnC,KAAK,EAAE;IACT;EACF,CAAC;EACD,QAAQ,EAAE;IACR,WAAW,EAAE,sBAAsB;IACnC,KAAK,EAAE;MACL,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,gBAAgB;MACvB,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,uBAAuB;MAC9B,KAAK,EAAE;IACT;EACF,CAAC;EACD,QAAQ,EAAE;IACR,WAAW,EAAE,sBAAsB;IACnC,KAAK,EAAE;MACL,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,gBAAgB;MACvB,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,uBAAuB;MAC9B,KAAK,EAAE;IACT;EACF,CAAC;EACD,SAAS,EAAE;IACT,WAAW,EAAE,uBAAuB;IACpC,KAAK,EAAE;MACL,KAAK,EAAE,aAAa;MACpB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,iBAAiB;MACxB,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,wBAAwB;MAC/B,KAAK,EAAE;IACT;EACF;AACF,CAAC;AAAC,IAAAE,QAAA,GAAAD,OAAA,CAAAE,OAAA,GAAgBH,aAAa","ignoreList":[]}
+{"version":3,"file":"libraryThemes.js","names":["libraryThemes","exports","_default","default"],"sources":["../../../src/autoGenerated/libraryThemes.ts"],"sourcesContent":["/* eslint-disable */\nexport const libraryThemes = {\n  \"base\": {\n    \"buildPath\": \"styles\",\n    \"dev\": {\n      \"css\": \"index.css\",\n      \"map\": \"index.css.map\"\n    },\n    \"min\": {\n      \"css\": \"index.min.css\",\n      \"map\": \"index.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"index.min.3.15.1.css\",\n      \"map\": \"index.min.3.15.1.css.map\"\n    }\n  },\n  \"cba\": {\n    \"buildPath\": \"styles/themes/cba\",\n    \"dev\": {\n      \"css\": \"cba.css\",\n      \"map\": \"cba.css.map\"\n    },\n    \"min\": {\n      \"css\": \"cba.min.css\",\n      \"map\": \"cba.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"cba.min.3.15.1.css\",\n      \"map\": \"cba.min.3.15.1.css.map\"\n    }\n  },\n  \"creditSavvy\": {\n    \"buildPath\": \"styles/themes/creditSavvy\",\n    \"dev\": {\n      \"css\": \"creditSavvy.css\",\n      \"map\": \"creditSavvy.css.map\"\n    },\n    \"min\": {\n      \"css\": \"creditSavvy.min.css\",\n      \"map\": \"creditSavvy.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"creditSavvy.min.3.15.1.css\",\n      \"map\": \"creditSavvy.min.3.15.1.css.map\"\n    }\n  },\n  \"doshii\": {\n    \"buildPath\": \"styles/themes/doshii\",\n    \"dev\": {\n      \"css\": \"doshii.css\",\n      \"map\": \"doshii.css.map\"\n    },\n    \"min\": {\n      \"css\": \"doshii.min.css\",\n      \"map\": \"doshii.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"doshii.min.3.15.1.css\",\n      \"map\": \"doshii.min.3.15.1.css.map\"\n    }\n  },\n  \"homeIn\": {\n    \"buildPath\": \"styles/themes/homeIn\",\n    \"dev\": {\n      \"css\": \"homeIn.css\",\n      \"map\": \"homeIn.css.map\"\n    },\n    \"min\": {\n      \"css\": \"homeIn.min.css\",\n      \"map\": \"homeIn.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"homeIn.min.3.15.1.css\",\n      \"map\": \"homeIn.min.3.15.1.css.map\"\n    }\n  },\n  \"x15Core\": {\n    \"buildPath\": \"styles/themes/x15Core\",\n    \"dev\": {\n      \"css\": \"x15Core.css\",\n      \"map\": \"x15Core.css.map\"\n    },\n    \"min\": {\n      \"css\": \"x15Core.min.css\",\n      \"map\": \"x15Core.min.css.map\"\n    },\n    \"versioned\": {\n      \"css\": \"x15Core.min.3.15.1.css\",\n      \"map\": \"x15Core.min.3.15.1.css.map\"\n    }\n  }\n}; export default libraryThemes;"],"mappings":";;;;;;AAAA;AACO,MAAMA,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG;EAC3B,MAAM,EAAE;IACN,WAAW,EAAE,QAAQ;IACrB,KAAK,EAAE;MACL,KAAK,EAAE,WAAW;MAClB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,eAAe;MACtB,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,sBAAsB;MAC7B,KAAK,EAAE;IACT;EACF,CAAC;EACD,KAAK,EAAE;IACL,WAAW,EAAE,mBAAmB;IAChC,KAAK,EAAE;MACL,KAAK,EAAE,SAAS;MAChB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,aAAa;MACpB,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,oBAAoB;MAC3B,KAAK,EAAE;IACT;EACF,CAAC;EACD,aAAa,EAAE;IACb,WAAW,EAAE,2BAA2B;IACxC,KAAK,EAAE;MACL,KAAK,EAAE,iBAAiB;MACxB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,qBAAqB;MAC5B,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,4BAA4B;MACnC,KAAK,EAAE;IACT;EACF,CAAC;EACD,QAAQ,EAAE;IACR,WAAW,EAAE,sBAAsB;IACnC,KAAK,EAAE;MACL,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,gBAAgB;MACvB,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,uBAAuB;MAC9B,KAAK,EAAE;IACT;EACF,CAAC;EACD,QAAQ,EAAE;IACR,WAAW,EAAE,sBAAsB;IACnC,KAAK,EAAE;MACL,KAAK,EAAE,YAAY;MACnB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,gBAAgB;MACvB,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,uBAAuB;MAC9B,KAAK,EAAE;IACT;EACF,CAAC;EACD,SAAS,EAAE;IACT,WAAW,EAAE,uBAAuB;IACpC,KAAK,EAAE;MACL,KAAK,EAAE,aAAa;MACpB,KAAK,EAAE;IACT,CAAC;IACD,KAAK,EAAE;MACL,KAAK,EAAE,iBAAiB;MACxB,KAAK,EAAE;IACT,CAAC;IACD,WAAW,EAAE;MACX,KAAK,EAAE,wBAAwB;MAC/B,KAAK,EAAE;IACT;EACF;AACF,CAAC;AAAC,IAAAE,QAAA,GAAAD,OAAA,CAAAE,OAAA,GAAgBH,aAAa","ignoreList":[]}

package/dist/cjs/autoGenerated/libraryThemes.json

@@ -10,8 +10,8 @@
       "map": "index.min.css.map"
     },
     "versioned": {
-      "css": "base.min.3.14.0.css",
-      "map": "base.min.3.14.0.css.map"
+      "css": "base.min.3.15.1.css",
+      "map": "base.min.3.15.1.css.map"
     }
   },
   "cba": {
@@ -25,8 +25,8 @@
       "map": "cba.min.css.map"
     },
     "versioned": {
-      "css": "cba.min.3.14.0.css",
-      "map": "cba.min.3.14.0.css.map"
+      "css": "cba.min.3.15.1.css",
+      "map": "cba.min.3.15.1.css.map"
     }
   },
   "creditSavvy": {
@@ -40,8 +40,8 @@
       "map": "creditSavvy.min.css.map"
     },
     "versioned": {
-      "css": "creditSavvy.min.3.14.0.css",
-      "map": "creditSavvy.min.3.14.0.css.map"
+      "css": "creditSavvy.min.3.15.1.css",
+      "map": "creditSavvy.min.3.15.1.css.map"
     }
   },
   "doshii": {
@@ -55,8 +55,8 @@
       "map": "doshii.min.css.map"
     },
     "versioned": {
-      "css": "doshii.min.3.14.0.css",
-      "map": "doshii.min.3.14.0.css.map"
+      "css": "doshii.min.3.15.1.css",
+      "map": "doshii.min.3.15.1.css.map"
     }
   },
   "homeIn": {
@@ -70,8 +70,8 @@
       "map": "homeIn.min.css.map"
     },
     "versioned": {
-      "css": "homeIn.min.3.14.0.css",
-      "map": "homeIn.min.3.14.0.css.map"
+      "css": "homeIn.min.3.15.1.css",
+      "map": "homeIn.min.3.15.1.css.map"
     }
   },
   "x15Core": {
@@ -85,8 +85,8 @@
       "map": "x15Core.min.css.map"
     },
     "versioned": {
-      "css": "x15Core.min.3.14.0.css",
-      "map": "x15Core.min.3.14.0.css.map"
+      "css": "x15Core.min.3.15.1.css",
+      "map": "x15Core.min.3.15.1.css.map"
     }
   }
 }

package/dist/cjs/components/design/dialog/Dialog.js

@@ -114,7 +114,7 @@ const Dialog = ({
   }, /*#__PURE__*/_react.default.createElement("section", {
     className: `dialogContent ${customCssClasses?.content || ''}`,
     tabIndex: 0
-  }, children), /*#__PURE__*/_react.default.createElement("div", {
+  }, children), footer && /*#__PURE__*/_react.default.createElement("div", {
     className: `dialogFooter ${customCssClasses?.footer || ''}`,
     tabIndex: 0
   }, typeof footer === 'string' ? /*#__PURE__*/_react.default.createElement("span", {

package/dist/cjs/components/design/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["Object","defineProperty","exports","value","Dialog","_react","_interopRequireWildcard","require","_index","_SvgIcon","_tooltip","_DialogOverlay","_FocusTrap","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","id","size","position","animation","scrollBehaviour","onClose","open","overlay","header","footer","children","screenReaderInstruction","customCssClasses","showFocusOutline","isOpen","setIsOpen","useState","dialogElement","useRef","dialogHeaderElement","TOGGLE_TEXT","dialogCloseButton","createOverlay","removeOverlay","useDialogOverlay","useFocusTrap","HandleClose","dialogCssClass","useMemo","dialog","useCallback","HandleOpen","dialogOverlay","showOverlay","useEffect","current","focus","DialogCloseButton","createElement","ref","className","title","type","onClick","SvgIcon","svgDefinition","xmarkLarge","role","tabIndex","EllipsisTooltip","lineClamp","tooltipProps","customCssClass","content"],"sources":["../../../../../src/components/design/dialog/Dialog.tsx"],"sourcesContent":["/* eslint-disable jsxA11y/no-noninteractive-tabindex */\n'use client';\n\nimport React, { ReactNode, useCallback, useEffect, useRef, useState, useMemo } from 'react';\nimport { xmarkLarge } from '@x15ventures/x15-ui-library-icons/iconDefinitions/index';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { EllipsisTooltip } from '../tooltip';\nimport { GenericFunction } from '../../../interfaces';\nimport { useDialogOverlay } from '../../../hooks/DialogOverlay';\nimport { useFocusTrap } from '../../../hooks/FocusTrap';\n\nimport './dialog.scss';\n\nexport interface DialogInterface {\n  id: string;\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'dynamic';\n  position?: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';\n  animation?: 'none' | 'grow' | 'reveal';\n  scrollBehaviour?: 'contentOnly' | 'contentAndFooter' | 'all';\n  onClose: GenericFunction;\n  open?: boolean;\n  overlay?: {\n    parentNode?: HTMLElement;\n    customCssClass?: string;\n  };\n  header: string | ReactNode;\n  footer?: string | ReactNode;\n  children: ReactNode;\n  screenReaderInstruction?: string;\n  showFocusOutline?: boolean;\n  customCssClasses?: {\n    dialog?: string;\n    content?: string;\n    header?: string;\n    footer?: string;\n  };\n}\n\nexport const Dialog: React.FC<DialogInterface> = ({\n  id,\n  size = 'm',\n  position = 'center',\n  animation = 'none',\n  scrollBehaviour = 'contentOnly',\n  onClose = () => {},\n  open = false,\n  overlay,\n  header,\n  footer,\n  children,\n  screenReaderInstruction = `The following content is in a dialog. \n      You can press the Tab key to navigate through the elements, and press Escape to close the dialog.`,\n  customCssClasses,\n  showFocusOutline = false,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(open);\n  const dialogElement = useRef<HTMLDivElement>(null);\n  const dialogHeaderElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = 'Open and close dialog';\n  const dialogCloseButton = useRef(null);\n\n  const { createOverlay, removeOverlay } = useDialogOverlay(overlay || {});\n  useFocusTrap(dialogElement, () => HandleClose());\n\n  const dialogCssClass = useMemo(() => {\n    return `dialog \n    ${ isOpen || open ? 'isOpen' : '' }\n    dialogSize_${ size }\n    dialogPosition_${ position }\n    dialogAnimation_${ animation }\n    dialogScrollBehaviour_${ scrollBehaviour }\n    ${ size === 'dynamic' ? 'dialogSize_dynamic' : '' }\n    ${ customCssClasses?.dialog || '' }\n    ${ showFocusOutline ? 'showFocusOutline' : '' }`;\n  }, [open, isOpen, size, position, animation, scrollBehaviour, customCssClasses, showFocusOutline]);\n\n  const HandleClose = useCallback(() => {\n    setIsOpen(false);\n    removeOverlay();\n    onClose();\n  }, [onClose, removeOverlay]);\n\n  const HandleOpen = useCallback(() => {\n    const dialogOverlay = createOverlay();\n    dialogOverlay.showOverlay();\n  }, [createOverlay]);\n\n  useEffect(() => {\n    if (open || isOpen) {\n      if (dialogHeaderElement.current) {\n        dialogHeaderElement.current.focus();\n      }\n      HandleOpen();\n    } else {\n      HandleClose();\n    }\n  }, [customCssClasses, createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);\n\n  const DialogCloseButton: React.FC = () => (\n    <button\n      ref={ dialogCloseButton }\n      className=\"dialogClose\"\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => HandleClose() }\n    >\n      <SvgIcon svgDefinition={ xmarkLarge } />\n      <span className=\"sr-only\">Close dialog</span>\n    </button>\n  );\n\n  return (\n    <div\n      className={ dialogCssClass }\n      role=\"dialog\"\n      aria-labelledby={ `dialogHeader_${ id }` }\n      tabIndex={ 0 }\n      aria-describedby={ `dialogSRInstruction_${ id }` }\n      aria-modal=\"true\"\n      ref={ dialogElement }\n    >\n      <div className=\"dialogFullScroller\">\n        <div\n          ref={ dialogHeaderElement }\n          id={ `dialogHeader_${ id }` }\n          className={ `dialogHeader ${ customCssClasses?.header || '' }` }\n          tabIndex={ 0 }\n        >\n          <span id={ `dialogSRInstruction_${ id }` } className=\"sr-only\">\n            { screenReaderInstruction }\n          </span>\n          <div className=\"dialogHeaderTextWrapper\">\n            <EllipsisTooltip \n              lineClamp={ 2 } \n              tooltipProps={ { \n                customCssClass: 'shiftDown large dialogEllipsisTooltip'\n              } }\n            >\n              { typeof header === 'string' ? <span className=\"dialogHeaderText\">{ header }</span> : header }\n            </EllipsisTooltip>\n          </div>\n          <DialogCloseButton />\n        </div>\n\n        <div className=\"dialogContentAndFooterScroller\">\n          <section className={ `dialogContent ${ customCssClasses?.content || '' }` } tabIndex={ 0 }>\n            { children }\n          </section>\n\n          <div className={ `dialogFooter ${ customCssClasses?.footer || '' }` } tabIndex={ 0 }>\n            { typeof footer === 'string' ? <span className=\"dialogFooterText\">{ footer }</span> : footer }\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Dialog.js","names":["Object","defineProperty","exports","value","Dialog","_react","_interopRequireWildcard","require","_index","_SvgIcon","_tooltip","_DialogOverlay","_FocusTrap","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","id","size","position","animation","scrollBehaviour","onClose","open","overlay","header","footer","children","screenReaderInstruction","customCssClasses","showFocusOutline","isOpen","setIsOpen","useState","dialogElement","useRef","dialogHeaderElement","TOGGLE_TEXT","dialogCloseButton","createOverlay","removeOverlay","useDialogOverlay","useFocusTrap","HandleClose","dialogCssClass","useMemo","dialog","useCallback","HandleOpen","dialogOverlay","showOverlay","useEffect","current","focus","DialogCloseButton","createElement","ref","className","title","type","onClick","SvgIcon","svgDefinition","xmarkLarge","role","tabIndex","EllipsisTooltip","lineClamp","tooltipProps","customCssClass","content"],"sources":["../../../../../src/components/design/dialog/Dialog.tsx"],"sourcesContent":["/* eslint-disable jsxA11y/no-noninteractive-tabindex */\n'use client';\n\nimport React, { ReactNode, useCallback, useEffect, useRef, useState, useMemo } from 'react';\nimport { xmarkLarge } from '@x15ventures/x15-ui-library-icons/iconDefinitions/index';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { EllipsisTooltip } from '../tooltip';\nimport { GenericFunction } from '../../../interfaces';\nimport { useDialogOverlay } from '../../../hooks/DialogOverlay';\nimport { useFocusTrap } from '../../../hooks/FocusTrap';\n\nimport './dialog.scss';\n\nexport interface DialogInterface {\n  id: string;\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'dynamic';\n  position?: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';\n  animation?: 'none' | 'grow' | 'reveal';\n  scrollBehaviour?: 'contentOnly' | 'contentAndFooter' | 'all';\n  onClose: GenericFunction;\n  open?: boolean;\n  overlay?: {\n    parentNode?: HTMLElement;\n    customCssClass?: string;\n  };\n  header: string | ReactNode;\n  footer?: string | ReactNode;\n  children: ReactNode;\n  screenReaderInstruction?: string;\n  showFocusOutline?: boolean;\n  customCssClasses?: {\n    dialog?: string;\n    content?: string;\n    header?: string;\n    footer?: string;\n  };\n}\n\nexport const Dialog: React.FC<DialogInterface> = ({\n  id,\n  size = 'm',\n  position = 'center',\n  animation = 'none',\n  scrollBehaviour = 'contentOnly',\n  onClose = () => {},\n  open = false,\n  overlay,\n  header,\n  footer,\n  children,\n  screenReaderInstruction = `The following content is in a dialog. \n      You can press the Tab key to navigate through the elements, and press Escape to close the dialog.`,\n  customCssClasses,\n  showFocusOutline = false,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(open);\n  const dialogElement = useRef<HTMLDivElement>(null);\n  const dialogHeaderElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = 'Open and close dialog';\n  const dialogCloseButton = useRef(null);\n\n  const { createOverlay, removeOverlay } = useDialogOverlay(overlay || {});\n  useFocusTrap(dialogElement, () => HandleClose());\n\n  const dialogCssClass = useMemo(() => {\n    return `dialog \n    ${ isOpen || open ? 'isOpen' : '' }\n    dialogSize_${ size }\n    dialogPosition_${ position }\n    dialogAnimation_${ animation }\n    dialogScrollBehaviour_${ scrollBehaviour }\n    ${ size === 'dynamic' ? 'dialogSize_dynamic' : '' }\n    ${ customCssClasses?.dialog || '' }\n    ${ showFocusOutline ? 'showFocusOutline' : '' }`;\n  }, [open, isOpen, size, position, animation, scrollBehaviour, customCssClasses, showFocusOutline]);\n\n  const HandleClose = useCallback(() => {\n    setIsOpen(false);\n    removeOverlay();\n    onClose();\n  }, [onClose, removeOverlay]);\n\n  const HandleOpen = useCallback(() => {\n    const dialogOverlay = createOverlay();\n    dialogOverlay.showOverlay();\n  }, [createOverlay]);\n\n  useEffect(() => {\n    if (open || isOpen) {\n      if (dialogHeaderElement.current) {\n        dialogHeaderElement.current.focus();\n      }\n      HandleOpen();\n    } else {\n      HandleClose();\n    }\n  }, [customCssClasses, createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);\n\n  const DialogCloseButton: React.FC = () => (\n    <button\n      ref={ dialogCloseButton }\n      className=\"dialogClose\"\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => HandleClose() }\n    >\n      <SvgIcon svgDefinition={ xmarkLarge } />\n      <span className=\"sr-only\">Close dialog</span>\n    </button>\n  );\n\n  return (\n    <div\n      className={ dialogCssClass }\n      role=\"dialog\"\n      aria-labelledby={ `dialogHeader_${ id }` }\n      tabIndex={ 0 }\n      aria-describedby={ `dialogSRInstruction_${ id }` }\n      aria-modal=\"true\"\n      ref={ dialogElement }\n    >\n      <div className=\"dialogFullScroller\">\n        <div\n          ref={ dialogHeaderElement }\n          id={ `dialogHeader_${ id }` }\n          className={ `dialogHeader ${ customCssClasses?.header || '' }` }\n          tabIndex={ 0 }\n        >\n          <span id={ `dialogSRInstruction_${ id }` } className=\"sr-only\">\n            { screenReaderInstruction }\n          </span>\n          <div className=\"dialogHeaderTextWrapper\">\n            <EllipsisTooltip \n              lineClamp={ 2 } \n              tooltipProps={ { \n                customCssClass: 'shiftDown large dialogEllipsisTooltip'\n              } }\n            >\n              { typeof header === 'string' ? <span className=\"dialogHeaderText\">{ header }</span> : header }\n            </EllipsisTooltip>\n          </div>\n          <DialogCloseButton />\n        </div>\n\n        <div className=\"dialogContentAndFooterScroller\">\n          <section className={ `dialogContent ${ customCssClasses?.content || '' }` } tabIndex={ 0 }>\n            { children }\n          </section>\n\n          {\n            footer && (\n              <div className={ `dialogFooter ${ customCssClasses?.footer || '' }` } tabIndex={ 0 }>\n                { typeof footer === 'string' ? <span className=\"dialogFooterText\">{ footer }</span> : footer }\n              </div>\n            )\n          }\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/design/headerBar/HeaderBar.js

@@ -19,6 +19,7 @@ const HeaderBar = ({
   rightIcon,
   buttons,
   notificationIcon,
+  headingLevel = 2,
   children
 }) => {
   const headerCssClass = `headerBar 
@@ -26,9 +27,10 @@ const HeaderBar = ({
     ${rightIcon ? 'withRightIcon' : ''}
     ${notificationIcon ? 'withNotification' : ''}
     `;
+  const Heading = `h${headingLevel}`;
   return /*#__PURE__*/_react.default.createElement("header", {
     className: headerCssClass
-  }, leftIcon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, leftIcon), text && /*#__PURE__*/_react.default.createElement("h2", null, text), children, buttons && /*#__PURE__*/_react.default.createElement("div", {
+  }, leftIcon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, leftIcon), text && /*#__PURE__*/_react.default.createElement(Heading, null, text), children, buttons && /*#__PURE__*/_react.default.createElement("div", {
     className: "headerButtons"
   }, buttons.map(button => {
     if (button.kind === 'notifications') {

package/dist/cjs/components/design/headerBar/HeaderBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderBar.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","HeaderBar","_extends2","_react","_Icon","_NotificationIcon","_SimpleButton","_NotificationsButton","text","leftIcon","rightIcon","buttons","notificationIcon","children","headerCssClass","default","createElement","className","Icon","map","button","kind","NotificationsButton","key","id","SimpleButton","NotificationIcon"],"sources":["../../../../../src/components/design/headerBar/HeaderBar.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { HeaderTextInterface } from '../../../interfaces/headerText.interface';\nimport { Icon } from '../icons/basicIcon/Icon';\nimport { NotificationIcon } from '../icons/notificationIcon/NotificationIcon';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { NotificationsButton } from '../../form/buttons/notificationsButton/NotificationsButton';\nimport { ButtonProps } from '../../form/buttons/button.interface';\n\nimport './headerBar.scss';\n\nexport const HeaderBar: React.FC<HeaderTextInterface> = (\n  {\n    text,\n    leftIcon,\n    rightIcon,\n    buttons,\n    notificationIcon,\n    children\n  }\n) => {\n  const headerCssClass = `headerBar \n    ${ leftIcon ? 'withLeftIcon' : '' }\n    ${ rightIcon ? 'withRightIcon' : '' }\n    ${ notificationIcon ? 'withNotification' : '' }\n    `;\n\n  return (\n    <header className={ headerCssClass }>\n      {\n        leftIcon && <Icon { ...leftIcon } />\n      }\n\n      {\n        text && <h2>{ text }</h2>\n      }\n\n      { children }\n\n      {\n        buttons\n        && (\n          <div className=\"headerButtons\">\n            {\n              buttons.map((button) => {\n                if (button.kind === 'notifications') {\n                  return <NotificationsButton key={ button.id } { ...button } />;\n                }\n                return <SimpleButton key={ button.id } { ...(button as ButtonProps) } />;\n              })\n            }\n          </div>\n        )\n      }\n\n      {\n        rightIcon && <Icon { ...rightIcon } />\n      }\n\n      {\n        notificationIcon && <NotificationIcon { ...notificationIcon } />\n      }\n    </header>\n  );\n};\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,SAAA;AAAA,IAAAC,SAAA,GAAAP,sBAAA,CAAAC,OAAA;AAEb,IAAAO,MAAA,GAAAR,sBAAA,CAAAC,OAAA;AAEA,IAAAQ,KAAA,GAAAR,OAAA;AACA,IAAAS,iBAAA,GAAAT,OAAA;AACA,IAAAU,aAAA,GAAAV,OAAA;AACA,IAAAW,oBAAA,GAAAX,OAAA;AAGAA,OAAA;AAEO,MAAMK,SAAwC,GAAGA,CACtD;EACEO,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,gBAAgB;EAChBC;AACF,CAAC,KACE;EACH,MAAMC,cAAc,GAAG;AACzB,MAAOL,QAAQ,GAAG,cAAc,GAAG,EAAE;AACrC,MAAOC,SAAS,GAAG,eAAe,GAAG,EAAE;AACvC,MAAOE,gBAAgB,GAAG,kBAAkB,GAAG,EAAE;AACjD,KAAK;EAEH,oBACET,MAAA,CAAAY,OAAA,CAAAC,aAAA;IAAQC,SAAS,EAAGH;EAAgB,GAEhCL,QAAQ,iBAAIN,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACZ,KAAA,CAAAc,IAAI,EAAMT,QAAY,CAAC,EAIpCD,IAAI,iBAAIL,MAAA,CAAAY,OAAA,CAAAC,aAAA,aAAMR,IAAU,CAAC,EAGzBK,QAAQ,EAGRF,OAAO,iBAELR,MAAA,CAAAY,OAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAe,GAE1BN,OAAO,CAACQ,GAAG,CAAEC,MAAM,IAAK;IACtB,IAAIA,MAAM,CAACC,IAAI,KAAK,eAAe,EAAE;MACnC,oBAAOlB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,oBAAA,CAAAe,mBAAmB,MAAApB,SAAA,CAAAa,OAAA;QAACQ,GAAG,EAAGH,MAAM,CAACI;MAAI,GAAMJ,MAAM,CAAI,CAAC;IAChE;IACA,oBAAOjB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACV,aAAA,CAAAmB,YAAY,MAAAvB,SAAA,CAAAa,OAAA;MAACQ,GAAG,EAAGH,MAAM,CAACI;IAAI,GAAOJ,MAAM,CAAoB,CAAC;EAC1E,CAAC,CAEA,CACN,EAIDV,SAAS,iBAAIP,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACZ,KAAA,CAAAc,IAAI,EAAMR,SAAa,CAAC,EAItCE,gBAAgB,iBAAIT,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACX,iBAAA,CAAAqB,gBAAgB,EAAMd,gBAAoB,CAE3D,CAAC;AAEb,CAAC;AAACb,OAAA,CAAAE,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"file":"HeaderBar.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","HeaderBar","_extends2","_react","_Icon","_NotificationIcon","_SimpleButton","_NotificationsButton","text","leftIcon","rightIcon","buttons","notificationIcon","headingLevel","children","headerCssClass","Heading","default","createElement","className","Icon","map","button","kind","NotificationsButton","key","id","SimpleButton","NotificationIcon"],"sources":["../../../../../src/components/design/headerBar/HeaderBar.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { HeaderTextInterface } from '../../../interfaces/headerText.interface';\nimport { Icon } from '../icons/basicIcon/Icon';\nimport { NotificationIcon } from '../icons/notificationIcon/NotificationIcon';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { NotificationsButton } from '../../form/buttons/notificationsButton/NotificationsButton';\nimport { ButtonProps } from '../../form/buttons/button.interface';\n\nimport './headerBar.scss';\n\ntype HeadingLevel = NonNullable<HeaderTextInterface['headingLevel']>;\ntype HeadingTag = `h${ HeadingLevel }`;\n\nexport const HeaderBar: React.FC<HeaderTextInterface> = (\n  {\n    text,\n    leftIcon,\n    rightIcon,\n    buttons,\n    notificationIcon,\n    headingLevel = 2,\n    children\n  }\n) => {\n  const headerCssClass = `headerBar \n    ${ leftIcon ? 'withLeftIcon' : '' }\n    ${ rightIcon ? 'withRightIcon' : '' }\n    ${ notificationIcon ? 'withNotification' : '' }\n    `;\n  const Heading: HeadingTag = `h${ headingLevel }`;\n\n  return (\n    <header className={ headerCssClass }>\n      {\n        leftIcon && <Icon { ...leftIcon } />\n      }\n\n      {\n        text && <Heading>{ text }</Heading>\n      }\n\n      { children }\n\n      {\n        buttons\n        && (\n          <div className=\"headerButtons\">\n            {\n              buttons.map((button) => {\n                if (button.kind === 'notifications') {\n                  return <NotificationsButton key={ button.id } { ...button } />;\n                }\n                return <SimpleButton key={ button.id } { ...(button as ButtonProps) } />;\n              })\n            }\n          </div>\n        )\n      }\n\n      {\n        rightIcon && <Icon { ...rightIcon } />\n      }\n\n      {\n        notificationIcon && <NotificationIcon { ...notificationIcon } />\n      }\n    </header>\n  );\n};\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,SAAA;AAAA,IAAAC,SAAA,GAAAP,sBAAA,CAAAC,OAAA;AAEb,IAAAO,MAAA,GAAAR,sBAAA,CAAAC,OAAA;AAEA,IAAAQ,KAAA,GAAAR,OAAA;AACA,IAAAS,iBAAA,GAAAT,OAAA;AACA,IAAAU,aAAA,GAAAV,OAAA;AACA,IAAAW,oBAAA,GAAAX,OAAA;AAGAA,OAAA;AAKO,MAAMK,SAAwC,GAAGA,CACtD;EACEO,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,gBAAgB;EAChBC,YAAY,GAAG,CAAC;EAChBC;AACF,CAAC,KACE;EACH,MAAMC,cAAc,GAAG;AACzB,MAAON,QAAQ,GAAG,cAAc,GAAG,EAAE;AACrC,MAAOC,SAAS,GAAG,eAAe,GAAG,EAAE;AACvC,MAAOE,gBAAgB,GAAG,kBAAkB,GAAG,EAAE;AACjD,KAAK;EACH,MAAMI,OAAmB,GAAG,IAAKH,YAAY,EAAG;EAEhD,oBACEV,MAAA,CAAAc,OAAA,CAAAC,aAAA;IAAQC,SAAS,EAAGJ;EAAgB,GAEhCN,QAAQ,iBAAIN,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACd,KAAA,CAAAgB,IAAI,EAAMX,QAAY,CAAC,EAIpCD,IAAI,iBAAIL,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACF,OAAO,QAAGR,IAAe,CAAC,EAGnCM,QAAQ,EAGRH,OAAO,iBAELR,MAAA,CAAAc,OAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAe,GAE1BR,OAAO,CAACU,GAAG,CAAEC,MAAM,IAAK;IACtB,IAAIA,MAAM,CAACC,IAAI,KAAK,eAAe,EAAE;MACnC,oBAAOpB,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACX,oBAAA,CAAAiB,mBAAmB,MAAAtB,SAAA,CAAAe,OAAA;QAACQ,GAAG,EAAGH,MAAM,CAACI;MAAI,GAAMJ,MAAM,CAAI,CAAC;IAChE;IACA,oBAAOnB,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACZ,aAAA,CAAAqB,YAAY,MAAAzB,SAAA,CAAAe,OAAA;MAACQ,GAAG,EAAGH,MAAM,CAACI;IAAI,GAAOJ,MAAM,CAAoB,CAAC;EAC1E,CAAC,CAEA,CACN,EAIDZ,SAAS,iBAAIP,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACd,KAAA,CAAAgB,IAAI,EAAMV,SAAa,CAAC,EAItCE,gBAAgB,iBAAIT,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACb,iBAAA,CAAAuB,gBAAgB,EAAMhB,gBAAoB,CAE3D,CAAC;AAEb,CAAC;AAACb,OAAA,CAAAE,SAAA,GAAAA,SAAA","ignoreList":[]}

package/dist/cjs/components/design/headerBar/headerBar.css

@@ -26,7 +26,12 @@
   right: 0;
   left: auto;
 }
-.headerBar h2 {
+.headerBar h1,
+.headerBar h2,
+.headerBar h3,
+.headerBar h4,
+.headerBar h5,
+.headerBar h6 {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

package/dist/cjs/components/design/skeleton/Skeleton.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Skeleton = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./skeleton.css");
+const toCssSize = value => typeof value === 'number' ? `${value}px` : value;
+const Skeleton = ({
+  variant = 'text',
+  width,
+  height,
+  lines = 1,
+  animation = 'wave',
+  appearance = 'subtle',
+  isLoaded = false,
+  children,
+  id,
+  customCssClass = ''
+}) => {
+  if (isLoaded) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  const rowCount = Number.isFinite(lines) ? Math.max(1, Math.floor(lines)) : 1;
+  const barCount = variant === 'text' ? rowCount : 1;
+  const animationCssClass = animation ? `skeleton_${animation}` : 'skeleton_noAnimation';
+  const skeletonStyle = {};
+  if (width !== undefined) {
+    skeletonStyle['--skeletonWidth'] = toCssSize(width);
+  }
+  if (height !== undefined && variant !== 'circle') {
+    skeletonStyle['--skeletonHeight'] = toCssSize(height);
+  }
+  return /*#__PURE__*/_react.default.createElement("span", {
+    id: id,
+    "aria-hidden": "true",
+    className: `skeleton skeleton_${variant} skeleton_${appearance} ${animationCssClass} ${customCssClass}`,
+    style: skeletonStyle
+  }, Array.from({
+    length: barCount
+  }, (_bar, index) => /*#__PURE__*/_react.default.createElement("span", {
+    key: index,
+    className: "skeletonBar"
+  })));
+};
+exports.Skeleton = Skeleton;
+var _default = exports.default = Skeleton;
+//# sourceMappingURL=Skeleton.js.map

package/dist/cjs/components/design/skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":["_react","_interopRequireDefault","require","toCssSize","value","Skeleton","variant","width","height","lines","animation","appearance","isLoaded","children","id","customCssClass","default","createElement","Fragment","rowCount","Number","isFinite","Math","max","floor","barCount","animationCssClass","skeletonStyle","undefined","className","style","Array","from","length","_bar","index","key","exports","_default"],"sources":["../../../../../src/components/design/skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\n\nimport './skeleton.scss';\n\nexport interface SkeletonProps {\n  /** Structural style of the placeholder. `text` renders line sized bars, `block` a sharp cornered area, `rounded` a softened one, and `circle` an avatar style disc. */\n  variant?: 'text' | 'block' | 'circle' | 'rounded';\n  /** Inline size of the placeholder. Numbers are treated as pixels, strings are passed through as written (for example `'50%'`). */\n  width?: string | number;\n  /** Block size of the placeholder. Numbers are treated as pixels. Ignored for the `circle` variant, which stays square. */\n  height?: string | number;\n  /** How many placeholder rows to render. Applies to the `text` variant only; all other variants render a single bar. */\n  lines?: number;\n  /** Animation style, or `false` for a static placeholder. Both animations are suppressed under `prefers-reduced-motion`. */\n  animation?: 'pulse' | 'wave' | false;\n  /** Visual intensity. `opaque` gives a higher contrast fill for busier or lower contrast surfaces. */\n  appearance?: 'subtle' | 'opaque';\n  /** When true, `children` are rendered in place of the placeholder. */\n  isLoaded?: boolean;\n  /** Real content, rendered once `isLoaded` is true. */\n  children?: React.ReactNode;\n  /** Applied to the placeholder wrapper. Note the wrapper is `aria-hidden`, so this is intended for styling and testing rather than as an ARIA target. */\n  id?: string;\n  /** Additional class names appended to the placeholder wrapper. */\n  customCssClass?: string;\n}\n\nconst toCssSize = (value: string | number): string => (\n  typeof value === 'number' ? `${ value }px` : value\n);\n\nexport const Skeleton: React.FC<SkeletonProps> = (\n  {\n    variant = 'text',\n    width,\n    height,\n    lines = 1,\n    animation = 'wave',\n    appearance = 'subtle',\n    isLoaded = false,\n    children,\n    id,\n    customCssClass = ''\n  }\n) => {\n  if (isLoaded) return <>{ children }</>;\n\n  const rowCount = Number.isFinite(lines) ? Math.max(1, Math.floor(lines)) : 1;\n  const barCount = variant === 'text' ? rowCount : 1;\n  const animationCssClass = animation ? `skeleton_${ animation }` : 'skeleton_noAnimation';\n\n  const skeletonStyle: Record<string, string> = {};\n\n  if (width !== undefined) {\n    skeletonStyle['--skeletonWidth'] = toCssSize(width);\n  }\n\n  if (height !== undefined && variant !== 'circle') {\n    skeletonStyle['--skeletonHeight'] = toCssSize(height);\n  }\n\n  return (\n    <span\n      id={ id }\n      aria-hidden=\"true\"\n      className={ `skeleton skeleton_${ variant } skeleton_${ appearance } ${ animationCssClass } ${ customCssClass }` }\n      style={ skeletonStyle as React.CSSProperties }\n    >\n      { Array.from({ length: barCount }, (_bar, index) => (\n        <span key={ index } className=\"skeletonBar\" />\n      )) }\n    </span>\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEAA,OAAA;AAyBA,MAAMC,SAAS,GAAIC,KAAsB,IACvC,OAAOA,KAAK,KAAK,QAAQ,GAAG,GAAIA,KAAK,IAAK,GAAGA,KAC9C;AAEM,MAAMC,QAAiC,GAAGA,CAC/C;EACEC,OAAO,GAAG,MAAM;EAChBC,KAAK;EACLC,MAAM;EACNC,KAAK,GAAG,CAAC;EACTC,SAAS,GAAG,MAAM;EAClBC,UAAU,GAAG,QAAQ;EACrBC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,EAAE;EACFC,cAAc,GAAG;AACnB,CAAC,KACE;EACH,IAAIH,QAAQ,EAAE,oBAAOZ,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAAAjB,MAAA,CAAAgB,OAAA,CAAAE,QAAA,QAAIL,QAAY,CAAC;EAEtC,MAAMM,QAAQ,GAAGC,MAAM,CAACC,QAAQ,CAACZ,KAAK,CAAC,GAAGa,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,KAAK,CAACf,KAAK,CAAC,CAAC,GAAG,CAAC;EAC5E,MAAMgB,QAAQ,GAAGnB,OAAO,KAAK,MAAM,GAAGa,QAAQ,GAAG,CAAC;EAClD,MAAMO,iBAAiB,GAAGhB,SAAS,GAAG,YAAaA,SAAS,EAAG,GAAG,sBAAsB;EAExF,MAAMiB,aAAqC,GAAG,CAAC,CAAC;EAEhD,IAAIpB,KAAK,KAAKqB,SAAS,EAAE;IACvBD,aAAa,CAAC,iBAAiB,CAAC,GAAGxB,SAAS,CAACI,KAAK,CAAC;EACrD;EAEA,IAAIC,MAAM,KAAKoB,SAAS,IAAItB,OAAO,KAAK,QAAQ,EAAE;IAChDqB,aAAa,CAAC,kBAAkB,CAAC,GAAGxB,SAAS,CAACK,MAAM,CAAC;EACvD;EAEA,oBACER,MAAA,CAAAgB,OAAA,CAAAC,aAAA;IACEH,EAAE,EAAGA,EAAI;IACT,eAAY,MAAM;IAClBe,SAAS,EAAG,qBAAsBvB,OAAO,aAAeK,UAAU,IAAMe,iBAAiB,IAAMX,cAAc,EAAK;IAClHe,KAAK,EAAGH;EAAsC,GAE5CI,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAER;EAAS,CAAC,EAAE,CAACS,IAAI,EAAEC,KAAK,kBAC7CnC,MAAA,CAAAgB,OAAA,CAAAC,aAAA;IAAMmB,GAAG,EAAGD,KAAO;IAACN,SAAS,EAAC;EAAa,CAAE,CAC9C,CACG,CAAC;AAEX,CAAC;AAACQ,OAAA,CAAAhC,QAAA,GAAAA,QAAA;AAAA,IAAAiC,QAAA,GAAAD,OAAA,CAAArB,OAAA,GAEaX,QAAQ","ignoreList":[]}

package/dist/cjs/components/design/skeleton/skeleton.css

@@ -0,0 +1,86 @@
+.skeleton {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--skeletonLineGap, 8px);
+  vertical-align: middle;
+  inline-size: var(--skeletonWidth, 100%);
+  max-inline-size: 100%;
+}
+
+.skeletonBar {
+  inline-size: 100%;
+  block-size: var(--skeletonHeight, var(--skeletonLineHeight, 1em));
+  background-color: var(--skeletonBg, #eef2f4);
+  border-radius: var(--skeletonBorderRadius, 3px);
+}
+
+/* Variants */
+.skeleton_text .skeletonBar:last-child:not(:only-child) {
+  inline-size: var(--skeletonLastLineWidth, 60%);
+}
+
+.skeleton_block .skeletonBar {
+  block-size: var(--skeletonHeight, var(--skeletonBlockHeight, 120px));
+  border-radius: 0;
+}
+
+.skeleton_rounded .skeletonBar {
+  block-size: var(--skeletonHeight, var(--skeletonBlockHeight, 120px));
+  border-radius: var(--skeletonRoundedBorderRadius, 8px);
+}
+
+.skeleton_circle {
+  inline-size: var(--skeletonWidth, var(--skeletonCircleSize, 40px));
+}
+.skeleton_circle .skeletonBar {
+  block-size: auto;
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+
+/* Appearance */
+.skeleton_opaque .skeletonBar {
+  background-color: var(--skeletonOpaqueBg, #d3dee4);
+}
+
+.skeleton_wave .skeletonBar {
+  position: relative;
+  overflow: hidden;
+}
+.skeleton_wave .skeletonBar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(90deg, transparent, var(--skeletonHighlight, #f6f8fa), transparent);
+  animation: skeletonWave var(--skeletonAnimationDuration, 1.6s) linear infinite;
+}
+
+.skeleton_pulse .skeletonBar {
+  opacity: 1;
+  animation: skeletonPulse var(--skeletonAnimationDuration, 1.6s) ease-in-out infinite alternate;
+}
+
+@keyframes skeletonWave {
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes skeletonPulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.3;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .skeleton_wave .skeletonBar::after {
+    display: none;
+  }
+  .skeleton_pulse .skeletonBar {
+    animation: none;
+    opacity: 1;
+  }
+}

package/dist/cjs/components/form/formFields/formFieldWrapper/FormField.js

@@ -25,7 +25,8 @@ const FormField = ({
   validation,
   customContent,
   customCssClasses,
-  separateLabelAndField = false
+  separateLabelAndField = false,
+  formContext
 }) => {
   const [isTouched, setIsTouched] = (0, _react.useState)(false);
   const wrapperCssClass = `
@@ -70,9 +71,9 @@ const FormField = ({
       case 'select':
         return /*#__PURE__*/_react.default.createElement(_Select.Select, fieldProps);
       case 'checkbox':
-        return new Error('Checkboxes require special handling. Please use the InputCheckbox component instead.');
+        throw new Error('Checkboxes require special handling. Please use the InputCheckbox component instead.');
       case 'file':
-        return new Error('File inputs require special handling. Please use the DragAndDropFileUpload component instead.');
+        throw new Error('File inputs require special handling. Please use the DragAndDropFileUpload component instead.');
       case 'password':
         return /*#__PURE__*/_react.default.createElement(_InputText.InputText, fieldProps);
       case 'date':
@@ -91,7 +92,9 @@ const FormField = ({
     isRequired: validation && typeof validation.required !== 'undefined',
     customContent
   };
-  return /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, {
+    formContext: formContext
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperCssClass,
     title: wrapperHoverText()
   }, /*#__PURE__*/_react.default.createElement("label", {
@@ -100,7 +103,7 @@ const FormField = ({
     htmlFor: field.id
   }, (!label?.position || label.position === 'left' || separateLabelAndField) && /*#__PURE__*/_react.default.createElement(_FormFieldLabel.FormFieldLabel, labelProps), !separateLabelAndField && /*#__PURE__*/_react.default.createElement("span", {
     className: "inputContainer"
-  }, getFieldElement(), label?.position === 'inset' && /*#__PURE__*/_react.default.createElement(_FormFieldLabel.FormFieldLabel, labelProps)), label?.position === 'right' && /*#__PURE__*/_react.default.createElement(_FormFieldLabel.FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, null), field.type !== 'textarea' && /*#__PURE__*/_react.default.createElement(_ValidationMessages.ValidationMessages, {
+  }, getFieldElement(), label?.position === 'inset' && /*#__PURE__*/_react.default.createElement(_FormFieldLabel.FormFieldLabel, labelProps)), label?.position === 'right' && /*#__PURE__*/_react.default.createElement(_FormFieldLabel.FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, null), /*#__PURE__*/_react.default.createElement(_ValidationMessages.ValidationMessages, {
     name: field.name,
     validation: validation
   })), separateLabelAndField && /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/components/form/formFields/formFieldWrapper/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","names":["Object","defineProperty","exports","value","default","FormField","_react","_interopRequireWildcard","require","_HookFormWrapper","_FormFieldLabel","_InputText","_ValidationMessages","_Spinner","_InputSearch","_InputDate","_Select","_Textarea","_Autocomplete","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","label","field","layout","showSpinner","validation","customContent","customCssClasses","separateLabelAndField","isTouched","setIsTouched","useState","wrapperCssClass","type","wrapper","position","wrapperHoverText","hide","undefined","placeholder","text","getFieldElement","fieldType","toLowerCase","fieldProps","defaultValue","onTouched","createElement","Textarea","Select","Error","InputText","InputDate","InputSearch","Autocomplete","labelProps","inputId","id","isRequired","required","HookFormWrapper","className","title","labelId","htmlFor","FormFieldLabel","Spinner","ValidationMessages","name","_default"],"sources":["../../../../../../src/components/form/formFields/formFieldWrapper/FormField.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode, useState } from 'react';\nimport { HookFormWrapper } from '../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldLabel } from '../subComponents/labels/FormFieldLabel';\nimport { FormFieldProps } from './formFieldProps';\nimport { InputText } from '../subComponents/inputs/text/InputText';\nimport { ValidationMessages } from '../../validation/ValidationMessages';\nimport { Spinner } from '../../../design/spinner/Spinner';\nimport { InputSearch } from '../subComponents/inputs/search/InputSearch';\nimport { InputDate } from '../subComponents/inputs/date/InputDate';\nimport { Select } from '../subComponents/select/Select';\nimport { Textarea } from '../subComponents/textarea/Textarea';\nimport { Autocomplete } from '../subComponents/inputs/autocomplete/Autocomplete';\n\nexport const FormField: React.FC<FormFieldProps> = (\n  {\n    label,\n    field,\n    layout = 'stacked',\n    showSpinner,\n    validation,\n    customContent,\n    customCssClasses,\n    separateLabelAndField = false\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n\n  const wrapperCssClass = `\n    formField \n    ${ layout } \n    ${ field.type }_Field \n    ${ customCssClasses?.wrapper || '' } \n    ${ isTouched ? 'touched' : '' } \n    ${ typeof validation !== 'undefined' ? 'withValidation' : '' } \n    ${ label?.position === 'inset' ? 'insetLabel' : '' }\n  `;\n\n  const wrapperHoverText = (): string | undefined => {\n    if (!label.hide) {\n      return undefined;\n    }\n\n    if (field.placeholder) {\n      return field.placeholder;\n    }\n\n    if (typeof label.text === 'string') {\n      return label.text;\n    }\n\n    return undefined;\n  };\n\n  const getFieldElement = () => {\n    const fieldType = field.type.toLowerCase();\n    const fieldProps = {\n      field: {\n        ...field,\n        ...(fieldType !== 'checkbox' ? { defaultValue: field.defaultValue || '' } : {}),\n        onTouched: () => setIsTouched(true)\n      },\n      label,\n      showSpinner,\n      validation,\n      customContent\n    };\n\n    switch (fieldType) {\n    case 'textarea':\n      return <Textarea { ...fieldProps } />;\n    case 'select':\n      return <Select { ...fieldProps } />;\n    case 'checkbox':\n      return new Error('Checkboxes require special handling. Please use the InputCheckbox component instead.');\n    case 'file':\n      return new Error('File inputs require special handling. Please use the DragAndDropFileUpload component instead.');\n    case 'password':\n      return <InputText { ...fieldProps } />;\n    case 'date':\n      return <InputDate { ...fieldProps } />;\n    case 'search':\n      return <InputSearch { ...fieldProps } />;\n    case 'combobox':\n      return <Autocomplete { ...fieldProps } />;\n    default:\n      return <InputText { ...fieldProps } />;\n    }\n  };\n\n  const labelProps = {\n    ...label,\n    inputId: field.id,\n    isRequired: validation && typeof validation.required !== 'undefined',\n    customContent\n  };\n\n  return (\n    <HookFormWrapper>\n      <div\n        className={ wrapperCssClass }\n        title={ wrapperHoverText() }\n      >\n        <label\n          id={ label.labelId || `${ field.id }_label` }\n          className={ `${ customCssClasses?.label || '' } ${ showSpinner ? 'withSpinner' : '' } ${ label.hide ? 'hiddenLabel' : '' }` }\n          htmlFor={ field.id }\n        >\n\n          { (!label?.position || label.position === 'left' || separateLabelAndField)\n            && <FormFieldLabel { ...labelProps } /> }\n\n          {\n            !separateLabelAndField && (\n              <span className=\"inputContainer\">\n                {\n                getFieldElement() as ReactNode\n                }\n                { label?.position === 'inset'\n                && <FormFieldLabel { ...labelProps } /> }\n              </span>\n            )\n          }\n\n          { label?.position === 'right'\n            && <FormFieldLabel { ...labelProps } /> }\n\n          {\n            showSpinner && <Spinner />\n          }\n\n          { field.type !== 'textarea' && <ValidationMessages name={ field.name } validation={ validation } /> }\n        </label>\n\n        {\n          separateLabelAndField && (\n            <div className=\"inputContainer\">\n              {\n                getFieldElement() as ReactNode\n              }\n            </div>\n          )\n        }\n      </div>\n    </HookFormWrapper>\n  );\n};\n\nexport default FormField;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FormField.js","names":["Object","defineProperty","exports","value","default","FormField","_react","_interopRequireWildcard","require","_HookFormWrapper","_FormFieldLabel","_InputText","_ValidationMessages","_Spinner","_InputSearch","_InputDate","_Select","_Textarea","_Autocomplete","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","label","field","layout","showSpinner","validation","customContent","customCssClasses","separateLabelAndField","formContext","isTouched","setIsTouched","useState","wrapperCssClass","type","wrapper","position","wrapperHoverText","hide","undefined","placeholder","text","getFieldElement","fieldType","toLowerCase","fieldProps","defaultValue","onTouched","createElement","Textarea","Select","Error","InputText","InputDate","InputSearch","Autocomplete","labelProps","inputId","id","isRequired","required","HookFormWrapper","className","title","labelId","htmlFor","FormFieldLabel","Spinner","ValidationMessages","name","_default"],"sources":["../../../../../../src/components/form/formFields/formFieldWrapper/FormField.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { HookFormWrapper } from '../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldLabel } from '../subComponents/labels/FormFieldLabel';\nimport { FormFieldProps } from './formFieldProps';\nimport { InputText } from '../subComponents/inputs/text/InputText';\nimport { ValidationMessages } from '../../validation/ValidationMessages';\nimport { Spinner } from '../../../design/spinner/Spinner';\nimport { InputSearch } from '../subComponents/inputs/search/InputSearch';\nimport { InputDate } from '../subComponents/inputs/date/InputDate';\nimport { Select } from '../subComponents/select/Select';\nimport { Textarea } from '../subComponents/textarea/Textarea';\nimport { Autocomplete } from '../subComponents/inputs/autocomplete/Autocomplete';\n\nexport const FormField: React.FC<FormFieldProps> = (\n  {\n    label,\n    field,\n    layout = 'stacked',\n    showSpinner,\n    validation,\n    customContent,\n    customCssClasses,\n    separateLabelAndField = false,\n    formContext\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n\n  const wrapperCssClass = `\n    formField \n    ${ layout } \n    ${ field.type }_Field \n    ${ customCssClasses?.wrapper || '' } \n    ${ isTouched ? 'touched' : '' } \n    ${ typeof validation !== 'undefined' ? 'withValidation' : '' } \n    ${ label?.position === 'inset' ? 'insetLabel' : '' }\n  `;\n\n  const wrapperHoverText = (): string | undefined => {\n    if (!label.hide) {\n      return undefined;\n    }\n\n    if (field.placeholder) {\n      return field.placeholder;\n    }\n\n    if (typeof label.text === 'string') {\n      return label.text;\n    }\n\n    return undefined;\n  };\n\n  const getFieldElement = () => {\n    const fieldType = field.type.toLowerCase();\n    const fieldProps = {\n      field: {\n        ...field,\n        ...(fieldType !== 'checkbox' ? { defaultValue: field.defaultValue || '' } : {}),\n        onTouched: () => setIsTouched(true)\n      },\n      label,\n      showSpinner,\n      validation,\n      customContent\n    };\n\n    switch (fieldType) {\n    case 'textarea':\n      return <Textarea { ...fieldProps } />;\n    case 'select':\n      return <Select { ...fieldProps } />;\n    case 'checkbox':\n      throw new Error('Checkboxes require special handling. Please use the InputCheckbox component instead.');\n    case 'file':\n      throw new Error('File inputs require special handling. Please use the DragAndDropFileUpload component instead.');\n    case 'password':\n      return <InputText { ...fieldProps } />;\n    case 'date':\n      return <InputDate { ...fieldProps } />;\n    case 'search':\n      return <InputSearch { ...fieldProps } />;\n    case 'combobox':\n      return <Autocomplete { ...fieldProps } />;\n    default:\n      return <InputText { ...fieldProps } />;\n    }\n  };\n\n  const labelProps = {\n    ...label,\n    inputId: field.id,\n    isRequired: validation && typeof validation.required !== 'undefined',\n    customContent\n  };\n\n  return (\n    <HookFormWrapper formContext={ formContext }>\n      <div\n        className={ wrapperCssClass }\n        title={ wrapperHoverText() }\n      >\n        <label\n          id={ label.labelId || `${ field.id }_label` }\n          className={ `${ customCssClasses?.label || '' } ${ showSpinner ? 'withSpinner' : '' } ${ label.hide ? 'hiddenLabel' : '' }` }\n          htmlFor={ field.id }\n        >\n\n          { (!label?.position || label.position === 'left' || separateLabelAndField)\n            && <FormFieldLabel { ...labelProps } /> }\n\n          {\n            !separateLabelAndField && (\n              <span className=\"inputContainer\">\n                {\n                  getFieldElement()\n                }\n                { label?.position === 'inset'\n                && <FormFieldLabel { ...labelProps } /> }\n              </span>\n            )\n          }\n\n          { label?.position === 'right'\n            && <FormFieldLabel { ...labelProps } /> }\n\n          {\n            showSpinner && <Spinner />\n          }\n\n          <ValidationMessages name={ field.name } validation={ validation } />\n        </label>\n\n        {\n          separateLabelAndField && (\n            <div className=\"inputContainer\">\n              {\n                getFieldElement()\n              }\n            </div>\n          )\n        }\n      </div>\n    </HookFormWrapper>\n  );\n};\n\nexport default FormField;\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/form/formFields/formFieldWrapper/formFieldProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"formFieldProps.js","names":[],"sources":["../../../../../../src/components/form/formFields/formFieldWrapper/formFieldProps.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\nimport {\n  ChangeEvent, ChangeEventHandler, FormEventHandler,\n  KeyboardEvent,\n  ReactElement,\n  ReactNode,\n} from 'react';\n\nimport type {\n  InputHTMLAttributes,\n  SelectHTMLAttributes,\n  TextareaHTMLAttributes,\n} from 'react';\n\nimport {\n  Message,\n  Validate,\n  ValidationRule\n} from 'react-hook-form';\nimport { GenericFunction } from '../../../../interfaces';\nimport { KeyboardEventHandler } from '../../../../interfaces/generic.interface';\n\n/**\n * Custom content props for additional elements around the label or field.\n */\nexport interface CustomContentProps {\n  /** Element or text to display before the label. */\n  preLabel?: ReactElement | string;\n  /** Element or text to display after the label. */\n  postLabel?: ReactElement | string;\n  /** Element or text to display before the field. */\n  preField?: ReactElement | string;\n  /** Element or text to display after the field. */\n  postField?: ReactElement | string;\n}\n\n/**\n * Props for the label element.\n */\nexport interface LabelProps {\n  /** Text or element for the label. */\n  text: string | ReactNode | ReactElement;\n  /** The ID of the input the label is associated with. */\n  inputId?: string;\n  /** The ID of the label element. */\n  labelId?: string;\n  /** Whether to hide the label visually. */\n  hide?: boolean;\n  /** Position of the label relative to the field. */\n  position?: 'inset' | 'left' | 'right' | string;\n  /** Tooltip for the label. */\n  labelTooltip?: {\n    /** Text for the tooltip. */\n    text: string;\n    /** Optional icon for the tooltip. */\n    icon?: ReactElement | string;\n  };\n  /** Screen reader instructions for the label. */\n  srInstruction?: string;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Custom content for the label. */\n  customContent?: CustomContentProps;\n}\n\n/**\n * Type for a single select option.\n */\nexport type SelectOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n};\n\n/**\n * Type for select options, which can be an object or string.\n */\nexport type SelectOptionType = SelectOptionObjectType | string;\n\n/**\n * Type for a single combobox (autocomplete) option.\n */\nexport type ComboboxOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n  /** Additional data associated with the option. */\n  data?: Record<string, unknown>;\n};\n\nexport type ComboboxOption = ComboboxOptionObjectType | string;\n\n// Everything we want to *override* with our own definitions in FieldProps\nexport type OverriddenKeys =\n  | 'type'\n  | 'id'\n  | 'name'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onBlur'\n  | 'onInput'\n  | 'onKeyDown'\n  | 'disabled'\n  | 'readOnly'\n  | 'min'\n  | 'max';\n\n// All the native props we want to mix in, minus the ones we override\nexport type NativeFieldProps =\n  & Omit<InputHTMLAttributes<HTMLInputElement>, OverriddenKeys>\n  & Omit<SelectHTMLAttributes<HTMLSelectElement>, OverriddenKeys>\n  & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, OverriddenKeys>;\n\n/**\n * Props for the field element.\n */\nexport interface FieldProps extends NativeFieldProps {\n  /** The type of the input field. */\n  type: string;\n  /** The ID of the input field. */\n  id: string;\n  /** The name of the input field. */\n  name: string;\n  /** Placeholder text for the input field. */\n  placeholder?: string;\n  /** Default value for the input field. */\n  defaultValue?: string | number | readonly string[];\n  /** Handler for the change event. */\n  onChange?: ChangeEventHandler | ((\n    event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for the blur event. */\n  onBlur?: GenericFunction;\n  /** Handler for the input event. */\n  onInput?: FormEventHandler<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n  >;\n  /** Handler for the keydown event. */\n  onKeyDown?: KeyboardEventHandler | ((\n    event: KeyboardEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for marking the field as touched. */\n  onTouched?: GenericFunction;\n  /** Whether to include an empty option in a dropdown. */\n  includeEmptyOption?: boolean;\n  /** Label for the empty option. */\n  emptyOptionLabel?: string;\n  /** Options for a dropdown field. */\n  options?: SelectOptionType[] | ComboboxOption[];\n  /** Auto-complete behaviour for the field. */\n  autoComplete?: string;\n  /** Whether the field allows editing and interaction. Note: Setting this to true makes it invisible to screen reader users. */\n  disabled?: boolean;\n  /** Setting to true prevents editing and interaction whilst still making the value visible to screen reader users.  */\n  readonly?: boolean;\n  /** Minimum value or length. */\n  min?: string | number;\n  /** Maximum value or length. */\n  max?: string | number;\n  /**\n   * Whether to enforce grapheme-aware max-length handling (used by textarea).\n   * Uses `field.maxLength` (native field prop) as the source for the UI/input limit.\n   * Keep `field.maxLength` and `validation.maxLength` aligned to avoid mixed UX/validation behaviour.\n   */\n  enforceMaxLength?: boolean;\n}\n\n/**\n * Validation rules for fields.\n */\nexport type CustomValidate<TFieldValue> = (\n  value: TFieldValue,\n  formValues?: unknown\n) => boolean | string | Promise<boolean | string>;\n\n/**\n * Props for validation rules.\n */\n\nexport type MinMaxRule<T> = T extends boolean\n  ? ValidationRule<boolean>\n  : ValidationRule<number | string>;\n\nexport interface ValidationProps<\n  TFieldValue = unknown | string | boolean,\n  TFormValues = unknown\n> {\n  /** Whether the field is required. */\n  required?: Message | ValidationRule<boolean>;\n  /** Minimum value or length. */\n  min?: MinMaxRule<TFieldValue>;\n  /** Maximum value or length. */\n  max?: MinMaxRule<TFieldValue>;\n  /**\n   * Maximum length validation rule.\n   * Used for validation outcome/messages, while textarea UI/input limiting is driven by `field.maxLength`.\n   * If both are provided, keep them equal.\n   */\n  maxLength?: ValidationRule<number>;\n  /** Minimum length of the field. */\n  minLength?: ValidationRule<number>;\n  /** Regex pattern for validation. */\n  pattern?: ValidationRule<RegExp>;\n  /** Custom validation logic. */\n  validate?: CustomValidate<TFieldValue> | Record<string, CustomValidate<TFieldValue>> | Validate<TFieldValue, TFormValues>;\n}\n\nexport type ValidationKey = keyof ValidationProps<unknown, unknown>; // Restrict to known keys\n\n/**\n * Custom CSS classes for the field components.\n */\nexport interface CustomFieldCssClassesProps {\n  /** CSS class for the label. */\n  label?: string;\n  /** CSS class for the input field. */\n  input?: string;\n  /** CSS class for the wrapper. */\n  wrapper?: string;\n}\n\n/**\n * Props for a form field component.\n */\nexport interface FormFieldProps {\n  /** Props for the label. */\n  label: LabelProps;\n  /** Props for the field. */\n  field: FieldProps;\n  /** Layout style of the form field. */\n  layout?: 'stacked' | 'horizontal' | string;\n  /** Validation rules for the field. */\n  validation?: ValidationProps;\n  /** Whether to show a spinner. */\n  showSpinner?: boolean;\n  /** Custom CSS classes for the field. */\n  customCssClasses?: CustomFieldCssClassesProps;\n  /** Custom content for the field. */\n  customContent?: CustomContentProps;\n  /** Override the default nesting of the input inside the label. */\n  separateLabelAndField?: boolean;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"formFieldProps.js","names":[],"sources":["../../../../../../src/components/form/formFields/formFieldWrapper/formFieldProps.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  ReactElement,\n  ReactEventHandler,\n  ReactNode,\n} from 'react';\n\nimport type {\n  InputHTMLAttributes,\n  SelectHTMLAttributes,\n  TextareaHTMLAttributes,\n} from 'react';\n\nimport {\n  FieldValues,\n  Message,\n  UseFormReturn,\n  Validate,\n  ValidationRule\n} from 'react-hook-form';\nimport { GenericFunction } from '../../../../interfaces';\nimport { KeyboardEventHandler } from '../../../../interfaces/generic.interface';\n\n/**\n * Custom content props for additional elements around the label or field.\n */\nexport interface CustomContentProps {\n  /** Element or text to display before the label. */\n  preLabel?: ReactElement | string;\n  /** Element or text to display after the label. */\n  postLabel?: ReactElement | string;\n  /** Element or text to display before the field. */\n  preField?: ReactElement | string;\n  /** Element or text to display after the field. */\n  postField?: ReactElement | string;\n}\n\n/**\n * Props for the label element.\n */\nexport interface LabelProps {\n  /** Text or element for the label. */\n  text: string | ReactNode | ReactElement;\n  /** The ID of the input the label is associated with. */\n  inputId?: string;\n  /** The ID of the label element. */\n  labelId?: string;\n  /** Whether to hide the label visually. */\n  hide?: boolean;\n  /** Position of the label relative to the field. */\n  position?: 'inset' | 'left' | 'right' | string;\n  /** Tooltip for the label. */\n  labelTooltip?: {\n    /** Text for the tooltip. */\n    text: string;\n    /** Optional icon for the tooltip. */\n    icon?: ReactElement | string;\n  };\n  /** Screen reader instructions for the label. */\n  srInstruction?: string;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Custom content for the label. */\n  customContent?: CustomContentProps;\n}\n\n/**\n * Type for a single select option.\n */\nexport type SelectOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n};\n\n/**\n * Type for select options, which can be an object or string.\n */\nexport type SelectOptionType = SelectOptionObjectType | string;\n\n/**\n * Type for a single combobox (autocomplete) option.\n */\nexport type ComboboxOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n  /** Additional data associated with the option. */\n  data?: Record<string, unknown>;\n};\n\nexport type ComboboxOption = ComboboxOptionObjectType | string;\n\n// Everything we want to *override* with our own definitions in FieldProps\nexport type OverriddenKeys =\n  | 'type'\n  | 'id'\n  | 'name'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onBlur'\n  | 'onInput'\n  | 'onKeyDown'\n  | 'disabled'\n  | 'readOnly'\n  | 'min'\n  | 'max';\n\n// All the native props we want to mix in, minus the ones we override\nexport type NativeFieldProps =\n  & Omit<InputHTMLAttributes<HTMLInputElement>, OverriddenKeys>\n  & Omit<SelectHTMLAttributes<HTMLSelectElement>, OverriddenKeys>\n  & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, OverriddenKeys>;\n\n/**\n * Props for the field element.\n */\nexport interface FieldProps extends NativeFieldProps {\n  /** The type of the input field. */\n  type: string;\n  /** The ID of the input field. */\n  id: string;\n  /** The name of the input field. */\n  name: string;\n  /** Placeholder text for the input field. */\n  placeholder?: string;\n  /** Default value for the input field. */\n  defaultValue?: string | number | readonly string[];\n  /** Handler for the change event. */\n  onChange?: ChangeEventHandler | ((\n    event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for the blur event. */\n  onBlur?: GenericFunction;\n  /** Handler for the input event. */\n  onInput?: FormEventHandler<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n  >;\n  /** Handler for the keydown event. */\n  onKeyDown?: KeyboardEventHandler | ((\n    event: KeyboardEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for marking the field as touched. */\n  onTouched?: GenericFunction;\n  /** Whether to include an empty option in a dropdown. */\n  includeEmptyOption?: boolean;\n  /** Label for the empty option. */\n  emptyOptionLabel?: string;\n  /** Options for a dropdown field. */\n  options?: SelectOptionType[] | ComboboxOption[];\n  /** Auto-complete behaviour for the field. */\n  autoComplete?: string;\n  /** Whether the field allows editing and interaction. Note: Setting this to true makes it invisible to screen reader users. */\n  disabled?: boolean;\n  /** Setting to true prevents editing and interaction whilst still making the value visible to screen reader users.  */\n  readonly?: boolean;\n  /** Minimum value or length. */\n  min?: string | number;\n  /** Maximum value or length. */\n  max?: string | number;\n  /**\n   * Whether to enforce grapheme-aware max-length handling (used by textarea).\n   * Uses `field.maxLength` (native field prop) as the source for the UI/input limit.\n   * Keep `field.maxLength` and `validation.maxLength` aligned to avoid mixed UX/validation behaviour.\n   */\n  enforceMaxLength?: boolean;\n}\n\n/**\n * Validation rules for fields.\n */\nexport type CustomValidate<TFieldValue> = (\n  value: TFieldValue,\n  formValues?: unknown\n) => boolean | string | Promise<boolean | string>;\n\n/**\n * Props for validation rules.\n */\n\nexport type MinMaxRule<T> = T extends boolean\n  ? ValidationRule<boolean>\n  : ValidationRule<number | string>;\n\nexport interface ValidationProps<\n  TFieldValue = unknown | string | boolean,\n  TFormValues = unknown\n> {\n  /** Whether the field is required. */\n  required?: Message | ValidationRule<boolean>;\n  /** Minimum value or length. */\n  min?: MinMaxRule<TFieldValue>;\n  /** Maximum value or length. */\n  max?: MinMaxRule<TFieldValue>;\n  /**\n   * Maximum length validation rule.\n   * Used for validation outcome/messages, while textarea UI/input limiting is driven by `field.maxLength`.\n   * If both are provided, keep them equal.\n   */\n  maxLength?: ValidationRule<number>;\n  /** Minimum length of the field. */\n  minLength?: ValidationRule<number>;\n  /** Regex pattern for validation. */\n  pattern?: ValidationRule<RegExp>;\n  /** Custom validation logic. */\n  validate?: CustomValidate<TFieldValue> | Record<string, CustomValidate<TFieldValue>> | Validate<TFieldValue, TFormValues>;\n}\n\nexport type ValidationKey = keyof ValidationProps<unknown, unknown>; // Restrict to known keys\n\n/**\n * Custom CSS classes for the field components.\n */\nexport interface CustomFieldCssClassesProps {\n  /** CSS class for the label. */\n  label?: string;\n  /** CSS class for the input field. */\n  input?: string;\n  /** CSS class for the wrapper. */\n  wrapper?: string;\n}\n\n/**\n * Props for a form field component.\n */\nexport interface FormFieldProps {\n  /** Props for the label. */\n  label: LabelProps;\n  /** Props for the field. */\n  field: FieldProps;\n  /** Layout style of the form field. */\n  layout?: 'stacked' | 'horizontal' | string;\n  /** Validation rules for the field. */\n  validation?: ValidationProps;\n  /** Whether to show a spinner. */\n  showSpinner?: boolean;\n  /** Custom CSS classes for the field. */\n  customCssClasses?: CustomFieldCssClassesProps;\n  /** Custom content for the field. */\n  customContent?: CustomContentProps;\n  /** Override the default nesting of the input inside the label. */\n  separateLabelAndField?: boolean;\n  /** An existing form context to use when React context cannot reach this field, e.g. across a Next.js client boundary. */\n  formContext?: UseFormReturn<FieldValues, any, FieldValues>;\n}\n\nexport type TextareaFieldProps = Omit<FieldProps, 'onSelect'> & {\n  onSelect?: ReactEventHandler<HTMLTextAreaElement>;\n};\n"],"mappings":"","ignoreList":[]}