@kaizen/components 1.38.6 → 1.39.0

package/src/Icon/UserDeleteIcon.tsx

@@ -2,7 +2,8 @@
 // Changes to this file will be overwritten
 
 import React, { useId } from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const UserDeleteIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
@@ -11,7 +12,7 @@ export const UserDeleteIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M7.694 10a3.332 3.332 0 1 1 0-6.665 3.332 3.332 0 1 1 0 6.665Zm8.332-2.011 1.767-1.767L18.97 7.4l-1.767 1.767 1.767 1.768-1.178 1.178-1.767-1.767-1.767 1.767-1.179-1.178 1.768-1.768L13.08 7.4l1.179-1.178 1.767 1.767Zm-8.332 3.677c2.225 0 6.665 1.117 6.665 3.333v1.666H1.03v-1.666c0-2.216 4.44-3.333 6.665-3.333Z"
+          d="M7.694 10a3.332 3.332 0 1 1 0-6.665 3.332 3.332 0 1 1 0 6.665m8.332-2.011 1.767-1.767L18.97 7.4l-1.767 1.767 1.767 1.768-1.178 1.178-1.767-1.767-1.767 1.767-1.179-1.178 1.768-1.768L13.08 7.4l1.179-1.178zm-8.332 3.677c2.225 0 6.665 1.117 6.665 3.333v1.666H1.03v-1.666c0-2.216 4.44-3.333 6.665-3.333"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/UserExitIcon.tsx

@@ -2,7 +2,8 @@
 // Changes to this file will be overwritten
 
 import React, { useId } from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const UserExitIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
@@ -11,7 +12,7 @@ export const UserExitIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M7.5 11.667C5.275 11.667.833 12.783.833 15v1.667h13.334V15c0-2.217-4.442-3.333-6.667-3.333Zm9.52-3.372.872.872-.872.871.87-.871-.87-.872Zm-1.187-2.07-.882.882 1.431 1.435h-3.361v1.25h3.361l-1.431 1.434.882.882 2.942-2.941-2.942-2.942ZM7.5 10a3.332 3.332 0 1 0 0-6.667A3.332 3.332 0 1 0 7.5 10Z"
+          d="M7.5 11.667C5.275 11.667.833 12.783.833 15v1.667h13.334V15c0-2.217-4.442-3.333-6.667-3.333m9.52-3.372.872.872-.872.871.87-.871zm-1.187-2.07-.882.882 1.431 1.435h-3.361v1.25h3.361l-1.431 1.434.882.882 2.942-2.941zM7.5 10a3.332 3.332 0 1 0 0-6.667A3.332 3.332 0 1 0 7.5 10"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/UserIcon.tsx

@@ -2,7 +2,8 @@
 // Changes to this file will be overwritten
 
 import React, { useId } from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const UserIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()

package/src/Icon/UserSelectIcon.tsx

@@ -2,7 +2,8 @@
 // Changes to this file will be overwritten
 
 import React, { useId } from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const UserSelectIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
@@ -11,7 +12,7 @@ export const UserSelectIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M6.876 10a3.332 3.332 0 1 1 0-6.665 3.332 3.332 0 1 1 0 6.665Zm12.913-3.063-5.138 5.146-3.316-3.308 1.104-1.103 2.212 2.206 4.036-4.044 1.102 1.103Zm-12.913 4.73c2.224 0 6.665 1.116 6.665 3.332v1.666H.21v-1.666c0-2.216 4.44-3.333 6.665-3.333Z"
+          d="M6.876 10a3.332 3.332 0 1 1 0-6.665 3.332 3.332 0 1 1 0 6.665m12.913-3.063-5.138 5.146-3.316-3.308 1.104-1.103 2.212 2.206 4.036-4.044zm-12.913 4.73c2.224 0 6.665 1.116 6.665 3.332v1.666H.21v-1.666c0-2.216 4.44-3.333 6.665-3.333"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/UserSettingsIcon.tsx

@@ -2,7 +2,8 @@
 // Changes to this file will be overwritten
 
 import React, { useId } from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const UserSettingsIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
