Merge pull request #4865 from penpot/ladybenko-8347-storybook-controls

Use Storybook controls for stories
This commit is contained in:
Eva Marco 2024-07-11 13:06:56 +02:00 committed by GitHub
commit 5ab7123566
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 231 additions and 662 deletions

View file

@ -2,12 +2,7 @@
const config = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
staticDirs: ["../resources/public"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
],
addons: ["@storybook/addon-essentials"],
framework: {
name: "@storybook/react-vite",
options: {},

View file

@ -42,13 +42,9 @@
"devDependencies": {
"@playwright/test": "1.44.1",
"@storybook/addon-essentials": "^7.6.17",
"@storybook/addon-interactions": "^7.6.17",
"@storybook/addon-links": "^7.6.17",
"@storybook/addon-onboarding": "^1.0.11",
"@storybook/blocks": "^7.6.17",
"@storybook/react": "^7.6.17",
"@storybook/react-vite": "^7.6.17",
"@storybook/testing-library": "^0.2.2",
"@types/node": "^20.11.20",
"autoprefixer": "^10.4.19",
"concurrently": "^8.2.2",

View file

@ -6,11 +6,11 @@
(ns app.main.ui.ds
(:require
[app.main.ui.ds.foundations.heading :refer [heading*]]
[app.main.ui.ds.foundations.icon :refer [icon* icon-list]]
[app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]]
[app.main.ui.ds.foundations.text :refer [text*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
[app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg* raw-svg-list]]
[app.main.ui.ds.foundations.typography :refer [typography-list]]
[app.main.ui.ds.foundations.typography.heading :refer [heading*]]
[app.main.ui.ds.foundations.typography.text :refer [text*]]
[app.main.ui.ds.storybook :as sb]))
(def default

View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.icon
(ns app.main.ui.ds.foundations.assets.icon
(:require
[clojure.core :as c]
[cuerdas.core :as str]

View file

@ -4,12 +4,12 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.icon
(ns app.main.ui.ds.foundations.assets.icon
(:refer-clojure :exclude [mask])
(:require-macros
[app.common.data.macros :as dm]
[app.main.style :as stl]
[app.main.ui.ds.foundations.icon :refer [collect-icons]])
[app.main.ui.ds.foundations.assets.icon :refer [collect-icons]])
(:require
[rumext.v2 :as mf]))
@ -279,10 +279,10 @@
(mf/defc icon*
{::mf/props :obj}
[{:keys [icon size class] :rest props}]
[{:keys [id size class] :rest props}]
(let [class (dm/str (or class "") " " (stl/css :icon))
props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m})
size-px (cond (= size "s") icon-size-s :else icon-size-m)
offset (/ (- icon-size-m size-px) 2)]
[:> "svg" props
[:use {:href (dm/str "#icon-" icon) :width size-px :height size-px :x offset :y offset}]]))
[:use {:href (dm/str "#icon-" id) :width size-px :height size-px :x offset :y offset}]]))

View file

@ -41,13 +41,13 @@ Assuming the namespace is required as `i`:
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.icon :as i]))
[app.main.ui.ds.foundations.assets.icon :as i]))
```
You can now use the icon IDs defined in the namespace:
```clj
[:> i/icon* {:icon i/pin}]
[:> i/icon* {:id i/pin}]
```
### Customizing colors
@ -59,7 +59,7 @@ If you need to override this behavior, you can use a `class` in the `<Icon>`
component and set `color` to whatever value you prefer:
```clj
[:> i/icon* {:icon i/add :class (stl/css :toolbar-icon)}]
[:> i/icon* {:id i/add :class (stl/css :toolbar-icon)}]
```
```scss
@ -74,7 +74,7 @@ By default, icons do not have any accessible text attached to them. You should
add an `aria-label` attribute to set a proper text:
```clj
[:> i/icon* {:icon i/add :aria-label (tr "foo.bar")}]
[:> i/icon* {:id i/add :aria-label (tr "foo.bar")}]
```
## Usage guidelines for design

View file

@ -6,21 +6,31 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
Components.storybook;
const { icons } = Components.meta;
export default {
title: "Foundations/Icons",
component: Components.Icon,
};
const iconList = Object.entries(icons)
.map(([_, value]) => value)
.sort();
export const AllIcons = {
render: () => (
export default {
title: "Foundations/Assets/Icon",
component: Components.Icon,
argTypes: {
id: {
options: iconList,
control: { type: "select" },
},
size: {
options: ["m", "s"],
control: { type: "radio" },
},
},
};
export const All = {
render: ({ size }) => (
<StoryWrapper theme="default">
<StoryHeader>
<h1>All Icons</h1>
<p>Hover on an icon to see its ID</p>
<p>Hover on an icon to see its ID.</p>
</StoryHeader>
<StoryGrid>
{iconList.map((iconId) => (
@ -29,29 +39,43 @@ export const AllIcons = {
key={iconId}
style={{ color: "var(--color-accent-primary)" }}
>
<Icon icon={iconId} />
<Icon id={iconId} size={size} />
</StoryGridCell>
))}
</StoryGrid>
</StoryWrapper>
),
args: {
size: "m",
},
parameters: {
controls: { exclude: ["id", "size"] },
backgrounds: { disable: true },
},
};
export const Default = {
render: () => (
render: ({ id, ...args }) => (
<StoryWrapper theme="default">
<Icon icon={icons.Pin} />
<Icon id={id} {...args} />
</StoryWrapper>
),
args: {
id: "pin",
},
parameters: {
controls: { exclude: ["size"] },
},
};
export const Small = {
render: () => (
export const CustomSize = {
render: ({ id, size, ...args }) => (
<StoryWrapper theme="default">
<Icon icon={icons.Pin} size="s" />
<Icon id={id} size={size} {...args} />
</StoryWrapper>
),
args: {
id: "pin",
size: "m",
},
};

View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.raw-svg
(ns app.main.ui.ds.foundations.assets.raw-svg
(:require
[clojure.core :as c]
[cuerdas.core :as str]

View file

@ -4,11 +4,11 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.raw-svg
(ns app.main.ui.ds.foundations.assets.raw-svg
(:refer-clojure :exclude [mask])
(:require-macros
[app.common.data.macros :as dm]
[app.main.ui.ds.foundations.raw-svg :refer [collect-raw-svgs]])
[app.main.ui.ds.foundations.assets.raw-svg :refer [collect-raw-svgs]])
(:require
[rumext.v2 :as mf]))
@ -32,6 +32,6 @@
(mf/defc raw-svg*
{::mf/props :obj}
[{:keys [asset] :rest props}]
[{:keys [id] :rest props}]
[:> "svg" props
[:use {:href (dm/str "#asset-" asset)}]])
[:use {:href (dm/str "#asset-" id)}]])

View file

@ -20,7 +20,7 @@ For convenience, asset IDs are available in the component namespace.
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.raw-svg :as svg]))
[app.main.ui.ds.foundations.assets.raw-svg :as svg]))
```
```clj

