@spark-web/text 1.0.0

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

@@ -0,0 +1,266 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var css = require('@emotion/css');
+var theme = require('@spark-web/theme');
+var box = require('@spark-web/box');
+var ts = require('@spark-web/utils/ts');
+var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var TextContext = /*#__PURE__*/React.createContext(undefined);
+function useTextContext() {
+  return React.useContext(TextContext);
+}
+
+var __jsx$2 = React__default["default"].createElement;
+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 __jsx$2(DefaultTextPropsContext.Provider, {
+    value: defaultTextProps
+  }, 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 __jsx$1 = React__default["default"].createElement;
+var Strong = function Strong(_ref) {
+  var children = _ref.children;
+
+  var _useTheme = theme.useTheme(),
+      typography = _useTheme.typography;
+
+  var styles = {
+    fontWeight: typography.fontWeight.strong
+  };
+  return __jsx$1("strong", {
+    className: css.css(styles)
+  }, 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _useTheme = theme.useTheme(),
+      typography = _useTheme.typography,
+      utils = _useTheme.utils;
+
+  var color = useForegroundTone(tone);
+  var _typography$text$size = typography.text[size],
+      mobile = _typography$text$size.mobile,
+      tablet = _typography$text$size.tablet;
+  var responsiveStyles = utils.responsiveStyles({
+    mobile: createTextStyles(mobile, {
+      includeTrims: baseline
+    }),
+    tablet: createTextStyles(tablet, {
+      includeTrims: baseline
+    })
+  });
+  var styles = [{
+    color: color,
+    fontFamily: typography.fontFamily.sans.name,
+    fontWeight: 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 __jsx = React__default["default"].createElement;
+var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
+  var as = _ref.as,
+      children = _ref.children,
+      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;
+  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 __jsx(box.Box, {
+      as: as !== null && as !== void 0 ? as : 'span',
+      ref: forwardedRef,
+      id: id,
+      className: css.css(styles)
+    }, children);
+  } // prepare block variant
+
+
+  var content = overflowStrategy ? __jsx("span", {
+    className: css.css(overflowStyles)
+  }, children) : children;
+  var textContextValue = React.useMemo(function () {
+    return {
+      size: size,
+      tone: tone,
+      weight: weight
+    };
+  }, [size, tone, weight]);
+  return __jsx(TextContext.Provider, {
+    value: textContextValue
+  }, __jsx(box.Box, {
+    as: as,
+    ref: forwardedRef,
+    id: id,
+    className: css.css(styles)
+  }, 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

@@ -0,0 +1,250 @@
+import React, { useContext, createContext, useMemo } from 'react';
+import { css } from '@emotion/css';
+import { useTheme } from '@spark-web/theme';
+import { useBackgroundLightness, Box } from '@spark-web/box';
+import { forwardRefWithAs } from '@spark-web/utils/ts';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+
+var TextContext = /*#__PURE__*/createContext(undefined);
+function useTextContext() {
+  return useContext(TextContext);
+}
+
+var __jsx$2 = React.createElement;
+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 __jsx$2(DefaultTextPropsContext.Provider, {
+    value: defaultTextProps
+  }, 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 __jsx$1 = React.createElement;
+var Strong = function Strong(_ref) {
+  var children = _ref.children;
+
+  var _useTheme = useTheme(),
+      typography = _useTheme.typography;
+
+  var styles = {
+    fontWeight: typography.fontWeight.strong
+  };
+  return __jsx$1("strong", {
+    className: css(styles)
+  }, 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _useTheme = useTheme(),
+      typography = _useTheme.typography,
+      utils = _useTheme.utils;
+
+  var color = useForegroundTone(tone);
+  var _typography$text$size = typography.text[size],
+      mobile = _typography$text$size.mobile,
+      tablet = _typography$text$size.tablet;
+  var responsiveStyles = utils.responsiveStyles({
+    mobile: createTextStyles(mobile, {
+      includeTrims: baseline
+    }),
+    tablet: createTextStyles(tablet, {
+      includeTrims: baseline
+    })
+  });
+  var styles = [{
+    color: color,
+    fontFamily: typography.fontFamily.sans.name,
+    fontWeight: 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 __jsx = React.createElement;
+var Text = forwardRefWithAs(function (_ref, forwardedRef) {
+  var as = _ref.as,
+      children = _ref.children,
+      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;
+  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 __jsx(Box, {
+      as: as !== null && as !== void 0 ? as : 'span',
+      ref: forwardedRef,
+      id: id,
+      className: css(styles)
+    }, children);
+  } // prepare block variant
+
+
+  var content = overflowStrategy ? __jsx("span", {
+    className: css(overflowStyles)
+  }, children) : children;
+  var textContextValue = useMemo(function () {
+    return {
+      size: size,
+      tone: tone,
+      weight: weight
+    };
+  }, [size, tone, weight]);
+  return __jsx(TextContext.Provider, {
+    value: textContextValue
+  }, __jsx(Box, {
+    as: as,
+    ref: forwardedRef,
+    id: id,
+    className: css(styles)
+  }, content));
+});
+
+export { DefaultTextPropsProvider, Strong, Text, createTextStyles, useDefaultTextProps, useForegroundTone, useOverflowStrategy, useText, useTextContext };

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@spark-web/text",
+  "license": "MIT",
+  "version": "1.0.0",
+  "main": "dist/spark-web-text.cjs.js",
+  "module": "dist/spark-web-text.esm.js",
+  "devDependencies": {
+    "@types/react": "^17.0.12"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.14.6",
+    "@emotion/css": "^11.7.1",
+    "@spark-web/box": "^1.0.0",
+    "@spark-web/theme": "^1.0.0",
+    "@spark-web/utils": "^1.0.0",
+    "react": "^17.0.2"
+  },
+  "engines": {
+    "node": ">= 14.13"
+  }
+}

package/src/Strong.tsx

@@ -0,0 +1,13 @@
+import { css } from '@emotion/css';
+import { useTheme } from '@spark-web/theme';
+import type { ReactNode } from 'react';
+
+export type StrongProps = {
+  children: ReactNode;
+};
+
+export const Strong = ({ children }: StrongProps) => {
+  const { typography } = useTheme();
+  const styles = { fontWeight: typography.fontWeight.strong };
+  return <strong className={css(styles)}>{children}</strong>;
+};

package/src/Text.stories.tsx

@@ -0,0 +1,20 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import type { TextProps } from './Text';
+import { Text } from './Text';
+
+export default {
+  title: 'Typography / Text',
+  component: Text,
+} as ComponentMeta<typeof Text>;
+
+const LinkStory: ComponentStory<typeof Text> = (args: TextProps) => (
+  <Text {...args} />
+);
+
+export const Default = LinkStory.bind({});
+
+Default.args = {
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus ex purus, nec rutrum lorem placerat vestibulum. Ut sit amet libero non tellus aliquam pretium nec ac dui. Vivamus erat nibh, placerat vitae nisi eu, aliquet auctor dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;',
+};

package/src/Text.tsx

@@ -0,0 +1,113 @@
+import { css } from '@emotion/css';
+import type { BoxProps } from '@spark-web/box';
+import { Box } from '@spark-web/box';
+import { forwardRefWithAs } from '@spark-web/utils/ts';
+import type { CSSProperties, ReactNode } from 'react';
+import { useMemo } from 'react';
+
+import { TextContext, useTextContext } from './context';
+import { useDefaultTextProps } from './defaultTextProps';
+import type { TextOverflowStrategy } from './useOverflowStrategy';
+import { useOverflowStrategy } from './useOverflowStrategy';
+import type { UseTextProps } from './useText';
+import { useText } from './useText';
+
+type InlineProps = {
+  align?: never;
+  /** Display as an inline element. */
+  inline?: boolean;
+  overflowStrategy?: never;
+};
+type BlockProps = {
+  /** The horizontal alignment. */
+  align?: 'left' | 'center' | 'right';
+  inline?: never;
+  /** Manage how text behaves with regard to overflow. */
+  overflowStrategy?: TextOverflowStrategy;
+};
+
+export type TextProps = Partial<UseTextProps> & {
+  /** The text content. */
+  children?: ReactNode;
+  /** 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 const Text = forwardRefWithAs<'div', TextProps>(
+  (
+    {
+      // box props
+      as,
+      children,
+      id,
+
+      //text props
+      align,
+      baseline: baselineProp,
+      inline,
+      overflowStrategy,
+      size: sizeProp,
+      tabularNumbers,
+      tone: toneProp,
+      transform,
+      weight: weightProp,
+    },
+    forwardedRef
+  ) => {
+    const overflowStyles = useOverflowStrategy(overflowStrategy);
+    const textContext = useTextContext();
+    const { size, tone, weight } = useDefaultTextProps({
+      size: sizeProp ?? textContext?.size,
+      tone: toneProp ?? textContext?.tone,
+      weight: weightProp ?? textContext?.weight,
+    });
+    const baseline = !inline && baselineProp;
+    const textStyles = useText({ baseline, size, tone, weight });
+    const styles = [
+      textStyles,
+      {
+        display: inline ? 'inline' : 'block',
+        fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
+        textAlign: align,
+        textTransform: transform,
+      },
+    ];
+
+    // early exit for inline variant
+    if (inline) {
+      return (
+        <Box
+          as={as ?? 'span'}
+          ref={forwardedRef}
+          id={id}
+          className={css(styles)}
+        >
+          {children}
+        </Box>
+      );
+    }
+
+    // prepare block variant
+    const content = overflowStrategy ? (
+      <span className={css(overflowStyles)}>{children}</span>
+    ) : (
+      children
+    );
+    const textContextValue = useMemo(
+      () => ({ size, tone, weight }),
+      [size, tone, weight]
+    );
+
+    return (
+      <TextContext.Provider value={textContextValue}>
+        <Box as={as} ref={forwardedRef} id={id} className={css(styles)}>
+          {content}
+        </Box>
+      </TextContext.Provider>
+    );
+  }
+);

package/src/context.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+import type { useDefaultTextProps } from './defaultTextProps';
+
+type TextContextType = ReturnType<typeof useDefaultTextProps>;
+
+export const TextContext = createContext<TextContextType | undefined>(
+  undefined
+);
+
+export function useTextContext() {
+  return useContext(TextContext);
+}