@kaizen/components 1.68.7 → 1.68.9

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx

@@ -1,6 +1,6 @@
-import { Controls, Meta, Canvas } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
-import * as FilterMultiSelectStories from "./FilterMultiSelect.stories"
+import { Controls, Meta, Canvas } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components'
+import * as FilterMultiSelectStories from './FilterMultiSelect.stories'
 
 <Meta of={FilterMultiSelectStories} />
 
@@ -35,42 +35,63 @@ The FilterMultiSelect is a component relies heavily on consumer implemntation. I
 The following is an example of how you may create an async FilterMultiSelect using `@tanstack/react-query`.
 
 ```tsx
-import { QueryClientProvider, QueryClient, useInfiniteQuery, useQueryClient, keepPreviousData } from "@tanstack/react-query"
+import {
+  QueryClientProvider,
+  QueryClient,
+  useInfiniteQuery,
+  useQueryClient,
+  keepPreviousData,
+} from '@tanstack/react-query'
 
 const AsyncExample = () => {
   const client = new QueryClient()
   const [open, setOpen] = useState(false)
   const [selectedPeople, setSelectedPeople] = useState<string[]>([])
-  const [searchState, setSearchState] = useState("")
+  const [searchState, setSearchState] = useState('')
   const queryClient = useQueryClient()
 
-  const fetchSWAPI = async ({ pageParam }): Promise<{ results: Array<{ name: string; url: string }>; next: string }> => {
+  const fetchSWAPI = async ({
+    pageParam,
+  }): Promise<{ results: Array<{ name: string; url: string }>; next: string }> => {
     const res = await fetch(`https://swapi.dev/api/people/?page=${pageParam}&search=${searchState}`)
     return res.json()
   }
 
-  const { data, isLoading, fetchNextPage, isFetchingNextPage, hasNextPage, isRefetching } = useInfiniteQuery({
-    enabled: true,
-    initialPageParam: "1",
-    queryKey: ["startrek-sg1", searchState],
-    queryFn: fetchSWAPI,
-    placeholderData: keepPreviousData,
-    getNextPageParam: lastPage => {
-      if (!lastPage.next) return undefined
-      const url = new URL(lastPage.next)
-      const params = new URLSearchParams(url.searchParams)
-      return params.get("page")
-    },
-  })
-
-  const cachedPeople = queryClient.getQueriesData({ queryKey: ["startrek-sg1"] }).flatMap(([, cachedData]) => cachedData?.pages ?? []).flatMap(page => page.results).map(item => ({ label: item.name, value: item.url }))
-  const currentPeople = React.useMemo(() => data?.pages.flatMap(res => res.results).flatMap(person => ({ label: person.name, value: person.url })) || [], [data])
+  const { data, isLoading, fetchNextPage, isFetchingNextPage, hasNextPage, isRefetching } =
+    useInfiniteQuery({
+      enabled: true,
+      initialPageParam: '1',
+      queryKey: ['startrek-sg1', searchState],
+      queryFn: fetchSWAPI,
+      placeholderData: keepPreviousData,
+      getNextPageParam: (lastPage) => {
+        if (!lastPage.next) return undefined
+        const url = new URL(lastPage.next)
+        const params = new URLSearchParams(url.searchParams)
+        return params.get('page')
+      },
+    })
+
+  const cachedPeople = queryClient
+    .getQueriesData({ queryKey: ['startrek-sg1'] })
+    .flatMap(([, cachedData]) => cachedData?.pages ?? [])
+    .flatMap((page) => page.results)
+    .map((item) => ({ label: item.name, value: item.url }))
+  const currentPeople = React.useMemo(
+    () =>
+      data?.pages
+        .flatMap((res) => res.results)
+        .flatMap((person) => ({ label: person.name, value: person.url })) || [],
+    [data],
+  )
 
   // Expose the selected items and float them to the top
-  const mergedPeople = [...currentPeople, ...cachedPeople].filter((item, index, a) => a.findIndex(currItem => currItem.value === item.value) === index)
+  const mergedPeople = [...currentPeople, ...cachedPeople].filter(
+    (item, index, a) => a.findIndex((currItem) => currItem.value === item.value) === index,
+  )
 
   // Only show the current filtered people when there is a search query
-  const items = searchState !== "" ? currentPeople : Array.from(mergedPeople)
+  const items = searchState !== '' ? currentPeople : Array.from(mergedPeople)
   const filteredCount = currentPeople.length
   const totalCount = cachedPeople.length
 
