@transferwise/components 46.52.2 → 46.53.0

package/build/i18n/en.json.js

@@ -20,6 +20,7 @@ var en = {
 	"neptune.DateLookup.year": "year",
 	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Info.ariaLabel": "More information",
+	"neptune.Label.optional": "(Optional)",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",

package/build/i18n/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/en.json.mjs

@@ -18,6 +18,7 @@ var en = {
 	"neptune.DateLookup.year": "year",
 	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Info.ariaLabel": "More information",
+	"neptune.Label.optional": "(Optional)",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",

package/build/i18n/en.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.js

@@ -84,6 +84,7 @@ var Sticky = require('./sticky/Sticky.js');
 var Summary = require('./summary/Summary.js');
 var Switch = require('./switch/Switch.js');
 var SwitchOption = require('./switchOption/SwitchOption.js');
+var Tabs = require('./tabs/Tabs.js');
 var TextareaWithDisplayFormat = require('./textareaWithDisplayFormat/TextareaWithDisplayFormat.js');
 var Title = require('./title/Title.js');
 var Tooltip = require('./tooltip/Tooltip.js');
@@ -95,7 +96,6 @@ var useSnackbar = require('./snackbar/useSnackbar.js');
 var index$1 = require('./i18n/index.js');
 var CheckboxButton = require('./checkboxButton/CheckboxButton.js');
 var ListItem = require('./listItem/ListItem.js');
-var Tabs = require('./tabs/Tabs.js');
 var useDirection = require('./common/hooks/useDirection/useDirection.js');
 var useLayout = require('./common/hooks/useLayout/useLayout.js');
 var breakpoint = require('./common/propsValues/breakpoint.js');
@@ -231,6 +231,7 @@ exports.Sticky = Sticky;
 exports.Summary = Summary;
 exports.Switch = Switch;
 exports.SwitchOption = SwitchOption;
+exports.Tabs = Tabs;
 exports.TextareaWithDisplayFormat = TextareaWithDisplayFormat;
 exports.Title = Title;
 exports.Tooltip = Tooltip;
@@ -246,7 +247,6 @@ exports.useSnackbar = useSnackbar;
 exports.translations = index$1;
 exports.CheckboxButton = CheckboxButton;
 exports.ListItem = ListItem;
-exports.Tabs = Tabs;
 exports.useDirection = useDirection.useDirection;
 exports.useLayout = useLayout.useLayout;
 Object.defineProperty(exports, "Breakpoint", {

package/build/index.mjs

@@ -82,6 +82,7 @@ export { default as Sticky } from './sticky/Sticky.mjs';
 export { default as Summary } from './summary/Summary.mjs';
 export { default as Switch } from './switch/Switch.mjs';
 export { default as SwitchOption } from './switchOption/SwitchOption.mjs';
+export { default as Tabs } from './tabs/Tabs.mjs';
 export { default as TextareaWithDisplayFormat } from './textareaWithDisplayFormat/TextareaWithDisplayFormat.mjs';
 export { default as Title } from './title/Title.mjs';
 export { default as Tooltip } from './tooltip/Tooltip.mjs';
@@ -93,7 +94,6 @@ export { default as useSnackbar } from './snackbar/useSnackbar.mjs';
 export { default as translations } from './i18n/index.mjs';
 export { default as CheckboxButton } from './checkboxButton/CheckboxButton.mjs';
 export { default as ListItem } from './listItem/ListItem.mjs';
-export { default as Tabs } from './tabs/Tabs.mjs';
 export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
 export { useLayout } from './common/hooks/useLayout/useLayout.mjs';
 export { Breakpoint } from './common/propsValues/breakpoint.mjs';

package/build/inlineAlert/InlineAlert.js

@@ -2,28 +2,35 @@
 
 var clsx = require('clsx');
 var StatusIcon = require('../statusIcon/StatusIcon.js');
+var Body = require('../body/Body.js');
 var jsxRuntime = require('react/jsx-runtime');
 var sentiment = require('../common/propsValues/sentiment.js');
 var size = require('../common/propsValues/size.js');
 
 const iconTypes = new Set([sentiment.Sentiment.NEGATIVE, sentiment.Sentiment.ERROR, sentiment.Sentiment.POSITIVE, sentiment.Sentiment.SUCCESS, sentiment.Sentiment.WARNING]);
+/**
+ * Avoid using `<InlineAlert>` component directly
+ * it's for edge cases when `<Field />` isn't suitable for some reasons.
+ *
+ * Example:
+ * ```
+ * <Field sentiment={..} message={..}>..</Field>
+ * ```
+ */
 function InlineAlert({
   id,
   type = 'neutral',
   className,
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs(Body, {
     role: "alert",
     id: id,
-    className: clsx.clsx('alert alert-detach', `alert-${type === sentiment.Sentiment.NEGATIVE || type === sentiment.Sentiment.ERROR ? 'danger' : type}`, className),
+    className: clsx.clsx('alert alert-detach', `alert-${type === sentiment.Sentiment.NEGATIVE || type === sentiment.Sentiment.ERROR ? 'danger' : type}`, 'd-flex', className),
     children: [iconTypes.has(type) && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
       sentiment: type,
       size: size.Size.SMALL
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "np-text-body-default",
-      children: children
-    })]
+    }), children]
   });
 }
 