View file

@ -6,41 +6,51 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
Components.storybook;
const { svgs } = Components.meta;
export default {
title: "Foundations/RawSvg",
component: Components.RawSvg,
};
const assetList = Object.entries(svgs)
.map(([_, value]) => value)
.sort();
export const AllAssets = {
render: () => (
export default {
title: "Foundations/Assets/RawSvg",
component: Components.RawSvg,
argTypes: {
id: {
options: assetList,
control: { type: "select" },
},
},
};
export const All = {
render: ({}) => (
<StoryWrapper theme="light">
<StoryHeader>
<h1>All assets</h1>
<p>Hover on a asset to see its id.</p>
<h1>All SVG Assets</h1>
<p>Hover on an asset to see its ID.</p>
</StoryHeader>
<StoryGrid size="200">
{assetList.map((x) => (
<StoryGridCell key={x} title={x}>
<RawSvg asset={x} style={{ maxWidth: "100%" }} />
<RawSvg id={x} style={{ maxWidth: "100%" }} />
</StoryGridCell>
))}
</StoryGrid>
</StoryWrapper>
),
parameters: {
controls: { exclude: ["id"] },
backgrounds: { values: [{ name: "debug", value: "#ccc" }] },
},
};
export const Default = {
render: () => (
render: ({ id, ...args }) => (
<StoryWrapper theme="default">
<RawSvg asset={svgs.BrandGitlab} width="200" />
<RawSvg id={id} {...args} width="200" />
</StoryWrapper>
),
args: {
id: "brand-gitlab",
},
};

View file

@ -1,54 +0,0 @@
import * as React from "react";
import Components from "@target/components";
const { Heading } = Components;
const { StoryWrapper, StoryGridRow } = Components.storybook;
export default {
title: "Foundations/Heading",
component: Components.Heading,
};
export const Levels = {
render: () => (
<StoryWrapper theme="default">
<StoryGridRow title={"1 / display"}>
<Heading level="1" typography="display">
h1 / display
</Heading>
</StoryGridRow>
<StoryGridRow title={"2 / display"}>
<Heading level="2" typography="display">
h2 / display
</Heading>
</StoryGridRow>
<StoryGridRow title={"3 / display"}>
<Heading level="3" typography="display">
h3 / display
</Heading>
</StoryGridRow>
</StoryWrapper>
),
};
export const HeadingTypography = {
render: () => (
<StoryWrapper theme="default">
<StoryGridRow title={"1 / title-large"}>
<Heading level="1" typography="title-large">
h1 / title-large
</Heading>
</StoryGridRow>
<StoryGridRow title={"1 / title-medium"}>
<Heading level="1" typography="title-medium">
h1 / title-medium
</Heading>
</StoryGridRow>
<StoryGridRow title={"1 / code-font"}>
<Heading level="1" typography="code-font">
h1 / code-font
</Heading>
</StoryGridRow>
</StoryWrapper>
),
};

View file

@ -1,48 +0,0 @@
import { Canvas, Meta } from "@storybook/blocks";
import * as TextStories from "./text.stories";
<Meta of={TextStories} />
# Texts
This component will add a text element to our code that will match the tag prop.
## Technical notes
This components accepts to props:
- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.).
- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
You can check passed props to renderized components on hover `tag / typography`
### Using typography IDs
There are typography ID definitions you can use in your code rather than typing the
typography ID by hand.
**Using these IDs is recommended**.
Assuming the namespace of the typography is required as `t`:
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.text :refer [text*]]
[app.main.ui.ds.foundations.typography :as t]))
```
You can now use the typography IDs defined in the namespace:
```clj
[:> text* {:typography t/title-large :tag "p"} "Welcome to Penpot"]
```
## Accesibility
There should only be one level 1 heading `<h1>` per page.
Headings are used to navigate the page and must follow the `<h1>` -> `<h2>` -> `<h3>` -> `<h4>` -> `<h5>` -> `<h6>` hierarchy.
For example, do not skip levels in the `<h1>` -> `<h3>` hierarchy if there is no `<h2>` in between.
We should not choose the heading level by its visual aspect.

View file

@ -1,54 +0,0 @@
import * as React from "react";
import Components from "@target/components";
const { Text } = Components;
const { StoryWrapper, StoryGridRow } = Components.storybook;
export default {
title: "Foundations/Text",
component: Components.Text,
};
export const TextTags = {
render: () => (
<StoryWrapper theme="default">
<StoryGridRow title={"p / title-large"}>
<Text tag="p" typography="title-large">
p / Title
</Text>
</StoryGridRow>
<StoryGridRow title={"span / title-large"}>
<Text tag="span" typography="title-large">
span / Title large
</Text>
</StoryGridRow>
<StoryGridRow title={"div / title-large"}>
<Text tag="div" typography="title-large">
div / Title large
</Text>
</StoryGridRow>
</StoryWrapper>
),
};
export const TypographyParagraph = {
render: () => (
<StoryWrapper theme="default">
<StoryGridRow title={"p / title-large"}>
<Text tag="p" typography="title-large">
p / Title large
</Text>
</StoryGridRow>
<StoryGridRow title={"p / title-medium"}>
<Text tag="p" typography="title-medium">
p / Title medium
</Text>
</StoryGridRow>
<StoryGridRow title={"p / code-font"}>
<Text tag="p" typography="code-font">
p / Code font
</Text>
</StoryGridRow>
</StoryWrapper>
),
};

View file

@ -18,7 +18,6 @@
(def ^:typography-id body-small "body-small")
(def ^:typography-id code-font "code-font")
(def typography-list #{display
title-large
title-medium

View file

@ -1,135 +0,0 @@
import * as React from "react";
import Components from "@target/components";
const { Heading } = Components;
const { StoryWrapper, StoryHeader, StoryGridRow } = Components.storybook;
const typographyList = {
display: {
name: "Display",
id: "display",
size: "36px",
weight: "400",
line: "1.4",
uppercase: false,
font: "Work Sans",
},
titleLarge: {
name: "Title large",
id: "title-large",
size: "24px",
weight: "400",
line: "1.4",
uppercase: false,
font: "Work Sans",
},
titleMedium: {
name: "Title medium",
id: "title-medium",
size: "20px",
weight: "400",
line: "1.4",
uppercase: false,
font: "Work Sans",
},
titleSmall: {
name: "Title small",
id: "title-small",
size: "14px",
weight: "400",
line: "1.2",
uppercase: false,
font: "Work Sans",
},
headlineLarge: {
name: "Headline large",
id: "headline-large",
size: "18px",
weight: "400",
line: "1.4",
uppercase: true,
font: "Work Sans",
},
headlineMedium: {
name: "Headline medium",
id: "headline-medium",
size: "16px",
weight: "400",
line: "1.4",
uppercase: true,
font: "Work Sans",
},
headlineSmall: {
name: "Headline small",
id: "headline-small",
size: "12px",
weight: "500",
line: "1.2",
uppercase: true,
font: "Work Sans",
},
bodyLarge: {
name: "Body large",
id: "body-large",
size: "16px",
weight: "400",
line: "1.4",
uppercase: false,
font: "Work Sans",
},
bodyMedium: {
name: "Body medium",
id: "body-medium",
size: "14px",
weight: "400",
line: "1.3",
uppercase: false,
font: "Work Sans",
},
bodySmall: {
name: "Body small",
id: "body-small",
size: "12px",
weight: "400",
line: "1.3",
uppercase: false,
font: "Work Sans",
},
codeFont: {
name: "Code font",
id: "code-font",
size: "12px",
weight: "400",
line: "1.2",
uppercase: false,
font: "Roboto Mono",
},
};
export default {
title: "Foundations/Typography",
component: Components.StoryHeader,
};
export const AllTypography = {
render: () => (
<StoryWrapper theme="default">
<StoryHeader>
<h1>All Typography</h1>
<p>Hover on a heading to see its ID</p>
</StoryHeader>
{Object.values(typographyList).map(
({ id, name, size, weight, line, font }) => (
<StoryGridRow title={id} key={id}>
<Heading level="1" typography={id}>
{name} - {weight} - {size}/{line} {font}
</Heading>
</StoryGridRow>
),
)}
</StoryWrapper>
),
parameters: {
backgrounds: { disable: true },
},
};

View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.heading
(ns app.main.ui.ds.foundations.typography.heading
(:require-macros
[app.common.data.macros :as dm]
[app.main.style :as stl])
@ -25,7 +25,6 @@
(assert (or (valid-level? level)
(nil? level))
(dm/str "Invalid level: " level ". Valid numbers are 1 to 6."))
(assert (valid-typography? (dm/str typography))
(dm/str typography " is an unknown typography"))

View file

@ -28,8 +28,8 @@ Assuming the namespace of the typography is required as `t`:
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.heading :refer [heading*]]
[app.main.ui.ds.foundations.typography :as t]))
[app.main.ui.ds.foundations.typography :as t]
[app.main.ui.ds.foundations.typography.heading :refer [heading*]]))
```
You can now use the typography IDs defined in the namespace:

