@ntbjs/react-components 2.0.14 → 3.0.0-rc.2

package/build/data/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../src/components/data/Tab/Tab.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Tab.styled';\n\n/**\n * This is a component to help you get started with development.\n */\nconst Tab = React.forwardRef(function Tab({ children, hidden, ...props }, forwardedRef) {\n  if (hidden) return null;\n\n  return (\n    <S.Tab ref={forwardedRef} {...props}>\n      {children}\n    </S.Tab>\n  );\n});\n\nTab.propTypes = {\n  children: PropTypes.any,\n  hidden: PropTypes.bool\n};\n\nTab.defaultProps = {\n  hidden: false\n};\n\nexport default Tab;\n"],"names":["Tab","React","forwardRef","children","hidden","props","forwardedRef","createElement","S","_extends","ref","propTypes","process","env","NODE_ENV","PropTypes","any","bool","defaultProps"],"mappings":";;;;;AAOMA,MAAAA,GAAG,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,GAAGA,CAAC;EAAEG,QAAQ;EAAEC,MAAM;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAEC,YAAY,EAAE;EACtF,IAAIF,MAAM,EAAE,OAAO,IAAI,CAAA;EAEvB,OACEH,cAAA,CAAAM,aAAA,CAACC,KAAK,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEJ,YAAAA;GAAkBD,EAAAA,KAAK,CAChCF,EAAAA,QACI,CAAC,CAAA;AAEZ,CAAC,EAAC;AAEFH,GAAG,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EACdX,QAAQ,EAAEY,SAAS,CAACC,GAAG;EACvBZ,MAAM,EAAEW,SAAS,CAACE,IAAAA;AACpB,CAAC,GAAA,EAAA,CAAA;AAEDjB,GAAG,CAACkB,YAAY,GAAG;AACjBd,EAAAA,MAAM,EAAE,KAAA;AACV,CAAC;;;;"}
+{"version":3,"file":"Tab.js","sources":["../../../src/components/data/Tab/Tab.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './Tab.styled';\n\ntype TabOwnProps = {\n  children?: any;\n  hidden?: boolean;\n  /**\n   * The tab's clickable header, conventionally a `Badge`. Not read by Tab itself; Tabs extracts it.\n   */\n  trigger?: React.ReactElement<any>;\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype Props = Omit<React.ComponentPropsWithoutRef<typeof S.Tab>, keyof TabOwnProps> & TabOwnProps;\n\n/**\n * This is a component to help you get started with development.\n */\nconst Tab = React.forwardRef<any, Props>(function Tab(\n  { children, hidden = false, ...props },\n  forwardedRef\n) {\n  if (hidden) return null;\n\n  return (\n    <S.Tab ref={forwardedRef} {...props}>\n      {children}\n    </S.Tab>\n  );\n});\n\nexport default Tab;\n"],"names":["Tab","React","forwardRef","children","hidden","props","forwardedRef","_jsx","S","ref"],"mappings":";;;;AAkBA,MAAMA,GAAG,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,GAAGA,CACnD;EAAEG,QAAQ;AAAEC,EAAAA,MAAM,GAAG,KAAK;EAAE,GAAGC;AAAM,CAAC,EACtCC,YAAY,EACZ;EACA,IAAIF,MAAM,EAAE,OAAO,IAAI;AAEvB,EAAA,OACEG,GAAA,CAACC,KAAK,EAAA;AAACC,IAAAA,GAAG,EAAEH,YAAa;AAAA,IAAA,GAAKD,KAAK;AAAAF,IAAAA,QAAA,EAChCA;AAAQ,GACJ,CAAC;AAEZ,CAAC;;;;"}

package/build/data/Tab/Tab.styled.js

@@ -6,13 +6,10 @@ const shouldForwardProp = prop => {
 };
 const Tab = styled.p.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 1rem;
-  font-weight: 500;
-  border-bottom: 1px solid;
-  min-height: 35px;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Tabstyled__Tab",
+  componentId: "sc-omy3gs-0"
+})(["font-family:", ";font-size:1rem;font-weight:500;border-bottom:1px solid;min-height:35px;"], props => props.theme.primaryFontFamily);
 
 export { Tab };
 //# sourceMappingURL=Tab.styled.js.map

package/build/data/Tab/Tab.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.styled.js","sources":["../../../src/components/data/Tab/Tab.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Tab = styled.p\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 500;\n  border-bottom: 1px solid;\n  min-height: 35px;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Tab","styled","p","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,GAAG,GAAGC,MAAM,CAACC,CAAC,CACxBC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,eAAA,EAAiBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;AACA;AACA;AACA;;;;"}
+{"version":3,"file":"Tab.styled.js","sources":["../../../src/components/data/Tab/Tab.styled.ts"],"sourcesContent":["/*\n * No generic needed; Tab reads only theme. Tab and Tabs are coupled.\n */\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n// `prop` needs annotation because withConfig takes it by reference; no contextual typing otherwise.\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Tab = styled.p\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 500;\n  border-bottom: 1px solid;\n  min-height: 35px;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Tab","styled","p","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","primaryFontFamily"],"mappings":";;;AAOA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,GAAG,GAAGC,MAAM,CAACC,CAAC,CACxBC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,gBAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,cAAA,EAAA,0EAAA,CAAA,EACVC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB;;;;"}

package/build/data/Tabs/Tabs.js

@@ -1,14 +1,14 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { isEmpty, isNil } from 'lodash';
-import PropTypes from 'prop-types';
 import React__default, { useState, useRef, useMemo, Children, Fragment } from 'react';
 import Tab from '../Tab/Tab.js';
 import { Tabs as Tabs$1, TabHeaders, TabHeader, TabHeaderBorder, TabContent } from './Tabs.styled.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const Tabs = React__default.forwardRef(function Tabs({
   children,
   defaultMinHeight = '',
   customPadding = 0,
+  backgroundColor,
   onTabClick = () => {},
   ...props
 }, forwardedRef) {
@@ -55,37 +55,35 @@ const Tabs = React__default.forwardRef(function Tabs({
       });
     }
   };
-  return React__default.createElement(Tabs$1, _extends({
-    ref: forwardedRef
-  }, props, {
-    role: "tablist"
-  }), React__default.createElement(TabHeaders, {
-    custompadding: customPadding
-  }, tabs.map(tab => React__default.createElement(TabHeader, {
-    key: tab.key,
-    hidden: tab.hidden,
-    $active: tab.key === activeTab,
-    onClick: () => handleTabClick(tab),
-    role: "tab"
-  }, tab.trigger))), React__default.createElement(TabHeaderBorder, {
-    custompadding: customPadding
-  }), React__default.createElement(TabContent, null, tabs.map(tab => React__default.createElement("div", {
-    ref: tab.key === activeTab?.key ? contentRef : null,
-    key: tab.key,
-    role: "tabpanel",
-    hidden: tab.key !== activeTab,
-    style: {
-      minHeight: !isEmpty(defaultMinHeight) ? defaultMinHeight : ''
-    }
-  }, tab.content))));
+  return jsxs(Tabs$1, {
+    ref: forwardedRef,
+    $backgroundColor: backgroundColor,
+    ...props,
+    role: "tablist",
+    children: [jsx(TabHeaders, {
+      custompadding: customPadding,
+      children: tabs.map(tab => jsx(TabHeader, {
+        hidden: tab.hidden,
+        $active: tab.key === activeTab,
+        onClick: () => handleTabClick(tab),
+        role: "tab",
+        children: tab.trigger
+      }, tab.key))
+    }), jsx(TabHeaderBorder, {
+      custompadding: customPadding
+    }), jsx(TabContent, {
+      children: tabs.map(tab => jsx("div", {
+        ref: tab.key === activeTab?.key ? contentRef : null,
+        role: "tabpanel",
+        hidden: tab.key !== activeTab,
+        style: {
+          minHeight: !isEmpty(defaultMinHeight) ? defaultMinHeight : ''
+        },
+        children: tab.content
+      }, tab.key))
+    })]
+  });
 });
-Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  backgroundColor: PropTypes.string,
-  defaultMinHeight: PropTypes.string,
-  customPadding: PropTypes.string,
-  onTabClick: PropTypes.func
-} : {};
 
 export { Tabs as default };
 //# sourceMappingURL=Tabs.js.map

package/build/data/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/data/Tabs/Tabs.js"],"sourcesContent":["import { isEmpty, isNil } from 'lodash';\nimport PropTypes from 'prop-types';\nimport React, { Children, Fragment, useMemo, useRef, useState } from 'react';\nimport Tab from '../Tab';\nimport * as S from './Tabs.styled';\n\n/**\n * Tabs that let you group content\n *\n * ### Import\n *\n * ``` js\n * import { Tabs, Tab } from '@ntbjs/react-components/data'\n * // or\n * import Tabs from '@ntbjs/react-components/data/Tabs'\n * import Tab from '@ntbjs/react-components/data/Tab'\n * ```\n * ### Tab - Tabs - Badge\n * `Tab`, `Tabs` and `Badge` must be used in order to implement the component.\n * ```\n * <Tabs>\n *  <Tab trigger={<Badge>Tab title</Badge>}>\n *    Tab content\n *  </Tab>\n * </Tabs>\n * ```\n *  ## Wrapping\n *  Content (data displayed inside the `Tab`) is wrapped by `Tab`:\n *  ```\n * <Tab>\n *    Tab content\n * </Tab>\n * ```\n *   ### Badge\n * The tab title is wrapped by `Badge` (which is passed as the trigger prop inside `Tab`):\n *\n *Props that can be passed inside the `Badge` component are: `badgeContent`, `active`, `error`, `warning` (check out the `Badge` component documentation for props options).\n *  ```\n * <Tab trigger={<Badge>Tab title</Badge>}>\n *    Tab content\n * </Tab>\n * ```\n * All tabs are wrapped by `Tabs`:\n *  ```\n * <Tabs>\n *  <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n *  <Tab trigger={<Badge>Tab title 3</Badge>}>Tab content 3</Tab>\n *  <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n *  <Tab trigger={<Badge>Tab title 5</Badge>}>Tab content 5</Tab>\n * </Tabs>\n * ```\n *  ## Props\n * A `backgroundColor` prop can be passed as a string to set the `Tabs` component background color.\n *    ```\n *  <Tabs backgroundColor={'#bfe0d5'}>\n *  <Tab  trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n *  ### hidden\n * A single Tab can be hidden by using the `hidden={true||false}` prop (this is useful when the tab has empty content):\n *   ```\n *  <Tabs>\n *  <Tab hidden={true} trigger={<Badge>Tab title 1</Badge>}></Tab>\n *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n *  <Tab hidden={true} trigger={<Badge>Tab title 3</Badge>}></Tab>\n *  <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n *  <Tab hidden={true} trigger={<Badge>Tab title 5</Badge>}></Tab>\n * </Tabs>\n * ```\n *  ### Default minHeight\n * A `defaultMinHeight` prop can be passed to the Tabs component to set a predefined min-height.\n *\n * Pass `defaultMinHeight={'value px'}` on the `Tabs` component to use this feature.\n *   ```\n *  <Tabs defaultMinHeight={'500px'}>\n *  <Tab  trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n *\n *   ### Custom padding\n * A `customPadding` prop can be passed to the Tabs component to set a custom padding on the tabs. The custom padding is applied the the Tabs options,\n * not to the content within the Tabs.\n *\n * Pass `customPadding={'value px'}` on the `Tabs` component to use this feature.\n *   ```\n *  <Tabs customPadding={'40px'}>\n *  <Tab  trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n */\nconst Tabs = React.forwardRef(function Tabs(\n  { children, defaultMinHeight = '', customPadding = 0, onTabClick = () => {}, ...props },\n  forwardedRef\n) {\n  const [activeTab, setActiveTab] = useState(0);\n  const contentRef = useRef(null);\n\n  const tabs = useMemo(() => {\n    const tabs = [];\n    function extractChildren(children) {\n      Children.forEach(children, (child, index) => {\n        if (isNil(child)) {\n          return null;\n        }\n\n        if (child.type === Fragment) {\n          extractChildren(child.props?.children);\n        }\n\n        if (child.props?.hidden) {\n          return null;\n        }\n\n        if (child.type === Tab) {\n          tabs.push({\n            key: index,\n            trigger: child.props?.trigger,\n            content: child.props?.children\n          });\n        }\n      });\n    }\n\n    extractChildren(children);\n\n    if (!tabs.some(tab => tab?.key === activeTab)) {\n      setActiveTab(tabs[0]?.key);\n    }\n\n    return tabs;\n  }, [children]);\n\n  const handleTabClick = tab => {\n    setActiveTab(tab.key);\n    let triggerText = '';\n\n    if (tab.trigger && tab.trigger.props && tab.trigger.props.children) {\n      triggerText = tab.trigger.props.children;\n    }\n    if (onTabClick) {\n      onTabClick({\n        ...tab,\n        triggerText: triggerText\n      });\n    }\n  };\n\n  return (\n    <S.Tabs ref={forwardedRef} {...props} role=\"tablist\">\n      <S.TabHeaders custompadding={customPadding}>\n        {tabs.map(tab => (\n          <S.TabHeader\n            key={tab.key}\n            hidden={tab.hidden}\n            $active={tab.key === activeTab}\n            onClick={() => handleTabClick(tab)}\n            role=\"tab\"\n          >\n            {tab.trigger}\n          </S.TabHeader>\n        ))}\n      </S.TabHeaders>\n      <S.TabHeaderBorder custompadding={customPadding}></S.TabHeaderBorder>\n      <S.TabContent>\n        {tabs.map(tab => (\n          <div\n            ref={tab.key === activeTab?.key ? contentRef : null}\n            key={tab.key}\n            role=\"tabpanel\"\n            hidden={tab.key !== activeTab}\n            style={{\n              minHeight: !isEmpty(defaultMinHeight) ? defaultMinHeight : ''\n            }}\n          >\n            {tab.content}\n          </div>\n        ))}\n      </S.TabContent>\n    </S.Tabs>\n  );\n});\n\nTabs.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n  /**\n   * Whether `Tabs` component has a background color\n   */\n  backgroundColor: PropTypes.string,\n  /**\n   * Whether `tabs` will have a predefined min-height.\n   */\n  defaultMinHeight: PropTypes.string,\n  /**\n   * Custom padding.\n   */\n  customPadding: PropTypes.string,\n  /**\n   * Callback for clicked tab\n   */\n  onTabClick: PropTypes.func\n};\n\nexport default Tabs;\n"],"names":["Tabs","React","forwardRef","children","defaultMinHeight","customPadding","onTabClick","props","forwardedRef","activeTab","setActiveTab","useState","contentRef","useRef","tabs","useMemo","extractChildren","Children","forEach","child","index","isNil","type","Fragment","hidden","Tab","push","key","trigger","content","some","tab","handleTabClick","triggerText","createElement","S","_extends","ref","role","custompadding","map","$active","onClick","style","minHeight","isEmpty","propTypes","process","env","NODE_ENV","PropTypes","oneOfType","array","object","backgroundColor","string","func"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/data/Tabs/Tabs.tsx"],"sourcesContent":["import { isEmpty, isNil } from 'lodash';\nimport React, { Children, Fragment, useMemo, useRef, useState } from 'react';\nimport Tab from '../Tab';\nimport * as S from './Tabs.styled';\n\ntype TabsOwnProps = {\n  children?: any[] | any;\n  /**\n   * Whether `Tabs` component has a background color\n   */\n  backgroundColor?: string;\n  /**\n   * Whether `tabs` will have a predefined min-height.\n   */\n  defaultMinHeight?: string;\n  /**\n   * Custom padding.\n   */\n  customPadding?: string;\n  /**\n   * Callback for clicked tab\n   */\n  onTabClick?: (...args: any[]) => any;\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype Props = Omit<React.ComponentPropsWithoutRef<typeof S.Tabs>, keyof TabsOwnProps> & TabsOwnProps;\n\n/**\n * Tabs that let you group content\n *\n * ### Import\n *\n * ``` js\n * import { Tabs, Tab } from '@ntbjs/react-components/data'\n * // or\n * import Tabs from '@ntbjs/react-components/data/Tabs'\n * import Tab from '@ntbjs/react-components/data/Tab'\n * ```\n * ### Tab - Tabs - Badge\n * `Tab`, `Tabs` and `Badge` must be used in order to implement the component.\n * ```\n * <Tabs>\n *  <Tab trigger={<Badge>Tab title</Badge>}>\n *    Tab content\n *  </Tab>\n * </Tabs>\n * ```\n *  ## Wrapping\n *  Content (data displayed inside the `Tab`) is wrapped by `Tab`:\n *  ```\n * <Tab>\n *    Tab content\n * </Tab>\n * ```\n *   ### Badge\n * The tab title is wrapped by `Badge` (which is passed as the trigger prop inside `Tab`):\n *\n *Props that can be passed inside the `Badge` component are: `badgeContent`, `active`, `error`, `warning` (check out the `Badge` component documentation for props options).\n *  ```\n * <Tab trigger={<Badge>Tab title</Badge>}>\n *    Tab content\n * </Tab>\n * ```\n * All tabs are wrapped by `Tabs`:\n *  ```\n * <Tabs>\n *  <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n *  <Tab trigger={<Badge>Tab title 3</Badge>}>Tab content 3</Tab>\n *  <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n *  <Tab trigger={<Badge>Tab title 5</Badge>}>Tab content 5</Tab>\n * </Tabs>\n * ```\n *  ## Props\n * A `backgroundColor` prop can be passed as a string to set the `Tabs` component background color.\n *    ```\n *  <Tabs backgroundColor={'#bfe0d5'}>\n *  <Tab  trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n *  ### hidden\n * A single Tab can be hidden by using the `hidden={true||false}` prop (this is useful when the tab has empty content):\n *   ```\n *  <Tabs>\n *  <Tab hidden={true} trigger={<Badge>Tab title 1</Badge>}></Tab>\n *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n *  <Tab hidden={true} trigger={<Badge>Tab title 3</Badge>}></Tab>\n *  <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>\n *  <Tab hidden={true} trigger={<Badge>Tab title 5</Badge>}></Tab>\n * </Tabs>\n * ```\n *  ### Default minHeight\n * A `defaultMinHeight` prop can be passed to the Tabs component to set a predefined min-height.\n *\n * Pass `defaultMinHeight={'value px'}` on the `Tabs` component to use this feature.\n *   ```\n *  <Tabs defaultMinHeight={'500px'}>\n *  <Tab  trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n *\n *   ### Custom padding\n * A `customPadding` prop can be passed to the Tabs component to set a custom padding on the tabs. The custom padding is applied the the Tabs options,\n * not to the content within the Tabs.\n *\n * Pass `customPadding={'value px'}` on the `Tabs` component to use this feature.\n *   ```\n *  <Tabs customPadding={'40px'}>\n *  <Tab  trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>\n *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>\n * </Tabs>\n * ```\n */\nconst Tabs = React.forwardRef<any, Props>(function Tabs(\n  {\n    children,\n    defaultMinHeight = '',\n    customPadding = 0,\n    backgroundColor,\n    onTabClick = () => {},\n    ...props\n  },\n  forwardedRef\n) {\n  const [activeTab, setActiveTab] = useState(0);\n  const contentRef = useRef(null);\n\n  const tabs = useMemo(() => {\n    const tabs = [];\n    function extractChildren(children) {\n      Children.forEach(children, (child, index) => {\n        if (isNil(child)) {\n          return null;\n        }\n\n        if (child.type === Fragment) {\n          extractChildren(child.props?.children);\n        }\n\n        if (child.props?.hidden) {\n          return null;\n        }\n\n        if (child.type === Tab) {\n          tabs.push({\n            key: index,\n            trigger: child.props?.trigger,\n            content: child.props?.children\n          });\n        }\n      });\n    }\n\n    extractChildren(children);\n\n    if (!tabs.some(tab => tab?.key === activeTab)) {\n      setActiveTab(tabs[0]?.key);\n    }\n\n    return tabs;\n  }, [children]);\n\n  const handleTabClick = tab => {\n    setActiveTab(tab.key);\n    let triggerText = '';\n\n    if (tab.trigger && tab.trigger.props && tab.trigger.props.children) {\n      triggerText = tab.trigger.props.children;\n    }\n    if (onTabClick) {\n      onTabClick({\n        ...tab,\n        triggerText: triggerText\n      });\n    }\n  };\n\n  return (\n    <S.Tabs ref={forwardedRef} $backgroundColor={backgroundColor} {...props} role=\"tablist\">\n      <S.TabHeaders custompadding={customPadding}>\n        {tabs.map(tab => (\n          <S.TabHeader\n            key={tab.key}\n            hidden={tab.hidden}\n            $active={tab.key === activeTab}\n            onClick={() => handleTabClick(tab)}\n            role=\"tab\"\n          >\n            {tab.trigger}\n          </S.TabHeader>\n        ))}\n      </S.TabHeaders>\n      <S.TabHeaderBorder custompadding={customPadding}></S.TabHeaderBorder>\n      <S.TabContent>\n        {tabs.map(tab => (\n          <div\n            ref={tab.key === activeTab?.key ? contentRef : null}\n            key={tab.key}\n            role=\"tabpanel\"\n            hidden={tab.key !== activeTab}\n            style={{\n              minHeight: !isEmpty(defaultMinHeight) ? defaultMinHeight : ''\n            }}\n          >\n            {tab.content}\n          </div>\n        ))}\n      </S.TabContent>\n    </S.Tabs>\n  );\n});\n\nexport default Tabs;\n"],"names":["Tabs","React","forwardRef","children","defaultMinHeight","customPadding","backgroundColor","onTabClick","props","forwardedRef","activeTab","setActiveTab","useState","contentRef","useRef","tabs","useMemo","extractChildren","Children","forEach","child","index","isNil","type","Fragment","hidden","Tab","push","key","trigger","content","some","tab","handleTabClick","triggerText","_jsxs","S","ref","$backgroundColor","role","_jsx","custompadding","map","$active","onClick","style","minHeight","isEmpty"],"mappings":"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"}

package/build/data/Tabs/Tabs.styled.js

@@ -6,50 +6,22 @@ const shouldForwardProp = prop => {
 };
 const Tabs = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: block;
-  position: relative;
-  ${props => props.backgroundColor && css`
-      background-color: ${props.backgroundColor};
-    `};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Tabsstyled__Tabs",
+  componentId: "sc-1mbopdp-0"
+})(["display:block;position:relative;", ";"], props => props.$backgroundColor && css(["background-color:", ";"], props.$backgroundColor));
 const TabHeaders = styled.ul.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  gap: 24px;
-
-  margin: 0;
-  ${props => !props.custompadding && css`
-      padding: 0;
-    `};
-  ${props => props.custompadding && css`
-      padding: 0 ${props.custompadding};
-    `};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Tabsstyled__TabHeaders",
+  componentId: "sc-1mbopdp-1"
+})(["display:flex;overflow-x:auto;overflow-y:hidden;white-space:nowrap;gap:24px;margin:0;", ";", ";"], props => !props.custompadding && css(["padding:0;"]), props => props.custompadding && css(["padding:0 ", ";"], props.custompadding));
 const TabHeader = styled.li.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.secondaryFontFamily};
