@kaizen/components 1.71.0 → 1.73.0

package/src/Collapsible/Collapsible/Collapsible.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import AnimateHeight from 'react-animate-height'
 import { IconButton } from '~components/Button'
 import { Heading } from '~components/Heading'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { type Sticky } from '../types'
 import styles from './Collapsible.module.scss'

package/src/Collapsible/Collapsible/_docs/Collapsible.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { Heading } from '~components/Heading'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { Collapsible } from '../index'
 
 const meta = {

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { isRefObject } from '~components/utils/isRefObject'
 import { DateInput, type DateInputProps } from '../DateInput'
 import styles from './DateInputWithIconButton.module.scss'

package/src/DatePicker/_docs/DatePicker.stickersheet.stories.tsx

@@ -7,7 +7,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { DatePicker } from '../index'
 
 export default {
-  title: 'Components/Date controls/DatePicker',
+  title: 'Components/Datepickers/DatePicker',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/DatePicker/_docs/DatePicker.stories.tsx

@@ -13,7 +13,7 @@ import { datePickerLocaleControls } from './controls/datePickerLocaleControls'
 import { disabledDayMatchersControls } from './controls/disabledDayMatchersControls'
 
 const meta = {
-  title: 'Components/Date controls/DatePicker',
+  title: 'Components/Datepickers/DatePicker',
   component: DatePicker,
   argTypes: {
     ...datePickerLocaleControls,

package/src/DatePicker/_docs/getLocale.stickersheet.stories.tsx

@@ -6,7 +6,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { getLocale } from '../utils/getLocale'
 
 export default {
-  title: 'Components/Date controls/DatePicker/Tests',
+  title: 'Components/Datepickers/DatePicker/Tests',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/DateRangePicker/DateRangePicker.tsx

@@ -15,7 +15,7 @@ import {
 } from '~components/Calendar/LegacyCalendarRange'
 import { Label } from '~components/Label'
 import { VisuallyHidden } from '~components/VisuallyHidden'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import styles from './DateRangePicker.module.scss'
 
 export type DateRangePickerProps = {

package/src/DateRangePicker/_docs/DateRangePicker.stickersheet.stories.tsx

@@ -10,7 +10,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { DateRangePicker, formatDateRangeValue, type DateRangePickerProps } from '../index'
 
 export default {
-  title: 'Components/Date controls/DateRangePicker',
+  title: 'Components/Datepickers/DateRangePicker',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/DateRangePicker/_docs/DateRangePicker.stories.tsx

@@ -5,7 +5,7 @@ import { type DateRange } from 'react-day-picker'
 import { DateRangePicker, formatDateRangeValue } from '../index'
 
 const meta = {
-  title: 'Components/Date controls/DateRangePicker',
+  title: 'Components/Datepickers/DateRangePicker',
   component: DateRangePicker,
   args: {
     labelText: 'Label',

package/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { type Meta } from '@storybook/react'
 import isChromatic from 'chromatic'
 import { Button } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { EmptyState, type EmptyStateProps } from '../index'
 

package/src/EmptyState/_docs/EmptyState.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { Button } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { EmptyState } from '../index'
 
 const meta = {

package/src/ErrorPage/ErrorPage.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { BrandMoment } from '~components/BrandMoment'
 import { BrandMomentError } from '~components/Illustration'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useErrorMessages, type ErrorStatuses } from './hooks'
 import styles from './ErrorPage.module.scss'

package/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx

@@ -5,7 +5,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { FieldGroup } from '../index'
 
 export default {
-  title: 'Components/FieldGroup',
+  title: 'Components/Form primitives/FieldGroup',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/FieldGroup/_docs/FieldGroup.stories.tsx

@@ -4,7 +4,7 @@ import { Label } from '~components/Label'
 import { FieldGroup } from '../index'
 
 const meta = {
-  title: 'Components/FieldGroup',
+  title: 'Components/Form primitives/FieldGroup',
   component: FieldGroup,
   args: {
     children: (

package/src/FieldMessage/FieldMessage.tsx

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './FieldMessage.module.scss'
 

package/src/FieldMessage/_docs/FieldMessage.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { FieldMessage } from '../index'
 
 export default {
-  title: 'Components/FieldMessage',
+  title: 'Components/Form primitives/FieldMessage',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/FieldMessage/_docs/FieldMessage.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { FieldMessage } from '../index'
 
 const meta = {
-  title: 'Components/FieldMessage',
+  title: 'Components/Form primitives/FieldMessage',
   component: FieldMessage,
   args: {
     message:

package/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react'
 import { useIntl } from '@cultureamp/i18n-react-intl'
 import { Button } from '~components/Button'
 import { Menu, MenuItem, MenuList } from '~components/Menu'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { useFilterBarContext } from '../../context/FilterBarContext'
 
 export const AddFiltersMenu = (): JSX.Element => {

package/src/Filter/FilterButton/FilterButton/FilterButton.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { isRefObject } from '~components/utils/isRefObject'
 import { type FilterTriggerRef } from '../../Filter/types'
 import { FilterButtonBase, type FilterButtonBaseProps } from '../subcomponents/FilterButtonBase'

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import { ButtonGroup, type ButtonGroupProps } from '~components/ButtonGroup'
 import { type FilterTriggerRef } from '~components/Filter/Filter'
 import { Tooltip } from '~components/Tooltip'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type DataAttributes } from '~components/types/DataAttributes'
 import { isRefObject } from '~components/utils/isRefObject'
 import { FilterButton, type FilterButtonProps } from '../FilterButton'

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

@@ -5,7 +5,7 @@ import { mergeProps } from '@react-aria/utils'
 import classnames from 'classnames'
 import { Badge } from '~components/Badge'
 import { VisuallyHidden } from '~components/VisuallyHidden'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { useSelectionContext } from '../../context'
 import { type MultiSelectItem } from '../../types'
 import styles from './MultiSelectOption.module.scss'

package/src/Filter/FilterSelect/FilterSelect.tsx

@@ -4,7 +4,7 @@ import { HiddenSelect, useSelect } from '@react-aria/select'
 import { useSelectState, type SelectProps as AriaSelectProps } from '@react-stately/select'
 import { Filter, FilterContents } from '~components/Filter/Filter'
 import { type FilterButtonProps } from '~components/Filter/FilterButton'
-import { SelectProvider } from '~components/__rc__/Select/context'
+import { SelectProvider } from '~components/__next__/Select/context'
 import {
   ListBoxSection,
   ListItem,
@@ -12,9 +12,9 @@ import {
   SectionDivider,
   SelectPopoverContents,
   type SelectPopoverContentsProps,
-} from '~components/__rc__/Select/subcomponents'
-import { getDisabledKeysFromItems } from '~components/__rc__/Select/utils/getDisabledKeysFromItems'
-import { transformSelectItemToCollectionElement } from '~components/__rc__/Select/utils/transformSelectItemToCollectionElement'
+} from '~components/__next__/Select/subcomponents'
+import { getDisabledKeysFromItems } from '~components/__next__/Select/utils/getDisabledKeysFromItems'
+import { transformSelectItemToCollectionElement } from '~components/__next__/Select/utils/transformSelectItemToCollectionElement'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { type SelectItem, type SelectOption } from './types'
 import styles from './FilterSelect.module.css'

package/src/Filter/FilterSelect/types.ts

@@ -1,3 +1,3 @@
-// @todo: Remove this and use the types from Select when it is moved out from future.
+// @todo: Remove this and use the types from Select when it is moved out from next.
 // This is currently here to allow consumers access to the types from the entrypoint.
-export * from '~components/__rc__/Select/types'
+export * from '~components/__next__/Select/types'

package/src/{__rc__/Tooltip/subcomponents/Focusable → Focusable}/_docs/ApiSpecification.mdx

@@ -2,24 +2,24 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'
 import { KAIOInstallation, ResourceLinks } from '~storybook/components'
 import * as exampleStories from './Focusable.stories'
 
-<Meta title="Components/Tooltip/Tooltip (v3)/Focusable/API Specification" />
+<Meta title="Components/Focusable/API Specification" />
 
-# Focusable API Specification (v3)
+# Focusable API Specification
 
 Updated June 25, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__rc__/Tooltip/subcomponents/Focusable"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Focusable"
   className="mt-16 !mb-8"
 />
 
-<KAIOInstallation exportNames={['Focusable']} family="overlays" version="3" />
+<KAIOInstallation exportNames={['Focusable']} />
 
 ## Overview
 
 Focusable is a utility wrapper to allow users to add focus to a non-focusable element.
 
-The main use case is for non semantic components like `Tag` that need a [Tooltip](/docs/overlays-tooltip-v3-usage-guidelines--docs).
+The main use case is for non semantic components like `Tag` that need a [Tooltip](/docs/overlays-tooltip-next-usage-guidelines--docs).
 
 <Canvas className="mb-24" of={exampleStories.Playground} />
 

package/src/{__rc__/Tooltip/subcomponents/Focusable → Focusable}/_docs/Focusable.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { Tag } from '~components/__rc__/Tag'
+import { Tag } from '~components/__next__/Tag'
 import { Focusable } from '../index'
 
 const meta = {
-  title: 'Components/Tooltip/Tooltip (v3)/Focusable',
+  title: 'Components/Focusable',
   component: Focusable,
   parameters: {
     layout: 'centered',

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -6,7 +6,7 @@ import { Heading, type HeadingProps } from '~components/Heading'
 import { type SceneProps, type SpotProps } from '~components/Illustration'
 import { Text } from '~components/Text'
 import { Tooltip, type TooltipProps } from '~components/Tooltip'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type VariantType } from './types'
 import styles from './GuidanceBlock.module.css'
 

package/src/Icon/_docs/Icon.docs.stories.tsx

@@ -2,12 +2,12 @@ import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import * as ICONS from '~components/Icon'
 import { Text } from '~components/Text'
-import { Tag } from '~components/__rc__/Tag'
+import { Tag } from '~components/__next__/Tag'
 import { AddIcon } from '../index'
 import styles from './icon.module.scss'
 
 const meta = {
-  title: 'Components/Icon',
+  title: 'Components/Icon/Icon components (deprecated)',
   component: AddIcon,
   args: {
     role: 'presentation',

package/src/Icon/_docs/Icon.mdx

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

package/src/Icon/_docs/Icon.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import * as ICONS from '~components/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 
 export default {
-  title: 'Components/Icon',
+  title: 'Components/Icon/Icon components (deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Illustration/utils/usePausePlay.tsx

@@ -1,5 +1,5 @@
 import React, { useState, type RefObject } from 'react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 
 export type usePausePlayHook = {
   toggle: () => void

package/src/Input/Input/_docs/Input.stickersheet.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Input, type InputProps } from '../index'
 import { InputStatus, InputTypes } from '../types'
 
 export default {
-  title: 'Components/Inputs/Input',
+  title: 'Components/TextField/Input (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Input/Input/_docs/Input.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { Input } from '../index'
 
 const meta = {
-  title: 'Components/Inputs/Input',
+  title: 'Components/TextField/Input (primitive)',
   component: Input,
   parameters: {
     a11y: {

package/src/Input/InputRange/_docs/InputRange.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { InputRange } from '../index'
 
 export default {
-  title: 'Components/Inputs/InputRange',
+  title: 'Components/Slider/InputRange (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Input/InputRange/_docs/InputRange.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { InputRange } from '../index'
 
 const meta = {
-  title: 'Components/Inputs/InputRange',
+  title: 'Components/Slider/InputRange (primitive)',
   component: InputRange,
   args: {
     id: 'inputRange',

package/src/Input/InputSearch/InputSearch.tsx

@@ -3,7 +3,7 @@ import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { ClearButton } from '~components/ClearButton'
 import { LoadingSpinner } from '~components/Loading'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './InputSearch.module.scss'
 

package/src/Input/InputSearch/_docs/InputSearch.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { InputSearch } from '../index'
 
 export default {
-  title: 'Components/Inputs/InputSearch',
+  title: 'Components/SearchField/InputSearch (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Input/InputSearch/_docs/InputSearch.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { InputSearch } from '../index'
 
 const meta = {
-  title: 'Components/Inputs/InputSearch',
+  title: 'Components/SearchField/InputSearch (primitive)',
   component: InputSearch,
   args: {
     id: 'search',

package/src/Label/_docs/Label.stickersheet.stories.tsx

@@ -5,7 +5,7 @@ import { Label, type LabelProps } from '../index'
 import { BlockLabelTypes, InlineLabelTypes } from '../types'
 
 export default {
-  title: 'Components/Label',
+  title: 'Components/Form primitives/Label',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Label/_docs/Label.stories.tsx

@@ -4,7 +4,7 @@ import { Label } from '../index'
 import { LabelTypes } from '../types'
 
 const meta = {
-  title: 'Components/Label',
+  title: 'Components/Form primitives/Label',
   component: Label,
   args: {
     children: 'I am Label',

package/src/LabelledMessage/_docs/LabelledMessage.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { LabelledMessage } from '../index'
 
 export default {
-  title: 'Components/LabelledMessage',
+  title: 'Components/Form primitives/LabelledMessage',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/LabelledMessage/_docs/LabelledMessage.stories.tsx

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { LabelledMessage } from '../LabelledMessage'
 
 const meta = {
-  title: 'Components/LabelledMessage',
+  title: 'Components/Form primitives/LabelledMessage',
   component: LabelledMessage,
   args: {
     label: 'Label',

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -2,7 +2,7 @@ import React, { createRef, useState } from 'react'
 import classnames from 'classnames'
 import { FieldMessage } from '~components/FieldMessage'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type ColorSchema, type Scale, type ScaleItem, type ScaleValue } from './types'
 import determineSelectionFromKeyPress from './utils/determineSelectionFromKeyPress'
 import styles from './LikertScaleLegacy.module.scss'

package/src/Link/Link.module.css

@@ -0,0 +1,119 @@
+.link {
+  color: var(--link-text-color, var(--color-blue-500));
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--link-font-size, inherit);
+  line-height: var(--link-line-height, inherit);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  text-decoration: none;
+  position: relative;
+  white-space: nowrap;
+  outline: 0;
+}
+
+.link[data-focus-visible]::after {
+  content: '';
+  position: absolute;
+  background: transparent;
+  border-color: var(--color-blue-500);
+  border-radius: 0;
+  border-width: var(--border-focus-ring-border-width);
+  border-style: var(--border-focus-ring-border-style);
+  inset: calc(-1 * (var(--border-focus-ring-border-width) * 2) - 1px);
+}
+
+.isUnderlined {
+  border-bottom: var(--spacing-1) solid var(--link-text-color, var(--color-blue-500));
+}
+
+.icon > * {
+  vertical-align: text-bottom;
+  font-size: var(--icon-font-size, 1em);
+}
+
+.iconStart {
+  margin-inline-start: var(--text-icon-gap, 0.5em);
+}
+
+.iconEnd {
+  margin-inline-end: var(--text-icon-gap, 0.5em);
+}
+
+.primary[data-hovered] {
+  --link-text-color: var(--color-blue-600);
+}
+
+.primary[data-pressed] {
+  --link-text-color: var(--color-blue-700);
+}
+
+.secondary {
+  --link-text-color: var(--color-purple-800);
+}
+
+.secondary[data-hovered] {
+  --link-text-color: var(--color-gray-600);
+}
+
+.secondary[data-pressed] {
+  --link-text-color: var(--color-black);
+}
+
+[class*='extra-small'] .link.isInline,
+.extra-small {
+  --link-font-size: var(--typography-paragraph-extra-small-font-size);
+  --link-line-height: var(--typography-paragraph-extra-small-line-height);
+  --icon-font-size: 0.875rem;
+  --text-icon-gap: var(--spacing-2);
+}
+
+[class*='body'] .link.isInline,
+.body {
+  --link-font-size: var(--typography-paragraph-body-font-size);
+  --link-line-height: var(--typography-paragraph-body-line-height);
+  --icon-font-size: 1.25rem;
+  --text-icon-gap: var(--spacing-6);
+}
+
+[class*='intro-lede'] .link.isInline,
+.intro-lede {
+  --link-font-size: var(--typography-paragraph-intro-lede-font-size);
+  --link-line-height: var(--typography-paragraph-intro-lede-line-height);
+  --icon-font-size: 1.5rem;
+  --text-icon-gap: var(--spacing-8);
+}
+
+[class*='small']:not([class*='extra-small']) .link.isInline,
+.small {
+  --link-font-size: var(--typography-paragraph-small-font-size);
+  --link-line-height: var(--typography-paragraph-small-line-height);
+  --icon-font-size: 1rem;
+  --text-icon-gap: var(--spacing-4);
+}
+
+.white {
+  --link-text-color: var(--color-white);
+}
+
+.white[data-focus-visible]::after {
+  border-color: var(--color-blue-300);
+}
+
+.white.isDisabled {
+  --link-text-color: rgba(var(--color-white-rgb), 0.2);
+}
+
+.reversed {
+  --link-text-color: var(--color-white);
+}
+
+.reversed[data-focus-visible]::after {
+  border-color: var(--color-blue-300);
+}
+
+.link.isDisabled {
+  --link-text-color: var(--color-gray-400);
+}
+
+.reversed.isDisabled {
+  --link-text-color: rgba(var(--color-white-rgb), 0.2);
+}