package/build/inlineAlert/InlineAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <div\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      <div className=\"np-text-body-default\">{children}</div>\n    </div>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;AAaA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEsB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;AACjB,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AACZL,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEI,SAAI,CACb,oBAAoB,EACpB,SAASL,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpFC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACgB,GAAG,CAACN,IAAI,CAAC,iBAAIO,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAET,IAAK;MAACU,IAAI,EAAEC,SAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,cAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,sBAAsB;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACvD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      {children}\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;AAcA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACqB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,eAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZN,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAASN,MAAAA,EAAAA,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACiB,GAAG,CAACP,IAAI,CAAC,iBAAIQ,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEV,IAAK;MAACW,IAAI,EAAEC,SAAI,CAACC,KAAAA;KAAM,CAAG,EACxEX,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAEX;;;;"}

package/build/inlineAlert/InlineAlert.mjs

@@ -1,27 +1,34 @@
 import { clsx } from 'clsx';
 import StatusIcon from '../statusIcon/StatusIcon.mjs';
+import Body from '../body/Body.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Sentiment } from '../common/propsValues/sentiment.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 
 const iconTypes = new Set([Sentiment.NEGATIVE, Sentiment.ERROR, Sentiment.POSITIVE, Sentiment.SUCCESS, Sentiment.WARNING]);
+/**
+ * Avoid using `<InlineAlert>` component directly
+ * it's for edge cases when `<Field />` isn't suitable for some reasons.
+ *
+ * Example:
+ * ```
+ * <Field sentiment={..} message={..}>..</Field>
+ * ```
+ */
 function InlineAlert({
   id,
   type = 'neutral',
   className,
   children
 }) {
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsxs(Body, {
     role: "alert",
     id: id,
-    className: clsx('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`, className),
+    className: clsx('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`, 'd-flex', className),
     children: [iconTypes.has(type) && /*#__PURE__*/jsx(StatusIcon, {
       sentiment: type,
       size: Size.SMALL
-    }), /*#__PURE__*/jsx("div", {
-      className: "np-text-body-default",
-      children: children
-    })]
+    }), children]
   });
 }
 

package/build/inlineAlert/InlineAlert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <div\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      <div className=\"np-text-body-default\">{children}</div>\n    </div>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;AAaA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEsB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;AACjB,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AACZL,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEI,IAAI,CACb,oBAAoB,EACpB,SAASL,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpFC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACgB,GAAG,CAACN,IAAI,CAAC,iBAAIO,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAET,IAAK;MAACU,IAAI,EAAEC,IAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,GAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,sBAAsB;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACvD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      {children}\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;AAcA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACqB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZN,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAASN,MAAAA,EAAAA,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACiB,GAAG,CAACP,IAAI,CAAC,iBAAIQ,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEV,IAAK;MAACW,IAAI,EAAEC,IAAI,CAACC,KAAAA;KAAM,CAAG,EACxEX,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAEX;;;;"}

