@kaizen/components 1.54.4 → 1.55.1

package/dist/types/__future__/Select/Select.d.ts

@@ -54,7 +54,7 @@ export declare const Select: {
     <Option extends SelectOption = SelectOption>({ label, items, id: propsId, trigger, children, status, validationMessage, isReversed, isFullWidth, disabledValues, classNameOverride, selectedKey, description, placeholder, isDisabled, portalContainerId, ...restProps }: SelectProps<Option>): JSX.Element;
     displayName: string;
     Section: {
-        <Option_1 extends SelectOption = SelectOption>({ section, }: import("./subcomponents").ListBoxSectionProps<Option_1>): JSX.Element;
+        <Option extends SelectOption = SelectOption>({ section, }: import("./subcomponents").ListBoxSectionProps<Option>): JSX.Element;
         displayName: string;
     };
     SectionDivider: {
@@ -62,11 +62,11 @@ export declare const Select: {
         displayName: string;
     };
     Option: {
-        <Option_2 extends SelectOption = SelectOption>({ item, classNameOverride, ...props }: import("./subcomponents").OptionProps<Option_2>): JSX.Element;
+        <Option extends SelectOption = SelectOption>({ item, classNameOverride, ...props }: import("./subcomponents").OptionProps<Option>): JSX.Element;
         displayName: string;
     };
     ItemDefaultRender: {
-        <Option_3 extends SelectOption = SelectOption>({ item, }: import("./subcomponents").ListItemProps<Option_3>): JSX.Element;
+        <Option extends SelectOption = SelectOption>({ item, }: import("./subcomponents").ListItemProps<Option>): JSX.Element;
         displayName: string;
     };
     TriggerButton: React.ForwardRefExoticComponent<{
@@ -74,16 +74,16 @@ export declare const Select: {
         labelProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
         value: React.ReactNode;
         valueProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
-        isOpen?: boolean | undefined;
-        placeholder?: string | undefined;
-        status?: "error" | "caution" | undefined;
-        isDisabled?: boolean | undefined;
-        isReversed?: boolean | undefined;
+        isOpen?: boolean;
+        placeholder?: string;
+        status?: "error" | "caution";
+        isDisabled?: boolean;
+        isReversed?: boolean;
     } & Omit<React.HTMLAttributes<HTMLButtonElement>, "className"> & {
-        classNameOverride?: string | undefined;
+        classNameOverride?: string;
     } & React.RefAttributes<HTMLButtonElement>>;
     ListBox: {
-        <Option_4 extends SelectOption>({ children, menuProps, classNameOverride, ...restProps }: import("./subcomponents").SingleListBoxProps<Option_4>): JSX.Element;
+        <Option extends SelectOption>({ children, menuProps, classNameOverride, ...restProps }: import("./subcomponents").SingleListBoxProps<Option>): JSX.Element;
         displayName: string;
     };
 };

package/dist/types/__future__/Select/subcomponents/SelectToggle/SelectToggle.d.ts

@@ -25,17 +25,17 @@ export declare const SelectToggle: React.ForwardRefExoticComponent<{
     value: React.ReactNode;
     /** Props for the element representing the selected value. */
     valueProps: DOMAttributes<FocusableElement>;
-    isOpen?: boolean | undefined;
+    isOpen?: boolean;
     /**
      * @deprecated Use of placeholder text goes against our a11y standards.
      * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
      */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /** Updates the styling of the validation. */
-    status?: "error" | "caution" | undefined;
-    isDisabled?: boolean | undefined;
+    status?: "error" | "caution";
+    isDisabled?: boolean;
     /** Use the `reversed` styles. */
-    isReversed?: boolean | undefined;
+    isReversed?: boolean;
 } & Omit<React.HTMLAttributes<HTMLButtonElement>, "className"> & {
-    classNameOverride?: string | undefined;
+    classNameOverride?: string;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/__overlays__/Tooltip/v1/utils/isSemanticElement.d.ts

@@ -3,4 +3,4 @@ export declare function extractDisplayName(type: React.FunctionComponent): strin
 /**
  *  Validates implicit or explicitly semantic roles required to make `aria-describedby` announce predictably with screen readers
  */
-export declare const isSemanticElement: (element: ReactNode) => element is React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const isSemanticElement: (element: ReactNode) => element is React.ReactElement;

package/dist/types/__overlays__/Tooltip/v3/Tooltip.d.ts

@@ -23,10 +23,10 @@ export declare const Tooltip: React.ForwardRefExoticComponent<Omit<RACTooltipPro
      * anchor element.
      * @default 8
      */
-    offset?: number | undefined;
+    offset?: number;
     /**
      * The placement of the tooltip relative to the trigger.
      * + we're intentionally limiting the placement options to rtl friendly ones (start, end, top, bottom)
      */
-    placement?: "end" | "start" | "bottom" | "top" | "bottom start" | "bottom end" | "top start" | "top end" | "start top" | "start bottom" | "end top" | "end bottom" | undefined;
+    placement?: "bottom" | "bottom start" | "bottom end" | "top" | "top start" | "top end" | "start" | "start top" | "start bottom" | "end" | "end top" | "end bottom";
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/types/utils/isRefObject.d.ts

@@ -1 +1 @@
-export declare const isRefObject: (ref: React.ForwardedRef<any>) => ref is import("react").MutableRefObject<any>;
+export declare const isRefObject: (ref: React.ForwardedRef<any>) => ref is React.MutableRefObject<any>;

package/dist/types/utils/mergeClassNames.d.ts

@@ -4,5 +4,5 @@ type ClassNameValue = string | number | boolean | undefined | null;
  * This is useful when working with react-aria-components which have a feature where you can pass a function that receives state and returns a classname.
  * https://react-spectrum.adobe.com/react-aria/styling.html#render-props
  */
-export declare const mergeClassNames: <ClassNameTypes extends (ClassNameValue | ((state: any) => string))[]>(...classNames: ClassNameTypes) => (() => string) extends ClassNameTypes[number] ? (state: any) => string : string;
+export declare const mergeClassNames: <ClassNameTypes extends Array<ClassNameValue | ((state: any) => string)>>(...classNames: ClassNameTypes) => (() => string) extends ClassNameTypes[number] ? (state: any) => string : string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.54.4",
+  "version": "1.55.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -29,7 +29,7 @@
     "styles.css"
   ],
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.0",
+    "@floating-ui/react-dom": "^2.1.1",
     "@headlessui/react": "<=1.5.0",
     "@internationalized/date": "^3.5.4",
     "@popperjs/core": "^2.11.8",
@@ -54,16 +54,16 @@
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.5.2",
-    "prosemirror-history": "^1.4.0",
+    "prosemirror-history": "^1.4.1",
     "prosemirror-inputrules": "^1.4.0",
     "prosemirror-keymap": "^1.2.2",
-    "prosemirror-model": "^1.21.1",
-    "prosemirror-schema-basic": "^1.2.2",
-    "prosemirror-schema-list": "^1.4.0",
+    "prosemirror-model": "^1.22.1",
+    "prosemirror-schema-basic": "^1.2.3",
+    "prosemirror-schema-list": "^1.4.1",
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.9.0",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.33.7",
+    "prosemirror-view": "^1.33.8",
     "react-animate-height": "^3.2.3",
     "react-aria": "^3.33.1",
     "react-aria-components": "^1.2.1",
@@ -83,7 +83,7 @@
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
-    "@cultureamp/frontend-apis": "^9.5.1",
+    "@cultureamp/frontend-apis": "^9.6.0",
     "@cultureamp/i18n-react-intl": "^2.5.8",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.3.0",
@@ -93,15 +93,15 @@
     "concat-cli": "^4.0.0",
     "query-string": "^9.0.0",
     "react-intl": "^6.6.8",
-    "rollup": "^4.18.0",
-    "sass": "^1.77.4",
+    "rollup": "^4.18.1",
+    "sass": "^1.77.8",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
-    "ts-jest": "^29.1.4",
+    "ts-jest": "^29.2.2",
     "tslib": "^2.6.3",
-    "tsx": "^4.15.1",
-    "@kaizen/design-tokens": "10.5.0",
-    "@kaizen/package-bundler": "1.1.2"
+    "tsx": "^4.16.2",
+    "@kaizen/package-bundler": "1.1.2",
+    "@kaizen/design-tokens": "10.5.0"
   },
   "devDependenciesComments": {
     "postcss": "Installed in root",

package/src/Brand/Brand.tsx

@@ -58,11 +58,11 @@ export const Brand = ({
     )
   }
 
-  const { alt, classNameOverride } = restProps
+  const { alt, classNameOverride, ...otherProps } = restProps
   const brandTheme = reversed ? "-reversed" : "-default"
 
   return (
-    <picture className={classNameOverride} {...(restProps as PictureProps)}>
+    <picture className={classNameOverride} {...otherProps}>
       <source
         srcSet={assetUrl(`brand/${variant}-reversed.svg`)}
         media="(forced-colors: active) and (prefers-color-scheme: dark)"

package/src/Filter/FilterBar/_docs/FilterBar.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { fn } from "@storybook/test"
+import { expect, fn, userEvent, within, waitFor } from "@storybook/test"
 import queryString from "query-string"
 import Highlight from "react-highlight"
 import {
@@ -759,3 +759,95 @@ export const ExternalEventOpenFilter: Story = {
     )
   },
 }
+
+const emptyLabelFilters = [
+  {
+    id: "cycle",
+    name: "",
+    Component: <CycleFilter />,
+    isRemovable: true,
+  },
+  {
+    id: "customRange",
+    name: "",
+    Component: <FilterBar.DateRangePicker />,
+    isRemovable: true,
+  },
+] satisfies Filters<CycleFilterValues>
+
+export const UpdatesLabels: Story = {
+  parameters: {
+    chromatic: {
+      delay: 2500,
+    },
+  },
+  render: () => {
+    const [values, setValues] = useState<Partial<CycleFilterValues>>({})
+
+    const [f, setF] = useState(emptyLabelFilters)
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        setF([
+          {
+            id: "cycle",
+            name: "Cycle",
+            Component: <CycleFilter />,
+            isRemovable: true,
+          },
+          {
+            id: "customRange",
+            name: "Custom Range",
+            Component: <FilterBar.DateRangePicker />,
+            isRemovable: true,
+          },
+        ])
+      }, 2000)
+      return () => clearTimeout(timer)
+    }, [])
+
+    return (
+      <>
+        <FilterBar<CycleFilterValues>
+          filters={f}
+          values={values}
+          onValuesChange={setValues}
+        />
+        <div className="mt-16">
+          <code>Filters:</code>
+          <Highlight className="json">
+            {JSON.stringify(
+              f.map(({ id, name }) => ({ id, name })),
+              null,
+              4
+            )}
+          </Highlight>
+        </div>
+        <div className="mt-16">
+          <code>Values:</code>
+          <Highlight className="json">
+            {JSON.stringify(values, null, 4)}
+          </Highlight>
+        </div>
+      </>
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step("Initial render complete", async () => {
+      await waitFor(() => canvas.getByRole("button", { name: "Add Filters" }))
+    })
+
+    await userEvent.click(canvas.getByRole("button", { name: "Add Filters" }))
+
+    expect(canvas.queryByText("Custom Range")).not.toBeInTheDocument()
+
+    await step("Labels have updated", async () => {
+      await waitFor(
+        () => expect(canvas.queryByText("Custom Range")).toBeInTheDocument(),
+        { timeout: 2100 }
+      )
+    })
+  },
+}