@@ -11,7 +12,7 @@ export const UserSettingsIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M16.036 9.917a1.168 1.168 0 0 1-1.167-1.167c0-.643.524-1.166 1.167-1.166a1.168 1.168 0 0 1 0 2.333Zm2.477-.84c.012-.107.023-.217.023-.327 0-.11-.011-.22-.023-.326l.702-.55a.163.163 0 0 0 .04-.214l-.667-1.153a.162.162 0 0 0-.203-.073l-.83.333a2.542 2.542 0 0 0-.563-.327l-.127-.883a.163.163 0 0 0-.163-.14h-1.334a.162.162 0 0 0-.162.14l-.127.883c-.204.084-.39.194-.563.327l-.83-.333a.167.167 0 0 0-.203.073l-.668 1.153a.168.168 0 0 0 .04.214l.703.55a2.766 2.766 0 0 0-.022.326c0 .114.01.22.022.327l-.702.55a.168.168 0 0 0-.041.213l.668 1.154c.039.073.126.103.203.073l.83-.333c.172.13.359.243.563.326l.127.884c.01.08.08.14.162.14h1.334c.083 0 .153-.06.163-.14l.127-.884c.204-.083.39-.193.563-.326l.83.333c.073.027.164 0 .203-.073l.667-1.154a.167.167 0 0 0-.04-.213l-.702-.55ZM7.388 10a3.332 3.332 0 1 0 0-6.666 3.332 3.332 0 1 0 0 6.666Zm0 1.667C5.163 11.667.722 12.784.722 15v1.667h13.333V15c0-2.216-4.442-3.333-6.667-3.333Z"
+          d="M16.036 9.917a1.168 1.168 0 0 1-1.167-1.167c0-.643.524-1.166 1.167-1.166a1.168 1.168 0 0 1 0 2.333m2.477-.84c.012-.107.023-.217.023-.327 0-.11-.011-.22-.023-.326l.702-.55a.163.163 0 0 0 .04-.214l-.667-1.153a.162.162 0 0 0-.203-.073l-.83.333a2.542 2.542 0 0 0-.563-.327l-.127-.883a.163.163 0 0 0-.163-.14h-1.334a.162.162 0 0 0-.162.14l-.127.883c-.204.084-.39.194-.563.327l-.83-.333a.167.167 0 0 0-.203.073l-.668 1.153a.168.168 0 0 0 .04.214l.703.55a2.766 2.766 0 0 0-.022.326c0 .114.01.22.022.327l-.702.55a.168.168 0 0 0-.041.213l.668 1.154c.039.073.126.103.203.073l.83-.333c.172.13.359.243.563.326l.127.884c.01.08.08.14.162.14h1.334c.083 0 .153-.06.163-.14l.127-.884c.204-.083.39-.193.563-.326l.83.333c.073.027.164 0 .203-.073l.667-1.154a.167.167 0 0 0-.04-.213zM7.388 10a3.332 3.332 0 1 0 0-6.666 3.332 3.332 0 1 0 0 6.666m0 1.667C5.163 11.667.722 12.784.722 15v1.667h13.333V15c0-2.216-4.442-3.333-6.667-3.333"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/UserUpdateIcon.tsx

@@ -2,7 +2,8 @@
 // Changes to this file will be overwritten
 
 import React, { useId } from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const UserUpdateIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
@@ -11,7 +12,7 @@ export const UserUpdateIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="m17.519 10.956 1.843-1.921H18.17c-.046-1.523-1.345-2.794-2.876-2.794a2.88 2.88 0 0 0-2.877 2.877c0 .686.247 1.351.7 1.878l.308.305a2.869 2.869 0 0 0 3.33.296l.092-.055-.752-.751-.052.022a1.853 1.853 0 0 1-2.6-1.695c0-1.02.83-1.85 1.85-1.85.993 0 1.807.785 1.85 1.767h-1.62l1.996 1.92Zm-10.019.71C5.275 11.667.834 12.784.834 15v1.666h13.333V15c0-2.217-4.442-3.334-6.667-3.334ZM7.5 10a3.333 3.333 0 1 0 .001-6.666 3.333 3.333 0 0 0 0 6.666Z"
+          d="m17.519 10.956 1.843-1.921H18.17c-.046-1.523-1.345-2.794-2.876-2.794a2.88 2.88 0 0 0-2.877 2.877c0 .686.247 1.351.7 1.878l.308.305a2.869 2.869 0 0 0 3.33.296l.092-.055-.752-.751-.052.022a1.853 1.853 0 0 1-2.6-1.695c0-1.02.83-1.85 1.85-1.85.993 0 1.807.785 1.85 1.767h-1.62zm-10.019.71C5.275 11.667.834 12.784.834 15v1.666h13.333V15c0-2.217-4.442-3.334-6.667-3.334M7.5 10a3.333 3.333 0 1 0 .001-6.666 3.333 3.333 0 0 0 0 6.666"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/UsersIcon.tsx