@@ -81,11 +102,16 @@ const AsyncExample = () => {
         isLoading={isLoading}
         loadingSkeleton={<FilterMultiSelect.MenuLoadingSkeleton />}
         items={items}
-        trigger={() => <FilterMultiSelect.TriggerButton label="People" selectedOptionLabels={getSelectedOptionLabels(new Set(selectedPeople), cachedPeople)} />}
+        trigger={() => (
+          <FilterMultiSelect.TriggerButton
+            label="People"
+            selectedOptionLabels={getSelectedOptionLabels(new Set(selectedPeople), cachedPeople)}
+          />
+        )}
         onSearchInputChange={setSearchState}
         onOpenChange={setOpen}
         onSelectionChange={(keys): void => {
-          if (keys === "all") return
+          if (keys === 'all') return
           setSelectedPeople(Array.from(keys) as string[])
         }}
         isOpen={open}
@@ -93,24 +119,49 @@ const AsyncExample = () => {
       >
         {(): JSX.Element => (
           <>
-            <FilterMultiSelect.SearchInput isLoading={isRefetching && searchState !== ""} />
+            <FilterMultiSelect.SearchInput isLoading={isRefetching && searchState !== ''} />
             <FilterMultiSelect.ListBox>
               {({ selectedItems, unselectedItems, hasNoItems }) => (
                 <>
-                  {hasNoItems
-                    ? <FilterMultiSelect.NoResults>No results found for {searchState}.</FilterMultiSelect.NoResults>
-                    : searchState !== ""
-                      ? <Text variant="extra-small" tag="span" color="dark-reduced-opacity">Showing {filteredCount} of {totalCount}</Text>
-                      : hasNextPage && <Text variant="extra-small" tag="span" color="dark-reduced-opacity">There are a lot of options. Narrow them further by searching for a more precise term.</Text>
-                  }
-                  <FilterMultiSelect.ListBoxSection items={selectedItems} sectionName="Selected items">
-                    {item => <FilterMultiSelect.Option key={item.key} item={item} />}
+                  {hasNoItems ? (
+                    <FilterMultiSelect.NoResults>
+                      No results found for {searchState}.
+                    </FilterMultiSelect.NoResults>
+                  ) : searchState !== '' ? (
+                    <Text variant="extra-small" tag="span" color="dark-reduced-opacity">
+                      Showing {filteredCount} of {totalCount}
+                    </Text>
+                  ) : (
+                    hasNextPage && (
+                      <Text variant="extra-small" tag="span" color="dark-reduced-opacity">
+                        There are a lot of options. Narrow them further by searching for a more
+                        precise term.
+                      </Text>
+                    )
+                  )}
+                  <FilterMultiSelect.ListBoxSection
+                    items={selectedItems}
+                    sectionName="Selected items"
+                  >
+                    {(item) => <FilterMultiSelect.Option key={item.key} item={item} />}
                   </FilterMultiSelect.ListBoxSection>
-                  {unselectedItems.length > 0 && selectedItems.length > 0 && <FilterMultiSelect.SectionDivider />}
-                  <FilterMultiSelect.ListBoxSection items={unselectedItems} sectionName="Unselected items">
-                    {item => <FilterMultiSelect.Option key={item.key} item={item} />}
+                  {unselectedItems.length > 0 && selectedItems.length > 0 && (
+                    <FilterMultiSelect.SectionDivider />
+                  )}
+                  <FilterMultiSelect.ListBoxSection
+                    items={unselectedItems}
+                    sectionName="Unselected items"
+                  >
+                    {(item) => <FilterMultiSelect.Option key={item.key} item={item} />}
                   </FilterMultiSelect.ListBoxSection>
-                  {hasNextPage && <FilterMultiSelect.LoadMoreButton label="View more" workingLabel="Loading…" working={isFetchingNextPage} onClick={fetchNextPage} />}
+                  {hasNextPage && (
+                    <FilterMultiSelect.LoadMoreButton
+                      label="View more"
+                      workingLabel="Loading…"
+                      working={isFetchingNextPage}
+                      onClick={fetchNextPage}
+                    />
+                  )}
                 </>
               )}
             </FilterMultiSelect.ListBox>

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.spec.tsx

@@ -19,6 +19,7 @@ vi.mock('../../context', () => ({
 }))
 
 const itemMock: MultiSelectOptionProps['item'] & { value: ItemType } = {
+  index: 0,
   type: 'type-mock',
   key: 'key-mock',
   value: { label: 'label-mock', value: 'value-mock' },

package/src/Filter/FilterSelect/_docs/FilterSelect.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, Description, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
-import * as FilterSelectStickerSheet from "./FilterSelect.stickersheet.stories"
-import * as FilterSelectStories from "./FilterSelect.stories"
+import { Canvas, Controls, Description, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components'
+import * as FilterSelectStickerSheet from './FilterSelect.stickersheet.stories'
+import * as FilterSelectStories from './FilterSelect.stories'
 
 <Meta of={FilterSelectStories} />
 

package/src/GuidanceBlock/_docs/GuidanceBlock.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as GuidanceBlockStories from "./GuidanceBlock.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as GuidanceBlockStories from './GuidanceBlock.stories'
 
 <Meta of={GuidanceBlockStories} />
 

package/src/Heading/_docs/Heading.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as HeadingStories from "./Heading.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as HeadingStories from './Heading.stories'
 
 <Meta of={HeadingStories} />
 
@@ -15,6 +15,7 @@ import * as HeadingStories from "./Heading.stories"
 <KAIOInstallation exportNames="Heading" />
 
 ## Overview
+
 Renders a heading element `h1-h6` and applies styling for headings.
 
 <Canvas of={HeadingStories.Playground} />
@@ -38,4 +39,3 @@ Use this variant only for the title within the composable header. [See documenta
 Defaults to `h1` element.
 
 <Canvas of={HeadingStories.ComposableHeaderTitle} />
-

package/src/Icon/_docs/Icon.mdx

@@ -1,21 +1,19 @@
-import { Canvas, Controls, Meta, Story } from "@storybook/blocks"
-import { ResourceLinks } from "~storybook/components"
-import * as IconStories from "./Icon.docs.stories"
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks'
+import { ResourceLinks } from '~storybook/components'
+import * as IconStories from './Icon.docs.stories'
 
 <Meta of={IconStories} />
 
 # Icon
 
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons"
-/>
+<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons" />
 
 ## Installation
 
 Each icon is imported separately, for example if you'd like the `AddIcon` you will use the following import.
 
 ```js
-import { AddIcon } from "@kaizen/components"
+import { AddIcon } from '@kaizen/components'
 ```
 
 See: Reference for all icons available to import.

package/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as BrandMomentCaptureIntroStories from "./BrandMomentCaptureIntro.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as BrandMomentCaptureIntroStories from './BrandMomentCaptureIntro.stories'
 
 <Meta of={BrandMomentCaptureIntroStories} />
 
@@ -18,6 +18,7 @@ import * as BrandMomentCaptureIntroStories from "./BrandMomentCaptureIntro.stori
 ## Overview
 
 Functionally similar to an animation Scene illustration but has 3 different states based on the properties passed in:
+
 - An initial animation that is only ever played once, never looping.
 - An ambient animation that can be looped.
 - A static image that is not animated.
@@ -28,13 +29,19 @@ Functionally similar to an animation Scene illustration but has 3 different stat
 ## API
 
 ### Single animation
+
 Will trigger the animation once.
+
 <Canvas of={BrandMomentCaptureIntroStories.Animated} />
 
 ### Looped animation
+
 Will render the a looped animation. Should be used with `isAnimated` to render the "initial" intro animation.
+
 <Canvas of={BrandMomentCaptureIntroStories.Looped} />
 
 ### Autoplay disabled
+
 If false will render the animation paused. This can be re-enabled clicking the pause sign on hover.
+
 <Canvas of={BrandMomentCaptureIntroStories.Autoplay} />

package/src/Illustration/Scene/_docs/Scene.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as Stickersheets from "./Scene.stickersheet.stories"
-import * as SceneStories from "./Scene.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as Stickersheets from './Scene.stickersheet.stories'
+import * as SceneStories from './Scene.stories'
 
 <Meta of={SceneStories} />
 
@@ -12,10 +12,7 @@ import * as SceneStories from "./Scene.stories"
 
 />
 
-
-<KAIOInstallation
-  exportNames="BrandMomentPositiveOutro"
-/>
+<KAIOInstallation exportNames="BrandMomentPositiveOutro" />
 
 ## Overview
 

package/src/Illustration/Spot/_docs/Spot.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as StickerSheetStories from "./Spot.stickersheet.stories"
-import * as SpotIllustrationStories from "./Spot.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as StickerSheetStories from './Spot.stickersheet.stories'
+import * as SpotIllustrationStories from './Spot.stories'
 
 <Meta of={SpotIllustrationStories} />
 

package/src/Input/Input/_docs/Input.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import { LinkTo } from "~storybook/components/LinkTo"
-import * as InputStories from "./Input.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as InputStories from './Input.stories'
 
 <Meta of={InputStories} />
 
@@ -24,13 +24,17 @@ An input of different types. Usually part of compositions such as <LinkTo pageId
 ## API
 
 ### Types
+
 <Canvas of={InputStories.Types} />
 
 ### Status
+
 <Canvas of={InputStories.Status} />
 
 ### Icon adornments
+
 <Canvas of={InputStories.Icons} />
 
 ### Reversed
+
 <Canvas of={InputStories.Reversed} />

package/src/Input/InputRange/_docs/InputRange.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as InputRangeStories from "./InputRange.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as InputRangeStories from './InputRange.stories'
 
 <Meta of={InputRangeStories} />
 

package/src/Input/InputSearch/_docs/InputSearch.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as InputSearchStories from "./InputSearch.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as InputSearchStories from './InputSearch.stories'
 
 <Meta of={InputSearchStories} />
 
@@ -23,6 +23,7 @@ A range of things.
 ## API
 
 ## Showing the clear button
+
 Adding text will automatically show the clear button.
 
 <Canvas of={InputSearchStories.Filled} />

package/src/KaizenProvider/_docs/KaizenProvider.mdx

@@ -1,9 +1,9 @@
-import { Meta } from "@storybook/blocks"
-import { Diff } from "~storybook/components"
-import migrationBonus from "./code-diffs/migration-bonus.diff?raw"
-import migrationFETBonus from "./code-diffs/migration-fe-template-bonus.diff?raw"
-import migrationFETToV1 from "./code-diffs/migration-fe-template-to-v1.diff?raw"
-import migrationToV1 from "./code-diffs/migration-to-v1.diff?raw"
+import { Meta } from '@storybook/blocks'
+import { Diff } from '~storybook/components'
+import migrationBonus from './code-diffs/migration-bonus.diff?raw'
+import migrationFETBonus from './code-diffs/migration-fe-template-bonus.diff?raw'
+import migrationFETToV1 from './code-diffs/migration-fe-template-to-v1.diff?raw'
+import migrationToV1 from './code-diffs/migration-to-v1.diff?raw'
 
 <Meta title="Components/Kaizen Provider/Installation" />
 
@@ -11,19 +11,19 @@ import migrationToV1 from "./code-diffs/migration-to-v1.diff?raw"
 
 Provides the necessary global contexts for all Kaizen components, as well as any global level Kaizen component/wrappers.
 
-
 ## Usage
 
 Ideally, there should only be one `KaizenProvider` that should wrap your entire application.
 
 ```jsx
-import { KaizenProvider } from "@kaizen/components";
-<KaizenProvider>
+import { KaizenProvider } from '@kaizen/components'
+;<KaizenProvider>
   <App />
 </KaizenProvider>
 ```
 
 ### Internationalization support
+
 - [Internationalization in Kaizen](/story/components-kaizen-provider-internationalization-in-kaizen--docs)
 
 ## Migrating to KaizenProvider v1.0

package/src/KaizenProvider/_docs/internationalization-in-kaizen.mdx

@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks"
-import { LinkTo } from "~storybook/components/LinkTo"
+import { Meta } from '@storybook/blocks'
+import { LinkTo } from '~storybook/components/LinkTo'
 
 <Meta title="Components/Kaizen Provider/Internationalization in Kaizen" />
 
@@ -38,13 +38,13 @@ There is a slight difference in the implementation of the `KaizenProvider`, depe
 For more information on `@cultureamp/i18n-react-intl`, see their docs here.
 
 Note: This will work with StaticIntlProvider or DynamicIntlProvider.
-```tsx
-import { DynamicIntlProvider } from "@cultureamp/i18n-react-intl"
-import { KaizenProvider } from "@kaizen/components"
 
-<DynamicIntlProvider>
+```tsx
+import { DynamicIntlProvider } from '@cultureamp/i18n-react-intl'
+import { KaizenProvider } from '@kaizen/components'
+;<DynamicIntlProvider>
   <KaizenProvider>
-     <YourApp/>
+    <YourApp />
   </KaizenProvider>
 </DynamicIntlProvider>
 ```
@@ -54,9 +54,8 @@ import { KaizenProvider } from "@kaizen/components"
 In these cases, you'll need to pass the current locale as a prop to the `KaizenProvider`, so it knows which language is currently active.
 
 ```tsx
-import { KaizenProvider } from "@kaizen/components"
-
-<KaizenProvider locale={locale}>
-  <YourApp/>
+import { KaizenProvider } from '@kaizen/components'
+;<KaizenProvider locale={locale}>
+  <YourApp />
 </KaizenProvider>
 ```

package/src/Label/_docs/Label.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as LabelStories from "./Label.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as LabelStories from './Label.stories'
 
 <Meta of={LabelStories} />
 
@@ -23,12 +23,15 @@ Atomic `Label` component for use in `Field` components.
 ## API
 
 ### Variants
+
 <Canvas of={LabelStories.Variant} />
 
 ### Types
+
 <Canvas of={LabelStories.Types} />
 
 ### Position
+
 By default, your label text will always sit to the right of the inline form control (ie. in RTL terms, the "end").
 Using the `labelPosition` you can flip the label text to sit to the left (ie. in RTL terms, the "start").
 
@@ -37,6 +40,7 @@ Note: this only works when you have an inline form control passed in via `childr
 <Canvas of={LabelStories.Position} />
 
 ### Label text
+
 Adds text to your form control. `labelText` styling greatly depends on how you compose and what `labelType` you apply, please see Composing below for examples.
 
 <Canvas of={LabelStories.LabelText} />
@@ -48,7 +52,9 @@ There are two different ways to utilise the `Label` component depending on the t
 The main difference is that when dealing with an inline form control, the form control is passed as children.
 
 #### Inline form controls
+
 <Canvas of={LabelStories.InlineControls} />
 
 #### Block form controls
+
 <Canvas of={LabelStories.BlockControls} />

package/src/LabelledMessage/_docs/LabelledMessage.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as LabelledMessageStories from "./LabelledMessage.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as LabelledMessageStories from './LabelledMessage.stories'
 
 <Meta of={LabelledMessageStories} />
 

package/src/LikertScaleLegacy/_docs/LikertScaleLegacy.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as LikertScaleLegacyStories from "./LikertScaleLegacy.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as LikertScaleLegacyStories from './LikertScaleLegacy.stories'
 
 <Meta of={LikertScaleLegacyStories} />
 

package/src/Loading/LoadingGraphic/_docs/LoadingGraphic.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
-import * as LoadingGraphicStories from "./LoadingGraphic.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as LoadingGraphicStories from './LoadingGraphic.stories'
 
 <Meta of={LoadingGraphicStories} />
 
@@ -19,9 +19,9 @@ import * as LoadingGraphicStories from "./LoadingGraphic.stories"
 
 Loading skeleton for graphics
 (<LinkTo pageId="components-icons">Icon</LinkTo>,
+
 <LinkTo pageId="components-avatar">Avatar</LinkTo>,
-<LinkTo pageId="components-illustrations-spot">Spot Illustration</LinkTo>,
-Scene Illustration).
+<LinkTo pageId="components-illustrations-spot">Spot Illustration</LinkTo>, Scene Illustration).
 
 <Canvas of={LoadingGraphicStories.Playground} />
 <Controls of={LoadingGraphicStories.Playground} />

package/src/Loading/LoadingHeading/_docs/LoadingHeading.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
-import * as LoadingHeadingStories from "./LoadingHeading.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as LoadingHeadingStories from './LoadingHeading.stories'
 
 <Meta of={LoadingHeadingStories} />
 

package/src/Loading/LoadingInput/_docs/LoadingInput.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
-import * as LoadingInputStories from "./LoadingInput.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as LoadingInputStories from './LoadingInput.stories'
 
 <Meta of={LoadingInputStories} />
 

package/src/Loading/LoadingParagraph/_docs/LoadingParagraph.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
-import * as LoadingParagraphStories from "./LoadingParagraph.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as LoadingParagraphStories from './LoadingParagraph.stories'
 
 <Meta of={LoadingParagraphStories} />
 

package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as LoadingSpinnerStories from "./LoadingSpinner.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as LoadingSpinnerStories from './LoadingSpinner.stories'
 
 <Meta of={LoadingSpinnerStories} />
 
@@ -44,4 +44,3 @@ Below is an example of how to apply the current color tokens used in designs.
 Generally use `"md"` (default value) unless spinner is inside a form field, in which case use `sm`. The `xs` size is for buttons or content dense layouts.
 
 <Canvas of={LoadingSpinnerStories.Size} />
-

package/src/Modal/ConfirmationModal/_docs/ConfirmationModal.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as ConfirmationModalStories from "./ConfirmationModal.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as ConfirmationModalStories from './ConfirmationModal.stories'
 
 <Meta of={ConfirmationModalStories} />