package/src/Filter/FilterBar/context/FilterBarContext.tsx

@@ -1,9 +1,16 @@
-import React, { useContext, useEffect, useMemo, useReducer } from "react"
+import React, {
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from "react"
 import { FilterAttributes, FilterState, Filters, FiltersValues } from "../types"
 import { filterBarStateReducer } from "./reducer/filterBarStateReducer"
 import { setupFilterBarState } from "./reducer/setupFilterBarState"
 import { ActiveFiltersArray } from "./types"
 import { checkShouldUpdateValues } from "./utils/checkShouldUpdateValues"
+import { createFiltersHash } from "./utils/createFiltersHash"
 import { getInactiveFilters } from "./utils/getInactiveFilters"
 import { getMappedFilters } from "./utils/getMappedFilters"
 import { getValidValue } from "./utils/getValidValue"
@@ -70,7 +77,11 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
   values,
   onValuesChange,
 }: FilterBarProviderProps<ValuesMap>): JSX.Element => {
-  const mappedFilters = useMemo(() => getMappedFilters(filters), [filters])
+  const filtersHash = useRef<string>(createFiltersHash(filters))
+  const mappedFilters = useMemo(
+    () => getMappedFilters(filters),
+    [filtersHash.current]
+  )
 
   const [state, dispatch] = useReducer(
     filterBarStateReducer<ValuesMap>,
@@ -135,6 +146,14 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
     }
   }, [state])
 
+  useEffect(() => {
+    const newFiltersHash = createFiltersHash(filters)
+    if (newFiltersHash !== filtersHash.current) {
+      filtersHash.current = newFiltersHash
+      dispatch({ type: "update_filter_labels", data: filters })
+    }
+  }, [filters])
+
   const activeFilters = Array.from(
     state.activeFilterIds,
     id => mappedFilters[id]

package/src/Filter/FilterBar/context/reducer/filterBarStateReducer.ts

@@ -1,4 +1,4 @@
-import { FiltersValues } from "../../types"
+import { Filters, FiltersValues } from "../../types"
 import { FilterBarState, FilterStateEditableAttributes } from "../types"
 import { updateDependentFilters } from "../utils/updateDependentFilters"
 import { updateSingleFilter } from "./updateSingleFilter"
@@ -14,6 +14,7 @@ type Actions<ValuesMap extends FiltersValues> =
     }
   | { type: "activate_filter"; id: keyof ValuesMap }
   | { type: "deactivate_filter"; id: keyof ValuesMap }
+  | { type: "update_filter_labels"; data: Filters<ValuesMap> }
 
 export const filterBarStateReducer = <ValuesMap extends FiltersValues>(
   state: FilterBarState<ValuesMap>,
@@ -46,5 +47,19 @@ export const filterBarStateReducer = <ValuesMap extends FiltersValues>(
         ...updateDependentFilters(state),
         hasUpdatedValues: true,
       }
+
+    case "update_filter_labels":
+      return {
+        ...state,
+        filters: Object.values(state.filters).reduce((acc, filter) => {
+          acc[filter.id] = {
+            ...filter,
+            name:
+              action.data.find(({ id }) => id === filter.id)?.name ??
+              filter.name,
+          }
+          return acc
+        }, {}),
+      }
   }
 }

package/src/Filter/FilterBar/context/utils/createFiltersHash.ts

@@ -0,0 +1,7 @@
+import { Filters, FiltersValues } from "../../types"
+
+export function createFiltersHash<Values extends FiltersValues>(
+  filters: Filters<Values>
+): string {
+  return JSON.stringify(filters.map(({ id, name }) => ({ id, name })))
+}

package/src/Icon/AddLinkIcon.tsx

@@ -10,7 +10,7 @@ export const AddLinkIcon = (props: IconProps): JSX.Element => {
     <>
       <path
         fill="currentColor"
-        d="M9.125 14.167H5.833c-1.153 0-2.135-.406-2.948-1.219-.812-.813-1.218-1.795-1.218-2.948s.406-2.135 1.218-2.948c.813-.813 1.795-1.219 2.948-1.219h3.292v1.75H5.833c-.694 0-1.27.23-1.729.688-.458.458-.687 1.034-.687 1.729 0 .695.229 1.271.687 1.729.459.459 1.035.688 1.729.688h3.292zm-2.458-3.292v-1.75h6.666v1.75zm4.208 3.292v-1.75h3.292c.694 0 1.27-.23 1.729-.688.458-.458.687-1.034.687-1.729 0-.695-.229-1.271-.687-1.729-.459-.459-1.035-.688-1.729-.688h-3.292v-1.75h3.292c1.153 0 2.135.406 2.948 1.219.812.813 1.218 1.795 1.218 2.948s-.406 2.135-1.218 2.948c-.813.813-1.795 1.219-2.948 1.219z"
+        d="M9.125 14.167H5.833q-1.729 0-2.948-1.219T1.667 10t1.218-2.948q1.219-1.22 2.948-1.219h3.292v1.75H5.833q-1.04 0-1.729.688-.687.687-.687 1.729t.687 1.729q.688.688 1.729.688h3.292zm-2.458-3.292v-1.75h6.666v1.75zm4.208 3.292v-1.75h3.292q1.04 0 1.729-.688.687-.687.687-1.729t-.687-1.729q-.688-.688-1.729-.688h-3.292v-1.75h3.292q1.729 0 2.948 1.219T18.333 10t-1.218 2.948q-1.219 1.22-2.948 1.219z"
       />
     </>
   )

package/src/Icon/ArchivedIcon.tsx