@@ -2,7 +2,8 @@
 // Changes to this file will be overwritten
 
 import React, { useId } from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const UsersIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()

package/src/Icon/VisibleIcon.tsx

@@ -2,7 +2,8 @@
 // Changes to this file will be overwritten
 
 import React, { useId } from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const VisibleIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
@@ -11,7 +12,7 @@ export const VisibleIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M9.831 3.75c-4.09 0-7.583 2.544-8.998 6.135 1.415 3.591 4.908 6.135 8.998 6.135 4.09 0 7.583-2.544 8.998-6.135-1.415-3.591-4.908-6.135-8.998-6.135Zm0 10.225a4.091 4.091 0 0 1-4.09-4.09 4.091 4.091 0 0 1 4.09-4.09 4.091 4.091 0 0 1 4.09 4.09 4.091 4.091 0 0 1-4.09 4.09Zm0-6.544a2.45 2.45 0 0 0-2.454 2.454 2.45 2.45 0 0 0 2.454 2.454 2.45 2.45 0 0 0 2.454-2.454 2.45 2.45 0 0 0-2.454-2.454Z"
+          d="M9.831 3.75c-4.09 0-7.583 2.544-8.998 6.135 1.415 3.591 4.908 6.135 8.998 6.135 4.09 0 7.583-2.544 8.998-6.135-1.415-3.591-4.908-6.135-8.998-6.135m0 10.225a4.091 4.091 0 0 1-4.09-4.09 4.091 4.091 0 0 1 4.09-4.09 4.091 4.091 0 0 1 4.09 4.09 4.091 4.091 0 0 1-4.09 4.09m0-6.544a2.45 2.45 0 0 0-2.454 2.454 2.45 2.45 0 0 0 2.454 2.454 2.45 2.45 0 0 0 2.454-2.454 2.45 2.45 0 0 0-2.454-2.454"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/WritingIcon.tsx

@@ -2,7 +2,8 @@
 // Changes to this file will be overwritten
 
 import React, { useId } from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const WritingIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
@@ -11,7 +12,7 @@ export const WritingIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M1 18.55h18.002V15.7H1v2.85ZM16.53 4.333a.689.689 0 0 0 0-1.009L14.78 1.66a.78.78 0 0 0-1.061 0L12.25 3.052l2.813 2.673 1.466-1.393Zm-2.216 2.105-2.813-2.672-7.5 7.126v2.672h2.812l7.501-7.126Z"
+          d="M1 18.55h18.002V15.7H1zM16.53 4.333a.689.689 0 0 0 0-1.009L14.78 1.66a.78.78 0 0 0-1.061 0L12.25 3.052l2.813 2.673zm-2.216 2.105-2.813-2.672-7.5 7.126v2.672h2.812z"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/ZoomInIcon.tsx