package/build/label/Label.js

@@ -1,21 +1,52 @@
 'use strict';
 
 var clsx = require('clsx');
+var Label_messages = require('./Label.messages.js');
+var reactIntl = require('react-intl');
+var Body = require('../body/Body.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 const Label = ({
-  id,
-  htmlFor,
   className,
-  children
+  children,
+  htmlFor,
+  id
 }) => {
   return /*#__PURE__*/jsxRuntime.jsx("label", {
     id: id,
     htmlFor: htmlFor,
-    className: clsx.clsx('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    className: clsx.clsx('np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0', className),
     children: children
   });
 };
+// eslint-disable-next-line functional/immutable-data
+Label.Optional = function Optional({
+  children,
+  className
+}) {
+  const {
+    formatMessage
+  } = reactIntl.useIntl();
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(Body, {
+      as: "span",
+      className: clsx.clsx('text-secondary', 'm-l-1', className),
+      children: formatMessage(Label_messages.optionalLabel)
+    })]
+  });
+};
+// eslint-disable-next-line functional/immutable-data
+Label.Description = function Description({
+  id,
+  children,
+  className
+}) {
+  return children ? /*#__PURE__*/jsxRuntime.jsx(Body, {
+    id: id,
+    className: clsx.clsx('text-secondary', className),
+    children: children
+  }) : null;
+};
 
 exports.Label = Label;
 //# sourceMappingURL=Label.js.map

package/build/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Label = ({ id, htmlFor, className, children }: LabelProps) => {\n  return (\n    <label\n      id={id}\n      htmlFor={htmlFor}\n      className={clsx('control-label d-flex flex-column gap-y-1 m-b-0', className)}\n    >\n      {children}\n    </label>\n  );\n};\n"],"names":["Label","id","htmlFor","className","children","_jsx","clsx"],"mappings":";;;;;AASO,MAAMA,KAAK,GAAGA,CAAC;EAAEC,EAAE;EAAEC,OAAO;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAc,KAAI;AACxE,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEJ,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEG,SAAI,CAAC,gDAAgD,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAE5EA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../body';\nimport { CommonProps } from '../common';\nimport { PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = ({ className, children, htmlFor, id }: LabelProps) => {\n  return (\n    <label\n      id={id}\n      htmlFor={htmlFor}\n      className={clsx(\n        'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n        className,\n      )}\n    >\n      {children}\n    </label>\n  );\n};\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\n// eslint-disable-next-line functional/immutable-data\nLabel.Optional = function Optional({ children, className }: LabelOptionalProps) {\n  const { formatMessage } = useIntl();\n  return (\n    <div>\n      {children}\n      <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n        {formatMessage(messages.optionalLabel)}\n      </Body>\n    </div>\n  );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\n// eslint-disable-next-line functional/immutable-data\nLabel.Description = function Description({ id, children, className }: LabelDescriptionProps) {\n  return children ? (\n    <Body id={id} className={clsx('text-secondary', className)}>\n      {children}\n    </Body>\n  ) : null;\n};\n\nexport { Label };\n"],"names":["Label","className","children","htmlFor","id","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description"],"mappings":";;;;;;;;AAuBMA,MAAAA,KAAK,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA,EAAAA;AAAE,CAAc,KAAI;AACjE,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACED,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEK,SAAI,CACb,0EAA0E,EAC1EL,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ,EAAC;AAID;AACAF,KAAK,CAACO,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEL,QAAQ;AAAED,EAAAA,SAAAA;AAA+B,CAAA,EAAA;EAC5E,MAAM;AAAEO,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AACnC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAAR,IAAAA,QAAA,EACGA,CAAAA,QAAQ,eACTG,cAAA,CAACM,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACX,SAAS,EAAEK,SAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEL,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEM,aAAa,CAACK,cAAQ,CAACC,aAAa,CAAA;AAAC,KAClC,CACR,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV,CAAC,CAAA;AAID;AACAd,KAAK,CAACe,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEX,EAAE;EAAEF,QAAQ;AAAED,EAAAA,SAAAA;AAAkC,CAAA,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbG,cAAA,CAACM,IAAI,EAAA;AAACP,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEK,SAAI,CAAC,gBAAgB,EAAEL,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA,QAAAA;GACG,CAAC,GACL,IAAI,CAAA;AACV,CAAC;;;;"}

