@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/InputFields/DatepickerFieldHeader.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**
+ * Import react libraries.
+ */
+import * as React from 'react';
 export interface DatepickerFieldHeaderParams {
     date: Date;
     changeYear(year: number): void;
@@ -16,4 +19,4 @@ export interface DatepickerFieldHeaderParams {
     setYearPickerMode(val: boolean): void;
     setActiveMonthPage(val: number): void;
 }
-export declare const DatepickerFieldHeader: ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, setYearPickerMode, yearPickerMode, setActiveMonthPage, }: DatepickerFieldHeaderParams) => JSX.Element;
+export declare const DatepickerFieldHeader: ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, setYearPickerMode, yearPickerMode, setActiveMonthPage, }: DatepickerFieldHeaderParams) => React.JSX.Element;

package/dist/InputFields/DatepickerFieldHeader.js

@@ -1,82 +1,45 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject;
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 /**
  * Import react libraries.
- */
-import * as React from 'react';
-import { SystemIcons } from '../icons';
-import styled from 'styled-components';
-import { CommonInteractionStyling } from '../common';
-import { COLORS } from '../styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var HeaderLabelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ", ";\n  }\n\n  ", "\n\n  &:hover {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  &:active {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n"])), COLORS.neutral_600, CommonInteractionStyling, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600);
-export var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
-  var date = _ref.date,
-    decreaseMonth = _ref.decreaseMonth,
-    increaseMonth = _ref.increaseMonth,
-    prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
-    nextMonthButtonDisabled = _ref.nextMonthButtonDisabled,
-    setYearPickerMode = _ref.setYearPickerMode,
-    yearPickerMode = _ref.yearPickerMode,
-    setActiveMonthPage = _ref.setActiveMonthPage;
-  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-  var handleDecreaseMonth = function handleDecreaseMonth() {
-    var previousMonth = date.getMonth() - 1;
-    if (previousMonth < 0) previousMonth = months.length - 1;
-    setActiveMonthPage(previousMonth);
-    decreaseMonth();
-  };
-  var handleIncreaseMonth = function handleIncreaseMonth() {
-    var nextMonth = date.getMonth() + 1;
-    if (nextMonth >= months.length - 1) nextMonth = 0;
-    setActiveMonthPage(nextMonth);
-    increaseMonth();
-  };
-  React.useEffect(function () {
-    setActiveMonthPage(date.getMonth());
-  }, [date]);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'center'
-      },
-      children: [!yearPickerMode && /*#__PURE__*/_jsx("button", {
-        type: "button",
-        className: "react-datepicker__navigation react-datepicker__navigation--previous",
-        onClick: handleDecreaseMonth,
-        disabled: prevMonthButtonDisabled
-      }), /*#__PURE__*/_jsxs(HeaderLabelContainer, {
-        onClick: function onClick() {
-          return setYearPickerMode(!yearPickerMode);
-        },
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "react-datepicker__current-month",
-          children: "".concat(months[date.getMonth()], " ").concat(date.getFullYear())
-        }), yearPickerMode ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {
-          size: "24px"
-        }) : /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
-          size: "24px"
-        })]
-      }), !yearPickerMode && /*#__PURE__*/_jsx("button", {
-        type: "button",
-        className: "react-datepicker__navigation react-datepicker__navigation--next",
-        onClick: handleIncreaseMonth,
-        disabled: nextMonthButtonDisabled
-      })]
-    })
-  });
-};
-DatepickerFieldHeader.propTypes = {
-  date: _pt.instanceOf(Date).isRequired,
-  customHeaderCount: _pt.number.isRequired,
-  prevMonthButtonDisabled: _pt.bool.isRequired,
-  nextMonthButtonDisabled: _pt.bool.isRequired,
-  prevYearButtonDisabled: _pt.bool.isRequired,
-  nextYearButtonDisabled: _pt.bool.isRequired,
-  yearPickerMode: _pt.bool.isRequired
-};
-//# sourceMappingURL=DatepickerFieldHeader.js.map
+ */
+import * as React from 'react';
+import { SystemIcons } from '../icons';
+import styled from 'styled-components';
+import { CommonInteractionStyling } from '../common';
+import { COLORS } from '../styles';
+var HeaderLabelContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ", ";\n  }\n\n  ", "\n\n  &:hover {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  &:active {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ", ";\n  }\n\n  ", "\n\n  &:hover {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  &:active {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n"])), COLORS.neutral_600, CommonInteractionStyling, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600);
+export var DatepickerFieldHeader = function (_a) {
+    var date = _a.date, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, setYearPickerMode = _a.setYearPickerMode, yearPickerMode = _a.yearPickerMode, setActiveMonthPage = _a.setActiveMonthPage;
+    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    var handleDecreaseMonth = function () {
+        var previousMonth = date.getMonth() - 1;
+        if (previousMonth < 0)
+            previousMonth = months.length - 1;
+        setActiveMonthPage(previousMonth);
+        decreaseMonth();
+    };
+    var handleIncreaseMonth = function () {
+        var nextMonth = date.getMonth() + 1;
+        if (nextMonth >= months.length - 1)
+            nextMonth = 0;
+        setActiveMonthPage(nextMonth);
+        increaseMonth();
+    };
+    React.useEffect(function () {
+        setActiveMonthPage(date.getMonth());
+    }, [date]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                display: 'flex',
+                justifyContent: 'center',
+            } },
+            !yearPickerMode && (React.createElement("button", { type: "button", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: handleDecreaseMonth, disabled: prevMonthButtonDisabled })),
+            React.createElement(HeaderLabelContainer, { onClick: function () { return setYearPickerMode(!yearPickerMode); } },
+                React.createElement("div", { className: "react-datepicker__current-month" }, "".concat(months[date.getMonth()], " ").concat(date.getFullYear())),
+                yearPickerMode ? React.createElement(SystemIcons.ArrowDropUp, { size: "24px" }) : React.createElement(SystemIcons.ArrowDropDown, { size: "24px" })),
+            !yearPickerMode && (React.createElement("button", { type: "button", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: handleIncreaseMonth, disabled: nextMonthButtonDisabled })))));
+};
+var templateObject_1;

