@transferwise/components 0.0.0-experimental-0400704 → 0.0.0-experimental-c09cb11

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  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 }: LabelProps) => {\n  return <div className={clsx('np-label d-flex flex-column', className)}>{children}</div>;\n};\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps> & {\n  id?: string;\n  required?: boolean;\n  /**\n   * Connect label with form control via `htmlFor` prop, or `id` + `aria-labelledby`\n   */\n  htmlFor?: string | undefined;\n};\n\n/**\n * Avoid wrapping form control with `<Label.Text >`, always connect label and control via `htmlFor` + `id` props\n *\n * Example:\n * ```\n * <Label>\n *  <Label.Text htmlFor=\"foo\">Money input with label</Label.Text>\n *  <CustomComponent id=\"foo\" />\n * </Label>\n * ```\n */\n// eslint-disable-next-line functional/immutable-data\nLabel.Text = function Text({\n  id,\n  children,\n  required = false,\n  htmlFor,\n  className,\n}: LabelOptionalProps) {\n  const { formatMessage } = useIntl();\n  return (\n    <label id={id} htmlFor={htmlFor} className=\"np-text-body-default-bold text-primary m-b-0\">\n      {children}\n      {required ? null : (\n        <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n          {formatMessage(messages.optionalLabel)}\n        </Body>\n      )}\n    </label>\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","_jsx","clsx","Text","id","required","htmlFor","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description"],"mappings":";;;;;;;;AAqBMA,MAAAA,KAAK,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAsB,CAAA,KAAI;AACpD,EAAA,oBAAOC,cAAA,CAAA,KAAA,EAAA;AAAKF,IAAAA,SAAS,EAAEG,SAAI,CAAC,6BAA6B,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAM,CAAC,CAAA;AACzF,EAAC;AAWD;;;;;;;;;;AAUG;AACH;AACAF,KAAK,CAACK,IAAI,GAAG,SAASA,IAAIA,CAAC;EACzBC,EAAE;EACFJ,QAAQ;AACRK,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPP,EAAAA,SAAAA;AACmB,CAAA,EAAA;EACnB,MAAM;AAAEQ,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AACnC,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;AAAOL,IAAAA,EAAE,EAAEA,EAAG;AAACE,IAAAA,OAAO,EAAEA,OAAQ;AAACP,IAAAA,SAAS,EAAC,8CAA8C;IAAAC,QAAA,EAAA,CACtFA,QAAQ,EACRK,QAAQ,GAAG,IAAI,gBACdJ,cAAA,CAACS,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEG,SAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEH,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,cAAQ,CAACC,aAAa,CAAA;AAAC,KAClC,CACP,CAAA;AAAA,GACI,CAAC,CAAA;AAEZ,CAAC,CAAA;AAID;AACAf,KAAK,CAACgB,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEV,EAAE;EAAEJ,QAAQ;AAAED,EAAAA,SAAAA;AAAkC,CAAA,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbC,cAAA,CAACS,IAAI,EAAA;AAACN,IAAAA,EAAE,EAAEA,EAAG;AAACL,IAAAA,SAAS,EAAEG,SAAI,CAAC,gBAAgB,EAAEH,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,63 @@
 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
 }) => {
-  return /*#__PURE__*/jsx("label", {
+  return /*#__PURE__*/jsx("div", {
+    className: clsx('np-label d-flex flex-column', className),
+    children: children
+  });
+};
+/**
+ * Avoid wrapping form control with `<Label.Text >`, always connect label and control via `htmlFor` + `id` props
+ *
+ * Example:
+ * ```
+ * <Label>
+ *  <Label.Text htmlFor="foo">Money input with label</Label.Text>
+ *  <CustomComponent id="foo" />
+ * </Label>
+ * ```
+ */
+// eslint-disable-next-line functional/immutable-data
+Label.Text = function Text({
+  id,
+  children,
+  required = false,
+  htmlFor,
+  className
+}) {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/jsxs("label", {
     id: id,
     htmlFor: htmlFor,
-    className: clsx('control-label d-flex flex-column gap-y-1 m-b-0', className),
-    children: children
+    className: "np-text-body-default-bold text-primary m-b-0",
+    children: [children, required ? null : /*#__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  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 }: LabelProps) => {\n  return <div className={clsx('np-label d-flex flex-column', className)}>{children}</div>;\n};\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps> & {\n  id?: string;\n  required?: boolean;\n  /**\n   * Connect label with form control via `htmlFor` prop, or `id` + `aria-labelledby`\n   */\n  htmlFor?: string | undefined;\n};\n\n/**\n * Avoid wrapping form control with `<Label.Text >`, always connect label and control via `htmlFor` + `id` props\n *\n * Example:\n * ```\n * <Label>\n *  <Label.Text htmlFor=\"foo\">Money input with label</Label.Text>\n *  <CustomComponent id=\"foo\" />\n * </Label>\n * ```\n */\n// eslint-disable-next-line functional/immutable-data\nLabel.Text = function Text({\n  id,\n  children,\n  required = false,\n  htmlFor,\n  className,\n}: LabelOptionalProps) {\n  const { formatMessage } = useIntl();\n  return (\n    <label id={id} htmlFor={htmlFor} className=\"np-text-body-default-bold text-primary m-b-0\">\n      {children}\n      {required ? null : (\n        <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n          {formatMessage(messages.optionalLabel)}\n        </Body>\n      )}\n    </label>\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","_jsx","clsx","Text","id","required","htmlFor","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description"],"mappings":";;;;;;AAqBMA,MAAAA,KAAK,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAsB,CAAA,KAAI;AACpD,EAAA,oBAAOC,GAAA,CAAA,KAAA,EAAA;AAAKF,IAAAA,SAAS,EAAEG,IAAI,CAAC,6BAA6B,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAM,CAAC,CAAA;AACzF,EAAC;AAWD;;;;;;;;;;AAUG;AACH;AACAF,KAAK,CAACK,IAAI,GAAG,SAASA,IAAIA,CAAC;EACzBC,EAAE;EACFJ,QAAQ;AACRK,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPP,EAAAA,SAAAA;AACmB,CAAA,EAAA;EACnB,MAAM;AAAEQ,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AACnC,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;AAAOL,IAAAA,EAAE,EAAEA,EAAG;AAACE,IAAAA,OAAO,EAAEA,OAAQ;AAACP,IAAAA,SAAS,EAAC,8CAA8C;IAAAC,QAAA,EAAA,CACtFA,QAAQ,EACRK,QAAQ,GAAG,IAAI,gBACdJ,GAAA,CAACS,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEG,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEH,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,QAAQ,CAACC,aAAa,CAAA;AAAC,KAClC,CACP,CAAA;AAAA,GACI,CAAC,CAAA;AAEZ,CAAC,CAAA;AAID;AACAf,KAAK,CAACgB,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEV,EAAE;EAAEJ,QAAQ;AAAED,EAAAA,SAAAA;AAAkC,CAAA,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbC,GAAA,CAACS,IAAI,EAAA;AAACN,IAAAA,EAAE,EAAEA,EAAG;AAACL,IAAAA,SAAS,EAAEG,IAAI,CAAC,gBAAgB,EAAEH,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,12 +1,15 @@
 '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');
 
-const noop = () => {};
-const Tab = /*#__PURE__*/React.forwardRef(function Tab({
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+
+const Tab = /*#__PURE__*/React.forwardRef(({
   children,
   id,
   disabled,
@@ -15,19 +18,21 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
   onKeyDown,
   onClick,
   style,
-  focusTab = noop
-}, reference) {
-  const handleFocusTab = useEffectEvent.useEffectEvent(focusTab);
+  focusTab
+}, reference) => {
   const firstUpdate = React.useRef(true);
-  React.useEffect(function checkFocus() {
+  const checkFocus = () => {
     if (firstUpdate.current) {
       firstUpdate.current = false;
       return;
     }
-    if (selected) {
-      handleFocusTab();
+    if (selected && focusTab) {
+      focusTab();
     }
-  }, [handleFocusTab, selected]);
+  };
+  React.useEffect(() => {
+    checkFocus();
+  }, [selected]);
   return /*#__PURE__*/jsxRuntime.jsx("li", {
     ref: reference,
     className: clsx.clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
@@ -39,10 +44,10 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
     id: id,
     "aria-selected": selected ? 'true' : 'false',
     "aria-disabled": disabled ? 'true' : 'false',
-    "aria-controls": disabled ? undefined : panelId,
-    tabIndex: 0,
+    "aria-controls": disabled ? null : panelId,
+    tabIndex: "0",
     style: style,
-    onKeyDown: disabled ? undefined : onKeyDown,
+    onKeyDown: disabled ? null : onKeyDown,
     onClick: onClick,
     children: /*#__PURE__*/jsxRuntime.jsx("span", {
       className: "tabs__tab__content",
@@ -50,6 +55,26 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
     })
   });
 });
+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.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;;;;"}
+{"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;;;;"}

package/build/tabs/Tab.mjs

@@ -1,10 +1,9 @@
 import { clsx } from 'clsx';
+import PropTypes from 'prop-types';
 import { forwardRef, useRef, useEffect } from 'react';
-import { useEffectEvent } from '../common/hooks/useEffectEvent.mjs';
 import { jsx } from 'react/jsx-runtime';
 
-const noop = () => {};
-const Tab = /*#__PURE__*/forwardRef(function Tab({
+const Tab = /*#__PURE__*/forwardRef(({
   children,
   id,
   disabled,
@@ -13,19 +12,21 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
   onKeyDown,
   onClick,
   style,
-  focusTab = noop
-}, reference) {
-  const handleFocusTab = useEffectEvent(focusTab);
+  focusTab
+}, reference) => {
   const firstUpdate = useRef(true);
-  useEffect(function checkFocus() {
+  const checkFocus = () => {
     if (firstUpdate.current) {
       firstUpdate.current = false;
       return;
     }
-    if (selected) {
-      handleFocusTab();
+    if (selected && focusTab) {
+      focusTab();
     }
-  }, [handleFocusTab, selected]);
+  };
+  useEffect(() => {
+    checkFocus();
+  }, [selected]);
   return /*#__PURE__*/jsx("li", {
     ref: reference,
     className: clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
@@ -37,10 +38,10 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
     id: id,
     "aria-selected": selected ? 'true' : 'false',
     "aria-disabled": disabled ? 'true' : 'false',
-    "aria-controls": disabled ? undefined : panelId,
-    tabIndex: 0,
+    "aria-controls": disabled ? null : panelId,
+    tabIndex: "0",
     style: style,
-    onKeyDown: disabled ? undefined : onKeyDown,
+    onKeyDown: disabled ? null : onKeyDown,
     onClick: onClick,
     children: /*#__PURE__*/jsx("span", {
       className: "tabs__tab__content",
@@ -48,6 +49,26 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
     })
   });
 });
+Tab.defaultProps = {
+  disabled: false,
+  selected: false,
+  onClick: null,
+  style: null,
+  focusTab: null
+};
+Tab.propTypes = {
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+  selected: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  panelId: PropTypes.string.isRequired,
+  style: PropTypes.shape({
+    width: PropTypes.string
+  }),
+  focusTab: PropTypes.func,
+  onKeyDown: PropTypes.func.isRequired,
+  onClick: PropTypes.func
+};
 
 export { Tab as default };
 //# sourceMappingURL=Tab.mjs.map

package/build/tabs/Tab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.mjs","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,UAAU,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,cAAc,CAACH,QAAQ,CAAC,CAAA;AAC/C,EAAA,MAAMI,WAAW,GAAGC,MAAM,CAAC,IAAI,CAAC,CAAA;AAChCC,EAAAA,SAAS,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,GAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;IACfU,SAAS,EAAEC,IAAI,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,GAAA,CAAA,MAAA,EAAA;AAAME,MAAAA,SAAS,EAAC,oBAAoB;AAAAnB,MAAAA,QAAA,EAAEA,QAAAA;KAAe,CAAA;AACvD,GAAI,CAAC,CAAA;AAET,CAAC;;;;"}
+{"version":3,"file":"Tab.mjs","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,UAAU,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,MAAM,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,SAAS,CAAC,MAAM;AACdF,IAAAA,UAAU,EAAE,CAAA;AACd,GAAC,EAAE,CAACR,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEW,GAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,GAAG,EAAEP,SAAU;IACfQ,SAAS,EAAEC,IAAI,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,GAAA,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,SAAS,CAACC,IAAI,CAACC,UAAU;EACnCxB,QAAQ,EAAEsB,SAAS,CAACG,IAAI;EACxBvB,QAAQ,EAAEoB,SAAS,CAACG,IAAI;AACxB1B,EAAAA,EAAE,EAAEuB,SAAS,CAACI,MAAM,CAACF,UAAU;AAC/BvB,EAAAA,OAAO,EAAEqB,SAAS,CAACI,MAAM,CAACF,UAAU;AACpCnB,EAAAA,KAAK,EAAEiB,SAAS,CAACK,KAAK,CAAC;IAAEC,KAAK,EAAEN,SAAS,CAACI,MAAAA;AAAO,GAAC,CAAC;EACnDpB,QAAQ,EAAEgB,SAAS,CAACO,IAAI;AACxB1B,EAAAA,SAAS,EAAEmB,SAAS,CAACO,IAAI,CAACL,UAAU;EACpCpB,OAAO,EAAEkB,SAAS,CAACO,IAAAA;AACrB,CAAC;;;;"}

package/build/tabs/TabList.js

@@ -1,16 +1,24 @@
 'use strict';
 
+var PropTypes = require('prop-types');
 var jsxRuntime = require('react/jsx-runtime');
 
-function TabList({
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+
+const TabList = ({
   children
-}) {
+}) => {
   return /*#__PURE__*/jsxRuntime.jsx("ul", {
     className: "tabs__tab-list",
     role: "tablist",
     children: children
   });
-}
+};
+TabList.propTypes = {
+  children: PropTypes__default.default.oneOfType([PropTypes__default.default.object, PropTypes__default.default.array]).isRequired
+};
 
 module.exports = TabList;
 //# sourceMappingURL=TabList.js.map

package/build/tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["export interface TabListProps {\n  children?: React.ReactNode;\n}\n\nexport default function TabList({ children }: TabListProps) {\n  return (\n    <ul className=\"tabs__tab-list\" role=\"tablist\">\n      {children}\n    </ul>\n  );\n}\n"],"names":["TabList","children","_jsx","className","role"],"mappings":";;;;AAIc,SAAUA,OAAOA,CAAC;AAAEC,EAAAA,QAAAA;AAAwB,CAAA,EAAA;AACxD,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,gBAAgB;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAH,IAAAA,QAAA,EAC1CA,QAAAA;AAAQ,GACP,CAAC,CAAA;AAET;;;;"}
+{"version":3,"file":"TabList.js","sources":["../../src/tabs/TabList.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst TabList = ({ children }) => {\n  return (\n    <ul className=\"tabs__tab-list\" role=\"tablist\">\n      {children}\n    </ul>\n  );\n};\n\nTabList.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,\n};\n\nexport default TabList;\n"],"names":["TabList","children","_jsx","className","role","propTypes","PropTypes","oneOfType","object","array","isRequired"],"mappings":";;;;;;;;;AAEMA,MAAAA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAK;AAChC,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,gBAAgB;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAH,IAAAA,QAAA,EAC1CA,QAAAA;AAAQ,GACP,CAAC,CAAA;AAET,EAAC;AAEDD,OAAO,CAACK,SAAS,GAAG;AAClBJ,EAAAA,QAAQ,EAAEK,0BAAS,CAACC,SAAS,CAAC,CAACD,0BAAS,CAACE,MAAM,EAAEF,0BAAS,CAACG,KAAK,CAAC,CAAC,CAACC,UAAAA;AACrE,CAAC;;;;"}

package/build/tabs/TabList.mjs

@@ -1,14 +1,18 @@
+import PropTypes from 'prop-types';
 import { jsx } from 'react/jsx-runtime';
 
-function TabList({
+const TabList = ({
   children
-}) {
+}) => {
   return /*#__PURE__*/jsx("ul", {
     className: "tabs__tab-list",
     role: "tablist",
     children: children
   });
-}
+};
+TabList.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
+};
 
 export { TabList as default };
 //# sourceMappingURL=TabList.mjs.map

package/build/tabs/TabList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.mjs","sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["export interface TabListProps {\n  children?: React.ReactNode;\n}\n\nexport default function TabList({ children }: TabListProps) {\n  return (\n    <ul className=\"tabs__tab-list\" role=\"tablist\">\n      {children}\n    </ul>\n  );\n}\n"],"names":["TabList","children","_jsx","className","role"],"mappings":";;AAIc,SAAUA,OAAOA,CAAC;AAAEC,EAAAA,QAAAA;AAAwB,CAAA,EAAA;AACxD,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,gBAAgB;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAH,IAAAA,QAAA,EAC1CA,QAAAA;AAAQ,GACP,CAAC,CAAA;AAET;;;;"}
+{"version":3,"file":"TabList.mjs","sources":["../../src/tabs/TabList.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst TabList = ({ children }) => {\n  return (\n    <ul className=\"tabs__tab-list\" role=\"tablist\">\n      {children}\n    </ul>\n  );\n};\n\nTabList.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,\n};\n\nexport default TabList;\n"],"names":["TabList","children","_jsx","className","role","propTypes","PropTypes","oneOfType","object","array","isRequired"],"mappings":";;;AAEMA,MAAAA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,QAAAA;AAAS,CAAC,KAAK;AAChC,EAAA,oBACEC,GAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC,gBAAgB;AAACC,IAAAA,IAAI,EAAC,SAAS;AAAAH,IAAAA,QAAA,EAC1CA,QAAAA;AAAQ,GACP,CAAC,CAAA;AAET,EAAC;AAEDD,OAAO,CAACK,SAAS,GAAG;AAClBJ,EAAAA,QAAQ,EAAEK,SAAS,CAACC,SAAS,CAAC,CAACD,SAAS,CAACE,MAAM,EAAEF,SAAS,CAACG,KAAK,CAAC,CAAC,CAACC,UAAAA;AACrE,CAAC;;;;"}

package/build/tabs/TabPanel.js

@@ -1,13 +1,18 @@
 'use strict';
 
+var PropTypes = require('prop-types');
 var jsxRuntime = require('react/jsx-runtime');
 
-function TabPanel({
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+
+const TabPanel = ({
   children,
   id,
   tabId,
   style
-}) {
+}) => {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "tabs__panel",
     role: "tabpanel",
@@ -16,7 +21,15 @@ function TabPanel({
     style: style,
     children: children
   });
-}
+};
+TabPanel.propTypes = {
+  children: PropTypes__default.default.node.isRequired,
+  id: PropTypes__default.default.string.isRequired,
+  tabId: PropTypes__default.default.string.isRequired,
+  style: PropTypes__default.default.shape({
+    width: PropTypes__default.default.string.isRequired
+  }).isRequired
+};
 
 module.exports = TabPanel;
 //# sourceMappingURL=TabPanel.js.map

package/build/tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../src/tabs/TabPanel.tsx"],"sourcesContent":["export interface TabPanelProps {\n  children?: React.ReactNode;\n  id: string;\n  tabId: string;\n  style: React.CSSProperties;\n}\n\nexport default function TabPanel({ children, id, tabId, style }: TabPanelProps) {\n  return (\n    <div className=\"tabs__panel\" role=\"tabpanel\" id={id} aria-labelledby={tabId} style={style}>\n      {children}\n    </div>\n  );\n}\n"],"names":["TabPanel","children","id","tabId","style","_jsx","className","role"],"mappings":";;;;AAOwB,SAAAA,QAAQA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC,KAAK;AAAEC,EAAAA,KAAAA;AAAsB,CAAA,EAAA;AAC5E,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,aAAa;AAACC,IAAAA,IAAI,EAAC,UAAU;AAACL,IAAAA,EAAE,EAAEA,EAAG;AAAC,IAAA,iBAAA,EAAiBC,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAM;AAAAH,IAAAA,QAAA,EACvFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"TabPanel.js","sources":["../../src/tabs/TabPanel.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst TabPanel = ({ children, id, tabId, style }) => {\n  return (\n    <div className=\"tabs__panel\" role=\"tabpanel\" id={id} aria-labelledby={tabId} style={style}>\n      {children}\n    </div>\n  );\n};\n\nTabPanel.propTypes = {\n  children: PropTypes.node.isRequired,\n  id: PropTypes.string.isRequired,\n  tabId: PropTypes.string.isRequired,\n  style: PropTypes.shape({\n    width: PropTypes.string.isRequired,\n  }).isRequired,\n};\n\nexport default TabPanel;\n"],"names":["TabPanel","children","id","tabId","style","_jsx","className","role","propTypes","PropTypes","node","isRequired","string","shape","width"],"mappings":";;;;;;;;;AAEMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC,KAAK;AAAEC,EAAAA,KAAAA;AAAM,CAAC,KAAK;AACnD,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,aAAa;AAACC,IAAAA,IAAI,EAAC,UAAU;AAACL,IAAAA,EAAE,EAAEA,EAAG;AAAC,IAAA,iBAAA,EAAiBC,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAM;AAAAH,IAAAA,QAAA,EACvFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV,EAAC;AAEDD,QAAQ,CAACQ,SAAS,GAAG;AACnBP,EAAAA,QAAQ,EAAEQ,0BAAS,CAACC,IAAI,CAACC,UAAU;AACnCT,EAAAA,EAAE,EAAEO,0BAAS,CAACG,MAAM,CAACD,UAAU;AAC/BR,EAAAA,KAAK,EAAEM,0BAAS,CAACG,MAAM,CAACD,UAAU;AAClCP,EAAAA,KAAK,EAAEK,0BAAS,CAACI,KAAK,CAAC;AACrBC,IAAAA,KAAK,EAAEL,0BAAS,CAACG,MAAM,CAACD,UAAAA;AAC1B,GAAC,CAAC,CAACA,UAAAA;AACL,CAAC;;;;"}

package/build/tabs/TabPanel.mjs

@@ -1,11 +1,12 @@
+import PropTypes from 'prop-types';
 import { jsx } from 'react/jsx-runtime';
 
-function TabPanel({
+const TabPanel = ({
   children,
   id,
   tabId,
   style
-}) {
+}) => {
   return /*#__PURE__*/jsx("div", {
     className: "tabs__panel",
     role: "tabpanel",
@@ -14,7 +15,15 @@ function TabPanel({
     style: style,
     children: children
   });
-}
+};
+TabPanel.propTypes = {
+  children: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
+  tabId: PropTypes.string.isRequired,
+  style: PropTypes.shape({
+    width: PropTypes.string.isRequired
+  }).isRequired
+};
 
 export { TabPanel as default };
 //# sourceMappingURL=TabPanel.mjs.map

package/build/tabs/TabPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.mjs","sources":["../../src/tabs/TabPanel.tsx"],"sourcesContent":["export interface TabPanelProps {\n  children?: React.ReactNode;\n  id: string;\n  tabId: string;\n  style: React.CSSProperties;\n}\n\nexport default function TabPanel({ children, id, tabId, style }: TabPanelProps) {\n  return (\n    <div className=\"tabs__panel\" role=\"tabpanel\" id={id} aria-labelledby={tabId} style={style}>\n      {children}\n    </div>\n  );\n}\n"],"names":["TabPanel","children","id","tabId","style","_jsx","className","role"],"mappings":";;AAOwB,SAAAA,QAAQA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC,KAAK;AAAEC,EAAAA,KAAAA;AAAsB,CAAA,EAAA;AAC5E,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,aAAa;AAACC,IAAAA,IAAI,EAAC,UAAU;AAACL,IAAAA,EAAE,EAAEA,EAAG;AAAC,IAAA,iBAAA,EAAiBC,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAM;AAAAH,IAAAA,QAAA,EACvFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"TabPanel.mjs","sources":["../../src/tabs/TabPanel.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst TabPanel = ({ children, id, tabId, style }) => {\n  return (\n    <div className=\"tabs__panel\" role=\"tabpanel\" id={id} aria-labelledby={tabId} style={style}>\n      {children}\n    </div>\n  );\n};\n\nTabPanel.propTypes = {\n  children: PropTypes.node.isRequired,\n  id: PropTypes.string.isRequired,\n  tabId: PropTypes.string.isRequired,\n  style: PropTypes.shape({\n    width: PropTypes.string.isRequired,\n  }).isRequired,\n};\n\nexport default TabPanel;\n"],"names":["TabPanel","children","id","tabId","style","_jsx","className","role","propTypes","PropTypes","node","isRequired","string","shape","width"],"mappings":";;;AAEMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC,KAAK;AAAEC,EAAAA,KAAAA;AAAM,CAAC,KAAK;AACnD,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,aAAa;AAACC,IAAAA,IAAI,EAAC,UAAU;AAACL,IAAAA,EAAE,EAAEA,EAAG;AAAC,IAAA,iBAAA,EAAiBC,KAAM;AAACC,IAAAA,KAAK,EAAEA,KAAM;AAAAH,IAAAA,QAAA,EACvFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV,EAAC;AAEDD,QAAQ,CAACQ,SAAS,GAAG;AACnBP,EAAAA,QAAQ,EAAEQ,SAAS,CAACC,IAAI,CAACC,UAAU;AACnCT,EAAAA,EAAE,EAAEO,SAAS,CAACG,MAAM,CAACD,UAAU;AAC/BR,EAAAA,KAAK,EAAEM,SAAS,CAACG,MAAM,CAACD,UAAU;AAClCP,EAAAA,KAAK,EAAEK,SAAS,CAACI,KAAK,CAAC;AACrBC,IAAAA,KAAK,EAAEL,SAAS,CAACG,MAAM,CAACD,UAAAA;AAC1B,GAAC,CAAC,CAACA,UAAAA;AACL,CAAC;;;;"}