@spark-web/text 1.1.2 → 2.0.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @spark-web/text
 
+## 2.0.0-rc.0
+
+### Major Changes
+
+- rc versio
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.0
+  - @spark-web/box@2.0.0-rc.0
+  - @spark-web/utils@2.0.0-rc.0
+
+## 1.2.0
+
+### Minor Changes
+
+- [#382](https://github.com/brighte-labs/spark-web/pull/382)
+  [`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
+  Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
+  version to latest (18.2.0)
+
+### Patch Changes
+
+- Updated dependencies
+  [[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
+  - @spark-web/box@1.2.0
+  - @spark-web/theme@3.2.0
+  - @spark-web/utils@1.3.0
+
 ## 1.1.2
 
 ### Patch Changes

package/dist/spark-web-text.cjs.d.ts

@@ -1 +1,2 @@
-export * from "./declarations/src/index";
+export * from "../src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXRleHQuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==

package/dist/spark-web-text.cjs.js

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./spark-web-text.cjs.prod.js");
-} else {
-  module.exports = require("./spark-web-text.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
+
+// this re-exports the source file
+module.exports = require("../src/index.ts");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text",
-  "version": "1.1.2",
+  "version": "2.0.0-rc.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -15,15 +15,15 @@
     "README.md"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.19.0",
-    "@emotion/css": "^11.9.0",
-    "@spark-web/box": "^1.1.0",
-    "@spark-web/theme": "^3.1.0",
-    "@spark-web/utils": "^1.2.3"
+    "@babel/runtime": "^7.25.0",
+    "@emotion/react": "^11.13.5",
+    "@spark-web/box": "^2.0.0-rc.0",
+    "@spark-web/theme": "^4.0.0-rc.0",
+    "@spark-web/utils": "^2.0.0-rc.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.12",
-    "react": "^17.0.2"
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2"

package/dist/declarations/src/context.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export declare const TextContext: import("react").Context<{
-    size: "small" | "xsmall" | "standard" | "large";
-    tone: "link" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
-    weight: "regular" | "semibold";
-} | undefined>;
-export declare function useTextContext(): {
-    size: "small" | "xsmall" | "standard" | "large";
-    tone: "link" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
-    weight: "regular" | "semibold";
-} | undefined;

package/dist/declarations/src/default-text-props.d.ts

@@ -1,16 +0,0 @@
-import type { ReactNode } from 'react';
-import type { UseTextProps } from './use-text';
-declare type DefaultTextProps = {
-    size?: NonNullable<UseTextProps['size']>;
-    tone?: NonNullable<UseTextProps['tone']>;
-    weight?: NonNullable<UseTextProps['weight']>;
-};
-export declare function DefaultTextPropsProvider({ children, size, tone, weight, }: DefaultTextProps & {
-    children: ReactNode;
-}): JSX.Element;
-export declare const useDefaultTextProps: ({ size: sizeProp, tone: toneProp, weight: weightProp, }: DefaultTextProps) => {
-    size: "small" | "xsmall" | "standard" | "large";
-    tone: "link" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
-    weight: "regular" | "semibold";
-};
-export {};

package/dist/declarations/src/index.d.ts

@@ -1,11 +0,0 @@
-export { useTextContext } from './context';
-export { DefaultTextPropsProvider, useDefaultTextProps, } from './default-text-props';
-export { Strong } from './strong';
-export { Text } from './text';
-export { useForegroundTone } from './use-foreground-tone';
-export { useOverflowStrategy } from './use-overflow-strategy';
-export { createTextStyles, useText } from './use-text';
-export type { StrongProps } from './strong';
-export type { TextProps } from './text';
-export type { ForegroundTone } from './use-foreground-tone';
-export type { TextOverflowStrategy } from './use-overflow-strategy';

package/dist/declarations/src/strong.d.ts

@@ -1,5 +0,0 @@
-import type { ReactNode } from 'react';
-export declare type StrongProps = {
-    children: ReactNode;
-};
-export declare const Strong: ({ children }: StrongProps) => JSX.Element;

package/dist/declarations/src/text.d.ts

@@ -1,35 +0,0 @@
-import type { BoxProps } from '@spark-web/box';
-import type { DataAttributeMap } from '@spark-web/utils/internal';
-import type { CSSProperties, ReactNode } from 'react';
-import type { TextOverflowStrategy } from './use-overflow-strategy';
-import type { UseTextProps } from './use-text';
-declare type InlineProps = {
-    align?: never;
-    /** Display as an inline element. */
-    inline?: boolean;
-    overflowStrategy?: never;
-};
-declare type BlockProps = {
-    /** The horizontal alignment. */
-    align?: 'left' | 'center' | 'right';
-    inline?: never;
-    /** Manage how text behaves with regard to overflow. */
-    overflowStrategy?: TextOverflowStrategy;
-};
-export declare type TextProps = Partial<UseTextProps> & {
-    /** The text content. */
-    children?: ReactNode;
-    /** Sets data attributes on the component. */
-    data?: DataAttributeMap;
-    /** An identifier which must be unique in the whole document. */
-    id?: BoxProps['id'];
-    /** When enabled, numbers will be the same width. Similar to a monospaced font. */
-    tabularNumbers?: boolean;
-    /** Transform the text casing. */
-    transform?: CSSProperties['textTransform'];
-} & (InlineProps | BlockProps);
-export declare const Text: <Comp extends import("react").ElementType<any> = "div">(props: {
-    as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
-} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & TextProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export {};

package/dist/declarations/src/use-foreground-tone.d.ts

@@ -1,3 +0,0 @@
-import type { BrighteTheme } from '@spark-web/theme';
-export declare type ForegroundTone = keyof Omit<BrighteTheme['color']['foreground'], 'neutralInverted' | 'mutedInverted'>;
-export declare function useForegroundTone(tone: ForegroundTone): string;

package/dist/declarations/src/use-overflow-strategy.d.ts

@@ -1,27 +0,0 @@
-declare const strategyMap: {
-    readonly truncate: {
-        readonly display: "block";
-        readonly overflow: "hidden";
-        readonly textOverflow: "ellipsis";
-        readonly whiteSpace: "nowrap";
-    };
-    readonly nowrap: {
-        readonly whiteSpace: "nowrap";
-    };
-    readonly breakword: {
-        readonly display: "block";
-        readonly overflowWrap: "break-word";
-        readonly wordBreak: "break-word";
-        readonly wordWrap: "break-word";
-    };
-};
-export declare type TextOverflowStrategy = keyof typeof strategyMap;
-export declare function useOverflowStrategy(strategy?: TextOverflowStrategy): {
-    readonly whiteSpace: "nowrap";
-} | {
-    readonly display: "block";
-    readonly overflowWrap: "break-word";
-    readonly wordBreak: "break-word";
-    readonly wordWrap: "break-word";
-} | null;
-export {};

package/dist/declarations/src/use-text.d.ts

@@ -1,29 +0,0 @@
-import type { BrighteTextDefinition, BrighteTheme } from '@spark-web/theme';
-import type { ForegroundTone } from './use-foreground-tone';
-export declare type UseTextProps = {
-    /** Apply leading-trim styles. */
-    baseline?: boolean;
-    /** The size of the text. */
-    size: keyof BrighteTheme['typography']['text'];
-    /** The tone of the text. */
-    tone: ForegroundTone;
-    /** The weight of the text. */
-    weight: keyof BrighteTheme['typography']['fontWeight'];
-};
-export declare function useText({ baseline, size, tone, weight }: UseTextProps): (import("@emotion/serialize").CSSObject | undefined)[];
-export declare function createTextStyles({ fontSize, lineHeight, trims }: BrighteTextDefinition, { includeTrims }?: {
-    includeTrims?: boolean | undefined;
-}): {
-    '::before'?: {
-        marginBottom: string;
-        content: string;
-        display: string;
-    } | undefined;
-    '::after'?: {
-        marginTop: string;
-        content: string;
-        display: string;
-    } | undefined;
-    fontSize: string;
-    lineHeight: string;
-};

package/dist/spark-web-text.cjs.dev.js

@@ -1,263 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var css = require('@emotion/css');
-var theme = require('@spark-web/theme');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var box = require('@spark-web/box');
-var ts = require('@spark-web/utils/ts');
-
-var TextContext = /*#__PURE__*/react.createContext(undefined);
-function useTextContext() {
-  return react.useContext(TextContext);
-}
-
-var DefaultTextPropsContext = /*#__PURE__*/react.createContext({
-  size: undefined,
-  tone: undefined,
-  weight: undefined
-});
-function DefaultTextPropsProvider(_ref) {
-  var children = _ref.children,
-      size = _ref.size,
-      tone = _ref.tone,
-      weight = _ref.weight;
-  var defaultTextProps = react.useMemo(function () {
-    return {
-      size: size,
-      tone: tone,
-      weight: weight
-    };
-  }, [size, tone, weight]);
-  return /*#__PURE__*/jsxRuntime.jsx(DefaultTextPropsContext.Provider, {
-    value: defaultTextProps,
-    children: children
-  });
-}
-var useDefaultTextProps = function useDefaultTextProps(_ref2) {
-  var _ref3, _ref4, _ref5;
-
-  var sizeProp = _ref2.size,
-      toneProp = _ref2.tone,
-      weightProp = _ref2.weight;
-
-  var _useContext = react.useContext(DefaultTextPropsContext),
-      size = _useContext.size,
-      tone = _useContext.tone,
-      weight = _useContext.weight;
-
-  return {
-    size: (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : size) !== null && _ref3 !== void 0 ? _ref3 : 'standard',
-    tone: (_ref4 = toneProp !== null && toneProp !== void 0 ? toneProp : tone) !== null && _ref4 !== void 0 ? _ref4 : 'neutral',
-    weight: (_ref5 = weightProp !== null && weightProp !== void 0 ? weightProp : weight) !== null && _ref5 !== void 0 ? _ref5 : 'regular'
-  };
-};
-
-var Strong = function Strong(_ref) {
-  var children = _ref.children;
-  var theme$1 = theme.useTheme();
-  var styles = {
-    fontWeight: theme$1.typography.fontWeight.semibold
-  };
-  return /*#__PURE__*/jsxRuntime.jsx("strong", {
-    className: css.css(styles),
-    children: children
-  });
-};
-
-var strategyMap = {
-  truncate: {
-    display: 'block',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  },
-  nowrap: {
-    whiteSpace: 'nowrap'
-  },
-  // https://css-tricks.com/better-line-breaks-for-long-urls/
-  breakword: {
-    display: 'block',
-    overflowWrap: 'break-word',
-    wordBreak: 'break-word',
-    wordWrap: 'break-word'
-  }
-};
-function useOverflowStrategy(strategy) {
-  if (!strategy) {
-    return null;
-  }
-
-  return strategyMap[strategy];
-}
-
-var invertableTones = {
-  neutral: {
-    dark: 'neutralInverted',
-    light: 'neutral'
-  },
-  muted: {
-    dark: 'mutedInverted',
-    light: 'muted'
-  },
-  link: {
-    dark: 'neutralInverted',
-    light: 'link'
-  }
-};
-function useForegroundTone(tone) {
-  var theme$1 = theme.useTheme();
-  var backgroundLightness = box.useBackgroundLightness();
-
-  if (tone in invertableTones) {
-    return theme$1.color.foreground[invertableTones[tone][backgroundLightness]];
-  }
-
-  return theme$1.color.foreground[tone];
-}
-
-function useText(_ref) {
-  var _ref$baseline = _ref.baseline,
-      baseline = _ref$baseline === void 0 ? true : _ref$baseline,
-      size = _ref.size,
-      tone = _ref.tone,
-      weight = _ref.weight;
-  var theme$1 = theme.useTheme();
-  var color = useForegroundTone(tone);
-  var _theme$typography$tex = theme$1.typography.text[size],
-      mobile = _theme$typography$tex.mobile,
-      tablet = _theme$typography$tex.tablet;
-  var responsiveStyles = theme$1.utils.responsiveStyles({
-    mobile: createTextStyles(mobile, {
-      includeTrims: baseline
-    }),
-    tablet: createTextStyles(tablet, {
-      includeTrims: baseline
-    })
-  });
-  var styles = [{
-    color: color,
-    fontFamily: theme$1.typography.fontFamily.sans.name,
-    fontWeight: theme$1.typography.fontWeight[weight]
-  }, responsiveStyles];
-  return styles;
-}
-function createTextStyles(_ref2) {
-  var fontSize = _ref2.fontSize,
-      lineHeight = _ref2.lineHeight,
-      trims = _ref2.trims;
-
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref3$includeTrims = _ref3.includeTrims,
-      includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
-
-  var pseudo = {
-    content: '" "',
-    display: 'table'
-  };
-  var leadingTrim = includeTrims ? {
-    '::before': _objectSpread(_objectSpread({}, pseudo), {}, {
-      marginBottom: trims.capHeightTrim
-    }),
-    '::after': _objectSpread(_objectSpread({}, pseudo), {}, {
-      marginTop: trims.baselineTrim
-    })
-  } : null;
-  return _objectSpread({
-    fontSize: fontSize,
-    lineHeight: lineHeight
-  }, leadingTrim);
-}
-
-var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
-var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
-  var as = _ref.as,
-      children = _ref.children,
-      data = _ref.data,
-      id = _ref.id,
-      align = _ref.align,
-      baselineProp = _ref.baseline,
-      inline = _ref.inline,
-      overflowStrategy = _ref.overflowStrategy,
-      sizeProp = _ref.size,
-      tabularNumbers = _ref.tabularNumbers,
-      toneProp = _ref.tone,
-      transform = _ref.transform,
-      weightProp = _ref.weight,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
-  var overflowStyles = useOverflowStrategy(overflowStrategy);
-  var textContext = useTextContext();
-
-  var _useDefaultTextProps = useDefaultTextProps({
-    size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
-    tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
-    weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
-  }),
-      size = _useDefaultTextProps.size,
-      tone = _useDefaultTextProps.tone,
-      weight = _useDefaultTextProps.weight;
-
-  var baseline = !inline && baselineProp;
-  var textStyles = useText({
-    baseline: baseline,
-    size: size,
-    tone: tone,
-    weight: weight
-  });
-  var styles = [textStyles, {
-    display: inline ? 'inline' : 'block',
-    fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
-    textAlign: align,
-    textTransform: transform
-  }]; // early exit for inline variant
-
-  if (inline) {
-    return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
-      as: as !== null && as !== void 0 ? as : 'span',
-      data: data,
-      ref: forwardedRef,
-      id: id,
-      className: css.css(styles),
-      children: children
-    }));
-  } // prepare block variant
-
-
-  var content = overflowStrategy ? /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: css.css(overflowStyles),
-    children: children
-  }) : children;
-  var textContextValue = react.useMemo(function () {
-    return {
-      size: size,
-      tone: tone,
-      weight: weight
-    };
-  }, [size, tone, weight]);
-  return /*#__PURE__*/jsxRuntime.jsx(TextContext.Provider, {
-    value: textContextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
-      as: as,
-      data: data,
-      ref: forwardedRef,
-      id: id,
-      className: css.css(styles),
-      children: content
-    }))
-  });
-});
-
-exports.DefaultTextPropsProvider = DefaultTextPropsProvider;
-exports.Strong = Strong;
-exports.Text = Text;
-exports.createTextStyles = createTextStyles;
-exports.useDefaultTextProps = useDefaultTextProps;
-exports.useForegroundTone = useForegroundTone;
-exports.useOverflowStrategy = useOverflowStrategy;
-exports.useText = useText;
-exports.useTextContext = useTextContext;

package/dist/spark-web-text.cjs.prod.js

@@ -1,263 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var css = require('@emotion/css');
-var theme = require('@spark-web/theme');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var box = require('@spark-web/box');
-var ts = require('@spark-web/utils/ts');
-
-var TextContext = /*#__PURE__*/react.createContext(undefined);
-function useTextContext() {
-  return react.useContext(TextContext);
-}
-
-var DefaultTextPropsContext = /*#__PURE__*/react.createContext({
-  size: undefined,
-  tone: undefined,
-  weight: undefined
-});
-function DefaultTextPropsProvider(_ref) {
-  var children = _ref.children,
-      size = _ref.size,
-      tone = _ref.tone,
-      weight = _ref.weight;
-  var defaultTextProps = react.useMemo(function () {
-    return {
-      size: size,
-      tone: tone,
-      weight: weight
-    };
-  }, [size, tone, weight]);
-  return /*#__PURE__*/jsxRuntime.jsx(DefaultTextPropsContext.Provider, {
-    value: defaultTextProps,
-    children: children
-  });
-}
-var useDefaultTextProps = function useDefaultTextProps(_ref2) {
-  var _ref3, _ref4, _ref5;
-
-  var sizeProp = _ref2.size,
-      toneProp = _ref2.tone,
-      weightProp = _ref2.weight;
-
-  var _useContext = react.useContext(DefaultTextPropsContext),
-      size = _useContext.size,
-      tone = _useContext.tone,
-      weight = _useContext.weight;
-
-  return {
-    size: (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : size) !== null && _ref3 !== void 0 ? _ref3 : 'standard',
-    tone: (_ref4 = toneProp !== null && toneProp !== void 0 ? toneProp : tone) !== null && _ref4 !== void 0 ? _ref4 : 'neutral',
-    weight: (_ref5 = weightProp !== null && weightProp !== void 0 ? weightProp : weight) !== null && _ref5 !== void 0 ? _ref5 : 'regular'
-  };
-};
-
-var Strong = function Strong(_ref) {
-  var children = _ref.children;
-  var theme$1 = theme.useTheme();
-  var styles = {
-    fontWeight: theme$1.typography.fontWeight.semibold
-  };
-  return /*#__PURE__*/jsxRuntime.jsx("strong", {
-    className: css.css(styles),
-    children: children
-  });
-};
-
-var strategyMap = {
-  truncate: {
-    display: 'block',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  },
-  nowrap: {
-    whiteSpace: 'nowrap'
-  },
-  // https://css-tricks.com/better-line-breaks-for-long-urls/
-  breakword: {
-    display: 'block',
-    overflowWrap: 'break-word',
-    wordBreak: 'break-word',
-    wordWrap: 'break-word'
-  }
-};
-function useOverflowStrategy(strategy) {
-  if (!strategy) {
-    return null;
-  }
-
-  return strategyMap[strategy];
-}
-
-var invertableTones = {
-  neutral: {
-    dark: 'neutralInverted',
-    light: 'neutral'
-  },
-  muted: {
-    dark: 'mutedInverted',
-    light: 'muted'
-  },
-  link: {
-    dark: 'neutralInverted',
-    light: 'link'
-  }
-};
-function useForegroundTone(tone) {
-  var theme$1 = theme.useTheme();
-  var backgroundLightness = box.useBackgroundLightness();
-
-  if (tone in invertableTones) {
-    return theme$1.color.foreground[invertableTones[tone][backgroundLightness]];
-  }
-
-  return theme$1.color.foreground[tone];
-}
-
-function useText(_ref) {
-  var _ref$baseline = _ref.baseline,
-      baseline = _ref$baseline === void 0 ? true : _ref$baseline,
-      size = _ref.size,
-      tone = _ref.tone,
-      weight = _ref.weight;
-  var theme$1 = theme.useTheme();
-  var color = useForegroundTone(tone);
-  var _theme$typography$tex = theme$1.typography.text[size],
-      mobile = _theme$typography$tex.mobile,
-      tablet = _theme$typography$tex.tablet;
-  var responsiveStyles = theme$1.utils.responsiveStyles({
-    mobile: createTextStyles(mobile, {
-      includeTrims: baseline
-    }),
-    tablet: createTextStyles(tablet, {
-      includeTrims: baseline
-    })
-  });
-  var styles = [{
-    color: color,
-    fontFamily: theme$1.typography.fontFamily.sans.name,
-    fontWeight: theme$1.typography.fontWeight[weight]
-  }, responsiveStyles];
-  return styles;
-}
-function createTextStyles(_ref2) {
-  var fontSize = _ref2.fontSize,
-      lineHeight = _ref2.lineHeight,
-      trims = _ref2.trims;
-
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref3$includeTrims = _ref3.includeTrims,
-      includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
-
-  var pseudo = {
-    content: '" "',
-    display: 'table'
-  };
-  var leadingTrim = includeTrims ? {
-    '::before': _objectSpread(_objectSpread({}, pseudo), {}, {
-      marginBottom: trims.capHeightTrim
-    }),
-    '::after': _objectSpread(_objectSpread({}, pseudo), {}, {
-      marginTop: trims.baselineTrim
-    })
-  } : null;
-  return _objectSpread({
-    fontSize: fontSize,
-    lineHeight: lineHeight
-  }, leadingTrim);
-}
-
-var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
-var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
-  var as = _ref.as,
-      children = _ref.children,
-      data = _ref.data,
-      id = _ref.id,
-      align = _ref.align,
-      baselineProp = _ref.baseline,
-      inline = _ref.inline,
-      overflowStrategy = _ref.overflowStrategy,
-      sizeProp = _ref.size,
-      tabularNumbers = _ref.tabularNumbers,
-      toneProp = _ref.tone,
-      transform = _ref.transform,
-      weightProp = _ref.weight,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
-  var overflowStyles = useOverflowStrategy(overflowStrategy);
-  var textContext = useTextContext();
-
-  var _useDefaultTextProps = useDefaultTextProps({
-    size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
-    tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
-    weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
-  }),
-      size = _useDefaultTextProps.size,
-      tone = _useDefaultTextProps.tone,
-      weight = _useDefaultTextProps.weight;
-
-  var baseline = !inline && baselineProp;
-  var textStyles = useText({
-    baseline: baseline,
-    size: size,
-    tone: tone,
-    weight: weight
-  });
-  var styles = [textStyles, {
-    display: inline ? 'inline' : 'block',
-    fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
-    textAlign: align,
-    textTransform: transform
-  }]; // early exit for inline variant
-
-  if (inline) {
-    return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
-      as: as !== null && as !== void 0 ? as : 'span',
-      data: data,
-      ref: forwardedRef,
-      id: id,
-      className: css.css(styles),
-      children: children
-    }));
-  } // prepare block variant
-
-
-  var content = overflowStrategy ? /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: css.css(overflowStyles),
-    children: children
-  }) : children;
-  var textContextValue = react.useMemo(function () {
-    return {
-      size: size,
-      tone: tone,
-      weight: weight
-    };
-  }, [size, tone, weight]);
-  return /*#__PURE__*/jsxRuntime.jsx(TextContext.Provider, {
-    value: textContextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
-      as: as,
-      data: data,
-      ref: forwardedRef,
-      id: id,
-      className: css.css(styles),
-      children: content
-    }))
-  });
-});
-
-exports.DefaultTextPropsProvider = DefaultTextPropsProvider;
-exports.Strong = Strong;
-exports.Text = Text;
-exports.createTextStyles = createTextStyles;
-exports.useDefaultTextProps = useDefaultTextProps;
-exports.useForegroundTone = useForegroundTone;
-exports.useOverflowStrategy = useOverflowStrategy;
-exports.useText = useText;
-exports.useTextContext = useTextContext;

package/dist/spark-web-text.esm.js

@@ -1,251 +0,0 @@
-import { useContext, createContext, useMemo } from 'react';
-import { jsx } from 'react/jsx-runtime';
-import { css } from '@emotion/css';
-import { useTheme } from '@spark-web/theme';
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { useBackgroundLightness, Box } from '@spark-web/box';
-import { forwardRefWithAs } from '@spark-web/utils/ts';
-
-var TextContext = /*#__PURE__*/createContext(undefined);
-function useTextContext() {
-  return useContext(TextContext);
-}
-
-var DefaultTextPropsContext = /*#__PURE__*/createContext({
-  size: undefined,
-  tone: undefined,
-  weight: undefined
-});
-function DefaultTextPropsProvider(_ref) {
-  var children = _ref.children,
-      size = _ref.size,
-      tone = _ref.tone,
-      weight = _ref.weight;
-  var defaultTextProps = useMemo(function () {
-    return {
-      size: size,
-      tone: tone,
-      weight: weight
-    };
-  }, [size, tone, weight]);
-  return /*#__PURE__*/jsx(DefaultTextPropsContext.Provider, {
-    value: defaultTextProps,
-    children: children
-  });
-}
-var useDefaultTextProps = function useDefaultTextProps(_ref2) {
-  var _ref3, _ref4, _ref5;
-
-  var sizeProp = _ref2.size,
-      toneProp = _ref2.tone,
-      weightProp = _ref2.weight;
-
-  var _useContext = useContext(DefaultTextPropsContext),
-      size = _useContext.size,
-      tone = _useContext.tone,
-      weight = _useContext.weight;
-
-  return {
-    size: (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : size) !== null && _ref3 !== void 0 ? _ref3 : 'standard',
-    tone: (_ref4 = toneProp !== null && toneProp !== void 0 ? toneProp : tone) !== null && _ref4 !== void 0 ? _ref4 : 'neutral',
-    weight: (_ref5 = weightProp !== null && weightProp !== void 0 ? weightProp : weight) !== null && _ref5 !== void 0 ? _ref5 : 'regular'
-  };
-};
-
-var Strong = function Strong(_ref) {
-  var children = _ref.children;
-  var theme = useTheme();
-  var styles = {
-    fontWeight: theme.typography.fontWeight.semibold
-  };
-  return /*#__PURE__*/jsx("strong", {
-    className: css(styles),
-    children: children
-  });
-};
-
-var strategyMap = {
-  truncate: {
-    display: 'block',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  },
-  nowrap: {
-    whiteSpace: 'nowrap'
-  },
-  // https://css-tricks.com/better-line-breaks-for-long-urls/
-  breakword: {
-    display: 'block',
-    overflowWrap: 'break-word',
-    wordBreak: 'break-word',
-    wordWrap: 'break-word'
-  }
-};
-function useOverflowStrategy(strategy) {
-  if (!strategy) {
-    return null;
-  }
-
-  return strategyMap[strategy];
-}
-
-var invertableTones = {
-  neutral: {
-    dark: 'neutralInverted',
-    light: 'neutral'
-  },
-  muted: {
-    dark: 'mutedInverted',
-    light: 'muted'
-  },
-  link: {
-    dark: 'neutralInverted',
-    light: 'link'
-  }
-};
-function useForegroundTone(tone) {
-  var theme = useTheme();
-  var backgroundLightness = useBackgroundLightness();
-
-  if (tone in invertableTones) {
-    return theme.color.foreground[invertableTones[tone][backgroundLightness]];
-  }
-
-  return theme.color.foreground[tone];
-}
-
-function useText(_ref) {
-  var _ref$baseline = _ref.baseline,
-      baseline = _ref$baseline === void 0 ? true : _ref$baseline,
-      size = _ref.size,
-      tone = _ref.tone,
-      weight = _ref.weight;
-  var theme = useTheme();
-  var color = useForegroundTone(tone);
-  var _theme$typography$tex = theme.typography.text[size],
-      mobile = _theme$typography$tex.mobile,
-      tablet = _theme$typography$tex.tablet;
-  var responsiveStyles = theme.utils.responsiveStyles({
-    mobile: createTextStyles(mobile, {
-      includeTrims: baseline
-    }),
-    tablet: createTextStyles(tablet, {
-      includeTrims: baseline
-    })
-  });
-  var styles = [{
-    color: color,
-    fontFamily: theme.typography.fontFamily.sans.name,
-    fontWeight: theme.typography.fontWeight[weight]
-  }, responsiveStyles];
-  return styles;
-}
-function createTextStyles(_ref2) {
-  var fontSize = _ref2.fontSize,
-      lineHeight = _ref2.lineHeight,
-      trims = _ref2.trims;
-
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref3$includeTrims = _ref3.includeTrims,
-      includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
-
-  var pseudo = {
-    content: '" "',
-    display: 'table'
-  };
-  var leadingTrim = includeTrims ? {
-    '::before': _objectSpread(_objectSpread({}, pseudo), {}, {
-      marginBottom: trims.capHeightTrim
-    }),
-    '::after': _objectSpread(_objectSpread({}, pseudo), {}, {
-      marginTop: trims.baselineTrim
-    })
-  } : null;
-  return _objectSpread({
-    fontSize: fontSize,
-    lineHeight: lineHeight
-  }, leadingTrim);
-}
-
-var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
-var Text = forwardRefWithAs(function (_ref, forwardedRef) {
-  var as = _ref.as,
-      children = _ref.children,
-      data = _ref.data,
-      id = _ref.id,
-      align = _ref.align,
-      baselineProp = _ref.baseline,
-      inline = _ref.inline,
-      overflowStrategy = _ref.overflowStrategy,
-      sizeProp = _ref.size,
-      tabularNumbers = _ref.tabularNumbers,
-      toneProp = _ref.tone,
-      transform = _ref.transform,
-      weightProp = _ref.weight,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
-  var overflowStyles = useOverflowStrategy(overflowStrategy);
-  var textContext = useTextContext();
-
-  var _useDefaultTextProps = useDefaultTextProps({
-    size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
-    tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
-    weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
-  }),
-      size = _useDefaultTextProps.size,
-      tone = _useDefaultTextProps.tone,
-      weight = _useDefaultTextProps.weight;
-
-  var baseline = !inline && baselineProp;
-  var textStyles = useText({
-    baseline: baseline,
-    size: size,
-    tone: tone,
-    weight: weight
-  });
-  var styles = [textStyles, {
-    display: inline ? 'inline' : 'block',
-    fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
-    textAlign: align,
-    textTransform: transform
-  }]; // early exit for inline variant
-
-  if (inline) {
-    return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
-      as: as !== null && as !== void 0 ? as : 'span',
-      data: data,
-      ref: forwardedRef,
-      id: id,
-      className: css(styles),
-      children: children
-    }));
-  } // prepare block variant
-
-
-  var content = overflowStrategy ? /*#__PURE__*/jsx("span", {
-    className: css(overflowStyles),
-    children: children
-  }) : children;
-  var textContextValue = useMemo(function () {
-    return {
-      size: size,
-      tone: tone,
-      weight: weight
-    };
-  }, [size, tone, weight]);
-  return /*#__PURE__*/jsx(TextContext.Provider, {
-    value: textContextValue,
-    children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
-      as: as,
-      data: data,
-      ref: forwardedRef,
-      id: id,
-      className: css(styles),
-      children: content
-    }))
-  });
-});
-
-export { DefaultTextPropsProvider, Strong, Text, createTextStyles, useDefaultTextProps, useForegroundTone, useOverflowStrategy, useText, useTextContext };