package/build/label/Label.messages.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var reactIntl = require('react-intl');
+
+var messages = reactIntl.defineMessages({
+  optionalLabel: {
+    id: "neptune.Label.optional"
+  }
+});
+
+module.exports = messages;
+//# sourceMappingURL=Label.messages.js.map

package/build/label/Label.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.messages.js","sources":["../../src/label/Label.messages.tsx"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  optionalLabel: {\n    id: 'neptune.Label.optional',\n    defaultMessage: '(Optional)',\n  },\n});\n"],"names":["defineMessages","optionalLabel","id"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,aAAa,EAAE;IACbC,EAAE,EAAA,wBAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/label/Label.messages.mjs

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+var messages = defineMessages({
+  optionalLabel: {
+    id: "neptune.Label.optional"
+  }
+});
+
+export { messages as default };
+//# sourceMappingURL=Label.messages.mjs.map

package/build/label/Label.messages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.messages.mjs","sources":["../../src/label/Label.messages.tsx"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  optionalLabel: {\n    id: 'neptune.Label.optional',\n    defaultMessage: '(Optional)',\n  },\n});\n"],"names":["defineMessages","optionalLabel","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,aAAa,EAAE;IACbC,EAAE,EAAA,wBAAA;AAEH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/label/Label.mjs

@@ -1,19 +1,50 @@
 import { clsx } from 'clsx';
-import { jsx } from 'react/jsx-runtime';
+import messages from './Label.messages.mjs';
+import { useIntl } from 'react-intl';
+import Body from '../body/Body.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const Label = ({
-  id,
-  htmlFor,
   className,
-  children
+  children,
+  htmlFor,
+  id
 }) => {
   return /*#__PURE__*/jsx("label", {
     id: id,
     htmlFor: htmlFor,
-    className: clsx('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    className: clsx('np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0', className),
     children: children
   });
 };
+// eslint-disable-next-line functional/immutable-data
+Label.Optional = function Optional({
+  children,
+  className
+}) {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/jsxs("div", {
+    children: [children, /*#__PURE__*/jsx(Body, {
+      as: "span",
+      className: clsx('text-secondary', 'm-l-1', className),
+      children: formatMessage(messages.optionalLabel)
+    })]
+  });
+};
+// eslint-disable-next-line functional/immutable-data
+Label.Description = function Description({
+  id,
+  children,
+  className
+}) {
+  return children ? /*#__PURE__*/jsx(Body, {
+    id: id,
+    className: clsx('text-secondary', className),
+    children: children
+  }) : null;
+};
 
 export { Label };
 //# sourceMappingURL=Label.mjs.map

package/build/label/Label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Label = ({ id, htmlFor, className, children }: LabelProps) => {\n  return (\n    <label\n      id={id}\n      htmlFor={htmlFor}\n      className={clsx('control-label d-flex flex-column gap-y-1 m-b-0', className)}\n    >\n      {children}\n    </label>\n  );\n};\n"],"names":["Label","id","htmlFor","className","children","_jsx","clsx"],"mappings":";;;AASO,MAAMA,KAAK,GAAGA,CAAC;EAAEC,EAAE;EAAEC,OAAO;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAc,KAAI;AACxE,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACEJ,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEG,IAAI,CAAC,gDAAgD,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAE5EA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"Label.mjs","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../body';\nimport { CommonProps } from '../common';\nimport { PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = ({ className, children, htmlFor, id }: LabelProps) => {\n  return (\n    <label\n      id={id}\n      htmlFor={htmlFor}\n      className={clsx(\n        'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n        className,\n      )}\n    >\n      {children}\n    </label>\n  );\n};\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\n// eslint-disable-next-line functional/immutable-data\nLabel.Optional = function Optional({ children, className }: LabelOptionalProps) {\n  const { formatMessage } = useIntl();\n  return (\n    <div>\n      {children}\n      <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n        {formatMessage(messages.optionalLabel)}\n      </Body>\n    </div>\n  );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\n// eslint-disable-next-line functional/immutable-data\nLabel.Description = function Description({ id, children, className }: LabelDescriptionProps) {\n  return children ? (\n    <Body id={id} className={clsx('text-secondary', className)}>\n      {children}\n    </Body>\n  ) : null;\n};\n\nexport { Label };\n"],"names":["Label","className","children","htmlFor","id","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description"],"mappings":";;;;;;AAuBMA,MAAAA,KAAK,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA,EAAAA;AAAE,CAAc,KAAI;AACjE,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACED,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEK,IAAI,CACb,0EAA0E,EAC1EL,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ,EAAC;AAID;AACAF,KAAK,CAACO,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEL,QAAQ;AAAED,EAAAA,SAAAA;AAA+B,CAAA,EAAA;EAC5E,MAAM;AAAEO,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AACnC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAAR,IAAAA,QAAA,EACGA,CAAAA,QAAQ,eACTG,GAAA,CAACM,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACX,SAAS,EAAEK,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEL,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEM,aAAa,CAACK,QAAQ,CAACC,aAAa,CAAA;AAAC,KAClC,CACR,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV,CAAC,CAAA;AAID;AACAd,KAAK,CAACe,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEX,EAAE;EAAEF,QAAQ;AAAED,EAAAA,SAAAA;AAAkC,CAAA,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbG,GAAA,CAACM,IAAI,EAAA;AAACP,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEK,IAAI,CAAC,gBAAgB,EAAEL,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA,QAAAA;GACG,CAAC,GACL,IAAI,CAAA;AACV,CAAC;;;;"}