-  text-transform: uppercase;
-  font-weight: 600;
-  font-size: 0.875rem;
-  display: flex;
-  padding-bottom: 8px;
-  letter-spacing: 0.6px;
-  cursor: pointer;
-  border-bottom: 1px solid;
-  border-color: transparent;
-  margin-bottom: 1px;
-
-  ${props => props.$active && css`
-      ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'))}
-    `};
-  &&:hover:not(:focus) {
-    ${props => props.theme.themeProp('border-color', () => {
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Tabsstyled__TabHeader",
+  componentId: "sc-1mbopdp-2"
+})(["font-family:", ";text-transform:uppercase;font-weight:600;font-size:0.875rem;display:flex;padding-bottom:8px;letter-spacing:0.6px;cursor:pointer;border-bottom:1px solid;border-color:transparent;margin-bottom:1px;", ";&&:hover:not(:focus){", ";}"], props => props.theme.secondaryFontFamily, props => props.$active && css(["", ""], props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'))), props => props.theme.themeProp('border-color', () => {
   if (props.$active) {
     return props.theme.getColor('gray-400');
   } else {
@@ -61,27 +33,19 @@ const TabHeader = styled.li.withConfig({
   } else {
     return props.theme.getColor('gray-700');
   }
-})};
-  }
-`;
+}));
 const TabContent = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: block;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Tabsstyled__TabContent",
+  componentId: "sc-1mbopdp-3"
+})(["display:block;"]);
 const TabHeaderBorder = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  border-top: 1px solid;
-
-  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5')};
-  ${props => !props.custompadding && css`
-      margin: -2px 0;
-    `};
-  ${props => props.custompadding && css`
-      margin: -2px ${props.custompadding};
-    `};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Tabsstyled__TabHeaderBorder",
+  componentId: "sc-1mbopdp-4"
+})(["border-top:1px solid;", ";", ";", ";"], props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5'), props => !props.custompadding && css(["margin:-2px 0;"]), props => props.custompadding && css(["margin:-2px ", ";"], props.custompadding));
 
 export { TabContent, TabHeader, TabHeaderBorder, TabHeaders, Tabs };
 //# sourceMappingURL=Tabs.styled.js.map

package/build/data/Tabs/Tabs.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styled.js","sources":["../../../src/components/data/Tabs/Tabs.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Tabs = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: block;\n  position: relative;\n  ${props =>\n    props.backgroundColor &&\n    css`\n      background-color: ${props.backgroundColor};\n    `};\n`;\n\nexport const TabHeaders = styled.ul\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n  gap: 24px;\n\n  margin: 0;\n  ${props =>\n    !props.custompadding &&\n    css`\n      padding: 0;\n    `};\n  ${props =>\n    props.custompadding &&\n    css`\n      padding: 0 ${props.custompadding};\n    `};\n`;\n\nexport const TabHeader = styled.li\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.secondaryFontFamily};\n  text-transform: uppercase;\n  font-weight: 600;\n  font-size: 0.875rem;\n  display: flex;\n  padding-bottom: 8px;\n  letter-spacing: 0.6px;\n  cursor: pointer;\n  border-bottom: 1px solid;\n  border-color: transparent;\n  margin-bottom: 1px;\n\n  ${props =>\n    props.$active &&\n    css`\n      ${props =>\n        props.theme.themeProp(\n          'border-color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-700')\n        )}\n    `};\n  &&:hover:not(:focus) {\n    ${props =>\n      props.theme.themeProp(\n        'border-color',\n        () => {\n          if (props.$active) {\n            return props.theme.getColor('gray-400');\n          } else {\n            return props.theme.getColor('gray-400');\n          }\n        },\n        () => {\n          if (props.$active) {\n            return props.theme.getColor('gray-700');\n          } else {\n            return props.theme.getColor('gray-700');\n          }\n        }\n      )};\n  }\n`;\n\nexport const TabContent = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: block;\n`;\n\nexport const TabHeaderBorder = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  border-top: 1px solid;\n\n  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5')};\n  ${props =>\n    !props.custompadding &&\n    css`\n      margin: -2px 0;\n    `};\n  ${props =>\n    props.custompadding &&\n    css`\n      margin: -2px ${props.custompadding};\n    `};\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Tabs","styled","div","withConfig","attrs","applyDefaultTheme","props","backgroundColor","css","TabHeaders","ul","custompadding","TabHeader","li","theme","secondaryFontFamily","$active","themeProp","getColor","TabContent","TabHeaderBorder"],"mappings":"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"}
+{"version":3,"file":"Tabs.styled.js","sources":["../../../src/components/data/Tabs/Tabs.styled.ts"],"sourcesContent":["/*\n * One deferred defect: `custompadding` has no `$`, so it leaks to rendered HTML. Tabs and Tab are coupled.\n */\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/** Props of the `Tabs` root, i.e. what `Tabs.tsx` passes to `S.Tabs`. */\nexport interface TabsStyleProps {\n  /** `backgroundColor` — `PropTypes.string`, a CSS colour, interpolated raw. */\n  $backgroundColor?: string;\n}\n\n/**\n * Shared by `TabHeaders` and `TabHeaderBorder`. Defect: `custompadding` has no `$`, leaks to DOM. Typed as `number | string` to match component default of 0.\n */\ninterface TabPaddingStyleProps {\n  /** `customPadding` — see the interface JSDoc; both the leak and the union are there. */\n  custompadding?: number | string;\n}\n\n/** Props of `TabHeader`, one `<li>` per tab. */\ninterface TabHeaderStyleProps {\n  /**\n   * `tab.key === activeTab`, derived in the component, so genuinely `boolean`. Read both\n   * in the `$active &&` block and inside the two `themeProp()` callbacks below.\n   */\n  $active?: boolean;\n}\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and\n * the two majors disagree on the second parameter. `prop` needs the annotation because\n * `withConfig` takes this by reference, so it gets no contextual typing.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Tabs = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<TabsStyleProps>(applyDefaultTheme)`\n  display: block;\n  position: relative;\n  ${props =>\n    props.$backgroundColor &&\n    css`\n      background-color: ${props.$backgroundColor};\n    `};\n`;\n\nexport const TabHeaders = styled.ul\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<TabPaddingStyleProps>(applyDefaultTheme)`\n  display: flex;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n  gap: 24px;\n\n  margin: 0;\n  ${props =>\n    !props.custompadding &&\n    css`\n      padding: 0;\n    `};\n  ${props =>\n    props.custompadding &&\n    css`\n      padding: 0 ${props.custompadding};\n    `};\n`;\n\nexport const TabHeader = styled.li\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<TabHeaderStyleProps>(applyDefaultTheme)`\n  font-family: ${props => props.theme.secondaryFontFamily};\n  text-transform: uppercase;\n  font-weight: 600;\n  font-size: 0.875rem;\n  display: flex;\n  padding-bottom: 8px;\n  letter-spacing: 0.6px;\n  cursor: pointer;\n  border-bottom: 1px solid;\n  border-color: transparent;\n  margin-bottom: 1px;\n\n  ${props =>\n    props.$active &&\n    css`\n      ${props =>\n        props.theme.themeProp(\n          'border-color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-700')\n        )}\n    `};\n  &&:hover:not(:focus) {\n    ${props =>\n      props.theme.themeProp(\n        'border-color',\n        () => {\n          if (props.$active) {\n            return props.theme.getColor('gray-400');\n          } else {\n            return props.theme.getColor('gray-400');\n          }\n        },\n        () => {\n          if (props.$active) {\n            return props.theme.getColor('gray-700');\n          } else {\n            return props.theme.getColor('gray-700');\n          }\n        }\n      )};\n  }\n`;\n\nexport const TabContent = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: block;\n`;\n\nexport const TabHeaderBorder = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<TabPaddingStyleProps>(applyDefaultTheme)`\n  border-top: 1px solid;\n\n  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5')};\n  ${props =>\n    !props.custompadding &&\n    css`\n      margin: -2px 0;\n    `};\n  ${props =>\n    props.custompadding &&\n    css`\n      margin: -2px ${props.custompadding};\n    `};\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Tabs","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","$backgroundColor","css","TabHeaders","ul","custompadding","TabHeader","li","theme","secondaryFontFamily","$active","themeProp","getColor","TabContent","TabHeaderBorder"],"mappings":"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"}

package/build/data/Tooltip/Tooltip.js

@@ -1,46 +1,115 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
 import React__default from 'react';
+import { useMergeRefs, FloatingPortal } from '@floating-ui/react';
+import useFloatingPopover from '../../hooks/useFloatingPopover.js';
+import { getElementRef } from '../../utils/getElementRef.js';
+import { SharedFloatingArrow, TOOLTIP_ARROW } from '../_shared/FloatingArrow.styled.js';
 import { Tooltip as Tooltip$1 } from './Tooltip.styled.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
+const TIPPY_DEFAULT_ARROW = true;
+const TIPPY_DEFAULT_MAX_WIDTH = 350;
+const TIPPY_DEFAULT_Z_INDEX = 9999;
+const TOOLTIP_OFFSET = [0, 10];
+const TOOLTIP_ARROW_HEIGHT_IS_IN_THE_OFFSET_ALREADY = 0;
+const POSITIONER_MAX_WIDTH = 'calc(100vw - 10px)';
+const PROPS_NEVER_FORWARDED = ['onClick', 'onChange', 'onSubmit', 'modifiers', 'popperOptions'];
 const Tooltip = React__default.forwardRef(function Tooltip({
-  content,
-  interactive,
-  placement,
-  duration,
+  content = 'Tooltip',
+  interactive = false,
+  placement = 'top',
+  duration = 350,
   trigger,
   visible,
   children,
+  arrow: hasArrow = TIPPY_DEFAULT_ARROW,
+  zIndex = TIPPY_DEFAULT_Z_INDEX,
+  disabled = false,
+  offset = TOOLTIP_OFFSET,
+  maxWidth = TIPPY_DEFAULT_MAX_WIDTH,
+  appendTo,
+  onClickOutside,
   ...props
 }, ref) {
-  const eventHandlerProps = ['onClick', 'onChange', 'onSubmit'];
-  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !eventHandlerProps.includes(key)));
-  return React__default.createElement("div", null, React__default.createElement(Tooltip$1, _extends({
-    ref: ref,
-    content: content,
-    interactive: interactive,
-    placement: placement,
-    duration: duration,
-    trigger: trigger,
-    visible: visible,
-    animation: 'shift-away-subtle'
-  }, filteredProps), children));
+  const onOpenChange = React__default.useCallback((open, event, reason) => {
+    if (!open && reason === 'outside-press') {
+      onClickOutside?.(event);
+    }
+  }, [onClickOutside]);
+  const {
+    refs,
+    floatingStyles,
+    context,
+    getReferenceProps,
+    getFloatingProps,
+    isMounted,
+    transitionStyles,
+    arrowRef,
+    placement: resolvedPlacement,
+    pointerEvents
+  } = useFloatingPopover({
+    placement,
+    open: visible,
+    onOpenChange,
+    trigger,
+    offset,
+    arrow: hasArrow,
+    arrowHeight: TOOLTIP_ARROW_HEIGHT_IS_IN_THE_OFFSET_ALREADY,
+    interactive,
+    disabled,
+    duration
+  });
+  const childRef = React__default.isValidElement(children) ? getElementRef(children) : null;
+  const referenceRef = useMergeRefs([ref, childRef, refs.setReference]);
+  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !PROPS_NEVER_FORWARDED.includes(key)));
+  const reference = React__default.isValidElement(children) ? React__default.cloneElement(children, {
+    ...getReferenceProps(children.props),
+    ref: referenceRef
+  }) : children;
+  const renderInline = appendTo === 'parent' || interactive && appendTo === undefined;
+  const resolvePortalRoot = () => {
+    if (renderInline || appendTo === undefined) return undefined;
+    if (typeof appendTo === 'function') {
+      const node = refs.reference.current;
+      return node instanceof Element ? appendTo(node) : null;
+    }
+    return appendTo;
+  };
+  const floating = isMounted ? jsx("div", {
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles,
+      zIndex,
+      pointerEvents,
+      maxWidth: POSITIONER_MAX_WIDTH
+    },
+    ...getFloatingProps(),
+    children: jsxs(Tooltip$1, {
+      ...filteredProps,
+      "data-placement": resolvedPlacement,
+      role: "tooltip",
+      tabIndex: -1,
+      style: {
+        ...transitionStyles,
+        maxWidth
+      },
+      children: [jsx("div", {
+        className: "tippy-content",
+        children: content
+      }), hasArrow && jsx(SharedFloatingArrow, {
+        ref: arrowRef,
+        context: context,
+        "data-arrow-surface": "tooltip",
+        ...TOOLTIP_ARROW
+      })]
+    })
+  }) : null;
+  return jsxs("div", {
+    children: [reference, renderInline ? floating : jsx(FloatingPortal, {
+      root: resolvePortalRoot(),
+      children: floating
+    })]
+  });
 });
-Tooltip.defaultProps = {
-  content: 'Tooltip',
-  interactive: false,
-  placement: 'top',
-  duration: 350
-};
-Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  interactive: PropTypes.bool,
-  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
-  duration: PropTypes.number,
-  trigger: PropTypes.oneOf(['mouseenter', 'mouseenter focus', 'click', 'focusin', 'mouseenter click', '']),
-  visible: PropTypes.bool,
-  children: PropTypes.node
-} : {};
 
 export { Tooltip as default };
 //# sourceMappingURL=Tooltip.js.map

package/build/data/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/data/Tooltip/Tooltip.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Tooltip.styled';\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n *\n * ### Import\n *\n * ``` js\n * import { Tooltip } from '@ntbjs/react-components/data'\n * // or\n * import Tooltip from '@ntbjs/react-components/data/Tooltip'\n * ```\n */\n\nconst Tooltip = React.forwardRef(function Tooltip(\n  { content, interactive, placement, duration, trigger, visible, children, ...props },\n  ref\n) {\n  const eventHandlerProps = ['onClick', 'onChange', 'onSubmit'];\n\n  const filteredProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => !eventHandlerProps.includes(key))\n  );\n\n  return (\n    <div>\n      <S.Tooltip\n        ref={ref}\n        content={content}\n        interactive={interactive}\n        placement={placement}\n        duration={duration}\n        trigger={trigger}\n        visible={visible}\n        animation={'shift-away-subtle'}\n        {...filteredProps}\n      >\n        {children}\n      </S.Tooltip>\n    </div>\n  );\n});\n\nTooltip.defaultProps = {\n  content: 'Tooltip',\n  interactive: false,\n  placement: 'top',\n  duration: 350\n};\n\n/**\n * https://atomiks.github.io/tippyjs/v6/all-props/\n * @type {{content: Validator<NonNullable<string>>}}\n */\nTooltip.propTypes = {\n  /**\n   * The content of the `Tooltip`.\n   *\n   * **NB!** If the content is a `string`, it should be [wrapped in a tag](https://github.com/atomiks/tippyjs-react/issues/283#issuecomment-1268986001), e.g.:\n   *\n   * `<span>{content}</span>`.\n   */\n  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n\n  /**\n   * Determines if the tippy has interactive content inside of it, so that it can be\n   * hovered over and clicked inside without hiding.\n   */\n  interactive: PropTypes.bool,\n\n  /**\n   * The preferred placement of the tippy. Note that Popper's flip modifier can change\n   * this to the opposite placement if it has more space.\n   */\n  placement: PropTypes.oneOf([\n    'top',\n    'top-start',\n    'top-end',\n    'right',\n    'right-start',\n    'right-end',\n    'bottom',\n    'bottom-start',\n    'bottom-end',\n    'left',\n    'left-start',\n    'left-end',\n    'auto',\n    'auto-start',\n    'auto-end'\n  ]),\n  /**\n   * Duration in ms of the transition animation.\n   */\n  duration: PropTypes.number,\n\n  /**\n   * Determines the events that cause the tippy to show. Multiple event names are separated by\n   * spaces.\n   *\n   * *Example events:*\n   *\n   * `trigger: 'click'`\n   *\n   * `trigger: 'focusin'`\n   *\n   * `trigger: 'mouseenter click'`\n   *\n   * `trigger: 'mouseenter'`\n   *\n   * --\n   */\n  trigger: PropTypes.oneOf([\n    'mouseenter',\n    'mouseenter focus',\n    'click',\n    'focusin',\n    'mouseenter click',\n    ''\n  ]),\n  /**\n   * Determines if the tippy is visible without trigger\n   */\n  visible: PropTypes.bool,\n\n  children: PropTypes.node\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","React","forwardRef","content","interactive","placement","duration","trigger","visible","children","props","ref","eventHandlerProps","filteredProps","Object","fromEntries","entries","filter","key","includes","createElement","S","_extends","animation","defaultProps","propTypes","process","env","NODE_ENV","PropTypes","oneOfType","string","element","isRequired","bool","oneOf","number","node"],"mappings":";;;;;AAgBMA,MAAAA,OAAO,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,OAAOA,CAC/C;EAAEG,OAAO;EAAEC,WAAW;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGC,KAAAA;AAAM,CAAC,EACnFC,GAAG,EACH;EACA,MAAMC,iBAAiB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC,CAAA;AAE7D,EAAA,MAAMC,aAAa,GAAGC,MAAM,CAACC,WAAW,CACtCD,MAAM,CAACE,OAAO,CAACN,KAAK,CAAC,CAACO,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KAAK,CAACN,iBAAiB,CAACO,QAAQ,CAACD,GAAG,CAAC,CAC1E,CAAC,CAAA;AAED,EAAA,OACEjB,cAAA,CAAAmB,aAAA,CAAA,KAAA,EAAA,IAAA,EACEnB,cAAA,CAAAmB,aAAA,CAACC,SAAS,EAAAC,QAAA,CAAA;AACRX,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBe,IAAAA,SAAS,EAAE,mBAAA;AAAoB,GAAA,EAC3BV,aAAa,CAAA,EAEhBJ,QACQ,CACR,CAAC,CAAA;AAEV,CAAC,EAAC;AAEFT,OAAO,CAACwB,YAAY,GAAG;AACrBrB,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,WAAW,EAAE,KAAK;AAClBC,EAAAA,SAAS,EAAE,KAAK;AAChBC,EAAAA,QAAQ,EAAE,GAAA;AACZ,CAAC,CAAA;AAMDN,OAAO,CAACyB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAQlBzB,EAAAA,OAAO,EAAE0B,SAAS,CAACC,SAAS,CAAC,CAACD,SAAS,CAACE,MAAM,EAAEF,SAAS,CAACG,OAAO,CAAC,CAAC,CAACC,UAAU;EAM9E7B,WAAW,EAAEyB,SAAS,CAACK,IAAI;AAM3B7B,EAAAA,SAAS,EAAEwB,SAAS,CAACM,KAAK,CAAC,CACzB,KAAK,EACL,WAAW,EACX,SAAS,EACT,OAAO,EACP,aAAa,EACb,WAAW,EACX,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,UAAU,EACV,MAAM,EACN,YAAY,EACZ,UAAU,CACX,CAAC;EAIF7B,QAAQ,EAAEuB,SAAS,CAACO,MAAM;AAkB1B7B,EAAAA,OAAO,EAAEsB,SAAS,CAACM,KAAK,CAAC,CACvB,YAAY,EACZ,kBAAkB,EAClB,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,EAAE,CACH,CAAC;EAIF3B,OAAO,EAAEqB,SAAS,CAACK,IAAI;EAEvBzB,QAAQ,EAAEoB,SAAS,CAACQ,IAAAA;AACtB,CAAC,GAAA,EAAA;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/data/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\n\nimport { FloatingPortal, useMergeRefs } from '@floating-ui/react';\n\nimport useFloatingPopover from '../../../hooks/useFloatingPopover';\nimport { getElementRef } from '../../../utils/getElementRef';\nimport { SharedFloatingArrow, TOOLTIP_ARROW } from '../_shared/FloatingArrow.styled';\nimport * as S from './Tooltip.styled';\n\nimport type { OpenChangeReason } from '@floating-ui/react';\nimport type { PopoverPlacement, PopperOffset } from '../../../hooks/useFloatingPopover';\n\n// tippy's observable defaults: arrow=true, maxWidth=350 (decides wrap), zIndex=9999. All reproduced, not dropped.\nconst TIPPY_DEFAULT_ARROW = true;\nconst TIPPY_DEFAULT_MAX_WIDTH = 350;\nconst TIPPY_DEFAULT_Z_INDEX = 9999;\n\n// Tooltip offset is box distance (not tip gap like Popover); arrowHeight: 0 keeps hook's axis equal to offset[1] exactly.\nconst TOOLTIP_OFFSET: PopperOffset = [0, 10];\nconst TOOLTIP_ARROW_HEIGHT_IS_IN_THE_OFFSET_ALREADY = 0;\n\n// tippy.css applied this viewport cap through [data-tippy-root] (the positioner), carried over.\nconst POSITIONER_MAX_WIDTH = 'calc(100vw - 10px)';\n\n// tippy's three-way appendTo: given value portals, absent+interactive=true renders INLINE, absent+interactive=false portals to body. Safe for Tooltip (interactive defaults false).\nexport type TooltipAppendTo = 'parent' | Element | ((reference: Element) => Element);\n\ntype TooltipOwnProps = {\n  /**\n   * The content of the `Tooltip`.\n   *\n   * **NB!** If the content is a `string`, it should be wrapped in a tag, e.g.\n   * `<span>{content}</span>`. The requirement outlived its original cause — it was a\n   * `@tippyjs/react` quirk — but it is kept because consumers have written to it.\n   */\n  content: string | React.ReactElement<any>;\n  /**\n   * Determines if the tooltip has interactive content inside of it, so that it can be\n   * hovered over and clicked inside without hiding.\n   */\n  interactive?: boolean;\n  /**\n   * The preferred placement of the tooltip. Note that the flip middleware can change this\n   * to the opposite placement if it has more space.\n   */\n  placement?: PopoverPlacement;\n  /**\n   * Duration in ms of the transition animation.\n   */\n  duration?: number;\n  /**\n   * Events that cause the tooltip to show (space-separated). Defaults to `'mouseenter focus'`, `''` means no triggers.\n   */\n  trigger?: 'mouseenter' | 'mouseenter focus' | 'click' | 'focusin' | 'mouseenter click' | '';\n  /**\n   * Pass a boolean to control visibility; both `true` and `false` disable native triggers. `undefined` leaves uncontrolled.\n   */\n  visible?: boolean;\n  /**\n   * Whether the arrow is rendered. Defaults to `true`, which is tippy's default and was\n   * therefore already the behaviour; 6 consumer call sites pass `false`.\n   */\n  arrow?: boolean;\n  /**\n   * `z-index` of the positioned element (default: 9999, tippy's default).\n   */\n  zIndex?: number;\n  /**\n   * Disabled tooltip can never open, even under controlled `visible={true}` (tippy semantics).\n   */\n  disabled?: boolean;\n  /**\n   * `[skidding, distance]`, Popper's convention, where `distance` is the gap between the\n   * reference and the tooltip BOX. Defaults to tippy's `[0, 10]`.\n   */\n  offset?: PopperOffset;\n  /**\n   * Cap on the box's width, in px. Defaults to 350 — tippy's default, and applied to every\n   * tooltip today, so it decides where text wraps.\n   */\n  maxWidth?: number;\n  /**\n   * Where the tooltip is rendered. Defaults to `document.body`. See `TooltipAppendTo`.\n   */\n  appendTo?: TooltipAppendTo;\n  /** Fired when a press lands outside both the reference and the tooltip. */\n  onClickOutside?: (event?: Event) => void;\n  /**\n   * @deprecated Accepted and IGNORED. This was a Popper `modifiers` array; Floating UI has\n   * middleware instead and the two are not translatable prop-for-prop. Kept so that no\n   * existing call site throws — plan C6.\n   */\n  modifiers?: unknown;\n  /**\n   * @deprecated Accepted and IGNORED, for the same reason as `modifiers`.\n   */\n  popperOptions?: unknown;\n  children?: React.ReactNode;\n};\n\n// Props spreads onto S.Tooltip, so published type must admit its props. Base moved from styled(Tippy) to styled.div, requiring explicit declaration of zIndex, arrow, disabled, maxWidth.\ntype Props = Omit<React.ComponentPropsWithoutRef<typeof S.Tooltip>, keyof TooltipOwnProps> &\n  TooltipOwnProps;\n\n// Props accepted-but-ignored: onClick/onChange/onSubmit filter is load-bearing (would activate dead handlers); modifiers/popperOptions are plan C6 deprecations.\nconst PROPS_NEVER_FORWARDED = ['onClick', 'onChange', 'onSubmit', 'modifiers', 'popperOptions'];\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n *\n * ### Import\n *\n * ``` js\n * import { Tooltip } from '@ntbjs/react-components/data'\n * // or\n * import Tooltip from '@ntbjs/react-components/data/Tooltip'\n * ```\n */\nconst Tooltip = React.forwardRef<any, Props>(function Tooltip(\n  {\n    content = 'Tooltip',\n    interactive = false,\n    placement = 'top',\n    duration = 350,\n    trigger,\n    visible,\n    children,\n    arrow: hasArrow = TIPPY_DEFAULT_ARROW,\n    zIndex = TIPPY_DEFAULT_Z_INDEX,\n    disabled = false,\n    offset = TOOLTIP_OFFSET,\n    maxWidth = TIPPY_DEFAULT_MAX_WIDTH,\n    appendTo,\n    onClickOutside,\n    ...props\n  },\n  ref\n) {\n  const onOpenChange = React.useCallback(\n    (open: boolean, event?: Event, reason?: OpenChangeReason) => {\n      if (!open && reason === 'outside-press') {\n        onClickOutside?.(event);\n      }\n    },\n    [onClickOutside]\n  );\n\n  const {\n    refs,\n    floatingStyles,\n    context,\n    getReferenceProps,\n    getFloatingProps,\n    isMounted,\n    transitionStyles,\n    arrowRef,\n    placement: resolvedPlacement,\n    pointerEvents\n  } = useFloatingPopover({\n    placement,\n    open: visible,\n    onOpenChange,\n    trigger,\n    offset,\n    arrow: hasArrow,\n    arrowHeight: TOOLTIP_ARROW_HEIGHT_IS_IN_THE_OFFSET_ALREADY,\n    interactive,\n    disabled,\n    duration\n  });\n\n  // Reference is the CHILD (not wrapper) for positioning compat; ref merges forwarded ref, child's ref, and setReference.\n  const childRef = React.isValidElement(children) ? getElementRef(children) : null;\n  const referenceRef = useMergeRefs([ref, childRef, refs.setReference]);\n\n  const filteredProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => !PROPS_NEVER_FORWARDED.includes(key))\n  );\n\n  // Floating UI composes handlers with existing ones, so child's own handlers still work.\n  const reference = React.isValidElement(children)\n    ? React.cloneElement(\n        children as React.ReactElement<Record<string, unknown>>,\n        {\n          ...getReferenceProps((children as React.ReactElement<Record<string, unknown>>).props),\n          ref: referenceRef\n        } as never\n      )\n    : children;\n\n  // Inline rendering: 'parent' or (interactive && no explicit appendTo).\n  const renderInline = appendTo === 'parent' || (interactive && appendTo === undefined);\n\n  // null/undefined NOT interchangeable: undefined→document.body default, null→defer until reference exists.\n  const resolvePortalRoot = (): HTMLElement | null | undefined => {\n    if (renderInline || appendTo === undefined) return undefined;\n    if (typeof appendTo === 'function') {\n      const node = refs.reference.current;\n      return node instanceof Element ? (appendTo(node) as HTMLElement) : null;\n    }\n    return appendTo as HTMLElement;\n  };\n\n  const floating = isMounted ? (\n    <div\n      ref={refs.setFloating}\n      style={{ ...floatingStyles, zIndex, pointerEvents, maxWidth: POSITIONER_MAX_WIDTH }}\n      {...getFloatingProps()}\n    >\n      {/*\n       * filteredProps first so explicit attrs can't override transition/placement styles.\n       */}\n      <S.Tooltip\n        {...filteredProps}\n        data-placement={resolvedPlacement}\n        role=\"tooltip\"\n        tabIndex={-1}\n        style={{ ...transitionStyles, maxWidth }}\n      >\n        <div className=\"tippy-content\">{content}</div>\n        {hasArrow && (\n          <SharedFloatingArrow\n            ref={arrowRef}\n            context={context}\n            data-arrow-surface=\"tooltip\"\n            {...TOOLTIP_ARROW}\n          />\n        )}\n      </S.Tooltip>\n    </div>\n  ) : null;\n\n  // Bare wrapper preserved for compat; load-bearing for TextArea/CompactTextInput onMouseLeave.\n  return (\n    <div>\n      {reference}\n      {renderInline ? (\n        floating\n      ) : (\n        <FloatingPortal root={resolvePortalRoot()}>{floating}</FloatingPortal>\n      )}\n    </div>\n  );\n});\n\nexport default Tooltip;\n"],"names":["TIPPY_DEFAULT_ARROW","TIPPY_DEFAULT_MAX_WIDTH","TIPPY_DEFAULT_Z_INDEX","TOOLTIP_OFFSET","TOOLTIP_ARROW_HEIGHT_IS_IN_THE_OFFSET_ALREADY","POSITIONER_MAX_WIDTH","PROPS_NEVER_FORWARDED","Tooltip","React","forwardRef","content","interactive","placement","duration","trigger","visible","children","arrow","hasArrow","zIndex","disabled","offset","maxWidth","appendTo","onClickOutside","props","ref","onOpenChange","useCallback","open","event","reason","refs","floatingStyles","context","getReferenceProps","getFloatingProps","isMounted","transitionStyles","arrowRef","resolvedPlacement","pointerEvents","useFloatingPopover","arrowHeight","childRef","isValidElement","getElementRef","referenceRef","useMergeRefs","setReference","filteredProps","Object","fromEntries","entries","filter","key","includes","reference","cloneElement","renderInline","undefined","resolvePortalRoot","node","current","Element","floating","_jsx","setFloating","style","_jsxs","S","role","tabIndex","className","SharedFloatingArrow","TOOLTIP_ARROW","FloatingPortal","root"],"mappings":"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"}

package/build/data/Tooltip/Tooltip.styled.js

@@ -1,28 +1,15 @@
 import styled from 'styled-components';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
-import TippyTooltip from '@tippyjs/react';
-import 'tippy.js/animations/shift-away-subtle.css';
-import 'tippy.js/dist/tippy.css';
 
-const Tooltip = styled(TippyTooltip).attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 1rem;
-  font-weight: 400;
-  background: ${props => props.theme.getColor('gray-700')};
-  border-radius: 3px;
-  pointer-events: default !important;
-  .tippy-content {
-    padding: 9px 12px;
-  }
-
-  .tippy-arrow {
-    color: ${props => props.theme.getColor('gray-700')};
-  }
-
-  a {
-    color: inherit;
-  }
-`;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Tooltip = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Tooltipstyled__Tooltip",
+  componentId: "sc-vg943j-0"
+})(["position:relative;outline:0;white-space:normal;line-height:1.4;color:", ";font-family:", ";font-size:1rem;font-weight:400;background:", ";border-radius:3px;.tippy-content{position:relative;z-index:1;padding:9px 12px;}a{color:inherit;}"], props => props.theme.getColor('white'), props => props.theme.primaryFontFamily, props => props.theme.getColor('gray-700'));
 
 export { Tooltip };
 //# sourceMappingURL=Tooltip.styled.js.map

package/build/data/Tooltip/Tooltip.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styled.js","sources":["../../../src/components/data/Tooltip/Tooltip.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nimport Tippy from '@tippyjs/react';\nimport 'tippy.js/animations/shift-away-subtle.css';\nimport 'tippy.js/dist/tippy.css';\n\nexport const Tooltip = styled(Tippy).attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 400;\n  background: ${props => props.theme.getColor('gray-700')};\n  border-radius: 3px;\n  pointer-events: default !important;\n  .tippy-content {\n    padding: 9px 12px;\n  }\n\n  .tippy-arrow {\n    color: ${props => props.theme.getColor('gray-700')};\n  }\n\n  a {\n    color: inherit;\n  }\n`;\n"],"names":["Tooltip","styled","Tippy","attrs","applyDefaultTheme","props","theme","primaryFontFamily","getColor"],"mappings":";;;;;;AAOO,MAAMA,OAAO,GAAGC,MAAM,CAACC,YAAK,CAAC,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC7D,eAAA,EAAiBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;AACA,cAAgBF,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACtD;AACA;AACA;AACA;AACA;AACA;;;;"}
+{"version":3,"file":"Tooltip.styled.js","sources":["../../../src/components/data/Tooltip/Tooltip.styled.ts"],"sourcesContent":["// Carries two load-bearing styles from tippy.css: color:white and position:relative (arrow container). Also line-height, white-space, outline. Arrow CSS replaced by SVG (FloatingArrow.styled.ts).\n\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n// Mandatory (not optional) to filter theme object from DOM; fixes declared defect where theme was written as `data-theme=\"[object Object]\"`.\n\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\n/**\n * The tooltip box — what `.tippy-box` was.\n *\n * `Tooltip.tsx` puts the transition styles and the `max-width` on this element inline and\n * the POSITION on its parent, matching the split tippy used (animated box inside a\n * Popper-positioned root) and the one the three existing Floating UI sites use.\n */\nexport const Tooltip = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: relative;\n  outline: 0;\n  white-space: normal;\n  line-height: 1.4;\n  color: ${props => props.theme.getColor('white')};\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 400;\n  background: ${props => props.theme.getColor('gray-700')};\n  border-radius: 3px;\n\n  .tippy-content {\n    position: relative;\n    z-index: 1;\n    padding: 9px 12px;\n  }\n\n  a {\n    color: inherit;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Tooltip","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","getColor","primaryFontFamily"],"mappings":";;;AAOA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AASM,MAAMC,OAAO,GAAGC,MAAM,CAACC,GAAG,CAC9BC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uEAAA,EAAA,eAAA,EAAA,6CAAA,EAAA,mGAAA,CAAA,EAKhBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,QAAQ,CAAC,OAAO,CAAC,EAChCF,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,iBAAiB,EAGvCH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,QAAQ,CAAC,UAAU,CAAC;;;;"}

package/build/data/VerificationStatusIcon/VerificationStatusIcon.js

@@ -1,36 +1,29 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import { VerificationIconWrapper, VerificationStatusIcon as VerificationStatusIcon$1, VerificationStatusColor } from './VerificationStatusIcon.styled.js';
 import { ReactComponent as SvgVerification } from '../../icons/verification.svg.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const VerificationStatusIcon = React__default.forwardRef(function VerificationStatusIcon({
   status,
-  iconHeight,
-  background,
+  iconHeight = 15,
+  background = false,
   ...props
 }, forwardedRef) {
-  return React__default.createElement(VerificationIconWrapper, {
-    $background: background
-  }, React__default.createElement(VerificationStatusIcon$1, _extends({
-    $iconHeight: iconHeight,
+  return jsx(VerificationIconWrapper, {
     $background: background,
-    ref: forwardedRef
-  }, props), React__default.createElement(SvgVerification, null), React__default.createElement(VerificationStatusColor, {
-    $iconHeight: iconHeight,
-    $status: status,
-    $background: background
-  })));
+    children: jsxs(VerificationStatusIcon$1, {
+      $iconHeight: iconHeight,
+      $background: background,
+      ref: forwardedRef,
+      ...props,
+      children: [jsx(SvgVerification, {}), jsx(VerificationStatusColor, {
+        $iconHeight: iconHeight,
+        $status: status,
+        $background: background
+      })]
+    })
+  });
 });
-VerificationStatusIcon.propTypes = process.env.NODE_ENV !== "production" ? {
-  status: PropTypes.oneOf(['verified', 'pending', 'rejected', 'mixed']).isRequired,
-  iconHeight: PropTypes.number,
-  background: PropTypes.bool
-} : {};
-VerificationStatusIcon.defaultProps = {
-  iconHeight: 15,
-  background: false
-};
 
 export { VerificationStatusIcon as default };
 //# sourceMappingURL=VerificationStatusIcon.js.map