@times-design-system/components-react 1.2.1-alpha.7 → 1.3.0

package/dist/Tab/Tab.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import './styles.css';
+import { IconName } from '@times-design-system/icons';
+type TabState = 'base' | 'hover' | 'pressed' | 'disabled' | 'focus';
+type TabSize = 'medium' | 'large';
+export interface TabProps {
+    /** Visual preview state for parity/testing */
+    state?: TabState;
+    /** Tab size variant */
+    size?: TabSize;
+    /** Whether the tab is the selected tab in its group */
+    active?: boolean;
+    /** Applies channel color token family */
+    channel?: boolean;
+    /** Show a leading icon */
+    leftIcon?: IconName;
+    /** Show a trailing icon */
+    rightIcon?: IconName;
+    /** Visible label */
+    label?: React.ReactNode;
+    /** Optional alias for label content */
+    children?: React.ReactNode;
+    /** Optional accessible name override */
+    'aria-label'?: string;
+    /** Optional camelCase alias for aria-label */
+    ariaLabel?: string;
+    /** Optional id for aria-controls relationships */
+    id?: string;
+    /** Id of the panel this tab controls */
+    'aria-controls'?: string;
+    /** @ignore */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** @ignore */
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    disabled?: boolean;
+    /** @ignore */
+    tabIndex?: number;
+}
+/** Single tab inside a TabGroup. Render through TabGroup for tablist semantics and keyboard nav. */
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/TabGroup/TabGroup.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import './styles.css';
+type TabGroupBehaviour = 'hug' | '100%';
+export interface TabGroupProps {
+    /** Sizing behaviour: hug content or fill the container */
+    behaviour?: TabGroupBehaviour;
+    /** Index of the initially selected tab (uncontrolled) */
+    defaultSelectedIndex?: number;
+    /** Index of the selected tab (controlled) */
+    selectedIndex?: number;
+    /** Callback fired when the selected tab changes */
+    onSelectedIndexChange?: (index: number) => void;
+    /** Tab children */
+    children?: React.ReactNode;
+    /** Optional accessible name for the tablist */
+    'aria-label'?: string;
+    /** Optional camelCase alias for aria-label */
+    ariaLabel?: string;
+    /** Optional id for the tablist root */
+    id?: string;
+    /** @ignore */
+    className?: string;
+}
+/** Tablist container that manages selection and keyboard navigation across Tab children. */
+export declare const TabGroup: React.FC<TabGroupProps>;
+export {};

package/dist/Text/Text.cjs

@@ -1,26 +1,28 @@
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../shared/_rollupPluginBabelHelpers-B3P3Gzh9.cjs');
 var React = require('react');
 var styleInject_es = require('../shared/style-inject.es-DnsWrQaj.cjs');
 var cn = require('../shared/cn-CPfjOlzZ.cjs');
 
-var css_248z = ".storybook-button{border:0;border-radius:3em;cursor:pointer;display:inline-block;font-family:Roboto,Roboto-Regular,Helvetica,Arial,sans-serif;font-weight:700;line-height:1}.storybook-button--primary{background-color:#555ab9;color:#fff}.storybook-button--secondary{background-color:transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);color:#333}.storybook-button--small{font-size:12px;padding:10px 16px}.storybook-button--medium{font-size:14px;padding:11px 20px}.storybook-button--large{font-size:16px;padding:12px 24px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsa0JBR0UsUUFBUyxDQUNULGlCQUFrQixDQUZsQixjQUFlLENBRGYsb0JBQXFCLENBTXJCLDREQUFxRSxDQUZyRSxlQUFnQixDQUNoQixhQUVGLENBQ0EsMkJBQ0Usd0JBQXlCLENBQ3pCLFVBQ0YsQ0FDQSw2QkFFRSw0QkFBNkIsQ0FEN0IsMENBQXFELENBRXJELFVBQ0YsQ0FDQSx5QkFFRSxjQUFlLENBRGYsaUJBRUYsQ0FDQSwwQkFFRSxjQUFlLENBRGYsaUJBRUYsQ0FDQSx5QkFFRSxjQUFlLENBRGYsaUJBRUYiLCJmaWxlIjoic3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zdG9yeWJvb2stYnV0dG9uIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGJvcmRlcjogMDtcbiAgYm9yZGVyLXJhZGl1czogM2VtO1xuICBmb250LXdlaWdodDogNzAwO1xuICBsaW5lLWhlaWdodDogMTtcbiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCAnUm9ib3RvLVJlZ3VsYXInLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xufVxuLnN0b3J5Ym9vay1idXR0b24tLXByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTU1YWI5O1xuICBjb2xvcjogd2hpdGU7XG59XG4uc3Rvcnlib29rLWJ1dHRvbi0tc2Vjb25kYXJ5IHtcbiAgYm94LXNoYWRvdzogcmdiYSgwLCAwLCAwLCAwLjE1KSAwcHggMHB4IDBweCAxcHggaW5zZXQ7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBjb2xvcjogIzMzMztcbn1cbi5zdG9yeWJvb2stYnV0dG9uLS1zbWFsbCB7XG4gIHBhZGRpbmc6IDEwcHggMTZweDtcbiAgZm9udC1zaXplOiAxMnB4O1xufVxuLnN0b3J5Ym9vay1idXR0b24tLW1lZGl1bSB7XG4gIHBhZGRpbmc6IDExcHggMjBweDtcbiAgZm9udC1zaXplOiAxNHB4O1xufVxuLnN0b3J5Ym9vay1idXR0b24tLWxhcmdlIHtcbiAgcGFkZGluZzogMTJweCAyNHB4O1xuICBmb250LXNpemU6IDE2cHg7XG59XG4iXX0= */";
+var css_248z = ".tds-text{margin:0;padding:0}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsVUFDRSxRQUFTLENBQ1QsU0FDRiIsImZpbGUiOiJzdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogVGV4dCBjb21wb25lbnQgcmVzZXQgLSByZW1vdmVzIGJyb3dzZXIgZGVmYXVsdHMgKi9cbi50ZHMtdGV4dCB7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbn1cbiJdfQ== */";
 styleInject_es.styleInject(css_248z);
 