package/build/main.css

@@ -1719,18 +1719,10 @@ button.np-option {
   white-space: nowrap;
   width: 100%;
 }
-.np-date-trigger .control-label {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-theme-personal .np-date-trigger {
   padding-left: 16px;
   padding-left: var(--size-16);
 }
-.np-theme-personal .np-date-trigger .control-label + span {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .clear-btn {
   transition: color 0.15s ease-in-out;
   color: #c9cbce;
@@ -2385,6 +2377,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .np-input-group {
   display: inline-grid;
   width: 100%;

package/build/styles/dateLookup/dateTrigger/DateTrigger.css

@@ -4,18 +4,10 @@
   white-space: nowrap;
   width: 100%;
 }
-.np-date-trigger .control-label {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-theme-personal .np-date-trigger {
   padding-left: 16px;
   padding-left: var(--size-16);
 }
-.np-theme-personal .np-date-trigger .control-label + span {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .clear-btn {
   transition: color 0.15s ease-in-out;
   color: #c9cbce;

package/build/styles/field/Field.css

@@ -0,0 +1,4 @@
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}

package/build/styles/main.css

@@ -1719,18 +1719,10 @@ button.np-option {
   white-space: nowrap;
   width: 100%;
 }
-.np-date-trigger .control-label {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-theme-personal .np-date-trigger {
   padding-left: 16px;
   padding-left: var(--size-16);
 }
-.np-theme-personal .np-date-trigger .control-label + span {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .clear-btn {
   transition: color 0.15s ease-in-out;
   color: #c9cbce;
@@ -2385,6 +2377,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .np-input-group {
   display: inline-grid;
   width: 100%;

package/build/tabs/Tab.js

@@ -1,15 +1,12 @@
 'use strict';
 
 var clsx = require('clsx');
-var PropTypes = require('prop-types');
 var React = require('react');
+var useEffectEvent = require('../common/hooks/useEffectEvent.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-
-const Tab = /*#__PURE__*/React.forwardRef(({
+const noop = () => {};
+const Tab = /*#__PURE__*/React.forwardRef(function Tab({
   children,
   id,
   disabled,
@@ -18,21 +15,19 @@ const Tab = /*#__PURE__*/React.forwardRef(({
   onKeyDown,
   onClick,
   style,
-  focusTab
-}, reference) => {
+  focusTab = noop
+}, reference) {
+  const handleFocusTab = useEffectEvent.useEffectEvent(focusTab);
   const firstUpdate = React.useRef(true);
-  const checkFocus = () => {
+  React.useEffect(function checkFocus() {
     if (firstUpdate.current) {
       firstUpdate.current = false;
       return;
     }
-    if (selected && focusTab) {
-      focusTab();
+    if (selected) {
+      handleFocusTab();
     }
-  };
-  React.useEffect(() => {
-    checkFocus();
-  }, [selected]);
+  }, [handleFocusTab, selected]);
   return /*#__PURE__*/jsxRuntime.jsx("li", {
     ref: reference,
     className: clsx.clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
@@ -44,10 +39,10 @@ const Tab = /*#__PURE__*/React.forwardRef(({
     id: id,
     "aria-selected": selected ? 'true' : 'false',
     "aria-disabled": disabled ? 'true' : 'false',
-    "aria-controls": disabled ? null : panelId,
-    tabIndex: "0",
+    "aria-controls": disabled ? undefined : panelId,
+    tabIndex: 0,
     style: style,
-    onKeyDown: disabled ? null : onKeyDown,
+    onKeyDown: disabled ? undefined : onKeyDown,
     onClick: onClick,
     children: /*#__PURE__*/jsxRuntime.jsx("span", {
       className: "tabs__tab__content",
@@ -55,26 +50,6 @@ const Tab = /*#__PURE__*/React.forwardRef(({
     })
   });
 });
-Tab.defaultProps = {
-  disabled: false,
-  selected: false,
-  onClick: null,
-  style: null,
-  focusTab: null
-};
-Tab.propTypes = {
-  children: PropTypes__default.default.node.isRequired,
-  disabled: PropTypes__default.default.bool,
-  selected: PropTypes__default.default.bool,
-  id: PropTypes__default.default.string.isRequired,
-  panelId: PropTypes__default.default.string.isRequired,
-  style: PropTypes__default.default.shape({
-    width: PropTypes__default.default.string
-  }),
-  focusTab: PropTypes__default.default.func,
-  onKeyDown: PropTypes__default.default.func.isRequired,
-  onClick: PropTypes__default.default.func
-};
 
 module.exports = Tab;
 //# sourceMappingURL=Tab.js.map

package/build/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../src/tabs/Tab.js"],"sourcesContent":["import { clsx } from 'clsx';\nimport PropTypes from 'prop-types';\nimport { forwardRef, useEffect, useRef } from 'react';\n\nconst Tab = forwardRef(\n  (\n    { children, id, disabled, panelId, selected, onKeyDown, onClick, style, focusTab },\n    reference,\n  ) => {\n    const firstUpdate = useRef(true);\n\n    const checkFocus = () => {\n      if (firstUpdate.current) {\n        firstUpdate.current = false;\n        return;\n      }\n\n      if (selected && focusTab) {\n        focusTab();\n      }\n    };\n\n    useEffect(() => {\n      checkFocus();\n    }, [selected]);\n\n    return (\n      <li\n        ref={reference}\n        className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {\n          'tabs__tab--selected': selected,\n          clickable: !disabled,\n          disabled,\n        })}\n        role=\"tab\"\n        id={id}\n        aria-selected={selected ? 'true' : 'false'}\n        aria-disabled={disabled ? 'true' : 'false'}\n        aria-controls={disabled ? null : panelId}\n        tabIndex=\"0\"\n        style={style}\n        onKeyDown={disabled ? null : onKeyDown}\n        onClick={onClick}\n      >\n        <span className=\"tabs__tab__content\">{children}</span>\n      </li>\n    );\n  },\n);\n\nTab.defaultProps = {\n  disabled: false,\n  selected: false,\n  onClick: null,\n  style: null,\n  focusTab: null,\n};\n\nTab.propTypes = {\n  children: PropTypes.node.isRequired,\n  disabled: PropTypes.bool,\n  selected: PropTypes.bool,\n  id: PropTypes.string.isRequired,\n  panelId: PropTypes.string.isRequired,\n  style: PropTypes.shape({ width: PropTypes.string }),\n  focusTab: PropTypes.func,\n  onKeyDown: PropTypes.func.isRequired,\n  onClick: PropTypes.func,\n};\n\nexport default Tab;\n"],"names":["Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","firstUpdate","useRef","checkFocus","current","useEffect","_jsx","ref","className","clsx","clickable","role","tabIndex","defaultProps","propTypes","PropTypes","node","isRequired","bool","string","shape","width","func"],"mappings":";;;;;;;;;;;AAIA,MAAMA,GAAG,gBAAGC,gBAAU,CACpB,CACE;EAAEC,QAAQ;EAAEC,EAAE;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,OAAO;EAAEC,KAAK;AAAEC,EAAAA,QAAAA;AAAS,CAAC,EAClFC,SAAS,KACN;AACH,EAAA,MAAMC,WAAW,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;EAEhC,MAAMC,UAAU,GAAGA,MAAM;IACvB,IAAIF,WAAW,CAACG,OAAO,EAAE;MACvBH,WAAW,CAACG,OAAO,GAAG,KAAK,CAAA;AAC3B,MAAA,OAAA;AACF,KAAA;IAEA,IAAIT,QAAQ,IAAII,QAAQ,EAAE;AACxBA,MAAAA,QAAQ,EAAE,CAAA;AACZ,KAAA;GACD,CAAA;AAEDM,EAAAA,eAAS,CAAC,MAAM;AACdF,IAAAA,UAAU,EAAE,CAAA;AACd,GAAC,EAAE,CAACR,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEW,cAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAEP,SAAU;IACfQ,SAAS,EAAEC,SAAI,CAAC,WAAW,EAAEd,QAAQ,GAAG,yBAAyB,GAAG,oBAAoB,EAAE;AACxF,MAAA,qBAAqB,EAAEA,QAAQ;MAC/Be,SAAS,EAAE,CAACjB,QAAQ;AACpBA,MAAAA,QAAAA;AACF,KAAC,CAAE;AACHkB,IAAAA,IAAI,EAAC,KAAK;AACVnB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAG,IAAI,GAAGC,OAAQ;AACzCkB,IAAAA,QAAQ,EAAC,GAAG;AACZd,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAG,IAAI,GAAGG,SAAU;AACvCC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBe,cAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAjB,MAAAA,QAAA,EAAEA,QAAAA;KAAe,CAAA;AAAC,GACpD,CAAC,CAAA;AAET,CACF,EAAC;AAEDF,GAAG,CAACwB,YAAY,GAAG;AACjBpB,EAAAA,QAAQ,EAAE,KAAK;AACfE,EAAAA,QAAQ,EAAE,KAAK;AACfE,EAAAA,OAAO,EAAE,IAAI;AACbC,EAAAA,KAAK,EAAE,IAAI;AACXC,EAAAA,QAAQ,EAAE,IAAA;AACZ,CAAC,CAAA;AAEDV,GAAG,CAACyB,SAAS,GAAG;AACdvB,EAAAA,QAAQ,EAAEwB,0BAAS,CAACC,IAAI,CAACC,UAAU;EACnCxB,QAAQ,EAAEsB,0BAAS,CAACG,IAAI;EACxBvB,QAAQ,EAAEoB,0BAAS,CAACG,IAAI;AACxB1B,EAAAA,EAAE,EAAEuB,0BAAS,CAACI,MAAM,CAACF,UAAU;AAC/BvB,EAAAA,OAAO,EAAEqB,0BAAS,CAACI,MAAM,CAACF,UAAU;AACpCnB,EAAAA,KAAK,EAAEiB,0BAAS,CAACK,KAAK,CAAC;IAAEC,KAAK,EAAEN,0BAAS,CAACI,MAAAA;AAAO,GAAC,CAAC;EACnDpB,QAAQ,EAAEgB,0BAAS,CAACO,IAAI;AACxB1B,EAAAA,SAAS,EAAEmB,0BAAS,CAACO,IAAI,CAACL,UAAU;EACpCpB,OAAO,EAAEkB,0BAAS,CAACO,IAAAA;AACrB,CAAC;;;;"}
+{"version":3,"file":"Tab.js","sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { useEffectEvent } from '../common/hooks/useEffectEvent';\n\nexport interface TabProps {\n  children?: React.ReactNode;\n  disabled?: boolean;\n  selected?: boolean;\n  id: string;\n  panelId: string;\n  style?: React.CSSProperties;\n  focusTab?: () => void;\n  onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nconst noop = () => {};\n\nconst Tab = forwardRef(function Tab(\n  {\n    children,\n    id,\n    disabled,\n    panelId,\n    selected,\n    onKeyDown,\n    onClick,\n    style,\n    focusTab = noop,\n  }: TabProps,\n  reference: React.ForwardedRef<HTMLLIElement>,\n) {\n  const handleFocusTab = useEffectEvent(focusTab);\n  const firstUpdate = useRef(true);\n  useEffect(\n    function checkFocus() {\n      if (firstUpdate.current) {\n        firstUpdate.current = false;\n        return;\n      }\n\n      if (selected) {\n        handleFocusTab();\n      }\n    },\n    [handleFocusTab, selected],\n  );\n\n  return (\n    <li\n      ref={reference}\n      className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {\n        'tabs__tab--selected': selected,\n        clickable: !disabled,\n        disabled,\n      })}\n      role=\"tab\"\n      id={id}\n      aria-selected={selected ? 'true' : 'false'}\n      aria-disabled={disabled ? 'true' : 'false'}\n      aria-controls={disabled ? undefined : panelId}\n      tabIndex={0}\n      style={style}\n      onKeyDown={disabled ? undefined : onKeyDown}\n      onClick={onClick}\n    >\n      <span className=\"tabs__tab__content\">{children}</span>\n    </li>\n  );\n});\n\nexport default Tab;\n"],"names":["noop","Tab","forwardRef","children","id","disabled","panelId","selected","onKeyDown","onClick","style","focusTab","reference","handleFocusTab","useEffectEvent","firstUpdate","useRef","useEffect","checkFocus","current","_jsx","ref","className","clsx","clickable","role","undefined","tabIndex"],"mappings":";;;;;;;AAgBA,MAAMA,IAAI,GAAGA,MAAK,EAAG,CAAA;AAErB,MAAMC,GAAG,gBAAGC,gBAAU,CAAC,SAASD,GAAGA,CACjC;EACEE,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLC,EAAAA,QAAQ,GAAGX,IAAAA;AAAI,CACN,EACXY,SAA4C,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,6BAAc,CAACH,QAAQ,CAAC,CAAA;AAC/C,EAAA,MAAMI,WAAW,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;AAChCC,EAAAA,eAAS,CACP,SAASC,UAAUA,GAAA;IACjB,IAAIH,WAAW,CAACI,OAAO,EAAE;MACvBJ,WAAW,CAACI,OAAO,GAAG,KAAK,CAAA;AAC3B,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,IAAIZ,QAAQ,EAAE;AACZM,MAAAA,cAAc,EAAE,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACA,cAAc,EAAEN,QAAQ,CAAC,CAC3B,CAAA;AAED,EAAA,oBACEa,cAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,SAAI,CAAC,WAAW,EAAEhB,QAAQ,GAAG,yBAAyB,GAAG,oBAAoB,EAAE;AACxF,MAAA,qBAAqB,EAAEA,QAAQ;MAC/BiB,SAAS,EAAE,CAACnB,QAAQ;AACpBA,MAAAA,QAAAA;AACD,KAAA,CAAE;AACHoB,IAAAA,IAAI,EAAC,KAAK;AACVrB,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeG,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeF,QAAQ,GAAG,MAAM,GAAG,OAAQ;AAC3C,IAAA,eAAA,EAAeA,QAAQ,GAAGqB,SAAS,GAAGpB,OAAQ;AAC9CqB,IAAAA,QAAQ,EAAE,CAAE;AACZjB,IAAAA,KAAK,EAAEA,KAAM;AACbF,IAAAA,SAAS,EAAEH,QAAQ,GAAGqB,SAAS,GAAGlB,SAAU;AAC5CC,IAAAA,OAAO,EAAEA,OAAQ;AAAAN,IAAAA,QAAA,eAEjBiB,cAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA,QAAAA;KAAe,CAAA;AACvD,GAAI,CAAC,CAAA;AAET,CAAC;;;;"}