@kaizen/components 1.71.0 → 1.72.0

package/dist/cjs/__rc__/Tag/Tag/Tag.module.scss.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var styles = {
-  "tag": "Tag-module_tag__I-0Un",
-  "iconContainer": "Tag-module_iconContainer__kmy7-",
-  "gray": "Tag-module_gray__NW5JF",
-  "blue": "Tag-module_blue__YOnbG",
-  "green": "Tag-module_green__Pv-pK",
-  "yellow": "Tag-module_yellow__LLHds",
-  "orange": "Tag-module_orange__U14os",
-  "red": "Tag-module_red__rZ2NN",
-  "purple": "Tag-module_purple__Jx-Il"
-};
-module.exports = styles;

package/dist/cjs/__rc__/Tooltip/OverlayArrow.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "overlayArrow": "OverlayArrow-module_overlayArrow__iXF0w",
-  "reversed": "OverlayArrow-module_reversed__XZmUF"
-};
-module.exports = styles;

package/dist/cjs/__rc__/Tooltip/Tooltip.module.scss.cjs

@@ -1,8 +0,0 @@
-'use strict';
-
-var styles = {
-  "tooltip": "Tooltip-module_tooltip__XhCpu",
-  "reversed": "Tooltip-module_reversed__EEjNF",
-  "slide": "Tooltip-module_slide__kSXdP"
-};
-module.exports = styles;

package/dist/cjs/__rc__/Tooltip/subcomponents/Focusable/Focusable.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "focusableWrapper": "Focusable-module_focusableWrapper__LTYGq"
-};
-module.exports = styles;

package/dist/esm/Tooltip/index.mjs

@@ -1,6 +0,0 @@
-import { Tooltip as Tooltip$1 } from './Tooltip.mjs';
-
-// Since we can't add a deprecation flag on a * export
-/** * @deprecated use v2 or upgrade to v3 for the latest release */
-var Tooltip = Tooltip$1;
-export { Tooltip };

package/dist/esm/__rc__/Button/Button.module.css.mjs

@@ -1,19 +0,0 @@
-var buttonStyles = {
-  "button": "Button-module_button__llv4w",
-  "fullWidth": "Button-module_fullWidth__yyvBq",
-  "small": "Button-module_small__NHLqb",
-  "medium": "Button-module_medium__cFj48",
-  "large": "Button-module_large__jqJIp",
-  "smallIconButton": "Button-module_smallIconButton__wy-8-",
-  "mediumIconButton": "Button-module_mediumIconButton__amipN",
-  "largeIconButton": "Button-module_largeIconButton__h0dR8",
-  "secondary": "Button-module_secondary__dSBU1",
-  "isDisabled": "Button-module_isDisabled__FDp7k",
-  "tertiary": "Button-module_tertiary__7iiaM",
-  "primaryReversed": "Button-module_primaryReversed__Asrrp",
-  "secondaryReversed": "Button-module_secondaryReversed__us2lk",
-  "tertiaryReversed": "Button-module_tertiaryReversed__lB1o6",
-  "hideContentWidth": "Button-module_hideContentWidth__WTIHN",
-  "retainContentWidth": "Button-module_retainContentWidth__dRMEx"
-};
-export { buttonStyles as default };

package/dist/esm/__rc__/Button/subcomponents/ButtonContent/ButtonContent.module.css.mjs

@@ -1,7 +0,0 @@
-var styles = {
-  "buttonContent": "ButtonContent-module_buttonContent__MX2mW",
-  "large": "ButtonContent-module_large__cBwh3",
-  "buttonLabel": "ButtonContent-module_buttonLabel__DdHQV",
-  "buttonIcon": "ButtonContent-module_buttonIcon__zwANv"
-};
-export { styles as default };

package/dist/esm/__rc__/Button/subcomponents/PendingContent/PendingContent.module.css.mjs