-var Text = function Text(_ref) {
-  var _typographyStyle$repl;
+var _excluded = ["as", "typographyStyle", "className", "children"];
+var Text = /*#__PURE__*/React.forwardRef(function Text(_ref, ref) {
   var as = _ref.as,
-    typographyStyle = _ref.typographyStyle,
-    styles = _ref.styles,
-    classes = _ref.classes,
-    children = _ref.children;
-  var TextComponent = as || 'p';
-  var transformedTypographyStyle = (_typographyStyle$repl = typographyStyle === null || typographyStyle === void 0 ? void 0 : typographyStyle.replaceAll('.', '-').toLowerCase()) !== null && _typographyStyle$repl !== void 0 ? _typographyStyle$repl : '';
-  return /*#__PURE__*/React.createElement(TextComponent, {
-    className: cn.cn(classes, typographyStyle ? transformedTypographyStyle : undefined),
-    style: styles ? styles : undefined
-  }, children);
-};
+    _ref$typographyStyle = _ref.typographyStyle,
+    typographyStyle = _ref$typographyStyle === void 0 ? 'utility.body.regular.medium' : _ref$typographyStyle,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _rollupPluginBabelHelpers._objectWithoutProperties(_ref, _excluded);
+  var Component = as || 'span';
+  var typographyClass = typographyStyle.replaceAll('.', '-');
+  return /*#__PURE__*/React.createElement(Component, _rollupPluginBabelHelpers._objectSpread2({
+    ref: ref,
+    className: cn.cn('tds-text', typographyClass, className)
+  }, rest), children);
+});
 
 exports.Text = Text;
 //# sourceMappingURL=Text.cjs.map