@@ -12,7 +12,7 @@ export const ArchivedIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M12.307 2.636A2.463 2.463 0 0 0 10 1a2.463 2.463 0 0 0-2.307 1.636h-3.06c-.9 0-1.636.737-1.636 1.637v13.09c0 .9.736 1.637 1.636 1.637h10.73c.9 0 1.636-.736 1.636-1.636V4.273c0-.9-.736-1.637-1.636-1.637zm-1.489.819a.82.82 0 0 1-.818.818.82.82 0 0 1-.818-.818.82.82 0 0 1 .818-.819.82.82 0 0 1 .818.819M10 14.909l-4.09-4.09h2.454V7.544h3.272v3.273h2.455z"
+          d="M12.307 2.636A2.46 2.46 0 0 0 10 1a2.46 2.46 0 0 0-2.307 1.636h-3.06c-.9 0-1.636.737-1.636 1.637v13.09c0 .9.736 1.637 1.636 1.637h10.73c.9 0 1.636-.736 1.636-1.636V4.273c0-.9-.736-1.637-1.636-1.637zm-1.489.819a.82.82 0 0 1-.818.818.82.82 0 0 1-.818-.818.82.82 0 0 1 .818-.819.82.82 0 0 1 .818.819M10 14.909l-4.09-4.09h2.454V7.544h3.272v3.273h2.455z"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/ArchivedWhiteIcon.tsx

@@ -12,7 +12,7 @@ export const ArchivedWhiteIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M12.307 2.636A2.463 2.463 0 0 0 10 1a2.463 2.463 0 0 0-2.307 1.636h-3.06c-.9 0-1.636.737-1.636 1.637v13.09c0 .9.736 1.637 1.636 1.637h10.73c.9 0 1.636-.736 1.636-1.636V4.273c0-.9-.736-1.637-1.636-1.637zm-1.489.819a.82.82 0 0 1-.818.818.82.82 0 0 1-.818-.818.82.82 0 0 1 .818-.819.82.82 0 0 1 .818.819"
+          d="M12.307 2.636A2.46 2.46 0 0 0 10 1a2.46 2.46 0 0 0-2.307 1.636h-3.06c-.9 0-1.636.737-1.636 1.637v13.09c0 .9.736 1.637 1.636 1.637h10.73c.9 0 1.636-.736 1.636-1.636V4.273c0-.9-.736-1.637-1.636-1.637zm-1.489.819a.82.82 0 0 1-.818.818.82.82 0 0 1-.818-.818.82.82 0 0 1 .818-.819.82.82 0 0 1 .818.819"
         />
       </defs>
       <g fill="none" fillRule="evenodd">

package/src/Icon/AssignmentIcon.tsx

@@ -0,0 +1,18 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from "react"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
+
+export const AssignmentIcon = (props: IconProps): JSX.Element => {
+  const svgContent = (
+    <>
+      <path
+        fill="currentColor"
+        d="M9 4a.486.486 0 0 0 .5-.5A.486.486 0 0 0 9 3a.486.486 0 0 0-.5.5.486.486 0 0 0 .5.5m4.995 15q-1.662 0-2.828-1.172Q10 16.658 10 14.995q0-1.662 1.172-2.828Q12.342 11 14.005 11q1.662 0 2.828 1.172Q18 13.342 18 15.005q0 1.662-1.172 2.828Q15.658 19 13.995 19m-.495-2h1v-1.5H16v-1h-1.5V13h-1v1.5H12v1h1.5zM5 7.5h8V6H5zM8.854 17H3.5q-.62 0-1.06-.44A1.45 1.45 0 0 1 2 15.5v-11q0-.618.44-1.06Q2.883 3 3.5 3h3.563a1.98 1.98 0 0 1 .697-1.073A1.92 1.92 0 0 1 9 1.5q.708 0 1.24.427.53.427.697 1.073H14.5q.619 0 1.06.44.44.442.44 1.06v5.375a6.4 6.4 0 0 0-.997-.25 6.1 6.1 0 0 0-2.003 0V9.25H5v1.5h5.542q-.459.354-.834.792-.375.436-.646.958H5V14h3.542a6 6 0 0 0-.063.5 3 3 0 0 0 0 .5q.02.48.115 1.01.094.532.26.99"
+      />
+    </>
+  )
+  return <SVG {...props}>{svgContent}</SVG>
+}

package/src/Icon/BlankIcon.tsx

@@ -12,7 +12,7 @@ export const BlankIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M12.303 2.636A2.446 2.446 0 0 0 10 1a2.446 2.446 0 0 0-2.303 1.636H4.635c-.904 0-1.637.733-1.637 1.637v13.09c0 .905.733 1.637 1.637 1.637H15.36c.904 0 1.636-.732 1.636-1.636V4.273c0-.904-.732-1.637-1.636-1.637zm-1.485.819a.818.818 0 1 1-1.636 0 .818.818 0 0 1 1.636 0"
+          d="M12.303 2.636A2.45 2.45 0 0 0 10 1a2.45 2.45 0 0 0-2.303 1.636H4.635c-.904 0-1.637.733-1.637 1.637v13.09c0 .905.733 1.637 1.637 1.637H15.36c.904 0 1.636-.732 1.636-1.636V4.273c0-.904-.732-1.637-1.636-1.637zm-1.485.819a.818.818 0 1 1-1.636 0 .818.818 0 0 1 1.636 0"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/BoldIcon.tsx

