@x15ventures/x15-ui-library 3.11.4

package/dist/esm/components/design/tooltip/tooltip.css

@@ -0,0 +1,145 @@
+.tooltip {
+  position: relative;
+  display: inline-block;
+  font-weight: normal;
+  width: var(--tooltipIconSize, 22px);
+  height: 1em;
+  margin: var(--tooltipMargin, 0 5px);
+}
+.tooltip > button.icon_only {
+  background: none;
+  border: none;
+  border-radius: 100%;
+  display: block;
+  min-height: var(--tooltipIconSize, 22px);
+  min-width: var(--tooltipIconSize, 22px);
+  height: var(--tooltipIconSize, 22px);
+  line-height: calc(var(--tooltipIconSize, 22px) - 4px);
+  width: var(--tooltipIconSize, 22px);
+  position: absolute;
+  left: 0;
+  top: -2px;
+}
+.tooltip > button.icon_only:hover {
+  border: none;
+  background: none;
+}
+.tooltip > button.icon_only .icon,
+.tooltip > button.icon_only svg[data-icon] {
+  text-align: center;
+  height: var(--tooltipIconSize, 22px);
+  width: var(--tooltipIconSize, 22px);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.tooltip > button.icon_only svg[data-icon] {
+  height: var(--tooltipSvgIconSize, 22px);
+  width: var(--tooltipSvgIconSize, 22px);
+  line-height: var(--tooltipSvgIconSize, 22px);
+}
+.tooltip > button.icon_only .icon {
+  color: var(--tooltipIconFgColor, #222);
+  background: var(--tooltipIconBg, #c2d0d9);
+  border-radius: 100%;
+  border: var(--tooltipIconBorder, none);
+  line-height: normal;
+}
+.tooltip > button.icon_only .icon.icon-info:before {
+  content: "i";
+  color: var(--tooltipIconFgColor, #222);
+  font-style: normal;
+  font-size: calc(var(--tooltipIconSize, 22px) - 4px);
+  font-weight: bold;
+}
+.tooltip > button.icon_only svg[data-icon] {
+  color: var(--tooltipIconBg, #c2d0d9);
+}
+.tooltip > button.text_only {
+  padding: 0;
+}
+.tooltip .content {
+  display: none;
+  background: var(--tooltipContentBg, #e6e6e6);
+  color: var(--tooltipContentFgColor, #222);
+  border-radius: 5px;
+  box-sizing: border-box;
+  font-size: 13px;
+  line-height: 16px;
+  left: -90px;
+  padding: 10px;
+  position: absolute;
+  top: auto;
+  bottom: 28px;
+  z-index: 100;
+  width: var(--tooltipWidth, 200px);
+  text-align: left;
+}
+.tooltip .showPointer.content:before {
+  content: "";
+  border: 8px solid transparent;
+  border-top: 8px solid var(--tooltipContentBg, #e6e6e6);
+  border-bottom: none;
+  position: absolute;
+  bottom: -7px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.tooltip.large .content {
+  width: var(--tooltipWidthLarge, 320px);
+  left: -150px;
+}
+.tooltip.large .content:before {
+  left: 160px;
+}
+.tooltip:hover .content, .tooltip.isOpen .content {
+  display: block;
+}
+.tooltip.measuring .content {
+  opacity: 1;
+  display: block;
+}
+.tooltip.shiftLeft .content {
+  left: -157px;
+}
+.tooltip.shiftLeft .content:before {
+  left: auto;
+  right: 16px;
+}
+.tooltip.shiftLeft.large .content {
+  left: -277px;
+}
+.tooltip.shiftRight .content {
+  left: -5px;
+}
+.tooltip.shiftRight .content:before {
+  left: 16px;
+}
+.tooltip.shiftRight.large .content {
+  left: -5px;
+}
+.tooltip.shiftUp .content {
+  top: auto;
+  bottom: 28px;
+}
+.tooltip.shiftUp .content:before {
+  top: auto;
+  bottom: -8px;
+  border-top: 8px solid var(--tooltipContentBg, #e6e6e6);
+  border-bottom: none;
+}
+.tooltip.shiftDown .content {
+  top: 27px;
+  bottom: auto;
+}
+.tooltip.shiftDown .content:before {
+  top: -8px;
+  bottom: auto;
+  border-top: none;
+  border-bottom: 8px solid var(--tooltipContentBg, #e6e6e6);
+}
+.tooltip.textDisplay {
+  width: auto;
+  height: auto;
+}

package/dist/esm/components/form/buttons/SimpleButton.js

@@ -0,0 +1,57 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo, forwardRef } from 'react';
+import { Icon } from '../../design/icons/basicIcon/Icon';
+import { generateButtonClass } from './button.helpers';
+export const SimpleButton = /*#__PURE__*/forwardRef(({
+  buttonType = 'button',
+  leftIcon,
+  rightIcon,
+  hideLabel = false,
+  label = 'A button',
+  title,
+  id = 'buttonIdRequired',
+  cssClass = 'button primary',
+  disabled = false,
+  disabledMessage = 'This button has been disabled temporarily. There is likely an issue elsewhere on your form that needs to be resolved first.',
+  onClickHandler = () => {},
+  buttonStyle,
+  children
+}, ref) => {
+  const buttonCssClass = useMemo(() => {
+    return generateButtonClass({
+      cssClass,
+      buttonStyle,
+      hideLabel
+    });
+  }, [cssClass, buttonStyle, hideLabel]);
+  const disabledMessageId = `${id}-disabledMessage`;
+  const buttonHoverTitle = () => {
+    if (title) {
+      return title;
+    }
+    if (hideLabel && typeof label === 'string') {
+      return label;
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", _extends({
+    ref: ref,
+    id: id,
+    title: buttonHoverTitle(),
+    className: buttonCssClass,
+    type: buttonType,
+    onClick: onClickHandler,
+    disabled: disabled
+  }, disabled && {
+    'aria-describedby': disabledMessageId
+  }), leftIcon && /*#__PURE__*/React.createElement(Icon, leftIcon), /*#__PURE__*/React.createElement("span", {
+    className: `${hideLabel ? 'sr-only' : 'labelText'}`
+  }, label), children, rightIcon && /*#__PURE__*/React.createElement(Icon, rightIcon)), disabled && /*#__PURE__*/React.createElement("span", {
+    id: disabledMessageId,
+    className: "sr-only"
+  }, disabledMessage));
+});
+export default SimpleButton;
+export { SimpleButton as Button };
+//# sourceMappingURL=SimpleButton.js.map

package/dist/esm/components/form/buttons/SimpleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleButton.js","names":["_extends","React","useMemo","forwardRef","Icon","generateButtonClass","SimpleButton","buttonType","leftIcon","rightIcon","hideLabel","label","title","id","cssClass","disabled","disabledMessage","onClickHandler","buttonStyle","children","ref","buttonCssClass","disabledMessageId","buttonHoverTitle","createElement","Fragment","className","type","onClick","Button"],"sources":["../../../../../src/components/form/buttons/SimpleButton.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo, forwardRef } from 'react';\nimport { ButtonProps } from './button.interface';\nimport { Icon } from '../../design/icons/basicIcon/Icon';\nimport { generateButtonClass } from './button.helpers';\n\nexport const SimpleButton = forwardRef<HTMLButtonElement, ButtonProps>((\n  {\n    buttonType = 'button',\n    leftIcon,\n    rightIcon,\n    hideLabel = false,\n    label = 'A button',\n    title,\n    id = 'buttonIdRequired',\n    cssClass = 'button primary',\n    disabled = false,\n    disabledMessage = 'This button has been disabled temporarily. There is likely an issue elsewhere on your form that needs to be resolved first.',\n    onClickHandler = () => { },\n    buttonStyle,\n    children\n  },\n  ref\n) => {\n  \n  const buttonCssClass = useMemo(() => {\n    return generateButtonClass({ cssClass, buttonStyle, hideLabel });\n  }, [cssClass, buttonStyle, hideLabel]);\n\n  const disabledMessageId = `${ id }-disabledMessage`;\n\n  const buttonHoverTitle = () => {\n    if (title) {\n      return title;\n    }\n    if (hideLabel && typeof label === 'string') {\n      return label;\n    }\n  };\n\n  return (\n    <>\n      <button\n        ref={ ref }\n        id={ id }\n        title={ buttonHoverTitle() }\n        className={ buttonCssClass }\n        type={ buttonType }\n        onClick={ onClickHandler }\n        disabled={ disabled }\n        { ...(disabled && { 'aria-describedby': disabledMessageId }) }\n      >\n        { leftIcon && <Icon { ...leftIcon } /> }\n\n        <span className={ `${ hideLabel ? 'sr-only' : 'labelText' }` }>{ label }</span>\n\n        { children }\n\n        { rightIcon && <Icon { ...rightIcon } /> }\n      </button>\n      {\n        disabled && (\n          <span id={ disabledMessageId } className=\"sr-only\">\n            {\n              disabledMessage\n            }\n          </span>\n        )\n      }\n    </>\n  );\n});\n\nexport default SimpleButton;\n\nexport { SimpleButton as Button };"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,IAAIC,OAAO,EAAEC,UAAU,QAAQ,OAAO;AAElD,SAASC,IAAI,QAAQ,mCAAmC;AACxD,SAASC,mBAAmB,QAAQ,kBAAkB;AAEtD,OAAO,MAAMC,YAAY,gBAAGH,UAAU,CAAiC,CACrE;EACEI,UAAU,GAAG,QAAQ;EACrBC,QAAQ;EACRC,SAAS;EACTC,SAAS,GAAG,KAAK;EACjBC,KAAK,GAAG,UAAU;EAClBC,KAAK;EACLC,EAAE,GAAG,kBAAkB;EACvBC,QAAQ,GAAG,gBAAgB;EAC3BC,QAAQ,GAAG,KAAK;EAChBC,eAAe,GAAG,6HAA6H;EAC/IC,cAAc,GAAGA,CAAA,KAAM,CAAE,CAAC;EAC1BC,WAAW;EACXC;AACF,CAAC,EACDC,GAAG,KACA;EAEH,MAAMC,cAAc,GAAGnB,OAAO,CAAC,MAAM;IACnC,OAAOG,mBAAmB,CAAC;MAAES,QAAQ;MAAEI,WAAW;MAAER;IAAU,CAAC,CAAC;EAClE,CAAC,EAAE,CAACI,QAAQ,EAAEI,WAAW,EAAER,SAAS,CAAC,CAAC;EAEtC,MAAMY,iBAAiB,GAAG,GAAIT,EAAE,kBAAmB;EAEnD,MAAMU,gBAAgB,GAAGA,CAAA,KAAM;IAC7B,IAAIX,KAAK,EAAE;MACT,OAAOA,KAAK;IACd;IACA,IAAIF,SAAS,IAAI,OAAOC,KAAK,KAAK,QAAQ,EAAE;MAC1C,OAAOA,KAAK;IACd;EACF,CAAC;EAED,oBACEV,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAAwB,QAAA,qBACExB,KAAA,CAAAuB,aAAA,WAAAxB,QAAA;IACEoB,GAAG,EAAGA,GAAK;IACXP,EAAE,EAAGA,EAAI;IACTD,KAAK,EAAGW,gBAAgB,CAAC,CAAG;IAC5BG,SAAS,EAAGL,cAAgB;IAC5BM,IAAI,EAAGpB,UAAY;IACnBqB,OAAO,EAAGX,cAAgB;IAC1BF,QAAQ,EAAGA;EAAU,GACfA,QAAQ,IAAI;IAAE,kBAAkB,EAAEO;EAAkB,CAAC,GAEzDd,QAAQ,iBAAIP,KAAA,CAAAuB,aAAA,CAACpB,IAAI,EAAMI,QAAY,CAAC,eAEtCP,KAAA,CAAAuB,aAAA;IAAME,SAAS,EAAG,GAAIhB,SAAS,GAAG,SAAS,GAAG,WAAW;EAAK,GAAGC,KAAa,CAAC,EAE7EQ,QAAQ,EAERV,SAAS,iBAAIR,KAAA,CAAAuB,aAAA,CAACpB,IAAI,EAAMK,SAAa,CACjC,CAAC,EAEPM,QAAQ,iBACNd,KAAA,CAAAuB,aAAA;IAAMX,EAAE,EAAGS,iBAAmB;IAACI,SAAS,EAAC;EAAS,GAE9CV,eAEE,CAGV,CAAC;AAEP,CAAC,CAAC;AAEF,eAAeV,YAAY;AAE3B,SAASA,YAAY,IAAIuB,MAAM","ignoreList":[]}

package/dist/esm/components/form/buttons/button.helpers.js

@@ -0,0 +1,9 @@
+import { cssClassesArrayToString } from '../../../helpers/arrayHelpers';
+export const generateButtonClass = ({
+  cssClass = 'button primary',
+  hideLabel,
+  buttonStyle
+}) => {
+  return cssClassesArrayToString('button', cssClass, hideLabel && 'iconOnly', buttonStyle?.color, buttonStyle?.variant, buttonStyle?.size);
+};
+//# sourceMappingURL=button.helpers.js.map

package/dist/esm/components/form/buttons/button.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.helpers.js","names":["cssClassesArrayToString","generateButtonClass","cssClass","hideLabel","buttonStyle","color","variant","size"],"sources":["../../../../../src/components/form/buttons/button.helpers.ts"],"sourcesContent":["import { ButtonStyles } from './button.interface';\nimport { ButtonClassCombination } from './buttonVariations';\nimport { cssClassesArrayToString } from '../../../helpers/arrayHelpers';\n\nexport const generateButtonClass = (\n  {\n    cssClass = 'button primary',\n    hideLabel,\n    buttonStyle\n  }:\n  {\n    cssClass: string | ButtonClassCombination;\n    hideLabel?: boolean;\n    buttonStyle?: ButtonStyles;\n  }\n) => {\n  return cssClassesArrayToString(\n    'button',\n    cssClass,\n    hideLabel && 'iconOnly',\n    buttonStyle?.color,\n    buttonStyle?.variant,\n    buttonStyle?.size\n  );\n};\n"],"mappings":"AAEA,SAASA,uBAAuB,QAAQ,+BAA+B;AAEvE,OAAO,MAAMC,mBAAmB,GAAGA,CACjC;EACEC,QAAQ,GAAG,gBAAgB;EAC3BC,SAAS;EACTC;AAMF,CAAC,KACE;EACH,OAAOJ,uBAAuB,CAC5B,QAAQ,EACRE,QAAQ,EACRC,SAAS,IAAI,UAAU,EACvBC,WAAW,EAAEC,KAAK,EAClBD,WAAW,EAAEE,OAAO,EACpBF,WAAW,EAAEG,IACf,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/components/form/buttons/button.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=button.interface.js.map

package/dist/esm/components/form/buttons/button.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.interface.js","names":[],"sources":["../../../../../src/components/form/buttons/button.interface.ts"],"sourcesContent":["import { ReactElement, ReactNode, RefObject } from 'react';\nimport { IconProps } from '../../design/icons/basicIcon/Icon';\nimport { GenericFunction } from '../../../interfaces/generic.interface';\nimport { ButtonClassCombination } from './buttonVariations';\n\nexport interface ButtonStyles {\n  color?: 'primary' | 'secondary' | 'tertiary';\n  variant?: 'solid' | 'outline' | 'text-only' | 'icon-only';\n  size?: 'default' | 'compact';\n}\n\nexport interface ButtonProps {\n  label: string | ReactNode;\n  id: string;\n  title?: string;\n  cssClass?: string | ButtonClassCombination;\n  onClickHandler?: GenericFunction;\n  buttonType?: 'button' | 'submit' | 'reset';\n  buttonStyle?: ButtonStyles;\n  leftIcon?: IconProps;\n  rightIcon?: IconProps;\n  hideLabel?: boolean;\n  children?: ReactNode | ReactElement;\n  disabled?: boolean;\n  disabledMessage?: string;\n  ref?: RefObject<HTMLButtonElement>;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/form/buttons/buttonVariations.js

@@ -0,0 +1,16 @@
+// TODO: Consider adding button class guides
+
+export const buttonColorClasses = ['primary', 'secondary', 'tertiary', 'primary inverse', 'secondary inverse', 'tertiary inverse', 'invisible'];
+export const buttonSizeClasses = ['compact', 'outline', 'compact outline'];
+export const buttonStateClasses = ['hover', 'focus', 'active', 'inactive', 'disabled'];
+
+// Create union types for each array
+
+// Define a type that allows a combination of at most one from each array
+
+export default {
+  buttonColorClasses,
+  buttonStateClasses,
+  buttonSizeClasses
+};
+//# sourceMappingURL=buttonVariations.js.map

package/dist/esm/components/form/buttons/buttonVariations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonVariations.js","names":["buttonColorClasses","buttonSizeClasses","buttonStateClasses"],"sources":["../../../../../src/components/form/buttons/buttonVariations.ts"],"sourcesContent":["// TODO: Consider adding button class guides\n\nexport const buttonColorClasses = [\n  'primary',\n  'secondary',\n  'tertiary',\n  'primary inverse',\n  'secondary inverse',\n  'tertiary inverse',\n  'invisible'\n];\n\nexport const buttonSizeClasses = [\n  'compact',\n  'outline',\n  'compact outline'\n];\n\nexport const buttonStateClasses = [\n  'hover',\n  'focus',\n  'active',\n  'inactive',\n  'disabled'\n];\n\n// Create union types for each array\nexport type ButtonColorClass = typeof buttonColorClasses[number];\nexport type ButtonSizeClass = typeof buttonSizeClasses[number];\nexport type ButtonStateClass = typeof buttonStateClasses[number];\n\n// Define a type that allows a combination of at most one from each array\nexport type ButtonClassCombination = (\n  ButtonColorClass | ButtonSizeClass | ButtonStateClass | string\n  )[] & {\n  length: 0 | 1 | 2 | 3;\n};\n\nexport default {\n  buttonColorClasses,\n  buttonStateClasses,\n  buttonSizeClasses\n};\n"],"mappings":"AAAA;;AAEA,OAAO,MAAMA,kBAAkB,GAAG,CAChC,SAAS,EACT,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,WAAW,CACZ;AAED,OAAO,MAAMC,iBAAiB,GAAG,CAC/B,SAAS,EACT,SAAS,EACT,iBAAiB,CAClB;AAED,OAAO,MAAMC,kBAAkB,GAAG,CAChC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,UAAU,EACV,UAAU,CACX;;AAED;;AAKA;;AAOA,eAAe;EACbF,kBAAkB;EAClBE,kBAAkB;EAClBD;AACF,CAAC","ignoreList":[]}

package/dist/esm/components/form/buttons/copyTextButton/CopyTextButton.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef } from 'react';
+import { SimpleButton } from '../../buttons/SimpleButton';
+import { useCopyClipboard } from '../../../../hooks/CopyClipboard';
+export const CopyTextButton = ({
+  copyElementRef,
+  autoCopyOnSelect,
+  onCopyCallback,
+  ...buttonProps
+}) => {
+  const buttonRef = useRef(null);
+  useCopyClipboard({
+    elementRef: copyElementRef,
+    triggerRef: buttonRef,
+    autoCopyOnSelect,
+    onCopyCallback
+  });
+  return /*#__PURE__*/React.createElement(SimpleButton, _extends({}, buttonProps, {
+    ref: buttonRef
+  }));
+};
+//# sourceMappingURL=CopyTextButton.js.map

package/dist/esm/components/form/buttons/copyTextButton/CopyTextButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyTextButton.js","names":["React","useRef","SimpleButton","useCopyClipboard","CopyTextButton","copyElementRef","autoCopyOnSelect","onCopyCallback","buttonProps","buttonRef","elementRef","triggerRef","createElement","_extends","ref"],"sources":["../../../../../../src/components/form/buttons/copyTextButton/CopyTextButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { SimpleButton } from '../../buttons/SimpleButton';\nimport { ButtonProps } from '../../buttons/button.interface';\nimport { useCopyClipboard } from '../../../../hooks/CopyClipboard';\nimport { GenericFunction } from '../../../../interfaces';\n\ninterface CopyTextButtonProps extends ButtonProps {\n  copyElementRef: React.RefObject<HTMLElement>;\n  autoCopyOnSelect?: boolean;\n  onCopyCallback?: GenericFunction;\n}\n\nexport const CopyTextButton: React.FC<CopyTextButtonProps> = (\n  {\n    copyElementRef,\n    autoCopyOnSelect,\n    onCopyCallback,\n    ...buttonProps\n  }) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  useCopyClipboard(\n    {\n      elementRef: copyElementRef,\n      triggerRef: buttonRef,\n      autoCopyOnSelect,\n      onCopyCallback\n    }\n  );\n\n  return <SimpleButton { ...buttonProps } ref={ buttonRef } />;\n};"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,gBAAgB,QAAQ,iCAAiC;AASlE,OAAO,MAAMC,cAA6C,GAAGA,CAC3D;EACEC,cAAc;EACdC,gBAAgB;EAChBC,cAAc;EACd,GAAGC;AACL,CAAC,KAAK;EACN,MAAMC,SAAS,GAAGR,MAAM,CAAoB,IAAI,CAAC;EAEjDE,gBAAgB,CACd;IACEO,UAAU,EAAEL,cAAc;IAC1BM,UAAU,EAAEF,SAAS;IACrBH,gBAAgB;IAChBC;EACF,CACF,CAAC;EAED,oBAAOP,KAAA,CAAAY,aAAA,CAACV,YAAY,EAAAW,QAAA,KAAML,WAAW;IAAGM,GAAG,EAAGL;EAAW,EAAE,CAAC;AAC9D,CAAC","ignoreList":[]}

package/dist/esm/components/form/buttons/notificationsButton/NotificationsButton.js

@@ -0,0 +1,39 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import { SimpleButton } from '../SimpleButton';
+import { NotificationIcon } from '../../../design/icons/notificationIcon/NotificationIcon';
+import { pluralizeIfNeeded } from '../../../../helpers';
+import { generateButtonClass } from '../button.helpers';
+import './notificationsButton.css';
+export const NotificationsButton = props => {
+  const {
+    count = 0,
+    label = `You have ${count} ${pluralizeIfNeeded('notification', count)}`,
+    hideLabel = true,
+    leftIcon = {
+      icon: 'bell'
+    },
+    cssClass,
+    buttonStyle,
+    ...buttonProps
+  } = props;
+  const buttonCssClass = useMemo(() => {
+    const baseCssClass = `button notificationsButton ${hideLabel ? 'iconOnly' : ''} ${cssClass || ''}`;
+    return generateButtonClass({
+      cssClass: baseCssClass,
+      buttonStyle,
+      hideLabel
+    });
+  }, [cssClass, buttonStyle, hideLabel]);
+  return /*#__PURE__*/React.createElement(SimpleButton, _extends({}, buttonProps, {
+    label: label,
+    hideLabel: hideLabel,
+    leftIcon: leftIcon,
+    cssClass: buttonCssClass
+  }), count > 0 && /*#__PURE__*/React.createElement(NotificationIcon, {
+    text: `${count}`
+  }));
+};
+//# sourceMappingURL=NotificationsButton.js.map

package/dist/esm/components/form/buttons/notificationsButton/NotificationsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsButton.js","names":["_extends","React","useMemo","SimpleButton","NotificationIcon","pluralizeIfNeeded","generateButtonClass","NotificationsButton","props","count","label","hideLabel","leftIcon","icon","cssClass","buttonStyle","buttonProps","buttonCssClass","baseCssClass","createElement","text"],"sources":["../../../../../../src/components/form/buttons/notificationsButton/NotificationsButton.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from 'react';\nimport { SimpleButton } from '../SimpleButton';\nimport { NotificationIcon } from '../../../design/icons/notificationIcon/NotificationIcon';\nimport { pluralizeIfNeeded } from '../../../../helpers';\nimport { ButtonProps } from '../button.interface';\nimport { generateButtonClass } from '../button.helpers';\n\nimport './notificationsButton.scss';\n\nexport interface NotificationsButtonProps extends Omit<ButtonProps, 'label'> {\n  count?: number;\n  label?: string;\n}\n\nexport const NotificationsButton: React.FC<NotificationsButtonProps> = (props) => {\n  const {\n    count = 0,\n    label = `You have ${ count } ${ pluralizeIfNeeded('notification', count) }`,\n    hideLabel = true,\n    leftIcon = { icon: 'bell' },\n    cssClass,\n    buttonStyle,\n    ...buttonProps\n  } = props;\n\n  const buttonCssClass = useMemo(() => {\n    const baseCssClass = `button notificationsButton ${ hideLabel ? 'iconOnly' : '' } ${ cssClass || '' }`;\n\n    return generateButtonClass({ cssClass: baseCssClass, buttonStyle, hideLabel });\n  }, [cssClass, buttonStyle, hideLabel]);\n\n  return (\n    <SimpleButton\n      { ...buttonProps }\n      label={ label }\n      hideLabel={ hideLabel }\n      leftIcon={ leftIcon }\n      cssClass={ buttonCssClass }\n    >\n      { count > 0 && <NotificationIcon text={ `${ count }` } /> }\n    </SimpleButton>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,gBAAgB,QAAQ,yDAAyD;AAC1F,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,SAASC,mBAAmB,QAAQ,mBAAmB;AAEvD,OAAO,4BAA4B;AAOnC,OAAO,MAAMC,mBAAuD,GAAIC,KAAK,IAAK;EAChF,MAAM;IACJC,KAAK,GAAG,CAAC;IACTC,KAAK,GAAG,YAAaD,KAAK,IAAMJ,iBAAiB,CAAC,cAAc,EAAEI,KAAK,CAAC,EAAG;IAC3EE,SAAS,GAAG,IAAI;IAChBC,QAAQ,GAAG;MAAEC,IAAI,EAAE;IAAO,CAAC;IAC3BC,QAAQ;IACRC,WAAW;IACX,GAAGC;EACL,CAAC,GAAGR,KAAK;EAET,MAAMS,cAAc,GAAGf,OAAO,CAAC,MAAM;IACnC,MAAMgB,YAAY,GAAG,8BAA+BP,SAAS,GAAG,UAAU,GAAG,EAAE,IAAMG,QAAQ,IAAI,EAAE,EAAG;IAEtG,OAAOR,mBAAmB,CAAC;MAAEQ,QAAQ,EAAEI,YAAY;MAAEH,WAAW;MAAEJ;IAAU,CAAC,CAAC;EAChF,CAAC,EAAE,CAACG,QAAQ,EAAEC,WAAW,EAAEJ,SAAS,CAAC,CAAC;EAEtC,oBACEV,KAAA,CAAAkB,aAAA,CAAChB,YAAY,EAAAH,QAAA,KACNgB,WAAW;IAChBN,KAAK,EAAGA,KAAO;IACfC,SAAS,EAAGA,SAAW;IACvBC,QAAQ,EAAGA,QAAU;IACrBE,QAAQ,EAAGG;EAAgB,IAEzBR,KAAK,GAAG,CAAC,iBAAIR,KAAA,CAAAkB,aAAA,CAACf,gBAAgB;IAACgB,IAAI,EAAG,GAAIX,KAAK;EAAK,CAAE,CAC5C,CAAC;AAEnB,CAAC","ignoreList":[]}

package/dist/esm/components/form/buttons/notificationsButton/notificationsButton.css

@@ -0,0 +1,3 @@
+.notificationsButton {
+  position: relative;
+}

package/dist/esm/components/form/buttons/userPicButton/UserPicButton.js

@@ -0,0 +1,32 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { SimpleButton } from '../SimpleButton';
+import { Icon } from '../../../design/icons/basicIcon/Icon';
+import { getInitialsOrAcronym } from '../../../../helpers/stringHelpers';
+import './userPicButton.css';
+export const UserPicButton = props => {
+  const {
+    user,
+    ...buttonProps
+  } = props;
+  return /*#__PURE__*/React.createElement(SimpleButton, _extends({}, buttonProps, {
+    hideLabel: true,
+    cssClass: "button icon_only userPicButton"
+  }), /*#__PURE__*/React.createElement("span", {
+    title: user.fullName || 'User profile',
+    className: "userPicFallbacks"
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      backgroundImage: `url(${user.imageUrl})`
+    },
+    className: "userPic"
+  }), user.fullName && /*#__PURE__*/React.createElement("span", {
+    className: "userInitials"
+  }, getInitialsOrAcronym(user.fullName)), /*#__PURE__*/React.createElement(Icon, {
+    icon: "user",
+    customCssClass: "userPicFallbackIcon"
+  })));
+};
+//# sourceMappingURL=UserPicButton.js.map

package/dist/esm/components/form/buttons/userPicButton/UserPicButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserPicButton.js","names":["_extends","React","SimpleButton","Icon","getInitialsOrAcronym","UserPicButton","props","user","buttonProps","createElement","hideLabel","cssClass","title","fullName","className","style","backgroundImage","imageUrl","icon","customCssClass"],"sources":["../../../../../../src/components/form/buttons/userPicButton/UserPicButton.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { ButtonProps } from '../button.interface';\nimport { SimpleButton } from '../SimpleButton';\nimport { Icon } from '../../../design/icons/basicIcon/Icon';\nimport { getInitialsOrAcronym } from '../../../../helpers/stringHelpers';\n\nimport './userPicButton.scss';\n\nexport interface UserPicButtonProps extends ButtonProps {\n  user: {\n    imageUrl?: string;\n    fullName?: string;\n  }\n}\n\nexport const UserPicButton: React.FC<UserPicButtonProps> = (props) => {\n  const {\n    user, ...buttonProps\n  } = props;\n\n  return (\n    <SimpleButton { ...buttonProps } hideLabel cssClass=\"button icon_only userPicButton\">\n      <span title={ user.fullName || 'User profile' } className=\"userPicFallbacks\">\n        <span\n          style={\n            {\n              backgroundImage: `url(${ user.imageUrl })`\n            }\n          }\n          className=\"userPic\"\n        />\n        {\n          user.fullName\n          && (\n            <span className=\"userInitials\">\n              { getInitialsOrAcronym(user.fullName) }\n            </span>\n          )\n        }\n        <Icon icon=\"user\" customCssClass=\"userPicFallbackIcon\" />\n      </span>\n    </SimpleButton>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,IAAI,QAAQ,sCAAsC;AAC3D,SAASC,oBAAoB,QAAQ,mCAAmC;AAExE,OAAO,sBAAsB;AAS7B,OAAO,MAAMC,aAA2C,GAAIC,KAAK,IAAK;EACpE,MAAM;IACJC,IAAI;IAAE,GAAGC;EACX,CAAC,GAAGF,KAAK;EAET,oBACEL,KAAA,CAAAQ,aAAA,CAACP,YAAY,EAAAF,QAAA,KAAMQ,WAAW;IAAGE,SAAS;IAACC,QAAQ,EAAC;EAAgC,iBAClFV,KAAA,CAAAQ,aAAA;IAAMG,KAAK,EAAGL,IAAI,CAACM,QAAQ,IAAI,cAAgB;IAACC,SAAS,EAAC;EAAkB,gBAC1Eb,KAAA,CAAAQ,aAAA;IACEM,KAAK,EACH;MACEC,eAAe,EAAE,OAAQT,IAAI,CAACU,QAAQ;IACxC,CACD;IACDH,SAAS,EAAC;EAAS,CACpB,CAAC,EAEAP,IAAI,CAACM,QAAQ,iBAEXZ,KAAA,CAAAQ,aAAA;IAAMK,SAAS,EAAC;EAAc,GAC1BV,oBAAoB,CAACG,IAAI,CAACM,QAAQ,CAChC,CACP,eAEHZ,KAAA,CAAAQ,aAAA,CAACN,IAAI;IAACe,IAAI,EAAC,MAAM;IAACC,cAAc,EAAC;EAAqB,CAAE,CACpD,CACM,CAAC;AAEnB,CAAC","ignoreList":[]}

package/dist/esm/components/form/buttons/userPicButton/userPicButton.css

@@ -0,0 +1,30 @@
+/* Popovers */
+.userPicButton .userPicFallbacks {
+  position: relative;
+  width: 42px;
+  height: 42px;
+}
+.userPicButton .userPicFallbacks > span, .userPicButton .userPicFallbacks > .icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.userPicButton .userPic {
+  background-size: cover;
+  background-position: center;
+  z-index: 3;
+}
+.userPicButton .userInitials {
+  background: var(--primaryButtonBg);
+  z-index: 2;
+  font-weight: bold;
+}
+.userPicButton .userPicFallbackIcon {
+  z-index: 1;
+  font-size: 24px;
+}

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

@@ -0,0 +1,105 @@
+'use client';
+
+import React, { useState } from 'react';
+import { HookFormWrapper } from '../../hookFormWrapper/HookFormWrapper';
+import { FormFieldLabel } from '../subComponents/labels/FormFieldLabel';
+import { InputText } from '../subComponents/inputs/text/InputText';
+import { ValidationMessages } from '../../validation/ValidationMessages';
+import { Spinner } from '../../../design/spinner/Spinner';
+import { InputSearch } from '../subComponents/inputs/search/InputSearch';
+import { InputDate } from '../subComponents/inputs/date/InputDate';
+import { Select } from '../subComponents/select/Select';
+import { Textarea } from '../subComponents/textarea/Textarea';
+import { Autocomplete } from '../subComponents/inputs/autocomplete/Autocomplete';
+export const FormField = ({
+  label,
+  field,
+  layout = 'stacked',
+  showSpinner,
+  validation,
+  customContent,
+  customCssClasses,
+  separateLabelAndField = false
+}) => {
+  const [isTouched, setIsTouched] = useState(false);
+  const wrapperCssClass = `
+    formField 
+    ${layout} 
+    ${field.type}_Field 
+    ${customCssClasses?.wrapper || ''} 
+    ${isTouched ? 'touched' : ''} 
+    ${typeof validation !== 'undefined' ? 'withValidation' : ''} 
+    ${label?.position === 'inset' ? 'insetLabel' : ''}
+  `;
+  const wrapperHoverText = () => {
+    if (!label.hide) {
+      return undefined;
+    }
+    if (field.placeholder) {
+      return field.placeholder;
+    }
+    if (typeof label.text === 'string') {
+      return label.text;
+    }
+    return undefined;
+  };
+  const getFieldElement = () => {
+    const fieldType = field.type.toLowerCase();
+    const fieldProps = {
+      field: {
+        ...field,
+        ...(fieldType !== 'checkbox' ? {
+          defaultValue: field.defaultValue || ''
+        } : {}),
+        onTouched: () => setIsTouched(true)
+      },
+      label,
+      showSpinner,
+      validation,
+      customContent
+    };
+    switch (fieldType) {
+      case 'textarea':
+        return /*#__PURE__*/React.createElement(Textarea, fieldProps);
+      case 'select':
+        return /*#__PURE__*/React.createElement(Select, fieldProps);
+      case 'checkbox':
+        return 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.');
+      case 'password':
+        return /*#__PURE__*/React.createElement(InputText, fieldProps);
+      case 'date':
+        return /*#__PURE__*/React.createElement(InputDate, fieldProps);
+      case 'search':
+        return /*#__PURE__*/React.createElement(InputSearch, fieldProps);
+      case 'combobox':
+        return /*#__PURE__*/React.createElement(Autocomplete, fieldProps);
+      default:
+        return /*#__PURE__*/React.createElement(InputText, fieldProps);
+    }
+  };
+  const labelProps = {
+    ...label,
+    inputId: field.id,
+    isRequired: validation && typeof validation.required !== 'undefined',
+    customContent
+  };
+  return /*#__PURE__*/React.createElement(HookFormWrapper, null, /*#__PURE__*/React.createElement("div", {
+    className: wrapperCssClass,
+    title: wrapperHoverText()
+  }, /*#__PURE__*/React.createElement("label", {
+    id: label.labelId || `${field.id}_label`,
+    className: `${customCssClasses?.label || ''} ${showSpinner ? 'withSpinner' : ''} ${label.hide ? 'hiddenLabel' : ''}`,
+    htmlFor: field.id
+  }, (!label?.position || label.position === 'left' || separateLabelAndField) && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), !separateLabelAndField && /*#__PURE__*/React.createElement("span", {
+    className: "inputContainer"
+  }, getFieldElement(), label?.position === 'inset' && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps)), label?.position === 'right' && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/React.createElement(Spinner, null), /*#__PURE__*/React.createElement(ValidationMessages, {
+    name: field.name,
+    validation: validation
+  })), separateLabelAndField && /*#__PURE__*/React.createElement("div", {
+    className: "inputContainer"
+  }, getFieldElement())));
+};
+export default FormField;
+//# sourceMappingURL=FormField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","names":["React","useState","HookFormWrapper","FormFieldLabel","InputText","ValidationMessages","Spinner","InputSearch","InputDate","Select","Textarea","Autocomplete","FormField","label","field","layout","showSpinner","validation","customContent","customCssClasses","separateLabelAndField","isTouched","setIsTouched","wrapperCssClass","type","wrapper","position","wrapperHoverText","hide","undefined","placeholder","text","getFieldElement","fieldType","toLowerCase","fieldProps","defaultValue","onTouched","createElement","Error","labelProps","inputId","id","isRequired","required","className","title","labelId","htmlFor","name"],"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          <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":[]}

package/dist/esm/components/form/formFields/formFieldWrapper/formFieldProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=formFieldProps.js.map

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

@@ -0,0 +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\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  /** Maximum length of the field. */\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":[]}