@@ -2,14 +2,15 @@
 // Changes to this file will be overwritten
 
 import React from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const ZoomInIcon = (props: IconProps): JSX.Element => {
   const svgContent = (
     <>
       <path
         fill="currentColor"
-        d="M13.865 12.32h-.813l-.289-.277A6.66 6.66 0 0 0 14.38 7.69a6.69 6.69 0 1 0-6.69 6.69 6.66 6.66 0 0 0 4.354-1.617l.278.289v.813L17.467 19 19 17.467l-5.135-5.146Zm-6.175 0a4.625 4.625 0 0 1-4.632-4.63A4.625 4.625 0 0 1 7.69 3.058a4.625 4.625 0 0 1 4.63 4.632 4.625 4.625 0 0 1-4.63 4.63Zm.514-7.203H7.175v2.058H5.117v1.03h2.058v2.057h1.03V8.204h2.057V7.175H8.204V5.117Z"
+        d="M13.865 12.32h-.813l-.289-.277A6.66 6.66 0 0 0 14.38 7.69a6.69 6.69 0 1 0-6.69 6.69 6.66 6.66 0 0 0 4.354-1.617l.278.289v.813L17.467 19 19 17.467zm-6.175 0a4.625 4.625 0 0 1-4.632-4.63A4.625 4.625 0 0 1 7.69 3.058a4.625 4.625 0 0 1 4.63 4.632 4.625 4.625 0 0 1-4.63 4.63m.514-7.203H7.175v2.058H5.117v1.03h2.058v2.057h1.03V8.204h2.057V7.175H8.204z"
       />
     </>
   )

package/src/Icon/ZoomOutIcon.tsx

@@ -2,14 +2,15 @@
 // Changes to this file will be overwritten
 
 import React from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const ZoomOutIcon = (props: IconProps): JSX.Element => {
   const svgContent = (
     <>
       <path
         fill="currentColor"
-        d="M13.865 12.32h-.813l-.289-.277A6.66 6.66 0 0 0 14.38 7.69a6.69 6.69 0 1 0-6.69 6.69 6.66 6.66 0 0 0 4.354-1.617l.278.289v.813L17.467 19 19 17.467l-5.135-5.146Zm-6.175 0a4.625 4.625 0 0 1-4.632-4.63A4.625 4.625 0 0 1 7.69 3.058a4.625 4.625 0 0 1 4.63 4.632 4.625 4.625 0 0 1-4.63 4.63ZM5.117 7.176h5.145v1.03H5.117v-1.03Z"
+        d="M13.865 12.32h-.813l-.289-.277A6.66 6.66 0 0 0 14.38 7.69a6.69 6.69 0 1 0-6.69 6.69 6.66 6.66 0 0 0 4.354-1.617l.278.289v.813L17.467 19 19 17.467zm-6.175 0a4.625 4.625 0 0 1-4.632-4.63A4.625 4.625 0 0 1 7.69 3.058a4.625 4.625 0 0 1 4.63 4.632 4.625 4.625 0 0 1-4.63 4.63M5.117 7.176h5.145v1.03H5.117z"
       />
     </>
   )

package/src/Icon/_docs/Icon.mdx

@@ -11,7 +11,6 @@ import * as IconStories from "./Icon.stories"
   className="!mb-8"
 />
 
-
 ## Installation
 
 Each icon is imported separately, for example if you'd like the `AddIcon` you will use the following import.

package/src/Icon/bin/Template.tsx

@@ -1,5 +1,6 @@
 import React, { useId } from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const COMPONENT_TITLE = (props: IconProps): JSX.Element => {
   const uniqueId = useId()

package/src/Icon/bin/utils/insertSvgData.spec.ts

@@ -11,7 +11,8 @@ describe("insertSvgData", () => {
     const svgContent = "<use></use>"
     const result = insertSvgData(reactTemplate, componentTitle, svgContent)
     const expected = `import React from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const MyIcon = (props: IconProps): JSX.Element => {
 

package/src/Icon/bin/wrapSVGs.ts

@@ -61,6 +61,8 @@ fs.readdirSync(outputDir).forEach((file: string) => {
   filesToExportFromIndex.push(path.parse(file).name)
 })
 
+filesToExportFromIndex.push("types")
+
 const importStatements = filesToExportFromIndex.map(
   fileName => `export * from "./${fileName}";`
 )

package/src/Icon/index.ts

@@ -238,3 +238,4 @@ export * from "./VisibleIcon"
 export * from "./WritingIcon"
 export * from "./ZoomInIcon"
 export * from "./ZoomOutIcon"
+export * from "./types"

package/src/Icon/subcomponents/SVG/SVG.tsx

@@ -3,10 +3,6 @@ import classnames from "classnames"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./SVG.module.scss"
 
-type BaseSVGProps = {
-  inheritSize?: boolean
-} & OverrideClassName<SVGAttributes<SVGElement>>
-
 type MeaningfulIcon = {
   role: "img"
   "aria-label": string
@@ -17,8 +13,12 @@ type DecorativeIcon = {
   "aria-label"?: never
 }
 
-export type IconProps = BaseSVGProps & (MeaningfulIcon | DecorativeIcon)
-export type SVGProps = IconProps & {
+export type BaseSVGProps = {
+  inheritSize?: boolean
+} & OverrideClassName<SVGAttributes<SVGElement>> &
+  (MeaningfulIcon | DecorativeIcon)
+
+export type SVGProps = BaseSVGProps & {
   children: ReactNode
 }
 

package/src/Icon/types.ts

@@ -0,0 +1,3 @@
+import type { BaseSVGProps } from "./subcomponents/SVG"
+
+export type IconProps = BaseSVGProps

package/src/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { SVG, IconProps } from "~components/Icon/subcomponents/SVG"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
 
 export const RemoveTagIcon = (props: IconProps): JSX.Element => {
   const svgContent = (