@@ -10,7 +10,7 @@ export const BoldIcon = (props: IconProps): JSX.Element => {
     <>
       <path
         fill="currentColor"
-        d="M6 16V4h4.786c1.009 0 1.89.282 2.644.846.754.565 1.13 1.326 1.13 2.283 0 .686-.164 1.232-.492 1.64-.33.406-.714.717-1.153.931v.172c.643.214 1.152.55 1.526 1.007.372.457.559 1.05.559 1.778 0 1.071-.402 1.896-1.207 2.475-.805.579-1.764.868-2.876.868zm2.415-7.157h2.174c.467 0 .859-.132 1.173-.397.315-.264.472-.589.472-.975 0-.37-.157-.692-.472-.963-.314-.272-.706-.408-1.174-.408H8.416zm0 5.015h2.348c.572 0 1.018-.14 1.34-.42.321-.277.482-.638.482-1.081 0-.443-.16-.804-.482-1.082-.322-.279-.768-.418-1.34-.418H8.415z"
+        d="M6 16V4h4.786q1.513 0 2.644.846 1.13.848 1.13 2.283 0 1.028-.492 1.64-.495.61-1.153.931v.172q.965.321 1.526 1.007.559.686.559 1.778 0 1.607-1.207 2.475T10.917 16zm2.415-7.157h2.174q.701 0 1.173-.397.472-.396.472-.975 0-.556-.472-.963-.472-.408-1.174-.408H8.416zm0 5.015h2.348q.857 0 1.34-.42.482-.416.482-1.081t-.482-1.082q-.482-.418-1.34-.418H8.415z"
       />
     </>
   )

package/src/Icon/BullettedListIcon.tsx

@@ -10,7 +10,7 @@ export const BullettedListIcon = (props: IconProps): JSX.Element => {
     <>
       <path
         fill="currentColor"
-        d="M3.812 11.292c-.36 0-.666-.125-.916-.375A1.247 1.247 0 0 1 2.521 10c0-.361.125-.667.375-.917s.555-.375.916-.375.667.125.917.375.375.556.375.917-.125.667-.375.917-.556.375-.917.375m0-4.98c-.36 0-.666-.125-.916-.374a1.25 1.25 0 0 1-.375-.917c0-.361.125-.667.375-.917s.555-.375.916-.375.667.125.917.375.375.556.375.917c0 .36-.125.666-.375.917-.25.25-.556.374-.917.374m0 9.938c-.36 0-.666-.125-.916-.375a1.247 1.247 0 0 1-.375-.917c0-.36.125-.666.375-.916s.555-.375.916-.375.667.125.917.375.375.555.375.916-.125.667-.375.917-.556.375-.917.375m2.834-.417v-1.75H17.5v1.75zm0-4.958v-1.75H17.5v1.75zm0-4.979v-1.75H17.5v1.75z"
+        d="M3.812 11.292q-.54 0-.916-.375A1.25 1.25 0 0 1 2.521 10q0-.542.375-.917t.916-.375q.542 0 .917.375t.375.917-.375.917-.917.375m0-4.98q-.54 0-.916-.374a1.25 1.25 0 0 1-.375-.917q0-.542.375-.917t.916-.375q.542 0 .917.375t.375.917q0 .54-.375.917-.375.375-.917.374m0 9.938q-.54 0-.916-.375a1.25 1.25 0 0 1-.375-.917q0-.54.375-.916.375-.375.916-.375.542 0 .917.375t.375.916-.375.917-.917.375m2.834-.417v-1.75H17.5v1.75zm0-4.958v-1.75H17.5v1.75zm0-4.979v-1.75H17.5v1.75z"
       />
     </>
   )

package/src/Icon/CaMonogramIcon.tsx

@@ -12,7 +12,7 @@ export const CaMonogramIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M17.673 9.041c-.133.049-.217.368-.197.629.064.855.136 1.824-.485 3.303-.295.704-.828 1.438-1.538 2.122-.895.861-1.646 1.055-1.839 1.055-.066 0-.107-.021-.12-.064-.005-.014-.015-.062.041-.102l.159-.116c.379-.272.481-.345.89-.702.649-.566 1.576-1.928 1.725-2.368.18-.533.338-1.339.28-1.935-.036-.377-.115-.495-.132-.505-.065.01-.205.205-.29.532-.076.288-.177.63-.276.957-.277.917-.556 1.253-.825 1.579-.055.067-.11.134-.166.205-.48.622-1.095.957-1.24.957-.065 0-.085-.043-.09-.056-.022-.06.025-.118.103-.184.197-.167.861-.795 1.158-1.855.05-.18.001-.367-.03-.383 0 0-.065.015-.163.258-.208.513-.242.564-.57 1.045-.406.594-1.142 1.192-1.491 1.36a4.037 4.037 0 0 1-1.764.396c-.372 0-.763-.048-1.161-.141-.886-.209-1.935-1.087-2.001-1.158-.288-.312-.58-.647-.768-.98-.49-.874-.7-1.72-.623-2.513.079-.82.24-1.458.794-2.109.55-.643 1.037-1.074 1.902-1.379a4.712 4.712 0 0 1 1.523-.236c.77 0 1.458.164 1.892.448.754.495 1.024.752 1.693 1.422.303.305.772.487 1.252.487a1.99 1.99 0 0 0 1.026-.289c.646-.383 1.016-.878 1.099-1.473.179-1.282-.998-2.542-1.01-2.555-.28-.296-.549-.55-.809-.774-.002-.316-.357-.561-.357-.561-1.96-1.406-3.797-1.383-4.546-1.348-.89.041-1.725.137-2.552.369-2.08.477-3.73 1.652-4.915 3.497-.836.988-1.146 2.5-1.239 3.736-.102 1.335.417 3.336.701 3.604.266.25.5.284.53.288.163.345.335.704.407.807l.162.235c.335.49.681.995 1.144 1.396.763.663 1.448 1.029 2.373 1.435.917.403 1.623.573 2.517.606.316.012.534.017.73.017.713 0 1.227-.072 1.963-.278a8.865 8.865 0 0 0 2.268-1.006c.289-.184 1.178-.987 1.487-1.343.318-.367.899-1.22 1.195-2.073.66-1.894.524-2.93.433-3.623-.056-.439-.166-.636-.25-.636"
+          d="M17.673 9.041c-.133.049-.217.368-.197.629.064.855.136 1.824-.485 3.303-.295.704-.828 1.438-1.538 2.122-.895.861-1.646 1.055-1.839 1.055q-.1 0-.12-.064c-.005-.014-.015-.062.041-.102l.159-.116c.379-.272.481-.345.89-.702.649-.566 1.576-1.928 1.725-2.368.18-.533.338-1.339.28-1.935-.036-.377-.115-.495-.132-.505-.065.01-.205.205-.29.532-.076.288-.177.63-.276.957-.277.917-.556 1.253-.825 1.579q-.082.1-.166.205c-.48.622-1.095.957-1.24.957-.065 0-.085-.043-.09-.056-.022-.06.025-.118.103-.184.197-.167.861-.795 1.158-1.855.05-.18.001-.367-.03-.383 0 0-.065.015-.163.258-.208.513-.242.564-.57 1.045-.406.594-1.142 1.192-1.491 1.36a4 4 0 0 1-1.764.396c-.372 0-.763-.048-1.161-.141-.886-.209-1.935-1.087-2.001-1.158-.288-.312-.58-.647-.768-.98-.49-.874-.7-1.72-.623-2.513.079-.82.24-1.458.794-2.109.55-.643 1.037-1.074 1.902-1.379a4.7 4.7 0 0 1 1.523-.236c.77 0 1.458.164 1.892.448.754.495 1.024.752 1.693 1.422.303.305.772.487 1.252.487a2 2 0 0 0 1.026-.289c.646-.383 1.016-.878 1.099-1.473.179-1.282-.998-2.542-1.01-2.555-.28-.296-.549-.55-.809-.774-.002-.316-.357-.561-.357-.561-1.96-1.406-3.797-1.383-4.546-1.348-.89.041-1.725.137-2.552.369-2.08.477-3.73 1.652-4.915 3.497-.836.988-1.146 2.5-1.239 3.736-.102 1.335.417 3.336.701 3.604.266.25.5.284.53.288.163.345.335.704.407.807l.162.235c.335.49.681.995 1.144 1.396.763.663 1.448 1.029 2.373 1.435.917.403 1.623.573 2.517.606.316.012.534.017.73.017.713 0 1.227-.072 1.963-.278a8.9 8.9 0 0 0 2.268-1.006c.289-.184 1.178-.987 1.487-1.343.318-.367.899-1.22 1.195-2.073.66-1.894.524-2.93.433-3.623-.056-.439-.166-.636-.25-.636"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/CameraIcon.tsx