package/dist/Text/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../src/Text/Text.tsx"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport { cn } from '../utils/cn';\n\ninterface TextProps {\n  as?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n  typographyStyle?: string;\n  classes?: string;\n  styles?: { [key: string]: string };\n  children?: React.ReactNode;\n}\n\nexport const Text: React.FC<TextProps> = ({\n  as,\n  typographyStyle,\n  styles,\n  classes,\n  children\n}) => {\n  const TextComponent = as || 'p';\n  const transformedTypographyStyle =\n    typographyStyle?.replaceAll('.', '-').toLowerCase() ?? '';\n\n  return (\n    <TextComponent\n      className={cn(\n        classes,\n        typographyStyle ? transformedTypographyStyle : undefined\n      )}\n      style={styles ? styles : undefined}\n    >\n      {children}\n    </TextComponent>\n  );\n};\n"],"names":["Text","_ref","_typographyStyle$repl","as","typographyStyle","styles","classes","children","TextComponent","transformedTypographyStyle","replaceAll","toLowerCase","React","createElement","className","cn","undefined","style"],"mappings":";;;;;;;;;IAYaA,IAAI,GAAwB,SAA5BA,IAAIA,CAAAC,IAAA,EAMZ;AAAA,EAAA,IAAAC,qBAAA;AAAA,EAAA,IALHC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,eAAe,GAAAH,IAAA,CAAfG,eAAe;IACfC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IACNC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;AAER,EAAA,IAAMC,aAAa,GAAGL,EAAE,IAAI,GAAG;EAC/B,IAAMM,0BAA0B,GAAA,CAAAP,qBAAA,GAC9BE,eAAe,aAAfA,eAAe,KAAA,MAAA,GAAA,MAAA,GAAfA,eAAe,CAAEM,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAACC,WAAW,EAAE,MAAA,IAAA,IAAAT,qBAAA,KAAA,MAAA,GAAAA,qBAAA,GAAI,EAAE;AAE3D,EAAA,oBACEU,KAAA,CAAAC,aAAA,CAACL,aAAa,EAAA;IACZM,SAAS,EAAEC,KAAE,CACXT,OAAO,EACPF,eAAe,GAAGK,0BAA0B,GAAGO,SAAS,CACzD;AACDC,IAAAA,KAAK,EAAEZ,MAAM,GAAGA,MAAM,GAAGW;GAAS,EAEjCT,QAAQ,CACK;AAEpB;;;;"}
+{"version":3,"file":"Text.cjs","sources":["../../src/Text/Text.tsx"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport { cn } from '../utils/cn';\n\n// --- Typography Token Type ---\n\ntype BrandHeadingFluidWeight = 'light' | 'regular' | 'bold' | 'black';\ntype BrandHeadingFluidSize =\n  | '2xsmall'\n  | 'xsmall'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'xlarge'\n  | '2xlarge';\ntype BrandHeadingFluid =\n  `brand.heading.fluid.${BrandHeadingFluidWeight}.${BrandHeadingFluidSize}`;\n\ntype BrandHeadingStaticWeight = 'bold' | 'black';\ntype BrandHeadingStaticSize =\n  | '010'\n  | '020'\n  | '030'\n  | '040'\n  | '050'\n  | '060'\n  | '070'\n  | '080'\n  | '090'\n  | '100';\ntype BrandHeadingStatic =\n  `brand.heading.static.${BrandHeadingStaticWeight}.${BrandHeadingStaticSize}`;\n\ntype BrandSubheadingWeight = 'light' | 'regular' | 'bold';\ntype BrandSubheadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\ntype BrandSubheading =\n  `brand.subheading.${BrandSubheadingWeight}.${BrandSubheadingSize}`;\n\ntype BrandStandfirst = `brand.standfirst.${'medium' | 'large'}`;\n\ntype BrandParagraphWeight = 'regular' | 'bold';\ntype BrandParagraphSize = 'small' | 'medium';\ntype BrandParagraph =\n  `brand.paragraph.${BrandParagraphWeight}.${BrandParagraphSize}`;\n\ntype BrandCaption = `brand.caption.${'small' | 'medium'}`;\ntype BrandByline = `brand.byline.${'small' | 'medium'}`;\n\ntype UtilityHeading = `utility.heading.${'small' | 'medium' | 'large'}`;\ntype UtilitySubheading =\n  `utility.subheading.${'xsmall' | 'small' | 'medium' | 'large'}`;\n\ntype UtilityBodyWeight = 'regular' | 'bold';\ntype UtilityBodySize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large';\ntype UtilityBody = `utility.body.${UtilityBodyWeight}.${UtilityBodySize}`;\n\ntype UtilityButton =\n  `utility.button.${'xsmall' | 'small' | 'medium' | 'large'}`;\ntype UtilityLabel = `utility.label.${'xsmall' | 'small' | 'medium' | 'large'}`;\n\nexport type TypographyToken =\n  | BrandHeadingFluid\n  | BrandHeadingStatic\n  | BrandSubheading\n  | BrandStandfirst\n  | BrandParagraph\n  | BrandCaption\n  | BrandByline\n  | UtilityHeading\n  | UtilitySubheading\n  | UtilityBody\n  | UtilityButton\n  | UtilityLabel;\n\n// --- Element & Props Types ---\n\ntype AllowedElements =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'span'\n  | 'figcaption'\n  | 'blockquote'\n  | 'label'\n  | 'legend'\n  | 'li'\n  | 'dt'\n  | 'dd'\n  | 'time'\n  | 'address'\n  | 'cite'\n  | 'em'\n  | 'strong';\n\n// Maps each element to its valid typography tokens\ntype TypographyTokenForElement<T extends AllowedElements> = T extends\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  ?\n      | BrandHeadingFluid\n      | BrandHeadingStatic\n      | BrandSubheading\n      | UtilityHeading\n      | UtilitySubheading\n  : T extends 'p' | 'li' | 'dt' | 'dd' | 'address'\n    ? UtilityBody | BrandParagraph\n    : T extends 'figcaption'\n      ? BrandCaption\n      : T extends 'blockquote'\n        ? BrandStandfirst\n        : T extends 'label' | 'legend'\n          ? UtilityLabel | UtilityBody\n          : T extends 'cite'\n            ? BrandByline | BrandCaption\n            : T extends 'time'\n              ? UtilityBody | BrandCaption | BrandByline\n              : TypographyToken;\n\ntype TextOwnProps<T extends AllowedElements = 'span'> = {\n  as?: T;\n  typographyStyle?: TypographyTokenForElement<T>;\n  children?: React.ReactNode;\n  className?: string;\n};\n\ntype TextProps<T extends AllowedElements = 'span'> = TextOwnProps<T> &\n  Omit<React.ComponentPropsWithRef<T>, keyof TextOwnProps<T>>;\n\n// --- Component ---\n\ntype TextComponent = <T extends AllowedElements = 'span'>(\n  props: TextProps<T> & { ref?: React.Ref<HTMLElement> }\n) => React.ReactElement | null;\n\nexport const Text: TextComponent = React.forwardRef<\n  HTMLElement,\n  TextProps<AllowedElements>\n>(function Text(\n  {\n    as,\n    typographyStyle = 'utility.body.regular.medium',\n    className,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const Component = (as || 'span') as React.ElementType;\n  const typographyClass = typographyStyle.replaceAll('.', '-');\n\n  return (\n    <Component\n      ref={ref}\n      className={cn('tds-text', typographyClass, className)}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n}) as unknown as TextComponent;\n"],"names":["Text","React","forwardRef","_ref","ref","as","_ref$typographyStyle","typographyStyle","className","children","rest","_objectWithoutProperties","_excluded","Component","typographyClass","replaceAll","createElement","_objectSpread","cn"],"mappings":";;;;;;;;;;;AA8IO,IAAMA,IAAI,gBAAkBC,KAAK,CAACC,UAAU,CAGjD,SAASF,IAAIA,CAAAG,IAAA,EAQbC,GAAG,EAAA;AAAA,EAAA,IANDC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IAAAC,oBAAA,GAAAH,IAAA,CACFI,eAAe;AAAfA,IAAAA,eAAe,GAAAD,oBAAA,KAAA,MAAA,GAAG,6BAA6B,GAAAA,oBAAA;IAC/CE,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;AACLC,IAAAA,IAAI,GAAAC,kDAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA;AAIT,EAAA,IAAMC,SAAS,GAAIR,EAAE,IAAI,MAA4B;EACrD,IAAMS,eAAe,GAAGP,eAAe,CAACQ,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;AAE5D,EAAA,oBACEd,KAAA,CAAAe,aAAA,CAACH,SAAS,EAAAI,wCAAA,CAAA;AACRb,IAAAA,GAAG,EAAEA,GAAG;AACRI,IAAAA,SAAS,EAAEU,KAAE,CAAC,UAAU,EAAEJ,eAAe,EAAEN,SAAS;GAAC,EACjDE,IAAI,CAAA,EAEPD,QAAQ,CACC;AAEhB,CAAC;;;;"}

package/dist/Text/Text.d.ts

@@ -1,13 +1,39 @@
 import React from 'react';
 import './styles.css';
-interface TextProps {
-    as?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
-    typographyStyle?: string;
-    classes?: string;
-    styles?: {
-        [key: string]: string;
-    };
+type BrandHeadingFluidWeight = 'light' | 'regular' | 'bold' | 'black';
+type BrandHeadingFluidSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
+type BrandHeadingFluid = `brand.heading.fluid.${BrandHeadingFluidWeight}.${BrandHeadingFluidSize}`;
+type BrandHeadingStaticWeight = 'bold' | 'black';
+type BrandHeadingStaticSize = '010' | '020' | '030' | '040' | '050' | '060' | '070' | '080' | '090' | '100';
+type BrandHeadingStatic = `brand.heading.static.${BrandHeadingStaticWeight}.${BrandHeadingStaticSize}`;
+type BrandSubheadingWeight = 'light' | 'regular' | 'bold';
+type BrandSubheadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type BrandSubheading = `brand.subheading.${BrandSubheadingWeight}.${BrandSubheadingSize}`;
+type BrandStandfirst = `brand.standfirst.${'medium' | 'large'}`;
+type BrandParagraphWeight = 'regular' | 'bold';
+type BrandParagraphSize = 'small' | 'medium';
+type BrandParagraph = `brand.paragraph.${BrandParagraphWeight}.${BrandParagraphSize}`;
+type BrandCaption = `brand.caption.${'small' | 'medium'}`;
+type BrandByline = `brand.byline.${'small' | 'medium'}`;
+type UtilityHeading = `utility.heading.${'small' | 'medium' | 'large'}`;
+type UtilitySubheading = `utility.subheading.${'xsmall' | 'small' | 'medium' | 'large'}`;
+type UtilityBodyWeight = 'regular' | 'bold';
+type UtilityBodySize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large';
+type UtilityBody = `utility.body.${UtilityBodyWeight}.${UtilityBodySize}`;
+type UtilityButton = `utility.button.${'xsmall' | 'small' | 'medium' | 'large'}`;
+type UtilityLabel = `utility.label.${'xsmall' | 'small' | 'medium' | 'large'}`;
+export type TypographyToken = BrandHeadingFluid | BrandHeadingStatic | BrandSubheading | BrandStandfirst | BrandParagraph | BrandCaption | BrandByline | UtilityHeading | UtilitySubheading | UtilityBody | UtilityButton | UtilityLabel;
+type AllowedElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'figcaption' | 'blockquote' | 'label' | 'legend' | 'li' | 'dt' | 'dd' | 'time' | 'address' | 'cite' | 'em' | 'strong';
+type TypographyTokenForElement<T extends AllowedElements> = T extends 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' ? BrandHeadingFluid | BrandHeadingStatic | BrandSubheading | UtilityHeading | UtilitySubheading : T extends 'p' | 'li' | 'dt' | 'dd' | 'address' ? UtilityBody | BrandParagraph : T extends 'figcaption' ? BrandCaption : T extends 'blockquote' ? BrandStandfirst : T extends 'label' | 'legend' ? UtilityLabel | UtilityBody : T extends 'cite' ? BrandByline | BrandCaption : T extends 'time' ? UtilityBody | BrandCaption | BrandByline : TypographyToken;
+type TextOwnProps<T extends AllowedElements = 'span'> = {
+    as?: T;
+    typographyStyle?: TypographyTokenForElement<T>;
     children?: React.ReactNode;
-}
-export declare const Text: React.FC<TextProps>;
+    className?: string;
+};
+type TextProps<T extends AllowedElements = 'span'> = TextOwnProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof TextOwnProps<T>>;
+type TextComponent = <T extends AllowedElements = 'span'>(props: TextProps<T> & {
+    ref?: React.Ref<HTMLElement>;
+}) => React.ReactElement | null;
+export declare const Text: TextComponent;
 export {};

package/dist/Text/Text.js

@@ -1,24 +1,26 @@
+import { _ as _objectWithoutProperties, a as _objectSpread2 } from '../shared/_rollupPluginBabelHelpers-BYQx3gqx.js';
 import React from 'react';
 import { s as styleInject } from '../shared/style-inject.es-Br8gHeuy.js';
 import { c as cn } from '../shared/cn-DcOuz-3C.js';
 
-var css_248z = ".storybook-button{border:0;border-radius:3em;cursor:pointer;display:inline-block;font-family:Roboto,Roboto-Regular,Helvetica,Arial,sans-serif;font-weight:700;line-height:1}.storybook-button--primary{background-color:#555ab9;color:#fff}.storybook-button--secondary{background-color:transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);color:#333}.storybook-button--small{font-size:12px;padding:10px 16px}.storybook-button--medium{font-size:14px;padding:11px 20px}.storybook-button--large{font-size:16px;padding:12px 24px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsa0JBR0UsUUFBUyxDQUNULGlCQUFrQixDQUZsQixjQUFlLENBRGYsb0JBQXFCLENBTXJCLDREQUFxRSxDQUZyRSxlQUFnQixDQUNoQixhQUVGLENBQ0EsMkJBQ0Usd0JBQXlCLENBQ3pCLFVBQ0YsQ0FDQSw2QkFFRSw0QkFBNkIsQ0FEN0IsMENBQXFELENBRXJELFVBQ0YsQ0FDQSx5QkFFRSxjQUFlLENBRGYsaUJBRUYsQ0FDQSwwQkFFRSxjQUFlLENBRGYsaUJBRUYsQ0FDQSx5QkFFRSxjQUFlLENBRGYsaUJBRUYiLCJmaWxlIjoic3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zdG9yeWJvb2stYnV0dG9uIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGJvcmRlcjogMDtcbiAgYm9yZGVyLXJhZGl1czogM2VtO1xuICBmb250LXdlaWdodDogNzAwO1xuICBsaW5lLWhlaWdodDogMTtcbiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCAnUm9ib3RvLVJlZ3VsYXInLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xufVxuLnN0b3J5Ym9vay1idXR0b24tLXByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTU1YWI5O1xuICBjb2xvcjogd2hpdGU7XG59XG4uc3Rvcnlib29rLWJ1dHRvbi0tc2Vjb25kYXJ5IHtcbiAgYm94LXNoYWRvdzogcmdiYSgwLCAwLCAwLCAwLjE1KSAwcHggMHB4IDBweCAxcHggaW5zZXQ7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBjb2xvcjogIzMzMztcbn1cbi5zdG9yeWJvb2stYnV0dG9uLS1zbWFsbCB7XG4gIHBhZGRpbmc6IDEwcHggMTZweDtcbiAgZm9udC1zaXplOiAxMnB4O1xufVxuLnN0b3J5Ym9vay1idXR0b24tLW1lZGl1bSB7XG4gIHBhZGRpbmc6IDExcHggMjBweDtcbiAgZm9udC1zaXplOiAxNHB4O1xufVxuLnN0b3J5Ym9vay1idXR0b24tLWxhcmdlIHtcbiAgcGFkZGluZzogMTJweCAyNHB4O1xuICBmb250LXNpemU6IDE2cHg7XG59XG4iXX0= */";
+var css_248z = ".tds-text{margin:0;padding:0}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsVUFDRSxRQUFTLENBQ1QsU0FDRiIsImZpbGUiOiJzdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogVGV4dCBjb21wb25lbnQgcmVzZXQgLSByZW1vdmVzIGJyb3dzZXIgZGVmYXVsdHMgKi9cbi50ZHMtdGV4dCB7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbn1cbiJdfQ== */";
 styleInject(css_248z);
 
-var Text = function Text(_ref) {
-  var _typographyStyle$repl;
+var _excluded = ["as", "typographyStyle", "className", "children"];
+var Text = /*#__PURE__*/React.forwardRef(function Text(_ref, ref) {
   var as = _ref.as,
-    typographyStyle = _ref.typographyStyle,
-    styles = _ref.styles,
-    classes = _ref.classes,
-    children = _ref.children;
-  var TextComponent = as || 'p';
-  var transformedTypographyStyle = (_typographyStyle$repl = typographyStyle === null || typographyStyle === void 0 ? void 0 : typographyStyle.replaceAll('.', '-').toLowerCase()) !== null && _typographyStyle$repl !== void 0 ? _typographyStyle$repl : '';
-  return /*#__PURE__*/React.createElement(TextComponent, {
-    className: cn(classes, typographyStyle ? transformedTypographyStyle : undefined),
-    style: styles ? styles : undefined
-  }, children);
-};
+    _ref$typographyStyle = _ref.typographyStyle,
+    typographyStyle = _ref$typographyStyle === void 0 ? 'utility.body.regular.medium' : _ref$typographyStyle,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var Component = as || 'span';
+  var typographyClass = typographyStyle.replaceAll('.', '-');
+  return /*#__PURE__*/React.createElement(Component, _objectSpread2({
+    ref: ref,
+    className: cn('tds-text', typographyClass, className)
+  }, rest), children);
+});
 
 export { Text };
 //# sourceMappingURL=Text.js.map

package/dist/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../src/Text/Text.tsx"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport { cn } from '../utils/cn';\n\ninterface TextProps {\n  as?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n  typographyStyle?: string;\n  classes?: string;\n  styles?: { [key: string]: string };\n  children?: React.ReactNode;\n}\n\nexport const Text: React.FC<TextProps> = ({\n  as,\n  typographyStyle,\n  styles,\n  classes,\n  children\n}) => {\n  const TextComponent = as || 'p';\n  const transformedTypographyStyle =\n    typographyStyle?.replaceAll('.', '-').toLowerCase() ?? '';\n\n  return (\n    <TextComponent\n      className={cn(\n        classes,\n        typographyStyle ? transformedTypographyStyle : undefined\n      )}\n      style={styles ? styles : undefined}\n    >\n      {children}\n    </TextComponent>\n  );\n};\n"],"names":["Text","_ref","_typographyStyle$repl","as","typographyStyle","styles","classes","children","TextComponent","transformedTypographyStyle","replaceAll","toLowerCase","React","createElement","className","cn","undefined","style"],"mappings":";;;;;;;IAYaA,IAAI,GAAwB,SAA5BA,IAAIA,CAAAC,IAAA,EAMZ;AAAA,EAAA,IAAAC,qBAAA;AAAA,EAAA,IALHC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,eAAe,GAAAH,IAAA,CAAfG,eAAe;IACfC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IACNC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;AAER,EAAA,IAAMC,aAAa,GAAGL,EAAE,IAAI,GAAG;EAC/B,IAAMM,0BAA0B,GAAA,CAAAP,qBAAA,GAC9BE,eAAe,aAAfA,eAAe,KAAA,MAAA,GAAA,MAAA,GAAfA,eAAe,CAAEM,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAACC,WAAW,EAAE,MAAA,IAAA,IAAAT,qBAAA,KAAA,MAAA,GAAAA,qBAAA,GAAI,EAAE;AAE3D,EAAA,oBACEU,KAAA,CAAAC,aAAA,CAACL,aAAa,EAAA;IACZM,SAAS,EAAEC,EAAE,CACXT,OAAO,EACPF,eAAe,GAAGK,0BAA0B,GAAGO,SAAS,CACzD;AACDC,IAAAA,KAAK,EAAEZ,MAAM,GAAGA,MAAM,GAAGW;GAAS,EAEjCT,QAAQ,CACK;AAEpB;;;;"}
+{"version":3,"file":"Text.js","sources":["../../src/Text/Text.tsx"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport { cn } from '../utils/cn';\n\n// --- Typography Token Type ---\n\ntype BrandHeadingFluidWeight = 'light' | 'regular' | 'bold' | 'black';\ntype BrandHeadingFluidSize =\n  | '2xsmall'\n  | 'xsmall'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'xlarge'\n  | '2xlarge';\ntype BrandHeadingFluid =\n  `brand.heading.fluid.${BrandHeadingFluidWeight}.${BrandHeadingFluidSize}`;\n\ntype BrandHeadingStaticWeight = 'bold' | 'black';\ntype BrandHeadingStaticSize =\n  | '010'\n  | '020'\n  | '030'\n  | '040'\n  | '050'\n  | '060'\n  | '070'\n  | '080'\n  | '090'\n  | '100';\ntype BrandHeadingStatic =\n  `brand.heading.static.${BrandHeadingStaticWeight}.${BrandHeadingStaticSize}`;\n\ntype BrandSubheadingWeight = 'light' | 'regular' | 'bold';\ntype BrandSubheadingSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\ntype BrandSubheading =\n  `brand.subheading.${BrandSubheadingWeight}.${BrandSubheadingSize}`;\n\ntype BrandStandfirst = `brand.standfirst.${'medium' | 'large'}`;\n\ntype BrandParagraphWeight = 'regular' | 'bold';\ntype BrandParagraphSize = 'small' | 'medium';\ntype BrandParagraph =\n  `brand.paragraph.${BrandParagraphWeight}.${BrandParagraphSize}`;\n\ntype BrandCaption = `brand.caption.${'small' | 'medium'}`;\ntype BrandByline = `brand.byline.${'small' | 'medium'}`;\n\ntype UtilityHeading = `utility.heading.${'small' | 'medium' | 'large'}`;\ntype UtilitySubheading =\n  `utility.subheading.${'xsmall' | 'small' | 'medium' | 'large'}`;\n\ntype UtilityBodyWeight = 'regular' | 'bold';\ntype UtilityBodySize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large';\ntype UtilityBody = `utility.body.${UtilityBodyWeight}.${UtilityBodySize}`;\n\ntype UtilityButton =\n  `utility.button.${'xsmall' | 'small' | 'medium' | 'large'}`;\ntype UtilityLabel = `utility.label.${'xsmall' | 'small' | 'medium' | 'large'}`;\n\nexport type TypographyToken =\n  | BrandHeadingFluid\n  | BrandHeadingStatic\n  | BrandSubheading\n  | BrandStandfirst\n  | BrandParagraph\n  | BrandCaption\n  | BrandByline\n  | UtilityHeading\n  | UtilitySubheading\n  | UtilityBody\n  | UtilityButton\n  | UtilityLabel;\n\n// --- Element & Props Types ---\n\ntype AllowedElements =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'span'\n  | 'figcaption'\n  | 'blockquote'\n  | 'label'\n  | 'legend'\n  | 'li'\n  | 'dt'\n  | 'dd'\n  | 'time'\n  | 'address'\n  | 'cite'\n  | 'em'\n  | 'strong';\n\n// Maps each element to its valid typography tokens\ntype TypographyTokenForElement<T extends AllowedElements> = T extends\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  ?\n      | BrandHeadingFluid\n      | BrandHeadingStatic\n      | BrandSubheading\n      | UtilityHeading\n      | UtilitySubheading\n  : T extends 'p' | 'li' | 'dt' | 'dd' | 'address'\n    ? UtilityBody | BrandParagraph\n    : T extends 'figcaption'\n      ? BrandCaption\n      : T extends 'blockquote'\n        ? BrandStandfirst\n        : T extends 'label' | 'legend'\n          ? UtilityLabel | UtilityBody\n          : T extends 'cite'\n            ? BrandByline | BrandCaption\n            : T extends 'time'\n              ? UtilityBody | BrandCaption | BrandByline\n              : TypographyToken;\n\ntype TextOwnProps<T extends AllowedElements = 'span'> = {\n  as?: T;\n  typographyStyle?: TypographyTokenForElement<T>;\n  children?: React.ReactNode;\n  className?: string;\n};\n\ntype TextProps<T extends AllowedElements = 'span'> = TextOwnProps<T> &\n  Omit<React.ComponentPropsWithRef<T>, keyof TextOwnProps<T>>;\n\n// --- Component ---\n\ntype TextComponent = <T extends AllowedElements = 'span'>(\n  props: TextProps<T> & { ref?: React.Ref<HTMLElement> }\n) => React.ReactElement | null;\n\nexport const Text: TextComponent = React.forwardRef<\n  HTMLElement,\n  TextProps<AllowedElements>\n>(function Text(\n  {\n    as,\n    typographyStyle = 'utility.body.regular.medium',\n    className,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const Component = (as || 'span') as React.ElementType;\n  const typographyClass = typographyStyle.replaceAll('.', '-');\n\n  return (\n    <Component\n      ref={ref}\n      className={cn('tds-text', typographyClass, className)}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n}) as unknown as TextComponent;\n"],"names":["Text","React","forwardRef","_ref","ref","as","_ref$typographyStyle","typographyStyle","className","children","rest","_objectWithoutProperties","_excluded","Component","typographyClass","replaceAll","createElement","_objectSpread","cn"],"mappings":";;;;;;;;;AA8IO,IAAMA,IAAI,gBAAkBC,KAAK,CAACC,UAAU,CAGjD,SAASF,IAAIA,CAAAG,IAAA,EAQbC,GAAG,EAAA;AAAA,EAAA,IANDC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IAAAC,oBAAA,GAAAH,IAAA,CACFI,eAAe;AAAfA,IAAAA,eAAe,GAAAD,oBAAA,KAAA,MAAA,GAAG,6BAA6B,GAAAA,oBAAA;IAC/CE,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;AACLC,IAAAA,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA,CAAA;AAIT,EAAA,IAAMC,SAAS,GAAIR,EAAE,IAAI,MAA4B;EACrD,IAAMS,eAAe,GAAGP,eAAe,CAACQ,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC;AAE5D,EAAA,oBACEd,KAAA,CAAAe,aAAA,CAACH,SAAS,EAAAI,cAAA,CAAA;AACRb,IAAAA,GAAG,EAAEA,GAAG;AACRI,IAAAA,SAAS,EAAEU,EAAE,CAAC,UAAU,EAAEJ,eAAe,EAAEN,SAAS;GAAC,EACjDE,IAAI,CAAA,EAEPD,QAAQ,CACC;AAEhB,CAAC;;;;"}

package/dist/Toast/Toast.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../shared/_rollupPluginBabelHelpers-xUOatjtv.cjs');
+var _rollupPluginBabelHelpers = require('../shared/_rollupPluginBabelHelpers-B3P3Gzh9.cjs');
 var React = require('react');
 var Icon_Icon = require('../Icon/Icon.cjs');
 var cn = require('../shared/cn-CPfjOlzZ.cjs');

package/dist/Toast/Toast.js

@@ -1,4 +1,4 @@
-import { _ as _objectWithoutProperties, b as _slicedToArray, a as _objectSpread2 } from '../shared/_rollupPluginBabelHelpers-CSWl3xs2.js';
+import { _ as _objectWithoutProperties, b as _slicedToArray, a as _objectSpread2 } from '../shared/_rollupPluginBabelHelpers-BYQx3gqx.js';
 import React, { useState, useEffect } from 'react';
 import { Icon } from '../Icon/Icon.js';
 import { c as cn } from '../shared/cn-DcOuz-3C.js';