@ntbjs/react-components 2.0.13 → 3.0.0-rc.1

package/build/data/SeverityBadge/SeverityBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"SeverityBadge.js","sources":["../../../src/components/data/SeverityBadge/SeverityBadge.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Badge from '../Badge/Badge';\n\nconst InformationIcon = () => (\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M6 11C3.2385 11 1 8.7615 1 6C1 3.2385 3.2385 1 6 1C8.7615 1 11 3.2385 11 6C11 8.7615 8.7615 11 6 11ZM6 10C7.06087 10 8.07828 9.57857 8.82843 8.82843C9.57857 8.07828 10 7.06087 10 6C10 4.93913 9.57857 3.92172 8.82843 3.17157C8.07828 2.42143 7.06087 2 6 2C4.93913 2 3.92172 2.42143 3.17157 3.17157C2.42143 3.92172 2 4.93913 2 6C2 7.06087 2.42143 8.07828 3.17157 8.82843C3.92172 9.57857 4.93913 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nconst SEVERITY_BADGE_STYLES = {\n  1: {\n    backgroundColors: ['#272727', '#ffffff'],\n    colors: ['#d9dce0', '#202435'],\n    borderColors: ['#3a3a3a', '#ece4e1']\n  },\n  2: {\n    backgroundColors: ['#272727', '#ffffff'],\n    colors: ['#d9dce0', '#202435'],\n    borderColors: ['#3a3a3a', '#ece4e1']\n  },\n  3: {\n    backgroundColors: ['#2e2301', '#faeeb3'],\n    colors: ['#eab308', '#78350F']\n  },\n  4: {\n    backgroundColors: ['#2e2301', '#faeeb3'],\n    colors: ['#eab308', '#78350F']\n  },\n  5: {\n    backgroundColors: ['#7E1B1B', 'rgba(182, 41, 2, 0.1)'],\n    colors: ['#e8d5d6', '#b62902']\n  }\n};\n\n/**\n * A severity-aware badge that maps a severity level (1-5) to the appropriate\n * color scheme and icon. Thin wrapper around Badge.\n *\n * ### Import\n *\n * ```js\n * import { SeverityBadge } from \"@ntbjs/react-components/data\";\n * // named exports for advanced use\n * ```\n */\nconst SeverityBadge = React.forwardRef(function SeverityBadge(\n  {\n    severity,\n    label,\n    icon,\n    fontSize = 12,\n    fontWeight = 500,\n    height = 24,\n    horizontalPadding = 8,\n    verticalPadding = 2,\n    ...rest\n  },\n  forwardedRef\n) {\n  const style = SEVERITY_BADGE_STYLES[severity] || SEVERITY_BADGE_STYLES[1];\n\n  return (\n    <Badge\n      ref={forwardedRef}\n      badgeIcon={icon === undefined ? <InformationIcon /> : icon}\n      badgeContent={label}\n      backgroundColors={style.backgroundColors}\n      colors={style.colors}\n      borderColors={style.borderColors}\n      fontSize={fontSize}\n      fontWeight={fontWeight}\n      height={height}\n      horizontalPadding={horizontalPadding}\n      verticalPadding={verticalPadding}\n      {...rest}\n    />\n  );\n});\n\nSeverityBadge.propTypes = {\n  /** Severity level (1-5). 1-2 = Info, 3-4 = Limited use, 5 = Highly restricted. */\n  severity: PropTypes.oneOf([1, 2, 3, 4, 5]).isRequired,\n  /** Badge content — string or JSX node (e.g. label with remove button). */\n  label: PropTypes.node.isRequired,\n  /** Override the default information icon. Pass null to suppress. */\n  icon: PropTypes.node,\n  /** Font size in pixels. */\n  fontSize: PropTypes.number,\n  /** Font weight. */\n  fontWeight: PropTypes.number,\n  /** Badge height in pixels. */\n  height: PropTypes.number,\n  /** Left and right padding in pixels. */\n  horizontalPadding: PropTypes.number,\n  /** Top and bottom padding in pixels. */\n  verticalPadding: PropTypes.number\n};\n\nexport default SeverityBadge;\n"],"names":["InformationIcon","React","createElement","width","height","viewBox","fill","xmlns","d","SEVERITY_BADGE_STYLES","backgroundColors","colors","borderColors","SeverityBadge","forwardRef","severity","label","icon","fontSize","fontWeight","horizontalPadding","verticalPadding","rest","forwardedRef","style","Badge","_extends","ref","badgeIcon","undefined","badgeContent","propTypes","process","env","NODE_ENV","PropTypes","oneOf","isRequired","node","number"],"mappings":"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"}
+{"version":3,"file":"SeverityBadge.js","sources":["../../../src/components/data/SeverityBadge/SeverityBadge.tsx"],"sourcesContent":["import React from 'react';\nimport Badge from '../Badge/Badge';\n\nconst InformationIcon = () => (\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M6 11C3.2385 11 1 8.7615 1 6C1 3.2385 3.2385 1 6 1C8.7615 1 11 3.2385 11 6C11 8.7615 8.7615 11 6 11ZM6 10C7.06087 10 8.07828 9.57857 8.82843 8.82843C9.57857 8.07828 10 7.06087 10 6C10 4.93913 9.57857 3.92172 8.82843 3.17157C8.07828 2.42143 7.06087 2 6 2C4.93913 2 3.92172 2.42143 3.17157 3.17157C2.42143 3.92172 2 4.93913 2 6C2 7.06087 2.42143 8.07828 3.17157 8.82843C3.92172 9.57857 4.93913 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\n/**\n * NMB-3998 playbook §E.3 defect #9: `style.borderColors` was read unconditionally while\n * only severities 1 and 2 define it, so `<Badge borderColors={undefined} />` is what\n * severities 3, 4 and 5 have always passed. That is TS2339 on the read.\n *\n * The asymmetry is REPORTED, NOT \"FIXED\", because both of §E.3's suggested fixes are\n * product decisions that change rendered output: inventing border colours for 3-5 adds a\n * 1px border that has never been there (`Badge` applies one only \"when provided\"), and\n * deleting the read removes the border severities 1-2 do have. Neither is derivable from\n * this repository, so per §E.1 rule 2 the type records what the code DOES instead: the\n * member is optional. `Badge.borderColors` is already `string[] | undefined`, so passing\n * `undefined` was always well-typed at the receiving end — only the read was not.\n *\n * This annotation is type-only. It emits identical JavaScript and cannot move the\n * baseline. If the missing borders turn out to be the bug, that is a visual change and\n * belongs with C10's re-record.\n */\ntype SeverityBadgeStyle = {\n  backgroundColors: string[];\n  colors: string[];\n  borderColors?: string[];\n};\n\nconst SEVERITY_BADGE_STYLES: Record<1 | 2 | 3 | 4 | 5, SeverityBadgeStyle> = {\n  1: {\n    backgroundColors: ['#272727', '#ffffff'],\n    colors: ['#d9dce0', '#202435'],\n    borderColors: ['#3a3a3a', '#ece4e1']\n  },\n  2: {\n    backgroundColors: ['#272727', '#ffffff'],\n    colors: ['#d9dce0', '#202435'],\n    borderColors: ['#3a3a3a', '#ece4e1']\n  },\n  3: {\n    backgroundColors: ['#2e2301', '#faeeb3'],\n    colors: ['#eab308', '#78350F']\n  },\n  4: {\n    backgroundColors: ['#2e2301', '#faeeb3'],\n    colors: ['#eab308', '#78350F']\n  },\n  5: {\n    backgroundColors: ['#7E1B1B', 'rgba(182, 41, 2, 0.1)'],\n    colors: ['#e8d5d6', '#b62902']\n  }\n};\n\ntype SeverityBadgeOwnProps = {\n  /** Severity level (1-5). 1-2 = Info, 3-4 = Limited use, 5 = Highly restricted. */\n  severity: 1 | 2 | 3 | 4 | 5;\n  /** Badge content — string or JSX node (e.g. label with remove button). */\n  label: React.ReactNode;\n  /** Override the default information icon. Pass null to suppress. */\n  icon?: React.ReactNode;\n  /** Font size in pixels. */\n  fontSize?: number;\n  /** Font weight. */\n  fontWeight?: number;\n  /** Badge height in pixels. */\n  height?: number;\n  /** Left and right padding in pixels. */\n  horizontalPadding?: number;\n  /** Top and bottom padding in pixels. */\n  verticalPadding?: number;\n};\n\n/*\n * NMB-3998 §C.2: `rest` is spread onto `Badge`, so the published type\n * has to admit that target's props too — a closed type here is worse than `any` for the\n * 125 consumer files. Declared members win over the base (`Omit` by `keyof SeverityBadgeOwnProps`);\n * a bare `&` would INTERSECT a colliding member instead of overriding it, which narrows\n * it (measured: `rows?: number | string` & `rows?: number`) or empties it to `never`.\n */\ntype SeverityBadgeProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Badge>,\n  keyof SeverityBadgeOwnProps\n> &\n  SeverityBadgeOwnProps;\n\n/**\n * A severity-aware badge that maps a severity level (1-5) to the appropriate\n * color scheme and icon. Thin wrapper around Badge.\n *\n * ### Import\n *\n * ```js\n * import { SeverityBadge } from \"@ntbjs/react-components/data\";\n * // named exports for advanced use\n * ```\n */\nconst SeverityBadge = React.forwardRef<any, SeverityBadgeProps>(function SeverityBadge(\n  {\n    severity,\n    label,\n    icon,\n    fontSize = 12,\n    fontWeight = 500,\n    height = 24,\n    horizontalPadding = 8,\n    verticalPadding = 2,\n    ...rest\n  },\n  forwardedRef\n) {\n  const style = SEVERITY_BADGE_STYLES[severity] || SEVERITY_BADGE_STYLES[1];\n\n  return (\n    <Badge\n      ref={forwardedRef}\n      badgeIcon={icon === undefined ? <InformationIcon /> : icon}\n      badgeContent={label}\n      backgroundColors={style.backgroundColors}\n      colors={style.colors}\n      borderColors={style.borderColors}\n      fontSize={fontSize}\n      fontWeight={fontWeight}\n      height={height}\n      horizontalPadding={horizontalPadding}\n      verticalPadding={verticalPadding}\n      {...rest}\n    />\n  );\n});\n\nexport default SeverityBadge;\n"],"names":["InformationIcon","_jsx","width","height","viewBox","fill","xmlns","children","d","SEVERITY_BADGE_STYLES","backgroundColors","colors","borderColors","SeverityBadge","React","forwardRef","severity","label","icon","fontSize","fontWeight","horizontalPadding","verticalPadding","rest","forwardedRef","style","Badge","ref","badgeIcon","undefined","badgeContent"],"mappings":";;;;AAGA,MAAMA,eAAe,GAAGA,MACtBC,GAAA,CAAA,KAAA,EAAA;AAAKC,EAAAA,KAAK,EAAC,IAAI;AAACC,EAAAA,MAAM,EAAC,IAAI;AAACC,EAAAA,OAAO,EAAC,WAAW;AAACC,EAAAA,IAAI,EAAC,MAAM;AAACC,EAAAA,KAAK,EAAC,4BAA4B;AAAAC,EAAAA,QAAA,EAC5FN,GAAA,CAAA,MAAA,EAAA;AACEO,IAAAA,CAAC,EAAC,ocAAoc;AACtcH,IAAAA,IAAI,EAAC;GACN;AAAC,CACC,CACN;AAyBD,MAAMI,qBAAoE,GAAG;AAC3E,EAAA,CAAC,EAAE;AACDC,IAAAA,gBAAgB,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;AACxCC,IAAAA,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;AAC9BC,IAAAA,YAAY,EAAE,CAAC,SAAS,EAAE,SAAS;GACpC;AACD,EAAA,CAAC,EAAE;AACDF,IAAAA,gBAAgB,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;AACxCC,IAAAA,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;AAC9BC,IAAAA,YAAY,EAAE,CAAC,SAAS,EAAE,SAAS;GACpC;AACD,EAAA,CAAC,EAAE;AACDF,IAAAA,gBAAgB,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;AACxCC,IAAAA,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS;GAC9B;AACD,EAAA,CAAC,EAAE;AACDD,IAAAA,gBAAgB,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;AACxCC,IAAAA,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS;GAC9B;AACD,EAAA,CAAC,EAAE;AACDD,IAAAA,gBAAgB,EAAE,CAAC,SAAS,EAAE,uBAAuB,CAAC;AACtDC,IAAAA,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS;AAC/B;AACF,CAAC;AA6CD,MAAME,aAAa,GAAGC,cAAK,CAACC,UAAU,CAA0B,SAASF,aAAaA,CACpF;EACEG,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,UAAU,GAAG,GAAG;AAChBjB,EAAAA,MAAM,GAAG,EAAE;AACXkB,EAAAA,iBAAiB,GAAG,CAAC;AACrBC,EAAAA,eAAe,GAAG,CAAC;EACnB,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,KAAK,GAAGhB,qBAAqB,CAACO,QAAQ,CAAC,IAAIP,qBAAqB,CAAC,CAAC,CAAC;EAEzE,OACER,GAAA,CAACyB,KAAK,EAAA;AACJC,IAAAA,GAAG,EAAEH,YAAa;IAClBI,SAAS,EAAEV,IAAI,KAAKW,SAAS,GAAG5B,GAAA,CAACD,eAAe,EAAA,EAAE,CAAC,GAAGkB,IAAK;AAC3DY,IAAAA,YAAY,EAAEb,KAAM;IACpBP,gBAAgB,EAAEe,KAAK,CAACf,gBAAiB;IACzCC,MAAM,EAAEc,KAAK,CAACd,MAAO;IACrBC,YAAY,EAAEa,KAAK,CAACb,YAAa;AACjCO,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,UAAU,EAAEA,UAAW;AACvBjB,IAAAA,MAAM,EAAEA,MAAO;AACfkB,IAAAA,iBAAiB,EAAEA,iBAAkB;AACrCC,IAAAA,eAAe,EAAEA,eAAgB;IAAA,GAC7BC;AAAI,GACT,CAAC;AAEN,CAAC;;;;"}