@@ -12,7 +12,7 @@ export const CameraIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M2.25 2.25V0h1.5v2.25H6v1.5H3.75V6h-1.5V3.75H0v-1.5zm2.25 4.5V4.5h2.25V2.25H12l1.373 1.5h2.377c.825 0 1.5.675 1.5 1.5v9c0 .825-.675 1.5-1.5 1.5h-12c-.825 0-1.5-.675-1.5-1.5v-7.5zm5.25 6.75c2.07 0 3.75-1.68 3.75-3.75C13.5 7.68 11.82 6 9.75 6 7.68 6 6 7.68 6 9.75c0 2.07 1.68 3.75 3.75 3.75m-2.4-3.75c0 1.328 1.072 2.4 2.4 2.4 1.328 0 2.4-1.072 2.4-2.4 0-1.328-1.072-2.4-2.4-2.4a2.397 2.397 0 0 0-2.4 2.4"
+          d="M2.25 2.25V0h1.5v2.25H6v1.5H3.75V6h-1.5V3.75H0v-1.5zm2.25 4.5V4.5h2.25V2.25H12l1.373 1.5h2.377c.825 0 1.5.675 1.5 1.5v9c0 .825-.675 1.5-1.5 1.5h-12c-.825 0-1.5-.675-1.5-1.5v-7.5zm5.25 6.75c2.07 0 3.75-1.68 3.75-3.75S11.82 6 9.75 6 6 7.68 6 9.75s1.68 3.75 3.75 3.75m-2.4-3.75c0 1.328 1.072 2.4 2.4 2.4s2.4-1.072 2.4-2.4-1.072-2.4-2.4-2.4a2.397 2.397 0 0 0-2.4 2.4"
         />
       </defs>
       <use

package/src/Icon/ClearIcon.tsx

@@ -12,7 +12,7 @@ export const ClearIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M10 2c-4.424 0-8 3.576-8 8 0 4.424 3.576 8 8 8 4.424 0 8-3.576 8-8 0-4.424-3.576-8-8-8m4 10.872L12.872 14 10 11.128 7.128 14 6 12.872 8.872 10 6 7.128 7.128 6 10 8.872 12.872 6 14 7.128 11.128 10z"
+          d="M10 2c-4.424 0-8 3.576-8 8s3.576 8 8 8 8-3.576 8-8-3.576-8-8-8m4 10.872L12.872 14 10 11.128 7.128 14 6 12.872 8.872 10 6 7.128 7.128 6 10 8.872 12.872 6 14 7.128 11.128 10z"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/ClearWhiteIcon.tsx

@@ -12,7 +12,7 @@ export const ClearWhiteIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M10 2c-4.424 0-8 3.576-8 8 0 4.424 3.576 8 8 8 4.424 0 8-3.576 8-8 0-4.424-3.576-8-8-8"
+          d="M10 2c-4.424 0-8 3.576-8 8s3.576 8 8 8 8-3.576 8-8-3.576-8-8-8"
         />
       </defs>
       <g fill="none" fillRule="evenodd">

package/src/Icon/ClosedIcon.tsx