package/dist/InputFields/Label.d.ts

@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import { Size } from '../types';
-export type LabelProps = {
+export declare type LabelProps = {
     inputId: string;
     text: string;
     size?: Size.Small | Size.Medium;

package/dist/InputFields/Label.js

@@ -1,122 +1,83 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 /**
  * Import React libraries.
- */
-import * as React from 'react';
-
+ */
+import * as React from 'react';
 /**
  * Import custom styles.
- */
-import { BREAKPOINTS, COLORS } from '../styles';
-import { Size } from '../types';
-
+ */
+import { BREAKPOINTS, COLORS } from '../styles';
+import { Size } from '../types';
 /**
  * Import third-party libraries.
- */
-import styled from 'styled-components';
-import { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';
-import { SystemIcons } from '../icons';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-// Add component-specific styles.
-var Label = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
-var LabelRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"])));
-var CopyContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), TypographyBase, COLORS.primary_800, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_600, TypographyBase, COLORS.neutral_300);
-var LabelRowInner = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"])));
-
-// Add component-specific types
-var CopyState;
-(function (CopyState) {
-  CopyState[CopyState["Disabled"] = 0] = "Disabled";
-  CopyState[CopyState["Available"] = 1] = "Available";
-  CopyState[CopyState["Copied"] = 2] = "Copied";
-})(CopyState || (CopyState = {}));
-var InputLabel = function InputLabel(_ref) {
-  var inputId = _ref.inputId,
-    text = _ref.text,
-    size = _ref.size,
-    margin = _ref.margin,
-    requiredProp = _ref.required,
-    showCopyButton = _ref.showCopyButton;
-  // Globally used variables within the component
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    required = _React$useState2[0],
-    setRequired = _React$useState2[1];
-  var _React$useState3 = React.useState(CopyState.Available),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    copyState = _React$useState4[0],
-    setCopyState = _React$useState4[1];
-
-  /**
-   * Checks if field is set as required and we have to mark it accordingly.
-   */
-  React.useEffect(function () {
-    if (requiredProp === undefined) {
-      var _document$getElementB;
-      if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
-        setRequired(true);
-      } else {
-        setRequired(false);
-      }
-    } else setRequired(Boolean(requiredProp));
-  }, []);
-  /**
-   * Triggers a click element on a specific element.
-   * @param id - ID of the element which needs to be clicked.
-   */
-  var onTriggerClick = function onTriggerClick(id) {
-    var _document$getElementB2;
-    (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.click();
-  };
-  var copyInputClick = function copyInputClick(e) {
-    var _document$getElementB3;
-    e.preventDefault();
-    if (copyState == CopyState.Copied) return;
-    var val = (_document$getElementB3 = document.getElementById(inputId)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.value;
-    if (val) {
-      window.navigator.clipboard.writeText(val);
-      setCopyState(CopyState.Copied);
-      setTimeout(function () {
-        setCopyState(CopyState.Available);
-      }, 1000);
-    }
-  };
-  return /*#__PURE__*/_jsx(LabelRow, {
-    margin: margin,
-    children: /*#__PURE__*/_jsxs(LabelRowInner, {
-      size: size,
-      children: [/*#__PURE__*/_jsx(Label, {
-        htmlFor: inputId,
-        onClick: function onClick() {
-          return onTriggerClick(inputId);
-        },
-        className: size || '',
-        children: text
-      }), required && /*#__PURE__*/_jsx(SystemIcons.Asterisk, {
-        size: "16px",
-        color: COLORS.critical_500
-      }), showCopyButton && /*#__PURE__*/_jsx(CopyContainer, {
-        className: copyState != CopyState.Available ? "disabled" : "",
-        onClick: copyInputClick,
-        children: size == Size.Medium ? /*#__PURE__*/_jsx(ComponentXS, {
-          children: copyState == CopyState.Copied ? 'Copied' : 'Copy'
-        }) : /*#__PURE__*/_jsx(ComponentXXS, {
-          children: copyState == CopyState.Copied ? 'Copied' : 'Copy'
-        })
-      })]
-    })
-  });
-};
-InputLabel.propTypes = {
-  inputId: _pt.string.isRequired,
-  text: _pt.string.isRequired,
-  margin: _pt.string,
-  required: _pt.bool,
-  showCopyButton: _pt.bool
-};
-export default InputLabel;
-//# sourceMappingURL=Label.js.map
+ */
+import styled from 'styled-components';
+import { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';
+import { SystemIcons } from '../icons';
+// Add component-specific styles.
+var Label = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"], ["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
+var LabelRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"])));
+var CopyContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), TypographyBase, COLORS.primary_800, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_600, TypographyBase, COLORS.neutral_300);
+var LabelRowInner = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"])));
+var CopyState;
+(function (CopyState) {
+    CopyState[CopyState["Disabled"] = 0] = "Disabled";
+    CopyState[CopyState["Available"] = 1] = "Available";
+    CopyState[CopyState["Copied"] = 2] = "Copied";
+})(CopyState || (CopyState = {}));
+var InputLabel = function (_a) {
+    var inputId = _a.inputId, text = _a.text, size = _a.size, margin = _a.margin, requiredProp = _a.required, showCopyButton = _a.showCopyButton;
+    // Globally used variables within the component
+    var _b = React.useState(false), required = _b[0], setRequired = _b[1];
+    var _c = React.useState(CopyState.Available), copyState = _c[0], setCopyState = _c[1];
+    /**
+     * Checks if field is set as required and we have to mark it accordingly.
+     */
+    React.useEffect(function () {
+        var _a;
+        if (requiredProp === undefined) {
+            if (((_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.getAttribute('required')) === '') {
+                setRequired(true);
+            }
+            else {
+                setRequired(false);
+            }
+        }
+        else
+            setRequired(Boolean(requiredProp));
+    }, []);
+    /**
+     * Triggers a click element on a specific element.
+     * @param id - ID of the element which needs to be clicked.
+     */
+    var onTriggerClick = function (id) {
+        var _a;
+        (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var copyInputClick = function (e) {
+        var _a;
+        e.preventDefault();
+        if (copyState == CopyState.Copied)
+            return;
+        var val = (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.value;
+        if (val) {
+            window.navigator.clipboard.writeText(val);
+            setCopyState(CopyState.Copied);
+            setTimeout(function () {
+                setCopyState(CopyState.Available);
+            }, 1000);
+        }
+    };
+    return (React.createElement(LabelRow, { margin: margin },
+        React.createElement(LabelRowInner, { size: size },
+            React.createElement(Label, { htmlFor: inputId, onClick: function () { return onTriggerClick(inputId); }, className: size || '' }, text),
+            required && React.createElement(SystemIcons.Asterisk, { size: "16px", color: COLORS.critical_500 }),
+            showCopyButton &&
+                React.createElement(CopyContainer, { className: copyState != CopyState.Available ? "disabled" : "", onClick: copyInputClick }, size == Size.Medium ? React.createElement(ComponentXS, null, copyState == CopyState.Copied ? 'Copied' : 'Copy') :
+                    React.createElement(ComponentXXS, null, copyState == CopyState.Copied ? 'Copied' : 'Copy')))));
+};
+export default InputLabel;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/InputFields/NumberField.d.ts

@@ -1,33 +1,62 @@
 import * as React from 'react';
 import { Size, States, Testable } from '../types';
-export type NumberFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown' | 'onClick' | 'tabIndex' | 'size' | 'value' | 'prefix' | 'min' | 'max'> & {
+export interface NumberFieldProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown' | 'onClick' | 'tabIndex' | 'size' | 'value' | 'prefix' | 'min' | 'max'> {
+    /**
+     * Optional. The size of the number field. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium;
+    /**
+     * Optional. The prefix to be displayed before the number in the field.
+     */
     prefix?: string;
+    /**
+     * Optional. The interval for incrementing and decrementing the number in the field.
+     */
     interval?: number;
+    /**
+     * Optional. The minimum value that can be entered in the field.
+     */
     minValue?: number;
+    /**
+     * Optional. The maximum value that can be entered in the field.
+     */
     maxValue?: number;
+    /**
+     * Optional. A boolean indicating whether negative numbers are allowed.
+     */
     allowNegative?: boolean;
+    /**
+     * Optional. The number of decimal places allowed in the number.
+     */
     decimalPrecision?: number;
+    /**
+     * Optional. The state of the number field. Can be 'Valid' or 'Invalid'.
+     */
     state?: States.Valid | States.Invalid;
+    /**
+     * Optional. A note to be displayed below the number field.
+     */
     note?: string;
+    /**
+     * Optional. An icon to be displayed next to the note.
+     */
     noteIcon?: React.ReactNode;
+    /**
+     * Optional. The type of the number field. Can be 'NumberField' or 'NumberInput'.
+     */
     type?: 'NumberField' | 'NumberInput';
+    /**
+     * Optional. The current value of the number field.
+     */
     value?: number;
+    /**
+     * Optional. A function to be called when the value of the number field changes.
+     */
     onChange?: (e: number) => void;
-};
-declare const NumberField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "tabIndex" | "prefix" | "onChange" | "onKeyDown" | "onClick" | "size" | "max" | "min" | "value"> & {
-    size?: Size.Small | Size.Medium | undefined;
-    prefix?: string | undefined;
-    interval?: number | undefined;
-    minValue?: number | undefined;
-    maxValue?: number | undefined;
-    allowNegative?: boolean | undefined;
-    decimalPrecision?: number | undefined;
-    state?: States.Valid | States.Invalid | undefined;
-    note?: string | undefined;
-    noteIcon?: React.ReactNode;
-    type?: "NumberField" | "NumberInput" | undefined;
-    value?: number | undefined;
-    onChange?: ((e: number) => void) | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
+    /**
+     * Optional. The position of the tooltip when the number overflows. Can be 'top' or 'bottom'.
+     */
+    overflowTooltipPosition?: 'top' | 'bottom';
+}
+declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default NumberField;