@kaizen/components 2.5.0 → 3.0.0

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

@@ -24,12 +24,7 @@ export type SelectProps = {
      * @default false
      */
     fullWidth?: boolean;
-    /**
-     * @deprecated Use of placeholder text goes against our a11y standards.
-     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
-     */
-    placeholder?: string;
-} & ReactSelectProps<any, boolean>;
+} & Omit<ReactSelectProps<any, boolean>, 'placeholder'>;
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
@@ -57,13 +52,8 @@ export declare const Select: React.ForwardRefExoticComponent<{
      * @default false
      */
     fullWidth?: boolean;
-    /**
-     * @deprecated Use of placeholder text goes against our a11y standards.
-     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
-     */
-    placeholder?: string;
-} & Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<any, boolean, import("react-select").GroupBase<any>>, "onChange" | "value" | "inputValue" | "onInputChange" | "menuIsOpen" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<any, boolean, import("react-select").GroupBase<any>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<any> & React.RefAttributes<any>>;
-interface AsyncProps extends ReactAsyncSelectProps<any, boolean, any>, ReactSelectProps<any, boolean, any> {
+} & Omit<ReactSelectProps<any, boolean>, "placeholder"> & React.RefAttributes<any>>;
+interface AsyncProps extends Omit<ReactAsyncSelectProps<any, boolean, any>, 'placeholder'>, Omit<ReactSelectProps<any, boolean, any>, 'placeholder'> {
 }
 export declare const AsyncSelect: React.ForwardRefExoticComponent<AsyncProps & React.RefAttributes<any>>;
 export {};

package/dist/types/SingleSelect/SingleSelect.d.ts

@@ -46,22 +46,17 @@ export type SingleSelectProps<Option extends SingleSelectOption = SingleSelectOp
      * Creates a portal for the Popover to the matching element id
      */
     portalContainerId?: string;
-    /**
-     * @deprecated Use of placeholder text goes against our a11y standards.
-     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
-     */
-    placeholder?: string;
     /**
      * Handler that is called when the selection changes.
      */
     onSelectionChange?: (key: Key) => void;
-} & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>;
+} & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps | 'placeholder'>>;
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
  */
 export declare const SingleSelect: {
-    <Option extends SingleSelectOption = SingleSelectOption>({ label, items, id: propsId, trigger, children, status, validationMessage, isReversed, isRequired, isFullWidth, classNameOverride, selectedKey, description, placeholder, isDisabled, onSelectionChange, portalContainerId, ...restProps }: SingleSelectProps<Option>): JSX.Element;
+    <Option extends SingleSelectOption = SingleSelectOption>({ label, items, id: propsId, trigger, children, status, validationMessage, isReversed, isRequired, isFullWidth, classNameOverride, selectedKey, description, isDisabled, onSelectionChange, portalContainerId, ...restProps }: SingleSelectProps<Option>): JSX.Element;
     displayName: string;
     Section: {
         <Option extends SingleSelectOption = SingleSelectOption>({ section, }: import("./subcomponents").ListBoxSectionProps<Option>): JSX.Element;
@@ -79,22 +74,5 @@ export declare const SingleSelect: {
         <Option extends SingleSelectOption = SingleSelectOption>({ item, }: import("./subcomponents").ListItemProps<Option>): JSX.Element;
         displayName: string;
     };
-    TriggerButton: React.ForwardRefExoticComponent<{
-        label: React.ReactNode;
-        labelProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
-        value: React.ReactNode;
-        valueProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
-        isOpen?: boolean;
-        placeholder?: string;
-        status?: "error" | "caution";
-        isDisabled?: boolean;
-        isReversed?: boolean;
-    } & Omit<React.HTMLAttributes<HTMLButtonElement>, "className"> & {
-        classNameOverride?: string;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    ListBox: {
-        <Option extends SingleSelectOption>({ children, menuProps, classNameOverride, ...restProps }: import("./subcomponents").SingleListBoxProps<Option>): JSX.Element;
-        displayName: string;
-    };
 };
 export {};

package/dist/types/SingleSelect/subcomponents/SelectToggle/SelectToggle.d.ts

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

package/dist/types/TextArea/TextArea.d.ts

@@ -9,12 +9,7 @@ export type TextAreaProps = {
      */
     autogrow?: boolean;
     reversed?: boolean;
-    /**
-     * @deprecated Use of placeholder text goes against our a11y standards.
-     * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
-     */
-    placeholder?: string;
-} & OverrideClassName<TextareaHTMLAttributes<HTMLTextAreaElement>>;
+} & OverrideClassName<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder'>>;
 export declare const TextArea: {
     ({ textAreaRef: propsTextAreaRef, status, autogrow, reversed, rows, defaultValue, value, disabled, onChange: propsOnChange, ...restProps }: TextAreaProps): JSX.Element;
     displayName: string;

package/dist/types/TimeField/TimeField.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type TimeFieldStateOptions } from '@react-stately/datepicker';
 import { type OverrideClassName } from "../types/OverrideClassName";
 import { type StatusType, type ValueType } from './types';
-type OmittedTimeFieldProps = 'errorMessage' | 'validationState' | 'value' | 'onChange' | 'label' | 'hideTimeZone';
+type OmittedTimeFieldProps = 'errorMessage' | 'value' | 'onChange' | 'label' | 'hideTimeZone';
 export type TimeFieldProps = {
     id?: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.5.0",
+  "version": "3.0.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -122,7 +122,6 @@
     "react-popper": "^2.3.0",
     "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
-    "resize-observer-polyfill": "^1.5.1",
     "use-debounce": "^10.0.6",
     "uuid": "^13.0.0"
   },

package/src/Button/Button.tsx

@@ -22,11 +22,6 @@ export type ButtonUIProps = {
   iconPosition?: 'start' | 'end'
   /** Controls if the button inherits width from its parent. @default "false" */
   isFullWidth?: boolean
-  /**
-   * Controls the reversed style of Button
-   * @deprecated Use the ReversedColors Provider instead. This is here to support gradual migration to the ReversedColors Provider and will take precedence if a value is provided. {@link https://cultureamp.design/?path=/docs/actions-button-button-next-api-specification--docs#variants}
-   */
-  isReversed?: boolean
 }
 
 export type ButtonProps = ButtonUIProps &
@@ -51,13 +46,11 @@ export const Button = forwardRef(
       isPending,
       hasHiddenPendingLabel: propsHasHiddenPendingLabel = false,
       pendingLabel,
-      isReversed,
       ...restProps
     }: ButtonProps,
     ref: React.ForwardedRef<HTMLButtonElement>,
   ) => {
-    const shouldUseReverse = useReversedColors()
-    const isReversedVariant = isReversed ?? shouldUseReverse
+    const isReversedVariant = useReversedColors()
     const pendingProps: PendingButtonProps = isPending
       ? {
           isPending,

package/src/Button/_docs/Button--api-specification.mdx

@@ -34,7 +34,6 @@ The following example and table showcases the essential props that enable the co
     'className',
     'size',
     'variant',
-    'isReversed',
     'onPress',
     'icon',
     'iconPosition',

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -4,6 +4,7 @@ import { DayPicker, type PropsBase, type PropsRange } from 'react-day-picker'
 import { Icon } from '~components/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
+import { type DeprecatedReactDayPickerProps } from '../types'
 import { isInvalidDate } from '../utils'
 import styles from './CalendarRange.module.scss'
 
@@ -13,7 +14,9 @@ export type CalendarRangeProps = {
   id?: string
   onMount?: (calendarElement: CalendarRangeElement) => void
   hasDivider?: boolean
-} & OverrideClassName<Omit<PropsRange & Omit<PropsBase, 'mode'>, 'mode'>>
+} & OverrideClassName<
+  Omit<PropsRange & Omit<PropsBase, 'mode'>, 'mode' | DeprecatedReactDayPickerProps>
+>
 
 export const CalendarRange = ({
   id,

package/src/Calendar/CalendarSingle/CalendarSingle.tsx

@@ -4,6 +4,7 @@ import { DayPicker, type PropsBase, type PropsSingle } from 'react-day-picker'
 import { Icon } from '~components/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
+import { type DeprecatedReactDayPickerProps } from '../types'
 import { isInvalidDate, isValidWeekStartsOn } from '../utils'
 import styles from './CalendarSingle.module.scss'
 
@@ -14,7 +15,9 @@ export type CalendarSingleProps = {
   onMount?: (calendarElement: CalendarSingleElement) => void
   /** Exposes the react-day-picker component prop. Please be aware, consumers using this will have to guarentee functions as expected */
   components?: PropsBase['components']
-} & OverrideClassName<Omit<PropsSingle & Omit<PropsBase, 'mode'>, 'mode'>>
+} & OverrideClassName<
+  Omit<PropsSingle & Omit<PropsBase, 'mode'>, 'mode' | DeprecatedReactDayPickerProps>
+>
 
 export const CalendarSingle = ({
   id,

package/src/Calendar/types.ts

@@ -5,6 +5,24 @@ export type { DateInterval, DateRange }
 
 export type DisabledDays = DayPickerProps['disabled']
 
+export type DeprecatedReactDayPickerProps =
+  | 'fromDate'
+  | 'fromMonth'
+  | 'fromYear'
+  | 'toDate'
+  | 'toMonth'
+  | 'toYear'
+  | 'initialFocus'
+  | 'onDayKeyUp'
+  | 'onDayKeyPress'
+  | 'onDayPointerEnter'
+  | 'onDayPointerLeave'
+  | 'onDayTouchCancel'
+  | 'onDayTouchEnd'
+  | 'onDayTouchMove'
+  | 'onDayTouchStart'
+  | 'onWeekNumberClick'
+
 export type DisabledDayMatchers = {
   /**
    * Accepts an array of singluar dates and disables them.

package/src/GuidanceBlock/GuidanceBlock.module.css

@@ -18,9 +18,6 @@
     box-shadow: var(--shadow-small-box-shadow);
     position: relative;
     top: -1px;
-    transition:
-      opacity var(--animation-duration-slow) ease,
-      margin-top var(--animation-duration-fast) var(--animation-duration-slow) ease;
     color: var(--color-purple-800);
 
     @media (width >= 1024px) {
@@ -130,11 +127,6 @@
     }
   }
 
-  .hidden {
-    opacity: 0;
-    margin-bottom: 0;
-  }
-
   .headingWrapper {
     margin-bottom: var(--spacing-24);
   }

package/src/GuidanceBlock/GuidanceBlock.spec.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
-import { cleanup, render, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
+import { cleanup, render } from '@testing-library/react'
 import { vi } from 'vitest'
 import { Informative } from '~components/Illustration'
 import { GuidanceBlock } from './GuidanceBlock'
-const user = userEvent.setup()
 
 window.matchMedia = vi.fn().mockImplementation(() => ({
   matches: false,
@@ -17,29 +15,6 @@ window.matchMedia = vi.fn().mockImplementation(() => ({
 describe('GuidanceBlock', () => {
   afterEach(cleanup)
 
-  it('calls the action function when action button is clicked', async () => {
-    const onAction = vi.fn()
-    const { container } = render(
-      <GuidanceBlock
-        illustration={<Informative alt="" />}
-        text={{
-          title: 'This is the call to action title',
-          description:
-            'Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.',
-        }}
-        actions={{
-          primary: { label: 'Action!', onClick: onAction },
-        }}
-      />,
-    )
-    const actionButton = container.querySelector('button')
-    if (actionButton) await user.click(actionButton)
-
-    await waitFor(() => {
-      expect(onAction).toHaveBeenCalledTimes(1)
-    })
-  })
-
   it('has a default title tag of h3', () => {
     const { getByRole } = render(
       <GuidanceBlock

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -1,36 +1,18 @@
-import React, { useState } from 'react'
+import React from 'react'
 import classNames from 'classnames'
-import { Button as V1Button, type ButtonProps as V1ButtonProps } from '~components/ButtonV1'
 import { Heading, type HeadingProps } from '~components/Heading'
-import { Icon } from '~components/Icon'
 import { type SceneProps, type SpotProps } from '~components/Illustration'
 import { Text } from '~components/Text'
-import { Tooltip, type TooltipProps } from '~components/TooltipV1'
 import { useMediaQueries } from '~components/utils/useMediaQueries'
 import { type VariantType } from './types'
 import styles from './GuidanceBlock.module.css'
 
-export type ActionProps = V1ButtonProps & {
-  'tooltip'?: TooltipProps
-  'aria-label'?: string
-  'aria-labelledby'?: string
-  'aria-describedby'?: string
-}
-
 type LayoutType = 'default' | 'inline' | 'stacked'
 
 type IllustrationType = 'spot' | 'scene'
 
 type TextAlignment = 'center' | 'left'
 
-type GuidanceBlockActions = {
-  primary: ActionProps
-  secondary?: ActionProps
-  dismiss?: {
-    onClick: () => void
-  }
-}
-
 type BaseGuidanceBlockProps = {
   layout?: LayoutType
   illustration: React.ReactElement<SpotProps | SceneProps>
@@ -39,15 +21,9 @@ type BaseGuidanceBlockProps = {
    */
   illustrationType?: IllustrationType
   smallScreenTextAlignment?: TextAlignment
-  /** @deprecated use the `actionsSlot` prop with Button/next instead */
-  actions?: GuidanceBlockActions
   /** A slot for the primary and secondary action. It is recommended to use the {@link https://cultureamp.design/?path=/docs/components-button-button-next-api-specification--docs | Button} or {@link https://cultureamp.design/?path=/docs/components-linkbutton-usage-guidelines--docs | LinkButton} wrapped in fragment. */
   actionsSlot?: React.ReactNode
-  /** @deprecated this is no longer a used feature and is only the deprecated `actions` prop, ie: {secondary: { label: "Dismiss action" }}` */
-  secondaryDismiss?: boolean
   variant?: VariantType
-  /**  @deprecated use the `actionsSlot` and pass the icon into the JSX elements */
-  withActionButtonArrow?: boolean
   noMaxWidth?: boolean
 }
 
@@ -65,19 +41,6 @@ type GuidanceBlockPropsWithContent = {
 
 export type GuidanceBlockProps = GuidanceBlockWithText | GuidanceBlockPropsWithContent
 
-export type GuidanceBlockState = {
-  hidden: boolean
-  removed: boolean
-}
-
-type WithTooltipProps = {
-  children: React.ReactNode
-  tooltipProps?: TooltipProps
-}
-
-const WithTooltip = ({ tooltipProps, children }: WithTooltipProps): JSX.Element =>
-  tooltipProps ? <Tooltip {...tooltipProps}>{children}</Tooltip> : <>{children}</>
-
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
@@ -85,63 +48,26 @@ const WithTooltip = ({ tooltipProps, children }: WithTooltipProps): JSX.Element
 export const GuidanceBlock = ({
   layout = 'default',
   variant = 'default',
-  withActionButtonArrow = true,
   noMaxWidth = false,
   illustrationType = 'spot',
   smallScreenTextAlignment = 'center',
-  actions,
   illustration,
-  secondaryDismiss,
   actionsSlot,
   ...restProps
 }: GuidanceBlockProps): JSX.Element => {
-  const [hidden, setHidden] = useState<boolean>(false)
-  const [removed, setRemoved] = useState<boolean>(false)
   const { queries } = useMediaQueries()
 
-  const containerRef = React.createRef<HTMLDivElement>()
-
-  const handleDismissBanner = (): void => {
-    setHidden(true)
-    actions?.dismiss?.onClick()
-  }
-
-  const onTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>): void => {
-    // Be careful: this assumes the final CSS property to be animated is "margin-top".
-    if (hidden && e.propertyName === 'margin-top') {
-      setRemoved(true)
-    }
-  }
-
-  const marginTop = (): string => {
-    if (hidden && containerRef.current) {
-      return -containerRef.current.clientHeight + 'px'
-    }
-
-    return '0'
-  }
-
-  if (removed) {
-    return <></>
-  }
-
   return (
     <div
       className={classNames(
         styles.banner,
         variant && styles[variant],
         layout && styles[layout],
-        hidden && styles.hidden,
         queries.isSmall && styles.centerContent,
         noMaxWidth && styles.noMaxWidth,
         illustrationType === 'scene' && styles.hasSceneIllustration,
         smallScreenTextAlignment === 'left' && styles.smallScreenTextAlignment,
       )}
-      style={{
-        marginTop: marginTop(),
-      }}
-      ref={containerRef}
-      onTransitionEnd={onTransitionEnd}
     >
       <div className={styles.illustrationWrapper}>
         <div className={styles.illustration}>
@@ -166,43 +92,7 @@ export const GuidanceBlock = ({
             </>
           )}
         </div>
-        {actions?.primary || actionsSlot ? (
-          <div className={styles.buttonContainer}>
-            {actions?.primary && (
-              <>
-                <WithTooltip tooltipProps={actions.primary.tooltip}>
-                  <V1Button
-                    icon={
-                      withActionButtonArrow ? (
-                        <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
-                      ) : undefined
-                    }
-                    iconPosition="end"
-                    {...actions.primary}
-                    fullWidth={queries.isSmall}
-                  />
-                </WithTooltip>
-                {actions?.secondary && (
-                  <WithTooltip tooltipProps={actions.secondary.tooltip}>
-                    <div className={styles.secondaryAction}>
-                      <V1Button
-                        secondary
-                        {...actions.secondary}
-                        onClick={
-                          secondaryDismiss
-                            ? (): void => handleDismissBanner()
-                            : actions?.secondary?.onClick
-                        }
-                        fullWidth={queries.isSmall}
-                      />
-                    </div>
-                  </WithTooltip>
-                )}
-              </>
-            )}
-            {!actions && actionsSlot && actionsSlot}
-          </div>
-        ) : null}
+        {actionsSlot && <div className={styles.buttonContainer}>{actionsSlot}</div>}
       </div>
     </div>
   )

package/src/GuidanceBlock/_docs/GuidanceBlock.stories.tsx

@@ -39,9 +39,6 @@ const meta = {
     illustration: <Informative alt="" />,
   },
   argTypes: {
-    actions: {
-      control: false,
-    },
     illustrationType: {
       description:
         'Sets the how the width and aspect ratio will respond to the Illustration passed in.',
@@ -138,42 +135,6 @@ export const Playground: Story = {
   },
 }
 
-export const Actions: Story = {
-  args: {
-    content: <ContentComponent />,
-    actions: {
-      primary: {
-        label: 'Label',
-        onClick: () => alert('tada: 🎉'),
-      },
-      secondary: {
-        label: 'Label',
-        href: '#',
-      },
-    },
-  },
-}
-
-export const Tooltip: Story = {
-  args: {
-    content: <ContentComponent />,
-    actions: {
-      primary: {
-        label: 'Label',
-        onClick: () => alert('tada: 🎉'),
-        tooltip: {
-          text: 'Opens in a new tab',
-          mood: 'cautionary',
-        },
-      },
-      secondary: {
-        label: 'Label',
-        href: '#',
-      },
-    },
-  },
-}
-
 export const CustomContent: Story = {
   args: {
     content: <ContentComponent />,
@@ -214,57 +175,6 @@ export const Variants: Story = {
   },
 }
 
-export const ActionsVsActionsSlot: Story = {
-  args: {
-    layout: 'default',
-    illustration: <Informative alt="" />,
-    content: <ContentComponent />,
-    actions: {
-      dismiss: {
-        onClick: () => {
-          alert('Dismissed')
-        },
-      },
-      primary: {
-        label: 'Label',
-        onClick: () => alert('tada: 🎉'),
-      },
-      secondary: {
-        label: 'Label',
-        href: '#',
-      },
-    },
-    secondaryDismiss: true,
-  },
-  render: (args) => (
-    <div className="flex flex-col gap-16">
-      <GuidanceBlock
-        layout="default"
-        illustration={<Informative alt="" />}
-        content={<ContentComponent />}
-        actions={args.actions}
-        secondaryDismiss
-      />
-      <GuidanceBlock
-        layout="default"
-        illustration={<Informative alt="" />}
-        content={<ContentComponent />}
-        secondaryDismiss={true}
-        actionsSlot={
-          <>
-            <Button size="large" onPress={() => alert('tada: 🎉')} slot="primary">
-              Label
-            </Button>
-            <Button variant="tertiary" size="large" onPress={() => alert('tada: 🎉')}>
-              Label
-            </Button>
-          </>
-        }
-      />
-    </div>
-  ),
-}
-
 export const ActionsSlot: Story = {
   args: {
     layout: 'default',