@@ -12,7 +12,7 @@ export const ClosedIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M12.307 2.636A2.464 2.464 0 0 0 10 1a2.464 2.464 0 0 0-2.308 1.636H4.636c-.9 0-1.637.737-1.637 1.637v13.09c0 .9.737 1.637 1.637 1.637H15.36c.9 0 1.637-.736 1.637-1.636V4.273c0-.9-.738-1.637-1.637-1.637zm-1.489.819c0 .45-.369.818-.818.818a.82.82 0 0 1-.818-.818.82.82 0 0 1 .818-.819c.45 0 .818.369.818.819m-5.727 8.181 1.154-1.153 2.119 2.11 5.391-5.391 1.154 1.162-6.545 6.545z"
+          d="M12.307 2.636A2.46 2.46 0 0 0 10 1a2.46 2.46 0 0 0-2.308 1.636H4.636c-.9 0-1.637.737-1.637 1.637v13.09c0 .9.737 1.637 1.637 1.637H15.36c.9 0 1.637-.736 1.637-1.636V4.273c0-.9-.738-1.637-1.637-1.637zm-1.489.819c0 .45-.369.818-.818.818a.82.82 0 0 1-.818-.818.82.82 0 0 1 .818-.819c.45 0 .818.369.818.819m-5.727 8.181 1.154-1.153 2.119 2.11 5.391-5.391 1.154 1.162-6.545 6.545z"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/ClosedWhiteIcon.tsx

@@ -12,7 +12,7 @@ export const ClosedWhiteIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M12.307 2.636A2.464 2.464 0 0 0 10 1a2.464 2.464 0 0 0-2.308 1.636H4.636c-.9 0-1.637.737-1.637 1.637v13.09c0 .9.737 1.637 1.637 1.637H15.36c.9 0 1.637-.736 1.637-1.636V4.273c0-.9-.738-1.637-1.637-1.637zm-1.489.819c0 .45-.369.818-.818.818a.82.82 0 0 1-.818-.818.82.82 0 0 1 .818-.819c.45 0 .818.369.818.819"
+          d="M12.307 2.636A2.46 2.46 0 0 0 10 1a2.46 2.46 0 0 0-2.308 1.636H4.636c-.9 0-1.637.737-1.637 1.637v13.09c0 .9.737 1.637 1.637 1.637H15.36c.9 0 1.637-.736 1.637-1.636V4.273c0-.9-.738-1.637-1.637-1.637zm-1.489.819c0 .45-.369.818-.818.818a.82.82 0 0 1-.818-.818.82.82 0 0 1 .818-.819c.45 0 .818.369.818.819"
         />
       </defs>
       <g fill="none" fillRule="evenodd">

package/src/Icon/CommentBankIcon.tsx

@@ -12,7 +12,7 @@ export const CommentBankIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M.667 17.333V1.917c0-.32.125-.608.375-.865s.541-.385.875-.385h14.166c.32 0 .608.128.865.385s.385.545.385.865V12.75c0 .32-.128.608-.385.865-.257.256-.545.385-.865.385H4zm9.229-9.729 2.02-1.042 2 1.042V1.917h-4.02z"
+          d="M.667 17.333V1.917q0-.48.375-.865.374-.385.875-.385h14.166q.48 0 .865.385t.385.865V12.75q0 .48-.385.865-.385.384-.865.385H4zm9.229-9.729 2.02-1.042 2 1.042V1.917h-4.02z"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/CompetencyLibraryIcon.tsx