@@ -1,6 +0,0 @@
-var styles = {
-  "pendingContent": "PendingContent-module_pendingContent__IqNdf",
-  "large": "PendingContent-module_large__VZ-Oj",
-  "centerSpinner": "PendingContent-module_centerSpinner__RA-iq"
-};
-export { styles as default };

package/dist/esm/__rc__/Icon/Icon.module.css.mjs

@@ -1,9 +0,0 @@
-var styles = {
-  "material-symbols-outlined": "Icon-module_material-symbols-outlined__3a1Ay",
-  "icon": "Icon-module_icon__QRq03",
-  "filled": "Icon-module_filled__25xoQ",
-  "shouldMirrorInRTL": "Icon-module_shouldMirrorInRTL__GhX2t",
-  "iconLTR": "Icon-module_iconLTR__Mi0kp",
-  "iconRTL": "Icon-module_iconRTL__WiDBA"
-};
-export { styles as default };

package/dist/esm/__rc__/Menu/MenuItem.module.css.mjs

@@ -1,6 +0,0 @@
-var styles = {
-  "item": "MenuItem-module_item__keZ0C",
-  "flexWrapper": "MenuItem-module_flexWrapper__qph4C",
-  "iconWrapper": "MenuItem-module_iconWrapper__S9biZ"
-};
-export { styles as default };

package/dist/esm/__rc__/Select/Select.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "container": "Select-module_container__VMwkk",
-  "notFullWidth": "Select-module_notFullWidth__CRa0v"
-};
-export { styles as default };

package/dist/esm/__rc__/Select/subcomponents/ListBoxSection/ListBoxSection.module.scss.mjs

@@ -1,6 +0,0 @@
-var styles = {
-  "sectionWrapper": "ListBoxSection-module_sectionWrapper__mwpFh",
-  "sectionHeading": "ListBoxSection-module_sectionHeading__N7GmS",
-  "sectionList": "ListBoxSection-module_sectionList__abvnM"
-};
-export { styles as default };

package/dist/esm/__rc__/Select/subcomponents/Option/Option.module.scss.mjs

@@ -1,8 +0,0 @@
-var styles = {
-  "icon": "Option-module_icon__cxIUf",
-  "option": "Option-module_option__t6uom",
-  "isFocusVisible": "Option-module_isFocusVisible__Jef-t",
-  "disabled": "Option-module_disabled__MExtm",
-  "isSelected": "Option-module_isSelected__sUQS0"
-};
-export { styles as default };

package/dist/esm/__rc__/Select/subcomponents/SectionDivider/SectionDivider.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "divider": "SectionDivider-module_divider__81AP0"
-};
-export { styles as default };

package/dist/esm/__rc__/Select/subcomponents/SelectToggle/SelectToggle.module.scss.mjs

@@ -1,12 +0,0 @@
-var styles = {
-  "iconWrapper": "SelectToggle-module_iconWrapper__ieY8X",
-  "icon": "SelectToggle-module_icon__hqLBV",
-  "selectToggle": "SelectToggle-module_selectToggle__Ibxd4",
-  "placeholder": "SelectToggle-module_placeholder__x-5Xd",
-  "error": "SelectToggle-module_error__rAzxQ",
-  "caution": "SelectToggle-module_caution__Ica8M",
-  "disabled": "SelectToggle-module_disabled__EXyBL",
-  "reversed": "SelectToggle-module_reversed__M6Oth",
-  "value": "SelectToggle-module_value__57g5A"
-};
-export { styles as default };

package/dist/esm/__rc__/Tabs/subcomponents/Tab/Tab.module.css.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "tab": "Tab-module_tab__wr7-k",
-  "badge": "Tab-module_badge__bPT0N"
-};
-export { styles as default };

package/dist/esm/__rc__/Tabs/subcomponents/TabList/TabList.module.css.mjs

@@ -1,8 +0,0 @@
-var styles = {
-  "container": "TabList-module_container__D-QBz",
-  "tabList": "TabList-module_tabList__Akb-i",
-  "noPadding": "TabList-module_noPadding__nMPln",
-  "leftArrow": "TabList-module_leftArrow__4NECq",
-  "rightArrow": "TabList-module_rightArrow__ig-4P"
-};
-export { styles as default };

package/dist/esm/__rc__/Tag/RemovableTag/RemovableTag.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "removableTag": "RemovableTag-module_removableTag__QcpqV"
-};
-export { styles as default };

package/dist/esm/__rc__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "removeButton": "RemoveButton-module_removeButton__Gu9DM"
-};
-export { styles as default };

package/dist/esm/__rc__/Tag/Tag/Tag.module.scss.mjs

@@ -1,12 +0,0 @@
-var styles = {
-  "tag": "Tag-module_tag__I-0Un",
-  "iconContainer": "Tag-module_iconContainer__kmy7-",
-  "gray": "Tag-module_gray__NW5JF",
-  "blue": "Tag-module_blue__YOnbG",
-  "green": "Tag-module_green__Pv-pK",
-  "yellow": "Tag-module_yellow__LLHds",
-  "orange": "Tag-module_orange__U14os",
-  "red": "Tag-module_red__rZ2NN",
-  "purple": "Tag-module_purple__Jx-Il"
-};
-export { styles as default };

package/dist/esm/__rc__/Tooltip/OverlayArrow.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "overlayArrow": "OverlayArrow-module_overlayArrow__iXF0w",
-  "reversed": "OverlayArrow-module_reversed__XZmUF"
-};
-export { styles as default };

package/dist/esm/__rc__/Tooltip/Tooltip.module.scss.mjs

@@ -1,6 +0,0 @@
-var styles = {
-  "tooltip": "Tooltip-module_tooltip__XhCpu",
-  "reversed": "Tooltip-module_reversed__EEjNF",
-  "slide": "Tooltip-module_slide__kSXdP"
-};
-export { styles as default };

package/dist/esm/__rc__/Tooltip/subcomponents/Focusable/Focusable.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "focusableWrapper": "Focusable-module_focusableWrapper__LTYGq"
-};
-export { styles as default };

package/dist/types/__utilities__/v3.d.ts

@@ -1 +0,0 @@
-export * from './ReversedColors/v3';

package/src/Button/Button/_docs/v2/Button.mdx

@@ -1,98 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
-import * as ButtonStories from './Button.stories'
-
-<Meta of={ButtonStories} />
-
-# Button (v2)
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Button/Button"
-  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery"
-  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button"
-
-/>
-
-<KAIOInstallation exportNames="Button" family="actions" version="2" />
-
-## Overview
-
-Buttons perform actions.
-If it needs to navigate somewhere and can be opened in a new tab, use a link instead.
-
-<Canvas of={ButtonStories.Playground} />
-<Controls of={ButtonStories.Playground} />
-
-## API
-
-### Variants
-
-`Default`, `Primary`, `Destructive`, `Secondary`
-If no `variant` is specified, a `Default` button will be rendered.
-
-<Canvas of={ButtonStories.Variants} />
-
-#### Reversed
-
-<Canvas of={ButtonStories.Reversed} />
-
-### Disabled
-
-A disabled Button prevents user interaction. It doesn't appear in the tab order, can't receive focus, and may not read aloud by a screenreader.
-
-<Canvas of={ButtonStories.Disabled} />
-
-### Icon
-
-Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
-
-<Canvas of={ButtonStories.IconStory} />
-
-#### Icon position
-
-Change the icon placement with the `iconPosition` prop.
-Default position is `start`.
-
-<Canvas of={ButtonStories.IconPosition} />
-
-### Badge
-
-You can display a `Badge` component within the button using the `badge` prop.
-
-<Canvas of={ButtonStories.Badge} />
-
-### Full width
-
-Buttons can be stretched to fill the full width of their container.
-
-<Canvas of={ButtonStories.FullWidth} />
-
-### Working
-
-The `working` prop should be used in situations where a button action triggers a change in UI state but needs to wait for a server response, such as submitting a form.
-
-In conjuction use the `workingLabel` prop to update the label of the button when the working state is triggered.
-
-Alternatively use the `workingLabelHidden` prop to hide the button label all together.
-
-<Canvas of={ButtonStories.Working} />
-
-### Controlling the working state
-
-Here is an example of controlling whether the button is 'working' or not, using state.
-
-<Canvas of={ButtonStories.ResolveWorking} />
-
-### Loading
-
-Use the <LinkTo pageId="components-loading-states-loadinginput">LoadingInput</LinkTo> component for button placeholders.
-
-<Canvas of={ButtonStories.Loading} />
-
-### Native `form` attribute
-
-Button extends native HTML "form" attributes for `button`.
-
-You can use this to submit a `form` using `Button` with a matching form id.
-
-<Canvas of={ButtonStories.NativeFormButton} />