package/build/data/SeverityBadge/index.js

@@ -0,0 +1,2 @@
+export { default } from './SeverityBadge.js';
+//# sourceMappingURL=index.js.map

package/build/data/SeverityBadge/index.js.map

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

package/build/data/Tab/Tab.js

@@ -1,25 +1,19 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
 import React__default from 'react';
 import { Tab as Tab$1 } from './Tab.styled.js';
+import { jsx } from 'react/jsx-runtime';
 
 const Tab = React__default.forwardRef(function Tab({
   children,
-  hidden,
+  hidden = false,
   ...props
 }, forwardedRef) {
   if (hidden) return null;
-  return React__default.createElement(Tab$1, _extends({
-    ref: forwardedRef
-  }, props), children);
+  return jsx(Tab$1, {
+    ref: forwardedRef,
+    ...props,
+    children: children
+  });
 });
-Tab.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.any,
-  hidden: PropTypes.bool
-} : {};
-Tab.defaultProps = {
-  hidden: false
-};
 
 export { Tab as default };
 //# sourceMappingURL=Tab.js.map

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`:\n   * `<Tab trigger={<Badge>Tab title</Badge>}>`.\n   *\n   * NOT DECLARED BY THE OLD propTypes AND NOT READ BY THIS COMPONENT — which is why\n   * neither the codemod nor the widening pass could produce it, and why it is\n   * hand-written here. `Tab` is a data carrier: `Tabs.tsx` walks its children with\n   * `child.type === Tab` and lifts `child.props?.trigger` out, then renders it inside\n   * `S.TabHeader`. The `<Tab>` element itself is never mounted, so `trigger` never\n   * reaches the DOM and there is no attribute leak to fix.\n   *\n   * `ReactElement`, not `ReactNode`: `Tabs.handleTabClick` reads\n   * `tab.trigger.props.children` to build the `triggerText` it passes to `onTabClick`.\n   * A string trigger would compile under `ReactNode` and silently produce an empty\n   * `triggerText`. All 44 call sites in `src` pass a `<Badge>`.\n   */\n  trigger?: React.ReactElement<any>;\n};\n\n/*\n * NMB-3998 §C.2: `props` is spread onto `S.Tab`, so the published type\n * has to admit that target's props too — a closed type here is worse than `any` for the\n * 125 consumer files. Declared members win over the base (`Omit` by `keyof TabOwnProps`);\n * a bare `&` would INTERSECT a colliding member instead of overriding it, which narrows\n * it (measured: `rows?: number | string` & `rows?: number`) or empties it to `never`.\n */\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":";;;;AAqCA,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 * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * NO GENERIC HERE, AND THAT IS THE CORRECT OUTCOME, NOT AN OMISSION. The single template\n * below reads only `props.theme`, which `ExecutionContext` already supplies via the C6\n * `DefaultTheme` augmentation, and `Tab.tsx` passes no transient prop at all — it spreads\n * `{...props}` and consumes `hidden` itself by returning `null`. Rule 2: declare only what\n * the component actually passes. This file entered the styled-generics bucket at 0 errors\n * and the only change it needs is the `shouldForwardProp` parameter annotation.\n *\n * `Tab` is not independent of `Tabs`: `Tabs.tsx` identifies its children with\n * `child.type === Tab`, so the two are one unit for any change to either's props.\n */\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\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. §J.4. `prop` needs the annotation\n * because `withConfig` takes this by reference, so it gets no contextual typing and\n * `prop.startsWith` would otherwise go unchecked.\n */\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":";;;AAwBA,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/*\n * NMB-3998 §C.2: `props` is spread onto `S.Tabs`, so the published type\n * has to admit that target's props too — a closed type here is worse than `any` for the\n * 125 consumer files. Declared members win over the base (`Omit` by `keyof TabsOwnProps`);\n * a bare `&` would INTERSECT a colliding member instead of overriding it, which narrows\n * it (measured: `rows?: number | string` & `rows?: number`) or empties it to `never`.\n */\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 * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * `Tabs` is not independent of `Tab`: `Tabs.tsx` identifies its children with\n * `child.type === Tab`, so the two files are one unit for any change to either's props.\n *\n * ONE DEFERRED DEFECT, DECLARED NOT FIXED, and it is the only one in this file:\n * `custompadding` has no `$`, so it is in the rendered HTML. It is CONFIRMED in the\n * recorded baseline rather than inferred — `scripts/r19-harness/baseline.json` contains\n * `<ul custompadding=\"40px\" …>` for `data/Tabs`. See `TabPaddingStyleProps`.\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`, the two components `Tabs.tsx` hands\n * `custompadding` to. One interface rather than two because the key, the value and the\n * defect are the same at both sites; a change here is a change to both, which is the\n * point of naming them together.\n *\n * DEFECT, DECLARED NOT FIXED: `custompadding` HAS NO `$`, so `shouldForwardProp` forwards\n * it and it lands on the rendered `<ul>` and `<div>`. This is not inferred — it is in\n * `scripts/r19-harness/baseline.json` as `<ul custompadding=\"40px\" …>`. The fix is to\n * rename it `$customPadding` at both ends, which REMOVES a DOM attribute and so belongs to\n * C10 with its baseline re-record. §E.4's third case.\n *\n * `number | string`, not the `PropTypes.string` the propTypes claim: `Tabs.tsx` DEFAULTS\n * `customPadding` to the NUMBER `0`, and that default is what reaches these templates in\n * the common case. It is falsy, so the `!props.custompadding` arm wins and the padding\n * shorthand is emitted as `padding: 0` / `margin: -2px 0` — correct by accident. A\n * caller-supplied number would emit a unitless `padding: 0 8`, which is why the union is\n * worth stating rather than tidying away.\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. §J.4. `prop` needs the annotation\n * because `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