@@ -10,11 +10,11 @@ export const CompetencyLibraryIcon = (props: IconProps): JSX.Element => {
     <>
       <path
         fill="currentColor"
-        d="M7.094 11.18a2.507 2.507 0 0 1-1.826-.745 2.433 2.433 0 0 1-.756-1.798c0-.703.252-1.303.756-1.799a2.507 2.507 0 0 1 1.826-.745c.713 0 1.322.249 1.826.745s.756 1.096.756 1.799c0 .702-.252 1.302-.756 1.798a2.507 2.507 0 0 1-1.826.745"
+        d="M7.094 11.18a2.5 2.5 0 0 1-1.826-.745 2.43 2.43 0 0 1-.756-1.798q0-1.055.756-1.799a2.5 2.5 0 0 1 1.826-.745q1.07 0 1.826.745.756.744.756 1.799 0 1.053-.756 1.798a2.5 2.5 0 0 1-1.826.745"
       />
       <path
         fill="currentColor"
-        d="M2.186 17c-.604 0-1.12-.21-1.546-.63A2.06 2.06 0 0 1 0 14.846v-9.67c0-.595.213-1.107.64-1.534A2.104 2.104 0 0 1 2.186 3h9.604c.605 0 1.125.214 1.559.642.434.427.651.939.651 1.535v9.67c0 .595-.217 1.103-.651 1.523-.434.42-.954.63-1.559.63zM2 14.401C3.27 12.92 5.041 12 7 12s3.73.92 5 2.401V5H2z"
+        d="M2.186 17q-.906 0-1.546-.63A2.06 2.06 0 0 1 0 14.846v-9.67q0-.893.64-1.534A2.1 2.1 0 0 1 2.186 3h9.604q.908 0 1.559.642.651.64.651 1.535v9.67q0 .893-.651 1.523T11.79 17zM2 14.401C3.27 12.92 5.041 12 7 12s3.73.92 5 2.401V5H2z"
         fillRule="evenodd"
         clipRule="evenodd"
       />

package/src/Icon/ConnectLineIcon.tsx

@@ -8,7 +8,7 @@ import type { IconProps } from "~components/Icon/types"
 export const ConnectLineIcon = (props: IconProps): JSX.Element => {
   const svgContent = (
     <>
-      <path d="M9.05 17.5h1.9v-2.05l3.55-3.9V6.775h-9v4.775l3.55 3.893zM7.55 19v-2.95L4 12.15V6.775c0-.413.147-.766.44-1.06.294-.293.648-.44 1.06-.44h1.8l-.75.75V1h1.5v4.275h3.9V1h1.5v5.025l-.75-.75h1.8c.412 0 .766.147 1.06.44.293.294.44.648.44 1.06v5.375l-3.55 3.9V19z" />
+      <path d="M9.05 17.5h1.9v-2.05l3.55-3.9V6.775h-9v4.775l3.55 3.893zM7.55 19v-2.95L4 12.15V6.775q0-.62.44-1.06.442-.44 1.06-.44h1.8l-.75.75V1h1.5v4.275h3.9V1h1.5v5.025l-.75-.75h1.8q.619 0 1.06.44.44.441.44 1.06v5.375l-3.55 3.9V19z" />
     </>
   )
   return <SVG {...props}>{svgContent}</SVG>

package/src/Icon/DateEndIcon.tsx

@@ -12,7 +12,7 @@ export const DateEndIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M13.557 1.111h1.778V2.89h.889c.982 0 1.778.796 1.778 1.778v12.446c0 .982-.796 1.778-1.778 1.778H3.778A1.778 1.778 0 0 1 2 17.113l.009-12.446A1.77 1.77 0 0 1 3.778 2.89h.889V1.111h1.778V2.89h7.112zm2.667 16.002V7.334H3.778v9.78zm-1.778-6.223h-4.445v4.445h4.445z"
+          d="M13.557 1.111h1.778V2.89h.889c.982 0 1.778.796 1.778 1.778v12.446c0 .982-.796 1.778-1.778 1.778H3.778A1.78 1.78 0 0 1 2 17.113l.009-12.446A1.77 1.77 0 0 1 3.778 2.89h.889V1.111h1.778V2.89h7.112zm2.667 16.002V7.334H3.778v9.78zm-1.778-6.223h-4.445v4.445h4.445z"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

package/src/Icon/DepartmentIcon.tsx

@@ -10,7 +10,7 @@ export const DepartmentIcon = (props: IconProps): JSX.Element => {
     <>
       <path
         fill="currentColor"
-        d="M10 8.4c1.902 0 3.203.372 3.547.525A3.482 3.482 0 0 1 15.6 12.11V14H4.4v-1.878c0-1.377.793-2.637 2.053-3.185.25-.11 1.645-.537 3.547-.537m6.533-.233a2.34 2.34 0 0 0 2.334-2.334A2.34 2.34 0 0 0 16.533 3.5 2.34 2.34 0 0 0 14.2 5.833a2.34 2.34 0 0 0 2.333 2.334m3.267 4.001c0-.945-.7-1.668-1.423-2.158-.885-.56-1.43-.612-1.844-.677-.45-.07-.886.047-1.318.117.467.793.849 1.692.849 2.66v1.878L19.8 14zM10 0c1.937 0 3.5 1.563 3.5 3.5S11.937 7 10 7a3.495 3.495 0 0 1-3.5-3.5C6.5 1.563 8.063 0 10 0M1.133 5.833a2.34 2.34 0 0 0 2.334 2.334A2.34 2.34 0 0 0 5.8 5.833 2.34 2.34 0 0 0 3.467 3.5a2.34 2.34 0 0 0-2.334 2.333"
+        d="M10 8.4c1.902 0 3.203.372 3.547.525A3.48 3.48 0 0 1 15.6 12.11V14H4.4v-1.878c0-1.377.793-2.637 2.053-3.185.25-.11 1.645-.537 3.547-.537m6.533-.233a2.34 2.34 0 0 0 2.334-2.334A2.34 2.34 0 0 0 16.533 3.5 2.34 2.34 0 0 0 14.2 5.833a2.34 2.34 0 0 0 2.333 2.334m3.267 4.001c0-.945-.7-1.668-1.423-2.158-.885-.56-1.43-.612-1.844-.677-.45-.07-.886.047-1.318.117.467.793.849 1.692.849 2.66v1.878L19.8 14zM10 0c1.937 0 3.5 1.563 3.5 3.5S11.937 7 10 7a3.495 3.495 0 0 1-3.5-3.5C6.5 1.563 8.063 0 10 0M1.133 5.833a2.34 2.34 0 0 0 2.334 2.334A2.34 2.34 0 0 0 5.8 5.833 2.34 2.34 0 0 0 3.467 3.5a2.34 2.34 0 0 0-2.334 2.333"
       />
       <path
         fill="currentColor"

package/src/Icon/DraftIcon.tsx

@@ -12,7 +12,7 @@ export const DraftIcon = (props: IconProps): JSX.Element => {
       <defs>
         <path
           id={uniqueId}
-          d="M15.376 2.636c.9 0 1.637.737 1.637 1.637v13.09c0 .9-.737 1.637-1.637 1.637H4.631c-.9 0-1.636-.736-1.636-1.636V4.273c0-.9.736-1.637 1.636-1.637h3.062A2.463 2.463 0 0 1 10 1c1.064 0 1.964.687 2.307 1.636zM11.15 8.801l-4.813 4.442v1.666h1.805l4.813-4.443zm2.105-1.314a.511.511 0 0 0-.682 0l-.942.87 1.806 1.665.941-.869a.421.421 0 0 0 0-.628zm-2.437-4.032A.82.82 0 0 0 10 2.636a.82.82 0 0 0-.818.819c0 .45.368.818.818.818a.82.82 0 0 0 .818-.818"
+          d="M15.376 2.636c.9 0 1.637.737 1.637 1.637v13.09c0 .9-.737 1.637-1.637 1.637H4.631c-.9 0-1.636-.736-1.636-1.636V4.273c0-.9.736-1.637 1.636-1.637h3.062A2.46 2.46 0 0 1 10 1c1.064 0 1.964.687 2.307 1.636zM11.15 8.801l-4.813 4.442v1.666h1.805l4.813-4.443zm2.105-1.314a.51.51 0 0 0-.682 0l-.942.87 1.806 1.665.941-.869a.42.42 0 0 0 0-.628zm-2.437-4.032A.82.82 0 0 0 10 2.636a.82.82 0 0 0-.818.819c0 .45.368.818.818.818a.82.82 0 0 0 .818-.818"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />