fix(system): chakra.path d prop

Author: segunadebayo

.changeset/little-paws-shout.md

@@ -2,4 +2,11 @@
 "@chakra-ui/react": minor
 ---
 
-Add `DownloadTrigger` component to help download file contents
+- **DownloadTrigger [New]** Add `DownloadTrigger` component to help download
+  file contents.
+
+- **System**
+
+  - Fix issue where passing `d` prop to `chakra.path` adds it to styles not as a
+    direct attribute.
+  - Fix issue where responsive semantic tokens did not get applied.

packages/react/src/styled-system/factory.tsx

@@ -19,7 +19,7 @@ import {
 import * as React from "react"
 import { mergeProps } from "../merge-props"
 import { mergeRefs } from "../merge-refs"
-import { compact, cx, getElementRef, interopDefault } from "../utils"
+import { compact, cx, getElementRef, interopDefault, uniq } from "../utils"
 import type { JsxFactory, StyledFactoryFn } from "./factory.types"
 import { useChakraContext } from "./provider"
 import { isHtmlProp, useResolvedProps } from "./use-resolved-props"
@@ -77,6 +77,14 @@ const Insertion = ({ cache, serialized, isStringTag }: any) => {
   return null
 }
 
+const exceptionPropMap = {
+  path: ["d"],
+}
+
+const hasProp = (obj: any, prop: string) => {
+  return Object.prototype.hasOwnProperty.call(obj, prop)
+}
+
 const createStyled = (tag: any, configOrCva: any = {}, options: any = {}) => {
   if (process.env.NODE_ENV !== "production") {
     if (tag === undefined) {
@@ -86,6 +94,12 @@ const createStyled = (tag: any, configOrCva: any = {}, options: any = {}) => {
     }
   }
 
+  if (hasProp(exceptionPropMap, tag)) {
+    options.forwardProps ||= []
+    const props = exceptionPropMap[tag as keyof typeof exceptionPropMap]
+    options.forwardProps = uniq([...options.forwardProps, ...props])
+  }
+
   const isReal = tag.__emotion_real === tag
   const baseTag = (isReal && tag.__emotion_base) || tag
 

packages/react/src/utils/uniq.ts

@@ -1,4 +1,7 @@
-export const uniq = <T>(...items: T[]) => {
-  const _items = items.filter(Boolean)
-  return Array.from(new Set(_items))
+export const uniq = <T>(...items: T[][]): T[] => {
+  const set = items.reduce<Set<T>>((acc, curr) => {
+    if (curr != null) curr.forEach((item) => acc.add(item))
+    return acc
+  }, new Set([]))
+  return Array.from(set)
 }