View file

@ -3,7 +3,7 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "../typography.scss" as t;
@use "../../typography.scss" as t;
.display-typography {
@include t.use-typography("display");

View file

@ -0,0 +1,38 @@
import * as React from "react";
import Components from "@target/components";
const { Heading } = Components;
const { StoryWrapper } = Components.storybook;
const { typography } = Components.meta;
const typographyIds = typography.sort();
export default {
title: "Foundations/Typography/Heading",
component: Components.Heading,
argTypes: {
level: {
options: [1, 2, 3, 4, 5, 6],
control: { type: "select" },
},
typography: {
options: typographyIds,
control: { type: "select" },
},
},
};
export const AnyHeading = {
name: "Heading",
render: ({ level, typography, ...args }) => (
<StoryWrapper theme="default">
<Heading level={level} typography={typography} {...args}>
Lorem ipsum
</Heading>
</StoryWrapper>
),
args: {
level: 1,
typography: "display",
},
};

View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.text
(ns app.main.ui.ds.foundations.typography.text
(:require-macros
[app.common.data.macros :as dm]
[app.main.style :as stl])
@ -17,12 +17,12 @@
(mf/defc text*
{::mf/props :obj}
[{:keys [tag typography children class] :rest props}]
[{:keys [as typography children class] :rest props}]
(assert (valid-typography? (dm/str typography))
(dm/str typography " is an unknown typography"))
(let [tag (or tag "p")
(let [as (if (or (empty? as) (nil? as)) "p" as)
class (dm/str (or class "") " " (stl/css-case :display-typography (= typography t/display)
:title-large-typography (= typography t/title-large)
:title-medium-typography (= typography t/title-medium)
@ -35,5 +35,5 @@
:body-small-typography (= typography t/body-small)
:code-font-typography (= typography t/code-font)))
props (mf/spread-props props {:class class})]
[:> tag props
[:> as props
children]))

View file

@ -0,0 +1,31 @@
import { Canvas, Meta } from "@storybook/blocks";
import * as TextStories from "./text.stories";
<Meta of={TextStories} />
# Texts
This component will add a text element to our code that will match the tag prop.
## Technical notes
### Using typography IDs
There are typography ID definitions you can use in your code rather than typing the
typography ID by hand.
**Using these IDs is recommended**.
Assuming the namespace of the typography is required as `t`:
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.typography :as t]
[app.main.ui.ds.foundations.typography.text :refer [text*]]))
```
You can now use the typography IDs defined in the namespace:
```clj
[:> text* {:typography t/title-large :as "p"} "Welcome to Penpot"]
```

View file

@ -3,7 +3,7 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "../typography.scss" as t;
@use "../../typography.scss" as t;
.display-typography {
@include t.use-typography("display");

View file

@ -0,0 +1,46 @@
import * as React from "react";
import Components from "@target/components";
const { Text } = Components;
const { StoryWrapper } = Components.storybook;
const { typography } = Components.meta;
const typographyIds = typography.sort();
export default {
title: "Foundations/Typography/Text",
component: Text,
argTypes: {
typography: {
options: typographyIds,
control: { type: "select" },
},
},
};
export const Default = {
render: ({ typography, ...args }) => (
<StoryWrapper theme="default">
<Text typography={typography} {...args}>
Lorem ipsum
</Text>
</StoryWrapper>
),
args: {
typography: "display",
},
};
export const CustomTag = {
render: ({ typography, ...args }) => (
<StoryWrapper theme="default">
<Text typography={typography} {...args}>
Lorem ipsum
</Text>
</StoryWrapper>
),
args: {
typography: "display",
as: "li",
},
};

View file

@ -1,8 +1,7 @@
import { Canvas, Meta, Story } from "@storybook/blocks";
import * as TypographyStories from "./typography.stories";
import { Canvas, Meta } from "@storybook/blocks";
import Components from "@target/components";
<Meta of={TypographyStories} />
<Meta title="Foundations/Typography" />
# Typography
@ -55,7 +54,7 @@ for exceptions based on the size of the components.
Hero style text for transitional pages (Login). If too large use large title in narrow windows.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Heading>
<Components.Text typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Text>
</Canvas>
### Title large `title-large`
@ -64,7 +63,7 @@ Page headers for main pages (dashboard, Profiles...). If too big use title
(medium) in narrow windows.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Heading>
<Components.Text typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Text>
</Canvas>
### Title medium `title-medium`
@ -73,7 +72,7 @@ Default page title. Equivalent line height of 32px matches the height
of buttons and other medium controls. Ideal for page header layout.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Heading>
<Components.Text typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Text>
</Canvas>
### Title small `title-small`
@ -81,7 +80,7 @@ of buttons and other medium controls. Ideal for page header layout.
Uses the same size as body (large).
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Heading>
<Components.Text typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Text>
</Canvas>
## Headline
@ -92,20 +91,20 @@ page titles (automated action titles, for example). Same line height as title (m
### Headline large `headline-large`
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Heading>
<Components.Text typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Text>
</Canvas>
### Headline medium `headline-medium`
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Heading>
<Components.Text typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Text>
</Canvas>
### Headline small `headline-small`
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Heading>
<Components.Text typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Text>
</Canvas>
## Body
@ -115,7 +114,7 @@ page titles (automated action titles, for example). Same line height as title (m
Generic content.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Heading>
<Components.Text typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Text>
</Canvas>
### Body medium `body-medium`
@ -123,7 +122,7 @@ Generic content.
Default UI font. Most commonly used for body text.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Heading>
<Components.Text typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Text>
</Canvas>
@ -133,7 +132,7 @@ Small compact font with a line height of less than 16px.
Use for single line scenarios, as the small size does not meet accessibility requirements.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Heading>
<Components.Text typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Text>
</Canvas>
## Code font `code-font`
@ -141,7 +140,7 @@ Use for single line scenarios, as the small size does not meet accessibility req
Default style for rendering code blocks.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Heading>
<Components.Text typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Text>
</Canvas>
## Fonts

View file

@ -26,7 +26,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2":
"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2":
version: 7.24.2
resolution: "@babel/code-frame@npm:7.24.2"
dependencies:
@ -1428,7 +1428,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
"@babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
version: 7.24.5
resolution: "@babel/runtime@npm:7.24.5"
dependencies:
@ -1981,19 +1981,6 @@ __metadata:
languageName: node
linkType: hard
"@jest/types@npm:^27.5.1":
version: 27.5.1
resolution: "@jest/types@npm:27.5.1"
dependencies:
"@types/istanbul-lib-coverage": "npm:^2.0.0"
"@types/istanbul-reports": "npm:^3.0.0"
"@types/node": "npm:*"
"@types/yargs": "npm:^16.0.0"
chalk: "npm:^4.0.0"
checksum: 10c0/4598b302398db0eb77168b75a6c58148ea02cc9b9f21c5d1bbe985c1c9257110a5653cf7b901c3cab87fba231e3fed83633687f1c0903b4bc6939ab2a8452504
languageName: node
linkType: hard
"@jest/types@npm:^29.6.3":
version: 29.6.3
resolution: "@jest/types@npm:29.6.3"
@ -3104,35 +3091,6 @@ __metadata:
languageName: node
linkType: hard
"@storybook/addon-interactions@npm:^7.6.17":
version: 7.6.19
resolution: "@storybook/addon-interactions@npm:7.6.19"
dependencies:
"@storybook/global": "npm:^5.0.0"
"@storybook/types": "npm:7.6.19"
jest-mock: "npm:^27.0.6"
polished: "npm:^4.2.2"
ts-dedent: "npm:^2.2.0"
checksum: 10c0/430d62298930b5e78398024de99f8f5d19ef22d7eda51015fa88e8ed3fafd2e003b0c8694a97192848ebf3e013ba363d96bf753ef1ff844e8129a9c47d41894c
languageName: node
linkType: hard
"@storybook/addon-links@npm:^7.6.17":
version: 7.6.19
resolution: "@storybook/addon-links@npm:7.6.19"
dependencies:
"@storybook/csf": "npm:^0.1.2"
"@storybook/global": "npm:^5.0.0"
ts-dedent: "npm:^2.0.0"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
peerDependenciesMeta:
react:
optional: true
checksum: 10c0/c7f40095e8f00ed1dc9a6118b074d513e3a7dd77334e044d152b42ea5922a0fd26397bbcd45abaa2968a3b27a27b810af0e8039ab07ecee7043582fa2a14ca67
languageName: node
linkType: hard
"@storybook/addon-measure@npm:7.6.19":
version: 7.6.19
resolution: "@storybook/addon-measure@npm:7.6.19"
@ -3143,19 +3101,6 @@ __metadata:
languageName: node
linkType: hard
"@storybook/addon-onboarding@npm:^1.0.11":
version: 1.0.11
resolution: "@storybook/addon-onboarding@npm:1.0.11"
dependencies:
"@storybook/telemetry": "npm:^7.1.0"
react-confetti: "npm:^6.1.0"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 10c0/ca3de3eb85fb6d04309dbc07c26956777c064bb5032fb99aca3e43361b0816ac4326183aac99204d795fdc2010aa69c4978353c70a42926e9da0819343fcd2a0
languageName: node
linkType: hard
"@storybook/addon-outline@npm:7.6.19":
version: 7.6.19
resolution: "@storybook/addon-outline@npm:7.6.19"
@ -3712,7 +3657,7 @@ __metadata:
languageName: node
linkType: hard
"@storybook/telemetry@npm:7.6.19, @storybook/telemetry@npm:^7.1.0":
"@storybook/telemetry@npm:7.6.19":
version: 7.6.19
resolution: "@storybook/telemetry@npm:7.6.19"
dependencies:
@ -3728,17 +3673,6 @@ __metadata:
languageName: node
linkType: hard
"@storybook/testing-library@npm:^0.2.2":
version: 0.2.2
resolution: "@storybook/testing-library@npm:0.2.2"
dependencies:
"@testing-library/dom": "npm:^9.0.0"
"@testing-library/user-event": "npm:^14.4.0"
ts-dedent: "npm:^2.2.0"
checksum: 10c0/3179c74148c92267ea449068ce9fb00bf960dbf06654354de7869428415d16dc730a0d58b5adca7619d21e5a058ae0bf713e34c09be8bca574388ec0106c5068
languageName: node
linkType: hard
"@storybook/theming@npm:7.6.19":
version: 7.6.19
resolution: "@storybook/theming@npm:7.6.19"
@ -3766,31 +3700,6 @@ __metadata:
languageName: node
linkType: hard
"@testing-library/dom@npm:^9.0.0":
version: 9.3.4
resolution: "@testing-library/dom@npm:9.3.4"
dependencies:
"@babel/code-frame": "npm:^7.10.4"
"@babel/runtime": "npm:^7.12.5"
"@types/aria-query": "npm:^5.0.1"
aria-query: "npm:5.1.3"
chalk: "npm:^4.1.0"
dom-accessibility-api: "npm:^0.5.9"
lz-string: "npm:^1.5.0"
pretty-format: "npm:^27.0.2"
checksum: 10c0/147da340e8199d7f98f3a4ad8aa22ed55b914b83957efa5eb22bfea021a979ebe5a5182afa9c1e5b7a5f99a7f6744a5a4d9325ae46ec3b33b5a15aed8750d794
languageName: node
linkType: hard
"@testing-library/user-event@npm:^14.4.0":
version: 14.5.2
resolution: "@testing-library/user-event@npm:14.5.2"
peerDependencies:
"@testing-library/dom": ">=7.21.4"
checksum: 10c0/68a0c2aa28a3c8e6eb05cafee29705438d7d8a9427423ce5064d44f19c29e89b5636de46dd2f28620fb10abba75c67130185bbc3aa23ac1163a227a5f36641e1
languageName: node
linkType: hard
"@trysound/sax@npm:0.2.0":
version: 0.2.0
resolution: "@trysound/sax@npm:0.2.0"
@ -3798,13 +3707,6 @@ __metadata:
languageName: node
linkType: hard
"@types/aria-query@npm:^5.0.1":
version: 5.0.4
resolution: "@types/aria-query@npm:5.0.4"
checksum: 10c0/dc667bc6a3acc7bba2bccf8c23d56cb1f2f4defaa704cfef595437107efaa972d3b3db9ec1d66bc2711bfc35086821edd32c302bffab36f2e79b97f312069f08
languageName: node
linkType: hard
"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5":
version: 7.20.5
resolution: "@types/babel__core@npm:7.20.5"
@ -4183,15 +4085,6 @@ __metadata:
languageName: node
linkType: hard
"@types/yargs@npm:^16.0.0":
version: 16.0.9
resolution: "@types/yargs@npm:16.0.9"
dependencies:
"@types/yargs-parser": "npm:*"
checksum: 10c0/be24bd9a56c97ddb2964c1c18f5b9fe8271a50e100dc6945989901aae58f7ce6fb8f3a591c749a518401b6301358dbd1997e83c36138a297094feae7f9ac8211
languageName: node
linkType: hard
"@types/yargs@npm:^17.0.8":
version: 17.0.32
resolution: "@types/yargs@npm:17.0.32"
@ -4570,15 +4463,6 @@ __metadata:
languageName: node
linkType: hard
"aria-query@npm:5.1.3":
version: 5.1.3
resolution: "aria-query@npm:5.1.3"
dependencies:
deep-equal: "npm:^2.0.5"
checksum: 10c0/edcbc8044c4663d6f88f785e983e6784f98cb62b4ba1e9dd8d61b725d0203e4cfca38d676aee984c31f354103461102a3d583aa4fbe4fd0a89b679744f4e5faf
languageName: node
linkType: hard
"arr-diff@npm:^4.0.0":
version: 4.0.0
resolution: "arr-diff@npm:4.0.0"
@ -4618,7 +4502,7 @@ __metadata:
languageName: node
linkType: hard
"array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1":
"array-buffer-byte-length@npm:^1.0.1":
version: 1.0.1
resolution: "array-buffer-byte-length@npm:1.0.1"
dependencies:
@ -6325,32 +6209,6 @@ __metadata:
languageName: node
linkType: hard
"deep-equal@npm:^2.0.5":
version: 2.2.3
resolution: "deep-equal@npm:2.2.3"
dependencies:
array-buffer-byte-length: "npm:^1.0.0"
call-bind: "npm:^1.0.5"
es-get-iterator: "npm:^1.1.3"
get-intrinsic: "npm:^1.2.2"
is-arguments: "npm:^1.1.1"
is-array-buffer: "npm:^3.0.2"
is-date-object: "npm:^1.0.5"
is-regex: "npm:^1.1.4"
is-shared-array-buffer: "npm:^1.0.2"
isarray: "npm:^2.0.5"
object-is: "npm:^1.1.5"
object-keys: "npm:^1.1.1"
object.assign: "npm:^4.1.4"
regexp.prototype.flags: "npm:^1.5.1"
side-channel: "npm:^1.0.4"
which-boxed-primitive: "npm:^1.0.2"
which-collection: "npm:^1.0.1"
which-typed-array: "npm:^1.1.13"
checksum: 10c0/a48244f90fa989f63ff5ef0cc6de1e4916b48ea0220a9c89a378561960814794a5800c600254482a2c8fd2e49d6c2e196131dc983976adb024c94a42dfe4949f
languageName: node
linkType: hard
"default-browser-id@npm:3.0.0":
version: 3.0.0
resolution: "default-browser-id@npm:3.0.0"
@ -6597,13 +6455,6 @@ __metadata:
languageName: node
linkType: hard
"dom-accessibility-api@npm:^0.5.9":
version: 0.5.16
resolution: "dom-accessibility-api@npm:0.5.16"
checksum: 10c0/b2c2eda4fae568977cdac27a9f0c001edf4f95a6a6191dfa611e3721db2478d1badc01db5bb4fa8a848aeee13e442a6c2a4386d65ec65a1436f24715a2f8d053
languageName: node
linkType: hard
"dom-helpers@npm:^5.1.3":
version: 5.2.1
resolution: "dom-helpers@npm:5.2.1"
@ -6932,23 +6783,6 @@ __metadata:
languageName: node
linkType: hard
"es-get-iterator@npm:^1.1.3":
version: 1.1.3
resolution: "es-get-iterator@npm:1.1.3"
dependencies:
call-bind: "npm:^1.0.2"
get-intrinsic: "npm:^1.1.3"
has-symbols: "npm:^1.0.3"
is-arguments: "npm:^1.1.1"
is-map: "npm:^2.0.2"
is-set: "npm:^2.0.2"
is-string: "npm:^1.0.7"
isarray: "npm:^2.0.5"
stop-iteration-iterator: "npm:^1.0.0"
checksum: 10c0/ebd11effa79851ea75d7f079405f9d0dc185559fd65d986c6afea59a0ff2d46c2ed8675f19f03dce7429d7f6c14ff9aede8d121fbab78d75cfda6a263030bac0
languageName: node
linkType: hard
"es-module-lexer@npm:^0.9.3":
version: 0.9.3
resolution: "es-module-lexer@npm:0.9.3"
@ -7907,13 +7741,9 @@ __metadata:
dependencies:
"@playwright/test": "npm:1.44.1"
"@storybook/addon-essentials": "npm:^7.6.17"
"@storybook/addon-interactions": "npm:^7.6.17"
"@storybook/addon-links": "npm:^7.6.17"
"@storybook/addon-onboarding": "npm:^1.0.11"
"@storybook/blocks": "npm:^7.6.17"
"@storybook/react": "npm:^7.6.17"
"@storybook/react-vite": "npm:^7.6.17"
"@storybook/testing-library": "npm:^0.2.2"
"@types/node": "npm:^20.11.20"
autoprefixer: "npm:^10.4.19"
compression: "npm:^1.7.4"
@ -8164,7 +7994,7 @@ __metadata:
languageName: node
linkType: hard
"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
version: 1.2.4
resolution: "get-intrinsic@npm:1.2.4"
dependencies:
@ -9014,7 +8844,7 @@ __metadata:
languageName: node
linkType: hard
"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.7":
"internal-slot@npm:^1.0.7":
version: 1.0.7
resolution: "internal-slot@npm:1.0.7"
dependencies:
@ -9098,7 +8928,7 @@ __metadata:
languageName: node
linkType: hard
"is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
"is-arguments@npm:^1.0.4":
version: 1.1.1
resolution: "is-arguments@npm:1.1.1"
dependencies:
@ -9108,7 +8938,7 @@ __metadata:
languageName: node
linkType: hard
"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.4":
"is-array-buffer@npm:^3.0.4":
version: 3.0.4
resolution: "is-array-buffer@npm:3.0.4"
dependencies:
@ -9210,7 +9040,7 @@ __metadata:
languageName: node
linkType: hard
"is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5":
"is-date-object@npm:^1.0.1":
version: 1.0.5
resolution: "is-date-object@npm:1.0.5"
dependencies:
@ -9342,13 +9172,6 @@ __metadata:
languageName: node
linkType: hard
"is-map@npm:^2.0.2, is-map@npm:^2.0.3":
version: 2.0.3
resolution: "is-map@npm:2.0.3"
checksum: 10c0/2c4d431b74e00fdda7162cd8e4b763d6f6f217edf97d4f8538b94b8702b150610e2c64961340015fe8df5b1fcee33ccd2e9b62619c4a8a3a155f8de6d6d355fc
languageName: node
linkType: hard
"is-nan@npm:^1.3.2":
version: 1.3.2
resolution: "is-nan@npm:1.3.2"
@ -9468,13 +9291,6 @@ __metadata:
languageName: node
linkType: hard
"is-set@npm:^2.0.2, is-set@npm:^2.0.3":
version: 2.0.3
resolution: "is-set@npm:2.0.3"
checksum: 10c0/f73732e13f099b2dc879c2a12341cfc22ccaca8dd504e6edae26484bd5707a35d503fba5b4daad530a9b088ced1ae6c9d8200fd92e09b428fe14ea79ce8080b7
languageName: node
linkType: hard
"is-shared-array-buffer@npm:^1.0.2, is-shared-array-buffer@npm:^1.0.3":
version: 1.0.3
resolution: "is-shared-array-buffer@npm:1.0.3"
@ -9555,13 +9371,6 @@ __metadata:
languageName: node
linkType: hard
"is-weakmap@npm:^2.0.2":
version: 2.0.2
resolution: "is-weakmap@npm:2.0.2"
checksum: 10c0/443c35bb86d5e6cc5929cd9c75a4024bb0fff9586ed50b092f94e700b89c43a33b186b76dbc6d54f3d3d09ece689ab38dcdc1af6a482cbe79c0f2da0a17f1299
languageName: node
linkType: hard
"is-weakref@npm:^1.0.2":
version: 1.0.2
resolution: "is-weakref@npm:1.0.2"
@ -9571,16 +9380,6 @@ __metadata:
languageName: node
linkType: hard
"is-weakset@npm:^2.0.3":
version: 2.0.3
resolution: "is-weakset@npm:2.0.3"
dependencies:
call-bind: "npm:^1.0.7"
get-intrinsic: "npm:^1.2.4"
checksum: 10c0/8ad6141b6a400e7ce7c7442a13928c676d07b1f315ab77d9912920bf5f4170622f43126f111615788f26c3b1871158a6797c862233124507db0bcc33a9537d1a
languageName: node
linkType: hard
"is-windows@npm:^1.0.1, is-windows@npm:^1.0.2":
version: 1.0.2
resolution: "is-windows@npm:1.0.2"
@ -9711,16 +9510,6 @@ __metadata:
languageName: node
linkType: hard
"jest-mock@npm:^27.0.6":
version: 27.5.1
resolution: "jest-mock@npm:27.5.1"
dependencies:
"@jest/types": "npm:^27.5.1"
"@types/node": "npm:*"
checksum: 10c0/6ad58454b37ee3f726930b07efbf40a7c79d2d2d9c7b226708b4b550bc0904de93bcacf714105d11952a5c0bc855e5d59145c8c9dbbb4e69b46e7367abf53b52
languageName: node
linkType: hard
"jest-regex-util@npm:^29.6.3":
version: 29.6.3
resolution: "jest-regex-util@npm:29.6.3"
@ -10299,15 +10088,6 @@ __metadata:
languageName: node
linkType: hard
"lz-string@npm:^1.5.0":
version: 1.5.0
resolution: "lz-string@npm:1.5.0"
bin:
lz-string: bin/bin.js
checksum: 10c0/36128e4de34791838abe979b19927c26e67201ca5acf00880377af7d765b38d1c60847e01c5ec61b1a260c48029084ab3893a3925fd6e48a04011364b089991b
languageName: node
linkType: hard
"magic-string@npm:^0.27.0":
version: 0.27.0
resolution: "magic-string@npm:0.27.0"
@ -12119,17 +11899,6 @@ __metadata:
languageName: node
linkType: hard
"pretty-format@npm:^27.0.2":
version: 27.5.1
resolution: "pretty-format@npm:27.5.1"
dependencies:
ansi-regex: "npm:^5.0.1"
ansi-styles: "npm:^5.0.0"
react-is: "npm:^17.0.1"
checksum: 10c0/0cbda1031aa30c659e10921fa94e0dd3f903ecbbbe7184a729ad66f2b6e7f17891e8c7d7654c458fa4ccb1a411ffb695b4f17bbcd3fe075fabe181027c4040ed
languageName: node
linkType: hard
"pretty-format@npm:^29.7.0":
version: 29.7.0
resolution: "pretty-format@npm:29.7.0"
@ -12460,17 +12229,6 @@ __metadata:
languageName: node
linkType: hard
"react-confetti@npm:^6.1.0":
version: 6.1.0
resolution: "react-confetti@npm:6.1.0"
dependencies:
tween-functions: "npm:^1.2.0"
peerDependencies:
react: ^16.3.0 || ^17.0.1 || ^18.0.0
checksum: 10c0/5b4eb23eef564695f6db1d25b294ed31d5fa21ff4092c6a38e641f85cd10e3e0b50014366e3ac0f7cf772e73faaecd14614e5b11a5531336fa769dda8068ab59
languageName: node
linkType: hard
"react-docgen-typescript@npm:^2.2.2":
version: 2.2.2
resolution: "react-docgen-typescript@npm:2.2.2"
@ -12538,13 +12296,6 @@ __metadata:
languageName: node
linkType: hard
"react-is@npm:^17.0.1":
version: 17.0.2
resolution: "react-is@npm:17.0.2"
checksum: 10c0/2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053
languageName: node
linkType: hard
"react-is@npm:^18.0.0":
version: 18.3.1
resolution: "react-is@npm:18.3.1"
@ -12829,7 +12580,7 @@ __metadata:
languageName: node
linkType: hard
"regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.2":
"regexp.prototype.flags@npm:^1.5.2":
version: 1.5.2
resolution: "regexp.prototype.flags@npm:1.5.2"
dependencies:
@ -14089,15 +13840,6 @@ __metadata:
languageName: node
linkType: hard
"stop-iteration-iterator@npm:^1.0.0":
version: 1.0.0
resolution: "stop-iteration-iterator@npm:1.0.0"
dependencies:
internal-slot: "npm:^1.0.4"
checksum: 10c0/c4158d6188aac510d9e92925b58709207bd94699e9c31186a040c80932a687f84a51356b5895e6dc72710aad83addb9411c22171832c9ae0e6e11b7d61b0dfb9
languageName: node
linkType: hard
"store2@npm:^2.14.2":
version: 2.14.3
resolution: "store2@npm:2.14.3"
@ -14823,7 +14565,7 @@ __metadata:
languageName: node
linkType: hard
"ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0":
"ts-dedent@npm:^2.0.0":
version: 2.2.0
resolution: "ts-dedent@npm:2.2.0"
checksum: 10c0/175adea838468cc2ff7d5e97f970dcb798bbcb623f29c6088cb21aa2880d207c5784be81ab1741f56b9ac37840cbaba0c0d79f7f8b67ffe61c02634cafa5c303
@ -14851,13 +14593,6 @@ __metadata:
languageName: node
linkType: hard
"tween-functions@npm:^1.2.0":
version: 1.2.0
resolution: "tween-functions@npm:1.2.0"
checksum: 10c0/7e59295b8b0ee4132ed2fe335f56a9db5c87056dad6b6fd3011be72239fd20398003ddb4403bc98ad9f5c94468890830f64016edbbde35581faf95b32cda8305
languageName: node
linkType: hard
"type-detect@npm:^4.0.0, type-detect@npm:^4.0.8":
version: 4.0.8
resolution: "type-detect@npm:4.0.8"
@ -15727,18 +15462,6 @@ __metadata:
languageName: node
linkType: hard
"which-collection@npm:^1.0.1":
version: 1.0.2
resolution: "which-collection@npm:1.0.2"
dependencies:
is-map: "npm:^2.0.3"
is-set: "npm:^2.0.3"
is-weakmap: "npm:^2.0.2"
is-weakset: "npm:^2.0.3"
checksum: 10c0/3345fde20964525a04cdf7c4a96821f85f0cc198f1b2ecb4576e08096746d129eb133571998fe121c77782ac8f21cbd67745a3d35ce100d26d4e684c142ea1f2
languageName: node
linkType: hard
"which-module@npm:^1.0.0":
version: 1.0.0
resolution: "which-module@npm:1.0.0"
@ -15746,7 +15469,7 @@ __metadata:
languageName: node
linkType: hard
"which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
version: 1.1.15
resolution: "which-typed-array@npm:1.1.15"
dependencies: