diff --git a/demo-npm_and_yarn/vite-6.0.3/.nojekyll b/demo-npm_and_yarn/vite-6.0.3/.nojekyll new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demo-npm_and_yarn/vite-6.0.3/664bdc15eaea169dae57378c0217c48d24862ee4.txt b/demo-npm_and_yarn/vite-6.0.3/664bdc15eaea169dae57378c0217c48d24862ee4.txt new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demo-npm_and_yarn/vite-6.0.3/CHANGELOG.md b/demo-npm_and_yarn/vite-6.0.3/CHANGELOG.md new file mode 100644 index 0000000000..5f77738342 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/CHANGELOG.md @@ -0,0 +1,48 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.2.2](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.2.1...design-system-assets-v0.2.2) (2024-10-25) + +### Features + +* Use inline SVG icon for Radio button ([#1460](https://github.com/Amsterdam/design-system/issues/1460)) ([c19055b](https://github.com/Amsterdam/design-system/commit/c19055bd6453ce40ca43b31d599f14ec65d6037a)) + +## [0.2.1](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.2.0...design-system-assets-v0.2.1) (2024-06-05) + +### Features + +* favicon, app icons and optional Web Manifest ([#1205](https://github.com/Amsterdam/design-system/issues/1205)) ([5513961](https://github.com/Amsterdam/design-system/commit/55139617966514207402f791a5b4e9778d059946)) + +## [0.2.0](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.1.8...design-system-assets-v0.2.0) (2024-03-12) + +### ⚠ BREAKING CHANGES + +* Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125)) + +### Features + +* Shorten namespaces in theme and tokens ([#1125](https://github.com/Amsterdam/design-system/issues/1125)) ([1c81f3b](https://github.com/Amsterdam/design-system/commit/1c81f3bd14c1f202eec2341aec1888fb74d956d5)) + +## [0.1.8](https://github.com/Amsterdam/design-system/compare/design-system-assets-v0.1.7...design-system-assets-v0.1.8) (2024-03-08) + +### Features + +* Logo Museum Weesp ([#1088](https://github.com/Amsterdam/design-system/issues/1088)) ([da1b780](https://github.com/Amsterdam/design-system/commit/da1b7808b5bcf17acb93fe46531a9722814e9256)) + +## [0.1.7](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.6...@amsterdam/design-system-assets@0.1.7) (2024-01-31) + +**Note:** Version bump only for package @amsterdam/design-system-assets + +## [0.1.6](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.5...@amsterdam/design-system-assets@0.1.6) (2023-12-22) + +**Note:** Version bump only for package @amsterdam/design-system-assets + +## [0.1.5](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.4...@amsterdam/design-system-assets@0.1.5) (2023-12-01) + +**Note:** Version bump only for package @amsterdam/design-system-assets + +## [0.1.4](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-assets@0.1.3...@amsterdam/design-system-assets@0.1.4) (2023-11-27) + +**Note:** Version bump only for package @amsterdam/design-system-assets diff --git a/demo-npm_and_yarn/vite-6.0.3/CONTRIBUTING.md b/demo-npm_and_yarn/vite-6.0.3/CONTRIBUTING.md new file mode 100644 index 0000000000..105983c03e --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/CONTRIBUTING.md @@ -0,0 +1,18 @@ + + +# Contributing Guidelines + +## Importing icons from Figma + +We create and update icons in Figma, then import them into this package for distribution. + +**Important**: Only export icons from Figma for use in this package. Do not use these icons directly in an application. + +To export all icons from [the Figma file](https://www.figma.com/design/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?node-id=6852-5124), use Figma's built-in SVG export feature. +Select the frame containing all the icon shapes, press `Enter` to select direct children and then press `Enter` again to select all icon components. +In the right-hand sidebar, click the plus sign next to Export. Choose SVG and export. +Copy these files over to the `icons` folder and run the following command to optimize them: + +```sh +npm run optimize-icons +``` diff --git a/demo-npm_and_yarn/vite-6.0.3/LICENSE.md b/demo-npm_and_yarn/vite-6.0.3/LICENSE.md new file mode 100644 index 0000000000..31c3f34604 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/LICENSE.md @@ -0,0 +1,7 @@ + + +# License + +The open source license does NOT apply to files in this directory. + +These are properietary assets to the City of Amsterdam. diff --git a/demo-npm_and_yarn/vite-6.0.3/README.md b/demo-npm_and_yarn/vite-6.0.3/README.md new file mode 100644 index 0000000000..6f57e91459 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/README.md @@ -0,0 +1,63 @@ + + +# Amsterdam Design System: Assets + +This package provides all assets from the [Amsterdam Design System](https://designsystem.amsterdam). +Use it to include the correct fonts, icons or logos in your website or application. + +## Installation + +Install this package by itself if you want or need to reference assets directly in your project. + +Note that our [React components](https://www.npmjs.com/package/@amsterdam/design-system-react) provide more functionality for some of the assets and use them automatically. +You should use that package if your application uses React. + +```sh +npm install @amsterdam/design-system-assets +``` + +## Usage + +### Application icons + +The Design System handbook helps using [a favicon](https://designsystem.amsterdam/?path=/docs/brand-assets-favicon--docs) or [a web manifest and application icons](https://designsystem.amsterdam/?path=/docs/docs-developer-guide-web-app--docs) for home screens of devices in your website or application. + +### Font files + +The package contains our Amsterdam Sans font in OpenType format (.otf) and Web Open Format Font (.woff). +Import our stylesheet to make all of them available to your project. + + +```ts +import "@amsterdam/design-system-assets/font/index.css" +``` + +The Design System Handbook offers [more guidance in using the font](https://designsystem.amsterdam/?path=/docs/brand-assets-font--docs). + +Note that the font is proprietary. Using it requires [a license](https://designsystem.amsterdam/?path=/docs/docs-terms-of-use-copyright--docs). + +### Icons + +The Design System Handbook offers an [overview of our icon library](https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs). + +You can import the SVG files to use icons in your website or application. + +In a React project, use the [Icon component](https://designsystem.amsterdam/?path=/docs/components-media-icon--docs) instead. +It offers a convenient API for using the icons and streamlines alignment with text. + +### Logos + +The logo of the City of Amsterdam is available as an SVG image, as well as logos for various departments and services. + +In a React project, use the [Logo component](https://designsystem.amsterdam/?path=/docs/components-media-logo--docs) instead. + +## Updating + +We follow semantic versioning and publish a [change log](https://github.com/Amsterdam/design-system/blob/main/proprietary/assets/CHANGELOG.md) to guide you through updates. +The assets are a public API of the design system. +Note that detecting changed or deleted assets is still a manual process. + +## Support + +Contact us if you have a question, find an issue, or want to contribute. +Find ways to reach us on [designsystem.amsterdam](https://designsystem.amsterdam/?path=/docs/docs-introduction--docs#send-a-message). diff --git a/demo-npm_and_yarn/vite-6.0.3/app-icons/icon-192.png b/demo-npm_and_yarn/vite-6.0.3/app-icons/icon-192.png new file mode 100644 index 0000000000..d2f996b477 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/app-icons/icon-192.png differ diff --git a/demo-npm_and_yarn/vite-6.0.3/app-icons/icon-512.png b/demo-npm_and_yarn/vite-6.0.3/app-icons/icon-512.png new file mode 100644 index 0000000000..b711622f05 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/app-icons/icon-512.png differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Accordion.docs-XpaKDmfh.js b/demo-npm_and_yarn/vite-6.0.3/assets/Accordion.docs-XpaKDmfh.js new file mode 100644 index 0000000000..c722b0a5aa --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Accordion.docs-XpaKDmfh.js @@ -0,0 +1,83 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as a}from"./index-3rgQkYFR.js";import{ae as i,aq as r,ar as c,as as d,at as o}from"./index-CF71P72j.js";import{A as h,E as l,R as m}from"./Accordion.stories-BS3oAY-u.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./exampleContent-hIIPvEhU.js";import"./getHeadingTag-Dv1eMqvl.js";import"./Icon-B4wlDyQ3.js";import"./useKeyboardFocus-CRUFsA_C.js";const p=` + +# Accordion + +The accordion component is a clickable (vertically stacked) list of headings to hide or show associated content. +With an accordion, you offer content to users progressively. + +## Guidelines + +- Use an accordion on a full page with essential and non-essential content. +- Hiding non-essential content helps users get to important content more quickly. +- Avoid using an accordion to avoid too much essential content on 1 page. +- Rewrite the page more compactly or divide the content over multiple pages instead of using the accordion in the first place. +- Don’t hide essential information in an accordion. +- An accordion consists of several accordion sections. +- Use a minimum of 3 and a maximum of 10 sections underneath each other. +- It is essential for accordion sections to have clear headings, as the user cannot "scan" the hidden content to find relevant information. +- Hiding the content has the disadvantage that "search in page" does not yield any hidden content results. +- If you know the search term the user used to get to the accordion page, you can automatically expand the sections that contain the search term. +- The accordion’s content may contain formatting (e.g. headings, lists, links and buttons). + +You can navigate an accordion with your keyboard: + +| key | element | +| :------------- | :-------------------------------------------------------------------------------------------------------------------- | +| Enter or Space | Open or close the accordion section that has the focus | +| Tab | Go to the next element that can have focus | +| Shift + Tab | Go to the next element that can have focus | +| Down arrow | If an accordion section has focus, go to the next section; if the last section has focus, go to the first section | +| Up arrow | If an accordion section has focus, go to the previous section; if the first section has focus, go to the last section | +| Home | If an accordion section has focus: go to the first section | +| End | If an accordion section has focus, go to the last section | + +## Relevant WCAG requirements + +The WCAG requirements for the Button and Heading components also apply to the accordion header. + +Pay extra attention to these parts: + +- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the accordion sections depends on where in the page the accordion is placed, this may differ per page. +- [WCAG requirement 1.3.6](https://www.w3.org/TR/WCAG21/#identify-purpose): use \`aria-controls\` for the button, and use a \`region\` landmark for the expandable region (use the HTML element \`
\` for this) +- [WCAG requirement 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): contrast between text and background and between icon and background is sufficient in all variants, all interactive statuses and all possible combinations. +- [WCAG requirement 3.2.1](https://www.w3.org/TR/WCAG21/#on-focus): do not automatically make the accordion expanded when the button gets focus. +- [WCAG requirement 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): Support the optional keys: \`Down Arrow\`, \`Up Arrow\`, \`Home\` and \`End\`. +- \`Space\` should activate the button, not scroll the page (use \`keypressEvt.preventDefault()\`). +- [WCAG requirement 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): The text used both as a heading and as a label for the button must be clear because the content is not always visible. +- [WCAG requirement 2.4.10](https://www.w3.org/TR/WCAG21/#section-headings): accordions that are part of the running text must use section headings. + +## References + +- [W3C - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) +`;/*@license CC0-1.0*/function s(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...a(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:h}),` +`,e.jsx(r,{children:p}),` +`,e.jsxs(n.p,{children:[`Each accordion section has its unique name. +Provide this name via the `,e.jsx(n.code,{children:"label"})," property of the ",e.jsx(n.code,{children:"Accordion.Section"})," component."]}),` +`,e.jsx(c,{}),` +`,e.jsx(d,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"expanded-by-default",children:"Expanded by default"}),` +`,e.jsxs(n.p,{children:["If you want the contents of an accordion section to appear initially, pass the ",e.jsx(n.code,{children:"expanded"})," property to the ",e.jsx(n.code,{children:"Accordion.Section"})," component."]}),` +`,e.jsx(o,{of:l}),` +`,e.jsx(n.h3,{id:"limit-the-amount-of-accessibility-landmarks",children:"Limit the amount of accessibility landmarks"}),` +`,e.jsxs(n.p,{children:["An Accordion Section renders a ",e.jsx(n.code,{children:"section"}),` element in HTML by default. +Each of them introduces a landmark region, but having many of them on a page can confuse screen reader users. +Let Accordions with 6 Sections or more render generic `,e.jsx(n.code,{children:"div"})," elements through ",e.jsx(n.code,{children:'sectionAs="div"'}),"."]}),` +`,e.jsx(o,{of:m}),` +`,e.jsx(n.h3,{id:"technical-considerations",children:"Technical considerations"}),` +`,e.jsxs(n.h3,{id:"the-accordion-parent-component",children:["The ",e.jsx(n.code,{children:"Accordion"})," parent component"]}),` +`,e.jsx(n.p,{children:"The parent component is used for several reasons:"}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsx(n.li,{children:"It sets the spacing between Accordion Sections."}),` +`,e.jsx(n.li,{children:"It allows you to set the same heading level for all Accordion Sections."}),` +`,e.jsx(n.li,{children:"It allows you to set the same HTML element for all Accordion Sections."}),` +`,e.jsx(n.li,{children:"It adds the extra keyboard navigation described in the guidelines."}),` +`]}),` +`,e.jsxs(n.h3,{id:"the-html-details-element",children:["The HTML ",e.jsx(n.code,{children:"details"})," element"]}),` +`,e.jsxs(n.p,{children:["Currently (28-6-2023), the ",e.jsx(n.code,{children:"details"}),` element has some accessibility problems. +`,e.jsx(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#summaries_as_headings",rel:"nofollow",children:"For example, a heading in a summary is not adequately understood by screen readers"}),` and +NVDA does not read Chrome and Edge’s collapsed and expanded status correctly. +That’s why we chose not to use this native element. +If these problems are solved, we could do this.`]})]})}function M(t={}){const{wrapper:n}={...a(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{M as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Accordion.stories-BS3oAY-u.js b/demo-npm_and_yarn/vite-6.0.3/assets/Accordion.stories-BS3oAY-u.js new file mode 100644 index 0000000000..8bc48e7e55 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Accordion.stories-BS3oAY-u.js @@ -0,0 +1,38 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{P as n}from"./index.esm-kzH9sPjb.js";import{b as x,g as S}from"./exampleContent-hIIPvEhU.js";import{c as u}from"./clsx-B-dksMZM.js";import{r}from"./index-RigO-4kf.js";import{r as K}from"./index.esm-CPc1noYl.js";import{g as M}from"./getHeadingTag-Dv1eMqvl.js";import{I as F}from"./Icon-B4wlDyQ3.js";import{u as W}from"./useKeyboardFocus-CRUFsA_C.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const G={headingLevel:1,sectionAs:"section"},H=r.createContext(G);try{Context.displayName="Context",Context.__docgenInfo={description:`Context lets components pass information deep down without explicitly +passing props. + +Created from {@link createContext}`,displayName:"Context",props:{}}}catch{}const V=r.forwardRef(({label:o,expanded:d=!1,children:l,className:p,...h},c)=>{const{headingLevel:g,sectionAs:O}=r.useContext(H),[m,$]=r.useState(d),z=M(g),B=O||"section",v=r.useId(),P=`button-${v}`,k=`panel-${v}`;return e.jsxs("div",{className:u("ams-accordion__section",p),ref:c,...h,children:[e.jsx(z,{className:"ams-accordion__header",children:e.jsxs("button",{"aria-controls":k,"aria-expanded":m,className:"ams-accordion__button",id:P,onClick:()=>$(!m),type:"button",children:[e.jsx(F,{svg:K,size:"level-5",className:"ams-accordion__icon"}),o]})}),e.jsx(B,{"aria-labelledby":P,className:u("ams-accordion__panel",{"ams-accordion__panel--expanded":m}),id:k,children:l})]})});V.displayName="Accordion.Section";try{Accordion.Section.displayName="Accordion.Section",Accordion.Section.__docgenInfo={description:"",displayName:"Accordion.Section",props:{label:{defaultValue:null,description:"The heading text.",name:"label",required:!0,type:{name:"string"}},expanded:{defaultValue:{value:"false"},description:"Whether the content is displayed initially.",name:"expanded",required:!1,type:{name:"boolean"}}}}}catch{}const q=r.forwardRef(({children:o,className:d,headingLevel:l,sectionAs:p="section"},h)=>{const c=r.useRef(null);r.useImperativeHandle(h,()=>c.current);const{keyDown:g}=W(c,{rotating:!0});return e.jsx(H.Provider,{value:{headingLevel:l,sectionAs:p},children:e.jsx("div",{className:u("ams-accordion",d),onKeyDown:g,ref:c,children:o})})});q.displayName="Accordion";const a=Object.assign(q,{Section:V});try{a.displayName="Accordion",a.__docgenInfo={description:"",displayName:"Accordion",props:{headingLevel:{defaultValue:null,description:"The hierarchical level of the Accordion Section heading(s) within the document.",name:"headingLevel",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}},sectionAs:{defaultValue:{value:"section"},description:"The HTML element to use for each Accordion Section.",name:"sectionAs",required:!1,type:{name:"enum",value:[{value:'"div"'},{value:'"section"'}]}}}}}catch{}const A=S(),_=S(),f=S(),y=x(),b=x(),j=x(),J={title:"Components/Containers/Accordion",component:a,args:{headingLevel:1}},i={args:{children:[e.jsx(a.Section,{label:A,children:e.jsx(n,{children:y})},1),e.jsx(a.Section,{label:_,children:e.jsx(n,{children:b})},2),e.jsx(a.Section,{label:f,children:e.jsx(n,{children:j})},3)]}},t={args:{children:[e.jsx(a.Section,{label:A,children:e.jsx(n,{children:y})},1),e.jsx(a.Section,{label:_,expanded:!0,children:e.jsx(n,{children:b})},2),e.jsx(a.Section,{label:f,children:e.jsx(n,{children:j})},3)]}},s={args:{sectionAs:"div",children:[e.jsx(a.Section,{label:A,children:e.jsx(n,{children:y})},1),e.jsx(a.Section,{label:_,children:e.jsx(n,{children:b})},2),e.jsx(a.Section,{label:f,children:e.jsx(n,{children:j})},3)]}};var C,N,I;i.parameters={...i.parameters,docs:{...(C=i.parameters)==null?void 0:C.docs,source:{originalSource:`{ + args: { + children: [ + {paragraph1} + , + {paragraph2} + , + {paragraph3} + ] + } +}`,...(I=(N=i.parameters)==null?void 0:N.docs)==null?void 0:I.source}}};var R,w,E;t.parameters={...t.parameters,docs:{...(R=t.parameters)==null?void 0:R.docs,source:{originalSource:`{ + args: { + children: [ + {paragraph1} + , + {paragraph2} + , + {paragraph3} + ] + } +}`,...(E=(w=t.parameters)==null?void 0:w.docs)==null?void 0:E.source}}};var L,T,D;s.parameters={...s.parameters,docs:{...(L=s.parameters)==null?void 0:L.docs,source:{originalSource:`{ + args: { + sectionAs: 'div', + children: [ + {paragraph1} + , + {paragraph2} + , + {paragraph3} + ] + } +}`,...(D=(T=s.parameters)==null?void 0:T.docs)==null?void 0:D.source}}};const Q=["Default","ExpandedByDefault","ReduceLandmarks"],ce=Object.freeze(Object.defineProperty({__proto__:null,Default:i,ExpandedByDefault:t,ReduceLandmarks:s,__namedExportsOrder:Q,default:J},Symbol.toStringTag,{value:"Module"}));export{ce as A,t as E,s as R}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/ActionGroup.docs-BhUxkERk.js b/demo-npm_and_yarn/vite-6.0.3/assets/ActionGroup.docs-BhUxkERk.js new file mode 100644 index 0000000000..a9ac9b9152 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/ActionGroup.docs-BhUxkERk.js @@ -0,0 +1,28 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as r}from"./index-3rgQkYFR.js";import{ae as a,aq as s,ar as h,at as e}from"./index-CF71P72j.js";import{A as c,S as l,W as p}from"./ActionGroup.stories-B8r6QBVy.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const d=` + +# Action Group + +Groups one or more related actions and manages their layout. + +## How to use + +- Both a [Button](?path=/docs/components-buttons-button--docs) and a [Link](?path=/docs/components-navigation-link--docs) can provide an ‘action’ in this context. +- If two or more buttons or links are in a row, put the one for the primary action first and the other buttons behind it. +- Sighted users will read the primary action first, in line with the natural reading order. + The same goes for users of screen readers, who will hear the primary action first, and users of a keyboard, who will focus the primary action first. +- Also, this approach keeps the order of buttons consistent on both narrow and wide screens: if the buttons do not fit next to each other, they get stacked vertically with the primary action on top. +- Replace the default ’group’ role with \`role="toolbar"\` for button toolbars. +`;/*@license CC0-1.0*/function i(o){const n={h2:"h2",h3:"h3",p:"p",...r(),...o.components};return t.jsxs(t.Fragment,{children:[` +`,` +`,t.jsx(a,{of:c}),` +`,t.jsx(s,{children:d}),` +`,t.jsx(h,{}),` +`,t.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,t.jsx(n.h3,{id:"stacked",children:"Stacked"}),` +`,t.jsx(n.p,{children:`If the Buttons don’t fit next to each other, they will automatically stack vertically and stretch to the full width. +This can occur in a narrow Dialog, with long labels, a large text size, or when zooming in. +Resize the pink rectangle to see this in action.`}),` +`,t.jsx(e,{of:l}),` +`,t.jsx(n.h3,{id:"with-link",children:"With Link"}),` +`,t.jsx(n.p,{children:"An action that involves navigation should be a link."}),` +`,t.jsx(e,{of:p})]})}function E(o={}){const{wrapper:n}={...r(),...o.components};return n?t.jsx(n,{...o,children:t.jsx(i,{...o})}):i(o)}export{E as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/ActionGroup.stories-B8r6QBVy.js b/demo-npm_and_yarn/vite-6.0.3/assets/ActionGroup.stories-B8r6QBVy.js new file mode 100644 index 0000000000..4f0a1ed32e --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/ActionGroup.stories-B8r6QBVy.js @@ -0,0 +1,15 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{a as t,L as _}from"./index.esm-kzH9sPjb.js";import{c as x}from"./clsx-B-dksMZM.js";import{r as S}from"./index-RigO-4kf.js";const n=S.forwardRef(({children:s,className:j,...y},f)=>e.jsx("div",{...y,ref:f,className:x("ams-action-group",j),role:"group",children:s}));n.displayName="ActionGroup";try{n.displayName="ActionGroup",n.__docgenInfo={description:"",displayName:"ActionGroup",props:{}}}catch{}const k={title:"Components/Layout/Action Group",component:n,args:{children:[e.jsx(t,{children:"Doorgaan"}),e.jsx(t,{variant:"tertiary",children:"Stoppen"})]}},r={},o={args:{children:[e.jsx(t,{children:"Adres wijzigen"}),e.jsx(t,{variant:"secondary",children:"Adres verwijderen"})],className:"ams-resize-horizontal",style:{inlineSize:"16rem"}}},a={args:{children:[e.jsx(t,{children:"Bewerken"},1),e.jsx(_,{download:!0,href:"#",variant:"standalone",children:"Downloaden"},2)]}};var i,c,d;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:"{}",...(d=(c=r.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var l,p,m;o.parameters={...o.parameters,docs:{...(l=o.parameters)==null?void 0:l.docs,source:{originalSource:`{ + args: { + children: [, ], + className: 'ams-resize-horizontal', + style: { + inlineSize: '16rem' + } + } +}`,...(m=(p=o.parameters)==null?void 0:p.docs)==null?void 0:m.source}}};var u,h,g;a.parameters={...a.parameters,docs:{...(u=a.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + children: [, + Downloaden + ] + } +}`,...(g=(h=a.parameters)==null?void 0:h.docs)==null?void 0:g.source}}};const w=["Default","Stacked","WithLink"],L=Object.freeze(Object.defineProperty({__proto__:null,Default:r,Stacked:o,WithLink:a,__namedExportsOrder:w,default:k},Symbol.toStringTag,{value:"Module"}));export{L as A,o as S,a as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Alert-BKkc53u7.js b/demo-npm_and_yarn/vite-6.0.3/assets/Alert-BKkc53u7.js new file mode 100644 index 0000000000..894b1f15a5 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Alert-BKkc53u7.js @@ -0,0 +1,2 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{S as r,a as v,b as h}from"./index.esm-CPc1noYl.js";import{c as g}from"./clsx-B-dksMZM.js";import{r as y}from"./index-RigO-4kf.js";import{I as x}from"./Icon-B4wlDyQ3.js";import{H as _}from"./Heading-Vg3KKL7T.js";import{I as b}from"./IconButton-CxZOFXN2.js";const A={error:r,info:v,success:h,warning:r},l=y.forwardRef(({children:s,className:i,closeable:o,closeButtonLabel:c="Sluiten",heading:a,headingLevel:u=2,onClose:d,severity:t="warning",...m},f)=>{const n=a?"level-4":"level-5",p=a?"section":"div";return e.jsxs(p,{...m,ref:f,className:g("ams-alert",t&&`ams-alert--${t}`,i),children:[e.jsx("div",{className:"ams-alert__icon",children:e.jsx(x,{size:n,svg:A[t]})}),e.jsxs("div",{className:"ams-alert__content",children:[a&&e.jsx(_,{level:u,size:"level-4",children:a}),s]}),o&&e.jsx(b,{label:c,size:n,onClick:d})]})});l.displayName="Alert";try{l.displayName="Alert",l.__docgenInfo={description:"",displayName:"Alert",props:{closeable:{defaultValue:null,description:"Whether the user can dismiss the Alert. Adds a button to its top right.",name:"closeable",required:!1,type:{name:"boolean"}},closeButtonLabel:{defaultValue:{value:"Sluiten"},description:"The label for the button that dismisses the Alert.",name:"closeButtonLabel",required:!1,type:{name:"string"}},heading:{defaultValue:null,description:"The text for the Heading.",name:"heading",required:!1,type:{name:"string"}},headingLevel:{defaultValue:{value:"2"},description:`The hierarchical level of the Heading within the document. +Note: this intentionally does not change the font size.`,name:"headingLevel",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}},onClose:{defaultValue:null,description:"A function to run when dismissing.",name:"onClose",required:!1,type:{name:"(() => void)"}},severity:{defaultValue:{value:"warning"},description:"The significance of the message conveyed.",name:"severity",required:!1,type:{name:"enum",value:[{value:'"error"'},{value:'"info"'},{value:'"success"'},{value:'"warning"'}]}}}}}catch{}export{l as A}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Alert.docs-BnBfYXB1.js b/demo-npm_and_yarn/vite-6.0.3/assets/Alert.docs-BnBfYXB1.js new file mode 100644 index 0000000000..f88278a6c1 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Alert.docs-BnBfYXB1.js @@ -0,0 +1,55 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as o,aq as a,ar as c,as as h,at as i}from"./index-CF71P72j.js";import{A as l,W as d,E as m,S as p,I as f,a as u,b as x,c as g}from"./Alert.stories-DiC_wW20.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./Alert-BKkc53u7.js";import"./Icon-B4wlDyQ3.js";import"./Heading-Vg3KKL7T.js";import"./getHeadingTag-Dv1eMqvl.js";import"./IconButton-CxZOFXN2.js";const j=` + +# Alert + +An Alert informs the user of a significant or time-sensitive message without interrupting their task. + +## Specifications + +There are four types of notifications: + +- **Warning** (orange) when action is needed to prevent damage. +- **Error** (red) indicates an error has occurred. +- **Confirmation** (green) to reassure that a process is complete. +- **Notification** (blue) to bring attention to a message. + +## Guidelines + +- Place an orange Alert directly below the Header for important and urgent information. + Examples: system outage or changes in the opening hours of a City Office. +- Ensure sufficient white space around the Alert. + The grid’s white space is a good reference – place the Alert in its own cell. +- By default, the Alert cannot be closed. + This functionality can be added optionally. +- Optionally, the heading can be omitted. +`;/*@license CC0-1.0*/function r(t){const e={h2:"h2",h3:"h3",p:"p",...s(),...t.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(o,{of:l}),` +`,n.jsx(a,{children:j}),` +`,n.jsx(c,{}),` +`,n.jsx(h,{}),` +`,n.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(e.h3,{id:"warning",children:"Warning"}),` +`,n.jsx(e.p,{children:`Display a warning when user action is required. +This is the default severity.`}),` +`,n.jsx(i,{of:d}),` +`,n.jsx(e.h3,{id:"error",children:"Error"}),` +`,n.jsx(e.p,{children:`In case of an error, use the red alert. +Provide the user with suggestions on alternative ways to achieve the goal.`}),` +`,n.jsx(i,{of:m}),` +`,n.jsx(e.h3,{id:"success",children:"Success"}),` +`,n.jsx(e.p,{children:"Announce the success of a significant action."}),` +`,n.jsx(i,{of:p}),` +`,n.jsx(e.h3,{id:"info",children:"Info"}),` +`,n.jsx(e.p,{children:"An informative message can emphasize matters that are useful to follow."}),` +`,n.jsx(i,{of:f}),` +`,n.jsx(e.h3,{id:"with-inline-link",children:"With inline link"}),` +`,n.jsx(e.p,{children:"Include an inline link in the text to guide the user."}),` +`,n.jsx(i,{of:u}),` +`,n.jsx(e.h3,{id:"with-list",children:"With list"}),` +`,n.jsx(e.p,{children:"For clarification, formatted text can be included in the alert."}),` +`,n.jsx(i,{of:x}),` +`,n.jsx(e.h3,{id:"without-heading",children:"Without heading"}),` +`,n.jsx(e.p,{children:`Sometimes, a heading is unnecessary. +The icon automatically becomes slightly smaller.`}),` +`,n.jsx(i,{of:g})]})}function R(t={}){const{wrapper:e}={...s(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(r,{...t})}):r(t)}export{R as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Alert.stories-DiC_wW20.js b/demo-npm_and_yarn/vite-6.0.3/assets/Alert.stories-DiC_wW20.js new file mode 100644 index 0000000000..ac5ca899b9 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Alert.stories-DiC_wW20.js @@ -0,0 +1,64 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{P as n,U as g,L as A}from"./index.esm-kzH9sPjb.js";import{A as E}from"./Alert-BKkc53u7.js";const H={title:"Components/Feedback/Alert",component:E,args:{closeable:!1,heading:"Let op"}},r={args:{children:e.jsx(n,{children:"Tijdens Koningsdag zijn alle Stadsloketten gesloten. Ook 14 020 en alle andere telefoonnummers van de gemeente zijn niet bereikbaar."})}},a={args:{children:e.jsx(n,{children:"U bent vergeten verplichte velden in te vullen."}),heading:"Vul de gegevens aan"}},s={args:{children:e.jsx(n,{children:"Wegens een technische fout kon het formulier niet worden verzonden. We hebben uw gegevens niet ontvangen. Probeer het over een paar minuten opnieuw."}),heading:"Niet gelukt",severity:"error"}},t={args:{children:e.jsx(n,{children:"Het formulier is verzonden. We hebben uw gegevens goed ontvangen."}),closeable:!0,heading:"Gelukt",severity:"success"}},o={args:{children:e.jsx(n,{children:"Tijdens de hijswerkzaamheden geldt er een korte verkeersstop. We zetten verkeersregelaars in, volg hun aanwijzingen op. De verkeersstop duurt ongeveer 10 minuten."}),closeable:!0,severity:"info"}},i={args:{children:[e.jsx(n,{children:"U bent vergeten de volgende verplichte velden in te vullen:"},1),e.jsxs(g,{children:[e.jsx(g.Item,{children:"Naam"}),e.jsx(g.Item,{children:"Telefoonnummer"})]},2)],heading:"Vul de gegevens aan"}},d={args:{children:e.jsxs(n,{children:["Tijdens Koningsdag zijn"," ",e.jsx(A,{variant:"inline",href:"#",children:"alle Stadsloketten"})," ","gesloten. Ook 14 020 en alle andere telefoonnummers van de gemeente zijn niet bereikbaar."]}),severity:"info"}},l={args:{children:e.jsx(n,{children:"De geschatte wachttijd in de adreszoeker klopt momenteel niet altijd. We werken aan een oplossing."}),heading:void 0}};var c,h,m;r.parameters={...r.parameters,docs:{...(c=r.parameters)==null?void 0:c.docs,source:{originalSource:`{ + args: { + children: + Tijdens Koningsdag zijn alle Stadsloketten gesloten. Ook 14 020 en alle andere telefoonnummers van de gemeente + zijn niet bereikbaar. + + } +}`,...(m=(h=r.parameters)==null?void 0:h.docs)==null?void 0:m.source}}};var u,p,v;a.parameters={...a.parameters,docs:{...(u=a.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + children: U bent vergeten verplichte velden in te vullen., + heading: 'Vul de gegevens aan' + } +}`,...(v=(p=a.parameters)==null?void 0:p.docs)==null?void 0:v.source}}};var k,j,b;s.parameters={...s.parameters,docs:{...(k=s.parameters)==null?void 0:k.docs,source:{originalSource:`{ + args: { + children: + Wegens een technische fout kon het formulier niet worden verzonden. We hebben uw gegevens niet ontvangen. + Probeer het over een paar minuten opnieuw. + , + heading: 'Niet gelukt', + severity: 'error' + } +}`,...(b=(j=s.parameters)==null?void 0:j.docs)==null?void 0:b.source}}};var f,z,P;t.parameters={...t.parameters,docs:{...(f=t.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + children: Het formulier is verzonden. We hebben uw gegevens goed ontvangen., + closeable: true, + heading: 'Gelukt', + severity: 'success' + } +}`,...(P=(z=t.parameters)==null?void 0:z.docs)==null?void 0:P.source}}};var W,S,w;o.parameters={...o.parameters,docs:{...(W=o.parameters)==null?void 0:W.docs,source:{originalSource:`{ + args: { + children: + Tijdens de hijswerkzaamheden geldt er een korte verkeersstop. We zetten verkeersregelaars in, volg hun + aanwijzingen op. De verkeersstop duurt ongeveer 10 minuten. + , + closeable: true, + severity: 'info' + } +}`,...(w=(S=o.parameters)==null?void 0:S.docs)==null?void 0:w.source}}};var x,L,y;i.parameters={...i.parameters,docs:{...(x=i.parameters)==null?void 0:x.docs,source:{originalSource:`{ + args: { + children: [U bent vergeten de volgende verplichte velden in te vullen:, + Naam + Telefoonnummer + ], + heading: 'Vul de gegevens aan' + } +}`,...(y=(L=i.parameters)==null?void 0:L.docs)==null?void 0:y.source}}};var U,I,T;d.parameters={...d.parameters,docs:{...(U=d.parameters)==null?void 0:U.docs,source:{originalSource:`{ + args: { + children: + Tijdens Koningsdag zijn{' '} + + alle Stadsloketten + {' '} + gesloten. Ook 14 020 en alle andere telefoonnummers van de gemeente zijn niet bereikbaar. + , + severity: 'info' + } +}`,...(T=(I=d.parameters)==null?void 0:I.docs)==null?void 0:T.source}}};var O,D,_;l.parameters={...l.parameters,docs:{...(O=l.parameters)==null?void 0:O.docs,source:{originalSource:`{ + args: { + children: + De geschatte wachttijd in de adreszoeker klopt momenteel niet altijd. We werken aan een oplossing. + , + heading: undefined + } +}`,...(_=(D=l.parameters)==null?void 0:D.docs)==null?void 0:_.source}}};const K=["Default","Warning","Error","Success","Info","WithList","WithInlineLink","WithoutHeading"],C=Object.freeze(Object.defineProperty({__proto__:null,Default:r,Error:s,Info:o,Success:t,Warning:a,WithInlineLink:d,WithList:i,WithoutHeading:l,__namedExportsOrder:K,default:H},Symbol.toStringTag,{value:"Module"}));export{C as A,s as E,o as I,t as S,a as W,d as a,i as b,l as c}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Bold-B-eEYlh-.eot b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Bold-B-eEYlh-.eot new file mode 100644 index 0000000000..383d801e89 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Bold-B-eEYlh-.eot differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Bold-CN8ieXn0.woff b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Bold-CN8ieXn0.woff new file mode 100644 index 0000000000..820da6c665 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Bold-CN8ieXn0.woff differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Bold-rXlH1Jru.woff2 b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Bold-rXlH1Jru.woff2 new file mode 100644 index 0000000000..0ac92ef3fb Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Bold-rXlH1Jru.woff2 differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-BoldItalic-D8IgX2tE.eot b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-BoldItalic-D8IgX2tE.eot new file mode 100644 index 0000000000..4b6688659c Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-BoldItalic-D8IgX2tE.eot differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-BoldItalic-DGVdd_B4.woff2 b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-BoldItalic-DGVdd_B4.woff2 new file mode 100644 index 0000000000..72a076dc02 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-BoldItalic-DGVdd_B4.woff2 differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-BoldItalic-Iks2g4JK.woff b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-BoldItalic-Iks2g4JK.woff new file mode 100644 index 0000000000..83c3db2c65 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-BoldItalic-Iks2g4JK.woff differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-ExtraBold-0zPbyHYJ.eot b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-ExtraBold-0zPbyHYJ.eot new file mode 100644 index 0000000000..d8b311252d Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-ExtraBold-0zPbyHYJ.eot differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-ExtraBold-GN1-Za61.woff b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-ExtraBold-GN1-Za61.woff new file mode 100644 index 0000000000..1be787d044 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-ExtraBold-GN1-Za61.woff differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-ExtraBold-hk2GetsY.woff2 b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-ExtraBold-hk2GetsY.woff2 new file mode 100644 index 0000000000..c3858f05b8 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-ExtraBold-hk2GetsY.woff2 differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Italic-D8oH3P5t.woff b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Italic-D8oH3P5t.woff new file mode 100644 index 0000000000..225b450a48 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Italic-D8oH3P5t.woff differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Italic-DW94SgHh.woff2 b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Italic-DW94SgHh.woff2 new file mode 100644 index 0000000000..dad1e544a1 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Italic-DW94SgHh.woff2 differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Italic-Djuh9q7q.eot b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Italic-Djuh9q7q.eot new file mode 100644 index 0000000000..03b986f33e Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Italic-Djuh9q7q.eot differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Light-C9JJu_TU.eot b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Light-C9JJu_TU.eot new file mode 100644 index 0000000000..bbea6b3e24 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Light-C9JJu_TU.eot differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Light-D_AncfMf.woff2 b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Light-D_AncfMf.woff2 new file mode 100644 index 0000000000..64bffd1e35 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Light-D_AncfMf.woff2 differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Light-iEj3CW9t.woff b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Light-iEj3CW9t.woff new file mode 100644 index 0000000000..27f5365b40 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Light-iEj3CW9t.woff differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Regular-BSIiMMb3.eot b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Regular-BSIiMMb3.eot new file mode 100644 index 0000000000..8a555f4a86 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Regular-BSIiMMb3.eot differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Regular-QnM7etvR.woff2 b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Regular-QnM7etvR.woff2 new file mode 100644 index 0000000000..ba85adcd68 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Regular-QnM7etvR.woff2 differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Regular-nwmnLZDN.woff b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Regular-nwmnLZDN.woff new file mode 100644 index 0000000000..9196d86610 Binary files /dev/null and b/demo-npm_and_yarn/vite-6.0.3/assets/AmsterdamSans-Regular-nwmnLZDN.woff differ diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AppIcons-DjrzEQ_4.js b/demo-npm_and_yarn/vite-6.0.3/assets/AppIcons-DjrzEQ_4.js new file mode 100644 index 0000000000..1342ebe06e --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/AppIcons-DjrzEQ_4.js @@ -0,0 +1 @@ +import{j as s}from"./jsx-runtime-BjgbQsUx.js";import{I as i}from"./index.esm-kzH9sPjb.js";const o=()=>s.jsx("div",{className:"ams-docs-gallery",children:s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{alt:"",src:"favicon/apple-touch-icon.png",width:180,height:180}),s.jsx("figcaption",{children:"apple-touch-icon.png (180px)"})]})}),e=()=>s.jsxs("div",{className:"ams-docs-gallery",children:[s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{alt:"",src:"favicon/favicon.ico",width:16,height:16}),s.jsx("figcaption",{children:"favicon.ico (16px)"})]}),s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{alt:"",src:"favicon/favicon.ico",width:32,height:32}),s.jsx("figcaption",{children:"favicon.ico (32px)"})]}),s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{alt:"",src:"favicon/favicon.ico",width:48,height:48}),s.jsx("figcaption",{children:"favicon.ico (48px)"})]}),s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{alt:"",src:"favicon/favicon.ico",width:64,height:64}),s.jsx("figcaption",{children:"favicon.ico (64px)"})]})]}),n=()=>s.jsx("div",{className:"ams-docs-gallery",children:s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{alt:"",src:"favicon/icon.svg",width:64,height:64}),s.jsx("figcaption",{children:"icon.svg (64px)"})]})}),r=()=>s.jsxs("div",{className:"ams-docs-gallery",children:[s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{alt:"",src:"app-icons/icon-192.png",width:192,height:192}),s.jsx("figcaption",{children:"icon-192.png (192px)"})]}),s.jsxs("figure",{className:"ams-docs-figure",children:[s.jsx(i,{alt:"",src:"app-icons/icon-512.png",width:512,height:512}),s.jsx("figcaption",{children:"icon-512.png (512px)"})]})]});export{o as A,e as F,n as S,r as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/ArticlePage.docs-Cy09hPLs.js b/demo-npm_and_yarn/vite-6.0.3/assets/ArticlePage.docs-Cy09hPLs.js new file mode 100644 index 0000000000..c62cb3a318 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/ArticlePage.docs-Cy09hPLs.js @@ -0,0 +1,5 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as m}from"./index-3rgQkYFR.js";import{ae as e}from"./index-CF71P72j.js";import{A as n}from"./ArticlePage.stories-B3XJvTge.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./Image.stories-BYgQuacP.js";import"./Image-dslpK47z.js";import"./config-zaa_gclf.js";import"./PageMenu.stories-D4cAVDKU.js";import"./Icon-B4wlDyQ3.js";import"./Footer.stories-1Cxg8eUV.js";import"./Spotlight-CVxUBei2.js";/*@license CC0-1.0*/function i(o){const r={h1:"h1",p:"p",...m(),...o.components};return t.jsxs(t.Fragment,{children:[` +`,` +`,t.jsx(e,{of:n}),` +`,t.jsx(r.h1,{id:"article-page",children:"Article page"}),` +`,t.jsx(r.p,{children:"This page type is for news or similar kinds of articles."})]})}function L(o={}){const{wrapper:r}={...m(),...o.components};return r?t.jsx(r,{...o,children:t.jsx(i,{...o})}):i(o)}export{L as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/ArticlePage.stories-B3XJvTge.js b/demo-npm_and_yarn/vite-6.0.3/assets/ArticlePage.stories-B3XJvTge.js new file mode 100644 index 0000000000..340559b559 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/ArticlePage.stories-B3XJvTge.js @@ -0,0 +1,4 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{G as r,P as t,t as z,C as g,H as i,U as a,L as h,o as j,i as m,O as y,I as _}from"./index.esm-kzH9sPjb.js";import{L as I}from"./Image.stories-BYgQuacP.js";import{c as L}from"./config-zaa_gclf.js";const u=({lead:n,paragraph1:s,spotlightHeading:o,spotlightLinkLabel:l})=>e.jsxs(e.Fragment,{children:[e.jsx(r,{paddingVertical:"medium",children:e.jsxs(r.Cell,{span:{narrow:4,medium:8,wide:10},start:{narrow:1,medium:1,wide:2},children:[e.jsx(t,{className:"ams-mb--md",size:"large",children:n}),e.jsx(t,{children:s})]})}),e.jsx(z,{as:"section",color:"purple",children:e.jsx(r,{paddingTop:"medium",paddingBottom:"large",children:e.jsx(r.Cell,{span:{narrow:4,medium:6,wide:8},start:{narrow:1,medium:2,wide:3},children:e.jsxs(g,{gap:"small",children:[e.jsx(i,{inverseColor:!0,level:2,children:o}),e.jsxs(a,{inverseColor:!0,children:[e.jsx(a.Item,{children:"Vraag uw paspoort of ID-kaart aan bij een Stadsloket in Amsterdam."}),e.jsx(a.Item,{children:"U kunt elke dag langskomen van 9.00 uur tot 17.00 uur en op donderdag tot 20.00 uur."}),e.jsx(a.Item,{children:"Op amsterdam.nl/paspoort staat wat u mee moet nemen."}),e.jsx(a.Item,{children:"Laat aan het loket bij uw aanvraag weten dat u kiest voor gratis bezorgen."}),e.jsx(a.Item,{children:"Als uw paspoort of ID-kaart klaar is, krijgt u een e-mail en sms-bericht met inloggegevens. Met deze inloggegevens kunt u zelf inplannen wanneer u uw reisdocument bezorgd wilt hebben."})]}),e.jsx(t,{inverseColor:!0,children:e.jsx(h,{href:"https://amsterdam.nl/paspoort/",inverseColor:!0,children:l})})]})})})}),e.jsx(r,{paddingVertical:"medium",children:e.jsx(r.Cell,{span:{narrow:4,medium:8,wide:10},start:{narrow:1,medium:1,wide:2},children:e.jsxs(g,{children:[e.jsxs("section",{children:[e.jsx(i,{className:"ams-mb--xs",level:2,children:"Wanneer bezorgen we"}),e.jsx(t,{children:"We bezorgen op werkdagen en zaterdag tussen 8.00 en 18.00 uur. De ene week bezorgen wij op dinsdag en donderdag ook tot 21.00 uur en de andere week op woensdag tot 21.00 uur."})]}),e.jsxs("section",{children:[e.jsx(i,{className:"ams-mb--xs",level:2,children:"Tekenen voor ontvangst"}),e.jsx(t,{children:"Zorg dat u thuis bent om uw paspoort of ID-kaart te ontvangen. Bij bezorging voor meerdere personen moeten alle personen aanwezig zijn. Ook kinderen vanaf 12 jaar moeten tekenen voor ontvangst. Tot 12 jaar tekent de ouder of wettelijk vertegenwoordiger van het kind."})]}),e.jsxs("section",{children:[e.jsx(i,{className:"ams-mb--xs",level:2,children:"Bezorgen met waarde-transport"}),e.jsxs(t,{children:["De gemeente laat uw paspoort of ID-kaart bezorgen met een waarde-transport. Op"," ",e.jsx(h,{href:"https://mijnafspraak.nl/",children:"mijnafspraak.nl"})," ziet u wie er langskomt. De pasfoto van de medewerker is vanaf 8.00 uur zichtbaar. De bezorger controleert bij aankomst uw identiteit en geeft u het nieuwe reisdocument. U geeft uw oude reisdocument aan de bezorger. De bezorger maakt uw oude reisdocument ongeldig waar u bij bent. Daarna mag u het zelf houden of meegeven aan de bezorger, die het vernietigt."]})]}),e.jsxs("section",{children:[e.jsx(i,{className:"ams-mb--xs",level:2,children:"Wanneer kan bezorgen niet?"}),e.jsxs(a,{children:[e.jsx(a.Item,{children:"Bij een spoedaanvraag."}),e.jsx(a.Item,{children:"Als u een geldig visum in uw paspoort hebt dat u nog wilt gebruiken."}),e.jsx(a.Item,{children:"Als u het oude reisdocument kwijt bent."}),e.jsx(a.Item,{children:"Als u op een van de Waddeneilanden woont. Daar bezorgen we niet."})]})]}),e.jsxs("section",{children:[e.jsx(i,{className:"ams-mb--xs",level:2,children:"Meer weten"}),e.jsx(j,{children:e.jsx(j.Link,{href:"https://amsterdam.nl/paspoort/",children:"amsterdam.nl/paspoort"})})]})]})})})]});try{u.displayName="ArticleBody",u.__docgenInfo={description:"",displayName:"ArticleBody",props:{lead:{defaultValue:null,description:"",name:"lead",required:!0,type:{name:"string"}},paragraph1:{defaultValue:null,description:"",name:"paragraph1",required:!0,type:{name:"string"}},spotlightHeading:{defaultValue:null,description:"",name:"spotlightHeading",required:!0,type:{name:"string"}},spotlightLinkLabel:{defaultValue:null,description:"",name:"spotlightLinkLabel",required:!0,type:{name:"string"}}}}}catch{}const A=()=>e.jsx(r,{paddingTop:"small",children:e.jsx(r.Cell,{span:{narrow:4,medium:8,wide:10},start:{narrow:1,medium:1,wide:2},children:e.jsxs(m,{children:[e.jsx(m.Link,{href:"#",children:"Home"}),e.jsx(m.Link,{href:"#",children:"Nieuws"})]})})}),c=({heading:n,imageSrc:s})=>e.jsxs("header",{children:[e.jsx(r,{paddingBottom:"medium",children:e.jsxs(r.Cell,{span:{narrow:4,medium:8,wide:10},start:{narrow:1,medium:1,wide:2},children:[e.jsx(i,{className:"ams-mb--sm",children:n}),e.jsx(t,{size:"small",children:"7 juni 2024"})]})}),e.jsx(y,{children:e.jsx(_,{alt:"",aspectRatio:"2x-wide",loading:"lazy",src:s})})]});try{c.displayName="ArticleHeader",c.__docgenInfo={description:"",displayName:"ArticleHeader",props:{heading:{defaultValue:null,description:"",name:"heading",required:!0,type:{name:"string"}},imageSrc:{defaultValue:null,description:"",name:"imageSrc",required:!0,type:{name:"string"}}}}}catch{}const p=({heading:n,imageSrc:s,lead:o,paragraph1:l,spotlightHeading:b,spotlightLinkLabel:v})=>e.jsxs(e.Fragment,{children:[e.jsx(A,{}),e.jsxs("main",{id:"main",children:[e.jsx(c,{heading:n,imageSrc:s}),e.jsx(u,{lead:o,paragraph1:l,spotlightHeading:b,spotlightLinkLabel:v})]})]});try{p.displayName="ArticlePage",p.__docgenInfo={description:"",displayName:"ArticlePage",props:{heading:{defaultValue:null,description:"",name:"heading",required:!0,type:{name:"string"}},imageSrc:{defaultValue:null,description:"",name:"imageSrc",required:!0,type:{name:"string"}},lead:{defaultValue:null,description:"",name:"lead",required:!0,type:{name:"string"}},paragraph1:{defaultValue:null,description:"",name:"paragraph1",required:!0,type:{name:"string"}},spotlightHeading:{defaultValue:null,description:"",name:"spotlightHeading",required:!0,type:{name:"string"}},spotlightLinkLabel:{defaultValue:null,description:"",name:"spotlightLinkLabel",required:!0,type:{name:"string"}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */var x;const D={...L,title:"Pages/Amsterdam.nl/Article Page",component:p,args:{heading:"Ontvang uw paspoort of ID-kaart in de zomer gratis thuis",imageSrc:(x=I.args)==null?void 0:x.src,lead:"Niet meer naar het Stadsloket, maar thuis of op het werk uw nieuwe paspoort ontvangen. In juni en juli kan dat. Deze zomer bezorgt de gemeente reisdocumenten gratis aan huis. We doen dat om de drukte in de Stadsloketten te verminderen. En u hoeft maar 1 keer naar het Stadsloket.",paragraph1:"Van maandag 10 juni tot en met zaterdag 27 juli bezorgt de gemeente Amsterdam uw paspoort of ID-kaart gratis bij u thuis of op het werk. U moet wel naar het Stadsloket om uw reisdocument aan te vragen. Lees hier hoe het werkt.",spotlightHeading:"Vraag een paspoort of ID-kaart aan",spotlightLinkLabel:"Vraag nu een paspoort of ID-kaart aan"}},d={};var w,k,f;d.parameters={...d.parameters,docs:{...(w=d.parameters)==null?void 0:w.docs,source:{originalSource:"{}",...(f=(k=d.parameters)==null?void 0:k.docs)==null?void 0:f.source}}};const V=["Default"],H=Object.freeze(Object.defineProperty({__proto__:null,Default:d,__namedExportsOrder:V,default:D},Symbol.toStringTag,{value:"Module"}));export{H as A}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AspectRatio.docs-DEnz_ey1.js b/demo-npm_and_yarn/vite-6.0.3/assets/AspectRatio.docs-DEnz_ey1.js new file mode 100644 index 0000000000..399e47c00a --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/AspectRatio.docs-DEnz_ey1.js @@ -0,0 +1,30 @@ +import{j as a}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as n,aq as i,ar as m,as as r}from"./index-CF71P72j.js";import{A as c}from"./AspectRatio.stories-4NdL09L5.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";const p=` + +# Aspect Ratio + +Constrains media content to a supported aspect ratio. + +## Class names + +Each available aspect ratio has an associated class name. +The class can be applied to any component or element. + +| Class name | Example | +| :-------------------------- | :-------------------------------------------------------------------------- | +| \`ams-aspect-ratio--x-tall\` |
| +| \`ams-aspect-ratio--tall\` |
| +| \`ams-aspect-ratio--square\` |
| +| \`ams-aspect-ratio--wide\` |
| +| \`ams-aspect-ratio--x-wide\` |
| +| \`ams-aspect-ratio--2x-wide\` |
| + +## Guidelines + +- Apply one of these classes to an image, video or other media content to constrain its dimensions to one of the available aspect ratios. +- The default aspect ratio is 16:9. +`;/*@license CC0-1.0*/function t(s){return a.jsxs(a.Fragment,{children:[` +`,` +`,a.jsx(n,{of:c}),` +`,a.jsx(i,{children:p}),` +`,a.jsx(m,{}),` +`,a.jsx(r,{})]})}function A(s={}){const{wrapper:e}={...o(),...s.components};return e?a.jsx(e,{...s,children:a.jsx(t,{...s})}):t()}export{A as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/AspectRatio.stories-4NdL09L5.js b/demo-npm_and_yarn/vite-6.0.3/assets/AspectRatio.stories-4NdL09L5.js new file mode 100644 index 0000000000..d711898e45 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/AspectRatio.stories-4NdL09L5.js @@ -0,0 +1,4 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const s=({children:a,aspectRatio:c})=>t.jsx("span",{className:`ams-aspect-ratio--${c}`,children:a});try{s.displayName="AspectRatio",s.__docgenInfo={description:"Renders examples in Storybook. Not for reuse.",displayName:"AspectRatio",props:{aspectRatio:{defaultValue:null,description:"The aspect ratio to display media content in.",name:"aspectRatio",required:!1,type:{name:"enum",value:[{value:'"square"'},{value:'"x-tall"'},{value:'"tall"'},{value:'"wide"'},{value:'"x-wide"'},{value:'"2x-wide"'}]}}}}}catch{}const l={title:"Utilities/CSS/Aspect Ratio",component:s,args:{aspectRatio:"x-wide"},argTypes:{aspectRatio:{control:"radio",options:["2x-wide","x-wide","wide","square","tall","x-tall"]}},render:({aspectRatio:a})=>t.jsx("div",{className:"ams-docs-column ams-docs-aspect-ratio",children:t.jsx("div",{className:`ams-docs-item ams-aspect-ratio--${a}`})})},e={};var o,r,i;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:"{}",...(i=(r=e.parameters)==null?void 0:r.docs)==null?void 0:i.source}}};const p=["Default"],n=Object.freeze(Object.defineProperty({__proto__:null,Default:e,__namedExportsOrder:p,default:l},Symbol.toStringTag,{value:"Module"}));export{n as A}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Avatar.docs-CNYGaIU1.js b/demo-npm_and_yarn/vite-6.0.3/assets/Avatar.docs-CNYGaIU1.js new file mode 100644 index 0000000000..f194849b1f --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Avatar.docs-CNYGaIU1.js @@ -0,0 +1,31 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as t}from"./index-3rgQkYFR.js";import{ae as i,aq as s,ar as p,as as c,at as r}from"./index-CF71P72j.js";import{A as m,W as l,F as d,I as h}from"./Avatar.stories-CXcV2xcF.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./Image-dslpK47z.js";import"./Icon-B4wlDyQ3.js";const x=` + +# Avatar + +A circular badge representing a person. + +## Design + +The avatar contains 1 or 2 initial letters from the person's full name, a picture, or a generic icon. +The default background colour is dark blue. + +## Guidelines + +- Display an avatar for the person currently using the application, + or to associate a person with a content item. +`;/*@license CC0-1.0*/function o(e){const a={h2:"h2",h3:"h3",p:"p",...t(),...e.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(i,{of:m}),` +`,n.jsx(s,{children:x}),` +`,n.jsx(p,{}),` +`,n.jsx(c,{}),` +`,n.jsx(a.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(a.h3,{id:"with-image",children:"With image"}),` +`,n.jsx(a.p,{children:`The Avatar can also display a photo or other image for the person. +Make sure to scale the image down to around 100 pixels to prevent unnecessary data transfers.`}),` +`,n.jsx(r,{of:l}),` +`,n.jsx(a.h3,{id:"fallback-icon",children:"Fallback icon"}),` +`,n.jsx(a.p,{children:"A user icon displays if no label and image are provided."}),` +`,n.jsx(r,{of:d}),` +`,n.jsx(a.h3,{id:"in-a-header",children:"In a Header"}),` +`,n.jsx(r,{of:h})]})}function X(e={}){const{wrapper:a}={...t(),...e.components};return a?n.jsx(a,{...e,children:n.jsx(o,{...e})}):o(e)}export{X as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Avatar.stories-CXcV2xcF.js b/demo-npm_and_yarn/vite-6.0.3/assets/Avatar.stories-CXcV2xcF.js new file mode 100644 index 0000000000..f8cd5d869f --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Avatar.stories-CXcV2xcF.js @@ -0,0 +1,24 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{b as P,c}from"./index.esm-kzH9sPjb.js";import{i as L,j as M}from"./index.esm-CPc1noYl.js";import{c as w}from"./clsx-B-dksMZM.js";import{r as C}from"./index-RigO-4kf.js";import{I as D}from"./Image-dslpK47z.js";import{I as E}from"./Icon-B4wlDyQ3.js";const N=({imageSrc:a,initials:r})=>a?e.jsx(D,{alt:"",src:a}):r.length?e.jsx("span",{"aria-hidden":!0,children:r}):e.jsx(E,{svg:L,size:"level-6"}),o=C.forwardRef(({label:a,imageSrc:r,className:k,color:y="blue",...I},_)=>{const i=a.slice(0,2).toUpperCase(),A=i.length===0?"Gebruiker":`Initialen gebruiker: ${i}`;return e.jsxs("span",{...I,ref:_,className:w("ams-avatar",`ams-avatar--${y}`,r&&"ams-avatar--has-image",k),children:[e.jsx("span",{className:"ams-visually-hidden",children:A}),e.jsx(N,{imageSrc:r,initials:i})]})});o.displayName="Avatar";try{o.displayName="Avatar",o.__docgenInfo={description:"",displayName:"Avatar",props:{color:{defaultValue:{value:"blue"},description:"The background colour.",name:"color",required:!1,type:{name:"enum",value:[{value:'"azure"'},{value:'"black"'},{value:'"blue"'},{value:'"green"'},{value:'"lime"'},{value:'"magenta"'},{value:'"neutral-20"'},{value:'"neutral-40"'},{value:'"neutral-60"'},{value:'"neutral-80"'},{value:'"orange"'},{value:'"purple"'},{value:'"red"'},{value:'"white"'},{value:'"yellow"'}]}},imageSrc:{defaultValue:null,description:"The url for the user’s image. Its center will be displayed. Should be square and scaled down.",name:"imageSrc",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"The text content. Should be the user’s initials. The first two characters will be displayed.",name:"label",required:!0,type:{name:"string"}}}}}catch{}const T={title:"Components/Feedback/Avatar",component:o,args:{label:"DS",imageSrc:""}},s={},t={args:{label:"PS",imageSrc:"https://i.pravatar.cc/128"}},n={args:{imageSrc:void 0,label:""}},l={args:{label:"DS"},render:a=>e.jsx(P,{links:e.jsxs(c,{alignEnd:!0,children:[e.jsx(c.Link,{href:"#",children:"Contact"}),e.jsx(c.Link,{href:"#",icon:M,children:"Zoeken"}),e.jsx("li",{children:e.jsx(o,{...a})})]})})};var u,d,m;s.parameters={...s.parameters,docs:{...(u=s.parameters)==null?void 0:u.docs,source:{originalSource:"{}",...(m=(d=s.parameters)==null?void 0:d.docs)==null?void 0:m.source}}};var p,g,v;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + label: 'PS', + imageSrc: 'https://i.pravatar.cc/128' + } +}`,...(v=(g=t.parameters)==null?void 0:g.docs)==null?void 0:v.source}}};var h,f,b;n.parameters={...n.parameters,docs:{...(h=n.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + imageSrc: undefined, + label: '' + } +}`,...(b=(f=n.parameters)==null?void 0:f.docs)==null?void 0:b.source}}};var S,x,j;l.parameters={...l.parameters,docs:{...(S=l.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + label: 'DS' + }, + render: args =>
+ Contact + + Zoeken + +
  • + +
    • + } /> +}`,...(j=(x=l.parameters)==null?void 0:x.docs)==null?void 0:j.source}}};const q=["Default","WithImage","FallbackIcon","InAHeader"],Z=Object.freeze(Object.defineProperty({__proto__:null,Default:s,FallbackIcon:n,InAHeader:l,WithImage:t,__namedExportsOrder:q,default:T},Symbol.toStringTag,{value:"Module"}));export{Z as A,n as F,l as I,t as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Badge-BvbF-Lgn.js b/demo-npm_and_yarn/vite-6.0.3/assets/Badge-BvbF-Lgn.js new file mode 100644 index 0000000000..c2a8306ca8 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Badge-BvbF-Lgn.js @@ -0,0 +1 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{c as o}from"./clsx-B-dksMZM.js";import{r as s}from"./index-RigO-4kf.js";const e=s.forwardRef(({label:a,className:l,color:r="green",...u},t)=>n.jsx("span",{...u,ref:t,className:o("ams-badge",`ams-badge--${r}`,l),children:a}));e.displayName="Badge";try{e.displayName="Badge",e.__docgenInfo={description:"",displayName:"Badge",props:{color:{defaultValue:{value:"green"},description:"The background colour.",name:"color",required:!1,type:{name:"enum",value:[{value:'"azure"'},{value:'"black"'},{value:'"blue"'},{value:'"green"'},{value:'"lime"'},{value:'"magenta"'},{value:'"neutral-20"'},{value:'"neutral-40"'},{value:'"neutral-60"'},{value:'"neutral-80"'},{value:'"orange"'},{value:'"purple"'},{value:'"red"'},{value:'"white"'},{value:'"yellow"'}]}},label:{defaultValue:null,description:"The text content.",name:"label",required:!0,type:{name:"string | number"}}}}}catch{}export{e as B}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Badge.docs-Drtf-qfZ.js b/demo-npm_and_yarn/vite-6.0.3/assets/Badge.docs-Drtf-qfZ.js new file mode 100644 index 0000000000..19a6eefadf --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Badge.docs-Drtf-qfZ.js @@ -0,0 +1,18 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as e}from"./index-3rgQkYFR.js";import{ae as i,aq as s,ar as a,as as m}from"./index-CF71P72j.js";import{B as c}from"./Badge.stories-DPvq_OmT.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./Badge-BvbF-Lgn.js";import"./clsx-B-dksMZM.js";const p=` + +# Badge + +A prominently coloured box containing 1 or 2 words. +Guides the user in taking a specific action or describes its surrounding content. + +## Design + +The badge can contain a short text or a number. +The default background colour is dark green. +Suggestions on when to use the other colours will follow soon. +`;/*@license CC0-1.0*/function t(o){return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(i,{of:c}),` +`,n.jsx(s,{children:p}),` +`,n.jsx(a,{}),` +`,n.jsx(m,{})]})}function B(o={}){const{wrapper:r}={...e(),...o.components};return r?n.jsx(r,{...o,children:n.jsx(t,{...o})}):t()}export{B as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Badge.stories-DPvq_OmT.js b/demo-npm_and_yarn/vite-6.0.3/assets/Badge.stories-DPvq_OmT.js new file mode 100644 index 0000000000..524c86c676 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Badge.stories-DPvq_OmT.js @@ -0,0 +1,4 @@ +import{B as a}from"./Badge-BvbF-Lgn.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const s={title:"Components/Feedback/Badge",component:a,args:{label:"Tip"}},e={};var o,t,r;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:"{}",...(r=(t=e.parameters)==null?void 0:t.docs)==null?void 0:r.source}}};const c=["Default"],d=Object.freeze(Object.defineProperty({__proto__:null,Default:e,__namedExportsOrder:c,default:s},Symbol.toStringTag,{value:"Module"}));export{d as B}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Blockquote.docs-D2E6Rf4z.js b/demo-npm_and_yarn/vite-6.0.3/assets/Blockquote.docs-D2E6Rf4z.js new file mode 100644 index 0000000000..6b0601bc37 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Blockquote.docs-D2E6Rf4z.js @@ -0,0 +1,27 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as r}from"./index-3rgQkYFR.js";import{ae as s,aq as a,ar as i,as as m,at as c}from"./index-CF71P72j.js";import{B as h,I as l}from"./Blockquote.stories-BNug3b0G.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./exampleContent-hIIPvEhU.js";import"./clsx-B-dksMZM.js";const u=` + +# Blockquote + +We use blockquotes to emphasize citations. +A quote appears differently from the main text to make it stand out. + +## Guidelines + +- Quote someone’s literal written or oral text. +- A quote has a width of half or a whole column of text. +- The component adds the correct quotation marks. + +## Relevant WCAG requirements + +- [WCAG 3.1.2](https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html): if the citation is in a language other than that of the surrounding content, indicate so through the \`lang\` attribute. +`;/*@license CC0-1.0*/function n(e){const o={code:"code",h2:"h2",h3:"h3",p:"p",...r(),...e.components};return t.jsxs(t.Fragment,{children:[` +`,` +`,t.jsx(s,{of:h}),` +`,t.jsx(a,{children:u}),` +`,t.jsx(i,{}),` +`,t.jsx(m,{}),` +`,t.jsx(o.h2,{id:"examples",children:"Examples"}),` +`,t.jsx(o.h3,{id:"inverse-colour",children:"Inverse colour"}),` +`,t.jsxs(o.p,{children:["Set the ",t.jsx(o.code,{children:"inverseColor"}),` prop if the Blockquote sits on a dark background. +This ensures the colour of the text provides enough contrast.`]}),` +`,t.jsx(c,{of:l})]})}function D(e={}){const{wrapper:o}={...r(),...e.components};return o?t.jsx(o,{...e,children:t.jsx(n,{...e})}):n(e)}export{D as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Blockquote.stories-BNug3b0G.js b/demo-npm_and_yarn/vite-6.0.3/assets/Blockquote.stories-BNug3b0G.js new file mode 100644 index 0000000000..b4b4c958f3 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Blockquote.stories-BNug3b0G.js @@ -0,0 +1,8 @@ +import{c as f}from"./exampleContent-hIIPvEhU.js";import{j as _}from"./jsx-runtime-BjgbQsUx.js";import{c as g}from"./clsx-B-dksMZM.js";import{r as q}from"./index-RigO-4kf.js";const r=q.forwardRef(({children:t,className:u,inverseColor:p,...m},d)=>_.jsx("blockquote",{...m,ref:d,className:g("ams-blockquote",p&&"ams-blockquote--inverse-color",u),children:t}));r.displayName="Blockquote";try{r.displayName="Blockquote",r.__docgenInfo={description:"",displayName:"Blockquote",props:{inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const b=f(),k={title:"Components/Text/Blockquote",component:r,args:{children:b,inverseColor:!1},argTypes:{children:{description:"The text for the quote.",table:{disable:!1}}}},e={},o={args:{inverseColor:!0}};var s,a,c;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:"{}",...(c=(a=e.parameters)==null?void 0:a.docs)==null?void 0:c.source}}};var l,n,i;o.parameters={...o.parameters,docs:{...(l=o.parameters)==null?void 0:l.docs,source:{originalSource:`{ + args: { + inverseColor: true + } +}`,...(i=(n=o.parameters)==null?void 0:n.docs)==null?void 0:i.source}}};const x=["Default","InverseColour"],B=Object.freeze(Object.defineProperty({__proto__:null,Default:e,InverseColour:o,__namedExportsOrder:x,default:k},Symbol.toStringTag,{value:"Module"}));export{B,o as I}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Breadcrumb.docs-CA30-WTK.js b/demo-npm_and_yarn/vite-6.0.3/assets/Breadcrumb.docs-CA30-WTK.js new file mode 100644 index 0000000000..1e5fc09423 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Breadcrumb.docs-CA30-WTK.js @@ -0,0 +1,27 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as i}from"./index-3rgQkYFR.js";import{ae as o,aq as s,ar as a}from"./index-CF71P72j.js";import{B as c}from"./Breadcrumb.stories-DlD_h2bb.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";const u=` + +# Breadcrumb + +The breadcrumb is a secondary navigation pattern that helps a user understand the structure between levels in the website up to the current page. +Users can use it to navigate. + +## Guidelines + +- Only use the breadcrumb trail if it adds something functional for the user and the structure is ‘static’. +- Do not display the breadcrumb trail on a form page. + It distracts the user from their task, or one can accidentally interpret it as a Progress Indicator. +- This is a secondary navigation pattern. + It can’t replace the main navigation. + +### Using links with routing libraries + +Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--docs) on how to integrate links with external routing libraries. +`;/*@license CC0-1.0*/function r(n){const t={h2:"h2",li:"li",ul:"ul",...i(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(o,{of:c}),` +`,e.jsx(s,{children:u}),` +`,e.jsx(a,{}),` +`,e.jsx(t.h2,{id:"guidelines",children:"Guidelines"}),` +`,e.jsxs(t.ul,{children:[` +`,e.jsx(t.li,{children:"A breadcrumb should not display more than 8 items."}),` +`]})]})}function C(n={}){const{wrapper:t}={...i(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(r,{...n})}):r(n)}export{C as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Breadcrumb.stories-DlD_h2bb.js b/demo-npm_and_yarn/vite-6.0.3/assets/Breadcrumb.stories-DlD_h2bb.js new file mode 100644 index 0000000000..f763d72743 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Breadcrumb.stories-DlD_h2bb.js @@ -0,0 +1,13 @@ +import{j as r}from"./jsx-runtime-BjgbQsUx.js";import{c as t}from"./clsx-B-dksMZM.js";import{r as l}from"./index-RigO-4kf.js";const u=l.forwardRef(({children:a,className:n,...s},d)=>r.jsx("li",{className:"ams-breadcrumb__item",children:r.jsx("a",{...s,className:t("ams-breadcrumb__link",n),ref:d,children:a})}));u.displayName="Breadcrumb.Link";try{Breadcrumb.Link.displayName="Breadcrumb.Link",Breadcrumb.Link.__docgenInfo={description:"",displayName:"Breadcrumb.Link",props:{}}}catch{}const b=l.forwardRef(({children:a,className:n,...s},d)=>r.jsx("nav",{...s,className:t("ams-breadcrumb",n),ref:d,children:r.jsx("ol",{className:"ams-breadcrumb__list",children:a})}));b.displayName="Breadcrumb";const e=Object.assign(b,{Link:u});try{e.displayName="Breadcrumb",e.__docgenInfo={description:"",displayName:"Breadcrumb",props:{}}}catch{}const p={title:"Components/Navigation/Breadcrumb",component:e},c={args:{children:[r.jsx(e.Link,{href:"#",children:"Home"},1),r.jsx(e.Link,{href:"#",children:"Afval"},2),r.jsx(e.Link,{href:"#",children:"Bedrijfsafval"},3),r.jsx(e.Link,{href:"#",children:"Recyclepunten voor bedrijven"},4)]}};var o,i,m;c.parameters={...c.parameters,docs:{...(o=c.parameters)==null?void 0:o.docs,source:{originalSource:`{ + args: { + children: [ + Home + , + Afval + , + Bedrijfsafval + , + Recyclepunten voor bedrijven + ] + } +}`,...(m=(i=c.parameters)==null?void 0:i.docs)==null?void 0:m.source}}};const f=["Default"],L=Object.freeze(Object.defineProperty({__proto__:null,Default:c,__namedExportsOrder:f,default:p},Symbol.toStringTag,{value:"Module"}));export{L as B}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Breakout.docs-6pNe_6S9.js b/demo-npm_and_yarn/vite-6.0.3/assets/Breakout.docs-6pNe_6S9.js new file mode 100644 index 0000000000..94ce7bfcd1 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Breakout.docs-6pNe_6S9.js @@ -0,0 +1,25 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as r,aq as i,ar as a,as as l,at as h}from"./index-CF71P72j.js";import{B as c,V as d}from"./Breakout.stories-Cv4CAYsR.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./paddingClasses-C5gheHLv.js";const p=` + +# Breakout + +A composition that lets a figure – e.g. an image, video or map – break out of a Spotlight. +`;/*@license CC0-1.0*/function n(o){const t={code:"code",h2:"h2",h3:"h3",p:"p",...s(),...o.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(r,{of:c}),` +`,e.jsx(i,{children:p}),` +`,e.jsx(t.h3,{id:"how-to-use",children:"How to use"}),` +`,e.jsxs(t.p,{children:["This component is an extension of ",e.jsx(t.code,{children:"Grid"}),`. +It offers the same props, although `,e.jsx(t.code,{children:"span"})," and ",e.jsx(t.code,{children:"start"})," have been renamed to ",e.jsx(t.code,{children:"colSpan"})," and ",e.jsx(t.code,{children:"colStart"}),`. +Additionally, `,e.jsx(t.code,{children:"Breakout"})," allows cells to span multiple rows."]}),` +`,e.jsxs(t.p,{children:["The Cell containing the Spotlight must have ",e.jsx(t.code,{children:'has="spotlight"'}),` to extend to the gaps and margins around it. +This prop can be used only on Cells that span all columns of the grid, so `,e.jsx(t.code,{children:'span="all"'})," is required as well."]}),` +`,e.jsxs(t.p,{children:["The Cell containing the figure must have ",e.jsx(t.code,{children:'has="figure"'})," to ensure it aligns to the bottom."]}),` +`,e.jsx(t.p,{children:`The content that doesn’t break out defines the height of the Spotlight. +Ensure that the text is short, or the image tall, to prevent losing the break-out effect.`}),` +`,e.jsx(t.p,{children:"On narrower screens, let the text move below the image."}),` +`,e.jsx(a,{}),` +`,e.jsx(l,{}),` +`,e.jsx(t.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(t.h3,{id:"vertical-layout",children:"Vertical layout"}),` +`,e.jsx(t.p,{children:"A large figure can be placed at the top of the Spotlight, with related text positioned underneath."}),` +`,e.jsx(h,{of:d})]})}function B(o={}){const{wrapper:t}={...s(),...o.components};return t?e.jsx(t,{...o,children:e.jsx(n,{...o})}):n(o)}export{B as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Breakout.stories-Cv4CAYsR.js b/demo-npm_and_yarn/vite-6.0.3/assets/Breakout.stories-Cv4CAYsR.js new file mode 100644 index 0000000000..5a88a14267 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Breakout.stories-Cv4CAYsR.js @@ -0,0 +1,62 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{s as V,t as k,P as p,I as C}from"./index.esm-kzH9sPjb.js";import{c as b}from"./clsx-B-dksMZM.js";import{r as _}from"./index-RigO-4kf.js";import{a as i,p as N}from"./paddingClasses-C5gheHLv.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const T=(a,t,l,o)=>[...i("ams-breakout__cell--col-span-",a),...i("ams-breakout__cell--col-start-",t),...i("ams-breakout__cell--row-span-",l),...i("ams-breakout__cell--row-start-",o)],B=_.forwardRef(({as:a="div",children:t,className:l,colSpan:o,colStart:d,has:u,rowSpan:m,rowStart:c,...x},j)=>e.jsx(a,{...x,ref:j,className:b("ams-breakout__cell",T(o,d,m,c),u&&`ams-breakout__cell--has-${u}`,l),children:t}));B.displayName="Breakout.Cell";try{Breakout.Cell.displayName="Breakout.Cell",Breakout.Cell.__docgenInfo={description:"",displayName:"Breakout.Cell",props:{as:{defaultValue:null,description:"The HTML element to use.",name:"as",required:!1,type:{name:"enum",value:[{value:'"article"'},{value:'"div"'},{value:'"section"'}]}},colSpan:{defaultValue:null,description:`Lets the cell span the full width of all grid variants. +The amount of grid columns the cell spans.`,name:"colSpan",required:!1,type:{name:'"all" | GridColumnNumber | GridColumnNumbers'}},colStart:{defaultValue:null,description:"The index of the grid column the cell starts at.",name:"colStart",required:!1,type:{name:"GridColumnNumber | GridColumnNumbers"}},has:{defaultValue:null,description:`The content of this cell. +The Cell containing the Spotlight expands horizontally and vertically to cover the adjacent gaps and margins. +The Cell containing the Image aligns itself to the bottom of the row, in case it is less tall than the text.`,name:"has",required:!1,type:{name:"enum",value:[{value:'"figure"'},{value:'"spotlight"'}]}},rowSpan:{defaultValue:null,description:"The amount of grid rows the cell spans.",name:"rowSpan",required:!1,type:{name:"BreakoutRowNumber | BreakoutRowNumbers"}},rowStart:{defaultValue:null,description:"The index of the grid row the cell starts at.",name:"rowStart",required:!1,type:{name:"BreakoutRowNumber | BreakoutRowNumbers"}}}}}catch{}const y=_.forwardRef(({children:a,className:t,gapVertical:l,paddingBottom:o,paddingTop:d,paddingVertical:u,...m},c)=>e.jsx("div",{...m,ref:c,className:b("ams-breakout",l&&`ams-breakout--gap-vertical--${l}`,N("breakout",o,d,u),t),children:a}));y.displayName="Breakout";const r=Object.assign(y,{Cell:B});try{r.displayName="Breakout",r.__docgenInfo={description:"",displayName:"Breakout",props:{as:{defaultValue:null,description:"The HTML tag to use.",name:"as",required:!1,type:{name:"enum",value:[{value:'"article"'},{value:'"main"'},{value:'"div"'},{value:'"section"'},{value:'"aside"'},{value:'"footer"'},{value:'"header"'},{value:'"nav"'}]}},gapVertical:{defaultValue:null,description:"The amount of space between rows.",name:"gapVertical",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"small"'},{value:'"large"'}]}},paddingBottom:{defaultValue:null,description:"The amount of space below.",name:"paddingBottom",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'},{value:'"medium"'}]}},paddingTop:{defaultValue:null,description:"The amount of space above.",name:"paddingTop",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'},{value:'"medium"'}]}},paddingVertical:{defaultValue:null,description:"The amount of space above and below.",name:"paddingVertical",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'},{value:'"medium"'}]}}}}}catch{}const q={title:"Components/Layout/Breakout",component:r,decorators:[a=>e.jsx(V,{children:e.jsx(a,{})})]},n={args:{children:[e.jsx(r.Cell,{colSpan:"all",has:"spotlight",rowSpan:{medium:2,narrow:2,wide:1},rowStart:2,children:e.jsx(k,{})}),e.jsx(r.Cell,{colSpan:{medium:8,narrow:4,wide:6},colStart:1,rowStart:{medium:3,narrow:3,wide:2},children:e.jsx(p,{inverseColor:!0,children:"Het doel van deze club is om ervoor te zorgen dat de Zuidas steeds duurzamer wordt."})}),e.jsx(r.Cell,{colSpan:{medium:8,narrow:4,wide:6},colStart:{medium:1,narrow:1,wide:7},has:"figure",rowSpan:2,rowStart:1,children:e.jsx(C,{alt:"",aspectRatio:"square",src:"https://picsum.photos/960/960"})})]}},s={args:{children:[e.jsx(r.Cell,{colSpan:"all",has:"figure",rowSpan:2,rowStart:1,children:e.jsx(C,{alt:"",src:"https://picsum.photos/1600/900"})}),e.jsx(r.Cell,{colSpan:"all",has:"spotlight",rowSpan:2,rowStart:2,children:e.jsx(k,{})}),e.jsxs(r.Cell,{colSpan:{medium:6,narrow:4,wide:8},colStart:{medium:2,narrow:1,wide:3},rowStart:3,children:[e.jsx(p,{className:"ams-mb--sm",inverseColor:!0,children:"Vertel ons in het evenementenformulier wat u wilt gaan doen. U checkt daarmee of u een vergunning nodig hebt."}),e.jsx(p,{inverseColor:!0,children:"Daarna vraagt u de vergunning aan in hetzelfde formulier. Of doet u een gratis melding of vooraankondiging."})]})]}};var h,g,w;n.parameters={...n.parameters,docs:{...(h=n.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + children: [ + + , + + Het doel van deze club is om ervoor te zorgen dat de Zuidas steeds duurzamer wordt. + + , + + ] + } +}`,...(w=(g=n.parameters)==null?void 0:g.docs)==null?void 0:w.source}}};var f,v,S;s.parameters={...s.parameters,docs:{...(f=s.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + children: [ + + , + + , + + Vertel ons in het evenementenformulier wat u wilt gaan doen. U checkt daarmee of u een vergunning nodig hebt. + + + Daarna vraagt u de vergunning aan in hetzelfde formulier. Of doet u een gratis melding of vooraankondiging. + + ] + } +}`,...(S=(v=s.parameters)==null?void 0:v.docs)==null?void 0:S.source}}};const z=["Default","VerticalLayout"],G=Object.freeze(Object.defineProperty({__proto__:null,Default:n,VerticalLayout:s,__namedExportsOrder:z,default:q},Symbol.toStringTag,{value:"Module"}));export{G as B,s as V}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Button-nAoFhtc2.js b/demo-npm_and_yarn/vite-6.0.3/assets/Button-nAoFhtc2.js new file mode 100644 index 0000000000..00a9cffa54 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Button-nAoFhtc2.js @@ -0,0 +1 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{c as d}from"./clsx-B-dksMZM.js";import{r as f}from"./index-RigO-4kf.js";import{I as s}from"./Icon-B4wlDyQ3.js";const r=f.forwardRef(({children:o,className:l,disabled:i,icon:e,iconBefore:n,iconOnly:a,type:u,variant:m="primary",...p},c)=>t.jsxs("button",{...p,className:d("ams-button",`ams-button--${m}`,e&&a&&"ams-button--icon-only",l),disabled:i,ref:c,type:u||"button",children:[e&&(n||a)&&t.jsx(s,{svg:e,size:"level-5",square:a}),e&&a?t.jsx("span",{className:"ams-visually-hidden",children:o}):o,e&&!n&&!a&&t.jsx(s,{svg:e,size:"level-5"})]}));r.displayName="Button";try{r.displayName="Button",r.__docgenInfo={description:"",displayName:"Button",props:{variant:{defaultValue:{value:"primary"},description:"The level of prominence. Use a primary button only once per page or section.",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'}]}},icon:{defaultValue:null,description:"Adds an icon to the button, showing it after the label.",name:"icon",required:!1,type:{name:"Function"}},iconBefore:{defaultValue:null,description:"Shows the icon before the label. Requires a value for `icon`. Cannot be used together with `iconOnly`.",name:"iconBefore",required:!1,type:{name:"boolean"}},iconOnly:{defaultValue:null,description:"Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`.",name:"iconOnly",required:!1,type:{name:"boolean"}}}}}catch{}export{r as B}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Button.docs-DUX6jThK.js b/demo-npm_and_yarn/vite-6.0.3/assets/Button.docs-DUX6jThK.js new file mode 100644 index 0000000000..f1dcf6bf54 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Button.docs-DUX6jThK.js @@ -0,0 +1,67 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as i}from"./index-3rgQkYFR.js";import{ae as s,aq as a,ar as c,as as h,at as t}from"./index-CF71P72j.js";import{B as l,P as d,S as u,T as p,W as m,a as b,b as f,c as w}from"./Button.stories-CGdmV23k.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-CPc1noYl.js";import"./Button-nAoFhtc2.js";import"./clsx-B-dksMZM.js";import"./Icon-B4wlDyQ3.js";const x=` + +# Button + +Allows the user to perform actions and operate the user interface. + +## Guidelines + +- Choose a short label that describes the function of the button. +- Use the correct type of button for the corresponding application, e.g. \`type="submit"\` for the primary form button. +- Make sure one can operate a button through a keyboard. +- Wrap 2 or more consecutive buttons and/or links in an [Action Group](?path=/docs/components-buttons-action-group--docs). +- Primary, secondary and tertiary buttons can be used side by side. + Skipping levels is allowed. + +## Relevant WCAG requirements + +- [WCAG requirement 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): + You can activate the button with \`Enter\` or \`Space\`, and it is possible with ‘Tab’ the button to focus. + Using \`Space\` does not result in scrolling the page. +- [WCAG requirement 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): the label of the button must be clear +- [WCAG requirement 2.5.2](https://www.w3.org/TR/WCAG21/#pointer-cancellation): + - do not use the \`mousedown\` event to activate the button, instead use the \`click\` event + - \`mousedown\` may only be used if \`mouseup\` undoes the effect, for example, a “fast forward” button to fast-forward audio or video. +- [WCAG requirement 2.5.5](https://www.w3.org/TR/WCAG21/#target-size): The button must be large enough to click, and small buttons should not be too close to another button. + +## References + +- [W3C - Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) +- [W3C - Headings & labels](https://www.w3.org/TR/WCAG21/#headings-and-labels) +`;/*@license CC0-1.0*/function r(o){const e={h2:"h2",h3:"h3",p:"p",...i(),...o.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(s,{of:l}),` +`,n.jsx(a,{children:x}),` +`,n.jsx(c,{}),` +`,n.jsx(h,{}),` +`,n.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(e.h3,{id:"primary",children:"Primary"}),` +`,n.jsx(e.p,{children:`A primary button draws attention to the most important call to action. +Only one primary Button should be used per screen.`}),` +`,n.jsx(t,{of:d}),` +`,n.jsx(e.h3,{id:"secondary",children:"Secondary"}),` +`,n.jsx(e.p,{children:"Use a secondary button for other actions."}),` +`,n.jsx(t,{of:u}),` +`,n.jsx(e.h3,{id:"tertiary",children:"Tertiary"}),` +`,n.jsx(e.p,{children:`Tertiary buttons can be used to distinguish their importance from secondary buttons. +They are also a good choice for buttons with an icon only.`}),` +`,n.jsx(t,{of:p}),` +`,n.jsx(e.h3,{id:"with-icon",children:"With icon"}),` +`,n.jsx(e.p,{children:`Add an icon if it makes it easier or faster to understand its purpose. +The icon will appear after the label.`}),` +`,n.jsx(t,{of:m}),` +`,n.jsx(e.h3,{id:"with-icon-before",children:"With icon before"}),` +`,n.jsx(e.p,{children:"The icon can also appear before the label."}),` +`,n.jsx(t,{of:b}),` +`,n.jsx(e.h3,{id:"with-icon-only",children:"With icon only"}),` +`,n.jsx(e.p,{children:`A button can even consist of an icon only. +Do this only for icons that are universally recognized. +You must still provide a label – it will be used to make the button accessible.`}),` +`,n.jsx(t,{of:f}),` +`,n.jsx(e.h3,{id:"text-wrapping",children:"Text wrapping"}),` +`,n.jsx(e.p,{children:`Keep in mind that the label may occasionally wrap over multiple lines: +a shorter text might be unavailable, +two buttons could sit next to each other on a narrow screen, +or the user has configured a large font on their device. +This is fine.`}),` +`,n.jsx(t,{of:w})]})}function P(o={}){const{wrapper:e}={...i(),...o.components};return e?n.jsx(e,{...o,children:n.jsx(r,{...o})}):r(o)}export{P as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Button.stories-CGdmV23k.js b/demo-npm_and_yarn/vite-6.0.3/assets/Button.stories-CGdmV23k.js new file mode 100644 index 0000000000..4e1f5c92c3 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Button.stories-CGdmV23k.js @@ -0,0 +1,38 @@ +import{j as i}from"./jsx-runtime-BjgbQsUx.js";import{I as d,c}from"./index.esm-CPc1noYl.js";import{B as A}from"./Button-nAoFhtc2.js";const V={title:"Components/Buttons/Button",component:A,args:{children:"Versturen",disabled:!1,icon:void 0,iconBefore:!1,iconOnly:!1,variant:"primary"},argTypes:{disabled:{description:"Prevents interaction. Avoid if possible."},icon:{control:{type:"select",labels:{undefined:"none"}},options:[void 0,...Object.keys(d)],mapping:d},iconBefore:{control:{type:"boolean"},if:{arg:"icon"}},iconOnly:{control:{type:"boolean"},if:{arg:"icon"}}}},r={},e={args:{children:"Annuleren",variant:"secondary"}},n={args:{children:"Terug",variant:"tertiary"}},o={args:{children:"Sluiten",icon:c}},a={args:{children:"Sluiten",icon:c,iconBefore:!0}},s={args:{children:"Sluiten",icon:c,iconOnly:!0,variant:"tertiary"}},t={args:{children:"Vergunningsaanvraag verzenden"},decorators:[z=>i.jsx("div",{style:{maxWidth:"16rem"},children:i.jsx(z,{})})]};var l,p,m;r.parameters={...r.parameters,docs:{...(l=r.parameters)==null?void 0:l.docs,source:{originalSource:"{}",...(m=(p=r.parameters)==null?void 0:p.docs)==null?void 0:m.source}}};var u,g,y;e.parameters={...e.parameters,docs:{...(u=e.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + children: 'Annuleren', + variant: 'secondary' + } +}`,...(y=(g=e.parameters)==null?void 0:g.docs)==null?void 0:y.source}}};var h,S,v;n.parameters={...n.parameters,docs:{...(h=n.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + children: 'Terug', + variant: 'tertiary' + } +}`,...(v=(S=n.parameters)==null?void 0:S.docs)==null?void 0:v.source}}};var f,I,B;o.parameters={...o.parameters,docs:{...(f=o.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + children: 'Sluiten', + icon: Icons.CloseIcon + } +}`,...(B=(I=o.parameters)==null?void 0:I.docs)==null?void 0:B.source}}};var b,W,x;a.parameters={...a.parameters,docs:{...(b=a.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + children: 'Sluiten', + icon: Icons.CloseIcon, + iconBefore: true + } +}`,...(x=(W=a.parameters)==null?void 0:W.docs)==null?void 0:x.source}}};var O,T,j;s.parameters={...s.parameters,docs:{...(O=s.parameters)==null?void 0:O.docs,source:{originalSource:`{ + args: { + children: 'Sluiten', + icon: Icons.CloseIcon, + iconOnly: true, + variant: 'tertiary' + } +}`,...(j=(T=s.parameters)==null?void 0:T.docs)==null?void 0:j.source}}};var _,C,P;t.parameters={...t.parameters,docs:{...(_=t.parameters)==null?void 0:_.docs,source:{originalSource:`{ + args: { + children: 'Vergunningsaanvraag verzenden' + }, + decorators: [Story =>
    + +
    ] +}`,...(P=(C=t.parameters)==null?void 0:C.docs)==null?void 0:P.source}}};const E=["Primary","Secondary","Tertiary","WithIcon","WithIconBefore","WithIconOnly","TextWrapping"],q=Object.freeze(Object.defineProperty({__proto__:null,Primary:r,Secondary:e,Tertiary:n,TextWrapping:t,WithIcon:o,WithIconBefore:a,WithIconOnly:s,__namedExportsOrder:E,default:V},Symbol.toStringTag,{value:"Module"}));export{q as B,r as P,e as S,n as T,o as W,a,s as b,t as c}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Card.docs-CtU-VIv7.js b/demo-npm_and_yarn/vite-6.0.3/assets/Card.docs-CtU-VIv7.js new file mode 100644 index 0000000000..2ceedb40de --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Card.docs-CtU-VIv7.js @@ -0,0 +1,45 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as r,aq as s,ar as d,at as a}from"./index-CF71P72j.js";import{C as c,W as h,a as l}from"./Card.stories-D8QOoDip.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./exampleContent-hIIPvEhU.js";import"./Paragraph-B2U4A2CY.js";const p=` + +# Card + +Use a card on an overview page to link to an article page, such as a news article, a job vacancy, or a search result. +The card typically includes the title, introduction, and an image of the content. +The link is mandatory. + +## Guidelines + +- The title of a card is a link within a heading. + The same guidelines as for regular [links](/docs/components-navigation-link--docs) and [headings](/docs/components-text-heading--docs) apply here. + The link is active across the entire area of the card. +- A card needs more content than just a title. + Supplement this with textual and/or visual content. +- Place the text in a regular paragraph. + Only use the smallest text size for a tagline or date. +- This component may not be the best option if the content does not represent a detailed page. + For referencing a thematic page, use a [top task link](/docs/components-navigation-top-task-link--docs). + You can also use a [regular link](/docs/components-navigation-link--docs). + +### Screen readers + +With a screen reader, you can navigate using headings and links in a document. +The title of a card is a link within a heading, allowing you to utilize both navigation methods. +A screen reader reads the title first, followed by the rest of the content. + +### Using links with routing libraries + +Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--docs) on how to integrate links with external routing libraries. +`;/*@license CC0-1.0*/function i(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...o(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(r,{of:c}),` +`,e.jsx(s,{children:p}),` +`,e.jsx(d,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"with-tagline",children:"With tagline"}),` +`,e.jsxs(n.p,{children:[`A card can display a tagline above the heading, a short term like a category or type of information. +Wrap the tagline and the heading in a `,e.jsx(n.code,{children:"Card.HeadingGroup"}),`. +This ensures screen readers first read the heading and then the tagline.`]}),` +`,e.jsx(a,{of:h}),` +`,e.jsx(n.h3,{id:"with-image",children:"With image"}),` +`,e.jsxs(n.p,{children:[`A card often displays the image of the detail page. +Use `,e.jsx(n.a,{href:"/docs/layout-aspect-ratio--docs",children:"Aspect Ratio"})," for the correct aspect ratio."]}),` +`,e.jsx(a,{of:l})]})}function R(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{R as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Card.stories-D8QOoDip.js b/demo-npm_and_yarn/vite-6.0.3/assets/Card.stories-D8QOoDip.js new file mode 100644 index 0000000000..c76f60185c --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Card.stories-D8QOoDip.js @@ -0,0 +1,29 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{H as l,P as c,I as G}from"./index.esm-kzH9sPjb.js";import{h as v}from"./exampleContent-hIIPvEhU.js";import{c as p}from"./clsx-B-dksMZM.js";import{r as g}from"./index-RigO-4kf.js";import{P as z}from"./Paragraph-B2U4A2CY.js";const w=g.forwardRef(({children:a,className:n,tagline:s,...o},L)=>e.jsxs("hgroup",{...o,ref:L,className:p("ams-card__heading-group",n),children:[a,e.jsx(z,{size:"small",children:s})]}));w.displayName="Card.HeadingGroup";try{Card.HeadingGroup.displayName="Card.HeadingGroup",Card.HeadingGroup.__docgenInfo={description:"",displayName:"Card.HeadingGroup",props:{tagline:{defaultValue:null,description:"A short phrase of text, e.g. to categorise the card. Displayed above the card heading.",name:"tagline",required:!0,type:{name:"string"}}}}}catch{}const H=g.forwardRef(({children:a,className:n,...s},o)=>e.jsx("a",{...s,ref:o,className:p("ams-card__link",n),children:a}));H.displayName="Card.Link";try{Card.Link.displayName="Card.Link",Card.Link.__docgenInfo={description:"",displayName:"Card.Link",props:{}}}catch{}const N=g.forwardRef(({children:a,className:n,...s},o)=>e.jsx("article",{...s,ref:o,className:p("ams-card",n),children:a}));N.displayName="Card";const r=Object.assign(N,{HeadingGroup:w,Link:H});try{r.displayName="Card",r.__docgenInfo={description:"",displayName:"Card",props:{}}}catch{}const P=new Intl.DateTimeFormat("nl",{day:"numeric",month:"long",year:"numeric"}),b=P.format(Date.now()),m=v(),I={title:"Components/Navigation/Card",component:r,decorators:[a=>e.jsx("div",{style:{maxWidth:"24rem"},children:e.jsx(a,{})})]},i={args:{children:[e.jsx(l,{size:"level-4",children:e.jsx(r.Link,{href:"/",children:m.heading})},1),e.jsx(c,{children:m.description},2)]}},t={args:{children:[e.jsx(r.HeadingGroup,{tagline:"Dossier",children:e.jsx(l,{size:"level-4",children:e.jsx(r.Link,{href:"/",children:"Monitor Attracties MRA"})})},1),e.jsx(c,{children:"Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam."},2)]}},d={args:{children:[e.jsx(G,{alt:"",aspectRatio:"wide",src:"https://picsum.photos/480/360"},1),e.jsx(r.HeadingGroup,{tagline:"Nieuws",children:e.jsx(l,{size:"level-4",children:e.jsx(r.Link,{href:"/",children:"Nederlands eerste houten woonwijk komt in Zuidoost"})})},2),e.jsx(c,{children:"We bouwen een levendige, groene en duurzame woonbuurt tussen de Gooiseweg en het Nelson Mandelapark."},3),e.jsx(c,{size:"small",children:b},4)]}};var h,u,k;i.parameters={...i.parameters,docs:{...(h=i.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + children: [ + {topTask.heading} + , {topTask.description}] + } +}`,...(k=(u=i.parameters)==null?void 0:u.docs)==null?void 0:k.source}}};var _,y,C;t.parameters={...t.parameters,docs:{...(_=t.parameters)==null?void 0:_.docs,source:{originalSource:`{ + args: { + children: [ + + Monitor Attracties MRA + + , + Ontwikkeling van het aantal attracties en bezoekers in de metropoolregio Amsterdam. + ] + } +}`,...(C=(y=t.parameters)==null?void 0:y.docs)==null?void 0:C.source}}};var f,x,j;d.parameters={...d.parameters,docs:{...(f=d.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + children: [, + + Nederlands eerste houten woonwijk komt in Zuidoost + + , + We bouwen een levendige, groene en duurzame woonbuurt tussen de Gooiseweg en het Nelson Mandelapark. + , + {today} + ] + } +}`,...(j=(x=d.parameters)==null?void 0:x.docs)==null?void 0:j.source}}};const R=["Default","WithTagline","WithImage"],S=Object.freeze(Object.defineProperty({__proto__:null,Default:i,WithImage:d,WithTagline:t,__namedExportsOrder:R,default:I},Symbol.toStringTag,{value:"Module"}));export{S as C,t as W,d as a}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/CharacterCount.docs-CG3Ek90f.js b/demo-npm_and_yarn/vite-6.0.3/assets/CharacterCount.docs-CG3Ek90f.js new file mode 100644 index 0000000000..e9f5a22568 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/CharacterCount.docs-CG3Ek90f.js @@ -0,0 +1,29 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as a}from"./index-3rgQkYFR.js";import{ae as o,aq as s,ar as h,as as i,at as c}from"./index-CF71P72j.js";import{C as m,E as l}from"./CharacterCount.stories-DXeDr-El.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";const u=` + +# Character Count + +Help users know how much text they can enter when there is a limit on the number of characters. + +Users will get updates at a pace that works best for the way they interact with the textarea. This means: + +- sighted users will see a count message that updates as they type; +- screen reader users will hear the count announcement when they stop typing. + +This component does not restrict the user from entering information. The user can enter more than the character limit, but are told they’ve entered too many characters. This lets them type or copy and paste their full answer, then edit it down. + +## Guidelines + +- Only use a character count when there is a good reason for limiting the number of characters users can enter. + For example, if there is an indication that users are likely to enter more information than they need to. + Or when there is a legal or technical reason that means an entry must be no more than a certain number of characters. +- If your users keep hitting the character limit imposed by the backend of your service then try to increase the limit rather than use a character count. +`;/*@license CC0-1.0*/function r(t){const n={h2:"h2",h3:"h3",p:"p",...a(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(o,{of:m}),` +`,e.jsx(s,{children:u}),` +`,e.jsx(h,{}),` +`,e.jsx(i,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"error",children:"Error"}),` +`,e.jsx(n.p,{children:"When the length exceeds the maximum length, the color of the text changes to red."}),` +`,e.jsx(c,{of:l})]})}function T(t={}){const{wrapper:n}={...a(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(r,{...t})}):r(t)}export{T as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/CharacterCount.stories-DXeDr-El.js b/demo-npm_and_yarn/vite-6.0.3/assets/CharacterCount.stories-DXeDr-El.js new file mode 100644 index 0000000000..98ae2d3abb --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/CharacterCount.stories-DXeDr-El.js @@ -0,0 +1,9 @@ +import{j as h}from"./jsx-runtime-BjgbQsUx.js";import{c as g}from"./clsx-B-dksMZM.js";import{r as f}from"./index-RigO-4kf.js";const t=f.forwardRef(({className:a,length:o,maxLength:n,...d},i)=>h.jsx("div",{...d,ref:i,className:g("ams-character-count",o>n&&"ams-character-count--error",a),role:"status",children:`${o} van ${n} tekens`}));t.displayName="CharacterCount";try{t.displayName="CharacterCount",t.__docgenInfo={description:"",displayName:"CharacterCount",props:{length:{defaultValue:null,description:"The current length of the field’s value.",name:"length",required:!0,type:{name:"number"}},maxLength:{defaultValue:null,description:"The maximum length of the field’s value.",name:"maxLength",required:!0,type:{name:"number"}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const C={title:"Components/Forms/Character Count",component:t,args:{length:7,maxLength:10}},e={},r={args:{length:1001,maxLength:1e3}};var s,c,m;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:"{}",...(m=(c=e.parameters)==null?void 0:c.docs)==null?void 0:m.source}}};var u,l,p;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + length: 1001, + maxLength: 1000 + } +}`,...(p=(l=r.parameters)==null?void 0:l.docs)==null?void 0:p.source}}};const _=["Default","Error"],b=Object.freeze(Object.defineProperty({__proto__:null,Default:e,Error:r,__namedExportsOrder:_,default:C},Symbol.toStringTag,{value:"Module"}));export{b as C,r as E}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Checkbox.docs-DDfF2GFn.js b/demo-npm_and_yarn/vite-6.0.3/assets/Checkbox.docs-DDfF2GFn.js new file mode 100644 index 0000000000..c27f55a320 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Checkbox.docs-DDfF2GFn.js @@ -0,0 +1,50 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as a,aq as r,ar as l,as as c,at as i}from"./index-CF71P72j.js";import{C as d,L as h,I as p,a as f}from"./Checkbox.stories-Dz3UwPHH.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const m=` + +# Checkbox + +Allows users to make a selection or agree to terms. + +## Guidelines + +- Checkboxes are used for one or multiple choices that do not exclude each other. +- Each checkbox operates independently of other checkboxes in a list at the same hierarchical level. + Checking an additional checkbox does not affect other selections in that list. +- You can use a checkbox for bulk selection or deselection of an entire list of checkboxes. + Still, it should be clear that the bulk selection checkbox is at a different hierarchical level than the list being fully selected or deselected. +- Use a group of checkboxes to filter data on a page, in a menu, or within a component. +- A checkbox can answer a closed question if multiple answers are possible. +- A list of checkboxes is vertically stacked to enhance readability and usability. +- A list of checkboxes should be in a \`fieldset\` with a \`legend\` describing what the list is about. + For example, if the checkboxes are used to get answers to a question, the \`legend\` is the question. + +## Checkbox labels + +A label starts with a capital letter. +It does not have punctuation at the end if it is a single sentence, word, or fragment. +It is written in the first person when asking the user to agree to the terms and conditions. + +## Relevant WCAG requirements + +- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): It is clear for both users and programmatically what the purpose of a form field is. + +Checkbox is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. +`;/*@license CC0-1.0*/function o(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...s(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(a,{of:d}),` +`,e.jsx(r,{children:m}),` +`,e.jsx(l,{}),` +`,e.jsx(c,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"long-label",children:"Long label"}),` +`,e.jsx(i,{of:h}),` +`,e.jsx(n.h3,{id:"in-a-field-set",children:"In a Field Set"}),` +`,e.jsx(n.p,{children:"Use a Field Set to group several Checkboxes with a legend, description and / or an Error Message."}),` +`,e.jsxs(n.p,{children:["Because of an ",e.jsx(n.a,{href:"https://github.com/nvaccess/nvda/issues/12718",rel:"nofollow",children:"NVDA bug"}),", we add the description text to the Field Set with ",e.jsx(n.code,{children:"aria-labelledby"}),`, +instead of `,e.jsx(n.code,{children:"aria-describedby"}),"."]}),` +`,e.jsxs(n.p,{children:["If you don’t need the description, remove its Paragraph and the Paragraphs ",e.jsx(n.code,{children:"id"})," from the Field Set ",e.jsx(n.code,{children:"aria-labelledby"}),"."]}),` +`,e.jsxs(n.p,{children:["Check ",e.jsx(n.a,{href:"/docs/components-forms-field-set--docs",children:"the Field Set docs"})," for more information on configuring it."]}),` +`,e.jsx(i,{of:p}),` +`,e.jsx(n.h3,{id:"in-a-field-set-with-validation",children:"In a Field Set with validation"}),` +`,e.jsxs(n.p,{children:["If the Checkbox can become invalid, add an Error Message component and its ",e.jsx(n.code,{children:"id"})," to the ",e.jsx(n.code,{children:"aria-labelledby"})," attribute of the Field Set."]}),` +`,e.jsxs(n.p,{children:["Check ",e.jsx(n.a,{href:"/docs/components-forms-field-set--docs",children:"the Field Set docs"})," for more information on configuring it."]}),` +`,e.jsx(i,{of:f})]})}function q(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{q as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Checkbox.stories-Dz3UwPHH.js b/demo-npm_and_yarn/vite-6.0.3/assets/Checkbox.stories-Dz3UwPHH.js new file mode 100644 index 0000000000..bc3c19653f --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Checkbox.stories-Dz3UwPHH.js @@ -0,0 +1,102 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{F as I,P as E,E as S,C as N}from"./index.esm-kzH9sPjb.js";import{c as F}from"./clsx-B-dksMZM.js";import{r as i}from"./index-RigO-4kf.js";const r=i.forwardRef(({children:a,className:c,invalid:m,indeterminate:o,...w},A)=>{const b=i.useId(),s=i.useRef(null);return i.useImperativeHandle(A,()=>s.current),i.useEffect(()=>{s.current&&(s.current.indeterminate=!!o)},[s,o]),e.jsxs("div",{className:F("ams-checkbox",c),children:[e.jsx("input",{...w,"aria-invalid":m||void 0,className:"ams-checkbox__input",id:b,ref:s,type:"checkbox"}),e.jsxs("label",{className:"ams-checkbox__label",htmlFor:b,children:[e.jsx("span",{className:"ams-checkbox__checkmark"}),a]})]})});r.displayName="Checkbox";try{r.displayName="Checkbox",r.__docgenInfo={description:"",displayName:"Checkbox",props:{invalid:{defaultValue:null,description:"Whether the value fails a validation rule.",name:"invalid",required:!1,type:{name:"boolean"}},indeterminate:{defaultValue:null,description:"Allows being neither checked nor unchecked.",name:"indeterminate",required:!1,type:{name:"boolean"}}}}}catch{}const{useArgs:z}=__STORYBOOK_MODULE_PREVIEW_API__,P={title:"Components/Forms/Checkbox",component:r,args:{checked:!1,children:"Checkbox label",disabled:!1,indeterminate:!1,invalid:!1},argTypes:{checked:{description:"Whether the control is checked."},children:{description:"The text for the label.",table:{disable:!1}},disabled:{description:"Prevents interaction. Avoid if possible."},onChange:{action:"clicked",table:{disable:!0}}},render:a=>{const[,c]=z(),m=o=>{c({checked:o.target.checked})};return e.jsx(r,{onClick:m,...a})}},l={},n={args:{children:"Ik heb alle gegevens correct en volledig ingevuld. Ik begrijp dat een verhuizing via internet dezelfde juridische status heeft als een verhuizing met een geschreven geldige handtekening."}},t={argTypes:{checked:{table:{disable:!0}},children:{table:{disable:!0}},disabled:{table:{disable:!0}},indeterminate:{table:{disable:!0}}},render:({invalid:a})=>e.jsxs(I,{"aria-labelledby":`fieldset1 description1${a?" error1":""}`,id:"fieldset1",invalid:a,legend:"Waar gaat uw melding over?",children:[e.jsx(E,{className:"ams-mb--sm",id:"description1",size:"small",children:"De laatstgenoemde melding."}),a&&e.jsx(S,{className:"ams-mb--sm",id:"error1",children:"Geef aan waar uw laatstgenoemde melding over gaat."}),e.jsxs(N,{gap:"extra-small",children:[e.jsx(r,{invalid:a,name:"about",value:"horeca",children:"Horecabedrijf"}),e.jsx(r,{invalid:a,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),e.jsx(r,{invalid:a,name:"about",value:"evenement",children:"Evenement"}),e.jsx(r,{invalid:a,name:"about",value:"anders",children:"Iets anders"})]})]})},d={args:{invalid:!0},argTypes:{checked:{table:{disable:!0}},children:{table:{disable:!0}},disabled:{table:{disable:!0}},indeterminate:{table:{disable:!0}}},render:({invalid:a})=>e.jsxs(I,{"aria-labelledby":`fieldset2 description2${a?" error2":""}`,id:"fieldset2",invalid:a,legend:"Waar gaat uw melding over?",children:[e.jsx(E,{className:"ams-mb--sm",id:"description2",size:"small",children:"De laatstgenoemde melding."}),a&&e.jsx(S,{className:"ams-mb--sm",id:"error2",children:"Geef aan waar uw laatstgenoemde melding over gaat."}),e.jsxs(N,{gap:"extra-small",children:[e.jsx(r,{invalid:a,name:"about",value:"horeca",children:"Horecabedrijf"}),e.jsx(r,{invalid:a,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),e.jsx(r,{invalid:a,name:"about",value:"evenement",children:"Evenement"}),e.jsx(r,{invalid:a,name:"about",value:"anders",children:"Iets anders"})]})]})};var u,h,g;l.parameters={...l.parameters,docs:{...(u=l.parameters)==null?void 0:u.docs,source:{originalSource:"{}",...(g=(h=l.parameters)==null?void 0:h.docs)==null?void 0:g.source}}};var v,p,x;n.parameters={...n.parameters,docs:{...(v=n.parameters)==null?void 0:v.docs,source:{originalSource:`{ + args: { + children: 'Ik heb alle gegevens correct en volledig ingevuld. Ik begrijp dat een verhuizing via internet dezelfde juridische status heeft als een verhuizing met een geschreven geldige handtekening.' + } +}`,...(x=(p=n.parameters)==null?void 0:p.docs)==null?void 0:x.source}}};var f,k,j;t.parameters={...t.parameters,docs:{...(f=t.parameters)==null?void 0:f.docs,source:{originalSource:`{ + argTypes: { + checked: { + table: { + disable: true + } + }, + children: { + table: { + disable: true + } + }, + disabled: { + table: { + disable: true + } + }, + indeterminate: { + table: { + disable: true + } + } + }, + render: ({ + invalid + }) =>
    + + De laatstgenoemde melding. + + {invalid && + Geef aan waar uw laatstgenoemde melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(j=(k=t.parameters)==null?void 0:k.docs)==null?void 0:j.source}}};var C,_,y;d.parameters={...d.parameters,docs:{...(C=d.parameters)==null?void 0:C.docs,source:{originalSource:`{ + args: { + invalid: true + }, + argTypes: { + checked: { + table: { + disable: true + } + }, + children: { + table: { + disable: true + } + }, + disabled: { + table: { + disable: true + } + }, + indeterminate: { + table: { + disable: true + } + } + }, + render: ({ + invalid + }) =>
    + + De laatstgenoemde melding. + + {invalid && + Geef aan waar uw laatstgenoemde melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(y=(_=d.parameters)==null?void 0:_.docs)==null?void 0:y.source}}};const W=["Default","LongLabel","InAFieldSet","InAFieldSetWithValidation"],L=Object.freeze(Object.defineProperty({__proto__:null,Default:l,InAFieldSet:t,InAFieldSetWithValidation:d,LongLabel:n,__namedExportsOrder:W,default:P},Symbol.toStringTag,{value:"Module"}));export{L as C,t as I,n as L,d as a}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Color-F6OSRLHC-DKiGjn40.js b/demo-npm_and_yarn/vite-6.0.3/assets/Color-F6OSRLHC-DKiGjn40.js new file mode 100644 index 0000000000..0799998c21 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Color-F6OSRLHC-DKiGjn40.js @@ -0,0 +1 @@ +import{ak as ce,al as M,a2 as J,a0 as he,N as fe,am as de,an as ge,ao as be,ap as q}from"./index-CF71P72j.js";import{R as m,r as p}from"./index-RigO-4kf.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./jsx-runtime-BjgbQsUx.js";import"./index-D2MAbzvX.js";import"./_commonjsHelpers-CqkleIqs.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";var me=q({"../../node_modules/color-name/index.js"(n,l){l.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),Q=q({"../../node_modules/color-convert/conversions.js"(n,l){var c=me(),h={};for(let e of Object.keys(c))h[c[e]]=e;var u={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};l.exports=u;for(let e of Object.keys(u)){if(!("channels"in u[e]))throw new Error("missing channels property: "+e);if(!("labels"in u[e]))throw new Error("missing channel labels property: "+e);if(u[e].labels.length!==u[e].channels)throw new Error("channel and label counts mismatch: "+e);let{channels:t,labels:r}=u[e];delete u[e].channels,delete u[e].labels,Object.defineProperty(u[e],"channels",{value:t}),Object.defineProperty(u[e],"labels",{value:r})}u.rgb.hsl=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255,o=Math.min(t,r,a),i=Math.max(t,r,a),s=i-o,f,g;i===o?f=0:t===i?f=(r-a)/s:r===i?f=2+(a-t)/s:a===i&&(f=4+(t-r)/s),f=Math.min(f*60,360),f<0&&(f+=360);let b=(o+i)/2;return i===o?g=0:b<=.5?g=s/(i+o):g=s/(2-i-o),[f,g*100,b*100]},u.rgb.hsv=function(e){let t,r,a,o,i,s=e[0]/255,f=e[1]/255,g=e[2]/255,b=Math.max(s,f,g),y=b-Math.min(s,f,g),v=function(w){return(b-w)/6/y+1/2};return y===0?(o=0,i=0):(i=y/b,t=v(s),r=v(f),a=v(g),s===b?o=a-r:f===b?o=1/3+t-a:g===b&&(o=2/3+r-t),o<0?o+=1:o>1&&(o-=1)),[o*360,i*100,b*100]},u.rgb.hwb=function(e){let t=e[0],r=e[1],a=e[2],o=u.rgb.hsl(e)[0],i=1/255*Math.min(t,Math.min(r,a));return a=1-1/255*Math.max(t,Math.max(r,a)),[o,i*100,a*100]},u.rgb.cmyk=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255,o=Math.min(1-t,1-r,1-a),i=(1-t-o)/(1-o)||0,s=(1-r-o)/(1-o)||0,f=(1-a-o)/(1-o)||0;return[i*100,s*100,f*100,o*100]};function d(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}u.rgb.keyword=function(e){let t=h[e];if(t)return t;let r=1/0,a;for(let o of Object.keys(c)){let i=c[o],s=d(e,i);s.04045?((t+.055)/1.055)**2.4:t/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92,a=a>.04045?((a+.055)/1.055)**2.4:a/12.92;let o=t*.4124+r*.3576+a*.1805,i=t*.2126+r*.7152+a*.0722,s=t*.0193+r*.1192+a*.9505;return[o*100,i*100,s*100]},u.rgb.lab=function(e){let t=u.rgb.xyz(e),r=t[0],a=t[1],o=t[2];r/=95.047,a/=100,o/=108.883,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;let i=116*a-16,s=500*(r-a),f=200*(a-o);return[i,s,f]},u.hsl.rgb=function(e){let t=e[0]/360,r=e[1]/100,a=e[2]/100,o,i,s;if(r===0)return s=a*255,[s,s,s];a<.5?o=a*(1+r):o=a+r-a*r;let f=2*a-o,g=[0,0,0];for(let b=0;b<3;b++)i=t+1/3*-(b-1),i<0&&i++,i>1&&i--,6*i<1?s=f+(o-f)*6*i:2*i<1?s=o:3*i<2?s=f+(o-f)*(2/3-i)*6:s=f,g[b]=s*255;return g},u.hsl.hsv=function(e){let t=e[0],r=e[1]/100,a=e[2]/100,o=r,i=Math.max(a,.01);a*=2,r*=a<=1?a:2-a,o*=i<=1?i:2-i;let s=(a+r)/2,f=a===0?2*o/(i+o):2*r/(a+r);return[t,f*100,s*100]},u.hsv.rgb=function(e){let t=e[0]/60,r=e[1]/100,a=e[2]/100,o=Math.floor(t)%6,i=t-Math.floor(t),s=255*a*(1-r),f=255*a*(1-r*i),g=255*a*(1-r*(1-i));switch(a*=255,o){case 0:return[a,g,s];case 1:return[f,a,s];case 2:return[s,a,g];case 3:return[s,f,a];case 4:return[g,s,a];case 5:return[a,s,f]}},u.hsv.hsl=function(e){let t=e[0],r=e[1]/100,a=e[2]/100,o=Math.max(a,.01),i,s;s=(2-r)*a;let f=(2-r)*o;return i=r*o,i/=f<=1?f:2-f,i=i||0,s/=2,[t,i*100,s*100]},u.hwb.rgb=function(e){let t=e[0]/360,r=e[1]/100,a=e[2]/100,o=r+a,i;o>1&&(r/=o,a/=o);let s=Math.floor(6*t),f=1-a;i=6*t-s,s&1&&(i=1-i);let g=r+i*(f-r),b,y,v;switch(s){default:case 6:case 0:b=f,y=g,v=r;break;case 1:b=g,y=f,v=r;break;case 2:b=r,y=f,v=g;break;case 3:b=r,y=g,v=f;break;case 4:b=g,y=r,v=f;break;case 5:b=f,y=r,v=g;break}return[b*255,y*255,v*255]},u.cmyk.rgb=function(e){let t=e[0]/100,r=e[1]/100,a=e[2]/100,o=e[3]/100,i=1-Math.min(1,t*(1-o)+o),s=1-Math.min(1,r*(1-o)+o),f=1-Math.min(1,a*(1-o)+o);return[i*255,s*255,f*255]},u.xyz.rgb=function(e){let t=e[0]/100,r=e[1]/100,a=e[2]/100,o,i,s;return o=t*3.2406+r*-1.5372+a*-.4986,i=t*-.9689+r*1.8758+a*.0415,s=t*.0557+r*-.204+a*1.057,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,s=s>.0031308?1.055*s**(1/2.4)-.055:s*12.92,o=Math.min(Math.max(0,o),1),i=Math.min(Math.max(0,i),1),s=Math.min(Math.max(0,s),1),[o*255,i*255,s*255]},u.xyz.lab=function(e){let t=e[0],r=e[1],a=e[2];t/=95.047,r/=100,a/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116;let o=116*r-16,i=500*(t-r),s=200*(r-a);return[o,i,s]},u.lab.xyz=function(e){let t=e[0],r=e[1],a=e[2],o,i,s;i=(t+16)/116,o=r/500+i,s=i-a/200;let f=i**3,g=o**3,b=s**3;return i=f>.008856?f:(i-16/116)/7.787,o=g>.008856?g:(o-16/116)/7.787,s=b>.008856?b:(s-16/116)/7.787,o*=95.047,i*=100,s*=108.883,[o,i,s]},u.lab.lch=function(e){let t=e[0],r=e[1],a=e[2],o;o=Math.atan2(a,r)*360/2/Math.PI,o<0&&(o+=360);let i=Math.sqrt(r*r+a*a);return[t,i,o]},u.lch.lab=function(e){let t=e[0],r=e[1],a=e[2]/360*2*Math.PI,o=r*Math.cos(a),i=r*Math.sin(a);return[t,o,i]},u.rgb.ansi16=function(e,t=null){let[r,a,o]=e,i=t===null?u.rgb.hsv(e)[2]:t;if(i=Math.round(i/50),i===0)return 30;let s=30+(Math.round(o/255)<<2|Math.round(a/255)<<1|Math.round(r/255));return i===2&&(s+=60),s},u.hsv.ansi16=function(e){return u.rgb.ansi16(u.hsv.rgb(e),e[2])},u.rgb.ansi256=function(e){let t=e[0],r=e[1],a=e[2];return t===r&&r===a?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(r/255*5)+Math.round(a/255*5)},u.ansi16.rgb=function(e){let t=e%10;if(t===0||t===7)return e>50&&(t+=3.5),t=t/10.5*255,[t,t,t];let r=(~~(e>50)+1)*.5,a=(t&1)*r*255,o=(t>>1&1)*r*255,i=(t>>2&1)*r*255;return[a,o,i]},u.ansi256.rgb=function(e){if(e>=232){let i=(e-232)*10+8;return[i,i,i]}e-=16;let t,r=Math.floor(e/36)/5*255,a=Math.floor((t=e%36)/6)/5*255,o=t%6/5*255;return[r,a,o]},u.rgb.hex=function(e){let t=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return"000000".substring(t.length)+t},u.hex.rgb=function(e){let t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];let r=t[0];t[0].length===3&&(r=r.split("").map(f=>f+f).join(""));let a=parseInt(r,16),o=a>>16&255,i=a>>8&255,s=a&255;return[o,i,s]},u.rgb.hcg=function(e){let t=e[0]/255,r=e[1]/255,a=e[2]/255,o=Math.max(Math.max(t,r),a),i=Math.min(Math.min(t,r),a),s=o-i,f,g;return s<1?f=i/(1-s):f=0,s<=0?g=0:o===t?g=(r-a)/s%6:o===r?g=2+(a-t)/s:g=4+(t-r)/s,g/=6,g%=1,[g*360,s*100,f*100]},u.hsl.hcg=function(e){let t=e[1]/100,r=e[2]/100,a=r<.5?2*t*r:2*t*(1-r),o=0;return a<1&&(o=(r-.5*a)/(1-a)),[e[0],a*100,o*100]},u.hsv.hcg=function(e){let t=e[1]/100,r=e[2]/100,a=t*r,o=0;return a<1&&(o=(r-a)/(1-a)),[e[0],a*100,o*100]},u.hcg.rgb=function(e){let t=e[0]/360,r=e[1]/100,a=e[2]/100;if(r===0)return[a*255,a*255,a*255];let o=[0,0,0],i=t%1*6,s=i%1,f=1-s,g=0;switch(Math.floor(i)){case 0:o[0]=1,o[1]=s,o[2]=0;break;case 1:o[0]=f,o[1]=1,o[2]=0;break;case 2:o[0]=0,o[1]=1,o[2]=s;break;case 3:o[0]=0,o[1]=f,o[2]=1;break;case 4:o[0]=s,o[1]=0,o[2]=1;break;default:o[0]=1,o[1]=0,o[2]=f}return g=(1-r)*a,[(r*o[0]+g)*255,(r*o[1]+g)*255,(r*o[2]+g)*255]},u.hcg.hsv=function(e){let t=e[1]/100,r=e[2]/100,a=t+r*(1-t),o=0;return a>0&&(o=t/a),[e[0],o*100,a*100]},u.hcg.hsl=function(e){let t=e[1]/100,r=e[2]/100*(1-t)+.5*t,a=0;return r>0&&r<.5?a=t/(2*r):r>=.5&&r<1&&(a=t/(2*(1-r))),[e[0],a*100,r*100]},u.hcg.hwb=function(e){let t=e[1]/100,r=e[2]/100,a=t+r*(1-t);return[e[0],(a-t)*100,(1-a)*100]},u.hwb.hcg=function(e){let t=e[1]/100,r=1-e[2]/100,a=r-t,o=0;return a<1&&(o=(r-a)/(1-a)),[e[0],a*100,o*100]},u.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},u.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},u.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},u.gray.hsl=function(e){return[0,0,e[0]]},u.gray.hsv=u.gray.hsl,u.gray.hwb=function(e){return[0,100,e[0]]},u.gray.cmyk=function(e){return[0,0,0,e[0]]},u.gray.lab=function(e){return[e[0],0,0]},u.gray.hex=function(e){let t=Math.round(e[0]/100*255)&255,r=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return"000000".substring(r.length)+r},u.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),ve=q({"../../node_modules/color-convert/route.js"(n,l){var c=Q();function h(){let t={},r=Object.keys(c);for(let a=r.length,o=0;o1&&(o=i),r(o))};return"conversion"in r&&(a.conversion=r.conversion),a}function t(r){let a=function(...o){let i=o[0];if(i==null)return i;i.length>1&&(o=i);let s=r(o);if(typeof s=="object")for(let f=s.length,g=0;g{u[r]={},Object.defineProperty(u[r],"channels",{value:c[r].channels}),Object.defineProperty(u[r],"labels",{value:c[r].labels});let a=h(r);Object.keys(a).forEach(o=>{let i=a[o];u[r][o]=t(i),u[r][o].raw=e(i)})}),l.exports=u}}),_=ce(pe());function C(){return(C=Object.assign||function(n){for(var l=1;l=0||(u[c]=n[c]);return u}function L(n){var l=p.useRef(n),c=p.useRef(function(h){l.current&&l.current(h)});return l.current=n,c.current}var N=function(n,l,c){return l===void 0&&(l=0),c===void 0&&(c=1),n>c?c:n0:y.buttons>0)&&u.current?d(F(u.current,y,t.current)):b(!1)},g=function(){return b(!1)};function b(y){var v=r.current,w=B(u.current),E=y?w.addEventListener:w.removeEventListener;E(v?"touchmove":"mousemove",f),E(v?"touchend":"mouseup",g)}return[function(y){var v=y.nativeEvent,w=u.current;if(w&&(W(v),!function(k,P){return P&&!O(k)}(v,r.current)&&w)){if(O(v)){r.current=!0;var E=v.changedTouches||[];E.length&&(t.current=E[0].identifier)}w.focus(),d(F(w,v,t.current)),b(!0)}},function(y){var v=y.which||y.keyCode;v<37||v>40||(y.preventDefault(),e({left:v===39?.05:v===37?-.05:0,top:v===40?.05:v===38?-.05:0}))},b]},[e,d]),o=a[0],i=a[1],s=a[2];return p.useEffect(function(){return s},[s]),m.createElement("div",C({},h,{onTouchStart:o,onMouseDown:o,className:"react-colorful__interactive",ref:u,onKeyDown:i,tabIndex:0,role:"slider"}))}),S=function(n){return n.filter(Boolean).join(" ")},T=function(n){var l=n.color,c=n.left,h=n.top,u=h===void 0?.5:h,d=S(["react-colorful__pointer",n.className]);return m.createElement("div",{className:d,style:{top:100*u+"%",left:100*c+"%"}},m.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:l}}))},x=function(n,l,c){return l===void 0&&(l=0),c===void 0&&(c=Math.pow(10,l)),Math.round(c*n)/c},ye={grad:.9,turn:360,rad:360/(2*Math.PI)},xe=function(n){return re(K(n))},K=function(n){return n[0]==="#"&&(n=n.substring(1)),n.length<6?{r:parseInt(n[0]+n[0],16),g:parseInt(n[1]+n[1],16),b:parseInt(n[2]+n[2],16),a:n.length===4?x(parseInt(n[3]+n[3],16)/255,2):1}:{r:parseInt(n.substring(0,2),16),g:parseInt(n.substring(2,4),16),b:parseInt(n.substring(4,6),16),a:n.length===8?x(parseInt(n.substring(6,8),16)/255,2):1}},we=function(n,l){return l===void 0&&(l="deg"),Number(n)*(ye[l]||1)},ke=function(n){var l=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(n);return l?_e({h:we(l[1],l[2]),s:Number(l[3]),l:Number(l[4]),a:l[5]===void 0?1:Number(l[5])/(l[6]?100:1)}):{h:0,s:0,v:0,a:1}},_e=function(n){var l=n.s,c=n.l;return{h:n.h,s:(l*=(c<50?c:100-c)/100)>0?2*l/(c+l)*100:0,v:c+l,a:n.a}},Ee=function(n){return Ce(ee(n))},Z=function(n){var l=n.s,c=n.v,h=n.a,u=(200-l)*c/100;return{h:x(n.h),s:x(u>0&&u<200?l*c/100/(u<=100?u:200-u)*100:0),l:x(u/2),a:x(h,2)}},X=function(n){var l=Z(n);return"hsl("+l.h+", "+l.s+"%, "+l.l+"%)"},I=function(n){var l=Z(n);return"hsla("+l.h+", "+l.s+"%, "+l.l+"%, "+l.a+")"},ee=function(n){var l=n.h,c=n.s,h=n.v,u=n.a;l=l/360*6,c/=100,h/=100;var d=Math.floor(l),e=h*(1-c),t=h*(1-(l-d)*c),r=h*(1-(1-l+d)*c),a=d%6;return{r:x(255*[h,t,e,e,r,h][a]),g:x(255*[r,h,h,t,e,e][a]),b:x(255*[e,e,r,h,h,t][a]),a:x(u,2)}},Me=function(n){var l=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(n);return l?re({r:Number(l[1])/(l[2]?100/255:1),g:Number(l[3])/(l[4]?100/255:1),b:Number(l[5])/(l[6]?100/255:1),a:l[7]===void 0?1:Number(l[7])/(l[8]?100:1)}):{h:0,s:0,v:0,a:1}},j=function(n){var l=n.toString(16);return l.length<2?"0"+l:l},Ce=function(n){var l=n.r,c=n.g,h=n.b,u=n.a,d=u<1?j(x(255*u)):"";return"#"+j(l)+j(c)+j(h)+d},re=function(n){var l=n.r,c=n.g,h=n.b,u=n.a,d=Math.max(l,c,h),e=d-Math.min(l,c,h),t=e?d===l?(c-h)/e:d===c?2+(h-l)/e:4+(l-c)/e:0;return{h:x(60*(t<0?t+6:t)),s:x(d?e/d*100:0),v:x(d/255*100),a:u}},te=m.memo(function(n){var l=n.hue,c=n.onChange,h=S(["react-colorful__hue",n.className]);return m.createElement("div",{className:h},m.createElement(G,{onMove:function(u){c({h:360*u.left})},onKey:function(u){c({h:N(l+360*u.left,0,360)})},"aria-label":"Hue","aria-valuenow":x(l),"aria-valuemax":"360","aria-valuemin":"0"},m.createElement(T,{className:"react-colorful__hue-pointer",left:l/360,color:X({h:l,s:100,v:100,a:1})})))}),ne=m.memo(function(n){var l=n.hsva,c=n.onChange,h={backgroundColor:X({h:l.h,s:100,v:100,a:1})};return m.createElement("div",{className:"react-colorful__saturation",style:h},m.createElement(G,{onMove:function(u){c({s:100*u.left,v:100-100*u.top})},onKey:function(u){c({s:N(l.s+100*u.left,0,100),v:N(l.v-100*u.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+x(l.s)+"%, Brightness "+x(l.v)+"%"},m.createElement(T,{className:"react-colorful__saturation-pointer",top:1-l.v/100,left:l.s/100,color:X(l)})))}),ae=function(n,l){if(n===l)return!0;for(var c in n)if(n[c]!==l[c])return!1;return!0},oe=function(n,l){return n.replace(/\s/g,"")===l.replace(/\s/g,"")},$e=function(n,l){return n.toLowerCase()===l.toLowerCase()||ae(K(n),K(l))};function le(n,l,c){var h=L(c),u=p.useState(function(){return n.toHsva(l)}),d=u[0],e=u[1],t=p.useRef({color:l,hsva:d});p.useEffect(function(){if(!n.equal(l,t.current.color)){var a=n.toHsva(l);t.current={hsva:a,color:l},e(a)}},[l,n]),p.useEffect(function(){var a;ae(d,t.current.hsva)||n.equal(a=n.fromHsva(d),t.current.color)||(t.current={hsva:d,color:a},h(a))},[d,n,h]);var r=p.useCallback(function(a){e(function(o){return Object.assign({},o,a)})},[]);return[d,r]}var Ne=typeof window<"u"?p.useLayoutEffect:p.useEffect,Oe=function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},A=new Map,ie=function(n){Ne(function(){var l=n.current?n.current.ownerDocument:document;if(l!==void 0&&!A.has(l)){var c=l.createElement("style");c.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,A.set(l,c);var h=Oe();h&&c.setAttribute("nonce",h),l.head.appendChild(c)}},[])},Se=function(n){var l=n.className,c=n.colorModel,h=n.color,u=h===void 0?c.defaultColor:h,d=n.onChange,e=V(n,["className","colorModel","color","onChange"]),t=p.useRef(null);ie(t);var r=le(c,u,d),a=r[0],o=r[1],i=S(["react-colorful",l]);return m.createElement("div",C({},e,{ref:t,className:i}),m.createElement(ne,{hsva:a,onChange:o}),m.createElement(te,{hue:a.h,onChange:o,className:"react-colorful__last-control"}))},je={defaultColor:"000",toHsva:xe,fromHsva:function(n){return Ee({h:n.h,s:n.s,v:n.v,a:1})},equal:$e},Re=function(n){return m.createElement(Se,C({},n,{colorModel:je}))},ze=function(n){var l=n.className,c=n.hsva,h=n.onChange,u={backgroundImage:"linear-gradient(90deg, "+I(Object.assign({},c,{a:0}))+", "+I(Object.assign({},c,{a:1}))+")"},d=S(["react-colorful__alpha",l]),e=x(100*c.a);return m.createElement("div",{className:d},m.createElement("div",{className:"react-colorful__alpha-gradient",style:u}),m.createElement(G,{onMove:function(t){h({a:t.left})},onKey:function(t){h({a:N(c.a+t.left)})},"aria-label":"Alpha","aria-valuetext":e+"%","aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100"},m.createElement(T,{className:"react-colorful__alpha-pointer",left:c.a,color:I(c)})))},ue=function(n){var l=n.className,c=n.colorModel,h=n.color,u=h===void 0?c.defaultColor:h,d=n.onChange,e=V(n,["className","colorModel","color","onChange"]),t=p.useRef(null);ie(t);var r=le(c,u,d),a=r[0],o=r[1],i=S(["react-colorful",l]);return m.createElement("div",C({},e,{ref:t,className:i}),m.createElement(ne,{hsva:a,onChange:o}),m.createElement(te,{hue:a.h,onChange:o}),m.createElement(ze,{hsva:a,onChange:o,className:"react-colorful__last-control"}))},Ie={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:ke,fromHsva:I,equal:oe},He=function(n){return m.createElement(ue,C({},n,{colorModel:Ie}))},qe={defaultColor:"rgba(0, 0, 0, 1)",toHsva:Me,fromHsva:function(n){var l=ee(n);return"rgba("+l.r+", "+l.g+", "+l.b+", "+l.a+")"},equal:oe},Pe=function(n){return m.createElement(ue,C({},n,{colorModel:qe}))},Le=M.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),Be=M(J)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),Ke=M.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Xe=M(he)(({theme:n})=>({fontFamily:n.typography.fonts.base})),De=M.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Ve=M.div(({theme:n,active:l})=>({width:16,height:16,boxShadow:l?`${n.appBorderColor} 0 0 0 1px inset, ${n.textMutedColor}50 0 0 0 4px`:`${n.appBorderColor} 0 0 0 1px inset`,borderRadius:n.appBorderRadius})),Ge=`url('data:image/svg+xml;charset=utf-8,')`,U=({value:n,style:l,...c})=>{let h=`linear-gradient(${n}, ${n}), ${Ge}, linear-gradient(#fff, #fff)`;return m.createElement(Ve,{...c,style:{...l,backgroundImage:h}})},Te=M(fe.Input)(({theme:n,readOnly:l})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:n.typography.fonts.base})),Fe=M(de)(({theme:n})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:n.input.color})),se=(n=>(n.RGB="rgb",n.HSL="hsl",n.HEX="hex",n))(se||{}),R=Object.values(se),We=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Ae=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Ue=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,D=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Ye=/^\s*#?([0-9a-f]{3})\s*$/i,Je={hex:Re,rgb:Pe,hsl:He},z={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},Y=n=>{let l=n==null?void 0:n.match(We);if(!l)return[0,0,0,1];let[,c,h,u,d=1]=l;return[c,h,u,d].map(Number)},$=n=>{if(!n)return;let l=!0;if(Ae.test(n)){let[e,t,r,a]=Y(n),[o,i,s]=_.default.rgb.hsl([e,t,r])||[0,0,0];return{valid:l,value:n,keyword:_.default.rgb.keyword([e,t,r]),colorSpace:"rgb",rgb:n,hsl:`hsla(${o}, ${i}%, ${s}%, ${a})`,hex:`#${_.default.rgb.hex([e,t,r]).toLowerCase()}`}}if(Ue.test(n)){let[e,t,r,a]=Y(n),[o,i,s]=_.default.hsl.rgb([e,t,r])||[0,0,0];return{valid:l,value:n,keyword:_.default.hsl.keyword([e,t,r]),colorSpace:"hsl",rgb:`rgba(${o}, ${i}, ${s}, ${a})`,hsl:n,hex:`#${_.default.hsl.hex([e,t,r]).toLowerCase()}`}}let c=n.replace("#",""),h=_.default.keyword.rgb(c)||_.default.hex.rgb(c),u=_.default.rgb.hsl(h),d=n;if(/[^#a-f0-9]/i.test(n)?d=c:D.test(n)&&(d=`#${c}`),d.startsWith("#"))l=D.test(d);else try{_.default.keyword.hex(d)}catch{l=!1}return{valid:l,value:d,keyword:_.default.rgb.keyword(h),colorSpace:"hex",rgb:`rgba(${h[0]}, ${h[1]}, ${h[2]}, 1)`,hsl:`hsla(${u[0]}, ${u[1]}%, ${u[2]}%, 1)`,hex:d}},Qe=(n,l,c)=>{if(!n||!(l!=null&&l.valid))return z[c];if(c!=="hex")return(l==null?void 0:l[c])||z[c];if(!l.hex.startsWith("#"))try{return`#${_.default.keyword.hex(l.hex)}`}catch{return z.hex}let h=l.hex.match(Ye);if(!h)return D.test(l.hex)?l.hex:z.hex;let[u,d,e]=h[1].split("");return`#${u}${u}${d}${d}${e}${e}`},Ze=(n,l)=>{let[c,h]=p.useState(n||""),[u,d]=p.useState(()=>$(c)),[e,t]=p.useState((u==null?void 0:u.colorSpace)||"hex");p.useEffect(()=>{let i=n||"",s=$(i);h(i),d(s),t((s==null?void 0:s.colorSpace)||"hex")},[n]);let r=p.useMemo(()=>Qe(c,u,e).toLowerCase(),[c,u,e]),a=p.useCallback(i=>{let s=$(i),f=(s==null?void 0:s.value)||i||"";h(f),f===""&&(d(void 0),l(void 0)),s&&(d(s),t(s.colorSpace),l(s.value))},[l]),o=p.useCallback(()=>{let i=R.indexOf(e)+1;i>=R.length&&(i=0),t(R[i]);let s=(u==null?void 0:u[R[i]])||"";h(s),l(s)},[u,e,l]);return{value:c,realValue:r,updateValue:a,color:u,colorSpace:e,cycleColorSpace:o}},H=n=>n.replace(/\s*/,"").toLowerCase(),er=(n,l,c)=>{let[h,u]=p.useState(l!=null&&l.valid?[l]:[]);p.useEffect(()=>{l===void 0&&u([])},[l]);let d=p.useMemo(()=>(n||[]).map(t=>typeof t=="string"?$(t):t.title?{...$(t.color),keyword:t.title}:$(t.color)).concat(h).filter(Boolean).slice(-27),[n,h]),e=p.useCallback(t=>{t!=null&&t.valid&&(d.some(r=>H(r[c])===H(t[c]))||u(r=>r.concat(t)))},[c,d]);return{presets:d,addPreset:e}},rr=({name:n,value:l,onChange:c,onFocus:h,onBlur:u,presetColors:d,startOpen:e=!1,argType:t})=>{var E;let r=p.useCallback(ge(c,200),[c]),{value:a,realValue:o,updateValue:i,color:s,colorSpace:f,cycleColorSpace:g}=Ze(l,r),{presets:b,addPreset:y}=er(d,s,f),v=Je[f],w=!!((E=t==null?void 0:t.table)!=null&&E.readonly);return m.createElement(Le,{"aria-readonly":w},m.createElement(Be,{startOpen:e,trigger:w?[null]:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>y(s),tooltip:m.createElement(Ke,null,m.createElement(v,{color:o==="transparent"?"#000000":o,onChange:i,onFocus:h,onBlur:u}),b.length>0&&m.createElement(De,null,b.map((k,P)=>m.createElement(J,{key:`${k.value}-${P}`,hasChrome:!1,tooltip:m.createElement(Xe,{note:k.keyword||k.value})},m.createElement(U,{value:k[f],active:s&&H(k[f])===H(s[f]),onClick:()=>i(k.value)})))))},m.createElement(U,{value:o,style:{margin:4}})),m.createElement(Te,{id:be(n),value:a,onChange:k=>i(k.target.value),onFocus:k=>k.target.select(),readOnly:w,placeholder:"Choose color..."}),a?m.createElement(Fe,{onClick:g}):null)},dr=rr;export{rr as ColorControl,dr as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Column.docs-CFBEAC4G.js b/demo-npm_and_yarn/vite-6.0.3/assets/Column.docs-CFBEAC4G.js new file mode 100644 index 0000000000..2bc28eca5e --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Column.docs-CFBEAC4G.js @@ -0,0 +1,46 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as r}from"./index-3rgQkYFR.js";import{ae as o,aq as l,ar as a,as as h,at as i}from"./index-CF71P72j.js";import{C as c,A as d,H as m,I as p}from"./Column.stories-BL-te09F.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./types-B5YJ6HHW.js";const x=` + +# Column + +Stacks its children vertically with gaps between them and offers alignment options. +`;/*@license CC0-1.0*/function s(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...r(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(o,{of:c}),` +`,e.jsx(l,{children:x}),` +`,e.jsx(n.h2,{id:"guidelines",children:"Guidelines"}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsx(n.li,{children:"Wrap a Column around a set of elements that need the same amount of white space between them."}),` +`,e.jsxs(n.li,{children:["The five sizes of ",e.jsx(n.a,{href:"/docs/brand-design-tokens-space--docs",children:"Component Space"})," are available for the width or height of the gap."]}),` +`,e.jsxs(n.li,{children:["To add white space below a single element, you can add a ",e.jsx(n.a,{href:"/docs/utilities-css-margin--docs",children:"Margin Bottom"})," instead."]}),` +`,e.jsx(n.li,{children:"Align the elements horizontally or vertically through the alignment props."}),` +`]}),` +`,e.jsx(a,{}),` +`,e.jsx(h,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"alignment",children:"Alignment"}),` +`,e.jsx(n.p,{children:"Items in the column can be aligned vertically in several ways:"}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Center"}),": center items within the column."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"End"}),": align items to the bottom of the column – to the bottom."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Space Between"}),": distribute whitespace between items."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Space Around"}),": distribute whitespace around items."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Space Evenly"}),": distribute whitespace evenly around items."]}),` +`]}),` +`,e.jsxs(n.p,{children:["By default, items align to the ",e.jsx(n.strong,{children:"start"}),` of the column – at the top. +This option has no class name or prop value.`]}),` +`,e.jsx(n.p,{children:"This example centers three items vertically."}),` +`,e.jsx(i,{of:d}),` +`,e.jsx(n.h3,{id:"horizontal-alignment",children:"Horizontal alignment"}),` +`,e.jsx(n.p,{children:"Items in the column can be aligned horizontally in several ways:"}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Start"}),": align items to the start of the column. This is the left side in left-to-right languages."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Center"}),": center items within the column."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"End"}),": align items to the end of the column. This is the right side in left-to-right languages."]}),` +`]}),` +`,e.jsx(n.p,{children:"This example centers three items horizontally."}),` +`,e.jsx(i,{of:m}),` +`,e.jsx(n.h3,{id:"improve-semantics",children:"Improve semantics"}),` +`,e.jsxs(n.p,{children:["By default, a Column renders a ",e.jsx(n.code,{children:"
    "}),` element in HTML. +Use the `,e.jsx(n.code,{children:"as"}),` prop to make your markup more semantic. +In this example, the Column uses a `,e.jsx(n.code,{children:"
    "})," element to group the heading and the cards."]}),` +`,e.jsx(i,{of:p})]})}function B(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{B as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Column.stories-BL-te09F.js b/demo-npm_and_yarn/vite-6.0.3/assets/Column.stories-BL-te09F.js new file mode 100644 index 0000000000..e842272f81 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Column.stories-BL-te09F.js @@ -0,0 +1,31 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{H as i,d as s,P as d}from"./index.esm-kzH9sPjb.js";import{m as A,c as S}from"./types-B5YJ6HHW.js";import{c as L}from"./clsx-B-dksMZM.js";import{r as T}from"./index-RigO-4kf.js";const o=T.forwardRef(({align:t,alignHorizontal:m,as:H="div",children:_,className:N,gap:c,...w},z)=>e.jsx(H,{...w,ref:z,className:L("ams-column",t&&`ams-column--align-${t}`,m&&`ams-column--align-horizontal-${m}`,c&&`ams-column--gap-${c}`,N),children:_}));o.displayName="Column";try{o.displayName="Column",o.__docgenInfo={description:"",displayName:"Column",props:{align:{defaultValue:{value:"start"},description:"The vertical alignment of the items in the column.",name:"align",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"end"'},{value:'"between"'},{value:'"around"'},{value:'"evenly"'}]}},alignHorizontal:{defaultValue:{value:"stretch"},description:"The horizontal alignment of the items in the column.",name:"alignHorizontal",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"end"'},{value:'"start"'}]}},as:{defaultValue:{value:"div"},description:"The HTML element to use.",name:"as",required:!1,type:{name:"enum",value:[{value:'"article"'},{value:'"div"'},{value:'"section"'}]}},gap:{defaultValue:{value:"medium"},description:"The amount of space between items.",name:"gap",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"small"'},{value:'"large"'},{value:'"extra-small"'},{value:'"extra-large"'}]}}}}}catch{}const P=[e.jsx("div",{className:"ams-docs-item"},0),e.jsx("div",{className:"ams-docs-item"},1),e.jsx("div",{className:"ams-docs-item"},2)],V={title:"Components/Layout/Column",component:o,args:{children:P,className:"ams-docs-column"},argTypes:{align:{control:{type:"radio",labels:{undefined:"start"}},options:[void 0,...A]},alignHorizontal:{control:{type:"radio",labels:{undefined:"stretch"}},options:[void 0,...S]},className:{table:{disable:!0}},gap:{control:{type:"radio",labels:{undefined:"medium"}},options:["none","extra-small","small",void 0,"large","extra-large"]}}},a={},n={args:{align:"center"}},r={args:{alignHorizontal:"center"}},l={args:{as:"section",children:[e.jsx(i,{level:3,children:"Zoekresultaten"}),e.jsxs(s,{children:[e.jsx(i,{level:4,children:e.jsx(s.Link,{href:"#",children:"Nieuwe manieren om afval op te halen"})}),e.jsx(d,{children:"Afvalboten, bakfietsen en ondergrondse containers. We experimenteren met nieuwe manieren om afval op te halen in het centrum."})]},1),e.jsxs(s,{children:[e.jsx(i,{level:4,children:e.jsx(s.Link,{href:"#",children:"Verlenging proef ophalen afval per boot"})}),e.jsx(d,{children:"Een proef met het anders ophalen van afval. We halen vuilniszakken hier op met kleine wagentjes, kleine vuilniswagens en een afvalboot."})]},2)],className:void 0}};var u,p,g;a.parameters={...a.parameters,docs:{...(u=a.parameters)==null?void 0:u.docs,source:{originalSource:"{}",...(g=(p=a.parameters)==null?void 0:p.docs)==null?void 0:g.source}}};var v,h,f;n.parameters={...n.parameters,docs:{...(v=n.parameters)==null?void 0:v.docs,source:{originalSource:`{ + args: { + align: 'center' + } +}`,...(f=(h=n.parameters)==null?void 0:h.docs)==null?void 0:f.source}}};var x,k,j;r.parameters={...r.parameters,docs:{...(x=r.parameters)==null?void 0:x.docs,source:{originalSource:`{ + args: { + alignHorizontal: 'center' + } +}`,...(j=(k=r.parameters)==null?void 0:k.docs)==null?void 0:j.source}}};var y,b,C;l.parameters={...l.parameters,docs:{...(y=l.parameters)==null?void 0:y.docs,source:{originalSource:`{ + args: { + as: 'section', + children: [Zoekresultaten, + + Nieuwe manieren om afval op te halen + + + Afvalboten, bakfietsen en ondergrondse containers. We experimenteren met nieuwe manieren om afval op te halen + in het centrum. + + , + + Verlenging proef ophalen afval per boot + + + Een proef met het anders ophalen van afval. We halen vuilniszakken hier op met kleine wagentjes, kleine + vuilniswagens en een afvalboot. + + ], + className: undefined + } +}`,...(C=(b=l.parameters)==null?void 0:b.docs)==null?void 0:C.source}}};const E=["Default","Alignment","HorizontalAlignment","ImproveSemantics"],D=Object.freeze(Object.defineProperty({__proto__:null,Alignment:n,Default:a,HorizontalAlignment:r,ImproveSemantics:l,__namedExportsOrder:E,default:V},Symbol.toStringTag,{value:"Module"}));export{n as A,D as C,r as H,l as I}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/DateInput.docs-CVu1k66s.js b/demo-npm_and_yarn/vite-6.0.3/assets/DateInput.docs-CVu1k66s.js new file mode 100644 index 0000000000..d0b825de44 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/DateInput.docs-CVu1k66s.js @@ -0,0 +1,57 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as a,aq as r,ar as d,as as l,at as s}from"./index-CF71P72j.js";import{D as c,a as h,I as m,b as p,c as f,d as u}from"./DateInput.stories-CgWsbeaX.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const x=` + +# Date Input + +Helps users enter a date. + +## Visual considerations + +This component uses a native date input, which is styled differently in different browsers and operating systems. +Recreating the native functionality is quite difficult and prone to accessibility errors, which is why we’ve chosen not to do that. +This does mean that this component does not look identical on all browsers and operating systems. +`;/*@license CC0-1.0*/function t(i){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",...o(),...i.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(a,{of:c}),` +`,e.jsx(r,{children:x}),` +`,e.jsx(d,{}),` +`,e.jsx(l,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"date-and-time",children:"Date and time"}),` +`,e.jsxs(n.p,{children:["To let the user select a specific time on a date, use the ",e.jsx(n.code,{children:"datetime-local"}),` type. +Note that the control’s UI varies in general from browser to browser.`]}),` +`,e.jsx(n.p,{children:`The value represents a local date and time, not necessarily the user’s local date and time. +In other words, the input allows any valid combination of year, month, day, hour, and minute — even if such a combination is invalid in the user’s local time zone.`}),` +`,e.jsx(s,{of:h}),` +`,e.jsx(n.h3,{id:"invalid",children:"Invalid"}),` +`,e.jsxs(n.p,{children:[`Indicates that the input value does not meet the specified constraints. +An `,e.jsx(n.a,{href:"/docs/components-forms-error-message--docs",children:"Error Message"}),` must be displayed above the field. +To highlight the error even more, the parent `,e.jsx(n.a,{href:"/docs/components-forms-field--docs",children:"Field"})," component’s ",e.jsx(n.code,{children:"invalid"})," prop must also be set."]}),` +`,e.jsx(s,{of:m}),` +`,e.jsx(n.h3,{id:"disabled",children:"Disabled"}),` +`,e.jsx(n.p,{children:`A field that can not (yet) be used is indicated with a grey border. +It will not respond to interactions, e.g. with the mouse or keyboard.`}),` +`,e.jsx(n.p,{children:`Avoid disabling input fields. +They cause usability and accessibility problems.`}),` +`,e.jsx(n.p,{children:`Disabled fields are often skipped by screen readers. +This makes it hard for the user who rely on assistive technologies to understand the form’s content. +They are not included in form submissions, which can lead to incomplete or missing data.`}),` +`,e.jsx(n.p,{children:"Alternatives:"}),` +`,e.jsxs(n.ol,{children:[` +`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"readonly"}),` attribute. +This makes a field uneditable but keeps it accessible and included in form submissions.`]}),` +`,e.jsxs(n.li,{children:["Display data as plain text or within a non-input element like a ",e.jsx(n.code,{children:"span"})," or ",e.jsx(n.code,{children:"div"}),"."]}),` +`,e.jsx(n.li,{children:`Use conditional logic to hide or show fields based on user interaction. +This ensures all necessary fields are accessible and editable when needed.`}),` +`,e.jsx(n.li,{children:`Use a label or text to explain why a field is not editable if you must disable it temporarily. +This helps the user understand the context.`}),` +`]}),` +`,e.jsx(s,{of:p}),` +`,e.jsx(n.h3,{id:"in-a-field",children:"In a Field"}),` +`,e.jsx(n.p,{children:"Use a Field to group a Date Input with a Label, description and / or an Error Message."}),` +`,e.jsxs(n.p,{children:["If you don’t need the description, remove its Paragraph and the ",e.jsx(n.code,{children:"aria-describedby"})," from the Date Input."]}),` +`,e.jsxs(n.p,{children:["Check ",e.jsx(n.a,{href:"/docs/components-forms-field--docs",children:"the Field docs"})," for more information on configuring it."]}),` +`,e.jsx(s,{of:f}),` +`,e.jsx(n.h3,{id:"in-a-field-with-validation",children:"In a Field with validation"}),` +`,e.jsxs(n.p,{children:["If the Date Input can become invalid, add an Error Message and its ",e.jsx(n.code,{children:"id"})," to the ",e.jsx(n.code,{children:"aria-describedby"})," attribute of the Date Input."]}),` +`,e.jsxs(n.p,{children:["Check ",e.jsx(n.a,{href:"/docs/components-forms-field--docs",children:"the Field docs"})," for more information on configuring it."]}),` +`,e.jsx(s,{of:u})]})}function R(i={}){const{wrapper:n}={...o(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(t,{...i})}):t(i)}export{R as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/DateInput.stories-CgWsbeaX.js b/demo-npm_and_yarn/vite-6.0.3/assets/DateInput.stories-CgWsbeaX.js new file mode 100644 index 0000000000..a90c375fa8 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/DateInput.stories-CgWsbeaX.js @@ -0,0 +1,34 @@ +import{j as r}from"./jsx-runtime-BjgbQsUx.js";import{e as L,f as S,P,E as O}from"./index.esm-kzH9sPjb.js";import{c as N}from"./clsx-B-dksMZM.js";import{r as V}from"./index-RigO-4kf.js";const a=V.forwardRef(({className:e,invalid:M,type:z="date",...A},T)=>r.jsx("input",{...A,"aria-invalid":M||void 0,className:N("ams-date-input",e),ref:T,type:z}));a.displayName="DateInput";try{a.displayName="DateInput",a.__docgenInfo={description:"",displayName:"DateInput",props:{invalid:{defaultValue:null,description:"Whether the value fails a validation rule.",name:"invalid",required:!1,type:{name:"boolean"}},type:{defaultValue:{value:"date"},description:"The kind of data that the user should provide.",name:"type",required:!1,type:{name:"enum",value:[{value:'"date"'},{value:'"datetime-local"'}]}}}}}catch{}const $={title:"Components/Forms/Date Input",component:a,args:{disabled:!1,invalid:!1},argTypes:{disabled:{description:"Prevents interaction. Avoid if possible."}}},i={},s={args:{type:"datetime-local"}},t={args:{invalid:!0}},d={args:{disabled:!0}},n={render:e=>r.jsxs(L,{invalid:e.invalid,children:[r.jsx(S,{htmlFor:"input1",children:"Label"}),r.jsx(P,{id:"description1",size:"small",children:"Omschrijving."}),e.invalid&&r.jsx(O,{id:"error1",children:"Foutmelding."}),r.jsx(a,{"aria-describedby":`description1${e.invalid?" error1":""}`,id:"input1",...e})]})},o={args:{invalid:!0},render:e=>r.jsxs(L,{invalid:e.invalid,children:[r.jsx(S,{htmlFor:"input2",children:"Label"}),r.jsx(P,{id:"description2",size:"small",children:"Omschrijving."}),e.invalid&&r.jsx(O,{id:"error2",children:"Foutmelding."}),r.jsx(a,{"aria-describedby":`description2${e.invalid?" error2":""}`,id:"input2",...e})]})};var l,c,p;i.parameters={...i.parameters,docs:{...(l=i.parameters)==null?void 0:l.docs,source:{originalSource:"{}",...(p=(c=i.parameters)==null?void 0:c.docs)==null?void 0:p.source}}};var m,u,g;s.parameters={...s.parameters,docs:{...(m=s.parameters)==null?void 0:m.docs,source:{originalSource:`{ + args: { + type: 'datetime-local' + } +}`,...(g=(u=s.parameters)==null?void 0:u.docs)==null?void 0:g.source}}};var v,h,b;t.parameters={...t.parameters,docs:{...(v=t.parameters)==null?void 0:v.docs,source:{originalSource:`{ + args: { + invalid: true + } +}`,...(b=(h=t.parameters)==null?void 0:h.docs)==null?void 0:b.source}}};var f,j,y;d.parameters={...d.parameters,docs:{...(f=d.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + disabled: true + } +}`,...(y=(j=d.parameters)==null?void 0:j.docs)==null?void 0:y.source}}};var F,x,I;n.parameters={...n.parameters,docs:{...(F=n.parameters)==null?void 0:F.docs,source:{originalSource:`{ + render: args => + + + Omschrijving. + + {args.invalid && Foutmelding.} + + +}`,...(I=(x=n.parameters)==null?void 0:x.docs)==null?void 0:I.source}}};var D,_,E;o.parameters={...o.parameters,docs:{...(D=o.parameters)==null?void 0:D.docs,source:{originalSource:`{ + args: { + invalid: true + }, + render: args => + + + Omschrijving. + + {args.invalid && Foutmelding.} + + +}`,...(E=(_=o.parameters)==null?void 0:_.docs)==null?void 0:E.source}}};const W=["Default","DateTime","Invalid","Disabled","InAField","InAFieldWithValidation"],C=Object.freeze(Object.defineProperty({__proto__:null,DateTime:s,Default:i,Disabled:d,InAField:n,InAFieldWithValidation:o,Invalid:t,__namedExportsOrder:W,default:$},Symbol.toStringTag,{value:"Module"}));export{C as D,t as I,s as a,d as b,n as c,o as d}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/DescriptionList.docs-NWn6U-ef.js b/demo-npm_and_yarn/vite-6.0.3/assets/DescriptionList.docs-NWn6U-ef.js new file mode 100644 index 0000000000..f81cb76adc --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/DescriptionList.docs-NWn6U-ef.js @@ -0,0 +1,39 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as r}from"./index-3rgQkYFR.js";import{ae as o,aq as l,ar as c,as as p,at as i}from"./index-CF71P72j.js";import{D as a,M as d,a as m,R as h,I as u}from"./DescriptionList.stories-Coge8HnR.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const x=` + +# Description List + +A collection of terms and their descriptions. + +## Design + +In a narrow window, descriptions appear indented below their term. +After that, they display in a two-column layout. +The column for the terms is as wide as the longest term, without wrapping. +Its width can be adjusted to be ‘large’ (50%), ‘medium’ (33%), or ‘small’ (20%), which also allows the terms to wrap. + +The term is set in bold text. + +## References + +- [MDN: \`
    \`: The Description List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) +- [WCAG: Using description lists](https://www.w3.org/WAI/WCAG22/Techniques/html/H40) +`;/*@license CC0-1.0*/function s(t){const n={code:"code",h2:"h2",h3:"h3",p:"p",...r(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(o,{of:a}),` +`,e.jsx(l,{children:x}),` +`,e.jsx(c,{}),` +`,e.jsx(p,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"multiple-descriptions",children:"Multiple descriptions"}),` +`,e.jsx(n.p,{children:"A term may have multiple descriptions."}),` +`,e.jsx(i,{of:d}),` +`,e.jsx(n.h3,{id:"multiple-terms",children:"Multiple terms"}),` +`,e.jsxs(n.p,{children:["If multiple terms share a single description, group them in a ",e.jsx(n.code,{children:"DescriptionList.Section"})," component to ensure proper grid layout."]}),` +`,e.jsx(i,{of:m}),` +`,e.jsx(n.h3,{id:"rich-description",children:"Rich description"}),` +`,e.jsx(n.p,{children:"A description can include rich content such as inline formatting, links, paragraphs, and even lists."}),` +`,e.jsx(i,{of:h}),` +`,e.jsx(n.h3,{id:"inverse-colour",children:"Inverse colour"}),` +`,e.jsxs(n.p,{children:["Set the ",e.jsx(n.code,{children:"inverseColor"}),` prop if the Description List sits on a dark background. +This ensures the colour of the text provides enough contrast.`]}),` +`,e.jsx(i,{of:u})]})}function k(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{k as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/DescriptionList.stories-Coge8HnR.js b/demo-npm_and_yarn/vite-6.0.3/assets/DescriptionList.stories-Coge8HnR.js new file mode 100644 index 0000000000..890bf8b3be --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/DescriptionList.stories-Coge8HnR.js @@ -0,0 +1,43 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{P as U,U as l,L as E}from"./index.esm-kzH9sPjb.js";import{c as m}from"./clsx-B-dksMZM.js";import{r as D}from"./index-RigO-4kf.js";const N=D.forwardRef(({children:r,className:n,...t},s)=>e.jsx("dd",{...t,ref:s,className:m("ams-description-list__description",n),children:r}));N.displayName="DescriptionList.Description";try{DescriptionList.Description.displayName="DescriptionList.Description",DescriptionList.Description.__docgenInfo={description:"",displayName:"DescriptionList.Description",props:{}}}catch{}const S=D.forwardRef(({children:r,className:n,...t},s)=>e.jsx("div",{...t,ref:s,className:m("ams-description-list__section",n),children:r}));S.displayName="DescriptionList.Section";try{DescriptionList.Section.displayName="DescriptionList.Section",DescriptionList.Section.__docgenInfo={description:"",displayName:"DescriptionList.Section",props:{}}}catch{}const z=D.forwardRef(({children:r,className:n,...t},s)=>e.jsx("dt",{...t,ref:s,className:m("ams-description-list__term",n),children:r}));z.displayName="DescriptionList.Term";try{DescriptionList.Term.displayName="DescriptionList.Term",DescriptionList.Term.__docgenInfo={description:"",displayName:"DescriptionList.Term",props:{}}}catch{}const I=D.forwardRef(({children:r,className:n,inverseColor:t,termsWidth:s,...P},R)=>e.jsx("dl",{...P,ref:R,className:m("ams-description-list",s&&`ams-description-list--terms-width-${s}`,t&&"ams-description-list--inverse-color",n),children:r}));I.displayName="DescriptionList";const i=Object.assign(I,{Description:N,Section:S,Term:z});try{i.displayName="DescriptionList",i.__docgenInfo={description:"",displayName:"DescriptionList",props:{inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}},termsWidth:{defaultValue:null,description:"",name:"termsWidth",required:!1,type:{name:"enum",value:[{value:'"sm"'},{value:'"md"'},{value:'"lg"'}]}}}}}catch{}const M={title:"Components/Text/Description List",component:i,args:{children:[e.jsx(i.Term,{children:"Het hoger onderwijs"},1),e.jsx(i.Description,{children:"Het hbo en wo"},2),e.jsx(i.Term,{children:"Het mbo en hoger onderwijs"},3),e.jsx(i.Description,{children:"Het vervolgonderwijs"},4),e.jsx(i.Term,{children:"Laagopgeleid"},5),e.jsx(i.Description,{children:"Praktisch opgeleid"},6),e.jsx(i.Term,{children:"Hoogopgeleid"},7),e.jsx(i.Description,{children:"Theoretisch opgeleid"},8),e.jsx(i.Term,{children:"Opleidingsniveau"},9),e.jsx(i.Description,{children:"Onderwijsrichting"},10)],inverseColor:!1},argTypes:{termsWidth:{control:{type:"radio",labels:{undefined:"auto",sm:"small",md:"medium",lg:"large"}},options:[void 0,"sm","md","lg"]}}},o={},a={args:{children:[e.jsx(i.Term,{children:"Blinde, slechtziende"},1),e.jsx(i.Description,{children:"Persoon met een visuele beperking"},2),e.jsx(i.Description,{children:"Persoon met een visuele handicap"},3),e.jsx(i.Description,{children:"Persoon die blind is"},4),e.jsx(i.Description,{children:"Persoon die slechtziend is"},5)]}},c={args:{termsWidth:"md",children:[e.jsx(i.Term,{children:"Achternaam"},1),e.jsx(i.Description,{children:"De naam die een persoon van zijn of haar ouders krijgt"},2),e.jsxs(i.Section,{children:[e.jsx(i.Term,{children:"Voornaam"}),e.jsx(i.Term,{children:"Roepnaam"}),e.jsx(i.Term,{children:"Bijnaam"}),e.jsx(i.Description,{children:"De naam waarmee een persoon wordt aangesproken"})]},3),e.jsx(i.Term,{children:"Geboortedatum"},4),e.jsx(i.Description,{children:"De datum waarop een persoon is geboren"},5)]}},d={render:r=>e.jsxs(i,{...r,children:[e.jsx(i.Term,{children:"Amsterdam Light Festival"},1),e.jsxs(i.Description,{children:[e.jsxs(U,{className:"ams-mb--sm",inverseColor:r.inverseColor,children:["Een jaarlijks evenement waarbij kunstenaars van over de hele wereld hun"," ",e.jsx("strong",{children:"creatieve lichtinstallaties"})," tonen. De kunstwerken zijn verspreid over de stad en zijn zowel vanaf het water als vanaf de kant te bewonderen."]}),e.jsxs(l,{inverseColor:r.inverseColor,children:[e.jsx(l.Item,{children:"Kleed je warm aan, want de meeste exposities zijn buiten."}),e.jsx(l.Item,{children:"Er zijn begeleide boottochten en wandelroutes beschikbaar."}),e.jsxs(l.Item,{children:["Voor de volledige lijst met exposities kun je"," ",e.jsx(E,{href:"#",inverseColor:r.inverseColor,children:"de festivalbrochure downloaden"}),"."]})]})]},2)]})},p={args:{inverseColor:!0}};var h,L,j;o.parameters={...o.parameters,docs:{...(h=o.parameters)==null?void 0:h.docs,source:{originalSource:"{}",...(j=(L=o.parameters)==null?void 0:L.docs)==null?void 0:j.source}}};var u,g,v;a.parameters={...a.parameters,docs:{...(u=a.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + children: [Blinde, slechtziende, Persoon met een visuele beperking, Persoon met een visuele handicap, Persoon die blind is, Persoon die slechtziend is] + } +}`,...(v=(g=a.parameters)==null?void 0:g.docs)==null?void 0:v.source}}};var x,_,y;c.parameters={...c.parameters,docs:{...(x=c.parameters)==null?void 0:x.docs,source:{originalSource:`{ + args: { + termsWidth: 'md', + children: [Achternaam, + De naam die een persoon van zijn of haar ouders krijgt + , + Voornaam + Roepnaam + Bijnaam + De naam waarmee een persoon wordt aangesproken + , Geboortedatum, De datum waarop een persoon is geboren] + } +}`,...(y=(_=c.parameters)==null?void 0:_.docs)==null?void 0:y.source}}};var T,f,k;d.parameters={...d.parameters,docs:{...(T=d.parameters)==null?void 0:T.docs,source:{originalSource:`{ + render: args => + Amsterdam Light Festival + + + Een jaarlijks evenement waarbij kunstenaars van over de hele wereld hun{' '} + creatieve lichtinstallaties tonen. De kunstwerken zijn verspreid over de stad en zijn zowel + vanaf het water als vanaf de kant te bewonderen. + + + Kleed je warm aan, want de meeste exposities zijn buiten. + Er zijn begeleide boottochten en wandelroutes beschikbaar. + + Voor de volledige lijst met exposities kun je{' '} + + de festivalbrochure downloaden + + . + + + + +}`,...(k=(f=d.parameters)==null?void 0:f.docs)==null?void 0:k.source}}};var b,w,C;p.parameters={...p.parameters,docs:{...(b=p.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + inverseColor: true + } +}`,...(C=(w=p.parameters)==null?void 0:w.docs)==null?void 0:C.source}}};const O=["Default","MultipleDescriptions","MultipleTerms","RichDescription","InverseColour"],W=Object.freeze(Object.defineProperty({__proto__:null,Default:o,InverseColour:p,MultipleDescriptions:a,MultipleTerms:c,RichDescription:d,__namedExportsOrder:O,default:M},Symbol.toStringTag,{value:"Module"}));export{W as D,p as I,a as M,d as R,c as a}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Dialog.docs-C1u1wX7j.js b/demo-npm_and_yarn/vite-6.0.3/assets/Dialog.docs-C1u1wX7j.js new file mode 100644 index 0000000000..bad8bd8603 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Dialog.docs-C1u1wX7j.js @@ -0,0 +1,58 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as l,aq as r,ar as a,as as c,at as t}from"./index-CF71P72j.js";import{D as h,O as d,A as m,W as p}from"./Dialog.stories-oJWU416G.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./Heading-Vg3KKL7T.js";import"./getHeadingTag-Dv1eMqvl.js";import"./IconButton-CxZOFXN2.js";import"./Icon-B4wlDyQ3.js";const u=` + +# Dialog + +A Dialog allows the user to focus on one task or a piece of information by popping up and blocking the page content until the modal task is completed or until the user dismisses the action. + +## Guidelines + +- Use dialogs sparingly because they interrupt the user’s workflow. +- Use a dialog for short and non-frequent tasks. + Consider using the main flow for regular tasks. +- Wrap multiple buttons in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs). + +## Keyboard support + +| key | function | +| :---------- | :--------------------------------------------------------------- | +| Tab | Moves focus to the next focusable element inside the dialog. | +| Shift + Tab | Moves focus to the previous focusable element inside the dialog. | +| Escape | Closes the dialog. | + +## Closing Dialog without submit + +You can close a Dialog without submitting by using \` + , + heading: 'Gelukt', + open: true + }, + decorators: [Story =>
    + +
    ], + parameters: { + docs: { + story: { + height: '28rem' + } + }, + layout: 'fullscreen' + } +}`,...(u=(v=t.parameters)==null?void 0:v.docs)==null?void 0:u.source}}};var h,f,k;s.parameters={...s.parameters,docs:{...(h=s.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + id: 'ams-dialog' + }, + decorators: [Story =>
    + + +
    ] +}`,...(k=(f=s.parameters)==null?void 0:f.docs)==null?void 0:k.source}}};var j,w,x;i.parameters={...i.parameters,docs:{...(j=i.parameters)==null?void 0:j.docs,source:{originalSource:`{ + args: { + children: defaultChildren('ams-dialog-asking-to-confirm-form'), + footer: defaultFooter('ams-dialog-asking-to-confirm-form'), + open: true + }, + decorators: [Story =>
    + +
    ], + parameters: { + docs: { + story: { + height: '32rem' + } + }, + layout: 'fullscreen' + } +}`,...(x=(w=i.parameters)==null?void 0:w.docs)==null?void 0:x.source}}};var y,b,D;d.parameters={...d.parameters,docs:{...(y=d.parameters)==null?void 0:y.docs,source:{originalSource:`{ + args: { + children: + + Algemeen + + + De gemeente Amsterdam verwerkt bij de uitvoering van haar taken en verplichtingen persoonsgegevens. De manier + waarop de gemeente Amsterdam om gaat met persoonsgegevens is vastgelegd in het stedelijk kader verwerken + persoonsgegevens. + + + Deze verklaring geeft aanvullende informatie over de omgang met persoonsgegevens door de gemeente Amsterdam en + over uw mogelijkheden tot het uitoefenen van uw rechten met betrekking tot persoonsgegevens. + + + Meer specifieke informatie over privacy en de verwerking van persoonsgegevens door de gemeente Amsterdam kunt + u op de hoofdpagina vinden. + + + Vanwege nieuwe wetgeving of andere ontwikkelingen, past de gemeente regelmatig haar processen aan. Dit kunnen + ook wijzigingen zijn in de wijze van het verwerken van persoonsgegevens. Wij raden u daarom aan om regelmatig + deze pagina te bekijken. Deze pagina wordt doorlopend geactualiseerd. + + + Geldende wet- en regelgeving en reikwijdte + + + Vanaf 25 mei 2018 is de Algemene verordening gegevensbescherming (Avg) van toepassing op alle verwerkingen van + persoonsgegevens. Deze Europese wetgeving heeft directe werking in Nederland. Voor die zaken die nationaal + geregeld moeten worden, is de Uitvoeringswet Avg in Nederland aanvullend van toepassing. Deze wetteksten kunt + u vinden op de website van Autoriteit Persoonsgegevens. + + , + footer: + + , + heading: 'Privacyverklaring gemeente Amsterdam', + open: true + }, + decorators: [Story =>
    + +
    ], + parameters: { + docs: { + story: { + height: '100vh' + } + }, + layout: 'fullscreen' + } +}`,...(D=(b=d.parameters)==null?void 0:b.docs)==null?void 0:D.source}}};const q=["Default","OpenAndClose","AskingToConfirm","WithScrollbar"],$=Object.freeze(Object.defineProperty({__proto__:null,AskingToConfirm:i,Default:t,OpenAndClose:s,WithScrollbar:d,__namedExportsOrder:q,default:E},Symbol.toStringTag,{value:"Module"}));export{i as A,$ as D,s as O,d as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/DocsRenderer-CFRXHY34-Dy5VsRac.js b/demo-npm_and_yarn/vite-6.0.3/assets/DocsRenderer-CFRXHY34-Dy5VsRac.js new file mode 100644 index 0000000000..f912e25a2c --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/DocsRenderer-CFRXHY34-Dy5VsRac.js @@ -0,0 +1,2 @@ +const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-3rgQkYFR.js","./index-RigO-4kf.js","./_commonjsHelpers-CqkleIqs.js","./index-D2MAbzvX.js"])))=>i.map(i=>d[i]); +import{_ as p}from"./iframe-DxGZ9Cpb.js";import{R as e,r as c}from"./index-RigO-4kf.js";import{ag as l,ah as u,ai as h,aj as E}from"./index-CF71P72j.js";import{renderElement as d,unmountElement as x}from"./react-18-1O4HD-Mi.js";import"../sb-preview/runtime.js";import"./_commonjsHelpers-CqkleIqs.js";import"./index-D2MAbzvX.js";import"./jsx-runtime-BjgbQsUx.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";var _={code:l,a:u,...h},D=class extends c.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(t){let{showException:r}=this.props;r(t)}render(){let{hasError:t}=this.state,{children:r}=this.props;return t?null:e.createElement(e.Fragment,null,r)}},T=class{constructor(){this.render=async(t,r,n)=>{let s={..._,...r==null?void 0:r.components},a=E;return new Promise((i,m)=>{p(async()=>{const{MDXProvider:o}=await import("./index-3rgQkYFR.js");return{MDXProvider:o}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:o})=>d(e.createElement(D,{showException:m,key:Math.random()},e.createElement(o,{components:s},e.createElement(a,{context:t,docsParameter:r}))),n)).then(()=>i())})},this.unmount=t=>{x(t)}}};export{T as DocsRenderer,_ as defaultComponents}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/ErrorMessage.docs-BSJVeKsk.js b/demo-npm_and_yarn/vite-6.0.3/assets/ErrorMessage.docs-BSJVeKsk.js new file mode 100644 index 0000000000..2dd980086b --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/ErrorMessage.docs-BSJVeKsk.js @@ -0,0 +1,27 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as i,aq as a,ar as m,as as c,at as r}from"./index-CF71P72j.js";import{E as h,C as d,W as p}from"./ErrorMessage.stories-DZRnu47C.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-CPc1noYl.js";import"./clsx-B-dksMZM.js";import"./Icon-B4wlDyQ3.js";const f=` + +# Error Message + +Show an error message when there is a form field validation error. +In the error message explain what went wrong and how to fix it. + +For guidance and examples on using error messages in a form, +refer to the [Field](/docs/components-forms-field--docs) and [Field Set](/docs/components-forms-field-set--docs) documentation. + +Read the documentation by [NL Design System](https://www.nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen) and [Gov.uk](https://design-system.service.gov.uk/components/error-message/) for more information on the contents of error messages and when to show them. +`;/*@license CC0-1.0*/function t(n){const o={code:"code",h2:"h2",h3:"h3",p:"p",...s(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:h}),` +`,e.jsx(a,{children:f}),` +`,e.jsx(m,{}),` +`,e.jsx(c,{}),` +`,e.jsx(o.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(o.h3,{id:"custom-prefix",children:"Custom prefix"}),` +`,e.jsxs(o.p,{children:[`Error messages are automatically prefixed with a visually hidden text, the Dutch word "Invoerfout". +This makes the error message more clear for screen reader users. +If you want to change this prefix, to support another language for example, you can use the `,e.jsx(o.code,{children:"prefix"})," prop."]}),` +`,e.jsx(r,{of:d}),` +`,e.jsx(o.h3,{id:"with-custom-icon",children:"With custom icon"}),` +`,e.jsx(o.p,{children:`Replace the icon with another to use Error Message in a different theme or visual identity. +Applications for the City of Amsterdam must use the default icon.`}),` +`,e.jsx(r,{of:p})]})}function S(n={}){const{wrapper:o}={...s(),...n.components};return o?e.jsx(o,{...n,children:e.jsx(t,{...n})}):t(n)}export{S as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/ErrorMessage.stories-DZRnu47C.js b/demo-npm_and_yarn/vite-6.0.3/assets/ErrorMessage.stories-DZRnu47C.js new file mode 100644 index 0000000000..7aed1210c8 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/ErrorMessage.stories-DZRnu47C.js @@ -0,0 +1,13 @@ +import{S as y,k as v}from"./index.esm-CPc1noYl.js";import{j as o}from"./jsx-runtime-BjgbQsUx.js";import{c as b}from"./clsx-B-dksMZM.js";import{r as S}from"./index-RigO-4kf.js";import{I as j}from"./Icon-B4wlDyQ3.js";const a=S.forwardRef(({children:n,className:h,icon:t,prefix:x="Invoerfout",...E},_)=>o.jsxs("p",{...E,ref:_,className:b("ams-error-message",h),children:[o.jsx(j,{svg:t||y,size:"level-6"}),o.jsxs("span",{className:"ams-visually-hidden",children:[x,": "]}),n]}));a.displayName="ErrorMessage";try{a.displayName="ErrorMessage",a.__docgenInfo={description:"",displayName:"ErrorMessage",props:{icon:{defaultValue:null,description:"An icon to display instead of the default icon.",name:"icon",required:!1,type:{name:"Function"}},prefix:{defaultValue:{value:"Invoerfout"},description:"An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’.",name:"prefix",required:!1,type:{name:"string"}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const I={title:"Components/Forms/Error Message",component:a,args:{children:"Vul een geldig e-mailadres in, bijvoorbeeld naam@voorbeeld.nl."},argTypes:{children:{table:{disable:!1}}}},e={},r={args:{children:"Enter an email address in the correct format, like name@example.com",prefix:"Error"}},s={args:{icon:v}};var c,i,m;e.parameters={...e.parameters,docs:{...(c=e.parameters)==null?void 0:c.docs,source:{originalSource:"{}",...(m=(i=e.parameters)==null?void 0:i.docs)==null?void 0:m.source}}};var l,d,p;r.parameters={...r.parameters,docs:{...(l=r.parameters)==null?void 0:l.docs,source:{originalSource:`{ + args: { + children: 'Enter an email address in the correct format, like name@example.com', + prefix: 'Error' + } +}`,...(p=(d=r.parameters)==null?void 0:d.docs)==null?void 0:p.source}}};var u,f,g;s.parameters={...s.parameters,docs:{...(u=s.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + icon: AnnouncementIcon + } +}`,...(g=(f=s.parameters)==null?void 0:f.docs)==null?void 0:g.source}}};const M=["Default","CustomPrefix","WithCustomIcon"],P=Object.freeze(Object.defineProperty({__proto__:null,CustomPrefix:r,Default:e,WithCustomIcon:s,__namedExportsOrder:M,default:I},Symbol.toStringTag,{value:"Module"}));export{r as C,P as E,s as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Field.docs-DTkwvjzS.js b/demo-npm_and_yarn/vite-6.0.3/assets/Field.docs-DTkwvjzS.js new file mode 100644 index 0000000000..1891a91b5b --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Field.docs-DTkwvjzS.js @@ -0,0 +1,29 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as s,aq as a,ar as d,as as c,at as i}from"./index-CF71P72j.js";import{F as h,W as p,a as l}from"./Field.stories-CloaHCAO.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const m=` + +# Field + +Wraps a single input and its related elements. May indicate that the input has a validation error. + +## Guidelines + +- Only use Field to wrap a single input. Use [Field Set](/docs/components-forms-field-set--docs) to wrap multiple inputs. +`;/*@license CC0-1.0*/function r(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...o(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(s,{of:h}),` +`,e.jsx(a,{children:m}),` +`,e.jsx(d,{}),` +`,e.jsx(c,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"with-description",children:"With description"}),` +`,e.jsxs(n.p,{children:[`A Field can have a description. +Make sure to connect this description to the input in the Field, +otherwise it won’t be read by a screen reader. +Add an `,e.jsx(n.code,{children:"aria-describedby"})," attribute to the input and provide the ",e.jsx(n.code,{children:"id"})," of the describing element as its value."]}),` +`,e.jsx(i,{of:p}),` +`,e.jsx(n.h3,{id:"with-validation",children:"With validation"}),` +`,e.jsxs(n.p,{children:[`A Field can indicate if the contained input has a validation error. +Use an `,e.jsx(n.a,{href:"/docs/components-forms-error-message--docs",children:"Error Message"}),` to describe the error. +Make sure to connect the Error Message to the input in the Field, +otherwise it won’t be read by a screen reader. +Add an `,e.jsx(n.code,{children:"aria-describedby"})," attribute to the input and provide the ",e.jsx(n.code,{children:"id"})," of Error Message as its value."]}),` +`,e.jsx(i,{of:l})]})}function k(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(r,{...t})}):r(t)}export{k as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Field.stories-CloaHCAO.js b/demo-npm_and_yarn/vite-6.0.3/assets/Field.stories-CloaHCAO.js new file mode 100644 index 0000000000..6d1d8c529a --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Field.stories-CloaHCAO.js @@ -0,0 +1,26 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{f as d,T as t,P as f,E as y}from"./index.esm-kzH9sPjb.js";import{c as W}from"./clsx-B-dksMZM.js";import{r as _}from"./index-RigO-4kf.js";const a=_.forwardRef(({children:i,className:x,invalid:j,...F},b)=>e.jsx("div",{...F,ref:b,className:W("ams-field",j&&"ams-field--invalid",x),children:i}));a.displayName="Field";try{a.displayName="Field",a.__docgenInfo={description:"",displayName:"Field",props:{invalid:{defaultValue:null,description:"Whether the field has an input with a validation error",name:"invalid",required:!1,type:{name:"boolean"}}}}}catch{}const T={title:"Components/Forms/Field",component:a,args:{invalid:!1}},r={render:i=>e.jsxs(a,{invalid:i.invalid,children:[e.jsx(d,{htmlFor:"input1",children:"Waar gaat het om?"}),e.jsx(t,{id:"input1",invalid:i.invalid})]})},n={render:i=>e.jsxs(a,{invalid:i.invalid,children:[e.jsx(d,{htmlFor:"input2",children:"Waar gaat het om?"}),e.jsx(f,{id:"description1",size:"small",children:"Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u."}),e.jsx(t,{id:"input2","aria-describedby":"description1",invalid:i.invalid})]})},s={args:{invalid:!0},render:i=>e.jsxs(a,{invalid:i.invalid,children:[e.jsx(d,{htmlFor:"input3",children:"Waar gaat het om?"}),e.jsx(f,{id:"description2",size:"small",children:"Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u."}),e.jsx(y,{id:"error",children:"Geef aan waar het om gaat."}),e.jsx(t,{id:"input3","aria-describedby":"description2 error","aria-required":!0,invalid:i.invalid})]})};var o,l,p;r.parameters={...r.parameters,docs:{...(o=r.parameters)==null?void 0:o.docs,source:{originalSource:`{ + render: args => + + + +}`,...(p=(l=r.parameters)==null?void 0:l.docs)==null?void 0:p.source}}};var c,m,g;n.parameters={...n.parameters,docs:{...(c=n.parameters)==null?void 0:c.docs,source:{originalSource:`{ + render: args => + + + Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u. + + + +}`,...(g=(m=n.parameters)==null?void 0:m.docs)==null?void 0:g.source}}};var u,v,h;s.parameters={...s.parameters,docs:{...(u=s.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + invalid: true + }, + render: args => + + + Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u. + + Geef aan waar het om gaat. + + +}`,...(h=(v=s.parameters)==null?void 0:v.docs)==null?void 0:h.source}}};const z=["Default","WithDescription","WithValidation"],I=Object.freeze(Object.defineProperty({__proto__:null,Default:r,WithDescription:n,WithValidation:s,__namedExportsOrder:z,default:T},Symbol.toStringTag,{value:"Module"}));export{I as F,n as W,s as a}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/FieldSet.docs-C1h1ffqs.js b/demo-npm_and_yarn/vite-6.0.3/assets/FieldSet.docs-C1h1ffqs.js new file mode 100644 index 0000000000..eed98d1685 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/FieldSet.docs-C1h1ffqs.js @@ -0,0 +1,89 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as s,aq as a,ar as d,as as l,at as n}from"./index-CF71P72j.js";import{F as h,W as c,a as p,b as u,R as x,c as j,C as g,d as m}from"./FieldSet.stories-CK5H8V-q.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./Hint-ny2kNNgA.js";const f=` + +# Field Set + +A component to group related form inputs. + +## Guidelines + +- Use Field Set when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single Field Set when asking for an address. +- Set \`optional\` to \`true\` if all inputs in a Field Set are not required. +- Use \`hint\` to show a custom hint text. + +## Relevant WCAG requirements + +- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html): Field Set labels the purpose of a group of inputs. + +## References + +- [Providing a description for groups of form controls using fieldset and legend elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H71) +`;/*@license CC0-1.0*/function r(t){const i={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...o(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(s,{of:h}),` +`,e.jsx(a,{children:f}),` +`,e.jsx(d,{}),` +`,e.jsx(l,{}),` +`,e.jsx(i.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(i.h3,{id:"with-description",children:"With description"}),` +`,e.jsxs(i.p,{children:[`A Field Set can have a description. +Make sure to connect this description to the Field Set or a specific input, +otherwise this won’t be read by a screen reader. +Add an `,e.jsx(i.code,{children:"aria-describedby"}),` attribute to the Field Set +and provide the `,e.jsx(i.code,{children:"id"})," of the describing element as its value."]}),` +`,e.jsx(n,{of:c}),` +`,e.jsx(i.h3,{id:"with-hint",children:"With Hint"}),` +`,e.jsxs(i.p,{children:[`A Field Set can indicate whether all of the inputs it contains are optional or required. +Make sure to add `,e.jsx(i.code,{children:"aria-required"})," to ",e.jsx("em",{children:"all"})," form elements in the Field Set when they are required."]}),` +`,e.jsx(n,{of:p}),` +`,e.jsx(i.h3,{id:"with-validation",children:"With Validation"}),` +`,e.jsxs(i.p,{children:[`A Field Set can indicate whether any of the inputs it contains has a validation error. +Use an `,e.jsx(i.a,{href:"/docs/components-forms-error-message--docs",children:"Error Message"}),` to describe the error. +Make sure to connect the Error Message to the correct input in the Field Set, +otherwise it won’t be read by a screen reader. +Add an `,e.jsx(i.code,{children:"aria-describedby"})," attribute to the input and provide the ",e.jsx(i.code,{children:"id"})," of Error Message as its value."]}),` +`,e.jsx(n,{of:u}),` +`,e.jsx(i.h3,{id:"radio-group",children:"Radio group"}),` +`,e.jsx(i.p,{children:"Use a Field Set to group several Radios with a legend, description, and / or an Error Message."}),` +`,e.jsxs(i.p,{children:["Add ",e.jsx(i.code,{children:'role="radiogroup"'}),` to the Field Set to have it explicitly announced as a radio group (the default role is just ‘group’). +The ‘radio group’ role also allows using `,e.jsx(i.code,{children:"aria-required"}),` on Field Set; that isn’t allowed for the ‘group’ role. +Even so, always set `,e.jsx(i.code,{children:"aria-required"})," on the individual Radios as well to ensure that screen readers can read it."]}),` +`,e.jsx(n,{of:x}),` +`,e.jsx(i.h3,{id:"radio-group-with-validation",children:"Radio group with validation"}),` +`,e.jsxs(i.p,{children:[`A Field Set with a Radio group can also have a validation error. +In this case, connect the Error Message to the Field Set instead of an input. +Add an `,e.jsx(i.code,{children:"aria-describedby"})," attribute to the Field Set and provide the ",e.jsx(i.code,{children:"id"})," of Error Message as its value."]}),` +`,e.jsx(n,{of:j}),` +`,e.jsx(i.h3,{id:"checkbox-group",children:"Checkbox group"}),` +`,e.jsx(i.p,{children:"Use a Field Set to group Checkboxes."}),` +`,e.jsxs(i.p,{children:["Please note: ",e.jsx(i.a,{href:"https://github.com/nvaccess/nvda/issues/12718",rel:"nofollow",children:"NVDA has a bug"}),` which causes it to +not report a description connected to a Field Set when it contains checkboxes.`]}),` +`,e.jsxs(i.p,{children:[`For this reason, we add the description text to the label. +Screen reader users will no longer be able to skip the description, +but we think that is preferable to missing the description entirely. +Add an `,e.jsx(i.code,{children:"id"})," to the Field Set and the description, and add both to the ",e.jsx(i.code,{children:"aria-labelledby"})," attribute of Field Set, like so:"]}),` +`,e.jsx(i.pre,{children:e.jsx(i.code,{className:"language-jsx",children:`
    + Description + ... +
    +`})}),` +`,e.jsxs(i.p,{children:["The order of the ",e.jsx(i.code,{children:"id"}),"s is the order in which they are read by screen readers."]}),` +`,e.jsx(n,{of:g}),` +`,e.jsx(i.h3,{id:"checkbox-group-with-validation",children:"Checkbox group with validation"}),` +`,e.jsxs(i.p,{children:["Because of ",e.jsx(i.a,{href:"https://github.com/nvaccess/nvda/issues/12718",rel:"nofollow",children:"the NVDA bug mentioned earlier"}),`, +we add the Error Message text to the label as well. +Add an `,e.jsx(i.code,{children:"id"})," to the Field Set and the Error Message, and add both to the ",e.jsx(i.code,{children:"aria-labelledby"})," attribute of Field Set, like so:"]}),` +`,e.jsx(i.pre,{children:e.jsx(i.code,{className:"language-jsx",children:`
    + Error message + ... +
    +`})}),` +`,e.jsxs(i.p,{children:["The order of the ",e.jsx(i.code,{children:"id"}),"s is the order in which they are read by screen readers."]}),` +`,e.jsx(n,{of:m})]})}function V(t={}){const{wrapper:i}={...o(),...t.components};return i?e.jsx(i,{...t,children:e.jsx(r,{...t})}):r(t)}export{V as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/FieldSet.stories-CK5H8V-q.js b/demo-npm_and_yarn/vite-6.0.3/assets/FieldSet.stories-CK5H8V-q.js new file mode 100644 index 0000000000..23cde31eba --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/FieldSet.stories-CK5H8V-q.js @@ -0,0 +1,182 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{e as l,f as s,E as r,T as t,P as o,C as F,R as d,g as n}from"./index.esm-kzH9sPjb.js";import{c as Q}from"./clsx-B-dksMZM.js";import{r as X}from"./index-RigO-4kf.js";import{H as Y}from"./Hint-ny2kNNgA.js";const i=X.forwardRef(({children:a,className:u,hint:m,invalid:c,legend:U,optional:B,...J},K)=>e.jsxs("fieldset",{...J,ref:K,className:Q("ams-field-set",c&&"ams-field-set--invalid",u),children:[e.jsxs("legend",{className:"ams-field-set__legend",children:[U," ",e.jsx(Y,{hint:m,optional:B})]}),a]}));i.displayName="FieldSet";try{i.displayName="FieldSet",i.__docgenInfo={description:"",displayName:"FieldSet",props:{invalid:{defaultValue:null,description:"Whether the field set has an input with a validation error",name:"invalid",required:!1,type:{name:"boolean"}},legend:{defaultValue:null,description:"The text for the caption.",name:"legend",required:!0,type:{name:"string"}},hint:{defaultValue:null,description:"Show a custom hint text.",name:"hint",required:!1,type:{name:"string"}},optional:{defaultValue:null,description:"Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional.",name:"optional",required:!1,type:{name:"boolean"}}}}}catch{}const Z={title:"Components/Forms/Field Set",component:i,args:{invalid:!1,legend:"Wat is uw naam?",optional:!1,hint:""},decorators:[a=>e.jsx("form",{children:e.jsx(a,{})})]},v={render:({invalid:a,legend:u,hint:m,optional:c})=>e.jsxs(i,{hint:m,invalid:a,legend:u,optional:c,children:[e.jsxs(l,{className:"ams-mb--sm",children:[e.jsx(s,{htmlFor:"input-a1",children:"Voornaam"}),a&&e.jsx(r,{id:"error-a1",children:"Vul uw voornaam in."}),e.jsx(t,{"aria-describedby":a?"error-a1":void 0,"aria-required":"true",id:"input-a1",invalid:a})]}),e.jsxs(l,{children:[e.jsx(s,{htmlFor:"input-a2",children:"Achternaam"}),a&&e.jsx(r,{id:"error-a2",children:"Vul uw achternaam in."}),e.jsx(t,{"aria-describedby":a?"error-a2":void 0,"aria-required":"true",id:"input-a2",invalid:a})]})]})},b={render:a=>e.jsxs(i,{"aria-describedby":"description-b",invalid:a.invalid,legend:a.legend,children:[e.jsx(o,{id:"description-b",size:"small",className:"ams-mb--sm",children:"Vul uw naam in zoals in uw paspoort staat."}),e.jsxs(l,{className:"ams-mb--sm",children:[e.jsx(s,{htmlFor:"input-b1",children:"Voornaam"}),a.invalid&&e.jsx(r,{id:"error-b1",children:"Vul uw voornaam in."}),e.jsx(t,{"aria-describedby":a.invalid?"error-b1":void 0,"aria-required":"true",id:"input-b1",invalid:a.invalid})]}),e.jsxs(l,{children:[e.jsx(s,{htmlFor:"input-b2",children:"Achternaam"}),a.invalid&&e.jsx(r,{id:"error-b2",children:"Vul uw achternaam in."}),e.jsx(t,{"aria-describedby":a.invalid?"error-b2":void 0,"aria-required":"true",id:"input-b2",invalid:a.invalid})]})]})},g={args:{optional:!1,hint:"verplicht"},render:({invalid:a,legend:u,hint:m,optional:c})=>e.jsxs(i,{hint:m,invalid:a,legend:u,optional:c,children:[e.jsxs(l,{className:"ams-mb--sm",children:[e.jsx(s,{htmlFor:"input-b3",children:"Voornaam"}),a&&e.jsx(r,{id:"error-b3",children:"Vul uw voornaam in."}),e.jsx(t,{"aria-describedby":a?"error-b3":void 0,"aria-required":"true",id:"input-b3",invalid:a})]}),e.jsxs(l,{children:[e.jsx(s,{htmlFor:"input-b4",children:"Achternaam"}),a&&e.jsx(r,{id:"error-b4",children:"Vul uw achternaam in."}),e.jsx(t,{"aria-describedby":a?"error-b4":void 0,"aria-required":"true",id:"input-b4",invalid:a})]})]})},p={args:{invalid:!0},render:a=>e.jsxs(i,{"aria-describedby":"description-c",invalid:a.invalid,legend:a.legend,children:[e.jsx(o,{id:"description-c",size:"small",className:"ams-mb--sm",children:"Vul uw naam in zoals in uw paspoort staat."}),e.jsxs(l,{className:"ams-mb--sm",children:[e.jsx(s,{htmlFor:"input-c1",children:"Voornaam"}),a.invalid&&e.jsx(r,{id:"error-c1",children:"Vul uw voornaam in."}),e.jsx(t,{"aria-describedby":a.invalid?"error-c1":void 0,"aria-required":"true",id:"input-c1",invalid:a.invalid})]}),e.jsxs(l,{children:[e.jsx(s,{htmlFor:"input-c2",children:"Achternaam"}),a.invalid&&e.jsx(r,{id:"error-c2",children:"Vul uw achternaam in."}),e.jsx(t,{"aria-describedby":a.invalid?"error-c2":void 0,"aria-required":"true",id:"input-c2",invalid:a.invalid})]})]})},h={args:{legend:"Waar gaat uw melding over?"},render:a=>e.jsxs(i,{"aria-describedby":`description-d${a.invalid?" error-d":""}`,"aria-required":"true",invalid:a.invalid,legend:a.legend,role:"radiogroup",children:[e.jsx(o,{className:"ams-mb--sm",id:"description-d",size:"small",children:"De laatstgenoemde melding."}),a.invalid&&e.jsx(r,{className:"ams-mb--sm",id:"error-d",children:"Geef aan waar uw laatstgenoemde melding over gaat."}),e.jsxs(F,{gap:"extra-small",children:[e.jsx(d,{"aria-required":"true",invalid:a.invalid,name:"about",value:"horeca",children:"Horecabedrijf"}),e.jsx(d,{"aria-required":"true",invalid:a.invalid,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),e.jsx(d,{"aria-required":"true",invalid:a.invalid,name:"about",value:"evenement",children:"Evenement"}),e.jsx(d,{"aria-required":"true",invalid:a.invalid,name:"about",value:"anders",children:"Iets anders"})]})]})},x={args:{legend:"Waar gaat uw melding over?",invalid:!0},render:a=>e.jsxs(i,{"aria-describedby":`description-e${a.invalid?" error-e":""}`,"aria-required":"true",invalid:a.invalid,legend:a.legend,role:"radiogroup",children:[e.jsx(o,{className:"ams-mb--sm",id:"description-e",size:"small",children:"De laatstgenoemde melding."}),a.invalid&&e.jsx(r,{className:"ams-mb--sm",id:"error-e",children:"Geef aan waar uw laatstgenoemde melding over gaat."}),e.jsxs(F,{gap:"extra-small",children:[e.jsx(d,{"aria-required":"true",invalid:a.invalid,name:"about",value:"horeca",children:"Horecabedrijf"}),e.jsx(d,{"aria-required":"true",invalid:a.invalid,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),e.jsx(d,{"aria-required":"true",invalid:a.invalid,name:"about",value:"evenement",children:"Evenement"}),e.jsx(d,{"aria-required":"true",invalid:a.invalid,name:"about",value:"anders",children:"Iets anders"})]})]})},j={args:{legend:"Waar gaat uw melding over?"},render:a=>e.jsxs(i,{"aria-labelledby":`fieldset-f description-f${a.invalid?" error-f":""}`,id:"fieldset-f",invalid:a.invalid,legend:a.legend,children:[e.jsx(o,{className:"ams-mb--sm",id:"description-f",size:"small",children:"De laatstgenoemde melding."}),a.invalid&&e.jsx(r,{className:"ams-mb--sm",id:"error-f",children:"Geef aan waar uw melding over gaat."}),e.jsxs(F,{gap:"extra-small",children:[e.jsx(n,{"aria-required":"true",invalid:a.invalid,name:"about",value:"horeca",children:"Horecabedrijf"}),e.jsx(n,{"aria-required":"true",invalid:a.invalid,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),e.jsx(n,{"aria-required":"true",invalid:a.invalid,name:"about",value:"evenement",children:"Evenement"}),e.jsx(n,{"aria-required":"true",invalid:a.invalid,name:"about",value:"anders",children:"Iets anders"})]})]})},f={args:{invalid:!0,legend:"Waar gaat uw melding over?"},render:a=>e.jsxs(i,{"aria-labelledby":`fieldset-g description-g${a.invalid?" error-g":""}`,id:"fieldset-g",invalid:a.invalid,legend:a.legend,children:[e.jsx(o,{id:"description-g",size:"small",className:"ams-mb--sm",children:"De laatstgenoemde melding."}),a.invalid&&e.jsx(r,{className:"ams-mb--sm",id:"error-g",children:"Geef aan waar uw melding over gaat."}),e.jsxs(F,{gap:"extra-small",children:[e.jsx(n,{"aria-required":"true",invalid:a.invalid,name:"about",value:"horeca",children:"Horecabedrijf"}),e.jsx(n,{"aria-required":"true",invalid:a.invalid,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),e.jsx(n,{"aria-required":"true",invalid:a.invalid,name:"about",value:"evenement",children:"Evenement"}),e.jsx(n,{"aria-required":"true",invalid:a.invalid,name:"about",value:"anders",children:"Iets anders"})]})]})};var q,w,y;v.parameters={...v.parameters,docs:{...(q=v.parameters)==null?void 0:q.docs,source:{originalSource:`{ + render: ({ + invalid, + legend, + hint, + optional + }) =>
    + + + {invalid && Vul uw voornaam in.} + + + + + {invalid && Vul uw achternaam in.} + + +
    +}`,...(y=(w=v.parameters)==null?void 0:w.docs)==null?void 0:y.source}}};var V,E,S;b.parameters={...b.parameters,docs:{...(V=b.parameters)==null?void 0:V.docs,source:{originalSource:`{ + render: args =>
    + + Vul uw naam in zoals in uw paspoort staat. + + + + {args.invalid && Vul uw voornaam in.} + + + + + {args.invalid && Vul uw achternaam in.} + + +
    +}`,...(S=(E=b.parameters)==null?void 0:E.docs)==null?void 0:S.source}}};var C,N,M;g.parameters={...g.parameters,docs:{...(C=g.parameters)==null?void 0:C.docs,source:{originalSource:`{ + args: { + optional: false, + hint: 'verplicht' + }, + render: ({ + invalid, + legend, + hint, + optional + }) =>
    + + + {invalid && Vul uw voornaam in.} + + + + + {invalid && Vul uw achternaam in.} + + +
    +}`,...(M=(N=g.parameters)==null?void 0:N.docs)==null?void 0:M.source}}};var R,_,k;p.parameters={...p.parameters,docs:{...(R=p.parameters)==null?void 0:R.docs,source:{originalSource:`{ + args: { + invalid: true + }, + render: args =>
    + + Vul uw naam in zoals in uw paspoort staat. + + + + {args.invalid && Vul uw voornaam in.} + + + + + {args.invalid && Vul uw achternaam in.} + + +
    +}`,...(k=(_=p.parameters)==null?void 0:_.docs)==null?void 0:k.source}}};var W,I,z;h.parameters={...h.parameters,docs:{...(W=h.parameters)==null?void 0:W.docs,source:{originalSource:`{ + args: { + legend: 'Waar gaat uw melding over?' + }, + render: args =>
    + + De laatstgenoemde melding. + + {args.invalid && + Geef aan waar uw laatstgenoemde melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(z=(I=h.parameters)==null?void 0:I.docs)==null?void 0:z.source}}};var A,L,G;x.parameters={...x.parameters,docs:{...(A=x.parameters)==null?void 0:A.docs,source:{originalSource:`{ + args: { + legend: 'Waar gaat uw melding over?', + invalid: true + }, + render: args =>
    + + De laatstgenoemde melding. + + {args.invalid && + Geef aan waar uw laatstgenoemde melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(G=(L=x.parameters)==null?void 0:L.docs)==null?void 0:G.source}}};var P,D,H;j.parameters={...j.parameters,docs:{...(P=j.parameters)==null?void 0:P.docs,source:{originalSource:`{ + args: { + legend: 'Waar gaat uw melding over?' + }, + render: args =>
    + + De laatstgenoemde melding. + + {args.invalid && + Geef aan waar uw melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(H=(D=j.parameters)==null?void 0:D.docs)==null?void 0:H.source}}};var T,$,O;f.parameters={...f.parameters,docs:{...(T=f.parameters)==null?void 0:T.docs,source:{originalSource:`{ + args: { + invalid: true, + legend: 'Waar gaat uw melding over?' + }, + render: args =>
    + + De laatstgenoemde melding. + + {args.invalid && + Geef aan waar uw melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(O=($=f.parameters)==null?void 0:$.docs)==null?void 0:O.source}}};const ee=["Default","WithDescription","WithHint","WithValidation","RadioGroup","RadioGroupWithValidation","CheckboxGroup","CheckboxGroupWithValidation"],le=Object.freeze(Object.defineProperty({__proto__:null,CheckboxGroup:j,CheckboxGroupWithValidation:f,Default:v,RadioGroup:h,RadioGroupWithValidation:x,WithDescription:b,WithHint:g,WithValidation:p,__namedExportsOrder:ee,default:Z},Symbol.toStringTag,{value:"Module"}));export{j as C,le as F,h as R,b as W,g as a,p as b,x as c,f as d}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/FileInput.docs-CFoxpHzf.js b/demo-npm_and_yarn/vite-6.0.3/assets/FileInput.docs-CFoxpHzf.js new file mode 100644 index 0000000000..9e4fcaf022 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/FileInput.docs-CFoxpHzf.js @@ -0,0 +1,32 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as l,aq as r,ar as a,as as d,at as s}from"./index-CF71P72j.js";import{F as c,M as p,R as h,D as m,I as f}from"./FileInput.stories-CKEzqN_F.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const x=` + +# File Input + +Allows the user to upload one or more files from their device. + +## Visual considerations + +The filename label and button are displayed in the language of the browser and can vary between browsers and operating systems. +`;/*@license CC0-1.0*/function t(n){const i={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...o(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(l,{of:c}),` +`,e.jsx(r,{children:x}),` +`,e.jsx(a,{}),` +`,e.jsx(d,{}),` +`,e.jsx(i.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(i.h3,{id:"multiple-files",children:"Multiple files"}),` +`,e.jsx(i.p,{children:"Allow multiple files to be selected. The label will update to show the number of files selected."}),` +`,e.jsx(s,{of:p}),` +`,e.jsx(i.h3,{id:"restrict-file-types",children:"Restrict file types"}),` +`,e.jsxs(i.p,{children:["Limit the types of files that can be selected. Some examples are ",e.jsx(i.code,{children:"image/*"}),", ",e.jsx(i.code,{children:"video/*"}),", or ",e.jsx(i.code,{children:"audio/*"}),". To limit to a specific file type, use the MIME type, such as ",e.jsx(i.code,{children:"application/pdf"}),"."]}),` +`,e.jsxs(i.ul,{children:[` +`,e.jsxs(i.li,{children:[e.jsx(i.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#limiting_accepted_file_types",rel:"nofollow",children:"MDN File Input"}),": More examples"]}),` +`]}),` +`,e.jsx(s,{of:h}),` +`,e.jsx(i.h3,{id:"disabled",children:"Disabled"}),` +`,e.jsx(s,{of:m}),` +`,e.jsx(i.h3,{id:"in-a-field",children:"In a Field"}),` +`,e.jsx(i.p,{children:"Use a Field component to group a File Input with a Label and possibly a description."}),` +`,e.jsxs(i.p,{children:["If you don’t need the description, remove its Paragraph and the ",e.jsx(i.code,{children:"aria-describedby"})," from the Text Input."]}),` +`,e.jsxs(i.p,{children:["Check ",e.jsx(i.a,{href:"/docs/components-forms-field--docs",children:"the Field docs"})," for more information on configuring it."]}),` +`,e.jsx(s,{of:f})]})}function A(n={}){const{wrapper:i}={...o(),...n.components};return i?e.jsx(i,{...n,children:e.jsx(t,{...n})}):t(n)}export{A as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/FileInput.stories-CKEzqN_F.js b/demo-npm_and_yarn/vite-6.0.3/assets/FileInput.stories-CKEzqN_F.js new file mode 100644 index 0000000000..4f7698953f --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/FileInput.stories-CKEzqN_F.js @@ -0,0 +1,21 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{e as D,f as L,P as O}from"./index.esm-kzH9sPjb.js";import{c as P}from"./clsx-B-dksMZM.js";import{r as R}from"./index-RigO-4kf.js";const i=R.forwardRef(({className:p,...I},S)=>e.jsx("input",{...I,ref:S,className:P("ams-file-input",p),type:"file"}));i.displayName="FileInput";try{i.displayName="FileInput",i.__docgenInfo={description:"",displayName:"FileInput",props:{}}}catch{}const v={title:"Components/Forms/File Input",component:i,args:{accept:void 0,multiple:!1,disabled:!1},argTypes:{accept:{control:{type:"text"}},multiple:{control:{type:"boolean"}},disabled:{control:{type:"boolean"}}}},r={},a={args:{multiple:!0}},s={args:{accept:"application/pdf"}},t={args:{disabled:!0}},o={render:p=>e.jsxs(D,{children:[e.jsx(L,{htmlFor:"input1",children:"Label"}),e.jsx(O,{id:"description1",size:"small",children:"Omschrijving."}),e.jsx(i,{"aria-describedby":"description1",id:"input1",...p})]})};var n,c,l;r.parameters={...r.parameters,docs:{...(n=r.parameters)==null?void 0:n.docs,source:{originalSource:"{}",...(l=(c=r.parameters)==null?void 0:c.docs)==null?void 0:l.source}}};var d,m,u;a.parameters={...a.parameters,docs:{...(d=a.parameters)==null?void 0:d.docs,source:{originalSource:`{ + args: { + multiple: true + } +}`,...(u=(m=a.parameters)==null?void 0:m.docs)==null?void 0:u.source}}};var g,b,F;s.parameters={...s.parameters,docs:{...(g=s.parameters)==null?void 0:g.docs,source:{originalSource:`{ + args: { + accept: 'application/pdf' + } +}`,...(F=(b=s.parameters)==null?void 0:b.docs)==null?void 0:F.source}}};var f,y,_;t.parameters={...t.parameters,docs:{...(f=t.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + disabled: true + } +}`,...(_=(y=t.parameters)==null?void 0:y.docs)==null?void 0:_.source}}};var x,h,j;o.parameters={...o.parameters,docs:{...(x=o.parameters)==null?void 0:x.docs,source:{originalSource:`{ + render: args => + + + Omschrijving. + + + +}`,...(j=(h=o.parameters)==null?void 0:h.docs)==null?void 0:j.source}}};const M=["Default","MultipleFiles","RestrictFileTypes","Disabled","InAField"],A=Object.freeze(Object.defineProperty({__proto__:null,Default:r,Disabled:t,InAField:o,MultipleFiles:a,RestrictFileTypes:s,__namedExportsOrder:M,default:v},Symbol.toStringTag,{value:"Module"}));export{t as D,A as F,o as I,a as M,s as R}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Footer.docs-BlWmkg24.js b/demo-npm_and_yarn/vite-6.0.3/assets/Footer.docs-BlWmkg24.js new file mode 100644 index 0000000000..c7d0e4b26b --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Footer.docs-BlWmkg24.js @@ -0,0 +1,32 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as i}from"./index-3rgQkYFR.js";import{ae as s,aq as r,ar as a,at as c}from"./index-CF71P72j.js";import{F as m,O as p}from"./Footer.stories-1Cxg8eUV.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./PageMenu.stories-D4cAVDKU.js";import"./Icon-B4wlDyQ3.js";import"./Spotlight-CVxUBei2.js";const l=` + +# Footer + +Provides service information at the bottom of every page. + +## Guidelines + +- The Footer consists of a dark blue [Spotlight](/docs/components-containers-spotlight--docs) and a [Page Menu](/docs/components-navigation-page-menu--docs). + It must be used on all websites for the City of Amsterdam. +- For applications, only the Page Menu can be sufficient. +- The Footer is the same on every page of the application. + +The Spotlight offers space for various practical links: + +- The first column focuses on contact information. + The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available). +- The second column contains links to relevant (online) sites or sources. +- The third column refers to newsletters, social media, etc. + +The menu at the very bottom is intended for links to privacy policies, cookie statements, information about the website itself, etc. +Contact details should not go here. +`;/*@license CC0-1.0*/function n(t){const o={h2:"h2",h3:"h3",p:"p",...i(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(s,{of:m}),` +`,e.jsx(r,{children:l}),` +`,e.jsx(a,{}),` +`,e.jsx(o.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(o.h3,{id:"onderzoek-en-statistiek",children:"Onderzoek en Statistiek"}),` +`,e.jsx(o.p,{children:`The footer for a specific website can be a bit different. +Here’s an example for the ‘Onderzoek en Statistiek’ department.`}),` +`,e.jsx(c,{of:p})]})}function D(t={}){const{wrapper:o}={...i(),...t.components};return o?e.jsx(o,{...t,children:e.jsx(n,{...t})}):n(t)}export{D as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Footer.stories-1Cxg8eUV.js b/demo-npm_and_yarn/vite-6.0.3/assets/Footer.stories-1Cxg8eUV.js new file mode 100644 index 0000000000..bedb72abdb --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Footer.stories-1Cxg8eUV.js @@ -0,0 +1,163 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{H as r,G as i,o as n,P as c,c as j}from"./index.esm-kzH9sPjb.js";import{d as z,h as b,s as F,t as H,u as G,v as P,w as S}from"./index.esm-CPc1noYl.js";import{D as N}from"./PageMenu.stories-D4cAVDKU.js";import{c as L}from"./clsx-B-dksMZM.js";import{r as v}from"./index-RigO-4kf.js";import{S as V}from"./Spotlight-CVxUBei2.js";const w=v.forwardRef(({children:s,className:l,...o},t)=>e.jsx("div",{...o,ref:t,className:L("ams-footer__bottom",l),children:s}));w.displayName="Footer.Bottom";try{Footer.Bottom.displayName="Footer.Bottom",Footer.Bottom.__docgenInfo={description:"",displayName:"Footer.Bottom",props:{}}}catch{}const _=v.forwardRef(({children:s,className:l,...o},t)=>e.jsx(V,{...o,color:"blue",ref:t,className:L("ams-footer__top",l),children:s}));_.displayName="Footer.Top";try{Footer.Top.displayName="Footer.Top",Footer.Top.__docgenInfo={description:"",displayName:"Footer.Top",props:{}}}catch{}const y=v.forwardRef(({children:s,className:l,...o},t)=>e.jsx("footer",{...o,ref:t,className:L("ams-footer",l),children:s}));y.displayName="Footer";const a=Object.assign(y,{Bottom:w,Top:_});try{a.displayName="Footer",a.__docgenInfo={description:"",displayName:"Footer",props:{}}}catch{}const O={title:"Components/Containers/Footer",component:a},B=[{icon:H,name:"Twitter"},{icon:G,name:"Facebook"},{icon:P,name:"Linkedin"},{icon:S,name:"Instagram"}];var h;const d={args:{children:[e.jsxs(a.Top,{children:[e.jsx(r,{className:"ams-visually-hidden",inverseColor:!0,children:"Colofon"}),e.jsxs(i,{gapVertical:"large",paddingVertical:"medium",children:[e.jsxs(i.Cell,{span:4,children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Meer weten"}),e.jsx(n,{children:["Veel gestelde vragen","Over ons","Werken bij","Kalender","Uit in Amsterdam","Bronnen"].map((s,l)=>e.jsx(n.Link,{href:"#",inverseColor:!0,size:"small",children:s},l))})]}),e.jsxs(i.Cell,{span:4,start:{narrow:1,medium:5,wide:5},children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Contact"}),e.jsx(c,{className:"ams-mb--xs",inverseColor:!0,size:"small",children:"Hebt u een vraag en kunt u het antwoord niet vinden op deze website? Neem dan contact met ons op."}),e.jsxs(n,{children:[e.jsx(n.Link,{href:"mailto:redactie@amsterdam.nl",icon:z,inverseColor:!0,size:"small",children:"E-mail"}),e.jsx(n.Link,{href:"tel:+3114020",icon:b,inverseColor:!0,size:"small",children:"14 020"}),e.jsx(n.Link,{href:"#",icon:F,inverseColor:!0,size:"small",children:"Contactgegevens en openingstijden"})]})]}),e.jsxs(i.Cell,{span:4,start:{narrow:1,medium:1,wide:9},children:[e.jsxs("section",{className:"ams-mb--md",children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Nieuwsbrief"}),e.jsx(n,{children:e.jsx(n.Link,{href:"#",inverseColor:!0,size:"small",children:"Inschrijven"})})]}),e.jsxs("section",{children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Volg ons"}),e.jsx(n,{children:B.map(({name:s,icon:l})=>e.jsx(n.Link,{href:"#",icon:l,inverseColor:!0,size:"small",children:s},s))})]})]})]})]},"footer-top"),e.jsxs(a.Bottom,{children:[e.jsx(r,{className:"ams-visually-hidden",level:2,children:"Over deze website"}),e.jsx(i,{paddingVertical:"small",children:e.jsx(i.Cell,{span:"all",children:e.jsx(j,{children:(h=N.args)==null?void 0:h.children})})})]},"footer-bottom")]}};var p;const m={args:{children:[e.jsxs(a.Top,{children:[e.jsx(r,{className:"ams-visually-hidden",inverseColor:!0,children:"Colofon"}),e.jsxs(i,{gapVertical:"large",paddingVertical:"medium",children:[e.jsxs(i.Cell,{span:3,children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Contact"}),e.jsx(c,{className:"ams-mb--xs",size:"small",inverseColor:!0,children:"Heeft u een vraag en kunt u het antwoord niet vinden op deze site? Neem dan contact met ons op."}),e.jsxs(n,{children:[e.jsx(n.Link,{href:"mailto:redactie.os@amsterdam.nl",icon:z,inverseColor:!0,size:"small",children:"E-mail"}),e.jsx(n.Link,{href:"tel:+31202510333",icon:b,inverseColor:!0,size:"small",children:"020 251 0333"})]})]}),e.jsxs(i.Cell,{span:3,start:{narrow:1,medium:5,wide:5},children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Panels en enquêtes"}),e.jsx(c,{className:"ams-mb--xs",inverseColor:!0,size:"small",children:"Bent u uitgenodigd om mee te doen aan onderzoek of heeft u vragen over het panel of stadspaspanel?"}),e.jsxs(n,{children:[e.jsx(n.Link,{href:"#",inverseColor:!0,rel:"external",size:"small",children:"Meedoen aan onderzoek"}),e.jsx(n.Link,{href:"#",inverseColor:!0,rel:"external",size:"small",children:"Panel Amsterdam"}),e.jsx(n.Link,{href:"#",inverseColor:!0,rel:"external",size:"small",children:"Stadspaspanel Amsterdam"})]})]}),e.jsxs(i.Cell,{span:3,start:{narrow:1,medium:1,wide:9},children:[e.jsx(r,{className:"ams-mb--xs",level:2,size:"level-4",inverseColor:!0,children:"Onderzoek en Statistiek"}),e.jsxs(n,{children:[e.jsx(n.Link,{href:"#",inverseColor:!0,size:"small",children:"Over Onderzoek en Statistiek"}),e.jsx(n.Link,{href:"#",inverseColor:!0,size:"small",children:"Veelgestelde vragen"}),e.jsx(n.Link,{href:"#",inverseColor:!0,rel:"external",size:"small",children:"Nieuwsbrief"}),e.jsx(n.Link,{href:"#",inverseColor:!0,size:"small",children:"Vacatures"})]})]})]})]},"footer-top"),e.jsxs(a.Bottom,{children:[e.jsx(r,{className:"ams-visually-hidden",level:2,children:"Over deze website"}),e.jsx(i,{paddingVertical:"small",children:e.jsx(i.Cell,{span:"all",children:e.jsx(j,{children:(p=N.args)==null?void 0:p.children})})})]},"footer-bottom")]}};var k,g,u;d.parameters={...d.parameters,docs:{...(k=d.parameters)==null?void 0:k.docs,source:{originalSource:`{ + args: { + children: [ + + Colofon + + + + + Meer weten + + + {['Veel gestelde vragen', 'Over ons', 'Werken bij', 'Kalender', 'Uit in Amsterdam', 'Bronnen'].map((label, index) => + {label} + )} + + + + + Contact + + + Hebt u een vraag en kunt u het antwoord niet vinden op deze website? Neem dan contact met ons op. + + + + E-mail + + + 14 020 + + + Contactgegevens en openingstijden + + + + +
    + + Nieuwsbrief + + + + Inschrijven + + +
    +
    + + Volg ons + + + {socialPlatforms.map(({ + name, + icon + }) => + {name} + )} + +
    +     +     +     , + + Over deze website + + + + {PageMenuStory.args?.children} + + + ] + } +}`,...(u=(g=d.parameters)==null?void 0:g.docs)==null?void 0:u.source}}};var x,C,f;m.parameters={...m.parameters,docs:{...(x=m.parameters)==null?void 0:x.docs,source:{originalSource:`{ + args: { + children: [ + + Colofon + + + + + Contact + + + Heeft u een vraag en kunt u het antwoord niet vinden op deze site? Neem dan contact met ons op. + + + + E-mail + + + 020 251 0333 + + + + + + Panels en enquêtes + + + Bent u uitgenodigd om mee te doen aan onderzoek of heeft u vragen over het panel of stadspaspanel? + + + + Meedoen aan onderzoek + + + Panel Amsterdam + + + Stadspaspanel Amsterdam + + + + + + Onderzoek en Statistiek + + + + Over Onderzoek en Statistiek + + + Veelgestelde vragen + + + Nieuwsbrief + + + Vacatures + + + + + , + + Over deze website + + + + {PageMenuStory.args?.children} + + + ] + } +}`,...(f=(C=m.parameters)==null?void 0:C.docs)==null?void 0:f.source}}};const T=["Default","OnderzoekEnStatistiek"],K=Object.freeze(Object.defineProperty({__proto__:null,Default:d,OnderzoekEnStatistiek:m,__namedExportsOrder:T,default:O},Symbol.toStringTag,{value:"Module"}));export{d as D,K as F,m as O}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/FormErrorList.docs-BboTKkZo.js b/demo-npm_and_yarn/vite-6.0.3/assets/FormErrorList.docs-BboTKkZo.js new file mode 100644 index 0000000000..12229f9609 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/FormErrorList.docs-BboTKkZo.js @@ -0,0 +1,53 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as i,aq as s,ar as a,as as m}from"./index-CF71P72j.js";import{F as h}from"./FormErrorList.stories-8fRkt2rP.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";import"./Alert-BKkc53u7.js";import"./index.esm-CPc1noYl.js";import"./Icon-B4wlDyQ3.js";import"./Heading-Vg3KKL7T.js";import"./getHeadingTag-Dv1eMqvl.js";import"./IconButton-CxZOFXN2.js";import"./LinkList-JvNP1NPY.js";const l=` + +# Form Error List + +Use this component at the top of a page to summarise any errors a user has made. +When a user makes an error, you must show both a Form Error List and an Error Message above each answer that contains an error. + +## Guidelines + +- Always show a Form Error List when there is a validation error, even if there’s only one. +- You must link the errors in the Form Error List to the answer they relate to (see below). + +## Linking from the Form Error List to each answer + +For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the \`id\` of that field. + +When a user has to enter their answer into multiple fields, such as day, month and year fields, link to the \`id\` of the first field that contains an error. +If you do not know which field contains an error, link to the \`id\` of the first field. + +For questions that require a user to select one or more options from a list using Radios or Checkboxes, link to the \`id\` of the first Radio or Checkbox. + +## Where to put the Form Error List + +Put the Form Error List directly above the first question on the page. Place it outside of the \`\`-tag, [to make sure screen readers do not skip it](https://nldesignsystem.nl/richtlijnen/formulieren/meerdere-stappen/#plaats-de-informatie-over-waar-de-gebruiker-is-in-de-stappen-boven-het-formulier). + +## Error count in document title + +This component adds the error count to the document title, +in line with [GOV.UK guidelines for informing users about validation errors](https://design-system.service.gov.uk/patterns/validation/#how-to-tell-the-user-about-validation-errors). + +## Focus on initial render + +This component receives focus the first time it gets displayed on a page. +This allows keyboard users to quickly navigate to the errors in the form. +It also scrolls the component into view if it isn't already. +Note: this functionality has been disabled on this page, to prevent unexpected focus behaviour. + +## Relevant WCAG requirements + +Pay extra attention to these parts: + +- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the Form Error List depends on where in the page it is placed, this may differ per page. + +## References + +- [Show an error summary above the form - NL Design System](https://www.nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen#zet-een-samenvatting-van-de-foutmeldingen-boven-het-formulier) +- [Error Summary component - Gov.uk](https://design-system.service.gov.uk/components/error-summary/) +`;/*@license CC0-1.0*/function n(t){return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:h}),` +`,e.jsx(s,{children:l}),` +`,e.jsx(a,{}),` +`,e.jsx(m,{})]})}function W(t={}){const{wrapper:r}={...o(),...t.components};return r?e.jsx(r,{...t,children:e.jsx(n,{...t})}):n()}export{W as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/FormErrorList.stories-8fRkt2rP.js b/demo-npm_and_yarn/vite-6.0.3/assets/FormErrorList.stories-8fRkt2rP.js new file mode 100644 index 0000000000..1c03de2d64 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/FormErrorList.stories-8fRkt2rP.js @@ -0,0 +1,7 @@ +import{j as i}from"./jsx-runtime-BjgbQsUx.js";import{r as t}from"./index-RigO-4kf.js";import{c as F}from"./clsx-B-dksMZM.js";import{A as L}from"./Alert-BKkc53u7.js";import{L as h}from"./LinkList-JvNP1NPY.js";const l=t.forwardRef(({className:e,errors:o,focusOnRender:r=!0,hasFocusedOnce:n,heading:d="Verbeter de fouten voor u verder gaat",headingLevel:c=2,setHasFocusedOnce:y,...E},_)=>{const a=t.useRef(null);return t.useImperativeHandle(_,()=>a.current),t.useEffect(()=>{a.current&&r&&!n&&(a.current.focus(),y(!0))},[a]),i.jsx(L,{...E,className:F("ams-form-error-list",e),heading:d,headingLevel:c,ref:a,severity:"error",tabIndex:-1,children:i.jsx(h,{children:o.map(({id:m,label:f})=>i.jsx(h.Link,{href:m,children:f},`${m}-${f}`))})})});l.displayName="FormErrorListWithErrors";try{l.displayName="FormErrorListWithErrors",l.__docgenInfo={description:"",displayName:"FormErrorListWithErrors",props:{heading:{defaultValue:{value:"Verbeter de fouten voor u verder gaat"},description:"The text for the Heading.",name:"heading",required:!1,type:{name:"string"}},errors:{defaultValue:null,description:"The list of error messages to display.",name:"errors",required:!0,type:{name:"FormError[]"}},focusOnRender:{defaultValue:{value:"true"},description:"Whether the component receives focus on first render",name:"focusOnRender",required:!1,type:{name:"boolean"}},headingLevel:{defaultValue:{value:"2"},description:`The hierarchical level of the Heading within the document. +Note: this intentionally does not change the font size.`,name:"headingLevel",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}},hasFocusedOnce:{defaultValue:null,description:"Whether the component has set focus once.",name:"hasFocusedOnce",required:!0,type:{name:"boolean"}},setHasFocusedOnce:{defaultValue:null,description:"Callback to let parent component know whether focus has been set once.",name:"setHasFocusedOnce",required:!0,type:{name:"Dispatch>"}}}}}catch{}const b=(e,o={plural:"invoerfouten",singular:"invoerfout"})=>{const[r,n]=t.useState();return t.useEffect(()=>{n(document.title)},[]),r&&(e.length===1?document.title=`(${e.length} ${o.singular}) ${r}`:e.length>1?document.title=`(${e.length} ${o.plural}) ${r}`:document.title=r),null},u=t.forwardRef(({errors:e,errorCountLabel:o,...r},n)=>{b(e,o);const[d,c]=t.useState(!1);if(e.length!==0)return i.jsx(l,{...r,errors:e,hasFocusedOnce:d,ref:n,setHasFocusedOnce:c})});u.displayName="FormErrorList";try{u.displayName="FormErrorList",u.__docgenInfo={description:"",displayName:"FormErrorList",props:{errorCountLabel:{defaultValue:{value:"{ plural: 'invoerfouten', singular: 'invoerfout' }"},description:`The text following the error count. +This is used to show the error count in the document title.`,name:"errorCountLabel",required:!1,type:{name:"{ plural: string; singular: string; }"}},errors:{defaultValue:null,description:"The list of error messages to display.",name:"errors",required:!0,type:{name:"FormError[]"}},focusOnRender:{defaultValue:{value:"true"},description:"Whether the component receives focus on first render",name:"focusOnRender",required:!1,type:{name:"boolean"}},heading:{defaultValue:{value:"Verbeter de fouten voor u verder gaat"},description:"The text for the Heading.",name:"heading",required:!1,type:{name:"string"}},headingLevel:{defaultValue:{value:"2"},description:`The hierarchical level of the Heading within the document. +Note: this intentionally does not change the font size.`,name:"headingLevel",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const V={title:"Components/Forms/Form Error List",component:u,args:{errors:[{id:"#",label:"Vul een geldige datum in (bijvoorbeeld 6 januari 2030)."},{id:"#",label:"De geldigheidsdatum van uw paspoort moet in de toekomst liggen."}],focusOnRender:!1}},s={};var p,g,v;s.parameters={...s.parameters,docs:{...(p=s.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(v=(g=s.parameters)==null?void 0:g.docs)==null?void 0:v.source}}};const x=["Default"],w=Object.freeze(Object.defineProperty({__proto__:null,Default:s,__namedExportsOrder:x,default:V},Symbol.toStringTag,{value:"Module"}));export{w as F}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/FormPage.docs-BiRPlvMA.js b/demo-npm_and_yarn/vite-6.0.3/assets/FormPage.docs-BiRPlvMA.js new file mode 100644 index 0000000000..33fb813ec8 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/FormPage.docs-BiRPlvMA.js @@ -0,0 +1,5 @@ +import{j as o}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as i}from"./index-3rgQkYFR.js";import{ae as e}from"./index-CF71P72j.js";import{F as p}from"./FormPage.stories-DPUMrj6U.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./config-zaa_gclf.js";import"./PageMenu.stories-D4cAVDKU.js";import"./Icon-B4wlDyQ3.js";import"./Footer.stories-1Cxg8eUV.js";import"./Spotlight-CVxUBei2.js";/*@license CC0-1.0*/function m(t){const r={h1:"h1",p:"p",...i(),...t.components};return o.jsxs(o.Fragment,{children:[` +`,` +`,o.jsx(e,{of:p}),` +`,o.jsx(r.h1,{id:"form-page",children:"Form page"}),` +`,o.jsx(r.p,{children:"This simple example presents various types of fields."})]})}function E(t={}){const{wrapper:r}={...i(),...t.components};return r?o.jsx(r,{...t,children:o.jsx(m,{...t})}):m(t)}export{E as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/FormPage.stories-DPUMrj6U.js b/demo-npm_and_yarn/vite-6.0.3/assets/FormPage.stories-DPUMrj6U.js new file mode 100644 index 0000000000..505e7f1f75 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/FormPage.stories-DPUMrj6U.js @@ -0,0 +1,4 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{G as d,i as m,H as g,e as a,f as n,P as l,j as v,k as b,F as c,C as f,T as s,R as o,l as y,m as t,n as w,a as F}from"./index.esm-kzH9sPjb.js";import{r as C}from"./index-RigO-4kf.js";import{c as D}from"./config-zaa_gclf.js";const S=()=>{const[u,p]=C.useState(0);return e.jsx(d,{paddingTop:"small",paddingBottom:"medium",children:e.jsxs(d.Cell,{span:{narrow:4,medium:6,wide:8},start:{narrow:1,medium:2,wide:3},children:[e.jsx(m,{children:e.jsx(m.Link,{children:"Home"})}),e.jsx(g,{className:"ams-mb--md",children:"Contact"}),e.jsxs("form",{className:"ams-gap--md",id:"main",onSubmit:i=>i.preventDefault(),children:[e.jsxs(a,{children:[e.jsx(n,{htmlFor:"body",children:"Wat wilt u aan de gemeente vragen?"}),e.jsx(l,{id:"bodyDescription",size:"small",children:"Een duidelijke beschrijving van uw vraag helpt ons bij het behandelen."}),e.jsx(v,{"aria-describedby":"bodyDescription",id:"body",onChange:i=>p(i.target.value.length),rows:4}),e.jsx(b,{length:u,maxLength:1e3})]}),e.jsx(c,{"aria-describedby":"contactDetailsDescription",legend:"Wat zijn uw gegevens?",children:e.jsxs(f,{gap:"small",children:[e.jsx(l,{id:"contactDetailsDescription",children:"Wij hebben uw gegevens nodig om contact met u te kunnen opnemen."}),e.jsxs(a,{children:[e.jsx(n,{htmlFor:"initials",children:"Voorletters"}),e.jsx(s,{id:"initials",name:"initials"})]}),e.jsxs(a,{children:[e.jsx(n,{htmlFor:"familyName",children:"Achternaam"}),e.jsx(s,{autoComplete:"family-name",id:"familyName",name:"familyName"})]}),e.jsxs(c,{legend:"Woonplaats",children:[e.jsx(o,{name:"city",value:"amsterdam",children:"Amsterdam"}),e.jsx(o,{name:"city",value:"weesp",children:"Weesp"}),e.jsx(o,{name:"city",value:"anders",children:"Anders"})]}),e.jsxs(a,{children:[e.jsx(n,{htmlFor:"email",children:"E-mail"}),e.jsx(s,{autoComplete:"email",id:"email",name:"email"})]}),e.jsxs(y,{wrap:!0,children:[e.jsxs(a,{children:[e.jsx(n,{htmlFor:"countryCode",children:"Landnummer"}),e.jsxs(t,{id:"countryCode",name:"countryCode",children:[e.jsx(t.Option,{value:"+31",children:"Nederland +31"}),e.jsx(t.Option,{value:"+32",children:"België +32"}),e.jsx(t.Option,{value:"+33",children:"Frankrijk +33"})]})]}),e.jsxs(a,{children:[e.jsx(n,{htmlFor:"phone",children:"Telefoonnummer"}),e.jsx(s,{autoComplete:"tel",id:"phone",name:"phone"})]})]})]})}),e.jsx(w,{severity:"info",children:e.jsx(l,{children:"We bewaren uw contactgegevens voor het afhandelen van uw vraag of klacht en het verbeteren van onze dienstverlening."})}),e.jsx("div",{children:e.jsx(F,{type:"submit",children:"Versturen"})})]})]})})};/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const k={...D,title:"Pages/Amsterdam.nl/Form Page",component:S},r={};var h,j,x;r.parameters={...r.parameters,docs:{...(h=r.parameters)==null?void 0:h.docs,source:{originalSource:"{}",...(x=(j=r.parameters)==null?void 0:j.docs)==null?void 0:x.source}}};const T=["Default"],P=Object.freeze(Object.defineProperty({__proto__:null,Default:r,__namedExportsOrder:T,default:k},Symbol.toStringTag,{value:"Module"}));export{P as F}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Gap.docs-2kFAXfVC.js b/demo-npm_and_yarn/vite-6.0.3/assets/Gap.docs-2kFAXfVC.js new file mode 100644 index 0000000000..7e51cf1164 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Gap.docs-2kFAXfVC.js @@ -0,0 +1,34 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as t}from"./index-3rgQkYFR.js";import{ae as o,aq as i,ar as r,as as m}from"./index-CF71P72j.js";import{G as p}from"./Gap.stories-5FY5L0Cc.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const l=` + +# Gap + +Adds white space between a set of elements. + +## Class names + +The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the width or height of the gap. + +| Class name | Example | +| ------------- | ----------------------------------------------------------------------------------------- | +| \`ams-gap--xs\` |
    | +| \`ams-gap--sm\` |
    | +| \`ams-gap--md\` |
    | +| \`ams-gap--lg\` |
    | +| \`ams-gap--xl\` |
    | + +## Guidelines + +- Use this utility class to vertically separate the children of a parent element from each other. +- Do not use it on the Grid component. + Grid is responsible for its own gaps. +- It can be used on any other element and sets the \`gap\` CSS property. + It also makes the element a grid container; the gap would be ignored otherwise. + These declarations are marked with the \`!important\` flag to ensure they override any other gaps and display modes. +- To add a gap between 2 siblings, the first one can be given a [Margin Bottom](/docs/utilities-css-margin--docs) instead. + This may be preferable because it doesn’t change the parent’s display mode. +`;/*@license CC0-1.0*/function n(s){return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(o,{of:p}),` +`,e.jsx(i,{children:l}),` +`,e.jsx(r,{}),` +`,e.jsx(m,{})]})}function G(s={}){const{wrapper:a}={...t(),...s.components};return a?e.jsx(a,{...s,children:e.jsx(n,{...s})}):n()}export{G as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Gap.stories-5FY5L0Cc.js b/demo-npm_and_yarn/vite-6.0.3/assets/Gap.stories-5FY5L0Cc.js new file mode 100644 index 0000000000..fcaa56cd72 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Gap.stories-5FY5L0Cc.js @@ -0,0 +1,6 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{P as s}from"./index.esm-kzH9sPjb.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const t=({children:r,size:l})=>e.jsx("span",{className:`ams-gap--${l}`,children:r});try{t.displayName="Gap",t.__docgenInfo={description:"Renders examples in Storybook. Not for reuse.",displayName:"Gap",props:{size:{defaultValue:null,description:"The amount of space between the element’s children.",name:"size",required:!0,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"xl"'}]}}}}}catch{}const c=({size:r})=>e.jsxs("div",{className:`ams-gap--${r}`,children:[e.jsx(s,{children:"These paragraphs are separated by a gap."}),e.jsx(s,{children:"These paragraphs are separated by a gap."}),e.jsx(s,{children:"These paragraphs are separated by a gap."})]}),d={title:"Utilities/CSS/Gap",component:t,args:{size:"xs"}},a={render:c};var o,p,n;a.parameters={...a.parameters,docs:{...(o=a.parameters)==null?void 0:o.docs,source:{originalSource:`{ + render +}`,...(n=(p=a.parameters)==null?void 0:p.docs)==null?void 0:n.source}}};const i=["Default"],g=Object.freeze(Object.defineProperty({__proto__:null,Default:a,__namedExportsOrder:i,default:d},Symbol.toStringTag,{value:"Module"}));export{g as G}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Grid.docs-Dxz6hTYb.js b/demo-npm_and_yarn/vite-6.0.3/assets/Grid.docs-Dxz6hTYb.js new file mode 100644 index 0000000000..c108a8410d --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Grid.docs-Dxz6hTYb.js @@ -0,0 +1,74 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as i}from"./index-3rgQkYFR.js";import{ae as a,aq as r,ar as l,as as d,at as s}from"./index-CF71P72j.js";import{G as c,V as h,a as p,S as m,b as u,c as x,d as g,I as w}from"./Grid.stories-bmYGHC93.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";import"./paddingClasses-C5gheHLv.js";const j=` + +# Grid + +Divides the screen into columns to align the elements of a page. + +## Guidelines + +- Every page should use the grid as the foundation for its layout. + It is placed directly within the [Screen](/docs/components-layout-screen--docs). +- A [Footer](/docs/components-containers-footer--docs) and a [Spotlight](/docs/components-containers-spotlight--docs) are slightly wider than the grid. + You close one instance of the grid before these components. + Inside and optionally after them, you start a new one. + Multiple instances of the grid component are possible on a page, but the columns of all grids must align precisely. +- Within the grid, you create cells containing the desired content. + A cell often spans multiple columns of the grid. +- The Gap utility classes must not be used on the Grid component. + +## Design + +The [design choices](/docs/brand-design-tokens-grid--docs) are described in the general documentation. +`;/*@license CC0-1.0*/function t(o){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...i(),...o.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(a,{of:c}),` +`,e.jsx(r,{children:j}),` +`,e.jsx(l,{}),` +`,e.jsx(d,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.p,{children:`The grey strokes in the examples on this page indicate the columns of the grid. +The gaps between the columns are white – note that they can be wider than the columns. +Pink boxes represent cells on the grid.`}),` +`,e.jsx(n.h3,{id:"vertical-padding",children:"Vertical padding"}),` +`,e.jsxs(n.p,{children:["Add white space above and below the grid through the ",e.jsx(n.code,{children:"padding…"}),` props. +This is useful on a coloured background, like `,e.jsx(n.a,{href:"/docs/components-containers-footer--docs",children:"Footer"})," or ",e.jsx(n.a,{href:"/docs/components-containers-spotlight--docs",children:"Spotlight"}),`, or between two consecutive grids. +Specify a value of `,e.jsx(n.code,{children:"medium"}),` for vertical white space as wide as the horizontal. +Use `,e.jsx(n.code,{children:"small"})," for half that width and ",e.jsx(n.code,{children:"large"}),` for double. +This padding is responsive as well.`]}),` +`,e.jsx(s,{of:h}),` +`,e.jsx(n.h3,{id:"vertical-gap",children:"Vertical gap"}),` +`,e.jsxs(n.p,{children:[`A grid automatically creates a new row if the next cell doesn’t fit the current one. +White space between rows is as wide as that between columns. +Use the `,e.jsx(n.code,{children:"verticalGap"})," prop to make it larger, smaller, or even remove it."]}),` +`,e.jsx(s,{of:p}),` +`,e.jsx(n.h3,{id:"span-columns",children:"Span columns"}),` +`,e.jsxs(n.p,{children:[`A cell defaults to spanning 1 column in the grid. +Use the `,e.jsx(n.code,{children:"span"})," prop to make a cell span more columns."]}),` +`,e.jsx(s,{of:m}),` +`,e.jsx(n.h3,{id:"span-responsively",children:"Span responsively"}),` +`,e.jsxs(n.p,{children:[`You can make the number of columns a cell spans depend on the window width. +Use the `,e.jsx(n.code,{children:"span"}),` prop with 3 values for narrow, medium, and wide windows. +E.g. `,e.jsx(n.code,{children:"span={{ narrow: 4, medium: 6, wide: 8 }}"})," makes the cell span all 4 columns on narrow windows, 6 of the 8 on medium windows, and 8 of the 12 on wide windows."]}),` +`,e.jsx(s,{of:u}),` +`,e.jsx(n.h3,{id:"span-all-columns",children:"Span all columns"}),` +`,e.jsxs(n.p,{children:["To stretch the cell to all columns of the grid – whether that are 4, 8, or 12 – use ",e.jsx(n.code,{children:'span="all"'}),"."]}),` +`,e.jsx(s,{of:x}),` +`,e.jsx(n.h3,{id:"start-position",children:"Start position"}),` +`,e.jsxs(n.p,{children:[`Each cell automatically starts in the next available position in the grid. +Adjust the starting position of a cell with the `,e.jsx(n.code,{children:"start"}),` prop. +This way, you can align cells in multiple rows or center a cell horizontally. +It can also skip a column for more white space between cells.`]}),` +`,e.jsxs(n.p,{children:[`The starting position of a cell may also depend on the window width. +Use the `,e.jsx(n.code,{children:"start"})," prop with 3 values, e.g. ",e.jsx(n.code,{children:"start={{ narrow: 2, medium: 4, wide: 6 }}"}),"."]}),` +`,e.jsx(s,{of:g}),` +`,e.jsx(n.h3,{id:"improve-semantics",children:"Improve semantics"}),` +`,e.jsxs(n.p,{children:["By default, both Grid and Grid Cell render a ",e.jsx(n.code,{children:"
    "}),` element in HTML. +Use the `,e.jsx(n.code,{children:"as"})," prop on either to make your markup more semantic."]}),` +`,e.jsx(s,{of:w}),` +`,e.jsx(n.h2,{id:"guidelines",children:"Guidelines"}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsx(n.li,{children:"Ensure that the number of columns you assign to a cell matches the amount of columns in the grid for the respective window width."}),` +`,e.jsx(n.li,{children:"The same applies to starting a cell in a later column."}),` +`,e.jsx(n.li,{children:`If the total of both values is too large, the browser adds columns to the grid. +This is not allowed.`}),` +`]})]})}function V(o={}){const{wrapper:n}={...i(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(t,{...o})}):t(o)}export{V as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Grid.stories-bmYGHC93.js b/demo-npm_and_yarn/vite-6.0.3/assets/Grid.stories-bmYGHC93.js new file mode 100644 index 0000000000..bace742084 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Grid.stories-bmYGHC93.js @@ -0,0 +1,58 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{c as H}from"./clsx-B-dksMZM.js";import{r as $}from"./index-RigO-4kf.js";import{g as W,p as X}from"./paddingClasses-C5gheHLv.js";const z=$.forwardRef(({as:a="div",children:l,className:g,span:u,start:v,...f},y)=>e.jsx(a,{...f,ref:y,className:H("ams-grid__cell",W(u,v),g),children:l}));z.displayName="Grid.Cell";try{Grid.Cell.displayName="Grid.Cell",Grid.Cell.__docgenInfo={description:"",displayName:"Grid.Cell",props:{as:{defaultValue:null,description:"The HTML tag to use.",name:"as",required:!1,type:{name:"enum",value:[{value:'"article"'},{value:'"main"'},{value:'"div"'},{value:'"section"'},{value:'"aside"'},{value:'"footer"'},{value:'"header"'},{value:'"nav"'}]}},span:{defaultValue:null,description:`Lets the cell span the full width of all grid variants. +The amount of grid columns the cell spans.`,name:"span",required:!1,type:{name:'"all" | GridColumnNumber | GridColumnNumbers'}},start:{defaultValue:null,description:"The index of the grid column the cell starts at.",name:"start",required:!1,type:{name:"GridColumnNumber | GridColumnNumbers"}}}}}catch{}const J=$.forwardRef(({as:a="div",children:l,className:g,gapVertical:u,paddingBottom:v,paddingTop:f,paddingVertical:y,...Q},U)=>e.jsx(a,{...Q,ref:U,className:H("ams-grid",u&&`ams-grid--gap-vertical--${u}`,X("grid",v,f,y),g),children:l}));J.displayName="Grid";const s=Object.assign(J,{Cell:z});try{s.displayName="Grid",s.__docgenInfo={description:"",displayName:"Grid",props:{as:{defaultValue:null,description:"The HTML tag to use.",name:"as",required:!1,type:{name:"enum",value:[{value:'"article"'},{value:'"main"'},{value:'"div"'},{value:'"section"'},{value:'"aside"'},{value:'"footer"'},{value:'"header"'},{value:'"nav"'}]}},gapVertical:{defaultValue:null,description:"The amount of space between rows.",name:"gapVertical",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"small"'},{value:'"large"'}]}},paddingBottom:{defaultValue:null,description:"The amount of space below.",name:"paddingBottom",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'},{value:'"medium"'}]}},paddingTop:{defaultValue:null,description:"The amount of space above.",name:"paddingTop",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'},{value:'"medium"'}]}},paddingVertical:{defaultValue:null,description:"The amount of space above and below.",name:"paddingVertical",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'},{value:'"medium"'}]}}}}}catch{}const Y={title:"Components/Layout/Grid",component:s,args:{gapVertical:void 0,paddingVertical:"medium"},argTypes:{className:{table:{disable:!0}},gapVertical:{control:{type:"radio",labels:{none:"none",small:"small",undefined:"medium",large:"large"}},options:["none","small",void 0,"large"]},paddingVertical:{control:{type:"radio",labels:{undefined:"none",small:"small",medium:"medium",large:"large"}},options:[void 0,"small","medium","large"]},paddingTop:{control:{type:"radio",labels:{undefined:"none",small:"small",medium:"medium",large:"large"}},options:[void 0,"small","medium","large"]},paddingBottom:{control:{type:"radio",labels:{undefined:"none",small:"small",medium:"medium",large:"large"}},options:[void 0,"small","medium","large"]}},parameters:{layout:"fullscreen"}};s.Cell;const K=()=>e.jsx(s,{className:"ams-docs-grid",children:Array.from(Array(12).keys()).map(a=>e.jsx(s.Cell,{className:"ams-docs-grid__cell"},a))}),C={decorators:[a=>e.jsxs(e.Fragment,{children:[e.jsx(K,{}),e.jsx(a,{})]})]},p={decorators:[a=>e.jsxs(e.Fragment,{children:[e.jsx(K,{}),e.jsx(s,{paddingVertical:"medium",children:e.jsx(a,{})})]})],render:({children:a,...l})=>e.jsx(s.Cell,{...l,children:a})},r={...C},n={...C,args:{children:e.jsx(s.Cell,{className:"ams-docs-item",span:"all"})}},o={...C,args:{children:[e.jsx(s.Cell,{className:"ams-docs-item",span:"all"},1),e.jsx(s.Cell,{className:"ams-docs-item",span:"all"},2)],gapVertical:"small"}},t={...p,args:{children:e.jsx("div",{className:"ams-docs-item"}),span:4}},m={...p,args:{children:e.jsx("div",{className:"ams-docs-item"}),span:{narrow:4,medium:6,wide:8}}},i={...p,args:{children:e.jsx("div",{className:"ams-docs-item"}),span:"all"}},d={...p,args:{children:e.jsx("div",{className:"ams-docs-item"}),span:3,start:{narrow:2,medium:4,wide:6}}},c={...p,args:{as:"section"},render:({as:a})=>e.jsx(s.Cell,{as:a,span:"all",children:e.jsx("div",{className:"ams-docs-item"})})};var h,S,N;r.parameters={...r.parameters,docs:{...(h=r.parameters)==null?void 0:h.docs,source:{originalSource:`{ + ...StoryTemplate +}`,...(N=(S=r.parameters)==null?void 0:S.docs)==null?void 0:N.source}}};var x,G,j;n.parameters={...n.parameters,docs:{...(x=n.parameters)==null?void 0:x.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + children: + } +}`,...(j=(G=n.parameters)==null?void 0:G.docs)==null?void 0:j.source}}};var T,_,V;o.parameters={...o.parameters,docs:{...(T=o.parameters)==null?void 0:T.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + children: [, ], + gapVertical: 'small' + } +}`,...(V=(_=o.parameters)==null?void 0:_.docs)==null?void 0:V.source}}};var b,w,q;t.parameters={...t.parameters,docs:{...(b=t.parameters)==null?void 0:b.docs,source:{originalSource:`{ + ...CellStoryTemplate, + args: { + children:
    , + span: 4 + } +}`,...(q=(w=t.parameters)==null?void 0:w.docs)==null?void 0:q.source}}};var P,R,I;m.parameters={...m.parameters,docs:{...(P=m.parameters)==null?void 0:P.docs,source:{originalSource:`{ + ...CellStoryTemplate, + args: { + children:
    , + span: { + narrow: 4, + medium: 6, + wide: 8 + } + } +}`,...(I=(R=m.parameters)==null?void 0:R.docs)==null?void 0:I.source}}};var k,A,B;i.parameters={...i.parameters,docs:{...(k=i.parameters)==null?void 0:k.docs,source:{originalSource:`{ + ...CellStoryTemplate, + args: { + children:
    , + span: 'all' + } +}`,...(B=(A=i.parameters)==null?void 0:A.docs)==null?void 0:B.source}}};var L,O,E;d.parameters={...d.parameters,docs:{...(L=d.parameters)==null?void 0:L.docs,source:{originalSource:`{ + ...CellStoryTemplate, + args: { + children:
    , + span: 3, + start: { + narrow: 2, + medium: 4, + wide: 6 + } + } +}`,...(E=(O=d.parameters)==null?void 0:O.docs)==null?void 0:E.source}}};var M,D,F;c.parameters={...c.parameters,docs:{...(M=c.parameters)==null?void 0:M.docs,source:{originalSource:`{ + ...CellStoryTemplate, + args: { + as: 'section' + }, + render: ({ + as + }: GridCellProps) => +
    + +}`,...(F=(D=c.parameters)==null?void 0:D.docs)==null?void 0:F.source}}};const Z=["Default","VerticalPadding","VerticalGap","SpanColumns","SpanResponsively","SpanAllColumns","StartPosition","ImproveSemantics"],re=Object.freeze(Object.defineProperty({__proto__:null,Default:r,ImproveSemantics:c,SpanAllColumns:i,SpanColumns:t,SpanResponsively:m,StartPosition:d,VerticalGap:o,VerticalPadding:n,__namedExportsOrder:Z,default:Y},Symbol.toStringTag,{value:"Module"}));export{re as G,c as I,t as S,n as V,o as a,m as b,i as c,d}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Header.docs-ByL-C9za.js b/demo-npm_and_yarn/vite-6.0.3/assets/Header.docs-ByL-C9za.js new file mode 100644 index 0000000000..e867bf43b9 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Header.docs-ByL-C9za.js @@ -0,0 +1,47 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as s,aq as r,ar as m,as as h,at as t}from"./index-CF71P72j.js";import{H as d,F as p,W as u,a as l,b as c,c as f,d as x,e as g}from"./Header.stories-aCN0oei0.js";import{S as j}from"./StatusBadge-DiE14TfE.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./Logo-BazI2ckd.js";import"./Heading-Vg3KKL7T.js";import"./getHeadingTag-Dv1eMqvl.js";import"./Badge-BvbF-Lgn.js";const w=` + +# Header + +Displays the City’s logo at the top of every page, and optionally a navigation menu. +Includes the name of the application if it is not the general website. + +## Guidelines + +- The Header must be used on all websites and applications for the City of Amsterdam. +- It includes the logo of the City or the organization, the site title (except for the general website), and a menu with links to commonly used pages. +- The Header is important because it conveys our corporate identity and is the first thing people see. + Using it consistently helps users recognize and trust the website. +- It is the same on every page of the application. +- The page menu can contain a maximum of 5 items. + The last two will often be ‘Search’ and ‘Menu’. +- Labels should be short to ensure the menu fits on one line, even on medium-wide screens. +- An icon can be added to the end of a link to make its function easier to find. + +## References + +- A Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be use to group navigation elements. +- [WCAG 3.2.3](https://wcag.com/designers/3-2-3-consistent-navigation/) Consistent Navigation: Navigation menus that appear on multiple pages are consistent. +`;/*@license CC0-1.0*/function i(a){const e={a:"a",h2:"h2",h3:"h3",p:"p",...o(),...a.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(s,{of:d}),` +`,n.jsx(j,{reason:"Needs work for narrow screens and integration with Mega Menu."}),` +`,n.jsx(r,{children:w}),` +`,n.jsx(m,{}),` +`,n.jsx(h,{}),` +`,n.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(e.h3,{id:"for-a-sub-brand",children:"For a sub-brand"}),` +`,n.jsx(t,{of:p}),` +`,n.jsx(e.h3,{id:"with-app-name",children:"With app name"}),` +`,n.jsx(t,{of:u}),` +`,n.jsx(e.h3,{id:"with-menu-button",children:"With menu button"}),` +`,n.jsx(t,{of:l}),` +`,n.jsx(e.h3,{id:"with-links",children:"With links"}),` +`,n.jsxs(e.p,{children:["Use a ",n.jsx(e.a,{href:"/docs/components-navigation-page-menu--docs",children:"Page Menu"}),` to add links. +A Page Menu in the Header should not wrap.`]}),` +`,n.jsx(t,{of:c}),` +`,n.jsx(e.h3,{id:"with-links-and-menu-button",children:"With links and menu button"}),` +`,n.jsx(t,{of:f}),` +`,n.jsx(e.h3,{id:"with-app-name-and-menu-button",children:"With app name and menu button"}),` +`,n.jsx(t,{of:x}),` +`,n.jsx(e.h3,{id:"with-app-name-links-and-menu-button",children:"With app name, links and menu button"}),` +`,n.jsx(t,{of:g})]})}function X(a={}){const{wrapper:e}={...o(),...a.components};return e?n.jsx(e,{...a,children:n.jsx(i,{...a})}):i(a)}export{X as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Header.stories-aCN0oei0.js b/demo-npm_and_yarn/vite-6.0.3/assets/Header.stories-aCN0oei0.js new file mode 100644 index 0000000000..75d922dc01 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Header.stories-aCN0oei0.js @@ -0,0 +1,53 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{c as a}from"./index.esm-kzH9sPjb.js";import{j as c}from"./index.esm-CPc1noYl.js";import{c as z}from"./clsx-B-dksMZM.js";import{r as O}from"./index-RigO-4kf.js";import{L as U}from"./Logo-BazI2ckd.js";import{H as J}from"./Heading-Vg3KKL7T.js";const u=O.forwardRef(({appName:l,className:V,links:p,logoBrand:Z="amsterdam",logoLink:D="/",logoLinkTitle:F="Ga naar de homepage",menu:g,...I},R)=>e.jsx(e.Fragment,{children:e.jsxs("header",{...I,ref:R,className:z("ams-header",V),children:[e.jsxs("a",{href:D,className:"ams-header__logo-link",children:[e.jsx("span",{className:"ams-visually-hidden",children:F}),e.jsx(U,{brand:Z})]}),p&&e.jsx("div",{className:"ams-header__links",children:p}),g&&e.jsx("div",{className:"ams-header__menu",children:g}),l&&e.jsx("div",{className:"ams-header__app-name",children:e.jsx(J,{level:1,size:"level-3",className:"ams-header__app-name-heading",children:l})})]})}));u.displayName="Header";try{u.displayName="Header",u.__docgenInfo={description:"",displayName:"Header",props:{appName:{defaultValue:null,description:"The name of the application.",name:"appName",required:!1,type:{name:"string"}},links:{defaultValue:null,description:"The list of menu links. Use a Page Menu here.",name:"links",required:!1,type:{name:"ReactNode"}},logoBrand:{defaultValue:{value:"amsterdam"},description:"The name of the brand for which to display the logo.",name:"logoBrand",required:!1,type:{name:"enum",value:[{value:'"amsterdam"'},{value:'"ggd-amsterdam"'},{value:'"museum-weesp"'},{value:'"stadsarchief"'},{value:'"stadsbank-van-lening"'},{value:'"vga-verzekeringen"'}]}},logoLink:{defaultValue:{value:"/"},description:"The url for the link on the logo.",name:"logoLink",required:!1,type:{name:"string"}},logoLinkTitle:{defaultValue:{value:"Ga naar de homepage"},description:"The accessible text for the link on the logo.",name:"logoLinkTitle",required:!1,type:{name:"string"}},menu:{defaultValue:null,description:"A button to toggle the visibility of a Mega Menu.",name:"menu",required:!1,type:{name:"ReactNode"}}}}}catch{}const K={title:"Components/Containers/Header",component:u},n={},r={args:{logoBrand:"ggd-amsterdam",logoLink:"https://www.ggd.amsterdam.nl/",logoLinkTitle:"Naar de homepage van de GGD Amsterdam"}},s={args:{appName:"Aan de Amsterdamse grachten"}},t={args:{links:e.jsxs(a,{alignEnd:!0,wrap:!1,children:[e.jsx(a.Link,{href:"#",children:"Contact"}),e.jsx(a.Link,{href:"#",children:"Mijn Amsterdam"}),e.jsx(a.Link,{href:"#",icon:c,children:"Zoeken"})]})}},o={args:{menu:e.jsx("button",{className:"ams-header__menu-button",children:"Menu"})}},i={args:{links:e.jsxs(a,{alignEnd:!0,wrap:!1,children:[e.jsx(a.Link,{href:"#",children:"Contact"}),e.jsx(a.Link,{href:"#",children:"Mijn Amsterdam"}),e.jsx(a.Link,{href:"#",icon:c,children:"Zoeken"})]}),menu:e.jsx("button",{className:"ams-header__menu-button",children:"Menu"})}},m={args:{appName:"Aan de Amsterdamse grachten",menu:e.jsx("button",{className:"ams-header__menu-button",children:"Menu"})}},d={args:{appName:"Aan de Amsterdamse grachten",links:e.jsxs(a,{alignEnd:!0,wrap:!1,children:[e.jsx(a.Link,{href:"#",children:"Contact"}),e.jsx(a.Link,{href:"#",children:"Mijn Amsterdam"}),e.jsx(a.Link,{href:"#",icon:c,children:"Zoeken"})]}),menu:e.jsx("button",{className:"ams-header__menu-button",children:"Menu"})}};var h,k,f;n.parameters={...n.parameters,docs:{...(h=n.parameters)==null?void 0:h.docs,source:{originalSource:"{}",...(f=(k=n.parameters)==null?void 0:k.docs)==null?void 0:f.source}}};var M,L,_;r.parameters={...r.parameters,docs:{...(M=r.parameters)==null?void 0:M.docs,source:{originalSource:`{ + args: { + logoBrand: 'ggd-amsterdam', + logoLink: 'https://www.ggd.amsterdam.nl/', + logoLinkTitle: 'Naar de homepage van de GGD Amsterdam' + } +}`,...(_=(L=r.parameters)==null?void 0:L.docs)==null?void 0:_.source}}};var j,N,A;s.parameters={...s.parameters,docs:{...(j=s.parameters)==null?void 0:j.docs,source:{originalSource:`{ + args: { + appName: 'Aan de Amsterdamse grachten' + } +}`,...(A=(N=s.parameters)==null?void 0:N.docs)==null?void 0:A.source}}};var b,x,P;t.parameters={...t.parameters,docs:{...(b=t.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + links: + Contact + Mijn Amsterdam + + Zoeken + + + } +}`,...(P=(x=t.parameters)==null?void 0:x.docs)==null?void 0:P.source}}};var v,S,y;o.parameters={...o.parameters,docs:{...(v=o.parameters)==null?void 0:v.docs,source:{originalSource:`{ + args: { + menu: + } +}`,...(y=(S=o.parameters)==null?void 0:S.docs)==null?void 0:y.source}}};var w,B,W;i.parameters={...i.parameters,docs:{...(w=i.parameters)==null?void 0:w.docs,source:{originalSource:`{ + args: { + links: + Contact + Mijn Amsterdam + + Zoeken + + , + menu: + } +}`,...(W=(B=i.parameters)==null?void 0:B.docs)==null?void 0:W.source}}};var T,E,H;m.parameters={...m.parameters,docs:{...(T=m.parameters)==null?void 0:T.docs,source:{originalSource:`{ + args: { + appName: 'Aan de Amsterdamse grachten', + menu: + } +}`,...(H=(E=m.parameters)==null?void 0:E.docs)==null?void 0:H.source}}};var C,q,G;d.parameters={...d.parameters,docs:{...(C=d.parameters)==null?void 0:C.docs,source:{originalSource:`{ + args: { + appName: 'Aan de Amsterdamse grachten', + links: + Contact + Mijn Amsterdam + + Zoeken + + , + menu: + } +}`,...(G=(q=d.parameters)==null?void 0:q.docs)==null?void 0:G.source}}};const Q=["Default","ForSubBrand","WithAppName","WithLinks","WithMenuButton","WithLinksAndMenuButton","WithAppNameAndMenuButton","WithAppNameLinksAndMenuButton"],se=Object.freeze(Object.defineProperty({__proto__:null,Default:n,ForSubBrand:r,WithAppName:s,WithAppNameAndMenuButton:m,WithAppNameLinksAndMenuButton:d,WithLinks:t,WithLinksAndMenuButton:i,WithMenuButton:o,__namedExportsOrder:Q,default:K},Symbol.toStringTag,{value:"Module"}));export{r as F,se as H,s as W,o as a,t as b,i as c,m as d,d as e}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Heading-Vg3KKL7T.js b/demo-npm_and_yarn/vite-6.0.3/assets/Heading-Vg3KKL7T.js new file mode 100644 index 0000000000..acb94f3f38 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Heading-Vg3KKL7T.js @@ -0,0 +1 @@ +import{j as d}from"./jsx-runtime-BjgbQsUx.js";import{c as m}from"./clsx-B-dksMZM.js";import{r as v}from"./index-RigO-4kf.js";import{g as c}from"./getHeadingTag-Dv1eMqvl.js";const e=v.forwardRef(({children:a,className:r,inverseColor:i,level:l=1,size:n,...o},t)=>{const s=c(l),u=n??`level-${l}`;return d.jsx(s,{ref:t,className:m("ams-heading",`ams-heading--${u}`,i&&"ams-heading--inverse-color",r),...o,children:a})});e.displayName="Heading";try{e.displayName="Heading",e.__docgenInfo={description:"",displayName:"Heading",props:{inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}},level:{defaultValue:{value:"1"},description:"The hierarchical level within the document.",name:"level",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}},size:{defaultValue:null,description:"Uses larger or smaller text without changing its position in the heading hierarchy.",name:"size",required:!1,type:{name:"enum",value:[{value:'"level-3"'},{value:'"level-4"'},{value:'"level-5"'},{value:'"level-6"'},{value:'"level-1"'},{value:'"level-2"'}]}}}}}catch{}export{e as H}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Heading.docs-BWSbzA9G.js b/demo-npm_and_yarn/vite-6.0.3/assets/Heading.docs-BWSbzA9G.js new file mode 100644 index 0000000000..6921a5ad3f --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Heading.docs-BWSbzA9G.js @@ -0,0 +1,56 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as r}from"./index-3rgQkYFR.js";import{ae as i,aq as a,ar as l,as as h,at as s}from"./index-CF71P72j.js";import{H as c,L as d,a as p,b as u,c as g,S as m,I as v}from"./Heading.stories-D7Eh-EEO.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./exampleContent-hIIPvEhU.js";import"./Heading-Vg3KKL7T.js";import"./getHeadingTag-Dv1eMqvl.js";const x=` + +# Heading + +Describes the content that follows it. +Use Headings to allow the user to grasp the structure of the page quickly. + +## Guidelines + +- A heading describes the content beneath it. +- Every page should contain one Heading with level 1. +- Do not skip heading levels, e.g. a level 2 Heading should be followed by one with level 3, not level 4. +- Do not use a Heading for formatting and styling, but to represent the page’s structure. + Users of screen readers use headings to navigate the page – an incorrect hierarchy can confuse them. + +## Relevant WCAG requirements + +- [WCAG 1.3.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-content-structure-separation-programmatic): + Text that looks like a heading is also recognized as a heading by a computer. + Using the correct heading level makes the page structure clear for all users. +- [WCAG 2.4.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-skip): Headings can be used to navigate to the next section with the keyboard. +- [WCAG 2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels): Use headings to describe the purpose or subject of the underlying content. +- [WCAG 2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-headings): Use headings to structure the content. + +## References + +- [W3C - Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) +- [W3C - Headings & labels](https://www.w3.org/TR/WCAG21/#headings-and-labels) +- [A11Y project - Heading structure](https://www.a11yproject.com/posts/how-to-accessible-heading-structure/) +`;/*@license CC0-1.0*/function o(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",p:"p",...r(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:c}),` +`,e.jsx(a,{children:x}),` +`,e.jsx(l,{}),` +`,e.jsx(h,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"levels",children:"Levels"}),` +`,e.jsx(n.p,{children:`We’ve limited the number of heading levels to four. +More detailed content should probably be split into multiple pages or have some sections merged.`}),` +`,e.jsx(n.h4,{id:"level-1",children:"Level 1"}),` +`,e.jsx(s,{of:d}),` +`,e.jsx(n.h4,{id:"level-2",children:"Level 2"}),` +`,e.jsx(s,{of:p}),` +`,e.jsx(n.h4,{id:"level-3",children:"Level 3"}),` +`,e.jsx(s,{of:u}),` +`,e.jsx(n.h4,{id:"level-4",children:"Level 4"}),` +`,e.jsx(s,{of:g}),` +`,e.jsx(n.h3,{id:"sizes",children:"Sizes"}),` +`,e.jsxs(n.p,{children:[`It may be visually more suitable to display a heading in a smaller font size. +Six sizes from the set of `,e.jsx(n.a,{href:"/docs/brand-design-tokens-text--docs",children:"Text Levels"}),` can be used for this purpose. +Ensure that you still select a level that accurately represents the section’s hierarchy.`]}),` +`,e.jsx(s,{of:m}),` +`,e.jsx(n.h3,{id:"inverse-colour",children:"Inverse colour"}),` +`,e.jsxs(n.p,{children:["Set the ",e.jsx(n.code,{children:"inverseColor"}),` prop if the Heading sits on a dark background. +This ensures the colour of the text provides enough contrast.`]}),` +`,e.jsx(s,{of:v})]})}function R(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{R as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Heading.stories-D7Eh-EEO.js b/demo-npm_and_yarn/vite-6.0.3/assets/Heading.stories-D7Eh-EEO.js new file mode 100644 index 0000000000..474f9ae5ae --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Heading.stories-D7Eh-EEO.js @@ -0,0 +1,26 @@ +import{j as I}from"./jsx-runtime-BjgbQsUx.js";import{r as s}from"./index-RigO-4kf.js";import{C as O}from"./index.esm-kzH9sPjb.js";import{e as D}from"./exampleContent-hIIPvEhU.js";import{H as e}from"./Heading-Vg3KKL7T.js";const M=D(),P={title:"Components/Text/Heading",component:e,args:{children:M,inverseColor:!1},argTypes:{children:{description:"The heading text.",table:{disable:!1}}}},a={},l={},o={args:{level:2}},n={args:{level:3}},t={args:{level:4}},c={render:r=>I.jsxs(O,{gap:"small",children:[s.createElement(e,{...r,key:"level-1",size:"level-1"}),s.createElement(e,{...r,key:"level-2",size:"level-2"}),s.createElement(e,{...r,key:"level-3",size:"level-3"}),s.createElement(e,{...r,key:"level-4",size:"level-4"}),s.createElement(e,{...r,key:"level-5",size:"level-5"}),s.createElement(e,{...r,key:"level-6",size:"level-6"})]})},i={args:{inverseColor:!0}};var m,p,d;a.parameters={...a.parameters,docs:{...(m=a.parameters)==null?void 0:m.docs,source:{originalSource:"{}",...(d=(p=a.parameters)==null?void 0:p.docs)==null?void 0:d.source}}};var v,g,u;l.parameters={...l.parameters,docs:{...(v=l.parameters)==null?void 0:v.docs,source:{originalSource:"{}",...(u=(g=l.parameters)==null?void 0:g.docs)==null?void 0:u.source}}};var y,z,S;o.parameters={...o.parameters,docs:{...(y=o.parameters)==null?void 0:y.docs,source:{originalSource:`{ + args: { + level: 2 + } +}`,...(S=(z=o.parameters)==null?void 0:z.docs)==null?void 0:S.source}}};var f,k,H;n.parameters={...n.parameters,docs:{...(f=n.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + level: 3 + } +}`,...(H=(k=n.parameters)==null?void 0:k.docs)==null?void 0:H.source}}};var C,x,E;t.parameters={...t.parameters,docs:{...(C=t.parameters)==null?void 0:C.docs,source:{originalSource:`{ + args: { + level: 4 + } +}`,...(E=(x=t.parameters)==null?void 0:x.docs)==null?void 0:E.source}}};var L,b,h;c.parameters={...c.parameters,docs:{...(L=c.parameters)==null?void 0:L.docs,source:{originalSource:`{ + render: args => + + + + + + + +}`,...(h=(b=c.parameters)==null?void 0:b.docs)==null?void 0:h.source}}};var _,j,T;i.parameters={...i.parameters,docs:{...(_=i.parameters)==null?void 0:_.docs,source:{originalSource:`{ + args: { + inverseColor: true + } +}`,...(T=(j=i.parameters)==null?void 0:j.docs)==null?void 0:T.source}}};const R=["Default","Level1","Level2","Level3","Level4","Sizes","InverseColour"],G=Object.freeze(Object.defineProperty({__proto__:null,Default:a,InverseColour:i,Level1:l,Level2:o,Level3:n,Level4:t,Sizes:c,__namedExportsOrder:R,default:P},Symbol.toStringTag,{value:"Module"}));export{G as H,i as I,l as L,c as S,o as a,n as b,t as c}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Hint-ny2kNNgA.js b/demo-npm_and_yarn/vite-6.0.3/assets/Hint-ny2kNNgA.js new file mode 100644 index 0000000000..5c4a21cbd8 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Hint-ny2kNNgA.js @@ -0,0 +1 @@ +import{j as s}from"./jsx-runtime-BjgbQsUx.js";import{c as l}from"./clsx-B-dksMZM.js";import{r as p}from"./index-RigO-4kf.js";const c=({hint:e,optional:t})=>e||(t?"niet verplicht":null),n=p.forwardRef(({className:e,hint:t,optional:i,...a},o)=>{const r=c({hint:t,optional:i});return r&&s.jsxs("span",{...a,ref:o,className:l("ams-hint",e),children:["(",r,")"]})});n.displayName="Hint";try{n.displayName="Hint",n.__docgenInfo={description:"",displayName:"Hint",props:{hint:{defaultValue:null,description:"Show a custom hint text.",name:"hint",required:!1,type:{name:"string"}},optional:{defaultValue:null,description:"Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional.",name:"optional",required:!1,type:{name:"boolean"}}}}}catch{}export{n as H}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/HomePage.docs-BDsWOxmW.js b/demo-npm_and_yarn/vite-6.0.3/assets/HomePage.docs-BDsWOxmW.js new file mode 100644 index 0000000000..6ae13a1351 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/HomePage.docs-BDsWOxmW.js @@ -0,0 +1,40 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as t}from"./index-CF71P72j.js";import{H as a}from"./HomePage.stories-CI8Rp4l9.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./Overlap.stories-CIryYdPw.js";import"./config-zaa_gclf.js";import"./PageMenu.stories-D4cAVDKU.js";import"./Icon-B4wlDyQ3.js";import"./Footer.stories-1Cxg8eUV.js";import"./Spotlight-CVxUBei2.js";/*@license CC0-1.0*/function r(i){const e={code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",...o(),...i.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(t,{of:a}),` +`,n.jsx(e.h1,{id:"home-page",children:"Home page"}),` +`,n.jsx(e.p,{children:"The starting page of an application generally provides a broad overview of subjects, common tasks, and recent articles."}),` +`,n.jsx(e.h2,{id:"layout",children:"Layout"}),` +`,n.jsx(e.p,{children:"A typical layout for a homepage:"}),` +`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:` + Direct naar inhoud + +
    + +
    + + + + + + + + +
    +
    + +
    + +`})}),` +`,n.jsxs(e.ol,{children:[` +`,n.jsx(e.li,{children:"The Skip Link prevents users from having to pass all preceding navigation links."}),` +`,n.jsx(e.li,{children:"The Screen component sets a maximum width for the entire page."}),` +`,n.jsx(e.li,{children:"The Grid divides the available width into 4, 8, or 12 columns."}),` +`,n.jsx(e.li,{children:"The Header shows the logo and menus for the application."}),` +`,n.jsx(e.li,{children:`The main element wraps everything between Header and Footer. +It carries an id for the skip link to target.`}),` +`,n.jsx(e.li,{children:`An Overlap stacks a Search Field on a background Image. +It is as wide as the Grid, hence it is a sibling of it.`}),` +`,n.jsx(e.li,{children:"Other components in the main area are laid out on a Grid again."}),` +`,n.jsx(e.li,{children:`The Footer contains its own Grid. +This allows its background colour to stretch to the Screen’s width.`}),` +`]})]})}function H(i={}){const{wrapper:e}={...o(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(r,{...i})}):r(i)}export{H as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/HomePage.stories-CI8Rp4l9.js b/demo-npm_and_yarn/vite-6.0.3/assets/HomePage.stories-CI8Rp4l9.js new file mode 100644 index 0000000000..f74ede900e --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/HomePage.stories-CI8Rp4l9.js @@ -0,0 +1,4 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{G as s,H as l,d as n,I as a,t as m,P as i,L as o,O as j}from"./index.esm-kzH9sPjb.js";import{D as x}from"./Overlap.stories-CIryYdPw.js";import{c as u}from"./config-zaa_gclf.js";const p=()=>e.jsxs(s,{paddingVertical:"medium",children:[e.jsx(s.Cell,{span:"all",children:e.jsx(l,{level:2,children:"Nieuws"})}),e.jsx(s.Cell,{span:4,children:e.jsxs(n,{children:[e.jsx(a,{alt:"",src:"https://picsum.photos/640/360?random=1"}),e.jsx(n.HeadingGroup,{tagline:"Nieuws",children:e.jsx(l,{level:2,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Nederlands eerste houten woonwijk komt in Zuidoost"})})})]})}),e.jsx(s.Cell,{span:4,children:e.jsxs(n,{children:[e.jsx(a,{alt:"",src:"https://picsum.photos/640/360?random=2"}),e.jsx(n.HeadingGroup,{tagline:"Nieuws",children:e.jsx(l,{level:2,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Gratis openbaar vervoer voor kinderen"})})})]})}),e.jsx(s.Cell,{span:4,children:e.jsxs(n,{children:[e.jsx(a,{alt:"",src:"https://picsum.photos/640/360?random=3"}),e.jsx(n.HeadingGroup,{tagline:"Nieuws",children:e.jsx(l,{level:2,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Zonnepanelen op uw dak? Zo houdt u uw huis veilig"})})})]})})]}),g=()=>e.jsx(m,{color:"purple",children:e.jsxs(s,{paddingVertical:"medium",children:[e.jsxs(s.Cell,{span:{narrow:4,medium:4,wide:6},children:[e.jsx(l,{className:"ams-mb--xs",inverseColor:!0,size:"level-2",children:"Ontheffing of vergunning"}),e.jsxs(i,{className:"ams-mb--sm",inverseColor:!0,children:["Check welke ontheffing of vergunning u nodig heeft. Bijvoorbeeld een RVV, TVM, objectvergunning,"," ","nachtwerkontheffing, e-RVV, e-TVM of filmmelding. Dat regult u allemaal met 1 formulier."]}),e.jsx(o,{href:"#",inverseColor:!0,variant:"standalone",children:"Eenvoudig regelen"})]}),e.jsxs(s.Cell,{span:{narrow:4,medium:4,wide:6},children:[e.jsx(l,{className:"ams-mb--xs",inverseColor:!0,size:"level-2",children:"Werkzaamheden"}),e.jsx(i,{className:"ams-mb--sm",inverseColor:!0,children:"Lees waar en wanneer we werken aan nieuwbouw, groot onderhoud, herinrichting van straten en wegen, aanpak van parken of ontwikkeling van hele gebieden."}),e.jsx(o,{href:"#",inverseColor:!0,variant:"standalone",children:"Alle bouw- en verkeerswerkzaamheden"})]})]})}),v=()=>e.jsxs(s,{paddingVertical:"medium",children:[e.jsx(s.Cell,{span:"all",children:e.jsx(l,{children:"Belangrijkste onderwerpen"})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(l,{level:2,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Gemeentebelastingen"})}),e.jsx(i,{size:"small",children:"Bekijk welke belastingen en heffingen er zijn, hoe u bezwaar maakt of een betalingsregeling treft."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(l,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Parkeren + Reizen (P+R)"})}),e.jsx(i,{size:"small",children:"U kunt met uw auto goedkoop parkeren bij een P+R-locatie aan de rand van de stad."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(l,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Paspoort, ID-kaart en rijbewijs"})}),e.jsx(i,{size:"small",children:"Vraag deze bewijzen aan of verleng ze. Geef een vermissing aan."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(l,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Onderwijs"})}),e.jsx(i,{size:"small",children:"Meld een kind aan voor basisschool, middelbare school of kinderopvang. Bekijk het kindtegoed op uw Stadspas."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(l,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Meldingen openbare ruimte en overlast"})}),e.jsx(i,{size:"small",children:"Ziet u op straat of in een park iets waarvan u wilt dat het gemaakt of opgeruimd wordt, dan kunt u dat bij de gemeente melden."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(l,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Verhuizing doorgeven"})}),e.jsx(i,{size:"small",children:"Geef uw nieuwe adres door als u binnen Amsterdam of naar Amsterdam verhuist."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(l,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Grof afval"})}),e.jsx(i,{size:"small",children:"Grof afval zijn spullen die niet in een vuilniszak passen."})]})}),e.jsx(s.Cell,{span:{narrow:4,medium:4,wide:3},children:e.jsxs(n,{children:[e.jsx(l,{level:3,size:"level-4",children:e.jsx(n.Link,{href:"#",children:"Kennisgevingen en bekendmakingen"})}),e.jsx(i,{size:"small",children:"Kennisgevingen en bekendmakingen van de gemeente Amsterdam van de laatste 8 weken."})]})})]}),w=()=>{var d;return e.jsxs("main",{id:"main",children:[e.jsx(j,{children:(d=x.args)==null?void 0:d.children}),e.jsx(v,{}),e.jsx(g,{}),e.jsx(p,{})]})};/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const k={...u,title:"Pages/Amsterdam.nl/Home Page",component:w},r={};var t,h,c;r.parameters={...r.parameters,docs:{...(t=r.parameters)==null?void 0:t.docs,source:{originalSource:"{}",...(c=(h=r.parameters)==null?void 0:h.docs)==null?void 0:c.source}}};const f=["Default"],H=Object.freeze(Object.defineProperty({__proto__:null,Default:r,__namedExportsOrder:f,default:k},Symbol.toStringTag,{value:"Module"}));export{H}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Icon-B4wlDyQ3.js b/demo-npm_and_yarn/vite-6.0.3/assets/Icon-B4wlDyQ3.js new file mode 100644 index 0000000000..23f6f24a1e --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Icon-B4wlDyQ3.js @@ -0,0 +1 @@ +import{j as i}from"./jsx-runtime-BjgbQsUx.js";import{c as t}from"./clsx-B-dksMZM.js";import{r as c}from"./index-RigO-4kf.js";const a=c.forwardRef(({className:l,size:e="level-3",square:s,svg:o,...r},n)=>i.jsx("span",{ref:n,className:t("ams-icon",e==="level-3"&&"ams-icon--size-3",e==="level-4"&&"ams-icon--size-4",e==="level-5"&&"ams-icon--size-5",e==="level-6"&&"ams-icon--size-6",s&&"ams-icon--square",l),...r,children:o()}));a.displayName="Icon";try{a.displayName="Icon",a.__docgenInfo={description:"",displayName:"Icon",props:{size:{defaultValue:{value:"level-3"},description:"The size of the icon. Corresponds with the text levels.",name:"size",required:!1,type:{name:"enum",value:[{value:'"level-3"'},{value:'"level-4"'},{value:'"level-5"'},{value:'"level-6"'}]}},square:{defaultValue:null,description:"Whether the icon container should be made square.",name:"square",required:!1,type:{name:"boolean"}},svg:{defaultValue:null,description:"The component rendering the icon’s markup.",name:"svg",required:!0,type:{name:"Function"}}}}}catch{}export{a as I}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Icon.docs-D7PZnCsV.js b/demo-npm_and_yarn/vite-6.0.3/assets/Icon.docs-D7PZnCsV.js new file mode 100644 index 0000000000..6d303a9a27 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Icon.docs-D7PZnCsV.js @@ -0,0 +1,67 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as a}from"./index-3rgQkYFR.js";import{ae as i,aq as r,ar as c,as as l,at as o}from"./index-CF71P72j.js";import{I as h,W as d,S as m,L as p,a as x,b as u,c as f}from"./Icon.stories-DbudEFpx.js";import{S as j}from"./StatusBadge-DiE14TfE.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./Icon-B4wlDyQ3.js";import"./Badge-BvbF-Lgn.js";const g=` + +# Icon + +Icons are visual symbols used to represent ideas, themes, or actions. +They communicate the message at a glance and draw attention to important (interactive) information. +Always use an \`Icon\` component to encapsulate an SVG icon for proper styling and sizing. + +## Interactive elements + +Use an icon to support textual interactive elements like buttons and links. +Always try to provide accompanying text for an icon. +Only use icons without accompanying text if they adhere to international standards, such as menu (hamburger icon), search (magnifying glass), next, previous, play, pause, etc. + +## Color + +Icons are black or white. +When used as part of an interactive element, they are dark blue. +When disabled, they are grey. +They must adhere to the same contrast ratio for accessibility as typography against a background colour. +The icon defaults to the colour of the container it is in. + +## Alignment + +Icons are aligned to the left of the text by default and vertically centred to the middle of the first line of text. + +## Size + +Icons use the same text levels as all typographic components to determine their size. +This ensures easy alignment between icons and text. +[Refer to the typography documentation for more information](/docs/brand-design-tokens-text--docs). + +## Overview + +[You can find an overview of the available icons here](/docs/brand-assets-icons--docs). +`;/*@license CC0-1.0*/function s(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...a(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:h}),` +`,e.jsx(j,{reason:"The set of available icon names and the component API will change."}),` +`,e.jsx(r,{children:g}),` +`,e.jsx(n.h2,{id:"how-to-use",children:"How to use"}),` +`,e.jsxs(n.p,{children:["Use the React Icon component together with a React SVG component from ",e.jsx(n.code,{children:"@amsterdam/design-system-react-icons"}),`. +Import this SVG as follows:`]}),` +`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-js",children:`import { EmailIcon } from "@amsterdam/design-system-react-icons"; +`})}),` +`,e.jsx(n.p,{children:"Then, you can use it in the component like this:"}),` +`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:` +`})}),` +`,e.jsx(c,{}),` +`,e.jsx(l,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"with-text",children:"With text"}),` +`,e.jsxs(n.p,{children:[`Icons can be used alongside text. +Using the same text levels for both the icon and text aligns them perfectly. +`,e.jsx(n.a,{href:"/docs/brand-design-tokens-text--docs",children:"Consult the documentation on typography for more information"}),"."]}),` +`,e.jsx(o,{of:d}),` +`,e.jsx(n.h3,{id:"square",children:"Square"}),` +`,e.jsxs(n.p,{children:["Sometimes it’s useful for the icon to take up square space, for example, with the ",e.jsx(n.a,{href:"/docs/components-buttons-icon-button--docs",children:"Icon Button"}),"."]}),` +`,e.jsx(o,{of:m}),` +`,e.jsx(n.h3,{id:"level-3",children:"Level 3"}),` +`,e.jsx(o,{of:p}),` +`,e.jsx(n.h3,{id:"level-4",children:"Level 4"}),` +`,e.jsx(o,{of:x}),` +`,e.jsx(n.h3,{id:"level-5",children:"Level 5"}),` +`,e.jsx(o,{of:u}),` +`,e.jsx(n.h3,{id:"level-6",children:"Level 6"}),` +`,e.jsx(o,{of:f})]})}function U(t={}){const{wrapper:n}={...a(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{U as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Icon.stories-DbudEFpx.js b/demo-npm_and_yarn/vite-6.0.3/assets/Icon.stories-DbudEFpx.js new file mode 100644 index 0000000000..10323e6197 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Icon.stories-DbudEFpx.js @@ -0,0 +1,44 @@ +import{j as s}from"./jsx-runtime-BjgbQsUx.js";import{H as D}from"./index.esm-kzH9sPjb.js";import{I as m,d as e}from"./index.esm-CPc1noYl.js";import{I as W}from"./Icon-B4wlDyQ3.js";const M={title:"Components/Media/Icon",component:W,argTypes:{svg:{control:{type:"select"},options:Object.keys(m),mapping:m}}},r={args:{svg:e}},a={decorators:[i=>s.jsx("span",{style:{display:"flex",gap:"1rem"},children:s.jsx(i,{})})],render:i=>s.jsxs(s.Fragment,{children:[s.jsx(W,{...i,size:"level-3"}),s.jsx(D,{size:"level-3",children:"Inline text"})]}),args:{svg:e}},o={args:{svg:e,square:!0}},n={args:{svg:e,size:"level-3"}},c={args:{svg:e,size:"level-4"}},t={args:{svg:e,size:"level-5"}},l={args:{svg:e,size:"level-6"}};var p,g,d;r.parameters={...r.parameters,docs:{...(p=r.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon + } +}`,...(d=(g=r.parameters)==null?void 0:g.docs)==null?void 0:d.source}}};var v,u,I;a.parameters={...a.parameters,docs:{...(v=a.parameters)==null?void 0:v.docs,source:{originalSource:`{ + decorators: [Story => + + ], + render: args => <> + + Inline text + , + args: { + svg: Icons.EmailIcon + } +}`,...(I=(u=a.parameters)==null?void 0:u.docs)==null?void 0:I.source}}};var S,x,z;o.parameters={...o.parameters,docs:{...(S=o.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon, + square: true + } +}`,...(z=(x=o.parameters)==null?void 0:x.docs)==null?void 0:z.source}}};var f,y,j;n.parameters={...n.parameters,docs:{...(f=n.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon, + size: 'level-3' + } +}`,...(j=(y=n.parameters)==null?void 0:y.docs)==null?void 0:j.source}}};var E,L,_;c.parameters={...c.parameters,docs:{...(E=c.parameters)==null?void 0:E.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon, + size: 'level-4' + } +}`,...(_=(L=c.parameters)==null?void 0:L.docs)==null?void 0:_.source}}};var b,h,q;t.parameters={...t.parameters,docs:{...(b=t.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon, + size: 'level-5' + } +}`,...(q=(h=t.parameters)==null?void 0:h.docs)==null?void 0:q.source}}};var H,O,T;l.parameters={...l.parameters,docs:{...(H=l.parameters)==null?void 0:H.docs,source:{originalSource:`{ + args: { + svg: Icons.EmailIcon, + size: 'level-6' + } +}`,...(T=(O=l.parameters)==null?void 0:O.docs)==null?void 0:T.source}}};const k=["Default","WithText","Square","Level3","Level4","Level5","Level6"],w=Object.freeze(Object.defineProperty({__proto__:null,Default:r,Level3:n,Level4:c,Level5:t,Level6:l,Square:o,WithText:a,__namedExportsOrder:k,default:M},Symbol.toStringTag,{value:"Module"}));export{w as I,n as L,o as S,a as W,c as a,t as b,l as c}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/IconButton-CxZOFXN2.js b/demo-npm_and_yarn/vite-6.0.3/assets/IconButton-CxZOFXN2.js new file mode 100644 index 0000000000..90172e34b2 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/IconButton-CxZOFXN2.js @@ -0,0 +1 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{c}from"./index.esm-CPc1noYl.js";import{c as d}from"./clsx-B-dksMZM.js";import{r as m}from"./index-RigO-4kf.js";import{I as p}from"./Icon-B4wlDyQ3.js";const o=m.forwardRef(({className:t,label:a,contrastColor:n,inverseColor:r,size:l="level-5",svg:s=c,...i},u)=>e.jsxs("button",{...i,ref:u,className:d("ams-icon-button",n&&"ams-icon-button--contrast-color",r&&"ams-icon-button--inverse-color",t),children:[e.jsx("span",{className:"ams-visually-hidden",children:a}),e.jsx(p,{svg:s,size:l,square:!0})]}));o.displayName="IconButton";try{o.displayName="IconButton",o.__docgenInfo={description:"",displayName:"IconButton",props:{label:{defaultValue:null,description:"The accessible text for the button. Will be announced by screen readers. Should describe the button’s action.",name:"label",required:!0,type:{name:"string"}},contrastColor:{defaultValue:null,description:"Changes the text colour for readability on a light (but not white) background.",name:"contrastColor",required:!1,type:{name:"boolean"}},inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}},size:{defaultValue:{value:"level-5"},description:"The size of the icon. Corresponds with the text levels.",name:"size",required:!1,type:{name:"enum",value:[{value:'"level-3"'},{value:'"level-4"'},{value:'"level-5"'},{value:'"level-6"'}]}},svg:{defaultValue:null,description:"The component rendering the icon’s markup.",name:"svg",required:!1,type:{name:"Function"}}}}}catch{}export{o as I}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/IconButton.docs-0saXH5rP.js b/demo-npm_and_yarn/vite-6.0.3/assets/IconButton.docs-0saXH5rP.js new file mode 100644 index 0000000000..ca8c19dcd2 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/IconButton.docs-0saXH5rP.js @@ -0,0 +1,49 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as l,aq as i,ar as a,as as c,at as r}from"./index-CF71P72j.js";import{I as d,L as h,a as u,b as p,c as m,C as x,d as j}from"./IconButton.stories-OzVf5DLr.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-CPc1noYl.js";import"./IconButton-CxZOFXN2.js";import"./clsx-B-dksMZM.js";import"./Icon-B4wlDyQ3.js";const b=` + +# Icon Button + +A button containing only an icon. + +## Guidelines + +- Use this button only if the icon is entirely clear and understandable. + Many icons are interpreted differently by different users. + Only use universally recognized icons, such as a close icon or a play icon. +- Provide a label text that describes what the button does for screen reader users. + +## Relevant WCAG requirements + +The Icon Button follows [the same requirements and guidelines as a regular button](/docs/components-buttons-button--docs). +`;/*@license CC0-1.0*/function t(o){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...s(),...o.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(l,{of:d}),` +`,e.jsx(i,{children:b}),` +`,e.jsx(a,{}),` +`,e.jsx(c,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"level-3",children:"Level 3"}),` +`,e.jsx(r,{of:h}),` +`,e.jsx(n.h3,{id:"level-4",children:"Level 4"}),` +`,e.jsx(r,{of:u}),` +`,e.jsx(n.h3,{id:"level-5",children:"Level 5"}),` +`,e.jsx(r,{of:p}),` +`,e.jsx(n.h3,{id:"level-6",children:"Level 6"}),` +`,e.jsx(r,{of:m}),` +`,e.jsx(n.h3,{id:"on-a-coloured-background",children:"On a coloured background"}),` +`,e.jsxs(n.p,{children:[`An Icon Button on a coloured background must adjust its foreground colour to provide enough contrast. +We have lighter and darker background colours, and Icon Buttons behave differently on each. +Stijlweb shows `,e.jsx(n.a,{href:"https://amsterdam.nl/stijlweb/basiselementen/kleuren/",rel:"nofollow",children:"which colours suit which backgrounds"}),`. +Although they only address headings and paragraphs, the same principle applies to Icon Buttons.`]}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsxs(n.li,{children:["Set the ",e.jsx(n.code,{children:"contrastColor"}),` prop on a yellow, orange or green background. +It will make the Icon Button black.`]}),` +`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"inverseColor"}),` prop on a purple or dark blue background. +It will make the Icon Button white.`]}),` +`,e.jsx(n.li,{children:"On the other background colours, choose either one, but do so consistently."}),` +`,e.jsx(n.li,{children:`There is no current scenario to set both properties at the same time. +For now, the 'inverse' appearance will prevail.`}),` +`]}),` +`,e.jsx(n.h4,{id:"contrast-colour",children:"Contrast colour"}),` +`,e.jsx(r,{of:x}),` +`,e.jsx(n.h4,{id:"inverse-colour",children:"Inverse colour"}),` +`,e.jsx(r,{of:j})]})}function S(o={}){const{wrapper:n}={...s(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(t,{...o})}):t(o)}export{S as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/IconButton.stories-OzVf5DLr.js b/demo-npm_and_yarn/vite-6.0.3/assets/IconButton.stories-OzVf5DLr.js new file mode 100644 index 0000000000..203f25793f --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/IconButton.stories-OzVf5DLr.js @@ -0,0 +1,28 @@ +import{I as l}from"./index.esm-CPc1noYl.js";import{I as D}from"./IconButton-CxZOFXN2.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const P={title:"Components/Buttons/Icon Button",component:D,args:{contrastColor:!1,disabled:!1,inverseColor:!1,label:"Sluiten",size:void 0},argTypes:{disabled:{description:"Prevents interaction. Avoid if possible."},size:{control:{type:"radio",labels:{undefined:"level-5"}},options:["level-3","level-4",void 0,"level-6"]},svg:{control:{type:"select"},options:Object.keys(l),mapping:l}}},e={},r={args:{size:"level-3"}},s={args:{size:"level-4"}},o={args:{size:"level-5"}},a={args:{size:"level-6"}},t={args:{contrastColor:!0}},n={args:{inverseColor:!0}};var c,i,p;e.parameters={...e.parameters,docs:{...(c=e.parameters)==null?void 0:c.docs,source:{originalSource:"{}",...(p=(i=e.parameters)==null?void 0:i.docs)==null?void 0:p.source}}};var u,d,m;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + size: 'level-3' + } +}`,...(m=(d=r.parameters)==null?void 0:d.docs)==null?void 0:m.source}}};var v,g,C;s.parameters={...s.parameters,docs:{...(v=s.parameters)==null?void 0:v.docs,source:{originalSource:`{ + args: { + size: 'level-4' + } +}`,...(C=(g=s.parameters)==null?void 0:g.docs)==null?void 0:C.source}}};var f,z,S;o.parameters={...o.parameters,docs:{...(f=o.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + size: 'level-5' + } +}`,...(S=(z=o.parameters)==null?void 0:z.docs)==null?void 0:S.source}}};var b,I,L;a.parameters={...a.parameters,docs:{...(b=a.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + size: 'level-6' + } +}`,...(L=(I=a.parameters)==null?void 0:I.docs)==null?void 0:L.source}}};var y,_,B;t.parameters={...t.parameters,docs:{...(y=t.parameters)==null?void 0:y.docs,source:{originalSource:`{ + args: { + contrastColor: true + } +}`,...(B=(_=t.parameters)==null?void 0:_.docs)==null?void 0:B.source}}};var O,j,x;n.parameters={...n.parameters,docs:{...(O=n.parameters)==null?void 0:O.docs,source:{originalSource:`{ + args: { + inverseColor: true + } +}`,...(x=(j=n.parameters)==null?void 0:j.docs)==null?void 0:x.source}}};const T=["Default","Level3","Level4","Level5","Level6","ContrastColour","InverseColour"],E=Object.freeze(Object.defineProperty({__proto__:null,ContrastColour:t,Default:e,InverseColour:n,Level3:r,Level4:s,Level5:o,Level6:a,__namedExportsOrder:T,default:P},Symbol.toStringTag,{value:"Module"}));export{t as C,E as I,r as L,s as a,o as b,a as c,n as d}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Image-dslpK47z.js b/demo-npm_and_yarn/vite-6.0.3/assets/Image-dslpK47z.js new file mode 100644 index 0000000000..1be8330b78 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Image-dslpK47z.js @@ -0,0 +1 @@ +import{j as l}from"./jsx-runtime-BjgbQsUx.js";import{c as s}from"./clsx-B-dksMZM.js";import{r as o}from"./index-RigO-4kf.js";const a=o.forwardRef(({aspectRatio:e,className:t,...r},i)=>l.jsx("img",{...r,ref:i,className:s("ams-image",e&&`ams-aspect-ratio--${e}`,t)}));a.displayName="Image";try{a.displayName="Image",a.__docgenInfo={description:"",displayName:"Image",props:{alt:{defaultValue:null,description:"A textual description of the content of the image.",name:"alt",required:!1,type:{name:"string"}},aspectRatio:{defaultValue:null,description:"The aspect ratio to display media content in.",name:"aspectRatio",required:!1,type:{name:"enum",value:[{value:'"square"'},{value:'"x-tall"'},{value:'"tall"'},{value:'"wide"'},{value:'"x-wide"'},{value:'"2x-wide"'}]}}}}}catch{}export{a as I}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Image.docs-De7JTjT2.js b/demo-npm_and_yarn/vite-6.0.3/assets/Image.docs-De7JTjT2.js new file mode 100644 index 0000000000..837ab87a52 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Image.docs-De7JTjT2.js @@ -0,0 +1,62 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as a}from"./index-3rgQkYFR.js";import{ae as s,aq as r,ar as l,as as d,at as o}from"./index-CF71P72j.js";import{I as h,R as m,L as c}from"./Image.stories-BYgQuacP.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./Image-dslpK47z.js";import"./clsx-B-dksMZM.js";const g=` + +# Image + +Displays an image. + +## Design + +Every Image should be shown in one of the [available aspect ratios](https://designsystem.amsterdam/?path=/docs/brand-design-tokens-aspect-ratio--docs). +The default is 16:9. +If the intrinsic dimensions of the source do not match an aspect ratio, the image will get cropped to cover the intended area. + +## Guidelines + +- The \`alt\` attribute is required, but can be empty. +- A description is unnecessary for decorative images; use \`alt=""\` for these. + Non-visual browsers will then hide the image from the user. + Examples are images that add little to the nearby text, and pictures that purely contribute to the design or atmosphere of the page (source: [W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/images/decorative/)). +- Do describe the content of the image if the image isn’t only decorative. + When choosing a description for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there’s an image on the page (source: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt)). +- Every image’s alternate text should be able to replace the image without altering the meaning of the page. + You should never use \`alt\` for text that could be construed as a caption or title (source: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt)). +- The alternate text will also display if the image is not (yet) loaded. + Additionally, it can be helpful for search engine optimization. +- Optionally specify multiple candidates for the image through the \`srcSet\` attribute. + For example, provide small, medium, and large variants for various screen sizes. + This prevents unnecessary downloading of large files. + Do this especially for the main image of a page, where the difference between sizes on a narrow and wide screen is most significant. + +## Relevant WCAG requirements + +- [WCAG 1.1.1](https://www.w3.org/TR/WCAG22/#non-text-content): Non-text content must have a text alternative. +- [WCAG 1.4.5](https://www.w3.org/TR/WCAG22/#images-of-text): Use text instead of images of text. +- [WCAG 1.4.9](https://www.w3.org/TR/WCAG22/#images-of-text-no-exception): Use images of text only when there is no alternative. + +## Further reading + +- [Alt Text: Not Always Needed](https://www.nngroup.com/articles/alt-text-usability/) + (Nielsen Norman Group) + “Adding alt text to every image does not automatically make webpage content easy to navigate and consume. + Screen-reader users [...] do not rely on visual information, + which means they are not interested in designers’ attempts to recreate visual experiences for them.” +- [How to Write Good Alt Text](https://www.w3.org/WAI/tutorials/images/decision-tree/) + (Web Accessibility Initiative) + Four questions help you decide whether an image needs describing and how to do so. + “This decision tree describes how to use the alt attribute of the image element in various situations.” +`;/*@license CC0-1.0*/function i(n){const t={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...a(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(s,{of:h}),` +`,e.jsx(r,{children:g}),` +`,e.jsx(l,{}),` +`,e.jsx(d,{}),` +`,e.jsx(t.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(t.h3,{id:"responsive-images",children:"Responsive images"}),` +`,e.jsxs(t.p,{children:["Provide a set of smaller and larger instances of the image (through ",e.jsx(t.code,{children:"srcSet"}),", see ",e.jsx(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset",rel:"nofollow",children:"MDN"}),`) to let the browser select the optimal source file. +A mobile device can often download a smaller file, saving the user’s bandwidth and time. +Don’t forget to still include the required `,e.jsx(t.code,{children:"src"})," attribute."]}),` +`,e.jsx(o,{of:m}),` +`,e.jsx(t.h3,{id:"lazy-loading",children:"Lazy loading"}),` +`,e.jsxs(t.p,{children:["Set the ",e.jsx(t.code,{children:"loading"})," attribute (see ",e.jsx(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading",rel:"nofollow",children:"MDN"}),") to ",e.jsx(t.code,{children:"lazy"}),` and the browser will wait to load the image until it is close to the viewport. +Consider setting this for images below the top area of the page.`]}),` +`,e.jsx(o,{of:c})]})}function D(n={}){const{wrapper:t}={...a(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(i,{...n})}):i(n)}export{D as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Image.stories-BYgQuacP.js b/demo-npm_and_yarn/vite-6.0.3/assets/Image.stories-BYgQuacP.js new file mode 100644 index 0000000000..af24b1567a --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Image.stories-BYgQuacP.js @@ -0,0 +1,33 @@ +import{I as u}from"./Image-dslpK47z.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const g={title:"Components/Media/Image",component:u},s={args:{alt:"",src:"https://picsum.photos/640/360"},argTypes:{alt:{description:"Describes the image for non-visual users."},src:{description:"The url for the image."},srcSet:{description:"A set of candidate images."}}},e={args:{alt:"",src:"https://picsum.photos/1280/720",srcSet:"https://picsum.photos/640/360 640w, https://picsum.photos/1280/720 1280w",sizes:"(max-width: 36rem) 640px, 50vw"}},t={args:{alt:"",src:"https://picsum.photos/2560/1440",loading:"lazy"}};var r,a,o;s.parameters={...s.parameters,docs:{...(r=s.parameters)==null?void 0:r.docs,source:{originalSource:`{ + args: { + alt: '', + src: 'https://picsum.photos/640/360' + }, + argTypes: { + alt: { + description: 'Describes the image for non-visual users.' + }, + src: { + description: 'The url for the image.' + }, + srcSet: { + description: 'A set of candidate images.' + } + } +}`,...(o=(a=s.parameters)==null?void 0:a.docs)==null?void 0:o.source}}};var n,p,c;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:`{ + args: { + alt: '', + src: 'https://picsum.photos/1280/720', + srcSet: 'https://picsum.photos/640/360 640w, https://picsum.photos/1280/720 1280w', + sizes: '(max-width: 36rem) 640px, 50vw' + } +}`,...(c=(p=e.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};var i,m,d;t.parameters={...t.parameters,docs:{...(i=t.parameters)==null?void 0:i.docs,source:{originalSource:`{ + args: { + alt: '', + src: 'https://picsum.photos/2560/1440', + loading: 'lazy' + } +}`,...(d=(m=t.parameters)==null?void 0:m.docs)==null?void 0:d.source}}};const h=["Default","ResponsiveImages","LazyLoading"],f=Object.freeze(Object.defineProperty({__proto__:null,Default:s,LazyLoading:t,ResponsiveImages:e,__namedExportsOrder:h,default:g},Symbol.toStringTag,{value:"Module"}));export{f as I,t as L,e as R}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/ImageSlider.docs-BOvjBmGK.js b/demo-npm_and_yarn/vite-6.0.3/assets/ImageSlider.docs-BOvjBmGK.js new file mode 100644 index 0000000000..bfb84bb33e --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/ImageSlider.docs-BOvjBmGK.js @@ -0,0 +1,37 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as i,aq as a,ar as r,as as l,at as m}from"./index-CF71P72j.js";import{I as d,R as h}from"./ImageSlider.stories-DIM73Wxj.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./IconButton-CxZOFXN2.js";import"./Icon-B4wlDyQ3.js";import"./Image-dslpK47z.js";const c=` + +# Image Slider + +Displays a small set of images in a limited space. + +## Design + +The first or selected image shows at its maximum size. +Every image displays a thumbnail at about 20% of its width. +Users can use buttons, thumbnails or swiping to navigate between the images. +The buttons re not displayed on a narrow touch device. +The images do not slide automatically. + +## How to use + +- Use this for a series of images that belong together. +- Provide at least 2 images and at most 5. +- Feature the most essential image first. +- Assume that some or many users will not navigate between the slides and only see the first image. + Display all images separately if you want each of them to receive attention. +- A full-width Image Slider should run from one edge of the Screen to the other; + position it next to a Grid, not in a Cell spanning all columns. + Smaller sliders are fine in a Grid Cell. +- Consult the [Image](/docs/components-media-image--docs) docs for guidelines on the individual images. +`;/*@license CC0-1.0*/function s(n){const t={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...o(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:d}),` +`,e.jsx(a,{children:c}),` +`,e.jsx(r,{}),` +`,e.jsx(l,{}),` +`,e.jsx(t.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(t.h3,{id:"responsive-images",children:"Responsive images"}),` +`,e.jsxs(t.p,{children:["Provide a set of smaller and larger instances for every image (through ",e.jsx(t.code,{children:"srcSet"}),", see ",e.jsx(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset",rel:"nofollow",children:"MDN"}),`) to let the browser select the optimal source file. +A mobile device can often download a smaller file, saving the user’s bandwidth and time. +Don’t forget to still include the required `,e.jsx(t.code,{children:"src"})," attribute."]}),` +`,e.jsx(m,{of:h})]})}function T(n={}){const{wrapper:t}={...o(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(s,{...n})}):s(n)}export{T as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/ImageSlider.stories-DIM73Wxj.js b/demo-npm_and_yarn/vite-6.0.3/assets/ImageSlider.stories-DIM73Wxj.js new file mode 100644 index 0000000000..648194d6e0 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/ImageSlider.stories-DIM73Wxj.js @@ -0,0 +1,29 @@ +import{j as l}from"./jsx-runtime-BjgbQsUx.js";import{c as _}from"./clsx-B-dksMZM.js";import{r as t}from"./index-RigO-4kf.js";import{l as U,e as W}from"./index.esm-CPc1noYl.js";import{I as q}from"./IconButton-CxZOFXN2.js";import{I as X}from"./Image-dslpK47z.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const Y={currentSlideId:0,isAtStart:!0,isAtEnd:!1,goToNextSlide:()=>{},goToPreviousSlide:()=>{},goToSlideId:()=>{}},T=t.createContext(Y),E=t.forwardRef(({className:o,nextLabel:c,previousLabel:d,...u},b)=>{const{isAtStart:n,isAtEnd:p,goToNextSlide:g,goToPreviousSlide:a}=t.useContext(T),x=t.useCallback(()=>a(),[a]),v=t.useCallback(()=>g(),[g]);return l.jsxs("div",{...u,className:_("ams-image-slider__controls",o),ref:b,children:[l.jsx(q,{className:"ams-image-slider__control ams-image-slider__control--previous",disabled:n,inverseColor:!0,label:d,onClick:x,svg:U}),l.jsx(q,{className:"ams-image-slider__control ams-image-slider__control--next",disabled:p,inverseColor:!0,label:c,onClick:v,svg:W})]})});E.displayName="ImageSliderControls";try{E.displayName="ImageSliderControls",E.__docgenInfo={description:"",displayName:"ImageSliderControls",props:{nextLabel:{defaultValue:null,description:"The label for the ‘next’ button",name:"nextLabel",required:!0,type:{name:"string"}},previousLabel:{defaultValue:null,description:"The label for the ‘previous’ button",name:"previousLabel",required:!0,type:{name:"string"}}}}}catch{}const L=t.forwardRef(({children:o,slideId:c,className:d,...u},b)=>{const{currentSlideId:n}=t.useContext(T),p=t.useMemo(()=>n===c,[n,c]),g=t.useMemo(()=>_("ams-image-slider__item",p&&"ams-image-slider__item--in-view",d),[p,d]);return l.jsx("div",{...u,className:g,ref:b,...!p&&{inert:""},children:o})});L.displayName="ImageSlider.Item";try{ImageSlider.Item.displayName="ImageSlider.Item",ImageSlider.Item.__docgenInfo={description:"",displayName:"ImageSlider.Item",props:{slideId:{defaultValue:null,description:"The identifier of the item. Must match the key or order of the slides (starting at 0).",name:"slideId",required:!0,type:{name:"number"}}}}}catch{}const K=t.forwardRef(({children:o,className:c,...d},u)=>l.jsx("div",{...d,className:_("ams-image-slider__scroller",c),ref:u,children:o}));K.displayName="ImageSlider.Scroller";try{ImageSlider.Scroller.displayName="ImageSlider.Scroller",ImageSlider.Scroller.__docgenInfo={description:"",displayName:"ImageSlider.Scroller",props:{}}}catch{}const F=t.forwardRef(({className:o,imageLabel:c,thumbnails:d,...u},b)=>{const{currentSlideId:n,goToNextSlide:p,goToPreviousSlide:g,goToSlideId:a}=t.useContext(T),x=t.useCallback(I=>{const m=I.currentTarget.children[n];if(I.key==="ArrowRight"){const h=m==null?void 0:m.nextElementSibling;h&&(h.focus(),p())}if(I.key==="ArrowLeft"){const h=m==null?void 0:m.previousElementSibling;h&&(h.focus(),g())}},[n,p,g]),v=t.useMemo(()=>d.map(({alt:I,aspectRatio:m,src:h},i)=>l.jsx("button",{"aria-label":`${c} ${i+1}: ${I}`,"aria-posinset":i+1,"aria-selected":n===i?"true":"false","aria-setsize":d.length,className:_("ams-image-slider__thumbnail",n===i&&"ams-image-slider__thumbnail--in-view",m&&`ams-aspect-ratio--${m}`),onClick:()=>a(i),role:"tab",style:{backgroundImage:`url(${h})`},tabIndex:n===i?0:-1},i)),[n,a,c,d]);return l.jsx("nav",{...u,className:_("ams-image-slider__thumbnails",o),onKeyDown:x,ref:b,role:"tablist",children:v})});F.displayName="ImageSlider.Thumbnails";try{ImageSlider.Thumbnails.displayName="ImageSlider.Thumbnails",ImageSlider.Thumbnails.__docgenInfo={description:"",displayName:"ImageSlider.Thumbnails",props:{imageLabel:{defaultValue:null,description:"",name:"imageLabel",required:!1,type:{name:"string"}},thumbnails:{defaultValue:null,description:"",name:"thumbnails",required:!0,type:{name:"ImageProps[]"}}}}}catch{}const G=t.forwardRef(({className:o,controls:c,imageLabel:d="Afbeelding",images:u,nextLabel:b="Volgende",previousLabel:n="Vorige",...p},g)=>{const[a,x]=t.useState(0),[v,I]=t.useState(!0),[m,h]=t.useState(!1),i=t.useRef(null),k=t.useRef(null),j=t.useCallback(e=>{var r;const s=Array.from(((r=i.current)==null?void 0:r.children)||[]);e.forEach(S=>{S.isIntersecting&&x(s.indexOf(S.target))})},[]),V=t.useMemo(()=>({root:i.current,threshold:.6}),[]),C=t.useCallback(()=>{const e=i.current;if(!e)return;const{lastElementChild:s,firstElementChild:r}=e;I(r===(e==null?void 0:e.children[a])),h(s===(e==null?void 0:e.children[a]))},[a]);t.useEffect(()=>{if(i.current){k.current=new IntersectionObserver(j,V);const e=k.current,s=Array.from(i.current.children);return s.forEach(r=>e.observe(r)),i.current.addEventListener("scrollend",A),C(),()=>{var r;s.forEach(S=>e.unobserve(S)),(r=i.current)==null||r.removeEventListener("scrollend",A)}}},[j,V,C]);const A=t.useCallback(()=>C(),[C]),f=t.useCallback(e=>{const s=i.current;!s||!e||s.scrollTo({left:s.scrollLeft+e.offsetLeft-s.scrollLeft})},[]),H=t.useCallback(e=>{var r;const s=(r=i.current)==null?void 0:r.children[e];s&&f(s)},[f]),J=t.useCallback(()=>{var r;const e=(r=i.current)==null?void 0:r.children[a],s=e==null?void 0:e.nextElementSibling;s&&f(s)},[a,f]),Q=t.useCallback(()=>{var r;const e=(r=i.current)==null?void 0:r.children[a],s=e==null?void 0:e.previousElementSibling;s&&f(s)},[a,f]);return t.useEffect(()=>{const e=()=>{var N;const s=i.current,r=(N=i.current)==null?void 0:N.children[a];if(!s||!r)return;const S=r.offsetLeft;Math.abs(s.scrollLeft-S)<1||f(r)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[a,f]),l.jsx(T.Provider,{value:{isAtStart:v,isAtEnd:m,currentSlideId:a,goToNextSlide:J,goToPreviousSlide:Q,goToSlideId:H},children:l.jsxs("div",{...p,"aria-roledescription":"carousel",className:_("ams-image-slider",c&&"ams-image-slider--controls",o),tabIndex:-1,ref:g,children:[c&&l.jsx(E,{nextLabel:b,previousLabel:n}),l.jsx(K,{"aria-live":"polite",ref:i,role:"group",tabIndex:0,children:u.map(({alt:e,aspectRatio:s,sizes:r,src:S,srcSet:N},z)=>l.jsx(L,{slideId:z,children:l.jsx(X,{alt:e,className:`ams-aspect-ratio--${s}`,sizes:r,src:S,srcSet:N})},z))}),l.jsx(F,{imageLabel:d,thumbnails:u})]})})});G.displayName="ImageSlider";const R=Object.assign(G,{Item:L});try{R.displayName="ImageSlider",R.__docgenInfo={description:"",displayName:"ImageSlider",props:{controls:{defaultValue:null,description:"Display buttons to navigate to the previous or next image.",name:"controls",required:!1,type:{name:"boolean"}},imageLabel:{defaultValue:{value:"Afbeelding"},description:"Label for the image if you need to translate the alt text.",name:"imageLabel",required:!1,type:{name:"string"}},images:{defaultValue:null,description:"The set of images to display.",name:"images",required:!0,type:{name:"ImageProps[]"}},nextLabel:{defaultValue:{value:"Volgende"},description:"The label for the ‘next’ button",name:"nextLabel",required:!1,type:{name:"string"}},previousLabel:{defaultValue:{value:"Vorige"},description:"The label for the ‘previous’ button",name:"previousLabel",required:!1,type:{name:"string"}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const Z={title:"Components/Media/Image Slider",component:R,args:{controls:!0,images:[{alt:"Bridge",aspectRatio:"x-wide",src:"https://picsum.photos/id/122/1280/720"},{alt:"Bunker",aspectRatio:"x-wide",src:"https://picsum.photos/id/101/1280/720"},{alt:"Chairs",aspectRatio:"x-wide",src:"https://picsum.photos/id/153/1280/720"},{alt:"Droplet",aspectRatio:"x-wide",src:"https://picsum.photos/id/159/1280/720"},{alt:"Dew",aspectRatio:"x-wide",src:"https://picsum.photos/id/123/1280/720"}]}},w={},y={args:{images:[{alt:"Bridge",aspectRatio:"x-wide",sizes:"(max-width: 36rem) 640px, 50vw",src:"https://picsum.photos/id/122/640/360",srcSet:"https://picsum.photos/id/122/640/360 640w, https://picsum.photos/id/122/1280/720 1280w"},{alt:"Bunker",aspectRatio:"x-wide",sizes:"(max-width: 36rem) 640px, 50vw",src:"https://picsum.photos/id/101/640/360",srcSet:"https://picsum.photos/id/101/640/360 640w, https://picsum.photos/id/101/1280/720 1280w"},{alt:"Chairs",aspectRatio:"x-wide",sizes:"(max-width: 36rem) 640px, 50vw",src:"https://picsum.photos/id/153/640/360",srcSet:"https://picsum.photos/id/153/640/360 640w, https://picsum.photos/id/153/1280/720 1280w"}]}};var P,M,B;w.parameters={...w.parameters,docs:{...(P=w.parameters)==null?void 0:P.docs,source:{originalSource:"{}",...(B=(M=w.parameters)==null?void 0:M.docs)==null?void 0:B.source}}};var D,O,$;y.parameters={...y.parameters,docs:{...(D=y.parameters)==null?void 0:D.docs,source:{originalSource:`{ + args: { + images: [{ + alt: 'Bridge', + aspectRatio: 'x-wide', + sizes: '(max-width: 36rem) 640px, 50vw', + src: 'https://picsum.photos/id/122/640/360', + srcSet: 'https://picsum.photos/id/122/640/360 640w, https://picsum.photos/id/122/1280/720 1280w' + }, { + alt: 'Bunker', + aspectRatio: 'x-wide', + sizes: '(max-width: 36rem) 640px, 50vw', + src: 'https://picsum.photos/id/101/640/360', + srcSet: 'https://picsum.photos/id/101/640/360 640w, https://picsum.photos/id/101/1280/720 1280w' + }, { + alt: 'Chairs', + aspectRatio: 'x-wide', + sizes: '(max-width: 36rem) 640px, 50vw', + src: 'https://picsum.photos/id/153/640/360', + srcSet: 'https://picsum.photos/id/153/640/360 640w, https://picsum.photos/id/153/1280/720 1280w' + }] + } +}`,...($=(O=y.parameters)==null?void 0:O.docs)==null?void 0:$.source}}};const ee=["Default","ResponsiveImages"],le=Object.freeze(Object.defineProperty({__proto__:null,Default:w,ResponsiveImages:y,__namedExportsOrder:ee,default:Z},Symbol.toStringTag,{value:"Module"}));export{le as I,y as R}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Introduction.docs-KWCylC8y.js b/demo-npm_and_yarn/vite-6.0.3/assets/Introduction.docs-KWCylC8y.js new file mode 100644 index 0000000000..a6cdbaed6f --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Introduction.docs-KWCylC8y.js @@ -0,0 +1,21 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as i}from"./index-CF71P72j.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";/*@license CC0-1.0*/function o(n){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",...s(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{title:"Pages/Introduction"}),` +`,e.jsx(t.h1,{id:"pages",children:"Pages"}),` +`,e.jsx(t.p,{children:`This section demonstrates how to compose entire pages using the Design System’s components. +It uses the latest release of the libraries, without any customizations, giving an honest representation of what can be achieved with them and how they work in the browser.`}),` +`,e.jsx(t.p,{children:"We offer a home page, an article page and a form for the upcoming Amsterdam.nl website."}),` +`,e.jsx(t.h2,{id:"documentation",children:"Documentation"}),` +`,e.jsx(t.p,{children:"The ‘Docs’ page for each page explains its design decisions and how to build it."}),` +`,e.jsx(t.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(t.p,{children:"The ‘Default’ example shows the actual page in its entirety."}),` +`,e.jsx(t.h3,{id:"flexible-content",children:"Flexible content"}),` +`,e.jsx(t.p,{children:`Reload an example to get new random texts and images. +Use the Control tab to fill in your own content and see how that looks.`}),` +`,e.jsx(t.h3,{id:"test-for-accessibility-and-see-html-output",children:"Test for accessibility and see HTML output"}),` +`,e.jsx(t.p,{children:`The ‘Accessibility’ tab offers a report of various automatic tests. +The ‘HTML’ tab displays the entire HTML-document rendered by all components on the page.`}),` +`,e.jsx(t.h3,{id:"check-how-the-page-would-look-on-various-devices",children:"Check how the page would look on various devices"}),` +`,e.jsx(t.p,{children:"The buttons in the toolbar offer various features, of which the ‘three layered square’ button replicates the appearance and behaviour of the page on a phone, tablet or desktop. Press the button with the two arrows to rotate the screen."}),` +`,e.jsx(t.h3,{id:"see-the-page-full-screen",children:"See the page full-screen"}),` +`,e.jsxs(t.p,{children:["Use the ‘Go to full screen’ (or press ",e.jsx(t.code,{children:"alt+F"}),") or ‘Open canvas in new tab’ buttons to the top right to see the entire page."]})]})}function w(n={}){const{wrapper:t}={...s(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(o,{...n})}):o(n)}export{w as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Label.docs-D1m4YozQ.js b/demo-npm_and_yarn/vite-6.0.3/assets/Label.docs-D1m4YozQ.js new file mode 100644 index 0000000000..7258461c46 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Label.docs-D1m4YozQ.js @@ -0,0 +1,26 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as r}from"./index-3rgQkYFR.js";import{ae as s,aq as a,ar as h,as as l,at as o}from"./index-CF71P72j.js";import{L as p,O as m,W as c}from"./Label.stories-C_bEBMkh.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";import"./Hint-ny2kNNgA.js";const d=` + +# Label + +Describes a form control. + +## Guidelines + +- Always associate a form element (such as an \`input\` or \`textarea\`) with a label. +- Set \`optional\` to \`true\` if the input is not required. +- Use \`hint\` to show a custom hint text. +`;/*@license CC0-1.0*/function i(n){const e={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...r(),...n.components};return t.jsxs(t.Fragment,{children:[` +`,` +`,t.jsx(s,{of:p}),` +`,t.jsx(a,{children:d}),` +`,t.jsx(h,{}),` +`,t.jsx(l,{}),` +`,t.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,t.jsx(e.h3,{id:"optional",children:"Optional"}),` +`,t.jsxs(e.p,{children:["Use the ",t.jsx(e.code,{children:"optional"})," prop to indicate that the user doesn’t need to fill in the field to submit the form."]}),` +`,t.jsx(o,{of:m}),` +`,t.jsx(e.h3,{id:"with-hint",children:"With hint"}),` +`,t.jsxs(e.p,{children:["Use the ",t.jsx(e.code,{children:"hint"})," prop to either customize the text for the optional property or provide another type of remark."]}),` +`,t.jsxs(e.p,{children:["Note: ensure the hint meets ",t.jsx(e.a,{href:"https://www.amsterdam.nl/schrijfwijzer/heldere-taal-basis-onze-huisstijl/",rel:"nofollow",children:"language level B1"}),`. +For the same reason, the default hint text in Dutch is ‘niet verplicht’, not ‘optioneel’.`]}),` +`,t.jsx(o,{of:c})]})}function O(n={}){const{wrapper:e}={...r(),...n.components};return e?t.jsx(e,{...n,children:t.jsx(i,{...n})}):i(n)}export{O as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Label.stories-C_bEBMkh.js b/demo-npm_and_yarn/vite-6.0.3/assets/Label.stories-C_bEBMkh.js new file mode 100644 index 0000000000..7537f3b8fb --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Label.stories-C_bEBMkh.js @@ -0,0 +1,12 @@ +import{j as s}from"./jsx-runtime-BjgbQsUx.js";import{c as y}from"./clsx-B-dksMZM.js";import{r as L}from"./index-RigO-4kf.js";import{H as S}from"./Hint-ny2kNNgA.js";const a=L.forwardRef(({children:o,className:f,hint:b,optional:g,..._},x)=>s.jsxs("label",{..._,ref:x,className:y("ams-label",f),children:[o," ",s.jsx(S,{hint:b,optional:g})]}));a.displayName="Label";try{a.displayName="Label",a.__docgenInfo={description:"",displayName:"Label",props:{hint:{defaultValue:null,description:"Show a custom hint text.",name:"hint",required:!1,type:{name:"string"}},optional:{defaultValue:null,description:"Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional.",name:"optional",required:!1,type:{name:"boolean"}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const j={title:"Components/Forms/Label",component:a,args:{children:"Label",hint:"",optional:!1},argTypes:{children:{description:"The text content.",table:{disable:!1}}}},e={},t={args:{optional:!0}},r={args:{hint:"not required"}};var n,i,l;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:"{}",...(l=(i=e.parameters)==null?void 0:i.docs)==null?void 0:l.source}}};var p,c,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + optional: true + } +}`,...(d=(c=t.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var m,u,h;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{ + args: { + hint: 'not required' + } +}`,...(h=(u=r.parameters)==null?void 0:u.docs)==null?void 0:h.source}}};const O=["Default","Optional","WithHint"],w=Object.freeze(Object.defineProperty({__proto__:null,Default:e,Optional:t,WithHint:r,__namedExportsOrder:O,default:j},Symbol.toStringTag,{value:"Module"}));export{w as L,t as O,r as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Link.docs-x8svId2W.js b/demo-npm_and_yarn/vite-6.0.3/assets/Link.docs-x8svId2W.js new file mode 100644 index 0000000000..591bd70b60 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Link.docs-x8svId2W.js @@ -0,0 +1,86 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as r,aq as a,ar as l,as as c,at as t}from"./index-CF71P72j.js";import{L as h,S as d,I as p,C as u,a as m}from"./Link.stories-C1bTMS0u.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const g=` + +# Link + +A link is a navigation element and can be used independently or inline with text. +It is the lightweight variant for navigation. + +## Guidelines + +Use a link in the following cases: + +- To navigate to another page within the website or application +- To navigate to another website (see [External links](#external-links)) +- To navigate to an element on the same page +- To link to emails or phone numbers (start the link with \`mailto:\` or \`tel:\`) +- Wrap 2 or more consecutive buttons and/or links in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-buttons-action-group--docs). + +A link is a navigation component. +Use a button instead of a link when an action is desired. + +### External links + +Always include \`rel="external"\` for an external link. +Avoid \`target="_blank"\`, but use \`rel="external noopener"\` if necessary. +For more information: [Links to cross-origin destinations are unsafe](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/) + +### Visited style + +Visited links indicate that a user has already opened the link. +We discourage using styles for visited links because they often make the page less clear and navigation more challenging. +The inline link does have a visited style. +It is not part of navigation elements that are frequently scanned. + +### Using links with routing libraries + +Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--docs) on how to integrate links with external routing libraries. + +## Relevant WCAG requirements + +- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum) +- [WCAG 2.4.4](https://www.w3.org/TR/WCAG21/#link-purpose-in-context) +- [WCAG 2.5.3](https://www.w3.org/TR/WCAG21/#label-in-name) +- [WCAG 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts) + +## References + +- [Links to cross-origin destinations are unsafe](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/): Avoid \`target="_blank"\` or use \`rel="external noopener"\` if necessary. +- [_A comprehensive guide to designing perfect links in UX_, on Prototypr](https://blog.prototypr.io/a-guide-to-designing-perfect-links-in-ux-414558f35730): Best practices for links. +- [_Writing Hyperlinks: Salient, Descriptive, Start with Keyword_ by Norman Nielsen Group](https://www.nngroup.com/articles/writing-links/): How to write good links? An extensive article on links. +- [_Hover, focus, active_, by Wunder](https://wunder.io/wunderpedia/accessibility/accessible-uis/hover-focus-active/): A good explanation of the states that elements like links and buttons have in browsers. +- [MDN: \`\`: The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a): Comprehensive overview of all possibilities of links in HTML. +`;/*@license CC0-1.0*/function i(o){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...s(),...o.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(r,{of:h}),` +`,e.jsx(a,{children:g}),` +`,e.jsx(l,{}),` +`,e.jsx(c,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"standalone-links",children:"Standalone links"}),` +`,e.jsx(n.p,{children:`Place standalone links directly after a piece of content. +Don’t use them in sentences or paragraphs. +They should never have an associated icon.`}),` +`,e.jsx(t,{of:d}),` +`,e.jsx(n.h3,{id:"inline-links",children:"Inline links"}),` +`,e.jsx(n.p,{children:`Use inline links within sentences or paragraphs of text. +An icon can be added to inline links, positioned after the link. +Don’t use too many inline links on the same page, as it may confuse the user.`}),` +`,e.jsx(t,{of:p}),` +`,e.jsx(n.h3,{id:"on-a-coloured-background",children:"On a coloured background"}),` +`,e.jsxs(n.p,{children:[`A link on a coloured background must adjust its text colour to provide enough contrast. +We have lighter and darker background colours, and links behave differently on each. +Stijlweb shows `,e.jsx(n.a,{href:"https://amsterdam.nl/stijlweb/basiselementen/kleuren/",rel:"nofollow",children:"which colours suit which backgrounds"}),`. +Although they only address headings and paragraphs, the same principle applies to links.`]}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsxs(n.li,{children:["Set the ",e.jsx(n.code,{children:"contrastColor"}),` prop on a yellow, orange or green background. +It will make the link black.`]}),` +`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"inverseColor"}),` prop on a purple or dark blue background. +It will make the link white.`]}),` +`,e.jsx(n.li,{children:"On the other background colours, choose either one, but do so consistently."}),` +`,e.jsx(n.li,{children:`There is no current scenario to set both properties at the same time. +For now, the 'inverse' appearance will prevail.`}),` +`]}),` +`,e.jsx(n.h4,{id:"contrast-colour",children:"Contrast colour"}),` +`,e.jsx(t,{of:u}),` +`,e.jsx(n.h4,{id:"inverse-colour",children:"Inverse colour"}),` +`,e.jsx(t,{of:m})]})}function S(o={}){const{wrapper:n}={...s(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(i,{...o})}):i(o)}export{S as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Link.stories-C1bTMS0u.js b/demo-npm_and_yarn/vite-6.0.3/assets/Link.stories-C1bTMS0u.js new file mode 100644 index 0000000000..3c9f8f3739 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Link.stories-C1bTMS0u.js @@ -0,0 +1,17 @@ +import{j as l}from"./jsx-runtime-BjgbQsUx.js";import{P as N}from"./index.esm-kzH9sPjb.js";import{c as P}from"./clsx-B-dksMZM.js";import{r as T}from"./index-RigO-4kf.js";const t=T.forwardRef(({children:s,className:S,contrastColor:j,inverseColor:L,variant:i="standalone",...q},I)=>l.jsx("a",{...q,ref:I,className:P("ams-link",j&&"ams-link--contrast-color",L&&"ams-link--inverse-color",i==="inline"&&"ams-link--inline",i==="standalone"&&"ams-link--standalone",S),children:s}));t.displayName="Link";try{t.displayName="Link",t.__docgenInfo={description:"",displayName:"Link",props:{contrastColor:{defaultValue:null,description:"Changes the text colour for readability on a light background.",name:"contrastColor",required:!1,type:{name:"boolean"}},inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}},variant:{defaultValue:{value:"standalone"},description:"Whether the link is inline or stands alone.",name:"variant",required:!1,type:{name:"enum",value:[{value:'"inline"'},{value:'"standalone"'}]}}}}}catch{}const w={title:"Components/Navigation/Link",component:t,args:{children:"Link label",contrastColor:!1,href:"#",inverseColor:!1},argTypes:{children:{description:"The link text.",table:{disable:!1}},href:{description:"The url for the link.",name:"href",type:{name:"string",required:!1}}}},e={},r={},a={args:{children:"typograaf",variant:"inline"},decorators:[s=>l.jsxs(N,{children:["Jouw ",l.jsx(s,{})," biedt mij zulke exquise schreven!"]})]},o={args:{contrastColor:!0}},n={args:{inverseColor:!0}};var c,d,u;e.parameters={...e.parameters,docs:{...(c=e.parameters)==null?void 0:c.docs,source:{originalSource:"{}",...(u=(d=e.parameters)==null?void 0:d.docs)==null?void 0:u.source}}};var p,m,f;r.parameters={...r.parameters,docs:{...(p=r.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(f=(m=r.parameters)==null?void 0:m.docs)==null?void 0:f.source}}};var g,h,k;a.parameters={...a.parameters,docs:{...(g=a.parameters)==null?void 0:g.docs,source:{originalSource:`{ + args: { + children: 'typograaf', + variant: 'inline' + }, + decorators: [Story => + Jouw biedt mij zulke exquise schreven! + ] +}`,...(k=(h=a.parameters)==null?void 0:h.docs)==null?void 0:k.source}}};var C,v,y;o.parameters={...o.parameters,docs:{...(C=o.parameters)==null?void 0:C.docs,source:{originalSource:`{ + args: { + contrastColor: true + } +}`,...(y=(v=o.parameters)==null?void 0:v.docs)==null?void 0:y.source}}};var b,x,_;n.parameters={...n.parameters,docs:{...(b=n.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + inverseColor: true + } +}`,...(_=(x=n.parameters)==null?void 0:x.docs)==null?void 0:_.source}}};const z=["Default","Standalone","Inline","ContrastColour","InverseColour"],J=Object.freeze(Object.defineProperty({__proto__:null,ContrastColour:o,Default:e,Inline:a,InverseColour:n,Standalone:r,__namedExportsOrder:z,default:w},Symbol.toStringTag,{value:"Module"}));export{o as C,a as I,J as L,r as S,n as a}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/LinkList-JvNP1NPY.js b/demo-npm_and_yarn/vite-6.0.3/assets/LinkList-JvNP1NPY.js new file mode 100644 index 0000000000..04398352f6 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/LinkList-JvNP1NPY.js @@ -0,0 +1 @@ +import{j as i}from"./jsx-runtime-BjgbQsUx.js";import{c as l}from"./clsx-B-dksMZM.js";import{r}from"./index-RigO-4kf.js";import{e as k}from"./index.esm-CPc1noYl.js";import{I as L}from"./Icon-B4wlDyQ3.js";const f={small:"level-6",medium:"level-5",large:"level-4"},c=r.forwardRef(({children:e,className:n,icon:t,contrastColor:s,inverseColor:d,size:a,...p},u)=>i.jsx("li",{children:i.jsxs("a",{className:l("ams-link-list__link",s&&"ams-link-list__link--contrast-color",d&&"ams-link-list__link--inverse-color",a&&`ams-link-list__link--${a}`,n),ref:u,...p,children:[i.jsx(L,{svg:t??k,size:f[a??"medium"]}),e]})}));c.displayName="LinkList.Link";try{LinkList.Link.displayName="LinkList.Link",LinkList.Link.__docgenInfo={description:"One link with a Link List.",displayName:"LinkList.Link",props:{icon:{defaultValue:null,description:"An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list.",name:"icon",required:!1,type:{name:"Function"}},contrastColor:{defaultValue:null,description:"Changes the text colour for readability on a light background.",name:"contrastColor",required:!1,type:{name:"boolean"}},inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}},size:{defaultValue:null,description:"The size of the text. Use the same size for all items in the list.",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'}]}}}}}catch{}const m=r.forwardRef(({children:e,className:n,...t},s)=>i.jsx("ul",{ref:s,className:l("ams-link-list",n),...t,children:e}));m.displayName="LinkList";const o=Object.assign(m,{Link:c});try{o.displayName="LinkList",o.__docgenInfo={description:"",displayName:"LinkList",props:{}}}catch{}export{o as L}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/LinkList.docs-5aoPSQIM.js b/demo-npm_and_yarn/vite-6.0.3/assets/LinkList.docs-5aoPSQIM.js new file mode 100644 index 0000000000..8562d3f467 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/LinkList.docs-5aoPSQIM.js @@ -0,0 +1,55 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as r}from"./index-3rgQkYFR.js";import{ae as l,aq as a,ar as c,at as s,as as h}from"./index-CF71P72j.js";import{L as d,C as m,S as p,a as t,b as u,I as x}from"./LinkList.stories-CzcAd1_a.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-CPc1noYl.js";import"./exampleContent-hIIPvEhU.js";import"./LinkList-JvNP1NPY.js";import"./clsx-B-dksMZM.js";import"./Icon-B4wlDyQ3.js";const j=` + +# Link List + +A collection of related links. + +## Design + +Every list item starts with a chevron. +It emphasizes the list structure and thematic coherence. +The chevron is part of the link. +Therefore, it is blue and clickable. + +## Guidelines + +- Use a Link List to present multiple links within a theme. +- For additional guidelines, refer to the [Link](/docs/components-navigation-link--docs) component. +`;/*@license CC0-1.0*/function i(o){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",ul:"ul",...r(),...o.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(l,{of:d}),` +`,e.jsx(a,{children:j}),` +`,e.jsx(c,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"custom-icons",children:"Custom icons"}),` +`,e.jsx(n.p,{children:`Replace the list icon with a more meaningful one to help understand a link more quickly or easily. +Avoid using both semantic and list icons in the same list.`}),` +`,e.jsx(s,{of:m}),` +`,e.jsx(n.h3,{id:"small-text",children:"Small text"}),` +`,e.jsxs(n.p,{children:["In the ",e.jsx(n.a,{href:"/docs/components-containers-footer--docs",children:"Footer"}),`, we use small text, also for lists. +Specify this for each item in the list.`]}),` +`,e.jsx(s,{of:p}),` +`,e.jsx(n.h3,{id:"link",children:"Link"}),` +`,e.jsxs(n.p,{children:[`This example of a single link allows using the controls below. +The Link List Link renders both the `,e.jsx(n.code,{children:"
  • "})," and ",e.jsx(n.code,{children:""}),` elements. +Any attributes and the `,e.jsx(n.code,{children:"ref"})," are passed on to the ",e.jsx(n.code,{children:""})," element."]}),` +`,e.jsx(s,{of:t}),` +`,e.jsx(h,{of:t}),` +`,e.jsx(n.h3,{id:"on-a-coloured-background",children:"On a coloured background"}),` +`,e.jsxs(n.p,{children:[`A link on a coloured background must adjust its text colour to provide enough contrast. +We have lighter and darker background colours, and links behave differently on each. +Stijlweb shows `,e.jsx(n.a,{href:"https://amsterdam.nl/stijlweb/basiselementen/kleuren/",rel:"nofollow",children:"which colours suit which backgrounds"}),`. +Although they only address headings and paragraphs, the same principle applies to links.`]}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsxs(n.li,{children:["Set the ",e.jsx(n.code,{children:"contrastColor"}),` prop on a yellow, orange or green background. +It will make the link black.`]}),` +`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"inverseColor"}),` prop on a purple or dark blue background. +It will make the link white.`]}),` +`,e.jsx(n.li,{children:"On the other background colours, choose either one, but do so consistently."}),` +`,e.jsx(n.li,{children:`There is no current scenario to set both properties at the same time. +For now, the 'inverse' appearance will prevail.`}),` +`]}),` +`,e.jsx(n.h4,{id:"contrast-colour",children:"Contrast colour"}),` +`,e.jsx(s,{of:u}),` +`,e.jsx(n.h4,{id:"inverse-colour",children:"Inverse colour"}),` +`,e.jsx(s,{of:x})]})}function X(o={}){const{wrapper:n}={...r(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(i,{...o})}):i(o)}export{X as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/LinkList.stories-CzcAd1_a.js b/demo-npm_and_yarn/vite-6.0.3/assets/LinkList.stories-CzcAd1_a.js new file mode 100644 index 0000000000..e51421fbd5 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/LinkList.stories-CzcAd1_a.js @@ -0,0 +1,39 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{e as _,I as d,f as P,g as B,h as D}from"./index.esm-CPc1noYl.js";import{a as E}from"./exampleContent-hIIPvEhU.js";import{L as e}from"./LinkList-JvNP1NPY.js";const O=E(),H={title:"Components/Navigation/Link List",component:e};e.Link;const L={args:{children:O.map((r,m)=>n.jsx(e.Link,{href:"#",children:r},m))}},l={args:{children:O[0],contrastColor:!1,href:"#",icon:_,inverseColor:!1},argTypes:{icon:{control:{type:"select",labels:{undefined:"none"}},options:[void 0,...Object.keys(d)],mapping:d},size:{control:{type:"radio",labels:{undefined:"medium"}},options:["small",void 0,"large"]}},decorators:[r=>n.jsx(e,{children:n.jsx(r,{})})],render:({children:r,...m})=>n.jsx(e.Link,{...m,children:r})},s={...L},o={...L,args:{children:[n.jsx(e.Link,{href:"#",icon:P,children:"Contactformulier"},"form"),n.jsx(e.Link,{href:"#",icon:B,children:"Adressen en openingstijden"},"address"),n.jsx(e.Link,{href:"#",icon:D,children:"Bel 14 020"},"phone")]}},t={...L,args:{children:[n.jsx(e.Link,{href:"#",size:"small",children:"Over deze website"},"about"),n.jsx(e.Link,{href:"#",size:"small",children:"Abonneer u op de nieuwsbrief"},"newsletter"),n.jsx(e.Link,{href:"#",size:"small",children:"Werken bij de gemeente Amsterdam"},"jobs")]}},i={...l},a={...l,args:{...l.args,contrastColor:!0}},c={...l,args:{...l.args,inverseColor:!0}};var p,k,u;s.parameters={...s.parameters,docs:{...(p=s.parameters)==null?void 0:p.docs,source:{originalSource:`{ + ...StoryTemplate +}`,...(u=(k=s.parameters)==null?void 0:k.docs)==null?void 0:u.source}}};var g,h,f;o.parameters={...o.parameters,docs:{...(g=o.parameters)==null?void 0:g.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + children: [ + Contactformulier + , + Adressen en openingstijden + , + Bel 14 020 + ] + } +}`,...(f=(h=o.parameters)==null?void 0:h.docs)==null?void 0:f.source}}};var S,y,j;t.parameters={...t.parameters,docs:{...(S=t.parameters)==null?void 0:S.docs,source:{originalSource:`{ + ...StoryTemplate, + args: { + children: [ + Over deze website + , + Abonneer u op de nieuwsbrief + , + Werken bij de gemeente Amsterdam + ] + } +}`,...(j=(y=t.parameters)==null?void 0:y.docs)==null?void 0:j.source}}};var C,b,x;i.parameters={...i.parameters,docs:{...(C=i.parameters)==null?void 0:C.docs,source:{originalSource:`{ + ...LinkStoryTemplate +}`,...(x=(b=i.parameters)==null?void 0:b.docs)==null?void 0:x.source}}};var v,T,I;a.parameters={...a.parameters,docs:{...(v=a.parameters)==null?void 0:v.docs,source:{originalSource:`{ + ...LinkStoryTemplate, + args: { + ...LinkStoryTemplate.args, + contrastColor: true + } +}`,...(I=(T=a.parameters)==null?void 0:T.docs)==null?void 0:I.source}}};var z,w,A;c.parameters={...c.parameters,docs:{...(z=c.parameters)==null?void 0:z.docs,source:{originalSource:`{ + ...LinkStoryTemplate, + args: { + ...LinkStoryTemplate.args, + inverseColor: true + } +}`,...(A=(w=c.parameters)==null?void 0:w.docs)==null?void 0:A.source}}};const R=["Default","CustomIcons","SmallText","Link","ContrastColour","InverseColour"],F=Object.freeze(Object.defineProperty({__proto__:null,ContrastColour:a,CustomIcons:o,Default:s,InverseColour:c,Link:i,SmallText:t,__namedExportsOrder:R,default:H},Symbol.toStringTag,{value:"Module"}));export{o as C,c as I,F as L,t as S,i as a,a as b}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Logo-BazI2ckd.js b/demo-npm_and_yarn/vite-6.0.3/assets/Logo-BazI2ckd.js new file mode 100644 index 0000000000..c4605cb2e0 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Logo-BazI2ckd.js @@ -0,0 +1 @@ +import{j as c}from"./jsx-runtime-BjgbQsUx.js";import{c as t}from"./clsx-B-dksMZM.js";import{r as l}from"./index-RigO-4kf.js";const s=l.forwardRef((h,v)=>c.jsxs("svg",{className:"ams-logo","aria-hidden":"true",focusable:"false",ref:v,viewBox:"0 0 115 40",xmlns:"http://www.w3.org/2000/svg",...h,children:[c.jsx("path",{className:"ams-logo__text-primary",fill:"#EC0000",d:"M16.435 8.581c0-3.752 2.63-6.4 6.344-6.4 1.886 0 3.466.61 4.59 1.829L25.731 5.57c-.704-.78-1.714-1.238-2.915-1.238-2.248 0-3.81 1.752-3.81 4.248 0 2.496 1.524 4.324 3.715 4.324 2 0 3.391-1.143 3.391-2.8v-.323h-2.99V7.705h5.505V9.63c0 3.162-2.457 5.39-5.981 5.39s-6.21-2.666-6.21-6.438ZM30.225 10.086c0-2.915 1.962-4.934 4.762-4.934s4.743 2 4.743 4.876c0 .229-.037.59-.076.839h-7.048C32.778 12.143 33.863 13 35.254 13c1.029 0 1.924-.381 2.514-1.067l1.428 1.391c-.857 1.106-2.343 1.696-4.057 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.743c-.152-1.238-1.105-2.077-2.38-2.077-1.276 0-2.229.839-2.363 2.077ZM43.902 5.382v1.275h.038c.476-.97 1.314-1.505 2.4-1.505 1.219 0 2.132.534 2.704 1.6.571-1.028 1.62-1.6 2.952-1.6 2.324 0 3.448 1.296 3.448 3.943v5.696h-2.362V9.495c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.696.82-1.696 2.362v5.22h-2.362V9.495c0-1.562-.514-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22H41.69V5.38h2.212ZM57.312 10.086c0-2.915 1.963-4.934 4.762-4.934 2.8 0 4.744 2 4.744 4.876 0 .229-.038.59-.077.839h-7.048C59.865 12.143 60.95 13 62.341 13c1.03 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.106-2.344 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.743c-.152-1.238-1.105-2.077-2.38-2.077-1.276 0-2.229.839-2.363 2.077ZM68.189 10.086c0-2.915 1.962-4.934 4.762-4.934s4.743 2 4.743 4.876c0 .229-.038.59-.077.839H70.57C70.74 12.143 71.827 13 73.218 13c1.028 0 1.923-.381 2.513-1.067l1.429 1.391c-.857 1.106-2.343 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.002Zm2.38-.952h4.744c-.153-1.238-1.105-2.077-2.381-2.077-1.276 0-2.228.839-2.362 2.077ZM81.883 5.382v1.275h.038c.438-.933 1.39-1.505 2.495-1.505 2.362 0 3.582 1.353 3.582 3.943v5.696h-2.363V9.552c0-1.6-.571-2.343-1.772-2.343-1.2 0-1.847.838-1.847 2.4v5.18h-2.362V5.382h2.23ZM91.026 11.42V7.342h-1.619V5.381h.858c.78 0 1.085-.305 1.085-1.086V2.83h2.019v2.553h2.285v1.962H93.37v4.077c0 .915.476 1.428 1.352 1.428.267 0 .59-.037.78-.095v1.981c-.285.077-.819.133-1.238.133-2.133 0-3.238-1.18-3.238-3.447l.001-.002ZM96.817 10.086c0-2.915 1.963-4.934 4.762-4.934 2.8 0 4.744 2 4.744 4.876 0 .229-.038.59-.077.839h-7.048c.172 1.276 1.257 2.133 2.648 2.133 1.029 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.106-2.344 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.744c-.153-1.238-1.106-2.077-2.382-2.077-1.275 0-2.228.839-2.362 2.077ZM23.73 25.267l4.952 12.381h-2.647l-1.03-2.724H19.5l-1.028 2.724h-2.553l4.953-12.38h2.858Zm-3.486 7.6h4l-1.982-5.219h-.037l-1.981 5.22ZM32.454 28.24v1.275h.038c.476-.97 1.315-1.505 2.4-1.505 1.22 0 2.133.534 2.704 1.6.572-1.028 1.62-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.514-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211ZM48.34 33.706c-1.275-.381-2.513-1.067-2.513-2.78 0-1.715 1.447-2.916 3.6-2.916 1.448 0 2.572.514 3.2 1.466l-1.351 1.353c-.477-.59-1.124-.915-1.829-.915-.8 0-1.296.362-1.296.933 0 .762.8.895 1.963 1.257 1.276.381 2.514 1.067 2.514 2.781 0 1.715-1.524 2.99-3.772 2.99-1.466 0-2.648-.514-3.334-1.486l1.353-1.352c.513.609 1.2.934 1.962.934.915 0 1.466-.381 1.466-1.01 0-.762-.8-.895-1.962-1.258v.003ZM55.122 34.277v-4.076h-1.62v-1.963h.858c.78 0 1.085-.304 1.085-1.085v-1.466h2.019v2.552h2.286v1.963h-2.286v4.076c0 .915.476 1.43 1.352 1.43.267 0 .59-.038.78-.096v1.981c-.285.077-.819.133-1.237.133-2.133 0-3.238-1.18-3.238-3.447v-.002ZM60.911 32.944c0-2.915 1.963-4.934 4.763-4.934s4.743 2 4.743 4.876c0 .228-.038.59-.077.839h-7.048c.172 1.276 1.257 2.133 2.648 2.133 1.03 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.105-2.343 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.744c-.153-1.239-1.106-2.077-2.381-2.077-1.276 0-2.229.838-2.363 2.077ZM74.607 28.24V29.8h.038c.457-1.066 1.296-1.638 2.4-1.638.285 0 .685.038.838.095v2.248c-.267-.076-.78-.132-1.162-.132-1.2 0-1.98.914-1.98 2.323v4.953h-2.363v-9.41h2.23ZM78.551 32.983c0-2.915 1.924-4.972 4.648-4.972 1.257 0 2.286.553 2.934 1.562h.037V23.84h2.362v13.81h-2.228v-1.467h-.037c-.61 1.067-1.752 1.696-3.067 1.696-2.724 0-4.648-2.038-4.648-4.895l-.001-.001Zm7.62-.038c0-1.695-1.048-2.82-2.591-2.82-1.543 0-2.61 1.143-2.61 2.82 0 1.677 1.049 2.82 2.61 2.82s2.59-1.124 2.59-2.82ZM90.34 34.963c0-1.81 1.506-2.895 4.02-2.915l1.828-.019v-.304c0-1.106-.704-1.677-1.981-1.677-.838 0-1.581.323-2.095.915l-1.429-1.391c.82-1.01 2.133-1.562 3.752-1.562 2.514 0 4.114 1.371 4.114 3.562v3.733c0 .343.153.495.534.495h.172v1.847H98.15c-.895 0-1.506-.418-1.696-1.105h-.038c-.59.857-1.561 1.333-2.743 1.333-1.981 0-3.333-1.18-3.333-2.914v.002Zm5.848-.82v-.534l-1.561.02c-1.238.018-1.905.457-1.905 1.275 0 .724.571 1.238 1.37 1.238 1.239 0 2.096-.82 2.096-2v.001ZM103.312 28.24v1.275h.038c.476-.97 1.315-1.505 2.4-1.505 1.219 0 2.133.534 2.704 1.6.572-1.028 1.619-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.513-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211Z"}),c.jsx("path",{className:"ams-logo__emblem",fill:"#EC0000",d:"m0 37.648 3.527-3.527L0 30.593l2.352-2.351 3.527 3.527 3.528-3.527 2.351 2.351-3.527 3.528 3.527 3.527L9.407 40l-3.528-3.527L2.352 40 0 37.648ZM0 23.54l3.527-3.528L0 16.485l2.352-2.352 3.527 3.528 3.528-3.528 2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.527 3.527L0 23.54ZM0 9.407l3.527-3.528L0 2.352 2.352 0l3.527 3.527L9.407 0l2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.526 3.527L0 9.407Z"})]}));s.displayName="LogoAmsterdam";try{s.displayName="LogoAmsterdam",s.__docgenInfo={description:"",displayName:"LogoAmsterdam",props:{}}}catch{}const a=l.forwardRef((h,v)=>c.jsxs("svg",{className:"ams-logo","aria-hidden":"true",focusable:"false",ref:v,viewBox:"0 0 115 40",xmlns:"http://www.w3.org/2000/svg",...h,children:[c.jsx("path",{className:"ams-logo__emblem",fill:"#EC0000",d:"m0 37.648 3.527-3.527L0 30.593l2.352-2.351 3.527 3.527 3.528-3.527 2.351 2.351-3.527 3.528 3.527 3.527L9.407 40l-3.528-3.527L2.352 40 0 37.648ZM0 23.54l3.527-3.528L0 16.485l2.352-2.352 3.527 3.528 3.528-3.528 2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.527 3.527L0 23.54ZM0 9.407l3.527-3.528L0 2.352 2.352 0l3.527 3.527L9.407 0l2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.526 3.527L0 9.407Z"}),c.jsx("path",{className:"ams-logo__text-primary",fill:"#EC0000",d:"m23.73 25.267 4.952 12.381h-2.647l-1.03-2.724H19.5l-1.028 2.724h-2.553l4.953-12.381h2.858Zm-3.486 7.6h4l-1.982-5.219h-.037l-1.981 5.22ZM32.454 28.24v1.275h.038c.476-.971 1.315-1.505 2.4-1.505 1.22 0 2.133.534 2.704 1.6.572-1.028 1.62-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.514-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211ZM48.34 33.706c-1.275-.381-2.513-1.067-2.513-2.78 0-1.715 1.447-2.916 3.6-2.916 1.448 0 2.572.514 3.2 1.466l-1.351 1.353c-.477-.59-1.124-.915-1.829-.915-.8 0-1.296.362-1.296.933 0 .762.8.895 1.963 1.257 1.276.381 2.514 1.067 2.514 2.781 0 1.715-1.524 2.99-3.772 2.99-1.466 0-2.648-.514-3.334-1.486l1.353-1.352c.513.609 1.2.934 1.962.934.915 0 1.466-.381 1.466-1.01 0-.762-.8-.895-1.962-1.258v.003ZM55.122 34.277v-4.076h-1.62v-1.963h.858c.78 0 1.085-.304 1.085-1.085v-1.466h2.019v2.552h2.286v1.963h-2.286v4.076c0 .915.476 1.43 1.352 1.43.267 0 .59-.038.78-.096v1.981c-.285.076-.819.133-1.237.133-2.133 0-3.238-1.18-3.238-3.447v-.002ZM60.911 32.944c0-2.915 1.963-4.934 4.763-4.934s4.743 2 4.743 4.876c0 .228-.038.59-.077.839h-7.048c.172 1.275 1.257 2.133 2.648 2.133 1.03 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.105-2.343 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.953h4.744c-.153-1.238-1.106-2.076-2.381-2.076-1.276 0-2.229.838-2.363 2.076ZM74.607 28.24V29.8h.038c.457-1.066 1.296-1.638 2.4-1.638.285 0 .685.038.838.095v2.248c-.267-.076-.78-.132-1.162-.132-1.2 0-1.98.914-1.98 2.323v4.953h-2.363v-9.41h2.23ZM78.551 32.983c0-2.915 1.924-4.972 4.648-4.972 1.257 0 2.286.553 2.934 1.562h.037V23.84h2.362v13.81h-2.228v-1.467h-.037c-.61 1.067-1.752 1.696-3.067 1.696-2.724 0-4.648-2.038-4.648-4.895l-.001-.001Zm7.62-.038c0-1.695-1.048-2.82-2.591-2.82-1.543 0-2.61 1.143-2.61 2.82 0 1.677 1.049 2.82 2.61 2.82s2.59-1.124 2.59-2.82ZM90.34 34.963c0-1.81 1.506-2.895 4.02-2.915l1.828-.019v-.304c0-1.106-.704-1.677-1.981-1.677-.838 0-1.581.323-2.095.915l-1.429-1.391c.82-1.01 2.133-1.562 3.752-1.562 2.514 0 4.114 1.371 4.114 3.562v3.733c0 .343.153.495.534.495h.172v1.847H98.15c-.895 0-1.506-.418-1.696-1.105h-.038c-.59.857-1.561 1.333-2.743 1.333-1.981 0-3.333-1.18-3.333-2.915v.003Zm5.848-.82v-.534l-1.561.02c-1.238.018-1.905.457-1.905 1.275 0 .724.571 1.238 1.37 1.238 1.239 0 2.096-.82 2.096-2v.001ZM103.312 28.24v1.275h.038c.476-.971 1.315-1.505 2.4-1.505 1.219 0 2.133.534 2.704 1.6.572-1.028 1.619-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.513-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211Z"}),c.jsx("path",{className:"ams-logo__text-secondary",fill:"#000",d:"M16.436 8.581c0-3.752 2.629-6.4 6.343-6.4 1.886 0 3.466.61 4.59 1.829L25.732 5.57c-.705-.78-1.715-1.238-2.915-1.238-2.248 0-3.81 1.752-3.81 4.248 0 2.496 1.524 4.324 3.714 4.324 2 0 3.392-1.143 3.392-2.8v-.323h-2.99V7.705h5.505V9.63c0 3.162-2.458 5.39-5.982 5.39s-6.21-2.666-6.21-6.438ZM30.34 8.581c0-3.752 2.63-6.4 6.344-6.4 1.886 0 3.467.61 4.59 1.829L39.638 5.57c-.705-.78-1.715-1.238-2.915-1.238-2.248 0-3.81 1.752-3.81 4.248 0 2.496 1.524 4.324 3.715 4.324 2 0 3.39-1.143 3.39-2.8v-.323h-2.99V7.705h5.506V9.63c0 3.162-2.458 5.39-5.982 5.39s-6.21-2.666-6.21-6.438ZM44.836 2.41h4.61c3.809 0 6.343 2.476 6.343 6.19 0 3.714-2.59 6.19-6.363 6.19h-4.59V2.41Zm4.419 10.229c2.38 0 3.942-1.543 3.942-4.02 0-2.475-1.524-4.057-3.923-4.057H47.35v8.077h1.905Z"})]}));a.displayName="LogoGgdAmsterdam";try{a.displayName="LogoGgdAmsterdam",a.__docgenInfo={description:"",displayName:"LogoGgdAmsterdam",props:{}}}catch{}const e=l.forwardRef((h,v)=>c.jsxs("svg",{className:"ams-logo","aria-hidden":"true",focusable:"false",ref:v,viewBox:"0 0 121 42",fill:"none",xmlns:"http://www.w3.org/2000/svg",...h,children:[c.jsx("path",{className:"ams-logo__text-secondary",d:"M18.085 30.527H20.669L23.051 35.26H23.08L25.46 30.527H28.045V39.964H26.187V32.69H26.157L23.82 37.336H22.31L19.973 32.69H19.943V39.964H18.085V30.527ZM29.976 37.133V32.792H31.776V36.799C31.776 38.004 32.197 38.57 33.068 38.57C33.954 38.57 34.448 37.917 34.448 36.755V32.792H36.248V39.964H34.55V38.991H34.521C34.173 39.688 33.418 40.138 32.605 40.138C30.848 40.138 29.976 39.137 29.976 37.133ZM39.63 36.959C38.658 36.669 37.714 36.146 37.714 34.839C37.714 33.518 38.818 32.618 40.458 32.618C41.562 32.618 42.418 33.009 42.898 33.735L41.867 34.766C41.504 34.316 41.01 34.069 40.473 34.069C39.863 34.069 39.486 34.345 39.486 34.781C39.486 35.361 40.096 35.463 40.981 35.739C41.954 36.029 42.898 36.552 42.898 37.859C42.898 39.209 41.736 40.139 40.023 40.139C38.905 40.139 38.005 39.746 37.482 39.006L38.512 37.975C38.6925 38.1976 38.9205 38.3771 39.1794 38.5001C39.4383 38.6231 39.7214 38.6866 40.008 38.686C40.705 38.686 41.126 38.396 41.126 37.917C41.126 37.337 40.515 37.235 39.63 36.959ZM45.7 35.652H49.315C49.199 34.708 48.473 34.069 47.5 34.069C46.527 34.069 45.801 34.709 45.7 35.652ZM43.885 36.378C43.885 34.157 45.38 32.618 47.515 32.618C49.649 32.618 51.13 34.142 51.13 36.334C51.13 36.509 51.1 36.784 51.072 36.974H45.699C45.83 37.946 46.658 38.599 47.718 38.599C48.502 38.599 49.184 38.309 49.634 37.786L50.724 38.846C50.07 39.688 48.937 40.138 47.631 40.138C45.424 40.138 43.885 38.585 43.885 36.378ZM52.523 37.133V32.792H54.323V36.799C54.323 38.004 54.745 38.57 55.616 38.57C56.502 38.57 56.996 37.917 56.996 36.755V32.792H58.796V39.964H57.096V38.991H57.068C56.72 39.688 55.964 40.138 55.151 40.138C53.395 40.138 52.523 39.137 52.523 37.133ZM60.741 32.792H62.425V33.765H62.455C62.817 33.024 63.456 32.618 64.284 32.618C65.213 32.618 65.91 33.024 66.345 33.838C66.781 33.053 67.58 32.618 68.595 32.618C70.367 32.618 71.224 33.605 71.224 35.623V39.964H69.424V35.928C69.424 34.752 69.017 34.186 68.174 34.186C67.333 34.186 66.883 34.81 66.883 35.986V39.964H65.083V35.928C65.083 34.738 64.69 34.186 63.833 34.186C63.006 34.186 62.541 34.824 62.541 35.986V39.964H60.741V32.792ZM84.683 39.964L82.853 32.908H82.824L80.994 39.964H78.774L76 30.527H78.033L79.891 37.67H79.921L81.793 30.527H83.884L85.757 37.67H85.787L87.645 30.527H89.677L86.904 39.964H84.683ZM91.71 35.652H95.325C95.209 34.708 94.483 34.069 93.51 34.069C92.537 34.069 91.812 34.709 91.71 35.652ZM89.895 36.378C89.895 34.157 91.39 32.618 93.525 32.618C95.659 32.618 97.14 34.142 97.14 36.334C97.14 36.509 97.11 36.784 97.082 36.974H91.71C91.84 37.946 92.668 38.599 93.728 38.599C94.512 38.599 95.194 38.309 95.645 37.786L96.733 38.846C96.08 39.688 94.948 40.138 93.641 40.138C91.434 40.138 89.895 38.585 89.895 36.378ZM100 35.652H103.616C103.499 34.708 102.773 34.069 101.801 34.069C100.828 34.069 100.1 34.709 100 35.652ZM98.185 36.378C98.185 34.157 99.681 32.618 101.815 32.618C103.949 32.618 105.43 34.142 105.43 36.334C105.43 36.509 105.401 36.784 105.372 36.974H100C100.13 37.946 100.958 38.599 102.018 38.599C102.802 38.599 103.485 38.309 103.935 37.786L105.024 38.846C104.37 39.688 103.238 40.138 101.931 40.138C99.724 40.138 98.185 38.585 98.185 36.378ZM108.363 36.959C107.39 36.669 106.446 36.146 106.446 34.839C106.446 33.518 107.55 32.618 109.191 32.618C110.294 32.618 111.151 33.009 111.63 33.735L110.599 34.766C110.236 34.316 109.742 34.069 109.205 34.069C108.595 34.069 108.218 34.345 108.218 34.781C108.218 35.361 108.828 35.463 109.713 35.739C110.686 36.029 111.63 36.552 111.63 37.859C111.63 39.209 110.468 40.139 108.755 40.139C107.637 40.139 106.737 39.746 106.215 39.006L107.245 37.975C107.426 38.1976 107.654 38.3771 107.912 38.5001C108.171 38.6231 108.454 38.6866 108.741 38.686C109.437 38.686 109.859 38.396 109.859 37.917C109.859 37.337 109.249 37.235 108.363 36.959ZM118.83 36.378C118.83 35.086 118.033 34.229 116.857 34.229C115.68 34.229 114.867 35.1 114.867 36.378C114.867 37.656 115.68 38.527 116.857 38.527C118.033 38.527 118.831 37.67 118.831 36.377L118.83 36.378ZM113.067 32.792H114.78V33.91H114.81C115.245 33.097 116.116 32.618 117.162 32.618C119.209 32.618 120.675 34.171 120.675 36.348C120.675 38.556 119.209 40.138 117.162 40.138C116.189 40.138 115.39 39.718 114.896 38.948H114.867V42.65H113.067V32.792Z",fill:"#000"}),c.jsx("path",{className:"ams-logo__text-primary",d:"M20.539 22.287H23.588L22.078 18.309H22.048L20.539 22.287ZM21.018 16.494H23.196L26.971 25.931H24.953L24.169 23.855H19.973L19.189 25.931H17.243L21.018 16.494ZM28.161 18.759H29.845V19.732H29.875C30.237 18.992 30.876 18.584 31.704 18.584C32.633 18.584 33.33 18.991 33.765 19.804C34.201 19.02 35 18.584 36.015 18.584C37.787 18.584 38.644 19.572 38.644 21.59V25.931H36.844V21.895C36.844 20.719 36.437 20.152 35.594 20.152C34.753 20.152 34.303 20.777 34.303 21.952V25.932H32.503V21.895C32.503 20.705 32.11 20.152 31.253 20.152C30.426 20.152 29.961 20.792 29.961 21.952V25.932H28.161V18.759ZM41.954 22.926C40.981 22.636 40.037 22.113 40.037 20.806C40.037 19.485 41.141 18.584 42.781 18.584C43.885 18.584 44.741 18.977 45.221 19.702L44.19 20.733C43.827 20.283 43.333 20.036 42.796 20.036C42.186 20.036 41.809 20.312 41.809 20.748C41.809 21.328 42.419 21.43 43.304 21.706C44.277 21.996 45.221 22.519 45.221 23.826C45.221 25.176 44.059 26.106 42.346 26.106C41.228 26.106 40.328 25.713 39.806 24.973L40.836 23.942C41.0164 24.1645 41.2443 24.3439 41.5029 24.4669C41.7616 24.5899 42.0446 24.6535 42.331 24.653C43.028 24.653 43.449 24.363 43.449 23.884C43.449 23.304 42.839 23.202 41.954 22.926ZM47.122 23.361V20.254H45.888V18.76H46.542C47.137 18.76 47.369 18.527 47.369 17.932V16.814H48.909V18.76H50.651V20.255H48.908V23.362C48.908 24.059 49.271 24.452 49.939 24.452C50.142 24.452 50.389 24.422 50.534 24.379V25.889C50.2243 25.9569 49.9081 25.9907 49.591 25.99C47.965 25.99 47.122 25.089 47.122 23.361ZM53.351 21.619H56.966C56.85 20.675 56.124 20.036 55.151 20.036C54.179 20.036 53.453 20.676 53.351 21.619ZM51.536 22.345C51.536 20.124 53.032 18.585 55.166 18.585C57.3 18.585 58.781 20.109 58.781 22.301C58.781 22.476 58.752 22.751 58.723 22.941H53.351C53.481 23.913 54.309 24.566 55.369 24.566C56.153 24.566 56.836 24.276 57.286 23.753L58.375 24.813C57.721 25.655 56.589 26.105 55.282 26.105C53.075 26.105 51.536 24.552 51.536 22.345ZM60.277 18.759H61.975V19.949H62.005C62.353 19.136 62.992 18.701 63.834 18.701C64.051 18.701 64.356 18.73 64.472 18.773V20.487C64.1819 20.4194 63.8849 20.3852 63.587 20.385C62.672 20.385 62.077 21.082 62.077 22.156V25.931H60.277V18.759ZM70.788 22.345C70.788 21.053 69.99 20.196 68.814 20.196C67.623 20.196 66.824 21.067 66.824 22.346C66.824 23.623 67.623 24.494 68.814 24.494C69.99 24.494 70.788 23.637 70.788 22.345ZM64.981 22.374C64.981 20.152 66.447 18.584 68.523 18.584C69.481 18.584 70.265 19.006 70.759 19.775H70.789V15.405H72.589V25.93H70.889V24.812H70.861C70.396 25.625 69.525 26.104 68.523 26.104C66.447 26.104 64.981 24.552 64.981 22.374ZM78.425 23.26V22.853L77.235 22.868C76.291 22.882 75.783 23.216 75.783 23.841C75.783 24.392 76.218 24.784 76.828 24.784C77.771 24.784 78.425 24.16 78.425 23.26ZM73.968 23.884C73.968 22.504 75.115 21.677 77.031 21.663L78.425 21.648V21.416C78.425 20.574 77.888 20.138 76.915 20.138C76.276 20.138 75.71 20.385 75.318 20.835L74.229 19.775C74.853 19.005 75.855 18.585 77.089 18.585C79.006 18.585 80.225 19.63 80.225 21.3V24.145C80.225 24.407 80.341 24.523 80.632 24.523H80.762V25.931H79.92C79.238 25.931 78.773 25.611 78.628 25.089H78.6C78.15 25.743 77.41 26.105 76.51 26.105C75 26.105 73.969 25.205 73.969 23.885L73.968 23.884ZM82.17 18.759H83.855V19.732H83.884C84.247 18.992 84.886 18.584 85.714 18.584C86.642 18.584 87.339 18.991 87.774 19.804C88.21 19.02 89.009 18.584 90.025 18.584C91.797 18.584 92.653 19.572 92.653 21.59V25.931H90.853V21.895C90.853 20.719 90.446 20.152 89.604 20.152C88.762 20.152 88.312 20.777 88.312 21.952V25.932H86.512V21.895C86.512 20.705 86.12 20.152 85.263 20.152C84.436 20.152 83.971 20.792 83.971 21.952V25.932H82.171L82.17 18.759ZM17.644 6.97998C17.644 4.11998 19.647 2.09998 22.479 2.09998C23.916 2.09998 25.121 2.56498 25.978 3.49398L24.729 4.68398C24.192 4.08898 23.422 3.74098 22.508 3.74098C20.795 3.74098 19.604 5.07698 19.604 6.97898C19.604 8.92398 20.765 10.274 22.435 10.274C23.96 10.274 25.02 9.40398 25.02 8.13998V7.89298H22.74V6.31198H26.936V7.77798C26.936 10.188 25.063 11.887 22.377 11.887C19.604 11.887 17.644 9.85398 17.644 6.97998ZM29.97 7.39998H33.586C33.469 6.45698 32.743 5.81798 31.771 5.81798C30.798 5.81798 30.072 6.45698 29.971 7.40098L29.97 7.39998ZM28.155 8.12698C28.155 5.90498 29.651 4.36698 31.785 4.36698C33.92 4.36698 35.4 5.89098 35.4 8.08298C35.4 8.25698 35.372 8.53298 35.342 8.72198H29.97C30.101 9.69498 30.929 10.348 31.988 10.348C32.773 10.348 33.455 10.058 33.905 9.53498L34.994 10.595C34.341 11.437 33.208 11.887 31.901 11.887C29.694 11.887 28.155 10.333 28.155 8.12698ZM36.896 4.53998H38.58V5.51298H38.609C38.972 4.77298 39.611 4.36598 40.439 4.36598C41.368 4.36598 42.065 4.77298 42.5 5.58598C42.936 4.80198 43.734 4.36598 44.75 4.36598C46.522 4.36598 47.379 5.35398 47.379 7.37198V11.712H45.579V7.67698C45.579 6.50198 45.172 5.93498 44.329 5.93498C43.488 5.93498 43.037 6.55998 43.037 7.73498V11.714H41.237V7.67598C41.237 6.48598 40.845 5.93398 39.988 5.93398C39.161 5.93398 38.696 6.57398 38.696 7.73398V11.713H36.896V4.53998ZM50.616 7.39998H54.231C54.115 6.45698 53.389 5.81798 52.417 5.81798C51.444 5.81798 50.717 6.45698 50.617 7.40098L50.616 7.39998ZM48.801 8.12698C48.801 5.90498 50.297 4.36698 52.431 4.36698C54.565 4.36698 56.046 5.89098 56.046 8.08298C56.046 8.25698 56.017 8.53298 55.988 8.72198H50.616C50.746 9.69498 51.574 10.348 52.634 10.348C53.418 10.348 54.101 10.058 54.551 9.53498L55.64 10.595C54.986 11.437 53.854 11.887 52.547 11.887C50.34 11.887 48.801 10.333 48.801 8.12698ZM58.906 7.39998H62.522C62.406 6.45698 61.68 5.81798 60.707 5.81798C59.734 5.81798 59.008 6.45698 58.907 7.40098L58.906 7.39998ZM57.092 8.12698C57.092 5.90498 58.587 4.36698 60.722 4.36698C62.856 4.36698 64.337 5.89098 64.337 8.08298C64.337 8.25698 64.307 8.53298 64.279 8.72198H58.906C59.037 9.69498 59.865 10.348 60.925 10.348C61.708 10.348 62.391 10.058 62.841 9.53498L63.93 10.595C63.277 11.437 62.144 11.887 60.837 11.887C58.631 11.887 57.092 10.333 57.092 8.12698ZM65.832 4.53998H67.531V5.51298H67.56C67.894 4.80198 68.62 4.36598 69.462 4.36598C71.262 4.36598 72.192 5.39698 72.192 7.37198V11.712H70.39V7.71998C70.39 6.49998 69.955 5.93398 69.04 5.93398C68.125 5.93398 67.631 6.57398 67.631 7.76398V11.713H65.831L65.832 4.53998ZM74.5 9.14298V6.03598H73.266V4.53998H73.919C74.514 4.53998 74.747 4.30798 74.747 3.71298V2.59498H76.286V4.53998H78.028V6.03598H76.286V9.14298C76.286 9.83998 76.648 10.232 77.316 10.232C77.52 10.232 77.766 10.202 77.912 10.159V11.669C77.602 11.7372 77.2855 11.7714 76.968 11.771C75.342 11.771 74.5 10.871 74.5 9.14298ZM80.728 7.39998H84.344C84.227 6.45698 83.501 5.81798 82.529 5.81798C81.556 5.81798 80.83 6.45698 80.729 7.40098L80.728 7.39998ZM78.913 8.12698C78.913 5.90498 80.409 4.36698 82.543 4.36698C84.678 4.36698 86.158 5.89098 86.158 8.08298C86.158 8.25698 86.129 8.53298 86.1 8.72198H80.728C80.859 9.69498 81.687 10.348 82.747 10.348C83.531 10.348 84.213 10.058 84.663 9.53498L85.752 10.595C85.099 11.437 83.966 11.887 82.659 11.887C80.452 11.887 78.913 10.333 78.913 8.12698Z",fill:"#EC0000"}),c.jsx("path",{className:"ams-logo__emblem",d:"M0 38.3642L3.6 34.9356L0 31.507L2.4 29.2213L6 32.6499L9.6 29.2213L12 31.507L8.4 34.9356L12 38.3642L9.6 40.6499L6 37.2213L2.4 40.6499L0 38.3642Z",fill:"#EC0000"}),c.jsx("path",{className:"ams-logo__emblem",d:"M0 9.79276L3.6 6.36419L0 2.93562L2.4 0.649902L6 4.07847L9.6 0.649902L12 2.93562L8.4 6.36419L12 9.79276L9.6 12.0785L6 8.6499L2.4 12.0785L0 9.79276Z",fill:"#EC0000"}),c.jsx("path",{className:"ams-logo__emblem",d:"M0 24.0785L3.6 20.6499L0 17.2213L2.4 14.9356L6 18.3642L9.6 14.9356L12 17.2213L8.4 20.6499L12 24.0785L9.6 26.3642L6 22.9356L2.4 26.3642L0 24.0785Z",fill:"#EC0000"})]}));e.displayName="LogoMuseumWeesp";try{e.displayName="LogoMuseumWeesp",e.__docgenInfo={description:"",displayName:"LogoMuseumWeesp",props:{}}}catch{}const Z=l.forwardRef((h,v)=>c.jsxs("svg",{className:"ams-logo","aria-hidden":"true",focusable:"false",ref:v,viewBox:"0 0 98 40",xmlns:"http://www.w3.org/2000/svg",...h,children:[c.jsx("path",{className:"ams-logo__emblem",fill:"#EC0000",d:"m0 37.648 3.527-3.527L0 30.593l2.352-2.351 3.527 3.527 3.528-3.527 2.351 2.351-3.527 3.528 3.527 3.527L9.407 40l-3.528-3.527L2.352 40 0 37.648ZM0 9.407l3.527-3.528L0 2.352 2.352 0l3.527 3.527L9.407 0l2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.526 3.527L0 9.407ZM0 23.54l3.527-3.528L0 16.485l2.352-2.352 3.527 3.528 3.528-3.528 2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.527 3.527L0 23.54Z"}),c.jsx("path",{className:"ams-logo__text-primary",fill:"#EC0000",d:"M20.937 15.334h2.17l3.76 9.4h-2.011l-.78-2.068h-4.18l-.782 2.068h-1.937l3.76-9.4Zm-.477 5.77h3.037l-1.504-3.962h-.03l-1.503 3.963ZM28.052 17.59h1.678v.969h.03c.36-.737.997-1.143 1.822-1.143.925 0 1.62.405 2.054 1.215.434-.781 1.228-1.215 2.24-1.215 1.766 0 2.618.983 2.618 2.994v4.324h-1.793v-4.02c0-1.17-.404-1.735-1.244-1.735s-1.287.622-1.287 1.793v3.962h-1.794v-4.02c0-1.186-.39-1.735-1.243-1.735-.854 0-1.288.636-1.288 1.793v3.962h-1.793V17.59ZM41.791 21.74c-.969-.288-1.91-.81-1.91-2.111 0-1.302 1.1-2.213 2.734-2.213 1.1 0 1.952.39 2.43 1.114l-1.027 1.026c-.362-.448-.853-.694-1.388-.694-.608 0-.983.276-.983.71 0 .578.608.679 1.49.954.968.29 1.909.81 1.909 2.112 0 1.301-1.157 2.27-2.863 2.27-1.114 0-2.01-.39-2.532-1.127l1.027-1.027c.39.464.911.71 1.49.71.693 0 1.113-.29 1.113-.767 0-.579-.608-.68-1.49-.955v-.001ZM46.94 22.175V19.08h-1.23v-1.49h.652c.592 0 .824-.232.824-.824v-1.114h1.533v1.938h1.736v1.49h-1.736v3.095c0 .693.361 1.085 1.027 1.085.202 0 .448-.03.592-.073v1.504a4.362 4.362 0 0 1-.94.101c-1.62 0-2.46-.897-2.46-2.617h.002ZM51.337 21.162c0-2.213 1.49-3.746 3.615-3.746 2.126 0 3.602 1.52 3.602 3.703 0 .174-.03.448-.058.636h-5.351c.13.969.955 1.62 2.01 1.62.781 0 1.46-.29 1.91-.81l1.084 1.056c-.651.838-1.779 1.287-3.08 1.287-2.2 0-3.731-1.547-3.731-3.746h-.002Zm1.808-.723h3.601c-.115-.94-.838-1.577-1.808-1.577-.97 0-1.692.637-1.793 1.577ZM60.042 17.59h1.692v1.186h.03c.346-.81.983-1.244 1.822-1.244.218 0 .521.03.636.072v1.706a3.906 3.906 0 0 0-.882-.1c-.91 0-1.504.693-1.504 1.764v3.76h-1.793V17.59ZM64.729 21.192c0-2.213 1.46-3.775 3.529-3.775.954 0 1.735.42 2.227 1.187h.029V14.25h1.793v10.486h-1.692v-1.114h-.03c-.462.81-1.33 1.288-2.327 1.288-2.069 0-3.529-1.548-3.529-3.717v-.002Zm5.785-.03c0-1.287-.796-2.14-1.967-2.14s-1.981.868-1.981 2.14c0 1.273.796 2.14 1.98 2.14 1.186 0 1.968-.853 1.968-2.14ZM73.68 22.695c0-1.374 1.143-2.198 3.052-2.212l1.388-.015v-.231c0-.838-.535-1.272-1.504-1.272-.636 0-1.2.245-1.59.693l-1.084-1.056c.622-.766 1.62-1.186 2.849-1.186 1.908 0 3.124 1.042 3.124 2.704v2.835c0 .26.115.377.404.377h.13v1.402h-.838c-.68 0-1.143-.318-1.287-.838h-.03c-.448.651-1.186 1.012-2.082 1.012-1.504 0-2.53-.897-2.53-2.213h-.002Zm4.44-.622v-.404l-1.185.014c-.94.014-1.446.347-1.446.969 0 .55.434.94 1.042.94.94 0 1.59-.621 1.59-1.518ZM81.851 17.59h1.678v.969h.03c.362-.737.998-1.143 1.822-1.143.925 0 1.62.405 2.054 1.215.434-.781 1.229-1.215 2.241-1.215 1.765 0 2.618.983 2.618 2.994v4.324H90.5v-4.02c0-1.17-.405-1.735-1.245-1.735-.84 0-1.287.622-1.287 1.793v3.962h-1.793v-4.02c0-1.186-.39-1.735-1.244-1.735s-1.288.636-1.288 1.793v3.962h-1.793V17.59ZM17.575 5.857c0-2.85 1.996-4.86 4.817-4.86 1.432 0 2.632.463 3.485 1.389l-1.244 1.186c-.535-.593-1.302-.94-2.213-.94-1.706 0-2.893 1.33-2.893 3.225 0 1.894 1.157 3.283 2.821 3.283 1.52 0 2.574-.868 2.574-2.126v-.246h-2.27V5.191h4.18v1.46c0 2.402-1.867 4.094-4.542 4.094s-4.715-2.025-4.715-4.888ZM28.047 7c0-2.213 1.49-3.747 3.616-3.747 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.057.636h-5.351c.13.97.954 1.62 2.01 1.62.78 0 1.46-.289 1.91-.81l1.085 1.056c-.651.839-1.779 1.288-3.08 1.288-2.2 0-3.732-1.548-3.732-3.746h-.002Zm1.809-.724h3.601c-.115-.94-.838-1.576-1.808-1.576-.97 0-1.692.636-1.793 1.576ZM36.753 3.426h1.678v.97h.03c.361-.738.997-1.144 1.822-1.144.925 0 1.62.405 2.054 1.215.434-.78 1.23-1.215 2.24-1.215 1.766 0 2.618.983 2.618 2.994v4.324h-1.793V6.55c0-1.17-.404-1.735-1.244-1.735s-1.287.622-1.287 1.793v3.962h-1.794V6.55c0-1.186-.39-1.735-1.243-1.735-.854 0-1.288.636-1.288 1.793v3.962h-1.793V3.426ZM48.612 7c0-2.213 1.49-3.747 3.616-3.747 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.057.636H50.42c.131.97.955 1.62 2.011 1.62.78 0 1.46-.289 1.91-.81l1.084 1.056c-.652.839-1.78 1.288-3.08 1.288-2.2 0-3.732-1.548-3.732-3.746Zm1.808-.724h3.602c-.115-.94-.838-1.576-1.807-1.576s-1.692.636-1.793 1.576h-.002ZM56.87 7c0-2.213 1.49-3.747 3.616-3.747 2.125 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.058.636h-5.35c.13.97.954 1.62 2.01 1.62.78 0 1.46-.289 1.91-.81l1.084 1.056c-.652.839-1.78 1.288-3.081 1.288-2.199 0-3.731-1.548-3.731-3.746h-.001Zm1.808-.724h3.602c-.115-.94-.839-1.576-1.809-1.576s-1.692.636-1.793 1.576ZM65.577 3.426h1.692v.97h.03c.332-.71 1.055-1.144 1.893-1.144 1.794 0 2.719 1.027 2.719 2.994v4.324h-1.793V6.594c0-1.215-.434-1.78-1.345-1.78-.912 0-1.403.637-1.403 1.823v3.935h-1.793V3.426ZM74.21 8.012V4.917h-1.23v-1.49h.652c.593 0 .825-.231.825-.824V1.49h1.533v1.937h1.735v1.49H75.99v3.095c0 .694.36 1.085 1.026 1.085.203 0 .448-.03.593-.073v1.504a4.356 4.356 0 0 1-.94.101c-1.621 0-2.46-.897-2.46-2.617l.002.001ZM78.607 7c0-2.213 1.49-3.747 3.616-3.747 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.057.636h-5.352c.131.97.955 1.62 2.011 1.62.78 0 1.46-.289 1.91-.81l1.084 1.056c-.652.839-1.78 1.288-3.08 1.288-2.2 0-3.732-1.548-3.732-3.746Zm1.808-.724h3.602c-.115-.94-.838-1.576-1.808-1.576-.97 0-1.692.636-1.794 1.576Z"}),c.jsx("path",{className:"ams-logo__text-secondary",fill:"#000",d:"m17.335 37.353 1.302-1.084a2.07 2.07 0 0 0 1.779.983c.868 0 1.46-.463 1.46-1.143 0-.766-.636-1.042-1.866-1.49-1.143-.42-2.343-1.012-2.343-2.747 0-1.62 1.316-2.734 3.24-2.734 1.3 0 2.327.52 2.906 1.446L22.51 31.67c-.39-.578-.954-.897-1.62-.897-.78 0-1.302.42-1.302 1.042 0 .767.637 1.042 1.866 1.49 1.143.42 2.344 1.012 2.344 2.748 0 1.735-1.375 2.834-3.4 2.834-1.374 0-2.458-.549-3.066-1.533h.002ZM25.738 36.153v-3.095h-1.23v-1.49h.65c.593 0 .824-.231.824-.824v-1.113h1.534v1.937h1.735v1.49h-1.735v3.095c0 .693.362 1.085 1.026 1.085.202 0 .448-.03.593-.073v1.504a4.37 4.37 0 0 1-.941.101c-1.62 0-2.459-.897-2.459-2.617h.003ZM30.134 36.674c0-1.375 1.143-2.2 3.051-2.213l1.389-.014v-.232c0-.838-.535-1.272-1.504-1.272-.636 0-1.2.245-1.59.694l-1.085-1.056c.622-.767 1.62-1.187 2.85-1.187 1.909 0 3.123 1.042 3.123 2.705v2.835c0 .26.115.376.405.376h.13v1.402h-.838c-.68 0-1.143-.318-1.288-.838h-.029c-.448.651-1.186 1.012-2.082 1.012-1.504 0-2.53-.897-2.53-2.212h-.002Zm4.44-.622v-.405l-1.186.014c-.941.014-1.447.347-1.447.97 0 .548.434.94 1.042.94.94 0 1.591-.622 1.591-1.52ZM37.813 35.17c0-2.213 1.46-3.775 3.529-3.775.955 0 1.735.42 2.227 1.187h.03v-4.353h1.792v10.486H43.7V37.6h-.029c-.463.81-1.331 1.288-2.328 1.288-2.068 0-3.529-1.547-3.529-3.717v-.002Zm5.785-.03c0-1.287-.796-2.14-1.967-2.14-1.17 0-1.981.868-1.981 2.14 0 1.273.796 2.14 1.981 2.14s1.967-.853 1.967-2.14ZM48.763 35.719c-.97-.29-1.91-.81-1.91-2.112 0-1.301 1.1-2.213 2.734-2.213 1.1 0 1.952.39 2.429 1.114l-1.026 1.026c-.363-.448-.854-.694-1.39-.694-.607 0-.982.276-.982.71 0 .578.608.68 1.49.954.969.29 1.91.81 1.91 2.112s-1.158 2.27-2.864 2.27c-1.113 0-2.01-.39-2.532-1.127l1.027-1.027c.39.464.911.71 1.49.71.694 0 1.113-.29 1.113-.767 0-.579-.608-.68-1.49-.955v-.001ZM52.97 36.674c0-1.375 1.144-2.2 3.052-2.213l1.389-.014v-.232c0-.838-.535-1.272-1.504-1.272-.636 0-1.2.245-1.591.694l-1.084-1.056c.622-.767 1.62-1.187 2.849-1.187 1.91 0 3.124 1.042 3.124 2.705v2.835c0 .26.115.376.404.376h.13v1.402h-.837c-.68 0-1.143-.318-1.288-.838h-.03c-.447.651-1.186 1.012-2.082 1.012-1.504 0-2.53-.897-2.53-2.212h-.001Zm4.44-.622v-.405l-1.186.014c-.94.014-1.446.347-1.446.97 0 .548.434.94 1.042.94.94 0 1.59-.622 1.59-1.52ZM61.142 31.568h1.691v1.187h.03c.347-.81.983-1.244 1.822-1.244.218 0 .521.029.636.073v1.706a3.907 3.907 0 0 0-.881-.102c-.912 0-1.504.694-1.504 1.765v3.76h-1.793V31.57h-.002ZM65.827 35.14c0-2.227 1.49-3.746 3.689-3.746 1.085 0 2.038.405 2.646 1.128l-1.2 1.127c-.362-.404-.868-.622-1.446-.622-1.1 0-1.851.868-1.851 2.112 0 1.244.752 2.112 1.85 2.112.58 0 1.086-.218 1.476-.636l1.187 1.127c-.636.738-1.577 1.143-2.647 1.143-2.199 0-3.703-1.519-3.703-3.746v.001ZM73.492 28.228h1.793v4.15h.03c.42-.636 1.041-.983 1.793-.983 1.793 0 2.718 1.027 2.718 2.994v4.325h-1.793v-3.978c0-1.215-.434-1.78-1.345-1.78s-1.403.637-1.403 1.823v3.935h-1.793V28.228ZM82.56 30.657c-.622 0-1.07-.434-1.07-1.042 0-.608.448-1.042 1.07-1.042.622 0 1.07.434 1.07 1.042 0 .608-.448 1.042-1.07 1.042Zm-.897.911h1.793v7.144h-1.793v-7.144ZM84.947 35.14c0-2.212 1.49-3.746 3.616-3.746 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.058.636h-5.35c.13.969.954 1.62 2.01 1.62.78 0 1.46-.289 1.91-.81L91.76 37.6c-.652.838-1.78 1.288-3.081 1.288-2.199 0-3.73-1.548-3.73-3.747h-.002Zm1.808-.723h3.602c-.115-.94-.838-1.577-1.808-1.577-.97 0-1.693.637-1.794 1.577ZM92.886 33.058v-1.49h1.215v-.925c0-1.634.969-2.59 2.632-2.59.203 0 .506.03.666.058v1.548a2.82 2.82 0 0 0-.622-.072c-.565 0-.882.376-.882 1.056v.925h1.736v1.49h-1.736v5.654h-1.793v-5.654h-1.216Z"})]}));Z.displayName="LogoStadsarchief";try{Z.displayName="LogoStadsarchief",Z.__docgenInfo={description:"",displayName:"LogoStadsarchief",props:{}}}catch{}const C=l.forwardRef((h,v)=>c.jsxs("svg",{className:"ams-logo","aria-hidden":"true",focusable:"false",ref:v,viewBox:"0 0 159 42",xmlns:"http://www.w3.org/2000/svg",...h,children:[c.jsx("path",{className:"ams-logo__emblem",fill:"#EC0000",d:"m0 37.65 3.53-3.53L0 30.59l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53L9.41 40l-3.53-3.53L2.35 40 0 37.65ZM0 9.41l3.53-3.53L0 2.35 2.35 0l3.53 3.53L9.41 0l2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 9.41ZM0 23.54l3.53-3.53L0 16.48l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 23.54Z"}),c.jsx("path",{className:"ams-logo__text-secondary",fill:"#000",d:"m17.34 37.35 1.3-1.08c.4.64 1.06.98 1.78.98.87 0 1.46-.46 1.46-1.14 0-.77-.64-1.04-1.87-1.49-1.14-.42-2.34-1.01-2.34-2.75 0-1.62 1.32-2.73 3.24-2.73 1.3 0 2.33.52 2.91 1.45l-1.3 1.08c-.39-.58-.95-.9-1.62-.9-.78 0-1.3.42-1.3 1.04 0 .77.64 1.04 1.87 1.49 1.14.42 2.34 1.01 2.34 2.75s-1.37 2.83-3.4 2.83c-1.37 0-2.46-.55-3.07-1.53ZM25.74 36.15v-3.1h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.1c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM30.13 36.67c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM37.81 35.17c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79v10.49H43.7v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM48.76 35.72c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM55.18 37.6h-.03v1.11h-1.71V28.22h1.79v4.35h.03c.52-.77 1.3-1.19 2.26-1.19 2.04 0 3.5 1.56 3.5 3.75s-1.46 3.75-3.5 3.75c-1 0-1.82-.46-2.34-1.29v.01Zm4.01-2.46c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.81 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM61.95 36.67c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4H65.2c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM70.12 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM80.09 38.71H78.3V28.22h1.79v6.57h.03l2.66-3.23h2.17l-2.76 3.17 2.89 3.98h-2.17l-1.98-2.81-.84.97v1.84ZM88.97 31.57h1.95l1.66 5.15h.03l1.71-5.15h1.91l-2.69 7.14h-1.92l-2.65-7.14ZM96.6 36.67c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM104.77 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14l-.01.01ZM116.65 29.31h1.91v7.78h3.49v1.62h-5.39v-9.4h-.01ZM122.87 35.14c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM131.57 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM140.64 30.66c-.62 0-1.07-.43-1.07-1.04 0-.61.45-1.04 1.07-1.04.62 0 1.07.43 1.07 1.04 0 .61-.45 1.04-1.07 1.04Zm-.9.91h1.79v7.14h-1.79v-7.14ZM143.47 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM151.54 40.42l1.16-1.13c.39.45 1.1.72 1.87.72 1.3 0 2.02-.59 2.02-1.63v-1.1h-.03c-.4.75-1.16 1.17-2.1 1.17-2.01 0-3.34-1.42-3.34-3.53s1.37-3.51 3.34-3.51c1.01 0 1.81.45 2.2 1.21h.03v-1.06h1.69v6.88c0 1.91-1.46 3.11-3.79 3.11-1.33 0-2.43-.42-3.05-1.14v.01Zm5.06-5.5c0-1.19-.74-2.01-1.82-2.01s-1.82.82-1.82 2.01.75 2 1.82 2 1.82-.82 1.82-2Z"}),c.jsx("path",{className:"ams-logo__text-primary",fill:"#EC0000",d:"M20.94 15.33h2.17l3.76 9.4h-2.01l-.78-2.07H19.9l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04L22 17.14h-.03l-1.5 3.96h-.01ZM28.05 17.59h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H36.7v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V20.7c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM41.79 21.74c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM46.94 22.17v-3.09h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM51.34 21.16c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM60.04 17.59h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79V17.6l-.01-.01ZM64.73 21.19c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79v10.49h-1.69v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM73.68 22.7c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM81.85 17.59h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H90.5v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V20.7c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM17.58 5.86c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27V5.19h4.18v1.46c0 2.4-1.87 4.09-4.54 4.09S17.6 8.72 17.6 5.85l-.02.01ZM28.05 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM36.75 3.43h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H45.4V6.55c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V6.55c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79V3.43h-.01ZM48.61 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM56.87 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM65.58 3.43h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79V6.59c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79V3.43h-.01ZM74.21 8.01v-3.1h-1.23V3.42h.65c.59 0 .82-.23.82-.82V1.49h1.53v1.94h1.74v1.49h-1.74v3.1c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM78.61 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58Z"})]}));C.displayName="LogoStadsbankVanLening";try{C.displayName="LogoStadsbankVanLening",C.__docgenInfo={description:"",displayName:"LogoStadsbankVanLening",props:{}}}catch{}const o=l.forwardRef((h,v)=>c.jsxs("svg",{className:"ams-logo","aria-hidden":"true",focusable:"false",ref:v,viewBox:"0 0 145 43",xmlns:"http://www.w3.org/2000/svg",...h,children:[c.jsx("path",{className:"ams-logo__emblem",fill:"#EC0000",d:"m0 38.2 3.53-3.53L0 31.14l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 38.2ZM0 9.96l3.53-3.53L0 2.9 2.35.55l3.53 3.53L9.41.55l2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 9.96ZM0 24.09l3.53-3.53L0 17.03l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 24.09Z"}),c.jsx("path",{className:"ams-logo__text-secondary",fill:"#000",d:"M17.13 29.86h2.07l2.39 7.22h.03l2.42-7.22h1.98l-3.36 9.4h-2.17l-3.36-9.4ZM26.5 34.55c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27v-1.58h4.18v1.46c0 2.4-1.87 4.09-4.54 4.09s-4.71-2.02-4.71-4.89l-.02.01ZM40.43 29.86h2.17l3.76 9.4h-2.01l-.78-2.07h-4.18l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04l-1.5-3.96h-.03l-1.5 3.96h-.01ZM50.38 29.86h2.07l2.39 7.22h.03l2.42-7.22h1.98l-3.36 9.4h-2.17l-3.36-9.4ZM59.42 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM68.13 32.12h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM73.01 38.06l3.4-4.45h-3.3v-1.49h5.73v1.2l-3.4 4.45h3.5v1.49h-5.93v-1.2ZM79.88 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM90.38 39.26h-1.79V28.77h1.79v6.57h.03l2.66-3.23h2.17l-2.76 3.17 2.89 3.98H93.2l-1.98-2.81-.84.97v1.84ZM95.68 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM104.38 32.12h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM110.65 31.21c-.62 0-1.07-.43-1.07-1.04 0-.61.45-1.04 1.07-1.04.62 0 1.07.43 1.07 1.04 0 .61-.45 1.04-1.07 1.04Zm-.9.91h1.79v7.14h-1.79v-7.14ZM113.48 32.12h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM121.55 40.97l1.16-1.13c.39.45 1.1.72 1.87.72 1.3 0 2.02-.59 2.02-1.63v-1.1h-.03c-.4.75-1.16 1.17-2.1 1.17-2.01 0-3.34-1.42-3.34-3.53s1.37-3.51 3.34-3.51c1.01 0 1.81.45 2.2 1.21h.03v-1.06h1.69v6.88c0 1.91-1.46 3.11-3.79 3.11-1.33 0-2.43-.42-3.05-1.14v.01Zm5.06-5.5c0-1.19-.74-2.01-1.82-2.01s-1.82.82-1.82 2.01.75 2 1.82 2 1.82-.82 1.82-2ZM129.88 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM138.59 32.12h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01Z"}),c.jsx("path",{className:"ams-logo__text-primary",fill:"#EC0000",d:"M20.94 15.88h2.17l3.76 9.4h-2.01l-.78-2.07H19.9l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04L22 17.69h-.03l-1.5 3.96h-.01ZM28.05 18.14h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H36.7v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79v-4.02c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM41.79 22.29c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM46.94 22.72v-3.09h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM51.34 21.71c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM60.04 18.14h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM64.73 21.74c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79V25.3h-1.69v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM73.68 23.25c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM81.85 18.14h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H90.5v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79v-4.02c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM17.58 6.41c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27V5.74h4.18V7.2c0 2.4-1.87 4.09-4.54 4.09S17.6 9.27 17.6 6.4l-.02.01ZM28.05 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM36.75 3.98h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H45.4V7.1c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V7.1c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79V3.98h-.01ZM48.61 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM56.87 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM65.58 3.98h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79V7.14c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79V3.98h-.01ZM74.21 8.56V5.47h-1.23V3.98h.65c.59 0 .82-.23.82-.82V2.04h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62l.01.01ZM78.61 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58Z"})]}));o.displayName="LogoVgaVerzekeringen";try{o.displayName="LogoVgaVerzekeringen",o.__docgenInfo={description:"",displayName:"LogoVgaVerzekeringen",props:{}}}catch{}const V={amsterdam:s,"ggd-amsterdam":a,"museum-weesp":e,stadsarchief:Z,"stadsbank-van-lening":C,"vga-verzekeringen":o},m=l.forwardRef(({brand:h="amsterdam",className:v,...M},r)=>{const L=V[h];return c.jsx(L,{...M,ref:r,className:t("ams-logo",v)})});m.displayName="Logo";try{m.displayName="Logo",m.__docgenInfo={description:"",displayName:"Logo",props:{brand:{defaultValue:{value:"amsterdam"},description:"The name of the brand for which to display the logo.",name:"brand",required:!1,type:{name:"enum",value:[{value:'"amsterdam"'},{value:'"ggd-amsterdam"'},{value:'"museum-weesp"'},{value:'"stadsarchief"'},{value:'"stadsbank-van-lening"'},{value:'"vga-verzekeringen"'}]}}}}}catch{}export{m as L}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Logo.docs-C0jLR5Ta.js b/demo-npm_and_yarn/vite-6.0.3/assets/Logo.docs-C0jLR5Ta.js new file mode 100644 index 0000000000..708769ba89 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Logo.docs-C0jLR5Ta.js @@ -0,0 +1,59 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as t}from"./index-3rgQkYFR.js";import{ae as i,aq as r,ar as h,as as l,at as o}from"./index-CF71P72j.js";import{L as d,G as m,S as p,a as g,V as c,M as u}from"./Logo.stories-LgbwSI1-.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./Logo-BazI2ckd.js";import"./clsx-B-dksMZM.js";const f=` + +# Logo + +The City’s logo includes an icon (3 Saint Andrew’s crosses) and a wordmark (Gemeente Amsterdam). +The logo has a fixed colour, size, and position and is present on all our websites. + +## Specifications + +The design system provides the correct logo for online use. +Other logo variations exist, but they cannot be used on websites and in applications. +The Dutch logo is for websites in the Dutch language and any language other than English. +The English logo is used for websites in the English language. +(We will add this logo to the design system later.) +In the meantime, you can download an image of this logo from [Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/logo-gemeente-amsterdam/#hba498e5c-2388-464f-b769-7622a5d32bd1). + +## Exception + +Use a sub-brand logo if the website is owned by one of the 5 sub-brands. +They have a separate status because of their unique service provision not directly associated with the City. + +The sub-brands are: + +- GGD Amsterdam +- Museum Weesp +- Stadsarchief +- Stadsbank van Lening +- VGA Verzekeringen + +## Requirements for all logos + +- The logo is always displayed. +- The logo is left-aligned in the header. +- The logo links to the homepage of the website or application. +- If the application is a form, application, or tool without a homepage, the logo links to the page where the form, application, or tool is referred to. + +The height of the logo is always 40 pixels. +This also applies to sub-brand logos. + +## Download + +- [Logo set for websites and apps (ZIP, 10 kB)](https://assets.amsterdam.nl/publish/pages/1007650/logoset_voor_websites_en_apps.zip) +`;/*@license CC0-1.0*/function a(s){const n={h2:"h2",h3:"h3",...t(),...s.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:d}),` +`,e.jsx(r,{children:f}),` +`,e.jsx(h,{}),` +`,e.jsx(l,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"ggd-amsterdam",children:"GGD Amsterdam"}),` +`,e.jsx(o,{of:m}),` +`,e.jsx(n.h3,{id:"stadsarchief",children:"Stadsarchief"}),` +`,e.jsx(o,{of:p}),` +`,e.jsx(n.h3,{id:"stadsbank-van-lening",children:"Stadsbank van Lening"}),` +`,e.jsx(o,{of:g}),` +`,e.jsx(n.h3,{id:"vga-verzekeringen",children:"VGA Verzekeringen"}),` +`,e.jsx(o,{of:c}),` +`,e.jsx(n.h3,{id:"museum-weesp",children:"Museum Weesp"}),` +`,e.jsx(o,{of:u})]})}function L(s={}){const{wrapper:n}={...t(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(a,{...s})}):a(s)}export{L as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Logo.stories-LgbwSI1-.js b/demo-npm_and_yarn/vite-6.0.3/assets/Logo.stories-LgbwSI1-.js new file mode 100644 index 0000000000..dcf5cc2554 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Logo.stories-LgbwSI1-.js @@ -0,0 +1,24 @@ +import{L as M}from"./Logo-BazI2ckd.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const h={title:"Components/Media/Logo",component:M},e={},a={args:{brand:"ggd-amsterdam"}},r={args:{brand:"stadsarchief"}},s={args:{brand:"stadsbank-van-lening"}},n={args:{brand:"vga-verzekeringen"}},o={args:{brand:"museum-weesp"}};var t,c,d;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:"{}",...(d=(c=e.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var m,g,p;a.parameters={...a.parameters,docs:{...(m=a.parameters)==null?void 0:m.docs,source:{originalSource:`{ + args: { + brand: 'ggd-amsterdam' + } +}`,...(p=(g=a.parameters)==null?void 0:g.docs)==null?void 0:p.source}}};var u,i,b;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`{ + args: { + brand: 'stadsarchief' + } +}`,...(b=(i=r.parameters)==null?void 0:i.docs)==null?void 0:b.source}}};var l,S,f;s.parameters={...s.parameters,docs:{...(l=s.parameters)==null?void 0:l.docs,source:{originalSource:`{ + args: { + brand: 'stadsbank-van-lening' + } +}`,...(f=(S=s.parameters)==null?void 0:S.docs)==null?void 0:f.source}}};var k,v,L;n.parameters={...n.parameters,docs:{...(k=n.parameters)==null?void 0:k.docs,source:{originalSource:`{ + args: { + brand: 'vga-verzekeringen' + } +}`,...(L=(v=n.parameters)==null?void 0:v.docs)==null?void 0:L.source}}};var V,_,z;o.parameters={...o.parameters,docs:{...(V=o.parameters)==null?void 0:V.docs,source:{originalSource:`{ + args: { + brand: 'museum-weesp' + } +}`,...(z=(_=o.parameters)==null?void 0:_.docs)==null?void 0:z.source}}};const G=["Default","GgdAmsterdam","Stadsarchief","StadsbankVanLening","VgaVerzekeringen","MuseumWeesp"],j=Object.freeze(Object.defineProperty({__proto__:null,Default:e,GgdAmsterdam:a,MuseumWeesp:o,Stadsarchief:r,StadsbankVanLening:s,VgaVerzekeringen:n,__namedExportsOrder:G,default:h},Symbol.toStringTag,{value:"Module"}));export{a as G,j as L,o as M,r as S,n as V,s as a}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Margin.docs-CaBFrHvi.js b/demo-npm_and_yarn/vite-6.0.3/assets/Margin.docs-CaBFrHvi.js new file mode 100644 index 0000000000..7994ef3543 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Margin.docs-CaBFrHvi.js @@ -0,0 +1,31 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as t}from"./index-3rgQkYFR.js";import{ae as o,aq as i,ar as m,as as r}from"./index-CF71P72j.js";import{M as l}from"./Margin.stories-Bvyecr4u.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const p=` + +# Margin + +Adds white space below a single element. + +## Class names + +The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the height of the bottom margin. + +| Class name | Example | +| ------------ | -------------------------------------------------------------------------------------------- | +| \`ams-mb--xs\` |
    | +| \`ams-mb--sm\` |
    | +| \`ams-mb--md\` |
    | +| \`ams-mb--lg\` |
    | +| \`ams-mb--xl\` |
    | + +## Guidelines + +- Use this utility class to vertically separate one element from the next. +- It can be used on any element and sets the \`margin-block-end\` CSS property. This declaration is marked with the \`!important\` flag to ensure it overrides any other margins. +- Elements’ top and bottom margins are sometimes collapsed into a single margin. Consult [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) for details. +- To add equal margins between elements, either use the [Gap](/docs/utilities-css-gap--docs) utility class on their common parent or wrap them in a [Column](/docs/components-layout-column--docs) component. + This helps in loops: it prevents having to treat the last element differently. +`;/*@license CC0-1.0*/function a(s){return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(o,{of:l}),` +`,e.jsx(i,{children:p}),` +`,e.jsx(m,{}),` +`,e.jsx(r,{})]})}function z(s={}){const{wrapper:n}={...t(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(a,{...s})}):a()}export{z as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Margin.stories-Bvyecr4u.js b/demo-npm_and_yarn/vite-6.0.3/assets/Margin.stories-Bvyecr4u.js new file mode 100644 index 0000000000..a809db4a83 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Margin.stories-Bvyecr4u.js @@ -0,0 +1,6 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{H as l,P as m}from"./index.esm-kzH9sPjb.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const s=({children:r,size:i})=>e.jsx("span",{className:`ams-mb--${i}`,children:r});try{s.displayName="Margin",s.__docgenInfo={description:"Renders examples in Storybook. Not for reuse.",displayName:"Margin",props:{size:{defaultValue:null,description:"The amount of space below the element.",name:"size",required:!0,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"xl"'}]}}}}}catch{}const c=({size:r})=>e.jsxs(e.Fragment,{children:[e.jsx(l,{className:`ams-mb--${r}`,level:2,children:"This heading has a bottom margin"}),e.jsx(m,{children:"It introduces white space between the heading and this paragraph below."})]}),d={title:"Utilities/CSS/Margin",component:s,args:{size:"xs"}},a={render:c};var t,o,n;a.parameters={...a.parameters,docs:{...(t=a.parameters)==null?void 0:t.docs,source:{originalSource:`{ + render +}`,...(n=(o=a.parameters)==null?void 0:o.docs)==null?void 0:n.source}}};const p=["Default"],h=Object.freeze(Object.defineProperty({__proto__:null,Default:a,__namedExportsOrder:p,default:d},Symbol.toStringTag,{value:"Module"}));export{h as M}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Mark.docs-Ddd98mUo.js b/demo-npm_and_yarn/vite-6.0.3/assets/Mark.docs-Ddd98mUo.js new file mode 100644 index 0000000000..83a973b34a --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Mark.docs-Ddd98mUo.js @@ -0,0 +1,20 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as i}from"./index-3rgQkYFR.js";import{ae as o,aq as a,ar as s,as as m}from"./index-CF71P72j.js";import{M as p}from"./Mark.stories-CcHa6YCW.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const x=` + +# Mark + +Highlights a text fragment using a yellow background. +Provides strong emphasis on the text and draws attention to it. + +## Guidelines + +- Use a maximum of 1 Mark per page. +- Limit the marked text to 1 sentence. +- Do not use it in titles and subtitles. + Use a significant and engaging title if the entire paragraph is important. +- Do not mark an entire paragraph. +`;/*@license CC0-1.0*/function e(n){return t.jsxs(t.Fragment,{children:[` +`,` +`,t.jsx(o,{of:p}),` +`,t.jsx(a,{children:x}),` +`,t.jsx(s,{}),` +`,t.jsx(m,{})]})}function b(n={}){const{wrapper:r}={...i(),...n.components};return r?t.jsx(r,{...n,children:t.jsx(e,{...n})}):e()}export{b as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Mark.stories-CcHa6YCW.js b/demo-npm_and_yarn/vite-6.0.3/assets/Mark.stories-CcHa6YCW.js new file mode 100644 index 0000000000..93a56d7935 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Mark.stories-CcHa6YCW.js @@ -0,0 +1,12 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{P as l}from"./index.esm-kzH9sPjb.js";import{c}from"./clsx-B-dksMZM.js";import{r as p}from"./index-RigO-4kf.js";const r=p.forwardRef(({children:a,className:i,...m},d)=>n.jsx("mark",{...m,ref:d,className:c("ams-mark",i),children:a}));r.displayName="Mark";try{r.displayName="Mark",r.__docgenInfo={description:"",displayName:"Mark",props:{}}}catch{}const g={title:"Components/Text/Mark",component:r,argTypes:{children:{description:"The text to mark.",table:{disable:!1}}}},e={args:{children:"Wat vinden Amsterdammers belangrijk?"},render:({children:a})=>n.jsxs(l,{children:["Daarom organiseren we in 2024 het burgerberaad schone stad, waarin 150 Amsterdammers in gesprek gaan over hoe we de stad beter schoonhouden. ",n.jsx(r,{children:a})," Welke oplossingen zien zij? Hier zijn we benieuwd naar. Want elke Amsterdammer heeft afval en moet het kwijt. Wij kunnen als gemeente veel van deze afvalexperts leren."]})};var t,s,o;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`{ + args: { + children: 'Wat vinden Amsterdammers belangrijk?' + }, + render: ({ + children + }) => + Daarom organiseren we in 2024 het burgerberaad schone stad, waarin 150 Amsterdammers in gesprek gaan over hoe we + de stad beter schoonhouden. {children} Welke oplossingen zien zij? Hier zijn we benieuwd naar. Want + elke Amsterdammer heeft afval en moet het kwijt. Wij kunnen als gemeente veel van deze afvalexperts leren. + +}`,...(o=(s=e.parameters)==null?void 0:s.docs)==null?void 0:o.source}}};const h=["Default"],b=Object.freeze(Object.defineProperty({__proto__:null,Default:e,__namedExportsOrder:h,default:g},Symbol.toStringTag,{value:"Module"}));export{b as M}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/MegaMenu.docs-C2U0IUWe.js b/demo-npm_and_yarn/vite-6.0.3/assets/MegaMenu.docs-C2U0IUWe.js new file mode 100644 index 0000000000..f2fc2eece5 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/MegaMenu.docs-C2U0IUWe.js @@ -0,0 +1,12 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as e}from"./index-3rgQkYFR.js";import{ae as i,aq as s,ar as a,at as m}from"./index-CF71P72j.js";import{M as p,a as c}from"./MegaMenu.stories-S1ZYoYVJ.js";import{S as x}from"./StatusBadge-DiE14TfE.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./Badge-BvbF-Lgn.js";const M=` + +# Mega Menu +`;/*@license CC0-1.0*/function r(n){const o={h2:"h2",h3:"h3",...e(),...n.components};return t.jsxs(t.Fragment,{children:[` +`,` +`,t.jsx(i,{of:p}),` +`,t.jsx(x,{reason:"Needs work for narrow screens and integration with Mega Menu."}),` +`,t.jsx(s,{children:M}),` +`,t.jsx(a,{}),` +`,t.jsx(o.h2,{id:"examples",children:"Examples"}),` +`,t.jsx(o.h3,{id:"with-categories",children:"With categories"}),` +`,t.jsx(m,{of:c})]})}function v(n={}){const{wrapper:o}={...e(),...n.components};return o?t.jsx(o,{...n,children:t.jsx(r,{...n})}):r(n)}export{v as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/MegaMenu.stories-S1ZYoYVJ.js b/demo-npm_and_yarn/vite-6.0.3/assets/MegaMenu.stories-S1ZYoYVJ.js new file mode 100644 index 0000000000..76238e2ae8 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/MegaMenu.stories-S1ZYoYVJ.js @@ -0,0 +1,125 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{G as t,H as k,o as n}from"./index.esm-kzH9sPjb.js";import{c as j}from"./clsx-B-dksMZM.js";import{r as m}from"./index-RigO-4kf.js";const x=m.forwardRef(({children:r,className:a,...l},d)=>e.jsx("div",{...l,ref:d,className:j("ams-mega-menu__list-category",a),children:r}));x.displayName="MegaMenu.ListCategory";try{MegaMenu.ListCategory.displayName="MegaMenu.ListCategory",MegaMenu.ListCategory.__docgenInfo={description:"",displayName:"MegaMenu.ListCategory",props:{}}}catch{}const p=m.forwardRef(({children:r,className:a,...l},d)=>e.jsx("div",{...l,ref:d,className:j("ams-mega-menu",a),children:r}));p.displayName="MegaMenu";const i=Object.assign(p,{ListCategory:x});try{i.displayName="MegaMenu",i.__docgenInfo={description:"",displayName:"MegaMenu",props:{}}}catch{}const v={title:"Components/Navigation/Mega Menu",component:i,parameters:{layout:"fullscreen"}},s={args:{children:e.jsx(t,{paddingVertical:"medium",children:e.jsxs(t.Cell,{span:"all",children:[e.jsx(k,{level:1,size:"level-2",children:"Alle onderwerpen"}),e.jsx(i.ListCategory,{children:e.jsxs(n,{children:[e.jsx(n.Link,{href:"#",children:"Afval"}),e.jsx(n.Link,{href:"#",children:"Bestuur en organisatie"}),e.jsx(n.Link,{href:"#",children:"Bouw- en verkeersprojecten"}),e.jsx(n.Link,{href:"#",children:"Burgerzaken"}),e.jsx(n.Link,{href:"#",children:"Diversiteit"}),e.jsx(n.Link,{href:"#",children:"Gemeentebelastingen"}),e.jsx(n.Link,{href:"#",children:"Gezondheidsdienst (GGD)"}),e.jsx(n.Link,{href:"#",children:"Kunst en cultuur"}),e.jsx(n.Link,{href:"#",children:"Ondernemen"}),e.jsx(n.Link,{href:"#",children:"Onderwijs en jeugd"}),e.jsx(n.Link,{href:"#",children:"Parkeren"}),e.jsx(n.Link,{href:"#",children:"Sport"}),e.jsx(n.Link,{href:"#",children:"Stadsdelen"}),e.jsx(n.Link,{href:"#",children:"Subsidies"}),e.jsx(n.Link,{href:"#",children:"Vacatures"}),e.jsx(n.Link,{href:"#",children:"Verkeer en vervoer"}),e.jsx(n.Link,{href:"#",children:"Vrije tijd"}),e.jsx(n.Link,{href:"#",children:"Werk aan de weg"}),e.jsx(n.Link,{href:"#",children:"Werk en inkomen"}),e.jsx(n.Link,{href:"#",children:"Wonen en leefomgeving"})]})})]})},"nav")}},L={args:{children:e.jsxs(t,{paddingVertical:"medium",children:[e.jsxs(t.Cell,{span:{narrow:4,medium:8,wide:8},children:[e.jsx(k,{level:3,size:"level-3",children:"Thema’s"}),e.jsx(i.ListCategory,{children:e.jsxs(n,{children:[e.jsx(n.Link,{href:"#",size:"large",children:"Afval"}),e.jsx(n.Link,{href:"#",size:"large",children:"Bestuur en organisatie"}),e.jsx(n.Link,{href:"#",size:"large",children:"Bouw- en verkeersprojecten"}),e.jsx(n.Link,{href:"#",size:"large",children:"Burgerzaken"}),e.jsx(n.Link,{href:"#",size:"large",children:"Diversiteit"}),e.jsx(n.Link,{href:"#",size:"large",children:"Gemeentebelastingen"}),e.jsx(n.Link,{href:"#",size:"large",children:"Gezondheidsdienst (GGD)"}),e.jsx(n.Link,{href:"#",size:"large",children:"Kunst en cultuur"}),e.jsx(n.Link,{href:"#",size:"large",children:"Ondernemen"}),e.jsx(n.Link,{href:"#",size:"large",children:"Onderwijs en jeugd"}),e.jsx(n.Link,{href:"#",size:"large",children:"Parkeren"}),e.jsx(n.Link,{href:"#",size:"large",children:"Sport"}),e.jsx(n.Link,{href:"#",size:"large",children:"Stadsdelen"}),e.jsx(n.Link,{href:"#",size:"large",children:"Subsidies"})]})})]}),e.jsxs(t.Cell,{span:{narrow:4,medium:8,wide:4},children:[e.jsx(k,{level:3,size:"level-3",children:"Categorieën"}),e.jsx(i.ListCategory,{children:e.jsxs(n,{children:[e.jsx(n.Link,{href:"#",children:"Vacatures"}),e.jsx(n.Link,{href:"#",children:"Verkeer en vervoer"}),e.jsx(n.Link,{href:"#",children:"Vrije tijd"}),e.jsx(n.Link,{href:"#",children:"Werk aan de weg"}),e.jsx(n.Link,{href:"#",children:"Werk en inkomen"}),e.jsx(n.Link,{href:"#",children:"Wonen en leefomgeving"})]})}),e.jsx(k,{level:3,size:"level-3",children:"Snel naar"}),e.jsx(i.ListCategory,{children:e.jsxs(n,{children:[e.jsx(n.Link,{href:"#",children:"Vacatures"}),e.jsx(n.Link,{href:"#",children:"Verkeer en vervoer"}),e.jsx(n.Link,{href:"#",children:"Vrije tijd"}),e.jsx(n.Link,{href:"#",children:"Werk aan de weg"})]})})]})]},"nav")}};var h,o,g;s.parameters={...s.parameters,docs:{...(h=s.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + children: + + + Alle onderwerpen + + + + Afval + Bestuur en organisatie + Bouw- en verkeersprojecten + Burgerzaken + Diversiteit + Gemeentebelastingen + Gezondheidsdienst (GGD) + Kunst en cultuur + Ondernemen + Onderwijs en jeugd + Parkeren + Sport + Stadsdelen + Subsidies + Vacatures + Verkeer en vervoer + Vrije tijd + Werk aan de weg + Werk en inkomen + Wonen en leefomgeving + + + + + } +}`,...(g=(o=s.parameters)==null?void 0:o.docs)==null?void 0:g.source}}};var c,f,u;L.parameters={...L.parameters,docs:{...(c=L.parameters)==null?void 0:c.docs,source:{originalSource:`{ + args: { + children: + + + Thema’s + + + + + Afval + + + Bestuur en organisatie + + + Bouw- en verkeersprojecten + + + Burgerzaken + + + Diversiteit + + + Gemeentebelastingen + + + Gezondheidsdienst (GGD) + + + Kunst en cultuur + + + Ondernemen + + + Onderwijs en jeugd + + + Parkeren + + + Sport + + + Stadsdelen + + + Subsidies + + + + + + + Categorieën + + + + Vacatures + Verkeer en vervoer + Vrije tijd + Werk aan de weg + Werk en inkomen + Wonen en leefomgeving + + + + Snel naar + + + + Vacatures + Verkeer en vervoer + Vrije tijd + Werk aan de weg + + + + + } +}`,...(u=(f=L.parameters)==null?void 0:f.docs)==null?void 0:u.source}}};const M=["Default","MultipleCategories"],w=Object.freeze(Object.defineProperty({__proto__:null,Default:s,MultipleCategories:L,__namedExportsOrder:M,default:v},Symbol.toStringTag,{value:"Module"}));export{w as M,L as a}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/OrderedList.docs-NHdgqbtQ.js b/demo-npm_and_yarn/vite-6.0.3/assets/OrderedList.docs-NHdgqbtQ.js new file mode 100644 index 0000000000..ab92a70da3 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/OrderedList.docs-NHdgqbtQ.js @@ -0,0 +1,49 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as i}from"./index-3rgQkYFR.js";import{ae as o,aq as a,ar as h,as as l,at as r}from"./index-CF71P72j.js";import{O as d,T as c,S as m,D as p,W as x,I as u,a as j}from"./OrderedList.stories-Qx3n8PUi.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./exampleContent-hIIPvEhU.js";const f=` + +# Ordered List + +An ordered list is a vertical group of related content with an order. +This list can have 2 levels. +The first level has numbers as list markers. +The second level uses letters in alphabetical order. +List items indent their text by a fixed distance. + +## Design + +The list uses ascending numbers as markers, providing enough space for numbers up to 99. +Extra white space between items enhances the distinction, mainly when they consist of multiple lines of text. +`;/*@license CC0-1.0*/function t(s){const n={code:"code",h2:"h2",h3:"h3",p:"p",...i(),...s.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(o,{of:d}),` +`,e.jsx(a,{children:f}),` +`,e.jsx(h,{}),` +`,e.jsx(l,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"two-levels",children:"Two levels"}),` +`,e.jsx(n.p,{children:`A list may have one nested level. +In this case, lowercase letters are used as markers.`}),` +`,e.jsx(r,{of:c}),` +`,e.jsx(n.h3,{id:"starting-number",children:"Starting number"}),` +`,e.jsxs(n.p,{children:[`When necessary, the list can start with a higher number. +Use the HTML attribute `,e.jsx(n.code,{children:"start"}),"."]}),` +`,e.jsx(r,{of:m}),` +`,e.jsx(n.h3,{id:"reverse-order",children:"Reverse order"}),` +`,e.jsxs(n.p,{children:[`The numbers can also be in reverse order. +Use the HTML attribute `,e.jsx(n.code,{children:"reversed"}),"."]}),` +`,e.jsx(r,{of:p}),` +`,e.jsx(n.h3,{id:"without-markers",children:"Without markers"}),` +`,e.jsx(n.p,{children:`An overview of articles or search results can be presented as an ordered can be seen as an unordered list. +In such cases, apply the list semantics while hiding markers. +This helps screen readers understand and navigate the list.`}),` +`,e.jsxs(n.p,{children:[`Note: each item typically contains a container with headings and other text components in this variant. +Therefore, it does not define typography for the items and the `,e.jsx(n.code,{children:"inverseColor"})," prop has no effect."]}),` +`,e.jsx(n.p,{children:"For example, here are three news articles:"}),` +`,e.jsx(r,{of:x}),` +`,e.jsx(n.h3,{id:"inverse-colour",children:"Inverse colour"}),` +`,e.jsxs(n.p,{children:["Set the ",e.jsx(n.code,{children:"inverseColor"}),` prop if the List sits on a dark background. +This ensures the colour of the text provides enough contrast. +When nesting lists, set the prop on all lists.`]}),` +`,e.jsx(r,{of:u}),` +`,e.jsx(n.h3,{id:"small-text",children:"Small text"}),` +`,e.jsx(n.p,{children:"Use a list with a smaller font size in form descriptions and captions and the like."}),` +`,e.jsx(r,{of:j})]})}function O(s={}){const{wrapper:n}={...i(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(t,{...s})}):t(s)}export{O as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/OrderedList.stories-Qx3n8PUi.js b/demo-npm_and_yarn/vite-6.0.3/assets/OrderedList.stories-Qx3n8PUi.js new file mode 100644 index 0000000000..9c7f14656b --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/OrderedList.stories-Qx3n8PUi.js @@ -0,0 +1,76 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{H as h,P as t}from"./index.esm-kzH9sPjb.js";import{d as q}from"./exampleContent-hIIPvEhU.js";import{c as E}from"./clsx-B-dksMZM.js";import{r as H}from"./index-RigO-4kf.js";const A=H.forwardRef(({children:s,className:a,...u},p)=>e.jsx("li",{ref:p,className:E("ams-ordered-list__item",a),...u,children:s}));A.displayName="OrderedList.Item";try{OrderedList.Item.displayName="OrderedList.Item",OrderedList.Item.__docgenInfo={description:"",displayName:"OrderedList.Item",props:{}}}catch{}const G=H.forwardRef(({children:s,className:a,inverseColor:u,markers:p=!0,size:g,...R},Z)=>e.jsx("ol",{ref:Z,className:E("ams-ordered-list",u&&"ams-ordered-list--inverse-color",!p&&"ams-ordered-list--no-markers",g&&`ams-ordered-list--${g}`,a),...R,children:s}));G.displayName="OrderedList";const r=Object.assign(G,{Item:A});try{r.displayName="OrderedList",r.__docgenInfo={description:"",displayName:"OrderedList",props:{inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}},markers:{defaultValue:{value:"true"},description:"Whether the list items show a marker.",name:"markers",required:!1,type:{name:"boolean"}},size:{defaultValue:null,description:"The size of the text.",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'}]}}}}}catch{}const M=q().map((s,a)=>e.jsx(r.Item,{children:s},a)),V={title:"Components/Text/Ordered List",component:r,args:{children:M,inverseColor:!1,markers:void 0,reversed:void 0,start:void 0},argTypes:{reversed:{control:"boolean",description:"Numbers the items from the highest value down."},start:{control:"number",description:"The value for the first list item’s marker."},size:{control:{type:"radio",labels:{small:"small",undefined:"medium"}},options:["small",void 0]}}},d={},n={render:s=>e.jsxs(r,{...s,children:[e.jsxs(r.Item,{children:["Stadsdeel West",e.jsxs(r,{...s,children:[e.jsx(r.Item,{children:"Bos en Lommer"}),e.jsx(r.Item,{children:"Oud West / De Baarsjes"}),e.jsx(r.Item,{children:"Westerpark"})]})]}),e.jsxs(r.Item,{children:["Stadsdeel Nieuw-West",e.jsxs(r,{...s,children:[e.jsx(r.Item,{children:"De Aker, Sloten en Nieuw Sloten"}),e.jsx(r.Item,{children:"Geuzenveld, Slotermeer en Sloterdijken"}),e.jsx(r.Item,{children:"Osdorp"}),e.jsx(r.Item,{children:"Slotervaart"})]})]})]})},i={args:{children:[e.jsx(r.Item,{children:"Zes"},6),e.jsx(r.Item,{children:"Zeven"},7),e.jsx(r.Item,{children:"Acht"},8)],start:6}},o={args:{children:[e.jsx(r.Item,{children:"Drie"},3),e.jsx(r.Item,{children:"Twee"},2),e.jsx(r.Item,{children:"Eén"},1)],reversed:!0,start:3}},l={args:{children:[e.jsxs(r.Item,{children:[e.jsx(h,{size:"level-4",children:"Weg met steen, hallo extra groen en koelte"}),e.jsx(t,{children:"Sinds 2021 kwamen er maar liefst 60 nieuwe groene plekken bij in de stad. Groen is fijn en het verkoelt de stad in de zomer. Een paar voorbeelden."}),e.jsx(t,{size:"small",children:"16 augustus 2023"})]},1),e.jsxs(r.Item,{children:[e.jsx(h,{size:"level-4",children:"Amsterdam bindt de strijd aan met lawaaierige voertuigen"}),e.jsx(t,{children:"Deze zomer testen we of digitale borden langs de weg kunnen helpen om geluidsoverlast van voertuigen zoals motoren en auto’s tegen te gaan."}),e.jsx(t,{size:"small",children:"10 augustus 2023"})]},2),e.jsxs(r.Item,{children:[e.jsx(h,{size:"level-4",children:"Een prachtroute door de wonderlijke Baarsjes"}),e.jsx(t,{children:"In de Baarsjes zijn kunst en cultuur met elkaar vervlochten. We zetten een prachtige wandelroute voor u uit en laten zien hoe het was en hoe het nu is."}),e.jsx(t,{size:"small",children:"8 augustus 2023"})]},3)],markers:!1}},m={args:{inverseColor:!0},render:s=>e.jsx(r,{...s,children:e.jsxs(r.Item,{children:["Stadsdeel West",e.jsxs(r,{...s,children:[e.jsx(r.Item,{children:"Bos en Lommer"}),e.jsx(r.Item,{children:"Oud West / De Baarsjes"}),e.jsx(r.Item,{children:"Westerpark"})]})]})})},c={args:{size:"small"}};var I,O,L;d.parameters={...d.parameters,docs:{...(I=d.parameters)==null?void 0:I.docs,source:{originalSource:"{}",...(L=(O=d.parameters)==null?void 0:O.docs)==null?void 0:L.source}}};var j,v,x;n.parameters={...n.parameters,docs:{...(j=n.parameters)==null?void 0:j.docs,source:{originalSource:`{ + render: args => + + Stadsdeel West + + Bos en Lommer + Oud West / De Baarsjes + Westerpark + + + + Stadsdeel Nieuw-West + + De Aker, Sloten en Nieuw Sloten + Geuzenveld, Slotermeer en Sloterdijken + Osdorp + Slotervaart + + + +}`,...(x=(v=n.parameters)==null?void 0:v.docs)==null?void 0:x.source}}};var k,f,z;i.parameters={...i.parameters,docs:{...(k=i.parameters)==null?void 0:k.docs,source:{originalSource:`{ + args: { + children: [Zes, Zeven, Acht], + start: 6 + } +}`,...(z=(f=i.parameters)==null?void 0:f.docs)==null?void 0:z.source}}};var S,w,y;o.parameters={...o.parameters,docs:{...(S=o.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + children: [Drie, Twee, Eén], + reversed: true, + start: 3 + } +}`,...(y=(w=o.parameters)==null?void 0:w.docs)==null?void 0:y.source}}};var b,_,W;l.parameters={...l.parameters,docs:{...(b=l.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + children: [ + Weg met steen, hallo extra groen en koelte + + Sinds 2021 kwamen er maar liefst 60 nieuwe groene plekken bij in de stad. Groen is fijn en het verkoelt de + stad in de zomer. Een paar voorbeelden. + + 16 augustus 2023 + , + Amsterdam bindt de strijd aan met lawaaierige voertuigen + + Deze zomer testen we of digitale borden langs de weg kunnen helpen om geluidsoverlast van voertuigen zoals + motoren en auto’s tegen te gaan. + + 10 augustus 2023 + , + Een prachtroute door de wonderlijke Baarsjes + + In de Baarsjes zijn kunst en cultuur met elkaar vervlochten. We zetten een prachtige wandelroute voor u uit en + laten zien hoe het was en hoe het nu is. + + 8 augustus 2023 + ], + markers: false + } +}`,...(W=(_=l.parameters)==null?void 0:_.docs)==null?void 0:W.source}}};var N,D,P;m.parameters={...m.parameters,docs:{...(N=m.parameters)==null?void 0:N.docs,source:{originalSource:`{ + args: { + inverseColor: true + }, + render: args => + + Stadsdeel West + + Bos en Lommer + Oud West / De Baarsjes + Westerpark + + + +}`,...(P=(D=m.parameters)==null?void 0:D.docs)==null?void 0:P.source}}};var B,T,C;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`{ + args: { + size: 'small' + } +}`,...(C=(T=c.parameters)==null?void 0:T.docs)==null?void 0:C.source}}};const $=["Default","TwoLevels","StartingNumber","DescendingNumbers","WithoutMarkers","InverseColor","SmallText"],X=Object.freeze(Object.defineProperty({__proto__:null,Default:d,DescendingNumbers:o,InverseColor:m,SmallText:c,StartingNumber:i,TwoLevels:n,WithoutMarkers:l,__namedExportsOrder:$,default:V},Symbol.toStringTag,{value:"Module"}));export{o as D,m as I,X as O,i as S,n as T,l as W,c as a}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Overlap.docs-DW4SrTzA.js b/demo-npm_and_yarn/vite-6.0.3/assets/Overlap.docs-DW4SrTzA.js new file mode 100644 index 0000000000..ed92b65ed6 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Overlap.docs-DW4SrTzA.js @@ -0,0 +1,21 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as r}from"./index-3rgQkYFR.js";import{ae as t,aq as s,ar as a}from"./index-CF71P72j.js";import{O as l}from"./Overlap.stories-CIryYdPw.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const m=` + +# Overlap + +Displays two or more components on top of each other. +`;/*@license CC0-1.0*/function i(n){const o={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...r(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(t,{of:l}),` +`,e.jsx(s,{children:m}),` +`,e.jsx(o.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(o.h3,{id:"hero-image-with-search-field",children:"Hero image with Search Field"}),` +`,e.jsxs(o.p,{children:[`This allows for the use of a mood-setting image as a background. +A `,e.jsx(o.a,{href:"/docs/components-layout-grid--docs",children:"Grid"}),` provides horizontal space on both sides and columns for layout. +Note: the library does not yet offer an option to vertically center the form.`]}),` +`,e.jsx(a,{}),` +`,e.jsx(o.h2,{id:"guidelines",children:"Guidelines"}),` +`,e.jsxs(o.ul,{children:[` +`,e.jsxs(o.li,{children:["Follow ",e.jsx(o.a,{href:"/docs/components-media-image--docs#guidelines",children:"the general guidelines for images"}),"."]}),` +`,e.jsx(o.li,{children:`Use a sufficiently large image. +The aspect ratio of 32:9 is most suitable.`}),` +`]})]})}function E(n={}){const{wrapper:o}={...r(),...n.components};return o?e.jsx(o,{...n,children:e.jsx(i,{...n})}):i(n)}export{E as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Overlap.stories-CIryYdPw.js b/demo-npm_and_yarn/vite-6.0.3/assets/Overlap.stories-CIryYdPw.js new file mode 100644 index 0000000000..c193e10050 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Overlap.stories-CIryYdPw.js @@ -0,0 +1,22 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{I as d,G as o,S as a}from"./index.esm-kzH9sPjb.js";import{c as u}from"./clsx-B-dksMZM.js";import{r as h}from"./index-RigO-4kf.js";const s=h.forwardRef(({children:r,className:n,...c},m)=>e.jsx("div",{...c,ref:m,className:u("ams-overlap",n),children:r}));s.displayName="Overlap";try{s.displayName="Overlap",s.__docgenInfo={description:"",displayName:"Overlap",props:{}}}catch{}const x={title:"Components/Layout/Overlap",component:s},t={args:{children:[e.jsx(d,{alt:"",aspectRatio:"2x-wide",sizes:"(max-width: 36rem) 640px, (max-width: 68rem) 1280px, 1600px",src:"https://picsum.photos/1600/500",srcSet:"https://picsum.photos/640/200 640w, https://picsum.photos/1280/400 1280w, https://picsum.photos/1600/500 1600w"},1),e.jsx(o,{style:{alignSelf:"center"},children:e.jsx(o.Cell,{span:{narrow:4,medium:6,wide:8},start:{narrow:1,medium:2,wide:3},children:e.jsxs(a,{onSubmit:r=>r.preventDefault(),children:[e.jsx(a.Input,{label:"Zoeken",placeholder:"Wat kunnen we voor u vinden?"}),e.jsx(a.Button,{})]})})},2)]}};var p,i,l;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + children: [, + + e.preventDefault()}> + + + + + ] + } +}`,...(l=(i=t.parameters)==null?void 0:i.docs)==null?void 0:l.source}}};const w=["Default"],y=Object.freeze(Object.defineProperty({__proto__:null,Default:t,__namedExportsOrder:w,default:x},Symbol.toStringTag,{value:"Module"}));export{t as D,y as O}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/PageHeading.docs-DBCElvot.js b/demo-npm_and_yarn/vite-6.0.3/assets/PageHeading.docs-DBCElvot.js new file mode 100644 index 0000000000..9c61f8b9c8 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/PageHeading.docs-DBCElvot.js @@ -0,0 +1,30 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as i,aq as a,ar as r,as as h,at as p}from"./index-CF71P72j.js";import{P as m,I as c}from"./PageHeading.stories-xdugF2bU.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";const d=` + +# Page Heading + +The page heading component is a prominent text at the beginning of a page, immediately after the header. +Use this component for a name, title, or motto. + +## Guidelines + +- Use this component to capture the user’s attention. +- Only use this component once per page, typically only on the homepage. +- Avoid using it if you need to display long pieces of text; the text should be short and precise. + +## Relevant WCAG requirements + +The page heading component is a variant of a heading level 1 with a distinct style. +When using this component, ensure that the heading hierarchy of the page remains logical. + +For this component, the same WCAG requirements apply as for [the heading component](/docs/components-text-heading--docs). +`;/*@license CC0-1.0*/function o(t){const n={code:"code",h2:"h2",h3:"h3",p:"p",...s(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:m}),` +`,e.jsx(a,{children:d}),` +`,e.jsx(r,{}),` +`,e.jsx(h,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"inverse-colour",children:"Inverse colour"}),` +`,e.jsxs(n.p,{children:["Set the ",e.jsx(n.code,{children:"inverseColor"}),` prop if the Page Heading sits on a dark background. +This ensures the colour of the text provides enough contrast.`]}),` +`,e.jsx(p,{of:c})]})}function b(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{b as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/PageHeading.stories-xdugF2bU.js b/demo-npm_and_yarn/vite-6.0.3/assets/PageHeading.stories-xdugF2bU.js new file mode 100644 index 0000000000..e06517d8ab --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/PageHeading.stories-xdugF2bU.js @@ -0,0 +1,8 @@ +import{j as u}from"./jsx-runtime-BjgbQsUx.js";import{c as f}from"./clsx-B-dksMZM.js";import{r as _}from"./index-RigO-4kf.js";const a=_.forwardRef(({children:o,className:l,inverseColor:p,...m},g)=>u.jsx("h1",{...m,ref:g,className:f("ams-page-heading",p&&"ams-page-heading--inverse-color",l),children:o}));a.displayName="PageHeading";try{a.displayName="PageHeading",a.__docgenInfo={description:"",displayName:"PageHeading",props:{inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}}}}}catch{}/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const h={title:"Components/Text/Page Heading",component:a,args:{children:"Gemeente Amsterdam",inverseColor:!1},argTypes:{children:{description:"The heading text.",table:{disable:!1}}}},e={},r={args:{inverseColor:!0}};var s,t,n;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:"{}",...(n=(t=e.parameters)==null?void 0:t.docs)==null?void 0:n.source}}};var i,c,d;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{ + args: { + inverseColor: true + } +}`,...(d=(c=r.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};const x=["Default","InverseColour"],b=Object.freeze(Object.defineProperty({__proto__:null,Default:e,InverseColour:r,__namedExportsOrder:x,default:h},Symbol.toStringTag,{value:"Module"}));export{r as I,b as P}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/PageMenu.docs-D5O3mB3K.js b/demo-npm_and_yarn/vite-6.0.3/assets/PageMenu.docs-D5O3mB3K.js new file mode 100644 index 0000000000..0671f9dedd --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/PageMenu.docs-D5O3mB3K.js @@ -0,0 +1,40 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as r,aq as a,ar as d,as as h,at as o}from"./index-CF71P72j.js";import{P as m,A as l,W as c}from"./PageMenu.stories-D4cAVDKU.js";import{S as u}from"./StatusBadge-DiE14TfE.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-CPc1noYl.js";import"./clsx-B-dksMZM.js";import"./Icon-B4wlDyQ3.js";import"./Badge-BvbF-Lgn.js";const p=` + +# Page Menu + +A small set of links for use in the Header and Footer. + +## Guidelines + +- Limit the amount of menu items in the Header to 5 items or less, including ‘Search’ and ‘Menu’. +- The menu should fit on a single line and is right-aligned. +- The menu in the footer is left-aligned. +- Submenus are not allowed. +- The ‘Menu’ button opens the Mega Menu. +- On narrow screens, menu items other than ‘Search’ and ‘Menu’ move from the Page Menu to the Mega Menu. + +### Using links with routing libraries + +Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--docs) on how to integrate links with external routing libraries. + +## Relevant WCAG requirements + +- [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html) + +Page Menu is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. +`;/*@license CC0-1.0*/function i(t){const n={a:"a",h2:"h2",h3:"h3",p:"p",...s(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(r,{of:m}),` +`,e.jsx(u,{reason:"May be affected by changes to Header and/or have its name changed."}),` +`,e.jsx(a,{children:p}),` +`,e.jsx(d,{}),` +`,e.jsx(h,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"alignment",children:"Alignment"}),` +`,e.jsxs(n.p,{children:["In the ",e.jsx(n.a,{href:"/docs/components-containers-header--docs",children:"Header"}),", the menu aligns to the end of the line."]}),` +`,e.jsx(o,{of:l}),` +`,e.jsx(n.h3,{id:"wrapping",children:"Wrapping"}),` +`,e.jsxs(n.p,{children:[`If all menu items do not fit on a single line, e.g. on a narrow screen or with zoomed-in text, they wrap to new lines. +This is often useful in the `,e.jsx(n.a,{href:"/docs/components-containers-footer--docs",children:"Footer"}),`. +The Header has its own responsive behaviour; its Page Menu should be configured not to wrap.`]}),` +`,e.jsx(o,{of:c})]})}function E(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{E as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/PageMenu.stories-D4cAVDKU.js b/demo-npm_and_yarn/vite-6.0.3/assets/PageMenu.stories-D4cAVDKU.js new file mode 100644 index 0000000000..cc4b1e6c05 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/PageMenu.stories-D4cAVDKU.js @@ -0,0 +1,44 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{j as _}from"./index.esm-CPc1noYl.js";import{c as P}from"./clsx-B-dksMZM.js";import{r as M}from"./index-RigO-4kf.js";import{I as v}from"./Icon-B4wlDyQ3.js";const y=M.forwardRef(({children:r,className:t,icon:o,...c},u)=>e.jsx("li",{children:e.jsxs("a",{...c,ref:u,className:P("ams-page-menu__link",t),children:[r,o&&e.jsx(v,{svg:o,size:"level-6"})]})}));y.displayName="PageMenu.Link";try{PageMenu.Link.displayName="PageMenu.Link",PageMenu.Link.__docgenInfo={description:"",displayName:"PageMenu.Link",props:{icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"Function"}}}}}catch{}const j=M.forwardRef(({alignEnd:r,children:t,className:o,wrap:c=!0,...u},x)=>e.jsx("ul",{...u,className:P("ams-page-menu",r&&"ams-page-menu--align-end",!c&&"ams-page-menu--no-wrap",o),ref:x,children:t}));j.displayName="PageMenu";const n=Object.assign(j,{Link:y});try{n.displayName="PageMenu",n.__docgenInfo={description:"",displayName:"PageMenu",props:{alignEnd:{defaultValue:null,description:"Whether the items align to the end margin. Set to `true` if the Page Menu itself does so.",name:"alignEnd",required:!1,type:{name:"boolean"}},wrap:{defaultValue:{value:"true"},description:"Whether menu items should wrap if they don’t fit on a single row.",name:"wrap",required:!1,type:{name:"boolean"}}}}}catch{}const w={title:"Components/Navigation/Page Menu",component:n,args:{alignEnd:!1,wrap:void 0}},a={args:{children:[e.jsx(n.Link,{href:"#",children:"Over deze site"},1),e.jsx(n.Link,{href:"#",children:"Privacy"},2),e.jsx(n.Link,{href:"#",children:"Cookies"},3)]}},i={args:{alignEnd:!0,children:[e.jsx(n.Link,{href:"#",lang:"en",children:"English"},1),e.jsx(n.Link,{href:"#",children:"Contact"},2),e.jsx(n.Link,{href:"#",icon:_,children:"Zoeken"},3)]}},s={args:{children:[e.jsx(n.Link,{href:"#",children:"Onderzoeken"},1),e.jsx(n.Link,{href:"#",children:"Bezoeken"},2),e.jsx(n.Link,{href:"#",children:"Archiveren"},3),e.jsx(n.Link,{href:"#",children:"Nieuws"},4),e.jsx(n.Link,{href:"#",children:"Themasites"},5),e.jsx(n.Link,{href:"#",children:"Onderwijs"},6),e.jsx(n.Link,{href:"#",children:"Steun ons"},7),e.jsx(n.Link,{href:"#",children:"Organisatie"},8),e.jsx(n.Link,{href:"#",children:"Contact"},9)]}};var g,l,d;a.parameters={...a.parameters,docs:{...(g=a.parameters)==null?void 0:g.docs,source:{originalSource:`{ + args: { + children: [ + Over deze site + , + Privacy + , + Cookies + ] + } +}`,...(d=(l=a.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};var k,h,p;i.parameters={...i.parameters,docs:{...(k=i.parameters)==null?void 0:k.docs,source:{originalSource:`{ + args: { + alignEnd: true, + children: [ + English + , + Contact + , + Zoeken + ] + } +}`,...(p=(h=i.parameters)==null?void 0:h.docs)==null?void 0:p.source}}};var m,f,L;s.parameters={...s.parameters,docs:{...(m=s.parameters)==null?void 0:m.docs,source:{originalSource:`{ + args: { + children: [ + Onderzoeken + , + Bezoeken + , + Archiveren + , + Nieuws + , + Themasites + , + Onderwijs + , + Steun ons + , + Organisatie + , + Contact + ] + } +}`,...(L=(f=s.parameters)==null?void 0:f.docs)==null?void 0:L.source}}};const O=["Default","Alignment","Wrapping"],b=Object.freeze(Object.defineProperty({__proto__:null,Alignment:i,Default:a,Wrapping:s,__namedExportsOrder:O,default:w},Symbol.toStringTag,{value:"Module"}));export{i as A,a as D,b as P,s as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Pagination.docs-CFMmlRne.js b/demo-npm_and_yarn/vite-6.0.3/assets/Pagination.docs-CFMmlRne.js new file mode 100644 index 0000000000..317d70b8b4 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Pagination.docs-CFMmlRne.js @@ -0,0 +1,28 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as i}from"./index-3rgQkYFR.js";import{ae as o,aq as s,ar as r,as as l}from"./index-CF71P72j.js";import{P as p}from"./Pagination.stories-CMoGa4MD.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-CPc1noYl.js";import"./clsx-B-dksMZM.js";import"./Icon-B4wlDyQ3.js";const g=` + +# Pagination + +Pagination is a navigation element used to navigate between multiple pages of overview lists. +This is commonly used for search results or a list of news articles. +In cases where overview lists are too long to display on a single page, pagination can provide a clearer and more functional way to divide the content across multiple pages. +Pagination indicates the current page and allows users to navigate to other pages. + +## Guidelines + +- Use pagination only when an overview list is too long to display on a single page. +- Place pagination below the overview list. +- Pagination should not be displayed if there is only one page. +- Redirect users to the first page if they enter a URL with a page number that doesn’t exist. +- Pagination can be combined with a count at the top of the page indicating “Page # of ##.” +- Start a page with an overview list at the top after changing the page. +- Make sure that the visible and accessible labels for the ‘previous’ and ‘next’ buttons convey the same meaning at all times – e.g. don’t update one and forget the other. + +## Relevant WCAG rules + +Pagination is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. +`;/*@license CC0-1.0*/function a(t){return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(o,{of:p}),` +`,e.jsx(s,{children:g}),` +`,e.jsx(r,{}),` +`,e.jsx(l,{})]})}function D(t={}){const{wrapper:n}={...i(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(a,{...t})}):a()}export{D as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Pagination.stories-CMoGa4MD.js b/demo-npm_and_yarn/vite-6.0.3/assets/Pagination.stories-CMoGa4MD.js new file mode 100644 index 0000000000..f6043c65bf --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Pagination.stories-CMoGa4MD.js @@ -0,0 +1 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{l as M,e as H}from"./index.esm-CPc1noYl.js";import{c as b}from"./clsx-B-dksMZM.js";import{r as c}from"./index-RigO-4kf.js";import{I as x}from"./Icon-B4wlDyQ3.js";function I(o,i,g){const s=Math.min(i,Math.max(g,5)),u=1;let r=o-Math.floor(s/2);return r=Math.max(r,u),r=Math.min(r,u+i-s),Array.from({length:s},(l,t)=>r+t).reduce((l,t,d)=>d===0&&t!==1?[1,"firstSpacer"]:i>s&&d===s-2&&o{const[n,L]=c.useState(r),C=c.useMemo(()=>I(n,t,i),[n,t,i]),h=a=>{u!==void 0&&u(a),L(a)},T=()=>{h(n-1)},q=()=>{h(n+1)},v=c.useId();return t<=1?null:e.jsxs("nav",{...V,"aria-labelledby":v,className:b("ams-pagination",o),ref:P,children:[e.jsx("span",{id:v,className:"ams-visually-hidden",children:d}),e.jsxs("ol",{className:"ams-pagination__list",children:[e.jsx("li",{children:e.jsxs("button",{className:"ams-pagination__button",disabled:n===1,onClick:T,type:"button",children:[e.jsx(x,{svg:M,size:"level-5"}),e.jsx("span",{className:"ams-visually-hidden",children:l}),e.jsx("span",{"aria-hidden":!0,children:f})]})}),C.map(a=>typeof a=="number"?e.jsx("li",{children:e.jsxs("button",{"aria-current":a===n?!0:void 0,className:b("ams-pagination__button",a===n&&"ams-pagination__button--current"),onClick:()=>a!==n&&h(a),tabIndex:a===n?-1:0,type:"button",children:[e.jsx("span",{className:"ams-visually-hidden",children:a===n?`Pagina ${a}`:`Ga naar pagina ${a}`}),e.jsx("span",{"aria-hidden":!0,children:a})]})},a):e.jsx("li",{"aria-hidden":!0,"data-testid":a,children:"…"},a)),e.jsx("li",{children:e.jsxs("button",{className:"ams-pagination__button",disabled:n===t,onClick:q,type:"button",children:[e.jsx("span",{className:"ams-visually-hidden",children:s}),e.jsx("span",{"aria-hidden":!0,children:g}),e.jsx(x,{svg:H,size:"level-5"})]})})]})]})});p.displayName="Pagination";try{p.displayName="Pagination",p.__docgenInfo={description:"",displayName:"Pagination",props:{maxVisiblePages:{defaultValue:{value:"7"},description:"The maximum amount of pages shown. Minimum value: 5.",name:"maxVisiblePages",required:!1,type:{name:"number"}},nextLabel:{defaultValue:{value:"volgende"},description:"The visible label for the next page-button.",name:"nextLabel",required:!1,type:{name:"string"}},nextVisuallyHiddenLabel:{defaultValue:{value:"Volgende pagina"},description:"The accessible name for the next page-button.",name:"nextVisuallyHiddenLabel",required:!1,type:{name:"string"}},onPageChange:{defaultValue:null,description:"A function to run when the page number changes.",name:"onPageChange",required:!1,type:{name:"((page: number) => void)"}},page:{defaultValue:{value:"1"},description:"The current page number.",name:"page",required:!1,type:{name:"number"}},previousLabel:{defaultValue:{value:"vorige"},description:"The visible label for the previous page-button.",name:"previousLabel",required:!1,type:{name:"string"}},previousVisuallyHiddenLabel:{defaultValue:{value:"Vorige pagina"},description:"The accessible name for the previous page-button.",name:"previousVisuallyHiddenLabel",required:!1,type:{name:"string"}},totalPages:{defaultValue:null,description:"The total amount of pages.",name:"totalPages",required:!0,type:{name:"number"}},visuallyHiddenLabel:{defaultValue:{value:"Paginering"},description:"The accessible name for the Pagination component.",name:"visuallyHiddenLabel",required:!1,type:{name:"string"}}}}}catch{}const R={title:"Components/Navigation/Pagination",component:p,args:{page:1,maxVisiblePages:7,totalPages:10},argTypes:{onPageChange:{action:"page changed"},page:{control:{type:"number",min:1}}},decorators:[(o,{args:i})=>e.jsx("div",{id:"ams-docs-custom-root",children:e.jsx(o,{})},JSON.stringify(i))],parameters:{html:{root:"#ams-docs-custom-root"}}},m={};var y,_,j;m.parameters={...m.parameters,docs:{...(y=m.parameters)==null?void 0:y.docs,source:{originalSource:"{}",...(j=(_=m.parameters)==null?void 0:_.docs)==null?void 0:j.source}}};const k=["Default"],N=Object.freeze(Object.defineProperty({__proto__:null,Default:m,__namedExportsOrder:k,default:R},Symbol.toStringTag,{value:"Module"}));export{N as P}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Paragraph-B2U4A2CY.js b/demo-npm_and_yarn/vite-6.0.3/assets/Paragraph-B2U4A2CY.js new file mode 100644 index 0000000000..3fb0ce2131 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Paragraph-B2U4A2CY.js @@ -0,0 +1 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{c as i}from"./clsx-B-dksMZM.js";import{r as n}from"./index-RigO-4kf.js";const a=n.forwardRef(({children:e,className:o,inverseColor:s,size:r,...p},l)=>t.jsx("p",{ref:l,className:i("ams-paragraph",r&&`ams-paragraph--${r}`,s&&"ams-paragraph--inverse-color",o),...p,children:e}));a.displayName="Paragraph";try{a.displayName="Paragraph",a.__docgenInfo={description:"",displayName:"Paragraph",props:{inverseColor:{defaultValue:null,description:"Changes the text colour for readability on a dark background.",name:"inverseColor",required:!1,type:{name:"boolean"}},size:{defaultValue:null,description:"The size of the text.",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"large"'}]}}}}}catch{}export{a as P}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Paragraph.docs-B1l_joC1.js b/demo-npm_and_yarn/vite-6.0.3/assets/Paragraph.docs-B1l_joC1.js new file mode 100644 index 0000000000..c192f22f04 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Paragraph.docs-B1l_joC1.js @@ -0,0 +1,49 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as s,aq as i,ar as h,as as p,at as a}from"./index-CF71P72j.js";import{P as l,L as c,S as d,I as g}from"./Paragraph.stories--7CE_aZk.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./exampleContent-hIIPvEhU.js";import"./Paragraph-B2U4A2CY.js";import"./clsx-B-dksMZM.js";const m=` + +# Paragraph + +Represents a paragraph of running text, form instructions, and other standalone text fragments. + +## Guidelines + +- Group sentences that belong together into a paragraph. + Start a new paragraph when the text shifts to a different topic or has its own purpose. +- Consider whether a paragraph with more than 7 sentences or 140 words would be clearer if you divide the text into two paragraphs. + Texts with not overly long paragraphs are easier to understand, and grouping makes information quicker to locate. + +## Relevant WCAG rules + +- [WCAG 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): Blocks that look like a paragraph are also recognized by a computer as a paragraph. +- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): The contrast of black text on a white background is high enough. +- [WCAG 1.4.4](https://www.w3.org/TR/WCAG21/#resize-text): Text can be resized up to twice its default size. +- [WCAG 1.4.10](https://www.w3.org/TR/WCAG21/#reflow): If the text is wider than the viewport, scrolling is not necessary to see all the text. +- [WCAG 1.4.12](https://www.w3.org/TR/WCAG21/#text-spacing): The mentioned style properties can be adjusted without making the text unreadable. +- [WCAG 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts): It is possible to indicate the language of the text. +- [WCAG 1.4.6](https://www.w3.org/TR/WCAG21/#contrast-enhanced): The contrast of black text on a white background is higher than 7:1. +- [WCAG 1.4.8](https://www.w3.org/TR/WCAG21/#visual-presentation): We do not meet all these requirements. + +## References + +- [MDN: \`

    \`: The Paragraph element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) +- [Hoe lang mag een alinea zijn? En waar hangt dat van af? - Taaladvies.net](https://taaladvies.net/lengte-van-alineas/) +`;/*@license CC0-1.0*/function r(n){const t={code:"code",h2:"h2",h3:"h3",p:"p",...o(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(s,{of:l}),` +`,e.jsx(i,{children:m}),` +`,e.jsx(h,{}),` +`,e.jsx(p,{}),` +`,e.jsx(t.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(t.h3,{id:"large-text",children:"Large text"}),` +`,e.jsx(t.p,{children:`Use this size only for the lead paragraph of a page. +It is not mandatory to use a lead paragraph, but there must be no more than 1 per page.`}),` +`,e.jsx(t.p,{children:`A lead paragraph introduces the page’s content. +Use this text to entice the reader to continue reading.`}),` +`,e.jsx(a,{of:c}),` +`,e.jsx(t.h3,{id:"small-text",children:"Small text"}),` +`,e.jsx(t.p,{children:`Use this size for auxiliary texts, captions, metadata, etc. +Keep these texts short.`}),` +`,e.jsx(a,{of:d}),` +`,e.jsx(t.h3,{id:"inverse-colour",children:"Inverse colour"}),` +`,e.jsxs(t.p,{children:["Set the ",e.jsx(t.code,{children:"inverseColor"}),` prop if the Paragraph sits on a dark background. +This ensures the colour of the text provides enough contrast.`]}),` +`,e.jsx(a,{of:g})]})}function z(n={}){const{wrapper:t}={...o(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(r,{...n})}):r(n)}export{z as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Paragraph.stories--7CE_aZk.js b/demo-npm_and_yarn/vite-6.0.3/assets/Paragraph.stories--7CE_aZk.js new file mode 100644 index 0000000000..8f5505a841 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Paragraph.stories--7CE_aZk.js @@ -0,0 +1,16 @@ +import{b as S}from"./exampleContent-hIIPvEhU.js";import{P as h}from"./Paragraph-B2U4A2CY.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const x=S(),T={title:"Components/Text/Paragraph",component:h,args:{children:x,inverseColor:!1},argTypes:{children:{description:"The paragraph text.",table:{disable:!1}},size:{control:{type:"radio",labels:{small:"small",undefined:"medium",large:"large"}},options:["small",void 0,"large"]}}},e={},r={args:{size:"large"}},a={args:{size:"small"}},s={args:{inverseColor:!0}};var o,t,l;e.parameters={...e.parameters,docs:{...(o=e.parameters)==null?void 0:o.docs,source:{originalSource:"{}",...(l=(t=e.parameters)==null?void 0:t.docs)==null?void 0:l.source}}};var n,c,p;r.parameters={...r.parameters,docs:{...(n=r.parameters)==null?void 0:n.docs,source:{originalSource:`{ + args: { + size: 'large' + } +}`,...(p=(c=r.parameters)==null?void 0:c.docs)==null?void 0:p.source}}};var m,i,g;a.parameters={...a.parameters,docs:{...(m=a.parameters)==null?void 0:m.docs,source:{originalSource:`{ + args: { + size: 'small' + } +}`,...(g=(i=a.parameters)==null?void 0:i.docs)==null?void 0:g.source}}};var d,u,f;s.parameters={...s.parameters,docs:{...(d=s.parameters)==null?void 0:d.docs,source:{originalSource:`{ + args: { + inverseColor: true + } +}`,...(f=(u=s.parameters)==null?void 0:u.docs)==null?void 0:f.source}}};const b=["Default","LargeText","SmallText","InverseColour"],z=Object.freeze(Object.defineProperty({__proto__:null,Default:e,InverseColour:s,LargeText:r,SmallText:a,__namedExportsOrder:b,default:T},Symbol.toStringTag,{value:"Module"}));export{s as I,r as L,z as P,a as S}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/PasswordInput.docs-BMBAptw8.js b/demo-npm_and_yarn/vite-6.0.3/assets/PasswordInput.docs-BMBAptw8.js new file mode 100644 index 0000000000..39f473df4a --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/PasswordInput.docs-BMBAptw8.js @@ -0,0 +1,45 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as i,aq as a,ar as d,as as h,at as t}from"./index-CF71P72j.js";import{P as p,I as c,a as l}from"./PasswordInput.stories-Bt1lB0jM.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const m=` + +# Password Input + +Helps users enter a password. + +## Guidelines + +- Use this component when the input requires sensitive information, like passwords or PINs. + It ensures that the input is not readable by others who might be looking at the screen. +- The characters entered are hidden, represented by squares. + +This component sets \`autocorrect="off"\` and \`spellcheck="false"\` to stop browsers automatically changing user input. +Passwords shouldn’t be checked for spelling or grammar. +This may also prevent posting the password to third-party plugins. +These props cannot be overridden. + +Consider setting the following attributes: + +1. Allow the user’s password manager to automatically fill the password through \`autocomplete="current-password"\`. + When asking for a new password, use \`autocomplete="new-password"\` instead. +2. Do not add a \`minlength\` attribute to ensure passwords meet a minimum length requirement. + This would prematurely indicate an error to the user – while they are still typing. +3. Do not add a \`maxlength\` attribute either. + Users will not get any feedback when their text input has been truncated, e.g. after pasting from a password manager. +4. If the password is a numeric PIN, add \`inputmode="numeric"\`. + Devices with virtual keyboards then switch to a numeric keypad layout which makes entering the password easier. + +Follow the [guidelines for asking for passwords](https://design-system.service.gov.uk/patterns/passwords/) of the GOV.UK Design System. +`;/*@license CC0-1.0*/function r(s){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...o(),...s.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:p}),` +`,e.jsx(a,{children:m}),` +`,e.jsx(d,{}),` +`,e.jsx(h,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"in-a-field",children:"In a Field"}),` +`,e.jsx(n.p,{children:"Use a Field to group a Password Input with a Label, description and / or an Error Message."}),` +`,e.jsxs(n.p,{children:["If you don’t need the description, remove its Paragraph and the ",e.jsx(n.code,{children:"aria-describedby"})," from the Password Input."]}),` +`,e.jsxs(n.p,{children:["Check ",e.jsx(n.a,{href:"/docs/components-forms-field--docs",children:"the Field docs"})," for more information on configuring it."]}),` +`,e.jsx(t,{of:c}),` +`,e.jsx(n.h3,{id:"in-a-field-with-validation",children:"In a Field with validation"}),` +`,e.jsxs(n.p,{children:["If the Password Input can become invalid, add an Error Message and its ",e.jsx(n.code,{children:"id"})," to the ",e.jsx(n.code,{children:"aria-describedby"})," attribute of the Password Input."]}),` +`,e.jsxs(n.p,{children:["Check ",e.jsx(n.a,{href:"/docs/components-forms-field--docs",children:"the Field docs"})," for more information on configuring it."]}),` +`,e.jsx(t,{of:l})]})}function E(s={}){const{wrapper:n}={...o(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(r,{...s})}):r(s)}export{E as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/PasswordInput.stories-Bt1lB0jM.js b/demo-npm_and_yarn/vite-6.0.3/assets/PasswordInput.stories-Bt1lB0jM.js new file mode 100644 index 0000000000..bde79eb0af --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/PasswordInput.stories-Bt1lB0jM.js @@ -0,0 +1,22 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{e as v,f as h,P as b,E as f}from"./index.esm-kzH9sPjb.js";import{c as y}from"./clsx-B-dksMZM.js";import{r as I}from"./index-RigO-4kf.js";const i=I.forwardRef(({className:r,dir:j,invalid:F,...x},P)=>e.jsx("input",{...x,"aria-invalid":F||void 0,autoCorrect:"off",className:y("ams-password-input",r),dir:j??"auto",ref:P,spellCheck:"false",type:"password"}));i.displayName="PasswordInput";try{i.displayName="PasswordInput",i.__docgenInfo={description:"",displayName:"PasswordInput",props:{invalid:{defaultValue:null,description:"Whether the value fails a validation rule.",name:"invalid",required:!1,type:{name:"boolean"}}}}}catch{}const _={title:"Components/Forms/Password Input",component:i,args:{disabled:!1,invalid:!1},argTypes:{disabled:{description:"Prevents interaction. Avoid if possible."}}},a={},s={render:r=>e.jsxs(v,{invalid:r.invalid,children:[e.jsx(h,{htmlFor:"input1",children:"Label"}),e.jsx(b,{id:"description1",size:"small",children:"Omschrijving."}),r.invalid&&e.jsx(f,{id:"error1",children:"Foutmelding."}),e.jsx(i,{"aria-describedby":`description1${r.invalid?" error1":""}`,id:"input1",...r})]})},d={args:{invalid:!0},render:r=>e.jsxs(v,{invalid:r.invalid,children:[e.jsx(h,{htmlFor:"input2",children:"Label"}),e.jsx(b,{id:"description2",size:"small",children:"Omschrijving."}),r.invalid&&e.jsx(f,{id:"error2",children:"Foutmelding."}),e.jsx(i,{"aria-describedby":`description2${r.invalid?" error2":""}`,id:"input2",...r})]})};var o,n,t;a.parameters={...a.parameters,docs:{...(o=a.parameters)==null?void 0:o.docs,source:{originalSource:"{}",...(t=(n=a.parameters)==null?void 0:n.docs)==null?void 0:t.source}}};var l,p,c;s.parameters={...s.parameters,docs:{...(l=s.parameters)==null?void 0:l.docs,source:{originalSource:`{ + render: args => + + + Omschrijving. + + {args.invalid && Foutmelding.} + + +}`,...(c=(p=s.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};var m,u,g;d.parameters={...d.parameters,docs:{...(m=d.parameters)==null?void 0:m.docs,source:{originalSource:`{ + args: { + invalid: true + }, + render: args => + + + Omschrijving. + + {args.invalid && Foutmelding.} + + +}`,...(g=(u=d.parameters)==null?void 0:u.docs)==null?void 0:g.source}}};const w=["Default","InAField","InAFieldWithValidation"],S=Object.freeze(Object.defineProperty({__proto__:null,Default:a,InAField:s,InAFieldWithValidation:d,__namedExportsOrder:w,default:_},Symbol.toStringTag,{value:"Module"}));export{s as I,S as P,d as a}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Radio.docs-C_0jC9XR.js b/demo-npm_and_yarn/vite-6.0.3/assets/Radio.docs-C_0jC9XR.js new file mode 100644 index 0000000000..ef261f1e7b --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Radio.docs-C_0jC9XR.js @@ -0,0 +1,42 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as r,aq as a,ar as d,as as c,at as i}from"./index-CF71P72j.js";import{R as l,I as h,a as m,W as p}from"./Radio.stories-BqLq-HKz.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const u=` + +# Radio + +Allows users to select one option from a list. + +## Guidelines + +- Do not assume that users will know how many options they can select based on the visual difference between Radios and Checkboxes alone. + If needed, add a hint explaining this, for example, ‘Select one option’. +- Order Radios alphabetically by default. + In some cases, it can be helpful to order them from most-to-least common options. + For example, you could order options for ‘Where do you live?’ based on population size. + However you should do this with extreme caution as it can reinforce bias. + If in doubt, order alphabetically. +- Labels should be concise. Try to keep labels shorter than 4 words. + +Use a [Checkbox](/docs/components-forms-checkbox--docs) when a user can select more than 1 option from a list. +`;/*@license CC0-1.0*/function t(n){const o={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...s(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(r,{of:l}),` +`,e.jsx(a,{children:u}),` +`,e.jsx(d,{}),` +`,e.jsx(c,{}),` +`,e.jsx(o.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(o.h3,{id:"in-a-field-set",children:"In a Field Set"}),` +`,e.jsx(o.p,{children:"Use a Field Set to group several Radios with a legend, description and / or an Error Message."}),` +`,e.jsxs(o.p,{children:["Add ",e.jsx(o.code,{children:'role="radiogroup"'}),` to the Field Set to have it explicitly announced as a radio group (the default role is just ‘group’). +The ‘radio group’ role also allows using `,e.jsx(o.code,{children:"aria-required"}),` on Field Set; that isn’t allowed for the ‘group’ role. +Even so, always set `,e.jsx(o.code,{children:"aria-required"})," on the individual Radios as well to ensure that screen readers can read it."]}),` +`,e.jsxs(o.p,{children:["If you don’t need the description, remove its Paragraph and the ",e.jsx(o.code,{children:"aria-describedby"})," from the Field Set."]}),` +`,e.jsxs(o.p,{children:["Check ",e.jsx(o.a,{href:"/docs/components-forms-field-set--docs",children:"the Field Set docs"})," for more information on configuring it."]}),` +`,e.jsx(i,{of:h}),` +`,e.jsx(o.h3,{id:"in-a-field-set-with-validation",children:"In a Field Set with validation"}),` +`,e.jsxs(o.p,{children:["If the Radio can become invalid, add an Error Message component and its ",e.jsx(o.code,{children:"id"})," to the ",e.jsx(o.code,{children:"aria-describedby"})," attribute of the Field Set."]}),` +`,e.jsxs(o.p,{children:["Check ",e.jsx(o.a,{href:"/docs/components-forms-field-set--docs",children:"the Field Set docs"})," for more information on configuring it."]}),` +`,e.jsx(i,{of:m}),` +`,e.jsx(o.h3,{id:"with-custom-icon",children:"With custom icon"}),` +`,e.jsxs(o.p,{children:[`Replace the icon with a custom version to use the Radio in a different theme or visual identity. +Use `,e.jsx(o.code,{children:"ams-radio__circle"})," and ",e.jsx(o.code,{children:"ams-radio__checked-indicator"}),` classes in its SVG markup. +Applications for the City of Amsterdam must use the default icon.`]}),` +`,e.jsx(i,{of:p})]})}function E(n={}){const{wrapper:o}={...s(),...n.components};return o?e.jsx(o,{...n,children:e.jsx(t,{...n})}):t(n)}export{E as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Radio.stories-BqLq-HKz.js b/demo-npm_and_yarn/vite-6.0.3/assets/Radio.stories-BqLq-HKz.js new file mode 100644 index 0000000000..56a006c521 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Radio.stories-BqLq-HKz.js @@ -0,0 +1,92 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{F as N,P as C,E as w,C as S}from"./index.esm-kzH9sPjb.js";import{c as A}from"./clsx-B-dksMZM.js";import{r as u}from"./index-RigO-4kf.js";const W=a=>e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",...a,children:[e.jsx("circle",{cx:12,cy:12,r:10,className:"ams-radio__circle"}),e.jsx("circle",{cx:12,cy:12,r:9.5,className:"ams-radio__hover-indicator"}),e.jsx("circle",{cx:12,cy:12,r:6,className:"ams-radio__checked-indicator"})]});try{RadioIcon.displayName="RadioIcon",RadioIcon.__docgenInfo={description:"",displayName:"RadioIcon",props:{}}}catch{}const r=u.forwardRef(({children:a,className:l,icon:n,invalid:t,...E},k)=>{const m=u.useId();return e.jsxs("div",{className:A("ams-radio",l),children:[e.jsx("input",{...E,"aria-invalid":t||void 0,className:"ams-radio__input",id:m,ref:k,type:"radio"}),e.jsxs("label",{className:"ams-radio__label",htmlFor:m,children:[e.jsx("span",{className:"ams-radio__icon-container",children:n??e.jsx(W,{})}),a]})]})});r.displayName="Radio";try{r.displayName="Radio",r.__docgenInfo={description:"",displayName:"Radio",props:{icon:{defaultValue:null,description:"An icon to display instead of the default icon.",name:"icon",required:!1,type:{name:"ReactNode"}},invalid:{defaultValue:null,description:"Whether the value fails a validation rule.",name:"invalid",required:!1,type:{name:"boolean"}}}}}catch{}const c=a=>e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32","aria-hidden":"true",focusable:"false",...a,children:[e.jsx("path",{className:"ams-radio__circle",d:"M 13.92 20.26 z m -0.1088 4.6456 l -2.336 -2.324 c -4.0904 -3.7048 -5.592 -5.1368 -7.1088 -6.9104 C 2.16 13.0928 1 10.7624 1 8 C 1 4.032 4.232 0.8 8.4 0.8 c 2.012 0 3.9624 0.808 5.4 4 C 15.2368 1.6088 17.1872 0.8 19.2 0.8 C 23.368 0.8 26.6 4.032 26.6 8.2 c 0 2.5624 -1.16 4.8928 -3.3672 7.472 c -1.516 1.7712 -3.0144 3.2 -7.104 6.904 z"}),e.jsx("path",{className:"ams-radio__checked-indicator",d:"M 13.92 20.26 z m -0.1088 4.6456 l -2.336 -2.324 c -4.0904 -3.7048 -5.592 -5.1368 -7.1088 -6.9104 C 2.16 13.0928 1 10.7624 1 8 C 1 4.032 4.232 0.8 8.4 0.8 c 2.012 0 3.9624 0.808 5.4 4 C 15.2368 1.6088 17.1872 0.8 19.2 0.8 C 23.368 0.8 26.6 4.032 26.6 8.2 c 0 2.5624 -1.16 4.8928 -3.3672 7.472 c -1.516 1.7712 -3.0144 3.2 -7.104 6.904 z"})]});try{c.displayName="CustomIcon",c.__docgenInfo={description:"",displayName:"CustomIcon",props:{}}}catch{}const{useArgs:F}=__STORYBOOK_MODULE_PREVIEW_API__,P={title:"Components/Forms/Radio",component:r,args:{checked:!1,children:"Radio label",disabled:!1,invalid:!1},argTypes:{checked:{description:"Whether the control is checked."},children:{description:"The text for the label.",table:{disable:!1}},disabled:{description:"Prevents interaction. Avoid if possible."},icon:{table:{disable:!0}},invalid:{description:"Whether the value fails a validation rule."},onChange:{action:"clicked",table:{disable:!0}}},render:a=>{const[,l]=F(),n=t=>{l({checked:t.target.checked})};return e.jsx(r,{onClick:n,...a})}},s={},i={argTypes:{checked:{table:{disable:!0}},children:{table:{disable:!0}},disabled:{table:{disable:!0}}},render:({invalid:a})=>e.jsxs(N,{"aria-describedby":`description1${a?" error1":""}`,invalid:a,legend:"Waar gaat uw melding over?",role:"radiogroup",children:[e.jsx(C,{className:"ams-mb--sm",id:"description1",size:"small",children:"De laatstgenoemde melding."}),a&&e.jsx(w,{className:"ams-mb--sm",id:"error1",children:"Geef aan waar uw laatstgenoemde melding over gaat."}),e.jsxs(S,{gap:"extra-small",children:[e.jsx(r,{invalid:a,name:"about",value:"horeca",children:"Horecabedrijf"}),e.jsx(r,{invalid:a,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),e.jsx(r,{invalid:a,name:"about",value:"evenement",children:"Evenement"}),e.jsx(r,{invalid:a,name:"about",value:"anders",children:"Iets anders"})]})]})},d={args:{invalid:!0},argTypes:{checked:{table:{disable:!0}},children:{table:{disable:!0}},disabled:{table:{disable:!0}}},render:({invalid:a})=>e.jsxs(N,{"aria-describedby":`description2${a?" error2":""}`,invalid:a,legend:"Waar gaat uw melding over?",role:"radiogroup",children:[e.jsx(C,{className:"ams-mb--sm",id:"description2",size:"small",children:"De laatstgenoemde melding."}),a&&e.jsx(w,{className:"ams-mb--sm",id:"error2",children:"Geef aan waar uw laatstgenoemde melding over gaat."}),e.jsxs(S,{gap:"extra-small",children:[e.jsx(r,{invalid:a,name:"about",value:"horeca",children:"Horecabedrijf"}),e.jsx(r,{invalid:a,name:"about",value:"ander_bedrijf",children:"Ander soort bedrijf"}),e.jsx(r,{invalid:a,name:"about",value:"evenement",children:"Evenement"}),e.jsx(r,{invalid:a,name:"about",value:"anders",children:"Iets anders"})]})]})},o={args:{icon:e.jsx(c,{})}};var p,b,g;s.parameters={...s.parameters,docs:{...(p=s.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(g=(b=s.parameters)==null?void 0:b.docs)==null?void 0:g.source}}};var h,v,_;i.parameters={...i.parameters,docs:{...(h=i.parameters)==null?void 0:h.docs,source:{originalSource:`{ + argTypes: { + checked: { + table: { + disable: true + } + }, + children: { + table: { + disable: true + } + }, + disabled: { + table: { + disable: true + } + } + }, + render: ({ + invalid + }) =>

    + + De laatstgenoemde melding. + + {invalid && + Geef aan waar uw laatstgenoemde melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(_=(v=i.parameters)==null?void 0:v.docs)==null?void 0:_.source}}};var f,x,j;d.parameters={...d.parameters,docs:{...(f=d.parameters)==null?void 0:f.docs,source:{originalSource:`{ + args: { + invalid: true + }, + argTypes: { + checked: { + table: { + disable: true + } + }, + children: { + table: { + disable: true + } + }, + disabled: { + table: { + disable: true + } + } + }, + render: ({ + invalid + }) =>
    + + De laatstgenoemde melding. + + {invalid && + Geef aan waar uw laatstgenoemde melding over gaat. + } + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
    +}`,...(j=(x=d.parameters)==null?void 0:x.docs)==null?void 0:j.source}}};var R,y,I;o.parameters={...o.parameters,docs:{...(R=o.parameters)==null?void 0:R.docs,source:{originalSource:`{ + args: { + icon: + } +}`,...(I=(y=o.parameters)==null?void 0:y.docs)==null?void 0:I.source}}};const z=["Default","InAFieldSet","InAFieldSetWithValidation","WithCustomIcon"],V=Object.freeze(Object.defineProperty({__proto__:null,Default:s,InAFieldSet:i,InAFieldSetWithValidation:d,WithCustomIcon:o,__namedExportsOrder:z,default:P},Symbol.toStringTag,{value:"Module"}));export{i as I,V as R,o as W,d as a}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Row.docs-Be0M7tjP.js b/demo-npm_and_yarn/vite-6.0.3/assets/Row.docs-Be0M7tjP.js new file mode 100644 index 0000000000..38e73c3d08 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Row.docs-Be0M7tjP.js @@ -0,0 +1,60 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as l}from"./index-3rgQkYFR.js";import{ae as o,aq as r,ar as a,as as h,at as t}from"./index-CF71P72j.js";import{R as d,A as c,E as p,a as g,b as m,V as x,W as j}from"./Row.stories-DMCF-LEr.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./types-B5YJ6HHW.js";const f=` + +# Row + +Stacks its children horizontally with gaps between them and offers alignment options. +`;/*@license CC0-1.0*/function s(i){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",strong:"strong",ul:"ul",...l(),...i.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(o,{of:d}),` +`,e.jsx(r,{children:f}),` +`,e.jsx(n.h2,{id:"guidelines",children:"Guidelines"}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsx(n.li,{children:"Wrap a Row around a set of elements that need the same amount of white space between them."}),` +`,e.jsxs(n.li,{children:["The five sizes of ",e.jsx(n.a,{href:"/docs/brand-design-tokens-space--docs",children:"Component Space"})," are available for the width of the gap."]}),` +`,e.jsx(n.li,{children:"Align the elements horizontally or vertically through the alignment props."}),` +`]}),` +`,e.jsx(a,{}),` +`,e.jsx(h,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"alignment",children:"Alignment"}),` +`,e.jsx(n.p,{children:"Items in the row can be aligned horizontally in several ways:"}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Center"}),": center items within the row."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"End"}),": align items to the end of the row. This is the right side in left-to-right languages."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Space Between"}),": distribute whitespace between items."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Space Around"}),": distribute whitespace around items."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Space Evenly"}),": distribute whitespace evenly around items."]}),` +`]}),` +`,e.jsxs(n.p,{children:["By default, items align to the ",e.jsx(n.strong,{children:"start"}),` of the row – the left side in right-to-left languages. +This option has no class name or prop value.`]}),` +`,e.jsxs(n.p,{children:["We left out the word ‘space’ from the values for the alignment prop, e.g. ",e.jsx(n.code,{children:'align="around"'}),"."]}),` +`,e.jsx(n.p,{children:"This example ensures that the spaces between and around all items are equally wide."}),` +`,e.jsx(t,{of:c}),` +`,e.jsx(n.h4,{id:"end-align-a-single-child",children:"End-align a single child"}),` +`,e.jsxs(n.p,{children:["To align a single component to the right (in left-to-right languages), wrap it in a ",e.jsx(n.code,{children:""})," and set the ",e.jsx(n.code,{children:"align"})," prop to ",e.jsx(n.code,{children:"end"}),"."]}),` +`,e.jsx(t,{of:p}),` +`,e.jsx(n.p,{children:"For right-to-left languages, the end of the row is on the left side."}),` +`,e.jsx(t,{of:g}),` +`,e.jsx(n.h4,{id:"align-opposing-texts",children:"Align opposing texts"}),` +`,e.jsx(n.p,{children:"This example shows a right-aligned link next to a heading."}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsxs(n.li,{children:["Use ",e.jsx(n.code,{children:'align="between"'})," to have all remaining space between them, which pushes the items to the opposing ends of the row."]}),` +`,e.jsxs(n.li,{children:["Add ",e.jsx(n.code,{children:'alignVertical="baseline"'})," to align them vertically to their common baseline."]}),` +`,e.jsxs(n.li,{children:["Include ",e.jsx(n.code,{children:"wrap"})," to allow the link to wrap to a new line if both components don’t fit on the same line."]}),` +`]}),` +`,e.jsx(t,{of:m}),` +`,e.jsx(n.h3,{id:"vertical-alignment",children:"Vertical alignment"}),` +`,e.jsx(n.p,{children:"Items in the row can be aligned vertically in several ways:"}),` +`,e.jsxs(n.ul,{children:[` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Start"}),": align items to the top of the row."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Center"}),": align items to the middle of the row."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"End"}),": align items to the bottom of the row."]}),` +`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Baseline"}),": align items to their common text baseline."]}),` +`]}),` +`,e.jsxs(n.p,{children:["By default, items ",e.jsx(n.strong,{children:"stretch"}),` to the height of the row. +This option has no class name or prop value.`]}),` +`,e.jsx(n.p,{children:"This example centers three items vertically."}),` +`,e.jsx(t,{of:x}),` +`,e.jsx(n.h3,{id:"wrapping",children:"Wrapping"}),` +`,e.jsx(n.p,{children:"Items that may not fit together on a single line should be allowed to wrap onto multiple lines."}),` +`,e.jsx(t,{of:j})]})}function I(i={}){const{wrapper:n}={...l(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(s,{...i})}):s(i)}export{I as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Row.stories-DMCF-LEr.js b/demo-npm_and_yarn/vite-6.0.3/assets/Row.stories-DMCF-LEr.js new file mode 100644 index 0000000000..cf894f007f --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Row.stories-DMCF-LEr.js @@ -0,0 +1,42 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{h as $,H as z,L as D}from"./index.esm-kzH9sPjb.js";import{m as I,a as M}from"./types-B5YJ6HHW.js";import{c as P}from"./clsx-B-dksMZM.js";import{r as F}from"./index-RigO-4kf.js";const c=F.forwardRef(({align:a,alignVertical:m,as:L="div",children:q,className:C,gap:d,wrap:H,...B},W)=>e.jsx(L,{...B,ref:W,className:P("ams-row",a&&`ams-row--align-${a}`,m&&`ams-row--align-vertical-${m}`,d&&`ams-row--gap-${d}`,H&&"ams-row--wrap",C),children:q}));c.displayName="Row";try{c.displayName="Row",c.__docgenInfo={description:"",displayName:"Row",props:{align:{defaultValue:{value:"start"},description:"The horizontal alignment of the items in the row.",name:"align",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"end"'},{value:'"between"'},{value:'"around"'},{value:'"evenly"'}]}},alignVertical:{defaultValue:{value:"stretch"},description:"The vertical alignment of the items in the row.",name:"alignVertical",required:!1,type:{name:"enum",value:[{value:'"baseline"'},{value:'"center"'},{value:'"end"'},{value:'"start"'}]}},as:{defaultValue:{value:"div"},description:"The HTML element to use.",name:"as",required:!1,type:{name:"enum",value:[{value:'"article"'},{value:'"div"'},{value:'"section"'}]}},gap:{defaultValue:{value:"medium"},description:"The amount of space between items.",name:"gap",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"small"'},{value:'"large"'},{value:'"extra-small"'},{value:'"extra-large"'}]}},wrap:{defaultValue:{value:"false"},description:"Whether items of the row can wrap onto multiple lines.",name:"wrap",required:!1,type:{name:"boolean"}}}}}catch{}const G=[e.jsx("div",{className:"ams-docs-item"},0),e.jsx("div",{className:"ams-docs-item"},1),e.jsx("div",{className:"ams-docs-item"},2)],J={title:"Components/Layout/Row",component:c,args:{children:G,className:"ams-docs-row"},argTypes:{align:{control:{type:"radio",labels:{undefined:"start"}},options:[void 0,...I]},alignVertical:{control:{type:"radio",labels:{undefined:"stretch"}},options:[void 0,...M]},className:{table:{disable:!0}},gap:{control:{type:"radio",labels:{undefined:"medium"}},options:["none","extra-small","small",void 0,"large","extra-large"]}}},r={},s={args:{align:"evenly"}},n={args:{align:"end",alignVertical:"center",children:e.jsx($,{label:"AB"})}},l={args:{align:"end",dir:"rtl"},argTypes:{dir:{table:{disable:!0}}}},t={args:{align:"between",alignVertical:"baseline",children:[e.jsx(z,{level:3,children:"An example heading"}),e.jsx(D,{href:"#",children:"An example link"})],className:void 0,wrap:!0}},i={args:{alignVertical:"center"}},o={args:{children:Array.from(Array(4).keys()).map(a=>e.jsx("span",{className:"ams-docs-item",style:{flexBasis:"16rem"}},a)),wrap:!0}};var p,u,g;r.parameters={...r.parameters,docs:{...(p=r.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(g=(u=r.parameters)==null?void 0:u.docs)==null?void 0:g.source}}};var v,f,h;s.parameters={...s.parameters,docs:{...(v=s.parameters)==null?void 0:v.docs,source:{originalSource:`{ + args: { + align: 'evenly' + } +}`,...(h=(f=s.parameters)==null?void 0:f.docs)==null?void 0:h.source}}};var y,A,w;n.parameters={...n.parameters,docs:{...(y=n.parameters)==null?void 0:y.docs,source:{originalSource:`{ + args: { + align: 'end', + alignVertical: 'center', + children: + } +}`,...(w=(A=n.parameters)==null?void 0:A.docs)==null?void 0:w.source}}};var x,b,V;l.parameters={...l.parameters,docs:{...(x=l.parameters)==null?void 0:x.docs,source:{originalSource:`{ + args: { + align: 'end', + dir: 'rtl' + }, + argTypes: { + dir: { + table: { + disable: true + } + } + } +}`,...(V=(b=l.parameters)==null?void 0:b.docs)==null?void 0:V.source}}};var S,_,N;t.parameters={...t.parameters,docs:{...(S=t.parameters)==null?void 0:S.docs,source:{originalSource:`{ + args: { + align: 'between', + alignVertical: 'baseline', + children: [An example heading, An example link], + className: undefined, + wrap: true + } +}`,...(N=(_=t.parameters)==null?void 0:_.docs)==null?void 0:N.source}}};var j,T,R;i.parameters={...i.parameters,docs:{...(j=i.parameters)==null?void 0:j.docs,source:{originalSource:`{ + args: { + alignVertical: 'center' + } +}`,...(R=(T=i.parameters)==null?void 0:T.docs)==null?void 0:R.source}}};var k,E,O;o.parameters={...o.parameters,docs:{...(k=o.parameters)==null?void 0:k.docs,source:{originalSource:`{ + args: { + children: Array.from(Array(4).keys()).map(i => ), + wrap: true + } +}`,...(O=(E=o.parameters)==null?void 0:E.docs)==null?void 0:O.source}}};const K=["Default","Alignment","EndAlignASingleChild","EndAlignASingleChildRtl","AlignOpposingTexts","VerticalAlignment","Wrapping"],ee=Object.freeze(Object.defineProperty({__proto__:null,AlignOpposingTexts:t,Alignment:s,Default:r,EndAlignASingleChild:n,EndAlignASingleChildRtl:l,VerticalAlignment:i,Wrapping:o,__namedExportsOrder:K,default:J},Symbol.toStringTag,{value:"Module"}));export{s as A,n as E,ee as R,i as V,o as W,l as a,t as b}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Screen.docs-DIJfHkFa.js b/demo-npm_and_yarn/vite-6.0.3/assets/Screen.docs-DIJfHkFa.js new file mode 100644 index 0000000000..78c8b19d3c --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Screen.docs-DIJfHkFa.js @@ -0,0 +1,32 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as i,aq as r,ar as a,as as m,at as c}from"./index-CF71P72j.js";import{S as d,E as p}from"./Screen.stories-BEbhUpOk.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";const h=` + +# Screen + +Manages the maximum width and alignment of the entire website or application. + +## Guidelines + +- This should be the outermost component of your website or application. +- Within it, combine components such as + [Grid](/docs/components-layout-grid--docs), + [Header](/docs/components-containers-header--docs), + [Footer](/docs/components-containers-footer--docs), + [Spotlight](/docs/components-containers-spotlight--docs), + [Image Slider](/docs/components-media-image-slider--docs), + and Figure. + +## Design + +By default, this component expands to a width of 1600 pixels. +This is the maximum width for a website of the City of Amsterdam. +For applications, you can choose a larger maximum width of 2112 pixels. +The component horizontally centres both itself and its content. +`;/*@license CC0-1.0*/function e(o){const t={h2:"h2",h3:"h3",...s(),...o.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(i,{of:d}),` +`,n.jsx(r,{children:h}),` +`,n.jsx(a,{}),` +`,n.jsx(m,{}),` +`,n.jsx(t.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(t.h3,{id:"extra-wide",children:"Extra wide"}),` +`,n.jsx(c,{of:p})]})}function F(o={}){const{wrapper:t}={...s(),...o.components};return t?n.jsx(t,{...o,children:n.jsx(e,{...o})}):e(o)}export{F as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Screen.stories-BEbhUpOk.js b/demo-npm_and_yarn/vite-6.0.3/assets/Screen.stories-BEbhUpOk.js new file mode 100644 index 0000000000..1fc3f86c81 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Screen.stories-BEbhUpOk.js @@ -0,0 +1,10 @@ +import{j as s}from"./jsx-runtime-BjgbQsUx.js";import{c as x}from"./clsx-B-dksMZM.js";import{r as g}from"./index-RigO-4kf.js";const a=g.forwardRef(({children:t,className:l,fullHeight:p,maxWidth:u="wide",...h},f)=>s.jsx("div",{...h,ref:f,className:x("ams-screen",p&&"ams-screen--full-height",`ams-screen--${u}`,l),children:t}));a.displayName="Screen";try{a.displayName="Screen",a.__docgenInfo={description:"",displayName:"Screen",props:{fullHeight:{defaultValue:null,description:"Whether the screen should stretch to the full height of the viewport.",name:"fullHeight",required:!1,type:{name:"boolean"}},maxWidth:{defaultValue:{value:"wide"},description:"The maximum width of the screen.",name:"maxWidth",required:!1,type:{name:"enum",value:[{value:'"wide"'},{value:'"x-wide"'}]}}}}}catch{}const _={title:"Components/Layout/Screen",component:a,parameters:{layout:"fullscreen"}},e={args:{children:s.jsx("div",{className:"ams-docs-item",children:"Ik pas in het scherm."})}},r={args:{children:s.jsx("div",{className:"ams-docs-item",children:"Ik pas in een extra breed scherm."}),maxWidth:"x-wide"}};var c,i,o;e.parameters={...e.parameters,docs:{...(c=e.parameters)==null?void 0:c.docs,source:{originalSource:`{ + args: { + children:
    Ik pas in het scherm.
    + } +}`,...(o=(i=e.parameters)==null?void 0:i.docs)==null?void 0:o.source}}};var d,n,m;r.parameters={...r.parameters,docs:{...(d=r.parameters)==null?void 0:d.docs,source:{originalSource:`{ + args: { + children:
    Ik pas in een extra breed scherm.
    , + maxWidth: 'x-wide' + } +}`,...(m=(n=r.parameters)==null?void 0:n.docs)==null?void 0:m.source}}};const v=["Default","ExtraWide"],N=Object.freeze(Object.defineProperty({__proto__:null,Default:e,ExtraWide:r,__namedExportsOrder:v,default:_},Symbol.toStringTag,{value:"Module"}));export{r as E,N as S}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/SearchField.docs-z5c8LPxU.js b/demo-npm_and_yarn/vite-6.0.3/assets/SearchField.docs-z5c8LPxU.js new file mode 100644 index 0000000000..b0c32ee2d4 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/SearchField.docs-z5c8LPxU.js @@ -0,0 +1,50 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as r}from"./index-3rgQkYFR.js";import{ae as i,aq as s,ar as c,as as h,at as o}from"./index-CF71P72j.js";import{S as l,W as u,C as p}from"./SearchField.stories-BpH8uCbQ.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./Button-nAoFhtc2.js";import"./Icon-B4wlDyQ3.js";const d=` + +# Search Field + +Allows users to quickly find relevant content by entering a (part of a) word or phrase to search through the content. + +## Guidelines + +- Users can initiate a search by using the search button or the Enter key. + +## Autofocus + +You can use \`autofocus\` to place focus directly on a search field when the user arrives on a page. +However, use this feature with caution, as it can have negative consequences: + +- For screen reader users, this may result in skipping important content above the search field. +- On smaller devices, the use of \`autofocus\` may automatically scroll the page to the search field, potentially causing users to miss previous content. +- On touchscreen devices, this can trigger the keyboard to appear immediately, hiding important content. + +Use \`autofocus\` only if the search field is at the beginning of a page and there are no other elements on a page that a user might want to interact with first. + +For more information: [Accessibility Tips: Be Cautious When Using Autofocus](https://www.boia.org/blog/accessibility-tips-be-cautious-when-using-autofocus) + +## \`autocomplete\` and \`spellcheck\` + +Both \`autocomplete\` and \`spellcheck\` are turned off by default. +These features can be disruptive for a user searching for part of a word, and \`autocomplete\` may interfere with an Autosuggest component. + +## Relevant WCAG Requirements + +- [WCAG 1.3.1](https://www.w3.org/TR/WCAG22/#info-and-relationships): \`role="search"\` is used for the search landmark role. +- [WCAG 1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose): It is clear both to the user and programmatically what the purpose of a form field is. +- [WCAG 2.4.6](https://www.w3.org/TR/WCAG22/#headings-and-labels): There is a label describing the purpose of the input. + +Search Field is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. +`;/*@license CC0-1.0*/function a(n){const t={h2:"h2",h3:"h3",p:"p",...r(),...n.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:l}),` +`,e.jsx(s,{children:d}),` +`,e.jsx(c,{}),` +`,e.jsx(h,{}),` +`,e.jsx(t.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(t.h3,{id:"with-placeholder",children:"With placeholder"}),` +`,e.jsx(t.p,{children:"A Search Field can have a placeholder text."}),` +`,e.jsx(o,{of:u}),` +`,e.jsx(t.h3,{id:"controlled-component",children:"Controlled component"}),` +`,e.jsx(t.p,{children:`By default, the search field is not managed by React but by the browser. +However, it can be controlled by React. +If you enter a value in this search field and use the search Button or the Enter key, you will receive a notification.`}),` +`,e.jsx(o,{of:p})]})}function E(n={}){const{wrapper:t}={...r(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(a,{...n})}):a(n)}export{E as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/SearchField.stories-BpH8uCbQ.js b/demo-npm_and_yarn/vite-6.0.3/assets/SearchField.stories-BpH8uCbQ.js new file mode 100644 index 0000000000..182425c66c --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/SearchField.stories-BpH8uCbQ.js @@ -0,0 +1,34 @@ +import{j as a}from"./jsx-runtime-BjgbQsUx.js";import{c as j}from"./clsx-B-dksMZM.js";import{r as u}from"./index-RigO-4kf.js";import{j as C}from"./index.esm-CPc1noYl.js";import{B as N}from"./Button-nAoFhtc2.js";const I=u.forwardRef(({children:e="Zoeken",...r},t)=>a.jsx(N,{...r,icon:C,iconOnly:!0,ref:t,children:e}));I.displayName="SearchField.Button";try{SearchField.Button.displayName="SearchField.Button",SearchField.Button.__docgenInfo={description:"",displayName:"SearchField.Button",props:{}}}catch{}const D=u.forwardRef(({className:e,dir:r,invalid:t,label:o="Zoeken",...p},h)=>{const i=u.useId();return a.jsxs(a.Fragment,{children:[a.jsx("label",{htmlFor:i,className:"ams-visually-hidden",children:o}),a.jsx("input",{...p,"aria-invalid":t||void 0,autoComplete:"off",className:j("ams-search-field__input",e),dir:r??"auto",enterKeyHint:"search",id:i,ref:h,spellCheck:"false",type:"search"})]})});D.displayName="SearchField.Input";try{SearchField.Input.displayName="SearchField.Input",SearchField.Input.__docgenInfo={description:"",displayName:"SearchField.Input",props:{invalid:{defaultValue:null,description:"Whether the value fails a validation rule.",name:"invalid",required:!1,type:{name:"boolean"}},label:{defaultValue:{value:"Zoeken"},description:"Describes the field for screen readers.",name:"label",required:!1,type:{name:"string"}}}}}catch{}const B=u.forwardRef(({children:e,className:r,...t},o)=>a.jsx("form",{role:"search",...t,ref:o,className:j("ams-search-field",r),children:e}));B.displayName="SearchField";const n=Object.assign(B,{Button:I,Input:D});try{n.displayName="SearchField",n.__docgenInfo={description:"",displayName:"SearchField",props:{}}}catch{}const{useArgs:w}=__STORYBOOK_MODULE_PREVIEW_API__,O={title:"Components/Forms/Search Field",component:n,args:{invalid:!1,onSubmit:e=>{e.preventDefault()}},argTypes:{label:{description:"Describes the field for screen readers."},onSubmit:{table:{disable:!0}},placeholder:{description:"Displayed while the field is empty."}},render:({invalid:e,label:r,placeholder:t,...o})=>a.jsxs(n,{...o,children:[a.jsx(n.Input,{invalid:e,label:r,placeholder:t}),a.jsx(n.Button,{})]})},s={},l={args:{placeholder:"Wat kunnen we voor u vinden?"}},c={args:{value:""},render:function({invalid:r,label:t,placeholder:o}){const[p,h]=w(),i=d=>{h({value:d.target.value})};return a.jsxs(n,{onSubmit:d=>{d.preventDefault();const m=new FormData(d.currentTarget).get("search-box");m&&alert(`Gezocht op '${m}'`)},children:[a.jsx(n.Input,{name:"search-box",value:p.value,invalid:r,label:t,onChange:i,placeholder:o}),a.jsx(n.Button,{})]})}};var f,g,_;s.parameters={...s.parameters,docs:{...(f=s.parameters)==null?void 0:f.docs,source:{originalSource:"{}",...(_=(g=s.parameters)==null?void 0:g.docs)==null?void 0:_.source}}};var v,S,F;l.parameters={...l.parameters,docs:{...(v=l.parameters)==null?void 0:v.docs,source:{originalSource:`{ + args: { + placeholder: 'Wat kunnen we voor u vinden?' + } +}`,...(F=(S=l.parameters)==null?void 0:S.docs)==null?void 0:F.source}}};var y,b,x;c.parameters={...c.parameters,docs:{...(y=c.parameters)==null?void 0:y.docs,source:{originalSource:`{ + args: { + value: '' + }, + render: function Component({ + invalid, + label, + placeholder + }: InputProps) { + const [args, setArgs] = useArgs(); + const onValueChange = (event: any) => { + setArgs({ + value: event.target.value + }); + }; + return { + e.preventDefault(); + const formData = new FormData(e.currentTarget); + const value = formData.get('search-box'); + // search actions should not be triggered without a value + if (value) { + // eslint-disable-next-line no-alert + alert(\`Gezocht op '\${value}'\`); + } + }}> + + + ; + } +}`,...(x=(b=c.parameters)==null?void 0:b.docs)==null?void 0:x.source}}};const R=["Default","WithPlaceholder","Controlled"],T=Object.freeze(Object.defineProperty({__proto__:null,Controlled:c,Default:s,WithPlaceholder:l,__namedExportsOrder:R,default:O},Symbol.toStringTag,{value:"Module"}));export{c as C,T as S,l as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Select.docs-BITYSyAK.js b/demo-npm_and_yarn/vite-6.0.3/assets/Select.docs-BITYSyAK.js new file mode 100644 index 0000000000..9b6b44201c --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Select.docs-BITYSyAK.js @@ -0,0 +1,37 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as r,aq as d,ar as a,as as l,at as i}from"./index-CF71P72j.js";import{S as c,G as h,I as m,D as p,a as x,b as j}from"./Select.stories-E2qEE2YT.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const f=` + +# Select + +A form control that allows users to select one or more options from a list. + +## References + +- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) +`;/*@license CC0-1.0*/function t(o){const n={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",...s(),...o.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(r,{of:c}),` +`,e.jsx(d,{children:f}),` +`,e.jsx(a,{}),` +`,e.jsx(l,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"multiple",children:"Multiple"}),` +`,e.jsxs(n.p,{children:[`Avoid adding functionality to allow selecting multiple options. Multi select is harder to use +on desktop as they require the user to hold down the `,e.jsx(n.code,{children:"Ctrl"})," or ",e.jsx(n.code,{children:"Cmd"}),` key while clicking on the options. +It is recommended to use checkboxes instead.`]}),` +`,e.jsx(n.h3,{id:"grouped",children:"Grouped"}),` +`,e.jsxs(n.p,{children:["Use the ",e.jsx(n.code,{children:"Select.Group"}),` component to group options. +The component requires a `,e.jsx(n.code,{children:"label"})," attribute."]}),` +`,e.jsx(i,{of:h}),` +`,e.jsx(n.h3,{id:"invalid",children:"Invalid"}),` +`,e.jsx(i,{of:m}),` +`,e.jsx(n.h3,{id:"disabled",children:"Disabled"}),` +`,e.jsx(i,{of:p}),` +`,e.jsx(n.h3,{id:"in-a-field",children:"In a Field"}),` +`,e.jsx(n.p,{children:"Use a Field to group a Select with a Label, description and / or an Error Message."}),` +`,e.jsxs(n.p,{children:["If you don’t need the description, remove its Paragraph and the ",e.jsx(n.code,{children:"aria-describedby"})," from the Select."]}),` +`,e.jsxs(n.p,{children:["Check ",e.jsx(n.a,{href:"/docs/components-forms-field--docs",children:"the Field docs"})," for more information on configuring it."]}),` +`,e.jsx(i,{of:x}),` +`,e.jsx(n.h3,{id:"in-a-field-with-validation",children:"In a Field with validation"}),` +`,e.jsxs(n.p,{children:["If the Select can become invalid, add an Error Message and its ",e.jsx(n.code,{children:"id"})," to the ",e.jsx(n.code,{children:"aria-describedby"})," attribute of the Select."]}),` +`,e.jsxs(n.p,{children:["Check ",e.jsx(n.a,{href:"/docs/components-forms-field--docs",children:"the Field docs"})," for more information on configuring it."]}),` +`,e.jsx(i,{of:j})]})}function q(o={}){const{wrapper:n}={...s(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(t,{...o})}):t(o)}export{q as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Select.stories-E2qEE2YT.js b/demo-npm_and_yarn/vite-6.0.3/assets/Select.stories-E2qEE2YT.js new file mode 100644 index 0000000000..cd372a412a --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Select.stories-E2qEE2YT.js @@ -0,0 +1,77 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{e as P,f as W,P as B,E}from"./index.esm-kzH9sPjb.js";import{c as u}from"./clsx-B-dksMZM.js";import{r as O}from"./index-RigO-4kf.js";const I=O.forwardRef(({children:t,className:i,...n},o)=>e.jsx("option",{...n,ref:o,className:u("ams-select__option",i),children:t}));I.displayName="Select.Option";try{Select.Option.displayName="Select.Option",Select.Option.__docgenInfo={description:"",displayName:"Select.Option",props:{}}}catch{}const A=O.forwardRef(({children:t,className:i,...n},o)=>e.jsx("optgroup",{...n,ref:o,className:u("ams-select__group",i),children:t}));A.displayName="Select.Group";try{Select.Group.displayName="Select.Group",Select.Group.__docgenInfo={description:"",displayName:"Select.Group",props:{}}}catch{}const H=O.forwardRef(({children:t,className:i,invalid:n,...o},K)=>e.jsx("select",{...o,"aria-invalid":n||void 0,className:u("ams-select",i),ref:K,children:t}));H.displayName="Select";const r=Object.assign(H,{Option:I,Group:A});try{r.displayName="Select",r.__docgenInfo={description:"",displayName:"Select",props:{invalid:{defaultValue:null,description:"Whether the value fails a validation rule.",name:"invalid",required:!1,type:{name:"boolean"}}}}}catch{}const S=[e.jsx(r.Option,{value:"1",children:"Centrum"},"1"),e.jsx(r.Option,{value:"2",children:"Noord"},"2"),e.jsx(r.Option,{value:"3",children:"West"},"3"),e.jsx(r.Option,{value:"4",disabled:!0,children:"Westpoort"},"4"),e.jsx(r.Option,{value:"5",children:"Nieuw-West"},"6"),e.jsx(r.Option,{value:"6",children:"Zuid"},"7"),e.jsx(r.Option,{value:"7",children:"Zuidoost"},"8")],D={title:"Components/Forms/Select",component:r,args:{invalid:!1,disabled:!1,children:S},argTypes:{disabled:{description:"Prevents interaction. Avoid if possible."}}},l={},a={args:{children:[e.jsxs(r.Group,{label:"Burgwallen-Oude Zijde",children:[e.jsx(r.Option,{children:"BG-terrein e.o."}),e.jsx(r.Option,{children:"Burgwallen oost"}),e.jsx(r.Option,{children:"Kop Zeedijk"}),e.jsx(r.Option,{children:"Nes e.o."}),e.jsx(r.Option,{children:"Oude Kerk e.o."})]},"1"),e.jsxs(r.Group,{label:"Burgwallen-Nieuwe Zijde",children:[e.jsx(r.Option,{children:"Begijnhofbuurt"}),e.jsx(r.Option,{children:"Hemelrijk"}),e.jsx(r.Option,{children:"Kalverdriehoek"}),e.jsx(r.Option,{children:"Nieuwe Kerk e.o."}),e.jsx(r.Option,{children:"Nieuwendijk Noord"}),e.jsx(r.Option,{children:"Spuistraat Noord"}),e.jsx(r.Option,{children:"Spuistraat Zuid"}),e.jsx(r.Option,{children:"Stationsplein e.o."})]},"2"),e.jsxs(r.Group,{label:"Grachtengordel-West",children:[e.jsx(r.Option,{children:"Felix Meritisbuurt"}),e.jsx(r.Option,{children:"Langestraat e.o."}),e.jsx(r.Option,{children:"Leidsegracht Noord"}),e.jsx(r.Option,{children:"Leliegracht e.o."})]},"3"),e.jsxs(r.Group,{label:"Haarlemmerbuurt",children:[e.jsx(r.Option,{children:"Haarlemmerbuurt Oost"}),e.jsx(r.Option,{children:"Haarlemmerbuurt West"}),e.jsx(r.Option,{children:"Planciusbuurt Noord"}),e.jsx(r.Option,{children:"Planciusbuurt Zuid"}),e.jsx(r.Option,{children:"Westelijke eilanden"}),e.jsx(r.Option,{children:"Westerdokseiland"})]},"4"),e.jsxs(r.Group,{label:"Jordaan",children:[e.jsx(r.Option,{children:"Anjeliersbuurt Noord"}),e.jsx(r.Option,{children:"Anjeliersbuurt Zuid"}),e.jsx(r.Option,{children:"Bloemgrachtbuurt"}),e.jsx(r.Option,{children:"Driehoekbuurt"}),e.jsx(r.Option,{children:"Elandsgrachtbuurt"}),e.jsx(r.Option,{children:"Groenmarktkadebuurt"}),e.jsx(r.Option,{children:"Marnixbuurt Midden"}),e.jsx(r.Option,{children:"Marnixbuurt Noord"}),e.jsx(r.Option,{children:"Marnixbuurt Zuid"}),e.jsx(r.Option,{children:"Passeerdersgrachtbuurt"}),e.jsx(r.Option,{children:"Zaagpoortbuurt"})]},"5")]}},s={args:{invalid:!0}},c={args:{disabled:!0}},d={render:t=>e.jsxs(P,{invalid:t.invalid,children:[e.jsx(W,{htmlFor:"input1",children:"Label"}),e.jsx(B,{id:"description1",size:"small",children:"Omschrijving."}),t.invalid&&e.jsx(E,{id:"error1",children:"Foutmelding."}),e.jsx(r,{"aria-describedby":`description1${t.invalid?" error1":""}`,id:"input1",...t,children:S})]})},p={args:{invalid:!0},render:t=>e.jsxs(P,{invalid:t.invalid,children:[e.jsx(W,{htmlFor:"input2",children:"Label"}),e.jsx(B,{id:"description2",size:"small",children:"Omschrijving."}),t.invalid&&e.jsx(E,{id:"error2",children:"Foutmelding."}),e.jsx(r,{"aria-describedby":`description2${t.invalid?" error2":""}`,id:"input2",...t,children:S})]})};var h,m,j;l.parameters={...l.parameters,docs:{...(h=l.parameters)==null?void 0:h.docs,source:{originalSource:"{}",...(j=(m=l.parameters)==null?void 0:m.docs)==null?void 0:j.source}}};var b,g,x;a.parameters={...a.parameters,docs:{...(b=a.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + children: [ + BG-terrein e.o. + Burgwallen oost + Kop Zeedijk + Nes e.o. + Oude Kerk e.o. + , + Begijnhofbuurt + Hemelrijk + Kalverdriehoek + Nieuwe Kerk e.o. + Nieuwendijk Noord + Spuistraat Noord + Spuistraat Zuid + Stationsplein e.o. + , + Felix Meritisbuurt + Langestraat e.o. + Leidsegracht Noord + Leliegracht e.o. + , + Haarlemmerbuurt Oost + Haarlemmerbuurt West + Planciusbuurt Noord + Planciusbuurt Zuid + Westelijke eilanden + Westerdokseiland + , + Anjeliersbuurt Noord + Anjeliersbuurt Zuid + Bloemgrachtbuurt + Driehoekbuurt + Elandsgrachtbuurt + Groenmarktkadebuurt + Marnixbuurt Midden + Marnixbuurt Noord + Marnixbuurt Zuid + Passeerdersgrachtbuurt + Zaagpoortbuurt + ] + } +}`,...(x=(g=a.parameters)==null?void 0:g.docs)==null?void 0:x.source}}};var v,N,_;s.parameters={...s.parameters,docs:{...(v=s.parameters)==null?void 0:v.docs,source:{originalSource:`{ + args: { + invalid: true + } +}`,...(_=(N=s.parameters)==null?void 0:N.docs)==null?void 0:_.source}}};var G,y,f;c.parameters={...c.parameters,docs:{...(G=c.parameters)==null?void 0:G.docs,source:{originalSource:`{ + args: { + disabled: true + } +}`,...(f=(y=c.parameters)==null?void 0:y.docs)==null?void 0:f.source}}};var k,F,L;d.parameters={...d.parameters,docs:{...(k=d.parameters)==null?void 0:k.docs,source:{originalSource:`{ + render: args => + + + Omschrijving. + + {args.invalid && Foutmelding.} + + +}`,...(L=(F=d.parameters)==null?void 0:F.docs)==null?void 0:L.source}}};var Z,w,M;p.parameters={...p.parameters,docs:{...(Z=p.parameters)==null?void 0:Z.docs,source:{originalSource:`{ + args: { + invalid: true + }, + render: args => + + + Omschrijving. + + {args.invalid && Foutmelding.} + + +}`,...(M=(w=p.parameters)==null?void 0:w.docs)==null?void 0:M.source}}};const z=["Default","Grouped","Invalid","Disabled","InAField","InAFieldWithValidation"],J=Object.freeze(Object.defineProperty({__proto__:null,Default:l,Disabled:c,Grouped:a,InAField:d,InAFieldWithValidation:p,Invalid:s,__namedExportsOrder:z,default:D},Symbol.toStringTag,{value:"Module"}));export{c as D,a as G,s as I,J as S,d as a,p as b}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/SkipLink.docs-D1E0yz7A.js b/demo-npm_and_yarn/vite-6.0.3/assets/SkipLink.docs-D1E0yz7A.js new file mode 100644 index 0000000000..f9d412030d --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/SkipLink.docs-D1E0yz7A.js @@ -0,0 +1,34 @@ +import{j as n}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as s,aq as r,ar as p,as as l,at as t}from"./index-CF71P72j.js";import{S as m,O as h,M as c}from"./SkipLink.stories-0bYxBOSE.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const d=` + +# Skip Link + +Allows skipping past recurring navigation blocks at the top of a page. + +## Design + +The Skip Link sits above the header and is as wide as the Screen container. +It remains hidden until activated with the ‘Tab’ key. +After appearing, it pushes the entire page down. + +## Guidelines + +- Place the Skip Link as the first element in the Screen. +- Target the Skip Link to the main content. + On an article page, for example, it could be the title of the article. + On a search page, it could be the search field. +- Set \`id="example-id"\` on the container of that element and then use \`href="#example-id"\` on the Skip Link. +- Complex pages with multiple sections may benefit from more than one Skip Link. +- Skip Links are unnecessary on a simple page with only text and minimal navigation. +`;/*@license CC0-1.0*/function a(i){const e={h2:"h2",h3:"h3",p:"p",...o(),...i.components};return n.jsxs(n.Fragment,{children:[` +`,` +`,n.jsx(s,{of:m}),` +`,n.jsx(r,{children:d}),` +`,n.jsx(p,{}),` +`,n.jsx(l,{}),` +`,n.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,n.jsx(e.h3,{id:"display-on-focus",children:"Display on focus"}),` +`,n.jsx(e.p,{children:"A Skip Link is only displayed when it receives focus."}),` +`,n.jsx(t,{of:h}),` +`,n.jsx(e.h3,{id:"multiple-links",children:"Multiple links"}),` +`,n.jsx(e.p,{children:"You can use more than one Skip Link if you have a complex page with multiple sections."}),` +`,n.jsx(t,{of:c})]})}function E(i={}){const{wrapper:e}={...o(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(a,{...i})}):a(i)}export{E as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/SkipLink.stories-0bYxBOSE.js b/demo-npm_and_yarn/vite-6.0.3/assets/SkipLink.stories-0bYxBOSE.js new file mode 100644 index 0000000000..a300b7ea3f --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/SkipLink.stories-0bYxBOSE.js @@ -0,0 +1,34 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{P as g}from"./index.esm-kzH9sPjb.js";import{c as y}from"./clsx-B-dksMZM.js";import{r as v}from"./index-RigO-4kf.js";const i=v.forwardRef(({children:n,className:u,...f},S)=>e.jsx("a",{...f,ref:S,className:y("ams-skip-link","ams-visually-hidden",u),children:n}));i.displayName="SkipLink";try{i.displayName="SkipLink",i.__docgenInfo={description:"",displayName:"SkipLink",props:{}}}catch{}const L={title:"Components/Navigation/Skip Link",component:i,args:{children:"Direct naar inhoud",href:"#"},argTypes:{children:{description:"The text to attach the link to.",table:{disable:!1}},href:{description:"The url for the link. References an anchor on the current page."},style:{table:{disable:!0}}}},r={args:{style:{clip:"initial",clipPath:"initial",height:"initial",overflow:"initial",position:"initial",whiteSpace:"initial",width:"initial"}}},t={decorators:[n=>e.jsxs(e.Fragment,{children:[e.jsx(g,{size:"small",style:{marginBottom:"2rem"},children:"Klik op deze tekst en druk vervolgens op tab om de Skip Link te tonen."}),e.jsx(n,{})]})]},a={render:()=>e.jsxs(e.Fragment,{children:[e.jsx(g,{size:"small",style:{marginBottom:"2rem"},children:"Klik op deze tekst en druk vervolgens twee keer op tab om de Skip Links te tonen."}),e.jsx(i,{href:"#",children:"Direct naar inhoud"}),e.jsx(i,{href:"#",children:"Direct naar contactgegevens"})]})};var o,s,l;r.parameters={...r.parameters,docs:{...(o=r.parameters)==null?void 0:o.docs,source:{originalSource:`{ + args: { + // This resets the default behaviour of only showing the link + // on focus, in order to always show the link in Storybook + style: { + clip: 'initial', + clipPath: 'initial', + height: 'initial', + overflow: 'initial', + position: 'initial', + whiteSpace: 'initial', + width: 'initial' + } + } +}`,...(l=(s=r.parameters)==null?void 0:s.docs)==null?void 0:l.source}}};var p,c,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`{ + decorators: [Story => <> + + Klik op deze tekst en druk vervolgens op tab om de Skip Link te tonen. + + + ] +}`,...(d=(c=t.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var m,k,h;a.parameters={...a.parameters,docs:{...(m=a.parameters)==null?void 0:m.docs,source:{originalSource:`{ + render: () => <> + + Klik op deze tekst en druk vervolgens twee keer op tab om de Skip Links te tonen. + + Direct naar inhoud + Direct naar contactgegevens + +}`,...(h=(k=a.parameters)==null?void 0:k.docs)==null?void 0:h.source}}};const x=["Default","OnFocus","MultipleLinks"],z=Object.freeze(Object.defineProperty({__proto__:null,Default:r,MultipleLinks:a,OnFocus:t,__namedExportsOrder:x,default:L},Symbol.toStringTag,{value:"Module"}));export{a as M,t as O,z as S}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Spotlight-CVxUBei2.js b/demo-npm_and_yarn/vite-6.0.3/assets/Spotlight-CVxUBei2.js new file mode 100644 index 0000000000..828b2ce5dc --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Spotlight-CVxUBei2.js @@ -0,0 +1 @@ +import{j as s}from"./jsx-runtime-BjgbQsUx.js";import{c as i}from"./clsx-B-dksMZM.js";import{r as p}from"./index-RigO-4kf.js";const e=p.forwardRef(({children:a,className:l,as:o="div",color:t="blue",...r},u)=>s.jsx(o,{...r,ref:u,className:i("ams-spotlight",`ams-spotlight--${t}`,l),children:a}));e.displayName="Spotlight";try{e.displayName="Spotlight",e.__docgenInfo={description:"",displayName:"Spotlight",props:{as:{defaultValue:null,description:"The HTML element to use.",name:"as",required:!1,type:{name:"enum",value:[{value:'"article"'},{value:'"div"'},{value:'"section"'},{value:'"aside"'},{value:'"footer"'}]}},color:{defaultValue:{value:"blue"},description:"The background colour.",name:"color",required:!1,type:{name:"enum",value:[{value:'"azure"'},{value:'"blue"'},{value:'"green"'},{value:'"lime"'},{value:'"magenta"'},{value:'"orange"'},{value:'"purple"'},{value:'"yellow"'}]}}}}}catch{}export{e as S}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Spotlight.docs-XSs1_A6r.js b/demo-npm_and_yarn/vite-6.0.3/assets/Spotlight.docs-XSs1_A6r.js new file mode 100644 index 0000000000..5dab9dfea5 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Spotlight.docs-XSs1_A6r.js @@ -0,0 +1,45 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as r}from"./index-3rgQkYFR.js";import{ae as i,aq as a,ar as c,as as l,at as t}from"./index-CF71P72j.js";import{S as m,A as d,B as h,G as p,L as x,M as u,O as j,P as f,Y as g,I as w}from"./Spotlight.stories-BoH4MtAl.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./exampleContent-hIIPvEhU.js";import"./Spotlight-CVxUBei2.js";const y=` + +# Spotlight + +Emphasizes a section on a page through a distinctive background colour. + +## Guidelines + +- Display the Spotlight at the entire width of the [Screen](/docs/components-layout-screen--docs); do not position it on the [Grid](/docs/components-layout-grid--docs). +- Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice. + +## Relevant WCAG requirements + +- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; + +## References + +- [Color and contrast accessibility](https://web.dev/articles/color-and-contrast-accessibility) +`;/*@license CC0-1.0*/function s(o){const n={code:"code",h2:"h2",h3:"h3",p:"p",...r(),...o.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(i,{of:m}),` +`,e.jsx(a,{children:y}),` +`,e.jsx(c,{}),` +`,e.jsx(l,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"azure",children:"Azure"}),` +`,e.jsx(t,{of:d}),` +`,e.jsx(n.h3,{id:"blue",children:"Blue"}),` +`,e.jsx(t,{of:h}),` +`,e.jsx(n.h3,{id:"green",children:"Green"}),` +`,e.jsx(t,{of:p}),` +`,e.jsx(n.h3,{id:"lime",children:"Lime"}),` +`,e.jsx(t,{of:x}),` +`,e.jsx(n.h3,{id:"magenta",children:"Magenta"}),` +`,e.jsx(t,{of:u}),` +`,e.jsx(n.h3,{id:"orange",children:"Orange"}),` +`,e.jsx(t,{of:j}),` +`,e.jsx(n.h3,{id:"purple",children:"Purple"}),` +`,e.jsx(t,{of:f}),` +`,e.jsx(n.h3,{id:"yellow",children:"Yellow"}),` +`,e.jsx(t,{of:g}),` +`,e.jsx(n.h3,{id:"improve-semantics",children:"Improve semantics"}),` +`,e.jsxs(n.p,{children:["By default, a Spotlight renders a ",e.jsx(n.code,{children:"
    "}),` element in HTML. +Use the `,e.jsx(n.code,{children:"as"})," prop to make your markup more semantic."]}),` +`,e.jsx(t,{of:w})]})}function X(o={}){const{wrapper:n}={...r(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(s,{...o})}):s(o)}export{X as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Spotlight.stories-BoH4MtAl.js b/demo-npm_and_yarn/vite-6.0.3/assets/Spotlight.stories-BoH4MtAl.js new file mode 100644 index 0000000000..22d6386514 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Spotlight.stories-BoH4MtAl.js @@ -0,0 +1,37 @@ +import{j as p}from"./jsx-runtime-BjgbQsUx.js";import{G as i,B as H}from"./index.esm-kzH9sPjb.js";import{c as J}from"./exampleContent-hIIPvEhU.js";import{S as d}from"./Spotlight-CVxUBei2.js";const K=J(),N={title:"Components/Containers/Spotlight",component:d,render:({as:F,color:u})=>p.jsx(d,{as:F,color:u,children:p.jsx(i,{paddingVertical:"medium",children:p.jsx(i.Cell,{span:"all",children:p.jsx(H,{inverseColor:!u||!["lime","yellow"].includes(u),children:K})})})})},r={},e={args:{color:"azure"}},s={args:{color:"blue"}},o={args:{color:"green"}},a={args:{color:"lime"}},c={args:{color:"magenta"}},n={args:{color:"orange"}},t={args:{color:"purple"}},l={args:{color:"yellow"}},m={args:{as:"section"}};var g,S,f;r.parameters={...r.parameters,docs:{...(g=r.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(S=r.parameters)==null?void 0:S.docs)==null?void 0:f.source}}};var x,j,h;e.parameters={...e.parameters,docs:{...(x=e.parameters)==null?void 0:x.docs,source:{originalSource:`{ + args: { + color: 'azure' + } +}`,...(h=(j=e.parameters)==null?void 0:j.docs)==null?void 0:h.source}}};var O,_,b;s.parameters={...s.parameters,docs:{...(O=s.parameters)==null?void 0:O.docs,source:{originalSource:`{ + args: { + color: 'blue' + } +}`,...(b=(_=s.parameters)==null?void 0:_.docs)==null?void 0:b.source}}};var w,y,z;o.parameters={...o.parameters,docs:{...(w=o.parameters)==null?void 0:w.docs,source:{originalSource:`{ + args: { + color: 'green' + } +}`,...(z=(y=o.parameters)==null?void 0:y.docs)==null?void 0:z.source}}};var B,G,v;a.parameters={...a.parameters,docs:{...(B=a.parameters)==null?void 0:B.docs,source:{originalSource:`{ + args: { + color: 'lime' + } +}`,...(v=(G=a.parameters)==null?void 0:G.docs)==null?void 0:v.source}}};var C,M,P;c.parameters={...c.parameters,docs:{...(C=c.parameters)==null?void 0:C.docs,source:{originalSource:`{ + args: { + color: 'magenta' + } +}`,...(P=(M=c.parameters)==null?void 0:M.docs)==null?void 0:P.source}}};var A,I,L;n.parameters={...n.parameters,docs:{...(A=n.parameters)==null?void 0:A.docs,source:{originalSource:`{ + args: { + color: 'orange' + } +}`,...(L=(I=n.parameters)==null?void 0:I.docs)==null?void 0:L.source}}};var Y,q,D;t.parameters={...t.parameters,docs:{...(Y=t.parameters)==null?void 0:Y.docs,source:{originalSource:`{ + args: { + color: 'purple' + } +}`,...(D=(q=t.parameters)==null?void 0:q.docs)==null?void 0:D.source}}};var E,k,Q;l.parameters={...l.parameters,docs:{...(E=l.parameters)==null?void 0:E.docs,source:{originalSource:`{ + args: { + color: 'yellow' + } +}`,...(Q=(k=l.parameters)==null?void 0:k.docs)==null?void 0:Q.source}}};var R,T,V;m.parameters={...m.parameters,docs:{...(R=m.parameters)==null?void 0:R.docs,source:{originalSource:`{ + args: { + as: 'section' + } +}`,...(V=(T=m.parameters)==null?void 0:T.docs)==null?void 0:V.source}}};const U=["Default","Azure","Blue","Green","Lime","Magenta","Orange","Purple","Yellow","ImproveSemantics"],rr=Object.freeze(Object.defineProperty({__proto__:null,Azure:e,Blue:s,Default:r,Green:o,ImproveSemantics:m,Lime:a,Magenta:c,Orange:n,Purple:t,Yellow:l,__namedExportsOrder:U,default:N},Symbol.toStringTag,{value:"Module"}));export{e as A,s as B,o as G,m as I,a as L,c as M,n as O,t as P,rr as S,l as Y}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/StatusBadge-BPsnsflc.css b/demo-npm_and_yarn/vite-6.0.3/assets/StatusBadge-BPsnsflc.css new file mode 100644 index 0000000000..8051337d68 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/StatusBadge-BPsnsflc.css @@ -0,0 +1 @@ +.ams-storybook-status-badge{align-items:center;display:inline-flex;gap:var(--ams-space-xs)} diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/StatusBadge-DiE14TfE.js b/demo-npm_and_yarn/vite-6.0.3/assets/StatusBadge-DiE14TfE.js new file mode 100644 index 0000000000..c22aa7218d --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/StatusBadge-DiE14TfE.js @@ -0,0 +1 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{B as t}from"./Badge-BvbF-Lgn.js";const s=({reason:a})=>e.jsxs("span",{className:"ams-storybook-status-badge",children:[e.jsx(t,{color:"orange",label:"beta"}),e.jsx("span",{children:a})]});try{s.displayName="StatusBadge",s.__docgenInfo={description:"Indicates the status of a component. Use this to prepare implementers for API changes.",displayName:"StatusBadge",props:{reason:{defaultValue:null,description:"",name:"reason",required:!0,type:{name:"string"}}}}}catch{}export{s as S}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Switch.docs-BIXuG1KF.js b/demo-npm_and_yarn/vite-6.0.3/assets/Switch.docs-BIXuG1KF.js new file mode 100644 index 0000000000..451e025002 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Switch.docs-BIXuG1KF.js @@ -0,0 +1,33 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as o,aq as a,ar as r,as as c,at as l}from"./index-CF71P72j.js";import{S as h,W as m}from"./Switch.stories-hlEKXP2r.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";const p=` + +# Switch + +A switch is a control element to toggle between two different states quickly. +A switch applies to a page or the entire system, such as an on/off switch. + +## Guidelines + +- A Switch must have a label, and in most cases, this label should be visible. +- Switch only between two different states. + It is a binary action. +- The action takes place immediately when the user operates the switch. + +## Relevant WCAG requirements + +- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): it is both clear for a user and programmatically what the purpose of a form field is. + +Switch is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. + +## References + +- [Switch Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) +- [Role switch](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role) +`;/*@license CC0-1.0*/function i(t){const n={h2:"h2",h3:"h3",...s(),...t.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(o,{of:h}),` +`,e.jsx(a,{children:p}),` +`,e.jsx(r,{}),` +`,e.jsx(c,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"with-label",children:"With Label"}),` +`,e.jsx(l,{of:m})]})}function I(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{I as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Switch.stories-hlEKXP2r.js b/demo-npm_and_yarn/vite-6.0.3/assets/Switch.stories-hlEKXP2r.js new file mode 100644 index 0000000000..634e724142 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Switch.stories-hlEKXP2r.js @@ -0,0 +1,21 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{f as b}from"./index.esm-kzH9sPjb.js";import{c as w}from"./clsx-B-dksMZM.js";import{r as n}from"./index-RigO-4kf.js";const s=n.forwardRef(({className:t,id:r,...c},a)=>{const l=r||n.useId();return e.jsxs("div",{className:w("ams-switch",t),children:[e.jsx("input",{...c,className:"ams-switch__input",id:l,ref:a,type:"checkbox",role:"switch"}),e.jsx("label",{className:"ams-switch__label",htmlFor:l})]})});s.displayName="Switch";try{s.displayName="Switch",s.__docgenInfo={description:"",displayName:"Switch",props:{}}}catch{}const{useArgs:u}=__STORYBOOK_MODULE_PREVIEW_API__,f={title:"Components/Forms/Switch",component:s,args:{checked:!1,disabled:!1},argTypes:{checked:{description:"Whether the control is initially checked."},disabled:{description:"Prevents interaction. Avoid if possible."},onChange:{action:"clicked",table:{disable:!0}}},render:t=>{const[,r]=u(),c=a=>{r({checked:a.target.checked})};return e.jsx(s,{onClick:c,...t})}},i={},o={decorators:[t=>e.jsx("div",{style:{display:"flex",alignItems:"center",gap:"5rem"},children:e.jsx(t,{})})],render:t=>{const[,r]=u(),c=a=>{r({checked:a.target.checked})};return e.jsxs(e.Fragment,{children:[e.jsx(b,{htmlFor:"switch-with-label",children:"Label"}),e.jsx(s,{onClick:c,...t,id:"switch-with-label"})]})}};var d,h,m;i.parameters={...i.parameters,docs:{...(d=i.parameters)==null?void 0:d.docs,source:{originalSource:"{}",...(m=(h=i.parameters)==null?void 0:h.docs)==null?void 0:m.source}}};var p,g,_;o.parameters={...o.parameters,docs:{...(p=o.parameters)==null?void 0:p.docs,source:{originalSource:`{ + decorators: [Story =>
    + +
    ], + render: args => { + const [, setArgs] = useArgs(); + const handleClick = (event: any) => { + setArgs({ + checked: event.target.checked + }); + }; + return <> + + + ; + } +}`,...(_=(g=o.parameters)==null?void 0:g.docs)==null?void 0:_.source}}};const k=["Default","WithLabel"],v=Object.freeze(Object.defineProperty({__proto__:null,Default:i,WithLabel:o,__namedExportsOrder:k,default:f},Symbol.toStringTag,{value:"Module"}));export{v as S,o as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Table.docs-DxGH8REQ.js b/demo-npm_and_yarn/vite-6.0.3/assets/Table.docs-DxGH8REQ.js new file mode 100644 index 0000000000..5d2c8c7051 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Table.docs-DxGH8REQ.js @@ -0,0 +1,24 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as r,aq as a,ar as i,at as d}from"./index-CF71P72j.js";import{T as m,W as l}from"./Table.stories-BfFwfuPP.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";const c=` + +# Table + +Use the table component to let users compare information in rows and columns. +Table is used to display simple information that does not need to be filtered or edited. + +## Guidelines + +- Use \`\` to describe a table in the same way you would use a heading. + A caption helps users find, navigate and understand tables. +- Never use the table component to layout content on a page. + Instead, use [Grid](/docs/components-layout-grid--docs). +`;/*@license CC0-1.0*/function t(o){const n={code:"code",h2:"h2",h3:"h3",p:"p",...s(),...o.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(r,{of:m}),` +`,e.jsx(a,{children:c}),` +`,e.jsx(i,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"with-footer-and-row-headers",children:"With footer and row headers"}),` +`,e.jsxs(n.p,{children:[`Use table headers to tell users what the rows and columns represent. +Use the scope attribute to help users of assistive technology distinguish between row and column headers. +Use `,e.jsx(n.code,{children:"Table.Footer"})," for a summary row."]}),` +`,e.jsx(d,{of:l})]})}function v(o={}){const{wrapper:n}={...s(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(t,{...o})}):t(o)}export{v as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Table.stories-BfFwfuPP.js b/demo-npm_and_yarn/vite-6.0.3/assets/Table.stories-BfFwfuPP.js new file mode 100644 index 0000000000..aa6f1a2bb8 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Table.stories-BfFwfuPP.js @@ -0,0 +1,51 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{c as s}from"./clsx-B-dksMZM.js";import{r as n}from"./index-RigO-4kf.js";const y=n.forwardRef(({children:a,className:r,...o},d)=>e.jsx("tbody",{...o,ref:d,className:s("ams-table__body",r),children:a}));y.displayName="Table.Body";try{Table.Body.displayName="Table.Body",Table.Body.__docgenInfo={description:"",displayName:"Table.Body",props:{}}}catch{}const m=n.forwardRef(({children:a,className:r,...o},d)=>e.jsx("caption",{...o,ref:d,className:s("ams-table__caption",r),children:a}));m.displayName="Table.Caption";try{Table.Caption.displayName="Table.Caption",Table.Caption.__docgenInfo={description:"",displayName:"Table.Caption",props:{}}}catch{}const w=n.forwardRef(({children:a,className:r,...o},d)=>e.jsx("td",{...o,ref:d,className:s("ams-table__cell",r),children:a}));w.displayName="Table.Cell";try{Table.Cell.displayName="Table.Cell",Table.Cell.__docgenInfo={description:"",displayName:"Table.Cell",props:{}}}catch{}const h=n.forwardRef(({children:a,className:r,...o},d)=>e.jsx("tfoot",{...o,ref:d,className:s("ams-table__footer",r),children:a}));h.displayName="Table.Footer";try{Table.Footer.displayName="Table.Footer",Table.Footer.__docgenInfo={description:"",displayName:"Table.Footer",props:{}}}catch{}const j=n.forwardRef(({children:a,className:r,...o},d)=>e.jsx("thead",{...o,ref:d,className:s("ams-table__header",r),children:a}));j.displayName="Table.Header";try{Table.Header.displayName="Table.Header",Table.Header.__docgenInfo={description:"",displayName:"Table.Header",props:{}}}catch{}const x=n.forwardRef(({children:a,className:r,...o},d)=>e.jsx("th",{...o,ref:d,className:s("ams-table__header-cell",r),children:a}));x.displayName="Table.HeaderCell";try{Table.HeaderCell.displayName="Table.HeaderCell",Table.HeaderCell.__docgenInfo={description:"",displayName:"Table.HeaderCell",props:{}}}catch{}const H=n.forwardRef(({children:a,className:r,...o},d)=>e.jsx("tr",{...o,ref:d,className:s("ams-table__row",r),children:a}));H.displayName="Table.Row";try{Table.Row.displayName="Table.Row",Table.Row.__docgenInfo={description:"",displayName:"Table.Row",props:{}}}catch{}const R=n.forwardRef(({children:a,className:r,...o},d)=>e.jsx("div",{className:"ams-table",children:e.jsx("table",{...o,ref:d,className:s("ams-table__table",r),children:a})}));R.displayName="Table";const l=Object.assign(R,{Body:y,Caption:m,Cell:w,Footer:h,Header:j,HeaderCell:x,Row:H});try{l.displayName="Table",l.__docgenInfo={description:"",displayName:"Table",props:{}}}catch{}const f={title:"Components/Containers/Table",component:l},t={args:{children:[e.jsx(l.Caption,{children:"Kosten en levertijd"},"caption"),e.jsx(l.Header,{children:e.jsxs(l.Row,{children:[e.jsx(l.HeaderCell,{children:"Type"}),e.jsxs(l.HeaderCell,{children:["Normale levertijd",e.jsx("br",{}),"1 week"]}),e.jsxs(l.HeaderCell,{children:["Spoed",e.jsx("br",{}),"2 werkdagen"]})]})},"header"),e.jsxs(l.Body,{children:[e.jsxs(l.Row,{children:[e.jsx(l.Cell,{children:"Paspoort"}),e.jsx(l.Cell,{children:"€ 77,85"}),e.jsx(l.Cell,{children:"€ 130,80"})]}),e.jsxs(l.Row,{children:[e.jsx(l.Cell,{children:"ID-kaart"}),e.jsx(l.Cell,{children:"€ 70,35"}),e.jsx(l.Cell,{children:"€ 123,30"})]})]},"body")]}},c={args:{children:[e.jsx(l.Caption,{children:"Kosten en tijd"},"caption"),e.jsx(l.Header,{children:e.jsxs(l.Row,{children:[e.jsx(l.HeaderCell,{children:"Tijd"}),e.jsx(l.HeaderCell,{children:"Kosten"})]})},"header"),e.jsxs(l.Body,{children:[e.jsxs(l.Row,{children:[e.jsx(l.HeaderCell,{scope:"row",children:"Eerste 6 weken"}),e.jsx(l.Cell,{children:"€ 109,80 per week"})]}),e.jsxs(l.Row,{children:[e.jsx(l.HeaderCell,{scope:"row",children:"Volgende 33 weken"}),e.jsx(l.Cell,{children:"€ 79,80 per week"})]})]},"body"),e.jsx(l.Footer,{children:e.jsxs(l.Row,{children:[e.jsx(l.HeaderCell,{scope:"row",children:"Totale verwachte kosten"}),e.jsx(l.Cell,{children:"€ 3.292,20"})]})},"footer")]}};var b,i,T;t.parameters={...t.parameters,docs:{...(b=t.parameters)==null?void 0:b.docs,source:{originalSource:`{ + args: { + children: [Kosten en levertijd, + + Type + + Normale levertijd +
    1 week +     + + Spoed +
    2 werkdagen +     +     +     , + + Paspoort + € 77,85 + € 130,80 + + + ID-kaart + € 70,35 + € 123,30 + + ] + } +}`,...(T=(i=t.parameters)==null?void 0:i.docs)==null?void 0:T.source}}};var p,_,C;c.parameters={...c.parameters,docs:{...(p=c.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + children: [Kosten en tijd, + + Tijd + Kosten + + , + + Eerste 6 weken + € 109,80 per week + + + Volgende 33 weken + € 79,80 per week + + , + + Totale verwachte kosten + € 3.292,20 + + ] + } +}`,...(C=(_=c.parameters)==null?void 0:_.docs)==null?void 0:C.source}}};const N=["Default","WithFooterAndRowHeaders"],B=Object.freeze(Object.defineProperty({__proto__:null,Default:t,WithFooterAndRowHeaders:c,__namedExportsOrder:N,default:f},Symbol.toStringTag,{value:"Module"}));export{B as T,c as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/TableOfContents.docs-CPQlMqvP.js b/demo-npm_and_yarn/vite-6.0.3/assets/TableOfContents.docs-CPQlMqvP.js new file mode 100644 index 0000000000..3ab9fb4356 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/TableOfContents.docs-CPQlMqvP.js @@ -0,0 +1,15 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as s}from"./index-3rgQkYFR.js";import{ae as r,aq as i,ar as a,as as m,at as l}from"./index-CF71P72j.js";import{T as p,M as c}from"./TableOfContents.stories-VCBJ07Xc.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./clsx-B-dksMZM.js";import"./Heading-Vg3KKL7T.js";import"./getHeadingTag-Dv1eMqvl.js";const x=` + +# Table of Contents + +A list of links corresponding to the content sections on the page. +It helps users to easily navigate to different sections on the same page. +`;/*@license CC0-1.0*/function o(n){const e={h2:"h2",h3:"h3",...s(),...n.components};return t.jsxs(t.Fragment,{children:[` +`,` +`,t.jsx(r,{of:p}),` +`,t.jsx(i,{children:x}),` +`,t.jsx(a,{}),` +`,t.jsx(m,{}),` +`,t.jsx(e.h2,{id:"examples",children:"Examples"}),` +`,t.jsx(e.h3,{id:"multiple-levels",children:"Multiple levels"}),` +`,t.jsx(l,{of:c})]})}function w(n={}){const{wrapper:e}={...s(),...n.components};return e?t.jsx(e,{...n,children:t.jsx(o,{...n})}):o(n)}export{w as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/TableOfContents.stories-VCBJ07Xc.js b/demo-npm_and_yarn/vite-6.0.3/assets/TableOfContents.stories-VCBJ07Xc.js new file mode 100644 index 0000000000..2c9c055abe --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/TableOfContents.stories-VCBJ07Xc.js @@ -0,0 +1,31 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{c}from"./clsx-B-dksMZM.js";import{r as f}from"./index-RigO-4kf.js";import{H as C}from"./Heading-Vg3KKL7T.js";const m=f.forwardRef(({children:t,className:a,label:s,...l},r)=>e.jsxs("li",{className:"ams-table-of-contents__item",children:[e.jsx("a",{...l,className:c("ams-table-of-contents__link",a),ref:r,children:s}),t]}));m.displayName="TableOfContents.Link";try{TableOfContents.Link.displayName="TableOfContents.Link",TableOfContents.Link.__docgenInfo={description:"",displayName:"TableOfContents.Link",props:{label:{defaultValue:null,description:"The text for the link.",name:"label",required:!0,type:{name:"string"}}}}}catch{}const T=f.forwardRef(({children:t,className:a,...s},l)=>e.jsx("ul",{...s,ref:l,className:c("ams-table-of-contents__list",a),children:t}));T.displayName="TableOfContents.List";try{TableOfContents.List.displayName="TableOfContents.List",TableOfContents.List.__docgenInfo={description:"",displayName:"TableOfContents.List",props:{}}}catch{}const u=f.forwardRef(({children:t,className:a,heading:s,headingLevel:l=2,...r},O)=>e.jsxs("nav",{...r,ref:O,className:c("ams-table-of-contents",a),children:[s&&e.jsx(C,{className:"ams-table-of-contents__heading",level:l,size:"level-4",children:s}),t]}));u.displayName="TableOfContents";const n=Object.assign(u,{Link:m,List:T});try{n.displayName="TableOfContents",n.__docgenInfo={description:"",displayName:"TableOfContents",props:{heading:{defaultValue:null,description:"The text for the Heading.",name:"heading",required:!1,type:{name:"string"}},headingLevel:{defaultValue:{value:"2"},description:`The hierarchical level of the Heading within the document. +Note: this intentionally does not change the font size.`,name:"headingLevel",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"}]}}}}}catch{}const g={title:"Components/Navigation/Table of Contents",component:n,args:{heading:"Op deze pagina",children:e.jsxs(n.List,{children:[e.jsx(n.Link,{href:"#section-1",label:"Zo werkt het"}),e.jsx(n.Link,{href:"#section-2",label:"Voorwaarden"}),e.jsx(n.Link,{href:"#section-3",label:"Aanvragen"}),e.jsx(n.Link,{href:"#section-4",label:"Zie ook"})]})}},i={},o={args:{heading:"Inhoudsopgave",children:e.jsxs(n.List,{children:[e.jsx(n.Link,{href:"#section-1",label:"Waarom is het belangrijk om helder te schrijven?"}),e.jsx(n.Link,{href:"#section-2",label:"Schrijf in stappen",children:e.jsxs(n.List,{children:[e.jsx(n.Link,{href:"#section-2.1",label:"Stap 2"}),e.jsx(n.Link,{href:"#section-2.2",label:"Stap 3"}),e.jsx(n.Link,{href:"#section-2.3",label:"Stap 4"})]})}),e.jsx(n.Link,{href:"#section-3",label:"Structuur van een heldere tekst",children:e.jsxs(n.List,{children:[e.jsx(n.Link,{href:"#section-3.1",label:"Opmaakeisen"}),e.jsx(n.Link,{href:"#section-3.2",label:"Tekstlengte",children:e.jsx(n.List,{children:e.jsx(n.Link,{href:"#section-3.2.1",label:"Boodschap en achtergronden"})})}),e.jsx(n.Link,{href:"#section-3.3",label:"Alinea's en tussenkopjes"}),e.jsx(n.Link,{href:"#section-3.4",label:"Opsommingen"})]})}),e.jsx(n.Link,{href:"#section-4",label:"Taalgebruik in heldere taal"}),e.jsx(n.Link,{href:"#section-5",label:"Tekstonderdelen in heldere taal"}),e.jsx(n.Link,{href:"#section-6",label:"Moeilijke woordenboek (inclusief niet te gebruiken)"})]})}};var b,d,h;i.parameters={...i.parameters,docs:{...(b=i.parameters)==null?void 0:b.docs,source:{originalSource:"{}",...(h=(d=i.parameters)==null?void 0:d.docs)==null?void 0:h.source}}};var p,k,L;o.parameters={...o.parameters,docs:{...(p=o.parameters)==null?void 0:p.docs,source:{originalSource:`{ + args: { + heading: 'Inhoudsopgave', + children: + + + + + + + + + + + + + + + + + + + + + + + + + } +}`,...(L=(k=o.parameters)==null?void 0:k.docs)==null?void 0:L.source}}};const j=["Default","MultipleLevels"],N=Object.freeze(Object.defineProperty({__proto__:null,Default:i,MultipleLevels:o,__namedExportsOrder:j,default:g},Symbol.toStringTag,{value:"Module"}));export{o as M,N as T}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Tabs.docs-DBIvdQT6.js b/demo-npm_and_yarn/vite-6.0.3/assets/Tabs.docs-DBIvdQT6.js new file mode 100644 index 0000000000..1e8fbcc9d7 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Tabs.docs-DBIvdQT6.js @@ -0,0 +1,44 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as o}from"./index-3rgQkYFR.js";import{ae as i,aq as s,ar as r,at as h}from"./index-CF71P72j.js";import{T as c,W as l}from"./Tabs.stories-DZNIowpf.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./exampleContent-hIIPvEhU.js";import"./useKeyboardFocus-CRUFsA_C.js";const p=` + +# Tabs + +Tabs are used to bundle related content in a compact overview within a page. Each tab has a short name, and these names indicate the relationship between the information displayed in each tab. + +## Guidelines + +- The content of each tab is viewable independently, not in the context of one another. +- The content within each tab should have a similar structure. +- Use when there is limited visual space and content needs to be divided into sections. +- Each tab consists of a button and a panel. + A \`tab\` prop with a corresponding value connects them. + +You can navigate tabs with your keyboard: + +| key | element | +| :------------- | :--------------------------------------------- | +| Enter or Space | Open or close the tab that has the focus | +| Tab | Go to the next element that can have focus | +| Shift + Tab | Go to the next element that can have focus | +| Left arrow | If the tabs have focus: go to the previous tab | +| Right arrow | If the tabs have focus: go to the next tab | +| Home | If the tabs have focus: go to the first tab | +| End | If the tabs have focus, go to the last tab | + +### Caution + +Do not use tabs if the content in each tab functions just as well on separate pages. + +## References + +- [W3C - Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) +- [MDN - Tab Aria Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role) +`;/*@license CC0-1.0*/function a(e){const n={h2:"h2",h3:"h3",p:"p",...o(),...e.components};return t.jsxs(t.Fragment,{children:[` +`,` +`,t.jsx(i,{of:c}),` +`,t.jsx(s,{children:p}),` +`,t.jsx(r,{}),` +`,t.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,t.jsx(n.h3,{id:"with-initial-tab",children:"With initial tab"}),` +`,t.jsx(n.p,{children:`The first tab is active by default. +Another tab’s panel can be displayed initially as well.`}),` +`,t.jsx(h,{of:l})]})}function D(e={}){const{wrapper:n}={...o(),...e.components};return n?t.jsx(n,{...e,children:t.jsx(a,{...e})}):a(e)}export{D as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/Tabs.stories-DZNIowpf.js b/demo-npm_and_yarn/vite-6.0.3/assets/Tabs.stories-DZNIowpf.js new file mode 100644 index 0000000000..d12ae8da9a --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/Tabs.stories-DZNIowpf.js @@ -0,0 +1,8 @@ +import{j as t}from"./jsx-runtime-BjgbQsUx.js";import{H as B,P as S}from"./index.esm-kzH9sPjb.js";import{b as T}from"./exampleContent-hIIPvEhU.js";import{c as m}from"./clsx-B-dksMZM.js";import{r}from"./index-RigO-4kf.js";import{u as D}from"./useKeyboardFocus-CRUFsA_C.js";/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */const O={activeTab:0,tabsId:"",updateTab:()=>{}},g=r.createContext(O),P=r.forwardRef(({children:e,className:a,tab:s=0,...o},c)=>{const{activeTab:i,tabsId:n,updateTab:u}=r.useContext(g);return t.jsxs("button",{...o,"aria-controls":`${n}-panel-${s}`,"aria-selected":i===s,className:m("ams-tabs__button",a),id:`${n}-tab-${s}`,onClick:()=>{r.startTransition(()=>{u(s)})},ref:c,role:"tab",tabIndex:i===s?0:-1,children:[t.jsx("span",{"aria-hidden":"true",className:"ams-tabs__button-label-hidden",children:e}),t.jsx("span",{className:"ams-tabs__button-label",children:e})]})});P.displayName="Tabs.Button";try{Tabs.Button.displayName="Tabs.Button",Tabs.Button.__docgenInfo={description:"",displayName:"Tabs.Button",props:{tab:{defaultValue:{value:"0"},description:"An identifier.",name:"tab",required:!1,type:{name:"number"}}}}}catch{}const L=r.forwardRef(({children:e,className:a,...s},o)=>t.jsx("div",{...s,role:"tablist",ref:o,className:m("ams-tabs__list",a),children:e}));L.displayName="Tabs.List";try{Tabs.List.displayName="Tabs.List",Tabs.List.__docgenInfo={description:"",displayName:"Tabs.List",props:{}}}catch{}const w=r.forwardRef(({tab:e,children:a,className:s,...o},c)=>{const{activeTab:i,tabsId:n}=r.useContext(g);return e!==i?null:t.jsx("div",{...o,role:"tabpanel","aria-labelledby":`${n}-tab-${e}`,id:`${n}-panel-${e}`,tabIndex:0,ref:c,className:m("ams-tabs__panel",s),children:a})});w.displayName="Tabs.Panel";try{Tabs.Panel.displayName="Tabs.Panel",Tabs.Panel.__docgenInfo={description:"",displayName:"Tabs.Panel",props:{tab:{defaultValue:null,description:"The identifier of the corresponding Tab.",name:"tab",required:!0,type:{name:"number"}}}}}catch{}const C=r.forwardRef(({activeTab:e,children:a,className:s,...o},c)=>{const i=r.useId(),n=r.useRef(null),[u,p]=r.useState(0),f=r.useMemo(()=>Array.isArray(a)?a[0].props.children:[],[a]);r.useEffect(()=>{typeof e=="number"&&Number.isInteger(e)&&(e<0?p(0):e>f.length-1?p(f.length-1):p(e))},[e,f]);const $=R=>{p(R)};r.useImperativeHandle(c,()=>n.current);const{keyDown:A}=D(n,{rotating:!0,horizontally:!0});return t.jsx(g.Provider,{value:{activeTab:u,updateTab:$,tabsId:i},children:t.jsx("div",{...o,role:"tabs",ref:n,onKeyDown:A,className:m("ams-tabs",s),children:a})})});C.displayName="Tabs";const l=Object.assign(C,{Button:P,List:L,Panel:w});try{l.displayName="Tabs",l.__docgenInfo={description:"",displayName:"Tabs",props:{activeTab:{defaultValue:null,description:"The number of the active tab. Corresponds to its `tab` value.",name:"activeTab",required:!1,type:{name:"number"}}}}}catch{}const _=1e3,E=({children:e})=>{console.log(`[ARTIFICIALLY SLOW] Adding a ${_}ms delay…`);let a=performance.now();for(;performance.now()-a<_;);return e},y=[{id:0,label:"Gegevens",body:T()},{id:1,label:"Aanslagen",body:T()},{id:2,label:"Documenten",body:t.jsxs(t.Fragment,{children:["(This tab panel simulates a load time of ",_," milliseconds.)",t.jsx(E,{})]})},{id:3,label:"Acties",body:T()}],V=[t.jsx(l.List,{children:y.map(({id:e,label:a})=>t.jsx(l.Button,{tab:e,children:a},a))},"tabsList"),y.map(({id:e,body:a,label:s})=>t.jsxs(l.Panel,{tab:e,children:[t.jsx(B,{className:"ams-mb--xs",level:3,children:s}),t.jsx(S,{children:a})]},s))],W={title:"Components/Containers/Tabs",component:l,args:{children:V},argTypes:{activeTab:{control:{type:"number",min:0,max:y.length-1}}}},d={},b={args:{activeTab:3}};var x,h,I;d.parameters={...d.parameters,docs:{...(x=d.parameters)==null?void 0:x.docs,source:{originalSource:"{}",...(I=(h=d.parameters)==null?void 0:h.docs)==null?void 0:I.source}}};var N,j,v;b.parameters={...b.parameters,docs:{...(N=b.parameters)==null?void 0:N.docs,source:{originalSource:`{ + args: { + activeTab: 3 + } +}`,...(v=(j=b.parameters)==null?void 0:j.docs)==null?void 0:v.source}}};const q=["Default","WithInitialTab"],G=Object.freeze(Object.defineProperty({__proto__:null,Default:d,WithInitialTab:b,__namedExportsOrder:q,default:W},Symbol.toStringTag,{value:"Module"}));export{G as T,b as W}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/TextArea.docs-CfO7Dmq3.js b/demo-npm_and_yarn/vite-6.0.3/assets/TextArea.docs-CfO7Dmq3.js new file mode 100644 index 0000000000..14116f4427 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/TextArea.docs-CfO7Dmq3.js @@ -0,0 +1,43 @@ +import{j as e}from"./jsx-runtime-BjgbQsUx.js";import{useMDXComponents as t}from"./index-3rgQkYFR.js";import{ae as r,aq as a,ar as d,as as l,at as i}from"./index-CF71P72j.js";import{T as h,V as c,H as m,N as x,I as p,D as f,a as j,b as u}from"./TextArea.stories-D05jKGSH.js";import"./index-D2MAbzvX.js";import"./index-RigO-4kf.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-DxGZ9Cpb.js";import"../sb-preview/runtime.js";import"./index-BIm0odtm.js";import"./index-D-8MO0q_.js";import"./index-CHGET4sZ.js";import"./index-DrFu-skq.js";import"./index.esm-kzH9sPjb.js";import"./clsx-B-dksMZM.js";import"./index.esm-CPc1noYl.js";import"./exampleContent-hIIPvEhU.js";const b=` + +# TextArea + +A form field that allows the user to input text over multiple lines. + +## Guidelines + +- Use a TextArea when users need to enter more than 1 sentence of text, such as a comment or description. +- The height of the TextArea should be appropriate for the information to be entered. +- A TextArea must have a label, and in most cases, this label should be visible. +- Use \`spellcheck="false"\` for fields that may contain sensitive information, such as passwords and personal data. + Some browser extensions for spell-checking send this information to external servers. + +## Accessibility + +- [WCAG 2.1](https://www.w3.org/WAI/WCAG21/Techniques/html/H91.html) requires that the TextArea has a label or title attribute. +`;/*@license CC0-1.0*/function o(s){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",p:"p",...t(),...s.components};return e.jsxs(e.Fragment,{children:[` +`,` +`,e.jsx(r,{of:h}),` +`,e.jsx(a,{children:b}),` +`,e.jsx(d,{}),` +`,e.jsx(l,{}),` +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` +`,e.jsx(n.h3,{id:"vertical-resize",children:"Vertical resize"}),` +`,e.jsx(i,{of:c}),` +`,e.jsx(n.h3,{id:"horizontal-resize",children:"Horizontal resize"}),` +`,e.jsx(i,{of:m}),` +`,e.jsx(n.h3,{id:"no-resize",children:"No resize"}),` +`,e.jsx(i,{of:x}),` +`,e.jsx(n.h3,{id:"invalid",children:"Invalid"}),` +`,e.jsx(i,{of:p}),` +`,e.jsx(n.h3,{id:"disabled",children:"Disabled"}),` +`,e.jsx(i,{of:f}),` +`,e.jsx(n.h4,{id:"in-a-field",children:"In a Field"}),` +`,e.jsx(n.p,{children:"Use a Field to group a Text Area with a Label, description and / or an Error Message."}),` +`,e.jsxs(n.p,{children:["If you don’t need the description, remove its Paragraph and the ",e.jsx(n.code,{children:"aria-describedby"})," from the Text Input."]}),` +`,e.jsxs(n.p,{children:["Check ",e.jsx(n.a,{href:"/docs/components-forms-field--docs",children:"the Field docs"})," for more information on configuring it."]}),` +`,e.jsx(i,{of:j}),` +`,e.jsx(n.h4,{id:"in-a-field-with-validation",children:"In a Field with validation"}),` +`,e.jsxs(n.p,{children:["If the Text Area can become invalid, add an Error Message and its ",e.jsx(n.code,{children:"id"})," to the ",e.jsx(n.code,{children:"aria-describedby"})," prop of the Text Area."]}),` +`,e.jsxs(n.p,{children:["Check ",e.jsx(n.a,{href:"/docs/components-forms-field--docs",children:"the Field docs"})," for more information on configuring it."]}),` +`,e.jsx(i,{of:u})]})}function W(s={}){const{wrapper:n}={...t(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(o,{...s})}):o(s)}export{W as default}; diff --git a/demo-npm_and_yarn/vite-6.0.3/assets/TextArea.stories-D05jKGSH.js b/demo-npm_and_yarn/vite-6.0.3/assets/TextArea.stories-D05jKGSH.js new file mode 100644 index 0000000000..a16a5dc174 --- /dev/null +++ b/demo-npm_and_yarn/vite-6.0.3/assets/TextArea.stories-D05jKGSH.js @@ -0,0 +1,42 @@ +import{j as r}from"./jsx-runtime-BjgbQsUx.js";import{e as w,f as D,P as $,E as H}from"./index.esm-kzH9sPjb.js";import{b as k}from"./exampleContent-hIIPvEhU.js";import{c as B}from"./clsx-B-dksMZM.js";import{r as G}from"./index-RigO-4kf.js";const a=G.forwardRef(({className:e,dir:W,invalid:q,resize:p,...m},C)=>r.jsx("textarea",{...m,"aria-invalid":q||void 0,className:B("ams-text-area",p&&`ams-text-area--resize-${p}`,m.cols&&"ams-text-area--cols",e),dir:W??"auto",ref:C}));a.displayName="TextArea";try{a.displayName="TextArea",a.__docgenInfo={description:"",displayName:"TextArea",props:{invalid:{defaultValue:null,description:"Whether the value fails a validation rule.",name:"invalid",required:!1,type:{name:"boolean"}},resize:{defaultValue:null,description:"Allows the user to resize the text box. The default is resizing in both directions.",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"horizontal"'},{value:'"vertical"'}]}}}}}catch{}const J=k(),K={title:"Components/Forms/Text Area",component:a,args:{defaultValue:J,disabled:!1,invalid:!1},argTypes:{cols:{control:{type:"number"},description:"The width, expressed in the average number of characters."},defaultValue:{table:{disable:!0}},disabled:{description:"Prevents interaction. Avoid if possible."},resize:{control:{type:"radio",labels:{undefined:"default",none:"none",horizontal:"horizontal",vertical:"vertical"}},options:[void 0,"none","horizontal","vertical"]},rows:{control:{type:"number"},description:"The number of lines to show"}}},i={},s={args:{resize:"vertical"}},o={args:{resize:"horizontal"}},t={args:{resize:"none"}},n={args:{invalid:!0}},l={args:{disabled:!0}},d={render:e=>r.jsxs(w,{invalid:e.invalid,children:[r.jsx(D,{htmlFor:"input1",children:"Label"}),r.jsx($,{id:"description1",size:"small",children:"Omschrijving."}),e.invalid&&r.jsx(H,{id:"error1",children:"Foutmelding."}),r.jsx(a,{"aria-describedby":`description1${e.invalid?" error1":""}`,id:"input1",...e})]})},c={args:{invalid:!0},render:e=>r.jsxs(w,{invalid:e.invalid,children:[r.jsx(D,{htmlFor:"input2",children:"Label"}),r.jsx($,{id:"description2",size:"small",children:"Omschrijving."}),e.invalid&&r.jsx(H,{id:"error2",children:"Foutmelding."}),r.jsx(a,{"aria-describedby":`description2${e.invalid?" error2":""}`,id:"input2",...e})]})};var u,g,v;i.parameters={...i.parameters,docs:{...(u=i.parameters)==null?void 0:u.docs,source:{originalSource:"{}",...(v=(g=i.parameters)==null?void 0:g.docs)==null?void 0:v.source}}};var h,b,x;s.parameters={...s.parameters,docs:{...(h=s.parameters)==null?void 0:h.docs,source:{originalSource:`{ + args: { + resize: 'vertical' + } +}`,...(x=(b=s.parameters)==null?void 0:b.docs)==null?void 0:x.source}}};var z,f,j;o.parameters={...o.parameters,docs:{...(z=o.parameters)==null?void 0:z.docs,source:{originalSource:`{ + args: { + resize: 'horizontal' + } +}`,...(j=(f=o.parameters)==null?void 0:f.docs)==null?void 0:j.source}}};var F,y,A;t.parameters={...t.parameters,docs:{...(F=t.parameters)==null?void 0:F.docs,source:{originalSource:`{ + args: { + resize: 'none' + } +}`,...(A=(y=t.parameters)==null?void 0:y.docs)==null?void 0:A.source}}};var T,_,S;n.parameters={...n.parameters,docs:{...(T=n.parameters)==null?void 0:T.docs,source:{originalSource:`{ + args: { + invalid: true + } +}`,...(S=(_=n.parameters)==null?void 0:_.docs)==null?void 0:S.source}}};var E,L,V;l.parameters={...l.parameters,docs:{...(E=l.parameters)==null?void 0:E.docs,source:{originalSource:`{ + args: { + disabled: true + } +}`,...(V=(L=l.parameters)==null?void 0:L.docs)==null?void 0:V.source}}};var I,P,R;d.parameters={...d.parameters,docs:{...(I=d.parameters)==null?void 0:I.docs,source:{originalSource:`{ + render: args => + + + Omschrijving. + + {args.invalid && Foutmelding.} +