diff --git a/.changeset/brave-vans-clean.md b/.changeset/brave-vans-clean.md new file mode 100644 index 0000000000..38feebc679 --- /dev/null +++ b/.changeset/brave-vans-clean.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-components': minor +--- + +Added the `post-tooltip` component. diff --git a/packages/components/.eslintrc.json b/packages/components/.eslintrc.json index b3d873ca2d..1577d3aa31 100644 --- a/packages/components/.eslintrc.json +++ b/packages/components/.eslintrc.json @@ -64,6 +64,7 @@ "@stencil-community/required-jsdoc": "error", "@stencil-community/reserved-member-names": "error", "@stencil-community/single-export": "error", - "@stencil-community/strict-mutable": "error" + "@stencil-community/strict-mutable": "error", + "react/jsx-no-bind": "off" } } diff --git a/packages/components/cypress/e2e/tooltip.cy.ts b/packages/components/cypress/e2e/tooltip.cy.ts new file mode 100644 index 0000000000..cd619decdf --- /dev/null +++ b/packages/components/cypress/e2e/tooltip.cy.ts @@ -0,0 +1,54 @@ +describe('tooltips', () => { + describe('default', () => { + beforeEach(() => { + cy.getComponent('tooltip', 'multiple'); + cy.get('button[data-tooltip-target="tooltip-multiple"]:first-of-type').as('target1'); + cy.get('button[data-tooltip-target="tooltip-multiple"]:last-of-type').as('target2'); + cy.get('#tooltip-multiple').shadow().find('div[popover]').as('tooltip'); + }); + + it('should display a tooltip', () => { + cy.get('@tooltip').should('not.be.visible'); + cy.get('@target2').focus(); + cy.get('@tooltip').should('be.visible'); + cy.get('@target2').blur(); + cy.get('@tooltip').should('not.be.visible'); + }); + + it('tooltip placement right', () => { + cy.get('#tooltip-multiple').invoke('attr', 'placement', 'right'); + cy.get('@target2').focus(); + cy.wait(10); + cy.get('@tooltip') + .should('have.css', 'left') + .then((v: any) => { + expect(parseInt(v)).to.be.greaterThan(150); + }); + }); + }); + + describe('non-focusable element', () => { + beforeEach(() => { + cy.getComponent('tooltip', 'non-focusable'); + cy.get('cite[data-tooltip-target="tooltip-non-focusable"]').as('target'); + }); + + it('should add tabindex', () => { + cy.get('@target').should('have.attr', 'tabindex').should('eq', '0'); + }); + }); + + describe('aria', () => { + beforeEach(() => { + cy.getComponent('tooltip', 'multiple'); + cy.get('button[data-tooltip-target="tooltip-multiple"]:first-of-type').as('target1'); + cy.get('@target1').invoke('attr', 'aria-describedby', 'existing-value'); + }); + + it('should append aria-describedby without deleting existing values', () => { + cy.get('@target1') + .should('have.attr', 'aria-describedby') + .should('eq', 'existing-value tooltip-multiple'); + }); + }); +}); diff --git a/packages/components/package.json b/packages/components/package.json index 1fd23f95ad..ae2b86e256 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -37,13 +37,17 @@ "lint": "eslint src/**/*{.ts,.tsx}" }, "dependencies": { + "@floating-ui/dom": "1.5.1", + "@oddbird/popover-polyfill": "0.2.2", "@stencil/core": "3.4.2", - "@swisspost/design-system-styles": "workspace:6.4.0" + "@swisspost/design-system-styles": "workspace:6.4.0", + "ally.js": "1.4.1", + "long-press-event": "2.4.6" }, "devDependencies": { "@percy/cli": "1.27.2", "@percy/cypress": "3.1.2", - "@stencil-community/eslint-plugin": "^0.5.0", + "@stencil-community/eslint-plugin": "0.5.0", "@stencil/react-output-target": "0.5.3", "@stencil/sass": "3.0.5", "@types/jest": "27.5.2", diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index b9d13c000e..82d0df09c5 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -5,6 +5,10 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; +import { BackgroundColor } from "./components/post-tooltip/types"; +import { Placement } from "@floating-ui/dom"; +export { BackgroundColor } from "./components/post-tooltip/types"; +export { Placement } from "@floating-ui/dom"; export namespace Components { interface PostCollapsible { /** @@ -75,6 +79,31 @@ export namespace Components { */ "show": (panelName: string) => Promise; } + interface PostTooltip { + /** + * Defines the background color of the tooltip. Choose the one that provides the best contrast in your scenario. + */ + "backgroundColor"?: BackgroundColor; + /** + * Programmatically hide this tooltip + */ + "hide": () => Promise; + /** + * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. + */ + "placement"?: Placement; + /** + * Programmatically display the tooltip + * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown + */ + "show": (target: HTMLElement) => Promise; + /** + * Toggle tooltip display + * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown + * @param force Pass true to always show or false to always hide + */ + "toggle": (target: HTMLElement, force?: boolean) => Promise; + } } export interface PostTabsCustomEvent extends CustomEvent { detail: T; @@ -114,12 +143,19 @@ declare global { prototype: HTMLPostTabsElement; new (): HTMLPostTabsElement; }; + interface HTMLPostTooltipElement extends Components.PostTooltip, HTMLStencilElement { + } + var HTMLPostTooltipElement: { + prototype: HTMLPostTooltipElement; + new (): HTMLPostTooltipElement; + }; interface HTMLElementTagNameMap { "post-collapsible": HTMLPostCollapsibleElement; "post-icon": HTMLPostIconElement; "post-tab-header": HTMLPostTabHeaderElement; "post-tab-panel": HTMLPostTabPanelElement; "post-tabs": HTMLPostTabsElement; + "post-tooltip": HTMLPostTooltipElement; } } declare namespace LocalJSX { @@ -188,12 +224,23 @@ declare namespace LocalJSX { */ "onTabChange"?: (event: PostTabsCustomEvent) => void; } + interface PostTooltip { + /** + * Defines the background color of the tooltip. Choose the one that provides the best contrast in your scenario. + */ + "backgroundColor"?: BackgroundColor; + /** + * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. + */ + "placement"?: Placement; + } interface IntrinsicElements { "post-collapsible": PostCollapsible; "post-icon": PostIcon; "post-tab-header": PostTabHeader; "post-tab-panel": PostTabPanel; "post-tabs": PostTabs; + "post-tooltip": PostTooltip; } } export { LocalJSX as JSX }; @@ -208,6 +255,7 @@ declare module "@stencil/core" { "post-tab-header": LocalJSX.PostTabHeader & JSXBase.HTMLAttributes; "post-tab-panel": LocalJSX.PostTabPanel & JSXBase.HTMLAttributes; "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes; + "post-tooltip": LocalJSX.PostTooltip & JSXBase.HTMLAttributes; } } } diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss new file mode 100644 index 0000000000..88bc969685 --- /dev/null +++ b/packages/components/src/components/post-tooltip/post-tooltip.scss @@ -0,0 +1,59 @@ +@use 'sass:meta'; +@use 'sass:math'; +@use '@swisspost/design-system-styles/variables/color'; +@use '@swisspost/design-system-styles/variables/commons'; +@use '@swisspost/design-system-styles/variables/spacing'; +@use '@swisspost/design-system-styles/mixins/color' as color-mx; + +// Puts polyfilled styles in a separate layer so they are easy to override +// Can be removed as soon as popover is supported by all major browsers +// https://caniuse.com/?search=popover +@layer polyfill { + @include meta.load-css('@oddbird/popover-polyfill/dist/popover.css'); +} + +:host { + // Sets default background color + @include color-mx.colored-background(color.$gray-80); +} + +div { + position: absolute; + z-index: commons.$zindex-tooltip; + + width: max-content; + max-width: 30ch; + margin: 0; + padding: spacing.$size-micro spacing.$size-mini; + + color: inherit; + background-color: inherit; + border-color: transparent; // Keeping the default border for HCM + border-radius: commons.$border-radius; + + // Keeps the little arrow visible + overflow: visible; + + // Prevents instantly closing tooltips because the opening tooltip opens under the cursor and the trigger gets a mouseleave + pointer-events: none; +} + +.arrow { + position: absolute; + // Diagonale of 16px -> 1rem -> 1/1.41 = ~0.7 + // https://www.omnicalculator.com/math/square-diagonal?c=CHF&v=hide:0,diagonal:16!cm + width: math.div(spacing.$spacer, math.sqrt(2)); + aspect-ratio: 1/1; + background-color: inherit; + rotate: 45deg; + pointer-events: none; + z-index: -1; + + // High contrast mode borders + border-right: 2px solid transparent; + border-bottom: 2px solid transparent; +} + +.bg-yellow { + @include color-mx.colored-background(color.$yellow); +} diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx new file mode 100644 index 0000000000..90c5134c4b --- /dev/null +++ b/packages/components/src/components/post-tooltip/post-tooltip.tsx @@ -0,0 +1,282 @@ +import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core'; +import { + arrow, + autoUpdate, + computePosition, + flip, + inline, + offset, + Placement, + shift, +} from '@floating-ui/dom'; +import isFocusable from 'ally.js/esm/is/focusable'; + +// Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green +import '@oddbird/popover-polyfill'; + +// Patch for long press on touch devices +import 'long-press-event'; + +import { version } from '../../../package.json'; +import { checkOneOf } from '../../utils'; +import { BACKGROUND_COLOR, BackgroundColor } from './types'; + +const SIDE_MAP = { + top: 'bottom', + right: 'left', + bottom: 'top', + left: 'right', +}; + +interface PopoverElement { + showPopover: () => void; + hidePopover: () => void; + togglePopover: (force?: boolean) => boolean; +} + +@Component({ + tag: 'post-tooltip', + styleUrl: 'post-tooltip.scss', + shadow: true, +}) +export class PostTooltip { + private tooltipRef: HTMLDivElement & PopoverElement; + private arrowRef: HTMLElement; + private clearAutoUpdate: () => void; + private readonly localShowTooltip: (e: Event) => Promise; + private readonly localHideTooltip: () => Promise; + private readonly localToggleTooltip: () => Promise; + private eventTarget: Element; + + @Element() host: HTMLPostTooltipElement; + + @State() tooltipClasses: string; + + /** + * Defines the background color of the tooltip. + * Choose the one that provides the best contrast in your scenario. + */ + @Prop() readonly backgroundColor?: BackgroundColor = 'primary'; + + /** + * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. + * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted + * towards the viewport if they would overlap edge boundaries. + */ + @Prop() readonly placement?: Placement = 'top'; + + @Watch('backgroundColor') + validateBackgroundColor(newValue = this.backgroundColor) { + checkOneOf( + newValue, + BACKGROUND_COLOR, + `The post-tooltip "background-color" prop should contain one of those values: ${BACKGROUND_COLOR.join( + ', ', + )}`, + ); + + if (newValue === 'yellow') { + this.tooltipClasses = 'bg-yellow'; + } else { + this.tooltipClasses = 'bg-primary'; + } + } + + constructor() { + // Create local versions of event handlers for de-registration + // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class + this.localShowTooltip = e => this.show(e.target as HTMLElement); + this.localHideTooltip = this.hide.bind(this); + this.localToggleTooltip = this.toggle.bind(this); + } + + componentWillLoad() { + this.validateBackgroundColor(); + + // Append tooltip host to the end of the body to get around overflow: hidden restrictions + // for browsers that don't support popover yet + document.body.appendChild(this.host); + } + + connectedCallback() { + if (!this.host.id) { + throw new Error( + 'No id set: must have an id, linking it to it\'s target element using the data-tooltip-target attribute.', + ); + } + + if (!this.triggers) { + throw new Error( + `No trigger found for , please add the 'data-tooltip-target="${this.host.id}" attribute to the trigger element.`, + ); + } + + // Patch popovertargetaction="interest" until it's implemented + // https://github.com/openui/open-ui/issues/767#issuecomment-1654177227 + this.triggers.forEach(trigger => this.patchPopoverTargetActionInterest(trigger)); + } + + /** + * Remove a bunch of event listeners if the tooltip gets removed from the DOM + */ + disconnectedCallback() { + this.triggers.forEach(trigger => { + trigger.removeEventListener('mouseenter', this.localShowTooltip); + trigger.removeEventListener('mouseleave', this.localHideTooltip); + trigger.removeEventListener('focus', this.localShowTooltip); + trigger.removeEventListener('blur', this.localHideTooltip); + trigger.removeEventListener('long-press', this.localShowTooltip); + }); + if (this.tooltipRef) + this.tooltipRef.removeEventListener('beforetoggle', this.localToggleTooltip); + if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate(); + } + + componentDidLoad() { + // Has the benefit of rendering the tooltip without the popover attribute which + // causes the tooltip to show up on the page if it's not linked to a target. This makes + // the error obvious. + if (!this.host.id || !this.triggers) return false; + + this.tooltipRef.setAttribute('popover', ''); + this.tooltipRef.addEventListener('beforetoggle', this.handleToggle.bind(this)); + } + + /** + * Programmatically display the tooltip + * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown + */ + @Method() + async show(target: HTMLElement) { + this.eventTarget = target; + this.tooltipRef.showPopover(); + } + + /** + * Programmatically hide this tooltip + */ + @Method() + async hide() { + this.eventTarget = null; + this.tooltipRef.hidePopover(); + } + + /** + * Toggle tooltip display + * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown + * @param force Pass true to always show or false to always hide + */ + @Method() + async toggle(target: HTMLElement, force?: boolean) { + this.eventTarget = target; + this.tooltipRef.togglePopover(force); + } + + private get triggers() { + return document.querySelectorAll(`[data-tooltip-target="${this.host.id}"]`); + } + + private patchPopoverTargetActionInterest(trigger: Element) { + trigger.addEventListener('mouseenter', this.localShowTooltip); + trigger.addEventListener('mouseleave', this.localHideTooltip); + trigger.addEventListener('focus', this.localShowTooltip); + trigger.addEventListener('blur', this.localHideTooltip); + trigger.addEventListener('long-press', this.localShowTooltip); + + // Patch missing aria-describedby attribute on the trigger without overriding existing values + const describedBy = trigger.getAttribute('aria-describedby'); + if (!describedBy?.includes(this.host.id)) { + const newDescribedBy = describedBy ? `${describedBy} ${this.host.id}` : this.host.id; + trigger.setAttribute('aria-describedby', newDescribedBy); + } + + // Patch missing focus ability on the trigger element + if (!isFocusable(trigger)) { + trigger.setAttribute('tabindex', '0'); + } + } + + /** + * Start or stop auto updates based on tooltip events. + * Tooltips can be closed or opened with other methods than class members, + * therefore listening to the toggle event is safer for cleaning up. + * @param e ToggleEvent + */ + private handleToggle(e: ToggleEvent) { + const isOpen = e.newState === 'open'; + if (isOpen) { + this.startAutoupdates(); + } else { + if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate(); + } + } + + /** + * Start listening for DOM updates, scroll events etc. that have + * an influence on tooltip positioning + */ + private startAutoupdates() { + this.clearAutoUpdate = autoUpdate( + this.eventTarget, + this.tooltipRef, + this.positionTooltip.bind(this), + ); + } + + // Tooltip and arrow positioning with floating-ui + // Docs: https://floating-ui.com/docs/computePosition + private async positionTooltip() { + const { + x, + y, + middlewareData, + placement: currentPlacement, + } = await computePosition(this.eventTarget, this.tooltipRef, { + placement: this.placement || 'top', + middleware: [ + flip(), + inline(), + shift({ padding: 8 }), + offset(12), // 4px outside of element to account for focus outline + ~arrow size + arrow({ element: this.arrowRef, padding: 8 }), + ], + }); + + // Tooltip + this.tooltipRef.style.left = `${x}px`; + this.tooltipRef.style.top = `${y}px`; + + // Arrow + // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js + const side = currentPlacement.split('-')[0]; + const { x: arrowX, y: arrowY } = middlewareData.arrow; + const staticSide = SIDE_MAP[side]; + + Object.assign(this.arrowRef.style, { + top: arrowY ? `${arrowY}px` : '', + left: arrowX ? `${arrowX}px` : '', + [staticSide]: `${-this.arrowRef.offsetWidth / 2}px`, + }); + } + + render() { + return ( + + + + ); + } +} diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md new file mode 100644 index 0000000000..caff7b0eab --- /dev/null +++ b/packages/components/src/components/post-tooltip/readme.md @@ -0,0 +1,51 @@ +# post-tooltip + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `backgroundColor` | `background-color` | Defines the background color of the tooltip. Choose the one that provides the best contrast in your scenario. | `"primary" \| "yellow"` | `'primary'` | +| `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` | + + +## Methods + +### `hide() => Promise` + +Programmatically hide this tooltip + +#### Returns + +Type: `Promise` + + + +### `show(target: HTMLElement) => Promise` + +Programmatically display the tooltip + +#### Returns + +Type: `Promise` + + + +### `toggle(target: HTMLElement, force?: boolean) => Promise` + +Toggle tooltip display + +#### Returns + +Type: `Promise` + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/post-tooltip/types.ts b/packages/components/src/components/post-tooltip/types.ts new file mode 100644 index 0000000000..2fd41958f7 --- /dev/null +++ b/packages/components/src/components/post-tooltip/types.ts @@ -0,0 +1,3 @@ +export const BACKGROUND_COLOR = ['primary', 'yellow'] as const; + +export type BackgroundColor = (typeof BACKGROUND_COLOR)[number]; diff --git a/packages/components/src/utils/property-checkers/check-one-of.ts b/packages/components/src/utils/property-checkers/check-one-of.ts index b14c755cdd..68c19df699 100644 --- a/packages/components/src/utils/property-checkers/check-one-of.ts +++ b/packages/components/src/utils/property-checkers/check-one-of.ts @@ -1,3 +1,3 @@ -export function checkOneOf(value: T, possibleValues: T[], error: string) { +export function checkOneOf(value: T, possibleValues: readonly T[], error: string) { if (!possibleValues.includes(value)) throw new Error(error); } diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 95c14346ac..ad921dfef0 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -4,10 +4,7 @@ "allowUnreachableCode": false, "declaration": false, "experimentalDecorators": true, - "lib": [ - "dom", - "es2017" - ], + "lib": ["dom", "es2017"], "moduleResolution": "node", "module": "esnext", "target": "es2017", @@ -17,11 +14,6 @@ "jsxFactory": "h", "resolveJsonModule": true }, - "include": [ - "src" - ], - "exclude": [ - "node_modules", - "**/tests" - ] + "include": ["src"], + "exclude": ["node_modules", "**/tests"] } diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.docs.mdx b/packages/documentation/src/stories/components/tooltip/tooltip.docs.mdx new file mode 100644 index 0000000000..e6be49a5e0 --- /dev/null +++ b/packages/documentation/src/stories/components/tooltip/tooltip.docs.mdx @@ -0,0 +1,32 @@ +import { Canvas, Controls, Meta } from '@storybook/blocks'; +import * as TooltipStories from './tooltip.stories'; +import LinkTo from '@storybook/addon-links/react'; + + + +# Tooltip + +
For short, informative messages or explanations.
+ + + + +## Installation + +The `` element is part of the `@swisspost/design-system-components` package. For more information, read the +getting started with components guide. + +## Examples + +### Tooltip on non-focusable elements + +If you assign a tooltip to a non-focusable element, the component will add `tabindex="0"` automatically. With that, the tooltip is also visible for keyboard users. Also, if you forget to link the tooltip and the trigger with `aria-describedby="tooltip-id"`, we've got you covered. + + + +### One tooltip on multiple elements + +The same tooltip can be displayed on multiple elements. This reduces the amount of markup necessary. + + + diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts new file mode 100644 index 0000000000..12891a6455 --- /dev/null +++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts @@ -0,0 +1,103 @@ +import { Args, Meta, StoryObj } from '@storybook/web-components'; +import { BADGE } from '../../../../.storybook/constants'; +import { html } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { useArgs } from '@storybook/preview-api'; +import { ifDefined } from 'lit/directives/if-defined.js'; + +const meta: Meta = { + title: 'Components/Tooltip', + component: 'post-tooltip', + parameters: { + badges: [BADGE.NEEDS_REVISION], + controls: { + exclude: ['class'], + }, + }, + render, + args: { + id: 'tooltip-one', + innerHTML: 'Hi there 👋', + }, + argTypes: { + innerHTML: { + description: + 'Defines the HTML markup contained in the tooltip. Markup accepted: inline content like `` or ``, but no interactive content like `` or ` + + ${unsafeHTML(innerHTML)} + + `; +} + +export default meta; +export const Default: StoryObj = {}; + +export const NonFocusable: StoryObj = { + args: { + id: 'tooltip-non-focusable', + }, + render: (args: Args) => { + return html` + This is a cite element with a tooltip on it. + + This is not the link you are looking for + + `; + }, +}; + +export const Multiple: StoryObj = { + args: { + id: 'tooltip-multiple', + }, + render: (args: Args) => { + return html` + + + + I'm the same, no matter what + + `; + }, +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 970944a426..8fd635ab34 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,12 +40,24 @@ importers: packages/components: dependencies: + '@floating-ui/dom': + specifier: 1.5.1 + version: 1.5.1 + '@oddbird/popover-polyfill': + specifier: 0.2.2 + version: 0.2.2 '@stencil/core': specifier: 3.4.2 version: 3.4.2 '@swisspost/design-system-styles': specifier: workspace:6.4.0 version: link:../styles/dist + ally.js: + specifier: 1.4.1 + version: 1.4.1 + long-press-event: + specifier: 2.4.6 + version: 2.4.6 devDependencies: '@percy/cli': specifier: 1.27.2 @@ -54,7 +66,7 @@ importers: specifier: 3.1.2 version: 3.1.2(cypress@13.2.0) '@stencil-community/eslint-plugin': - specifier: ^0.5.0 + specifier: 0.5.0 version: 0.5.0(@typescript-eslint/eslint-plugin@5.62.0)(@typescript-eslint/parser@5.62.0)(eslint-plugin-react@7.33.2)(eslint@8.50.0)(typescript@4.9.5) '@stencil/react-output-target': specifier: 0.5.3 @@ -511,7 +523,7 @@ importers: version: 7.4.5(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-designs': specifier: 7.0.5 - version: 7.0.5(@storybook/addon-docs@7.4.3)(@storybook/addons@7.4.5)(@storybook/components@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(react-dom@18.2.0)(react@18.2.0) + version: 7.0.5(@storybook/addon-docs@7.4.5)(@storybook/addons@7.4.5)(@storybook/components@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-essentials': specifier: 7.4.5 version: 7.4.5(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0) @@ -4756,14 +4768,12 @@ packages: resolution: {integrity: sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==} dependencies: '@floating-ui/utils': 0.1.1 - dev: true /@floating-ui/dom@1.5.1: resolution: {integrity: sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==} dependencies: '@floating-ui/core': 1.4.1 '@floating-ui/utils': 0.1.1 - dev: true /@floating-ui/react-dom@2.0.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==} @@ -4778,7 +4788,6 @@ packages: /@floating-ui/utils@0.1.1: resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==} - dev: true /@gar/promisify@1.1.3: resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==} @@ -5814,6 +5823,10 @@ packages: dev: true optional: true + /@oddbird/popover-polyfill@0.2.2: + resolution: {integrity: sha512-ko7x+PDZA9bHwA6hSfxjL1IhBP91JukfZq/NAe85u9rT0akFn9RKvSXymX/mS7S2mfNjE+Zw9JdLUPGvPabQAA==} + dev: false + /@open-wc/lit-helpers@0.6.0(lit@2.8.0): resolution: {integrity: sha512-9F0Rw18Lupp8hehF299yYozN4cFMTnHeCVNtz0k18/eUkcUUb6DCWerL/ASJ9lZ4bLA/YUPmrkdgZz/xe9cKeg==} peerDependencies: @@ -6909,7 +6922,7 @@ packages: - supports-color dev: true - /@storybook/addon-designs@7.0.5(@storybook/addon-docs@7.4.3)(@storybook/addons@7.4.5)(@storybook/components@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(react-dom@18.2.0)(react@18.2.0): + /@storybook/addon-designs@7.0.5(@storybook/addon-docs@7.4.5)(@storybook/addons@7.4.5)(@storybook/components@7.4.5)(@storybook/manager-api@7.4.5)(@storybook/preview-api@7.4.5)(@storybook/theming@7.4.5)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-yB1YwkVhnTI28mS+00avAf7vPAppZi2pdXQF91725g+RoiM7llY87q+c1z2/YiQNQYNm2QXpYcrcYiLQzyr0NQ==} peerDependencies: '@storybook/addon-docs': ^7.0.0 @@ -6927,7 +6940,7 @@ packages: optional: true dependencies: '@figspec/react': 1.0.3(react@18.2.0) - '@storybook/addon-docs': 7.4.3(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-docs': 7.4.5(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0) '@storybook/addons': 7.4.5(react-dom@18.2.0)(react@18.2.0) '@storybook/components': 7.4.5(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0) '@storybook/manager-api': 7.4.5(react-dom@18.2.0)(react@18.2.0) @@ -6937,40 +6950,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@storybook/addon-docs@7.4.3(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-c6r1nJY4fj/Uj9p7jHdicAS7quiK9RY0LJw+aB++FvcO1KavX33BlD2mxPIVU8a9oLJ3X4RUfNQz+OSABGy0xw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - dependencies: - '@jest/transform': 29.7.0 - '@mdx-js/react': 2.3.0(react@18.2.0) - '@storybook/blocks': 7.4.3(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0) - '@storybook/client-logger': 7.4.3 - '@storybook/components': 7.4.3(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0) - '@storybook/csf-plugin': 7.4.3 - '@storybook/csf-tools': 7.4.3 - '@storybook/global': 5.0.0 - '@storybook/mdx2-csf': 1.1.0 - '@storybook/node-logger': 7.4.3 - '@storybook/postinstall': 7.4.3 - '@storybook/preview-api': 7.4.3 - '@storybook/react-dom-shim': 7.4.3(react-dom@18.2.0)(react@18.2.0) - '@storybook/theming': 7.4.3(react-dom@18.2.0)(react@18.2.0) - '@storybook/types': 7.4.3 - fs-extra: 11.1.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - remark-external-links: 8.0.0 - remark-slug: 6.1.0 - ts-dedent: 2.2.0 - transitivePeerDependencies: - - '@types/react' - - '@types/react-dom' - - encoding - - supports-color - dev: true - /@storybook/addon-docs@7.4.5(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-KjFVeq8oL7ZC1gsk8iY3Nn0RrHHUpczmOTCd8FeVNmKD4vq+dkPb/8bJLy+jArmIZ8vRhknpTh6kp1BqB7qHGQ==} peerDependencies: @@ -7209,44 +7188,6 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/blocks@7.4.3(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-uyZVx3er1qOPFpKJtsbozBwt1Os3zqiq+2se7xDBK6ERr07zaRHLgRci7+kI8T5mdlCxYiGV+kzx5Vx5/7XaXg==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - dependencies: - '@storybook/channels': 7.4.3 - '@storybook/client-logger': 7.4.3 - '@storybook/components': 7.4.3(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0) - '@storybook/core-events': 7.4.3 - '@storybook/csf': 0.1.0 - '@storybook/docs-tools': 7.4.3 - '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.4.3(react-dom@18.2.0)(react@18.2.0) - '@storybook/preview-api': 7.4.3 - '@storybook/theming': 7.4.3(react-dom@18.2.0)(react@18.2.0) - '@storybook/types': 7.4.3 - '@types/lodash': 4.14.194 - color-convert: 2.0.1 - dequal: 2.0.3 - lodash: 4.17.21 - markdown-to-jsx: 7.2.1(react@18.2.0) - memoizerific: 1.11.3 - polished: 4.2.2 - react: 18.2.0 - react-colorful: 5.6.1(react-dom@18.2.0)(react@18.2.0) - react-dom: 18.2.0(react@18.2.0) - telejson: 7.2.0 - tocbot: 4.21.0 - ts-dedent: 2.2.0 - util-deprecate: 1.0.2 - transitivePeerDependencies: - - '@types/react' - - '@types/react-dom' - - encoding - - supports-color - dev: true - /@storybook/blocks@7.4.5(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-FhAIkCT2HrzJcKsC3mL5+uG3GrbS23mYAT1h3iyPjCliZzxfCCI9UCMUXqYx4Z/FmAGJgpsQQXiBFZuoTHO9aQ==} peerDependencies: @@ -7358,17 +7299,6 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/channels@7.4.3: - resolution: {integrity: sha512-lIoRX3EV0wKPX8ojIrJUtsOv4+Gv8r9pfJpam/NdyYd+rs0AjDK13ieINRfBMnJkfjsWa3vmZtGMBEVvDKwTMw==} - dependencies: - '@storybook/client-logger': 7.4.3 - '@storybook/core-events': 7.4.3 - '@storybook/global': 5.0.0 - qs: 6.11.2 - telejson: 7.2.0 - tiny-invariant: 1.3.1 - dev: true - /@storybook/channels@7.4.5: resolution: {integrity: sha512-zWPZn4CxPFXsrrSRQ9JD8GmTeWeFYgr3sTBpe23hnhYookCXVNJ6AcaXogrT9b2ALfbB6MiFDbZIHHTgIgbWpg==} dependencies: @@ -7439,12 +7369,6 @@ packages: global: 4.4.0 dev: true - /@storybook/client-logger@7.4.3: - resolution: {integrity: sha512-Nhngo9X4HjN00aRhgIVGWbwkWPe0Fz8PySuxnd8nAxSsz7KpdLFyYo2TbZZ3TX51FG5Fxcb0G5OHuunItP7EWQ==} - dependencies: - '@storybook/global': 5.0.0 - dev: true - /@storybook/client-logger@7.4.5: resolution: {integrity: sha512-Bn6eTAjhPDUfLpvuxhKkpDpOtkadfkSmkBNBZRu3r0Dzk2J1nNyKV5K6D8dOU4PFVof4z/gXYj5bktT29jKsmw==} dependencies: @@ -7472,29 +7396,6 @@ packages: - supports-color dev: true - /@storybook/components@7.4.3(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-qwRW8wGUuM+H6oKUXXoIDrZECXh/lzowrWXFAzZiocovYEhPtZfl/yvJLWHjOwtka3n7lA7J7EtcjWe8/tueJQ==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - dependencies: - '@radix-ui/react-select': 1.2.2(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-toolbar': 1.0.4(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0) - '@storybook/client-logger': 7.4.3 - '@storybook/csf': 0.1.0 - '@storybook/global': 5.0.0 - '@storybook/theming': 7.4.3(react-dom@18.2.0)(react@18.2.0) - '@storybook/types': 7.4.3 - memoizerific: 1.11.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - use-resize-observer: 9.1.0(react-dom@18.2.0)(react@18.2.0) - util-deprecate: 1.0.2 - transitivePeerDependencies: - - '@types/react' - - '@types/react-dom' - dev: true - /@storybook/components@7.4.5(@types/react@18.2.22)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-boskkfvMBB8CFYY9+1ofFNyKrdWXTY/ghzt7oK80dz6f2Eseo/WXK3OsCdCq5vWbLRCdbgJ8zXG8pAFi4yBsxA==} peerDependencies: @@ -7525,37 +7426,6 @@ packages: '@storybook/preview-api': 7.4.5 dev: true - /@storybook/core-common@7.4.3: - resolution: {integrity: sha512-jwIBUnWitZzw0VfKC77yN8DvTyePLVnAjbA2lPMbMIdO9ZY2lfD4AQ4QpuWsxJyAllFC4slOFDNgCDHx2AlYWw==} - dependencies: - '@storybook/core-events': 7.4.3 - '@storybook/node-logger': 7.4.3 - '@storybook/types': 7.4.3 - '@types/find-cache-dir': 3.2.1 - '@types/node': 16.18.39 - '@types/node-fetch': 2.6.6 - '@types/pretty-hrtime': 1.0.1 - chalk: 4.1.2 - esbuild: 0.18.17 - esbuild-register: 3.4.2(esbuild@0.18.17) - file-system-cache: 2.3.0 - find-cache-dir: 3.3.2 - find-up: 5.0.0 - fs-extra: 11.1.1 - glob: 10.3.7 - handlebars: 4.7.7 - lazy-universal-dotenv: 4.0.0 - node-fetch: 2.7.0 - picomatch: 2.3.1 - pkg-dir: 5.0.0 - pretty-hrtime: 1.0.3 - resolve-from: 5.0.0 - ts-dedent: 2.2.0 - transitivePeerDependencies: - - encoding - - supports-color - dev: true - /@storybook/core-common@7.4.5: resolution: {integrity: sha512-c4pBuILMD4YhSpJ+QpKtsUZpK+/rfolwOvzXfJwlN5EpYzMz6FjVR/LyX0cCT2YLI3X5YWRoCdvMxy5Aeryb8g==} dependencies: @@ -7593,12 +7463,6 @@ packages: core-js: 3.32.2 dev: true - /@storybook/core-events@7.4.3: - resolution: {integrity: sha512-FRfipCijMnVbGxL1ZjOLM836lyd/TGQcUFeVjTQWW/+pIGHELqDHiYeq68hqoGTKl0G0np59CJPWYTUZA4Dl9Q==} - dependencies: - ts-dedent: 2.2.0 - dev: true - /@storybook/core-events@7.4.5: resolution: {integrity: sha512-Jzy/adSC95saYCZlgXE5j7jmiMLAXYpnBFBxEtBdXwSWEBb0zt21n1nyWBEAv9s/k2gqDXlPHKHeL5Mn6y40zA==} dependencies: @@ -7657,15 +7521,6 @@ packages: - utf-8-validate dev: true - /@storybook/csf-plugin@7.4.3: - resolution: {integrity: sha512-xQCimGsrGD1JxvyFc0LrH10WZWb181r0beF19aGIAadczs/JWhT+nxF8OhfP1LK4wHj9jH+F4nIXEMpm9yI9Qg==} - dependencies: - '@storybook/csf-tools': 7.4.3 - unplugin: 1.4.0 - transitivePeerDependencies: - - supports-color - dev: true - /@storybook/csf-plugin@7.4.5: resolution: {integrity: sha512-8p3AnwIm3xXtQhiF7OQ0rBiP/Pn5OCMHRiT4FytRnNimGaw7gxRZ2xzM608QZHQ4A8rHfmgoM2FTwgxdC15ulA==} dependencies: @@ -7675,22 +7530,6 @@ packages: - supports-color dev: true - /@storybook/csf-tools@7.4.3: - resolution: {integrity: sha512-nkVakGx2kzou91lGcxnyFNiSEdnpx1a53lQTl/DLm0QpDbqQuu3ZbZWXZCpXV97t/6YPeCCnGLXodnI7PZyZBA==} - dependencies: - '@babel/generator': 7.22.15 - '@babel/parser': 7.22.16 - '@babel/traverse': 7.22.20 - '@babel/types': 7.22.19 - '@storybook/csf': 0.1.0 - '@storybook/types': 7.4.3 - fs-extra: 11.1.1 - recast: 0.23.2 - ts-dedent: 2.2.0 - transitivePeerDependencies: - - supports-color - dev: true - /@storybook/csf-tools@7.4.5: resolution: {integrity: sha512-xbm5HGYvlwF0Efivx37v9rO7Exel1/Tdb/Yv/vXn4D/hQeljNVLNz4Bomfy4EQ207rRsrGDSOHEhLUbHDimnxg==} dependencies: @@ -7723,20 +7562,6 @@ packages: resolution: {integrity: sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==} dev: true - /@storybook/docs-tools@7.4.3: - resolution: {integrity: sha512-T9oU10vIY3mC6Up+9rjN5LfBydhhIFhKzHPtUT9PfN1iEa0lO2TkT4m+vf2kcokPppUZNVbqiGjy9t/WYnpeZg==} - dependencies: - '@storybook/core-common': 7.4.3 - '@storybook/preview-api': 7.4.3 - '@storybook/types': 7.4.3 - '@types/doctrine': 0.0.3 - doctrine: 3.0.0 - lodash: 4.17.21 - transitivePeerDependencies: - - encoding - - supports-color - dev: true - /@storybook/docs-tools@7.4.5: resolution: {integrity: sha512-ctK+yGb2nvWISSvCCzj3ZhDaAb7I2BLjbxuBGTyNPvl4V9UQ9LBYzdJwR50q+DfscxdwSHMSOE/0OnzmJdaSJA==} dependencies: @@ -7755,31 +7580,6 @@ packages: resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} dev: true - /@storybook/manager-api@7.4.3(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-o5oiL2cJKlY+HNBCdUo5QKT8yXTyYYvBKibSS3YfDKcjeR9RXP+RhdF5lLLh6TzPwfdtLrXQoVI4A/61v2kurQ==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - dependencies: - '@storybook/channels': 7.4.3 - '@storybook/client-logger': 7.4.3 - '@storybook/core-events': 7.4.3 - '@storybook/csf': 0.1.0 - '@storybook/global': 5.0.0 - '@storybook/router': 7.4.3(react-dom@18.2.0)(react@18.2.0) - '@storybook/theming': 7.4.3(react-dom@18.2.0)(react@18.2.0) - '@storybook/types': 7.4.3 - dequal: 2.0.3 - lodash: 4.17.21 - memoizerific: 1.11.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - semver: 7.5.4 - store2: 2.14.2 - telejson: 7.2.0 - ts-dedent: 2.2.0 - dev: true - /@storybook/manager-api@7.4.5(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-8Hdh5Tutet8xRy2fAknczfvpshz09eVnLd8m34vcFceUOYvEnvDbWerufhlEzovsF4v7U32uqbDHKdKTamWEQQ==} peerDependencies: @@ -7813,41 +7613,14 @@ packages: resolution: {integrity: sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==} dev: true - /@storybook/node-logger@7.4.3: - resolution: {integrity: sha512-pL13PPMUttflTWKVeDIKxPIJtBRl50Fzck12/7uiNROtBIrSV9DZSgOjInAazjo4tl+7fDj9lgkGeMEz00E8aQ==} - dev: true - /@storybook/node-logger@7.4.5: resolution: {integrity: sha512-fJSykphbryuEYj1qihbaTH5oOzD4NkptRxyf2uyBrpgkr5tCTq9d7GHheqaBuIdi513dsjlcIR7z5iHxW7ZD+Q==} dev: true - /@storybook/postinstall@7.4.3: - resolution: {integrity: sha512-6NMaAvL4a26jR50UPz+Q6VATY3lHZWw1ru/weFgiV0rat632RFdiFyrMMrjbUWu9HDJE4fbCzrIZU0jGVs1wlQ==} - dev: true - /@storybook/postinstall@7.4.5: resolution: {integrity: sha512-MWRjnKkUpEe2VkHNNpv3zkuMvxM2Zu9DMxFENQaEmhqUHkIFh5klfFwzhSBRexVLzIh7DA1p7mntIpY5A6lh+Q==} dev: true - /@storybook/preview-api@7.4.3: - resolution: {integrity: sha512-qKwfH2+qN1Zpz2UX6dQLiTU5x2JH3o/+jOY4GYF6c3atTm5WAu1OvCYAJVb6MdXfAhZNuPwDKnJR8VmzWplWBg==} - dependencies: - '@storybook/channels': 7.4.3 - '@storybook/client-logger': 7.4.3 - '@storybook/core-events': 7.4.3 - '@storybook/csf': 0.1.0 - '@storybook/global': 5.0.0 - '@storybook/types': 7.4.3 - '@types/qs': 6.9.7 - dequal: 2.0.3 - lodash: 4.17.21 - memoizerific: 1.11.3 - qs: 6.11.2 - synchronous-promise: 2.0.17 - ts-dedent: 2.2.0 - util-deprecate: 1.0.2 - dev: true - /@storybook/preview-api@7.4.5: resolution: {integrity: sha512-6xXQZPyilkGVddfZBI7tMbMMgOyIoZTYgTnwSPTMsXxO0f0TvtNDmGdwhn0I1nREHKfiQGpcQe6gwddEMnGtSg==} dependencies: @@ -7871,16 +7644,6 @@ packages: resolution: {integrity: sha512-hCVFoPJP0d7vFCJKaWEsDMa6LcRFcEikQ8Cy6Vo+trS8xXwvwE+vIBqyuPozl4O/MYD9iOlzjgZFNwaUUgX0Jg==} dev: true - /@storybook/react-dom-shim@7.4.3(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-d8kkZU4kqmNluuOx65l5H0L9lRn8Ji5rVxu+4MUCWrn82dxRLvVcFG0sfGUzOTNfX1/yajL2MxVJ2hx9fzLutQ==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - dependencies: - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - /@storybook/react-dom-shim@7.4.5(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-/hGe8yuiWbT7L3ZsllmJPgxT9MEQE3k23FhliyKx6IGHsWoYaEsPYPZ9tygqtKY8RpqqMUKWz8+kbO79zUxaoQ==} peerDependencies: @@ -7906,19 +7669,6 @@ packages: regenerator-runtime: 0.13.11 dev: true - /@storybook/router@7.4.3(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-1ab1VTYzzOsBGKeT8xm1kLriIsIsiB/l3t7DdARJxLmPbddKyyXE018w17gfrARCWQ8SM99Ko6+pLmlZ2sm8ug==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - dependencies: - '@storybook/client-logger': 7.4.3 - memoizerific: 1.11.3 - qs: 6.11.2 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - /@storybook/router@7.4.5(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-IM4IhiPiXsx3FAUeUOAB47uiuUS8Yd37VQcNlXLBO28GgHoTSYOrjS+VTGLIV5cAGKr8+H5pFB+q35BnlFUpkQ==} peerDependencies: @@ -7979,20 +7729,6 @@ packages: regenerator-runtime: 0.13.11 dev: true - /@storybook/theming@7.4.3(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-u5wLwWmhGcTmkcs6f2wDGv+w8wzwbNJat0WaIIbwdJfX7arH6nO5HkBhNxvl6FUFxX0tovp/e9ULzxVPc356jw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 - dependencies: - '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) - '@storybook/client-logger': 7.4.3 - '@storybook/global': 5.0.0 - memoizerific: 1.11.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - /@storybook/theming@7.4.5(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-QSIJDIMzOegzlhubIBaYIovf4mlf+AVL0SmQOskPS8GZ6s9t77yUUI6gZTEjO+S4eB3djXRsfTTijQ8+z4XmRA==} peerDependencies: @@ -8007,15 +7743,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@storybook/types@7.4.3: - resolution: {integrity: sha512-DrHC1hIiw9TqDILLokDnvbUPNxGz5iJaYFEv30uvYE0s9MvgEUPblCChEUjaHOps7zQTznMPf8ULfoXlgqxk2A==} - dependencies: - '@storybook/channels': 7.4.3 - '@types/babel__core': 7.20.0 - '@types/express': 4.17.17 - file-system-cache: 2.3.0 - dev: true - /@storybook/types@7.4.5: resolution: {integrity: sha512-DTWFNjfRTpncjufDoUs0QnNkgHG2qThGKWL1D6sO18cYI02zWPyHWD8/cbqlvtT7XIGe3s1iUEfCTdU5GcwWBA==} dependencies: @@ -9191,6 +8918,13 @@ packages: uri-js: 4.4.1 dev: true + /ally.js@1.4.1: + resolution: {integrity: sha512-ZewdfuwP6VewtMN36QY0gmiyvBfMnmEaNwbVu2nTS6zRt069viTgkYgaDiqu6vRJ1VJCriNqV0jGMu44R8zNbA==} + dependencies: + css.escape: 1.5.1 + platform: 1.3.3 + dev: false + /ansi-colors@1.1.0: resolution: {integrity: sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==} engines: {node: '>=0.10.0'} @@ -11132,6 +10866,10 @@ packages: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} + /css.escape@1.5.1: + resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} + dev: false + /cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -17149,6 +16887,10 @@ packages: - supports-color dev: true + /long-press-event@2.4.6: + resolution: {integrity: sha512-59zL3M+uD7Q2DTuxJ2UkbVV3+0D9PrcI7zgem1AXRinH6g8mb7iN9vOKCqiVriW15S4L9OmKOr/d8q9qAaeCGQ==} + dev: false + /loose-envify@1.4.0: resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} hasBin: true @@ -18910,6 +18652,10 @@ packages: find-up: 6.3.0 dev: true + /platform@1.3.3: + resolution: {integrity: sha512-VJK1SRmXBpjwsB4YOHYSturx48rLKMzHgCqDH2ZDa6ZbMS/N5huoNqyQdK5Fj/xayu3fqbXckn5SeCS1EbMDZg==} + dev: false + /plugin-error@0.1.2: resolution: {integrity: sha512-WzZHcm4+GO34sjFMxQMqZbsz3xiNEgonCskQ9v+IroMmYgk/tas8dG+Hr2D6IbRPybZ12oWpzE/w3cGJ6FJzOw==} engines: {node: '>=0.10.0'}