@seed-design/react 0.2.0 → 0.2.2

package/lib/components/Chip/Chip.cjs

@@ -7,27 +7,36 @@ const chip = require('@seed-design/css/recipes/chip');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const Icon = require('../Icon/Icon.cjs');
+const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+const reactCheckbox = require('@seed-design/react-checkbox');
+const reactRadioGroup = require('@seed-design/react-radio-group');
 
 const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(chip.chip);
+const withStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext, reactRadioGroup.useRadioGroupItemContext], {
+  strict: false
+});
 const ChipRoot = Icon.withIconRequired(
   withProvider(reactPrimitive.Primitive.button, "root"),
   (props) => props.layout === "iconOnly"
 );
 ChipRoot.displayName = "Chip.Root";
-const ChipLabel = withContext(reactPrimitive.Primitive.span, "label");
+const ChipLabel = withContext(
+  withStateProps(reactPrimitive.Primitive.span),
+  "label"
+);
 ChipLabel.displayName = "Chip.Label";
 const ChipPrefixIcon = withContext(
-  reactPrimitive.Primitive.div,
+  withStateProps(reactPrimitive.Primitive.div),
   "prefixIcon"
 );
 ChipPrefixIcon.displayName = "Chip.PrefixIcon";
 const ChipPrefixAvatar = withContext(
-  reactPrimitive.Primitive.div,
+  withStateProps(reactPrimitive.Primitive.div),
   "prefixAvatar"
 );
 ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
 const ChipSuffixIcon = withContext(
-  reactPrimitive.Primitive.div,
+  withStateProps(reactPrimitive.Primitive.div),
   "suffixIcon"
 );
 ChipSuffixIcon.displayName = "Chip.SuffixIcon";

package/lib/components/Chip/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAQpC,MAAM,WAAW,aACf,SAAQ,cAAc,EACpB,gBAAgB,EAChB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,QAAQ,+IAGpB,CAAC;AAKF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEhG,eAAO,MAAM,SAAS,wFAAwE,CAAC;AAK/F,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACpG,eAAO,MAAM,cAAc,4FAG1B,CAAC;AAKF,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,gBAAgB,8FAG5B,CAAC;AAKF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACpG,eAAO,MAAM,cAAc,4FAG1B,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAcpC,MAAM,WAAW,aACf,SAAQ,cAAc,EACpB,gBAAgB,EAChB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,QAAQ,+IAGpB,CAAC;AAKF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEhG,eAAO,MAAM,SAAS,wFAGrB,CAAC;AAKF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACpG,eAAO,MAAM,cAAc,4FAG1B,CAAC;AAKF,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,gBAAgB,8FAG5B,CAAC;AAKF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACpG,eAAO,MAAM,cAAc,4FAG1B,CAAC"}

package/lib/components/Chip/Chip.js

@@ -3,27 +3,36 @@ import { chip } from '@seed-design/css/recipes/chip';
 import { Primitive } from '@seed-design/react-primitive';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { withIconRequired } from '../Icon/Icon.js';
+import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import { useCheckboxContext } from '@seed-design/react-checkbox';
+import { useRadioGroupItemContext } from '@seed-design/react-radio-group';
 
 const { withProvider, withContext } = createSlotRecipeContext(chip);
+const withStateProps = createWithStateProps([useCheckboxContext, useRadioGroupItemContext], {
+  strict: false
+});
 const ChipRoot = withIconRequired(
   withProvider(Primitive.button, "root"),
   (props) => props.layout === "iconOnly"
 );
 ChipRoot.displayName = "Chip.Root";
-const ChipLabel = withContext(Primitive.span, "label");
+const ChipLabel = withContext(
+  withStateProps(Primitive.span),
+  "label"
+);
 ChipLabel.displayName = "Chip.Label";
 const ChipPrefixIcon = withContext(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "prefixIcon"
 );
 ChipPrefixIcon.displayName = "Chip.PrefixIcon";
 const ChipPrefixAvatar = withContext(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "prefixAvatar"
 );
 ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
 const ChipSuffixIcon = withContext(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "suffixIcon"
 );
 ChipSuffixIcon.displayName = "Chip.SuffixIcon";

package/lib/components/Chip/Chip.namespace.cjs

@@ -9,4 +9,5 @@ const Chip = require('./Chip.cjs');
 exports.Label = Chip.ChipLabel;
 exports.PrefixAvatar = Chip.ChipPrefixAvatar;
 exports.PrefixIcon = Chip.ChipPrefixIcon;
+exports.Root = Chip.ChipRoot;
 exports.SuffixIcon = Chip.ChipSuffixIcon;

package/lib/components/Chip/Chip.namespace.d.ts

@@ -1,2 +1,2 @@
-export { ChipLabel as Label, ChipPrefixIcon as PrefixIcon, ChipPrefixAvatar as PrefixAvatar, ChipSuffixIcon as SuffixIcon, type ChipLabelProps as LabelProps, type ChipPrefixIconProps as PrefixIconProps, type ChipPrefixAvatarProps as PrefixAvatarProps, type ChipSuffixIconProps as SuffixIconProps, } from './Chip';
+export { ChipRoot as Root, ChipLabel as Label, ChipPrefixIcon as PrefixIcon, ChipPrefixAvatar as PrefixAvatar, ChipSuffixIcon as SuffixIcon, type ChipRootProps as RootProps, type ChipLabelProps as LabelProps, type ChipPrefixIconProps as PrefixIconProps, type ChipPrefixAvatarProps as PrefixAvatarProps, type ChipSuffixIconProps as SuffixIconProps, } from './Chip';
 //# sourceMappingURL=Chip.namespace.d.ts.map

package/lib/components/Chip/Chip.namespace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,KAAK,EAClB,cAAc,IAAI,UAAU,EAC5B,gBAAgB,IAAI,YAAY,EAChC,cAAc,IAAI,UAAU,EAC5B,KAAK,cAAc,IAAI,UAAU,EACjC,KAAK,mBAAmB,IAAI,eAAe,EAC3C,KAAK,qBAAqB,IAAI,iBAAiB,EAC/C,KAAK,mBAAmB,IAAI,eAAe,GAC5C,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"Chip.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,IAAI,IAAI,EAChB,SAAS,IAAI,KAAK,EAClB,cAAc,IAAI,UAAU,EAC5B,gBAAgB,IAAI,YAAY,EAChC,cAAc,IAAI,UAAU,EAC5B,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,cAAc,IAAI,UAAU,EACjC,KAAK,mBAAmB,IAAI,eAAe,EAC3C,KAAK,qBAAqB,IAAI,iBAAiB,EAC/C,KAAK,mBAAmB,IAAI,eAAe,GAC5C,MAAM,QAAQ,CAAC"}

package/lib/components/Chip/Chip.namespace.js

@@ -1 +1 @@
-export { ChipLabel as Label, ChipPrefixAvatar as PrefixAvatar, ChipPrefixIcon as PrefixIcon, ChipSuffixIcon as SuffixIcon } from './Chip.js';
+export { ChipLabel as Label, ChipPrefixAvatar as PrefixAvatar, ChipPrefixIcon as PrefixIcon, ChipRoot as Root, ChipSuffixIcon as SuffixIcon } from './Chip.js';

package/lib/components/Divider/Divider.cjs