package/src/Button/Button/_docs/v2/Button.stories.tsx

@@ -1,162 +0,0 @@
-import React, { useState } from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { LoadingInput } from '~components/Loading'
-import { TextField } from '~components/TextField'
-import { Icon } from '~components/__rc__/Icon'
-import { Button } from '../../index'
-
-const meta = {
-  title: 'Components/Button/Button (v2)',
-  component: Button,
-  args: {
-    label: 'Label',
-  },
-} satisfies Meta<typeof Button>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'shown',
-      },
-    },
-  },
-}
-
-export const Variants: Story = {
-  render: ({ reversed }) => (
-    <>
-      <Button label="Default" reversed={reversed} />
-      <Button label="Primary" primary reversed={reversed} />
-      <Button label="Destructive" destructive reversed={reversed} />
-      <Button label="Secondary" secondary reversed={reversed} />
-      {!reversed && <Button label="Secondary Destructive" secondary destructive />}
-    </>
-  ),
-  decorators: [
-    (Story) => (
-      <div style={{ display: 'flex', gap: '1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: { controls: { disable: true } },
-}
-
-export const Reversed: Story = {
-  ...Variants,
-  args: { reversed: true },
-  parameters: {
-    ...Variants.parameters,
-    backgrounds: { default: 'Purple 700' },
-  },
-}
-
-export const Disabled: Story = {
-  args: { disabled: true },
-}
-
-const sourceCodeIcon = `
-import { Button, ArrowForwardIcon } from "@kaizen/components"
-
-<Button label="Label" icon={<Icon name="arrow_forward" isPresentational shouldMirrorInRTL />} />
-`
-
-export const IconStory: Story = {
-  name: 'Icon',
-  args: {
-    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
-  },
-  parameters: {
-    docs: { source: { code: sourceCodeIcon } },
-  },
-}
-
-export const IconPosition: Story = {
-  args: {
-    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
-    iconPosition: 'end',
-  },
-}
-
-export const Badge: Story = {
-  args: {
-    badge: { text: '3', variant: 'active' },
-    secondary: true,
-  },
-}
-
-export const FullWidth: Story = {
-  args: { fullWidth: true },
-}
-
-export const Working: Story = {
-  render: () => (
-    <>
-      <Button label="Label" working workingLabel="Submitting" />
-      <Button label="Label" working workingLabel="Submitting" workingLabelHidden />
-    </>
-  ),
-  decorators: [
-    (Story) => (
-      <div style={{ display: 'flex', gap: '1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: { controls: { disable: true } },
-}
-
-export const Loading: Story = {
-  render: () => <LoadingInput isAnimated width={13} />,
-  parameters: { controls: { disable: true } },
-}
-
-export const NativeFormButton: Story = {
-  render: () => (
-    <>
-      <form className="mb-6" id="unique-form-id">
-        <TextField labelText="Sample text field" defaultValue="content" />
-      </form>
-      <Button
-        label="Submit"
-        type="submit"
-        form="unique-form-id"
-        formTarget="_blank"
-        formAction="/"
-        formMethod="get"
-        formEncType="text/plain"
-        formNoValidate={false}
-      />
-    </>
-  ),
-  parameters: { controls: { disable: true } },
-}
-
-export const ResolveWorking: Story = {
-  render: () => {
-    const [state, setState] = useState<'Ready' | 'Working' | 'Completed'>('Ready')
-    const handleClick = (): void => {
-      if (state === 'Ready') {
-        setState('Working')
-        setTimeout(() => setState('Completed'), 3000)
-      } else {
-        setState('Ready')
-      }
-    }
-
-    return (
-      <Button
-        label={state}
-        working={state === 'Working'}
-        workingLabel="Button is doing some work"
-        workingLabelHidden
-        onClick={handleClick}
-      />
-    )
-  },
-}

package/src/Button/IconButton/_docs/v2/IconButton.mdx

@@ -1,24 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
-import * as IconButtonStories from './IconButton.stories'
-
-<Meta of={IconButtonStories} />
-
-# IconButton (v2)
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Button/IconButton"
-  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?type=design&node-id=5-539&mode=design&t=HKGcnRVyIDipQ2OI-0"
-  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button"
-
-/>
-
-<KAIOInstallation exportNames="IconButton" family="actions" version="2" />
-
-## Overview
-
-A button with an icon and no visible text (a label is required for accessibility).
-Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
-
-<Canvas of={IconButtonStories.Playground} />
-<Controls of={IconButtonStories.Playground} />

package/src/Button/IconButton/_docs/v2/IconButton.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Icon } from '~components/__rc__/Icon'
-import { IconButton } from '../../index'
-
-const meta = {
-  title: 'Components/IconButton/IconButton (v2)',
-  component: IconButton,
-  argTypes: {
-    icon: {
-      options: ['MeatballsIcon', 'AddIcon'],
-      control: { type: 'radio' },
-      mapping: {
-        MeatballsIcon: <Icon name="more_horiz" isPresentational />,
-        AddIcon: <Icon name="add" isPresentational />,
-      },
-    },
-  },
-  args: {
-    label: 'icon button',
-    icon: <Icon name="more_horiz" isPresentational />,
-  },
-} satisfies Meta<typeof IconButton>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'shown',
-      },
-    },
-  },
-}

package/src/Menu/_docs/v2/Menu.mdx

@@ -1,31 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
-import * as MenuStories from './Menu.stories'
-
-<Meta of={MenuStories} />
-
-# Menu (v2)
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Menu"
-  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A39909&t=P1w10jr2cpPuaayw-1"
-  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082059782/Menu"
-
-/>
-
-<KAIOInstallation
-  exportNames={['Menu', 'MenuDropdown', 'MenuList', 'MenuItem']}
-  family="actions"
-  version="2"
-/>
-
-## Overview
-
-A menu contains links to places or button actions. It does NOT show a selected item at all and the menu button text never changes.
-
-<Canvas of={MenuStories.Playground} />
-<Controls of={MenuStories.Playground} />
-
-## API
-
-Coming soon.

package/src/Menu/_docs/v2/Menu.stories.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Button } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
-import { Menu, MenuHeading, MenuItem, MenuList } from '../../index'
-import * as MenuV1Stories from '../Menu.stories'
-
-const meta = {
-  title: 'Components/Menu/Menu (v2)',
-  component: Menu,
-  args: {
-    button: (
-      <Button
-        label="Actions"
-        icon={<Icon name="keyboard_arrow_down" isPresentational />}
-        iconPosition="end"
-      />
-    ),
-    children: (
-      <MenuList>
-        <MenuItem
-          onClick={() => {
-            alert('Duplicated!')
-          }}
-          icon={<Icon name="content_copy" isPresentational isFilled />}
-          label="Duplicate item"
-        />
-        <MenuList heading={<MenuHeading>Extra links</MenuHeading>}>
-          <MenuItem
-            href="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082059782/Menu"
-            label="Learn more about Menu"
-            destructive
-          />
-        </MenuList>
-      </MenuList>
-    ),
-  },
-  decorators: [
-    (Story) => (
-      <div className="flex mt-[60px] gap-12">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof Menu>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = MenuV1Stories.Playground