@@ -29,7 +29,7 @@ const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const Divider = React__namespace.forwardRef((props, ref) => {
   const {
     as = "hr",
-    color = "stroke.neutral",
+    color = "stroke.neutralMuted",
     thickness = 1,
     orientation = "horizontal",
     role,

package/lib/components/Divider/Divider.d.ts

@@ -9,7 +9,7 @@ export interface DividerProps {
      */
     as?: "hr" | "div" | "li";
     /**
-     * @default "stroke.neutral"
+     * @default "stroke.neutralMuted"
      */
     color?: BoxProps["borderColor"];
     /**

package/lib/components/Divider/Divider.js

@@ -6,7 +6,7 @@ import { Box } from '../Box/Box.js';
 const Divider = React.forwardRef((props, ref) => {
   const {
     as = "hr",
-    color = "stroke.neutral",
+    color = "stroke.neutralMuted",
     thickness = 1,
     orientation = "horizontal",
     role,

package/lib/components/ResponsivePair/ResponsivePair.d.ts

@@ -2,7 +2,7 @@ import { FlexProps } from '../Flex';
 import * as React from "react";
 export interface ResponsivePairProps extends Omit<FlexProps, "flexDirection" | "flexWrap"> {
     /**
-     * @default wrap-reverse
+     * @default "wrap-reverse"
      */
     wrap?: "wrap" | "wrap-reverse";
     children: [React.ReactNode, React.ReactNode];

package/lib/components/Text/Text.cjs

@@ -14,7 +14,7 @@ function handleColor(color) {
     return void 0;
   }
   const [type, value] = color.split(".");
-  return vars.vars.$color[type][value] ?? void 0;
+  return vars.vars.$color[type]?.[value] ?? color;
 }
 function handleFontWeight(fontWeight) {
   if (!fontWeight) {

package/lib/components/Text/Text.d.ts

@@ -10,15 +10,15 @@ export interface TextProps extends Omit<TextVariantProps, "maxLines">, React.HTM
     /**
      * The color of the text.
      */
-    color?: ScopedColorFg | ScopedColorPalette;
+    color?: ScopedColorFg | ScopedColorPalette | (string & {});
     /**
      * The font size of the text. Partially overrides the textStyle.
      */
-    fontSize?: FontSize;
+    fontSize?: FontSize | (string & {});
     /**
      * The line height of the text. Partially overrides the textStyle.
      */
-    lineHeight?: LineHeight;
+    lineHeight?: LineHeight | (string & {});
     /**
      * The font weight of the text. Partially overrides the textStyle.
      */

package/lib/components/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAoCpC,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC;;;OAGG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhG;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAYD,eAAO,MAAM,IAAI,mFAmDhB,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAoCpC,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC;;;OAGG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhG;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAE3D;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAEpC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAExC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAYD,eAAO,MAAM,IAAI,mFAmDhB,CAAC"}

package/lib/components/Text/Text.js

@@ -10,7 +10,7 @@ function handleColor(color) {
     return void 0;
   }
   const [type, value] = color.split(".");
-  return vars.$color[type][value] ?? void 0;
+  return vars.$color[type]?.[value] ?? color;
 }
 function handleFontWeight(fontWeight) {
   if (!fontWeight) {

package/lib/utils/createWithStateProps.cjs

@@ -7,7 +7,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 
 function createWithStateProps(useContexts, options) {
-  const strict = true;
+  const strict = options?.strict ?? true;
   return function withStateProps(Component) {
     const Node = React.forwardRef((props, ref) => {
       const stateProps = {};

package/lib/utils/createWithStateProps.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
 function createWithStateProps(useContexts, options) {
-  const strict = true;
+  const strict = options?.strict ?? true;
   return function withStateProps(Component) {
     const Node = forwardRef((props, ref) => {
       const stateProps = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -58,12 +58,12 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.2.0",
+    "@seed-design/css": "0.2.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.2.0",
+    "@seed-design/css": "0.2.1",
     "@vitejs/plugin-react": "^5.0.0",
     "ajv": "^8.17.1",
     "globby": "^14.1.0",

package/src/components/Chip/Chip.namespace.ts

@@ -1,8 +1,10 @@
 export {
+  ChipRoot as Root,
   ChipLabel as Label,
   ChipPrefixIcon as PrefixIcon,
   ChipPrefixAvatar as PrefixAvatar,
   ChipSuffixIcon as SuffixIcon,
+  type ChipRootProps as RootProps,
   type ChipLabelProps as LabelProps,
   type ChipPrefixIconProps as PrefixIconProps,
   type ChipPrefixAvatarProps as PrefixAvatarProps,

package/src/components/Chip/Chip.tsx

@@ -3,8 +3,14 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { withIconRequired } from "../Icon/Icon";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { useCheckboxContext } from "@seed-design/react-checkbox";
+import { useRadioGroupItemContext } from "@seed-design/react-radio-group";
 
 const { withProvider, withContext } = createSlotRecipeContext(chip);
+const withStateProps = createWithStateProps([useCheckboxContext, useRadioGroupItemContext], {
+  strict: false,
+});
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -23,14 +29,17 @@ ChipRoot.displayName = "Chip.Root";
 
 export interface ChipLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
 
-export const ChipLabel = withContext<HTMLSpanElement, ChipLabelProps>(Primitive.span, "label");
+export const ChipLabel = withContext<HTMLSpanElement, ChipLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
 ChipLabel.displayName = "Chip.Label";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface ChipPrefixIconProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 export const ChipPrefixIcon = withContext<HTMLDivElement, ChipPrefixIconProps>(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "prefixIcon",
 );
 ChipPrefixIcon.displayName = "Chip.PrefixIcon";
@@ -42,7 +51,7 @@ export interface ChipPrefixAvatarProps
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const ChipPrefixAvatar = withContext<HTMLDivElement, ChipPrefixAvatarProps>(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "prefixAvatar",
 );
 ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
@@ -51,7 +60,7 @@ ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
 
 export interface ChipSuffixIconProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 export const ChipSuffixIcon = withContext<HTMLDivElement, ChipSuffixIconProps>(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "suffixIcon",
 );
 ChipSuffixIcon.displayName = "Chip.SuffixIcon";

package/src/components/Divider/Divider.tsx

@@ -11,7 +11,7 @@ export interface DividerProps {
   as?: "hr" | "div" | "li";
 
   /**
-   * @default "stroke.neutral"
+   * @default "stroke.neutralMuted"
    */
   color?: BoxProps["borderColor"];
 
@@ -31,7 +31,7 @@ export interface DividerProps {
 export const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
   const {
     as = "hr",
-    color = "stroke.neutral",
+    color = "stroke.neutralMuted",
     thickness = 1,
     orientation = "horizontal",
     role,

package/src/components/ResponsivePair/ResponsivePair.tsx

@@ -5,7 +5,7 @@ import { Flex, type FlexProps } from "../Flex";
 
 export interface ResponsivePairProps extends Omit<FlexProps, "flexDirection" | "flexWrap"> {
   /**
-   * @default wrap-reverse
+   * @default "wrap-reverse"
    */
   wrap?: "wrap" | "wrap-reverse";
 

package/src/components/Text/Text.tsx

@@ -17,7 +17,7 @@ function handleColor(color: string | undefined) {
   }
   const [type, value] = color.split(".");
   // @ts-ignore
-  return vars.$color[type][value] ?? undefined;
+  return vars.$color[type]?.[value] ?? color;
 }
 
 function handleFontWeight(fontWeight: string | undefined) {
@@ -56,17 +56,17 @@ export interface TextProps
   /**
    * The color of the text.
    */
-  color?: ScopedColorFg | ScopedColorPalette;
+  color?: ScopedColorFg | ScopedColorPalette | (string & {});
 
   /**
    * The font size of the text. Partially overrides the textStyle.
    */
-  fontSize?: FontSize;
+  fontSize?: FontSize | (string & {});
 
   /**
    * The line height of the text. Partially overrides the textStyle.
    */
-  lineHeight?: LineHeight;
+  lineHeight?: LineHeight | (string & {});
 
   /**
    * The font weight of the text. Partially overrides the textStyle.