From cb81afed9ce568516cca5badd5877200d7ba0f99 Mon Sep 17 00:00:00 2001 From: Borai Date: Tue, 16 Jul 2024 19:56:11 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20nl-desig?= =?UTF-8?q?n-system/denhaag@f195949e09deacb1989f017e2205b00a77fe74b2=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 4534.27712d5a.iframe.bundle.js | 1 - 4534.e7db2eaf.iframe.bundle.js | 1 + ...d3ba46b.iframe.bundle.js => 7096.d519b42d.iframe.bundle.js | 2 +- 7865.92fe8de0.iframe.bundle.js | 1 + 7865.af2da30b.iframe.bundle.js | 1 - ....js => css-Accordion-stories-mdx.1ba67aad.iframe.bundle.js | 2 +- ...dle.js => css-Action-stories-mdx.36024b6b.iframe.bundle.js | 2 +- ...ndle.js => css-Alert-stories-mdx.bbb97604.iframe.bundle.js | 2 +- ...> css-AnchorCollapse-stories-mdx.8eb3b8ef.iframe.bundle.js | 2 +- ...css-AnchorNavigation-stories-mdx.7e6c35ac.iframe.bundle.js | 2 +- ...s => css-ArticleMeta-stories-mdx.073f2e12.iframe.bundle.js | 2 +- ... => css-BadgeCounter-stories-mdx.faa7b253.iframe.bundle.js | 2 +- ...js => css-Blockquote-stories-mdx.4b3c3b2e.iframe.bundle.js | 2 +- ...js => css-Breadcrumb-stories-mdx.9365dc34.iframe.bundle.js | 2 +- ...dle.js => css-Button-stories-mdx.313bc342.iframe.bundle.js | 2 +- ...s => css-ButtonGroup-stories-mdx.5a287b14.iframe.bundle.js | 2 +- ...e.js => css-CardNews-stories-mdx.37afa0cb.iframe.bundle.js | 2 +- ...s => css-CtaDownload-stories-mdx.4db6f2b4.iframe.bundle.js | 2 +- ...e.js => css-CtaEvent-stories-mdx.47e75f7c.iframe.bundle.js | 2 +- ... css-CtaImageContent-stories-mdx.d69187e2.iframe.bundle.js | 2 +- ...le.js => css-CtaLink-stories-mdx.8ce5373a.iframe.bundle.js | 2 +- ... css-DescriptionList-stories-mdx.39cb8ec1.iframe.bundle.js | 2 +- ...le.js => css-Divider-stories-mdx.21850f9f.iframe.bundle.js | 2 +- ...> css-DynamicContent-stories-mdx.99fd58de.iframe.bundle.js | 2 +- ....js => css-EventDate-stories-mdx.12fe8b95.iframe.bundle.js | 2 +- ...undle.js => css-File-stories-mdx.0ab476eb.iframe.bundle.js | 2 +- ... css-FloatingContact-stories-mdx.4480147e.iframe.bundle.js | 2 +- css-FormField-stories.71eb083d.iframe.bundle.js | 1 + css-FormField-stories.d00b966e.iframe.bundle.js | 1 - ... => css-FormProgress-stories-mdx.57c608e2.iframe.bundle.js | 2 +- ...e.js => css-Heading1-stories-mdx.de6acae9.iframe.bundle.js | 2 +- ...e.js => css-Heading2-stories-mdx.0bf25236.iframe.bundle.js | 2 +- ...e.js => css-Heading3-stories-mdx.dd528d3a.iframe.bundle.js | 2 +- ...e.js => css-Heading4-stories-mdx.b05d72b7.iframe.bundle.js | 2 +- ...e.js => css-Heading5-stories-mdx.6429549e.iframe.bundle.js | 2 +- ...undle.js => css-Hero-stories-mdx.608abd2a.iframe.bundle.js | 2 +- ...css-HighlightedLinks-stories-mdx.0f6030c8.iframe.bundle.js | 2 +- ...ndle.js => css-Image-stories-mdx.2b0556e0.iframe.bundle.js | 2 +- ...undle.js => css-Link-stories-mdx.35aa77d6.iframe.bundle.js | 2 +- ....js => css-LinkGroup-stories-mdx.a031ac1e.iframe.bundle.js | 2 +- ...undle.js => css-List-stories-mdx.4a019741.iframe.bundle.js | 2 +- ...undle.js => css-Note-stories-mdx.d2d49901.iframe.bundle.js | 2 +- css-OrderedList-stories.43e4c545.iframe.bundle.js | 1 + css-OrderedList-stories.c796be94.iframe.bundle.js | 1 - ...s => css-PageButtons-stories-mdx.44c202dc.iframe.bundle.js | 2 +- ...js => css-Pagination-stories-mdx.de0d7bd6.iframe.bundle.js | 2 +- ....js => css-Paragraph-stories-mdx.1acb436c.iframe.bundle.js | 2 +- ... => css-ProcessSteps-stories-mdx.19b3d486.iframe.bundle.js | 2 +- css-StepMarker-stories-mdx.8fa92e3b.iframe.bundle.js | 1 + css-StepMarker-stories-mdx.cbe2d605.iframe.bundle.js | 1 - css-UnorderedList-stories.1490909a.iframe.bundle.js | 1 + css-UnorderedList-stories.2f3d3ca9.iframe.bundle.js | 1 - iframe.html | 4 ++-- ...b3e5a0a.iframe.bundle.js => main.9a89799c.iframe.bundle.js | 2 +- project.json | 2 +- react-FormField-stories.846cb150.iframe.bundle.js | 1 - react-FormField-stories.ff3e8eff.iframe.bundle.js | 1 + react-OrderedList-stories.87c16c3b.iframe.bundle.js | 1 + react-OrderedList-stories.da4cdb16.iframe.bundle.js | 1 - react-UnorderedList-stories.a6ee96fc.iframe.bundle.js | 1 - react-UnorderedList-stories.e9bf88d2.iframe.bundle.js | 1 + ...iframe.bundle.js => runtime~main.730f841e.iframe.bundle.js | 2 +- 62 files changed, 54 insertions(+), 54 deletions(-) delete mode 100644 4534.27712d5a.iframe.bundle.js create mode 100644 4534.e7db2eaf.iframe.bundle.js rename 7096.3d3ba46b.iframe.bundle.js => 7096.d519b42d.iframe.bundle.js (56%) create mode 100644 7865.92fe8de0.iframe.bundle.js delete mode 100644 7865.af2da30b.iframe.bundle.js rename css-Accordion-stories-mdx.56081f86.iframe.bundle.js => css-Accordion-stories-mdx.1ba67aad.iframe.bundle.js (99%) rename css-Action-stories-mdx.1a5964f7.iframe.bundle.js => css-Action-stories-mdx.36024b6b.iframe.bundle.js (99%) rename css-Alert-stories-mdx.4a34d123.iframe.bundle.js => css-Alert-stories-mdx.bbb97604.iframe.bundle.js (99%) rename css-AnchorCollapse-stories-mdx.214181ee.iframe.bundle.js => css-AnchorCollapse-stories-mdx.8eb3b8ef.iframe.bundle.js (99%) rename css-AnchorNavigation-stories-mdx.33e5cb6d.iframe.bundle.js => css-AnchorNavigation-stories-mdx.7e6c35ac.iframe.bundle.js (99%) rename css-ArticleMeta-stories-mdx.556bbe27.iframe.bundle.js => css-ArticleMeta-stories-mdx.073f2e12.iframe.bundle.js (99%) rename css-BadgeCounter-stories-mdx.03de32c8.iframe.bundle.js => css-BadgeCounter-stories-mdx.faa7b253.iframe.bundle.js (99%) rename css-Blockquote-stories-mdx.de894b66.iframe.bundle.js => css-Blockquote-stories-mdx.4b3c3b2e.iframe.bundle.js (99%) rename css-Breadcrumb-stories-mdx.0a89293f.iframe.bundle.js => css-Breadcrumb-stories-mdx.9365dc34.iframe.bundle.js (99%) rename css-Button-stories-mdx.95ffd58b.iframe.bundle.js => css-Button-stories-mdx.313bc342.iframe.bundle.js (99%) rename css-ButtonGroup-stories-mdx.12fee8ed.iframe.bundle.js => css-ButtonGroup-stories-mdx.5a287b14.iframe.bundle.js (99%) rename css-CardNews-stories-mdx.3db81f21.iframe.bundle.js => css-CardNews-stories-mdx.37afa0cb.iframe.bundle.js (99%) rename css-CtaDownload-stories-mdx.6cda266c.iframe.bundle.js => css-CtaDownload-stories-mdx.4db6f2b4.iframe.bundle.js (99%) rename css-CtaEvent-stories-mdx.614eb5fe.iframe.bundle.js => css-CtaEvent-stories-mdx.47e75f7c.iframe.bundle.js (99%) rename css-CtaImageContent-stories-mdx.0d60f400.iframe.bundle.js => css-CtaImageContent-stories-mdx.d69187e2.iframe.bundle.js (99%) rename css-CtaLink-stories-mdx.1307296c.iframe.bundle.js => css-CtaLink-stories-mdx.8ce5373a.iframe.bundle.js (99%) rename css-DescriptionList-stories-mdx.0c317851.iframe.bundle.js => css-DescriptionList-stories-mdx.39cb8ec1.iframe.bundle.js (99%) rename css-Divider-stories-mdx.9243802c.iframe.bundle.js => css-Divider-stories-mdx.21850f9f.iframe.bundle.js (99%) rename css-DynamicContent-stories-mdx.f8d781b7.iframe.bundle.js => css-DynamicContent-stories-mdx.99fd58de.iframe.bundle.js (99%) rename css-EventDate-stories-mdx.52a404ac.iframe.bundle.js => css-EventDate-stories-mdx.12fe8b95.iframe.bundle.js (99%) rename css-File-stories-mdx.5e3f9f60.iframe.bundle.js => css-File-stories-mdx.0ab476eb.iframe.bundle.js (99%) rename css-FloatingContact-stories-mdx.e269be74.iframe.bundle.js => css-FloatingContact-stories-mdx.4480147e.iframe.bundle.js (99%) create mode 100644 css-FormField-stories.71eb083d.iframe.bundle.js delete mode 100644 css-FormField-stories.d00b966e.iframe.bundle.js rename css-FormProgress-stories-mdx.b9ac2caa.iframe.bundle.js => css-FormProgress-stories-mdx.57c608e2.iframe.bundle.js (99%) rename css-Heading1-stories-mdx.c6e72dcd.iframe.bundle.js => css-Heading1-stories-mdx.de6acae9.iframe.bundle.js (99%) rename css-Heading2-stories-mdx.d4dac67e.iframe.bundle.js => css-Heading2-stories-mdx.0bf25236.iframe.bundle.js (99%) rename css-Heading3-stories-mdx.1ed18c10.iframe.bundle.js => css-Heading3-stories-mdx.dd528d3a.iframe.bundle.js (99%) rename css-Heading4-stories-mdx.2a049b6d.iframe.bundle.js => css-Heading4-stories-mdx.b05d72b7.iframe.bundle.js (99%) rename css-Heading5-stories-mdx.ec77037f.iframe.bundle.js => css-Heading5-stories-mdx.6429549e.iframe.bundle.js (99%) rename css-Hero-stories-mdx.a06d9899.iframe.bundle.js => css-Hero-stories-mdx.608abd2a.iframe.bundle.js (99%) rename css-HighlightedLinks-stories-mdx.c444460f.iframe.bundle.js => css-HighlightedLinks-stories-mdx.0f6030c8.iframe.bundle.js (99%) rename css-Image-stories-mdx.e29f14af.iframe.bundle.js => css-Image-stories-mdx.2b0556e0.iframe.bundle.js (99%) rename css-Link-stories-mdx.2fdedc4a.iframe.bundle.js => css-Link-stories-mdx.35aa77d6.iframe.bundle.js (99%) rename css-LinkGroup-stories-mdx.2e250d7a.iframe.bundle.js => css-LinkGroup-stories-mdx.a031ac1e.iframe.bundle.js (99%) rename css-List-stories-mdx.aace3eba.iframe.bundle.js => css-List-stories-mdx.4a019741.iframe.bundle.js (99%) rename css-Note-stories-mdx.2752e4d2.iframe.bundle.js => css-Note-stories-mdx.d2d49901.iframe.bundle.js (99%) create mode 100644 css-OrderedList-stories.43e4c545.iframe.bundle.js delete mode 100644 css-OrderedList-stories.c796be94.iframe.bundle.js rename css-PageButtons-stories-mdx.7b5f4294.iframe.bundle.js => css-PageButtons-stories-mdx.44c202dc.iframe.bundle.js (99%) rename css-Pagination-stories-mdx.05ff8183.iframe.bundle.js => css-Pagination-stories-mdx.de0d7bd6.iframe.bundle.js (99%) rename css-Paragraph-stories-mdx.5aa8c5f0.iframe.bundle.js => css-Paragraph-stories-mdx.1acb436c.iframe.bundle.js (99%) rename css-ProcessSteps-stories-mdx.2093d925.iframe.bundle.js => css-ProcessSteps-stories-mdx.19b3d486.iframe.bundle.js (99%) create mode 100644 css-StepMarker-stories-mdx.8fa92e3b.iframe.bundle.js delete mode 100644 css-StepMarker-stories-mdx.cbe2d605.iframe.bundle.js create mode 100644 css-UnorderedList-stories.1490909a.iframe.bundle.js delete mode 100644 css-UnorderedList-stories.2f3d3ca9.iframe.bundle.js rename main.5b3e5a0a.iframe.bundle.js => main.9a89799c.iframe.bundle.js (99%) delete mode 100644 react-FormField-stories.846cb150.iframe.bundle.js create mode 100644 react-FormField-stories.ff3e8eff.iframe.bundle.js create mode 100644 react-OrderedList-stories.87c16c3b.iframe.bundle.js delete mode 100644 react-OrderedList-stories.da4cdb16.iframe.bundle.js delete mode 100644 react-UnorderedList-stories.a6ee96fc.iframe.bundle.js create mode 100644 react-UnorderedList-stories.e9bf88d2.iframe.bundle.js rename runtime~main.04f4fa9a.iframe.bundle.js => runtime~main.730f841e.iframe.bundle.js (85%) diff --git a/4534.27712d5a.iframe.bundle.js b/4534.27712d5a.iframe.bundle.js deleted file mode 100644 index acf0aa441..000000000 --- a/4534.27712d5a.iframe.bundle.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_gemeente_denhaag_storybook=self.webpackChunk_gemeente_denhaag_storybook||[]).push([[4534],{"../../components/OrderedList/dist/mjs/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{R:()=>OrderedListItem,_:()=>OrderedList});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function toPropertyKey(t){var i=function toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==_typeof(i)?i:i+""}function _defineProperty(obj,key,value){return(key=toPropertyKey(key))in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var target={};for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var hasRequiredReactJsxRuntime_production_min,jsxRuntime={exports:{}},reactJsxRuntime_production_min={};jsxRuntime.exports=function requireReactJsxRuntime_production_min(){if(hasRequiredReactJsxRuntime_production_min)return reactJsxRuntime_production_min;hasRequiredReactJsxRuntime_production_min=1;var f=react__WEBPACK_IMPORTED_MODULE_0__,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}return reactJsxRuntime_production_min.Fragment=l,reactJsxRuntime_production_min.jsx=q,reactJsxRuntime_production_min.jsxs=q,reactJsxRuntime_production_min}();var jsxRuntimeExports=jsxRuntime.exports;function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t=2};(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(_ref,ref){var children=_ref.children,className=_ref.className,direction=_ref.direction,restProps=_objectWithoutProperties(_ref,_excluded$1a);return jsxRuntimeExports.jsx("p",_objectSpread$1b(_objectSpread$1b({role:hasManyElements(children)?"group":void 0},restProps),{},{ref,className:clsx("utrecht-button-group",{"utrecht-button-group--column":"column"===direction,"utrecht-button-group--row":"row"===direction},className),children}))})).displayName="ButtonGroup";var _excluded$19=["appearance","children","className","external","href","placeholder","role"];function ownKeys$1a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$1a(e){for(var r=1;r0&&"utrecht-currency-data--positive",className),"aria-label":labelFormatted,children:children||visuallyFormatted}))})).displayName="CurrencyData";var _excluded$12=["children","className","dateTime","value"];function ownKeys$13(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$13(e){for(var r=1;r{module.exports="#Documentatie\n\nhttps://www.nldesignsystem.nl/form-field\n\nForm field bestaat uit verschillende onderdelen.\n\n[Form field label](https://www.nldesignsystem.nl/form-field-label/)\n[Form field description](https://www.nldesignsystem.nl/form-field-description) (optioneel)\n[Form field error message](https://www.nldesignsystem.nl/form-field-error-message) (invalid state)\nForm input\n"}}]); \ No newline at end of file diff --git a/4534.e7db2eaf.iframe.bundle.js b/4534.e7db2eaf.iframe.bundle.js new file mode 100644 index 000000000..e41b6c6ef --- /dev/null +++ b/4534.e7db2eaf.iframe.bundle.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_gemeente_denhaag_storybook=self.webpackChunk_gemeente_denhaag_storybook||[]).push([[4534],{"../../components/OrderedList/dist/mjs/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{RW:()=>OrderedListItem,_J:()=>OrderedList});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function toPropertyKey(t){var i=function toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==_typeof(i)?i:i+""}function _defineProperty(obj,key,value){return(key=toPropertyKey(key))in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var target={};for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var hasRequiredReactJsxRuntime_production_min,jsxRuntime={exports:{}},reactJsxRuntime_production_min={};jsxRuntime.exports=function requireReactJsxRuntime_production_min(){if(hasRequiredReactJsxRuntime_production_min)return reactJsxRuntime_production_min;hasRequiredReactJsxRuntime_production_min=1;var f=react__WEBPACK_IMPORTED_MODULE_0__,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}return reactJsxRuntime_production_min.Fragment=l,reactJsxRuntime_production_min.jsx=q,reactJsxRuntime_production_min.jsxs=q,reactJsxRuntime_production_min}();var jsxRuntimeExports=jsxRuntime.exports;function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t=2};(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(_ref,ref){var children=_ref.children,className=_ref.className,direction=_ref.direction,restProps=_objectWithoutProperties(_ref,_excluded$1a);return jsxRuntimeExports.jsx("p",_objectSpread$1b(_objectSpread$1b({role:hasManyElements(children)?"group":void 0},restProps),{},{ref,className:clsx("utrecht-button-group",{"utrecht-button-group--column":"column"===direction,"utrecht-button-group--row":"row"===direction},className),children}))})).displayName="ButtonGroup";var _excluded$19=["appearance","children","className","external","href","placeholder","role"];function ownKeys$1a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$1a(e){for(var r=1;r0&&"utrecht-currency-data--positive",className),"aria-label":labelFormatted,children:children||visuallyFormatted}))})).displayName="CurrencyData";var _excluded$12=["children","className","dateTime","value"];function ownKeys$13(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$13(e){for(var r=1;r{module.exports="#Documentatie\n\nhttps://www.nldesignsystem.nl/form-field\n\nForm field bestaat uit verschillende onderdelen.\n\n[Form field label](https://www.nldesignsystem.nl/form-field-label/)\n[Form field description](https://www.nldesignsystem.nl/form-field-description) (optioneel)\n[Form field error message](https://www.nldesignsystem.nl/form-field-error-message) (invalid state)\nForm input\n"}}]); \ No newline at end of file diff --git a/7096.3d3ba46b.iframe.bundle.js b/7096.d519b42d.iframe.bundle.js similarity index 56% rename from 7096.3d3ba46b.iframe.bundle.js rename to 7096.d519b42d.iframe.bundle.js index da7e87e6c..01e539f1d 100644 --- a/7096.3d3ba46b.iframe.bundle.js +++ b/7096.d519b42d.iframe.bundle.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_gemeente_denhaag_storybook=self.webpackChunk_gemeente_denhaag_storybook||[]).push([[7096],{"../../components/FormField/dist/mjs/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{z:()=>FormField});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function toPropertyKey(t){var i=function toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==_typeof(i)?i:i+""}function _defineProperty(obj,key,value){return(key=toPropertyKey(key))in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var target={};for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var hasRequiredReactJsxRuntime_production_min,jsxRuntime={exports:{}},reactJsxRuntime_production_min={};jsxRuntime.exports=function requireReactJsxRuntime_production_min(){if(hasRequiredReactJsxRuntime_production_min)return reactJsxRuntime_production_min;hasRequiredReactJsxRuntime_production_min=1;var f=react__WEBPACK_IMPORTED_MODULE_0__,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}return reactJsxRuntime_production_min.Fragment=l,reactJsxRuntime_production_min.jsx=q,reactJsxRuntime_production_min.jsxs=q,reactJsxRuntime_production_min}();var jsxRuntimeExports=jsxRuntime.exports;function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t=2};(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(_ref,ref){var children=_ref.children,className=_ref.className,direction=_ref.direction,restProps=_objectWithoutProperties(_ref,_excluded$1a);return jsxRuntimeExports.jsx("p",_objectSpread$1b(_objectSpread$1b({role:hasManyElements(children)?"group":void 0},restProps),{},{ref,className:clsx("utrecht-button-group",{"utrecht-button-group--column":"column"===direction,"utrecht-button-group--row":"row"===direction},className),children}))})).displayName="ButtonGroup";var _excluded$19=["appearance","children","className","external","href","placeholder","role"];function ownKeys$1a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$1a(e){for(var r=1;r0&&"utrecht-currency-data--positive",className),"aria-label":labelFormatted,children:children||visuallyFormatted}))})).displayName="CurrencyData";var _excluded$12=["children","className","dateTime","value"];function ownKeys$13(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$13(e){for(var r=1;r{__webpack_require__.d(__webpack_exports__,{L:()=>Fieldset,u:()=>FieldsetLegend});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function toPropertyKey(t){var i=function toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==_typeof(i)?i:i+""}function _defineProperty(obj,key,value){return(key=toPropertyKey(key))in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var target={};for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var hasRequiredReactJsxRuntime_production_min,jsxRuntime={exports:{}},reactJsxRuntime_production_min={};jsxRuntime.exports=function requireReactJsxRuntime_production_min(){if(hasRequiredReactJsxRuntime_production_min)return reactJsxRuntime_production_min;hasRequiredReactJsxRuntime_production_min=1;var f=react__WEBPACK_IMPORTED_MODULE_0__,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}return reactJsxRuntime_production_min.Fragment=l,reactJsxRuntime_production_min.jsx=q,reactJsxRuntime_production_min.jsxs=q,reactJsxRuntime_production_min}();var jsxRuntimeExports=jsxRuntime.exports;function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t=2};(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(_ref,ref){var children=_ref.children,className=_ref.className,direction=_ref.direction,restProps=_objectWithoutProperties(_ref,_excluded$1a);return jsxRuntimeExports.jsx("p",_objectSpread$1b(_objectSpread$1b({role:hasManyElements(children)?"group":void 0},restProps),{},{ref,className:clsx("utrecht-button-group",{"utrecht-button-group--column":"column"===direction,"utrecht-button-group--row":"row"===direction},className),children}))})).displayName="ButtonGroup";var _excluded$19=["appearance","children","className","external","href","placeholder","role"];function ownKeys$1a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$1a(e){for(var r=1;r0&&"utrecht-currency-data--positive",className),"aria-label":labelFormatted,children:children||visuallyFormatted}))})).displayName="CurrencyData";var _excluded$12=["children","className","dateTime","value"];function ownKeys$13(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$13(e){for(var r=1;r{module.exports="#Documentatie\n\nhttps://www.nldesignsystem.nl/form-field\n\nForm field bestaat uit verschillende onderdelen.\n\n[Form field label](https://www.nldesignsystem.nl/form-field-label/)\n[Form field description](https://www.nldesignsystem.nl/form-field-description) (optioneel)\n[Form field error message](https://www.nldesignsystem.nl/form-field-error-message) (invalid state)\nForm input\n"}}]); \ No newline at end of file +"use strict";(self.webpackChunk_gemeente_denhaag_storybook=self.webpackChunk_gemeente_denhaag_storybook||[]).push([[7096],{"../../components/FormField/dist/mjs/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{z:()=>FormField});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function toPropertyKey(t){var i=function toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==_typeof(i)?i:i+""}function _defineProperty(obj,key,value){return(key=toPropertyKey(key))in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var target={};for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var hasRequiredReactJsxRuntime_production_min,jsxRuntime={exports:{}},reactJsxRuntime_production_min={};jsxRuntime.exports=function requireReactJsxRuntime_production_min(){if(hasRequiredReactJsxRuntime_production_min)return reactJsxRuntime_production_min;hasRequiredReactJsxRuntime_production_min=1;var f=react__WEBPACK_IMPORTED_MODULE_0__,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}return reactJsxRuntime_production_min.Fragment=l,reactJsxRuntime_production_min.jsx=q,reactJsxRuntime_production_min.jsxs=q,reactJsxRuntime_production_min}();var jsxRuntimeExports=jsxRuntime.exports;function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t=2};(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(_ref,ref){var children=_ref.children,className=_ref.className,direction=_ref.direction,restProps=_objectWithoutProperties(_ref,_excluded$1a);return jsxRuntimeExports.jsx("p",_objectSpread$1b(_objectSpread$1b({role:hasManyElements(children)?"group":void 0},restProps),{},{ref,className:clsx("utrecht-button-group",{"utrecht-button-group--column":"column"===direction,"utrecht-button-group--row":"row"===direction},className),children}))})).displayName="ButtonGroup";var _excluded$19=["appearance","children","className","external","href","placeholder","role"];function ownKeys$1a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$1a(e){for(var r=1;r0&&"utrecht-currency-data--positive",className),"aria-label":labelFormatted,children:children||visuallyFormatted}))})).displayName="CurrencyData";var _excluded$12=["children","className","dateTime","value"];function ownKeys$13(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$13(e){for(var r=1;r{__webpack_require__.d(__webpack_exports__,{LB:()=>Fieldset,u4:()=>FieldsetLegend});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function toPropertyKey(t){var i=function toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"==_typeof(i)?i:i+""}function _defineProperty(obj,key,value){return(key=toPropertyKey(key))in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var target={};for(var key in source)if(Object.prototype.hasOwnProperty.call(source,key)){if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var hasRequiredReactJsxRuntime_production_min,jsxRuntime={exports:{}},reactJsxRuntime_production_min={};jsxRuntime.exports=function requireReactJsxRuntime_production_min(){if(hasRequiredReactJsxRuntime_production_min)return reactJsxRuntime_production_min;hasRequiredReactJsxRuntime_production_min=1;var f=react__WEBPACK_IMPORTED_MODULE_0__,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}return reactJsxRuntime_production_min.Fragment=l,reactJsxRuntime_production_min.jsx=q,reactJsxRuntime_production_min.jsxs=q,reactJsxRuntime_production_min}();var jsxRuntimeExports=jsxRuntime.exports;function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t=2};(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(_ref,ref){var children=_ref.children,className=_ref.className,direction=_ref.direction,restProps=_objectWithoutProperties(_ref,_excluded$1a);return jsxRuntimeExports.jsx("p",_objectSpread$1b(_objectSpread$1b({role:hasManyElements(children)?"group":void 0},restProps),{},{ref,className:clsx("utrecht-button-group",{"utrecht-button-group--column":"column"===direction,"utrecht-button-group--row":"row"===direction},className),children}))})).displayName="ButtonGroup";var _excluded$19=["appearance","children","className","external","href","placeholder","role"];function ownKeys$1a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$1a(e){for(var r=1;r0&&"utrecht-currency-data--positive",className),"aria-label":labelFormatted,children:children||visuallyFormatted}))})).displayName="CurrencyData";var _excluded$12=["children","className","dateTime","value"];function ownKeys$13(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$13(e){for(var r=1;r{module.exports="#Documentatie\n\nhttps://www.nldesignsystem.nl/form-field\n\nForm field bestaat uit verschillende onderdelen.\n\n[Form field label](https://www.nldesignsystem.nl/form-field-label/)\n[Form field description](https://www.nldesignsystem.nl/form-field-description) (optioneel)\n[Form field error message](https://www.nldesignsystem.nl/form-field-error-message) (invalid state)\nForm input\n"}}]); \ No newline at end of file diff --git a/7865.92fe8de0.iframe.bundle.js b/7865.92fe8de0.iframe.bundle.js new file mode 100644 index 000000000..1df4ce0cf --- /dev/null +++ b/7865.92fe8de0.iframe.bundle.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_gemeente_denhaag_storybook=self.webpackChunk_gemeente_denhaag_storybook||[]).push([[7865],{"../../components/UnorderedList/dist/mjs/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Er:()=>UnorderedListItem,Xy:()=>UnorderedList});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js"),__assign=function(){return __assign=Object.assign||function __assign(t){for(var s,i=1,n=arguments.length;i=0)continue;target[key]=source[key]}return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"function"==typeof SuppressedError&&SuppressedError;var hasRequiredReactJsxRuntime_production_min,jsxRuntime={exports:{}},reactJsxRuntime_production_min={};jsxRuntime.exports=function requireReactJsxRuntime_production_min(){if(hasRequiredReactJsxRuntime_production_min)return reactJsxRuntime_production_min;hasRequiredReactJsxRuntime_production_min=1;var f=react__WEBPACK_IMPORTED_MODULE_0__,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}return reactJsxRuntime_production_min.Fragment=l,reactJsxRuntime_production_min.jsx=q,reactJsxRuntime_production_min.jsxs=q,reactJsxRuntime_production_min}();var jsxRuntimeExports=jsxRuntime.exports;function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t=2};(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(_ref,ref){var children=_ref.children,className=_ref.className,direction=_ref.direction,restProps=_objectWithoutProperties(_ref,_excluded$1a);return jsxRuntimeExports.jsx("p",_objectSpread$1b(_objectSpread$1b({role:hasManyElements(children)?"group":void 0},restProps),{},{ref,className:clsx$1("utrecht-button-group",{"utrecht-button-group--column":"column"===direction,"utrecht-button-group--row":"row"===direction},className),children}))})).displayName="ButtonGroup";var _excluded$19=["appearance","children","className","external","href","placeholder","role"];function ownKeys$1a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$1a(e){for(var r=1;r0&&"utrecht-currency-data--positive",className),"aria-label":labelFormatted,children:children||visuallyFormatted}))})).displayName="CurrencyData";var _excluded$12=["children","className","dateTime","value"];function ownKeys$13(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$13(e){for(var r=1;r{module.exports="#Documentatie\n\nhttps://www.nldesignsystem.nl/form-field\n\nForm field bestaat uit verschillende onderdelen.\n\n[Form field label](https://www.nldesignsystem.nl/form-field-label/)\n[Form field description](https://www.nldesignsystem.nl/form-field-description) (optioneel)\n[Form field error message](https://www.nldesignsystem.nl/form-field-error-message) (invalid state)\nForm input\n"}}]); \ No newline at end of file diff --git a/7865.af2da30b.iframe.bundle.js b/7865.af2da30b.iframe.bundle.js deleted file mode 100644 index 625ad6be2..000000000 --- a/7865.af2da30b.iframe.bundle.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_gemeente_denhaag_storybook=self.webpackChunk_gemeente_denhaag_storybook||[]).push([[7865],{"../../components/UnorderedList/dist/mjs/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{E:()=>UnorderedListItem,X:()=>UnorderedList});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js"),__assign=function(){return __assign=Object.assign||function __assign(t){for(var s,i=1,n=arguments.length;i=0)continue;target[key]=source[key]}return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"function"==typeof SuppressedError&&SuppressedError;var hasRequiredReactJsxRuntime_production_min,jsxRuntime={exports:{}},reactJsxRuntime_production_min={};jsxRuntime.exports=function requireReactJsxRuntime_production_min(){if(hasRequiredReactJsxRuntime_production_min)return reactJsxRuntime_production_min;hasRequiredReactJsxRuntime_production_min=1;var f=react__WEBPACK_IMPORTED_MODULE_0__,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}return reactJsxRuntime_production_min.Fragment=l,reactJsxRuntime_production_min.jsx=q,reactJsxRuntime_production_min.jsxs=q,reactJsxRuntime_production_min}();var jsxRuntimeExports=jsxRuntime.exports;function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t=2};(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(_ref,ref){var children=_ref.children,className=_ref.className,direction=_ref.direction,restProps=_objectWithoutProperties(_ref,_excluded$1a);return jsxRuntimeExports.jsx("p",_objectSpread$1b(_objectSpread$1b({role:hasManyElements(children)?"group":void 0},restProps),{},{ref,className:clsx$1("utrecht-button-group",{"utrecht-button-group--column":"column"===direction,"utrecht-button-group--row":"row"===direction},className),children}))})).displayName="ButtonGroup";var _excluded$19=["appearance","children","className","external","href","placeholder","role"];function ownKeys$1a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$1a(e){for(var r=1;r0&&"utrecht-currency-data--positive",className),"aria-label":labelFormatted,children:children||visuallyFormatted}))})).displayName="CurrencyData";var _excluded$12=["children","className","dateTime","value"];function ownKeys$13(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread$13(e){for(var r=1;r{module.exports="#Documentatie\n\nhttps://www.nldesignsystem.nl/form-field\n\nForm field bestaat uit verschillende onderdelen.\n\n[Form field label](https://www.nldesignsystem.nl/form-field-label/)\n[Form field description](https://www.nldesignsystem.nl/form-field-description) (optioneel)\n[Form field error message](https://www.nldesignsystem.nl/form-field-error-message) (invalid state)\nForm input\n"}}]); \ No newline at end of file diff --git a/css-Accordion-stories-mdx.56081f86.iframe.bundle.js b/css-Accordion-stories-mdx.1ba67aad.iframe.bundle.js similarity index 99% rename from css-Accordion-stories-mdx.56081f86.iframe.bundle.js rename to css-Accordion-stories-mdx.1ba67aad.iframe.bundle.js index 8eed03592..7e8adab85 100644 --- a/css-Accordion-stories-mdx.56081f86.iframe.bundle.js +++ b/css-Accordion-stories-mdx.1ba67aad.iframe.bundle.js @@ -1 +1 @@ -(self.webpackChunk_gemeente_denhaag_storybook=self.webpackChunk_gemeente_denhaag_storybook||[]).push([[9891],{"../../node_modules/.pnpm/@mdx-js+react@2.3.0_react@18.2.0/node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{BN:()=>MDXContext,RP:()=>useMDXComponents,gz:()=>withMDXComponents,xA:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./src/css/Accordion.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>Accordion_stories,defaultStory:()=>defaultStory,disabled:()=>disabled,focus:()=>Accordion_stories_focus,hover:()=>hover,open:()=>Accordion_stories_open,openFocus:()=>openFocus,openHover:()=>openHover});__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");var lib=__webpack_require__("../../node_modules/.pnpm/@mdx-js+react@2.3.0_react@18.2.0/node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("../../node_modules/.pnpm/@storybook+blocks@7.6.19_@types+react-dom@18.2.25_@types+react@18.2.79_encoding@0.1.13_react-_vhol4ijjugtiy3qy7stlx4qiyu/node_modules/@storybook/blocks/dist/index.mjs");__webpack_require__("../../components/Accordion/dist/mjs/index.js");const package_namespaceObject=JSON.parse('{"UU":"@gemeente-denhaag/accordion","rE":"0.2.3-alpha.398"}'),README_namespaceObject="# Accordion\n\nAn accordion is a vertically stacked list of headers that reveal or hide associated sections of content.\n\n## When to use\n\nAn accordion is used to:\n\n- Organize related information.\n- Shorten pages and reduce scrolling when content is not crucial to read in full.\n- When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.\n\n## Alternatives and related components\n\nNone.\n\n## Anatomy\n\nThe accordion consists of:\n\n1. Title: contains the section title and is control for revealing the panel.\n2. Icon: indicates if the panel is open or closed.\n3. Panel: the section of content associated with an accordion header.\n4. Container\n\n## (Interactive) states\n\nThe accordion contains the states inactive, active, hover, disabled and focus.\n\n## Design properties\n\n### Typography\n\n- Title inactive: TheSans/md/400\n- Title active: TheSans/md/700\n- Panel: TheSans/md/400\n\n### Color\n\n- Title: text color Grey/4\n- Icon: svg color Grey/4\n- Panel: text color Grey/4\n- Container: border color Grey/2\n\n### Interactive states\n\n- Active: title text color Blue/3, icon svg color Blue/3\n- Hover: title text color Blue/3, icon svg color Blue/3\n- Disabled: title text color Grey/2, icon svg color Grey/2\n- Focus: title text color Grey/4, icon svg color Grey/4, container border color Ocher/5\n\n### Structure\n\n- Title inactive: padding-top and padding-bottom 12px, height 48px\n- Title active: padding top and padding-bottom 16px\n- Title: margin-left 16px\n- Icon: height and width 24px, padding-right 16px\n- Panel: padding-right 16px\n- Container: border 1px\n\n## Accessibility\n\nAvailability of accordion content to assistive technology requires the use of aria-controls and toggling aria-expanded as regions are expanded and collapsed.\n\n## Content guidelines\n\n### Title\n\nAccordion titles should:\n\n- Be clear because it hides content\n- Be as brief as possible while still being clear and descriptive.\n\nIf you struggle to come up with clear titles, it might be because the way you’ve separated the content is not clear.\n\n### Panel\n\nContent inside of a section may be split into paragraphs and include sub-headers if needed.\n\n## Best practices\n\n### Dos\n\nAccordions should:\n\n- Have an overview of multiple, related sections of content.\n- Show and hide those sections as needed.\n- Open as many panels as needed.\n\n### Don’ts\n\nAccordions should:\n\n- Not be used if you can keep the content on a single page.\n- Not be used to split up a series of questions into sections.\n- Not hide content which is essential to all users.\n\n## References\n\n[https://design-system.service.gov.uk/components/accordion/](https://design-system.service.gov.uk/components/accordion/)\n[https://www.nngroup.com/articles/accordions-complex-content/](https://www.nngroup.com/articles/accordions-complex-content/)\n";var jsx_runtime=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h2:"h2",h3:"h3",div:"div",button:"button",svg:"svg",path:"path",p:"p"},(0,lib.RP)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.W8,{title:"CSS/Surfaces/Accordion",parameters:{componentSubtitle:`${package_namespaceObject.UU} - ${package_namespaceObject.rE}`,docs:{source:{type:"dynamic"}},status:{type:"WORK IN PROGRESS"}}}),"\n",(0,jsx_runtime.jsx)(dist.VY,{markdown:README_namespaceObject}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"stories",children:"Stories"}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"default",children:"Default"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Default",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"default-accordion-details-one",class:"denhaag-accordion__title",id:"default-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"default-accordion-details-one",role:"region","aria-labelledby":"default-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"default-accordion-details-two",class:"denhaag-accordion__title",id:"default-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"default-accordion-details-two",role:"region","aria-labelledby":"default-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"default-accordion-details-three",class:"denhaag-accordion__title",id:"default-accordion3id",children:"Integer blandit libero quis risus maximus auctor. Proin ullamcorper, metus."}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"default-accordion-details-three",role:"region","aria-labelledby":"default-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"disabled",children:"Disabled"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Disabled",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"disabled-accordion-details-one",class:"denhaag-accordion__title",id:"disabled-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"disabled-accordion-details-one",role:"region","aria-labelledby":"disabled-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"disabled-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--disabled",id:"disabled-accordion2id",disabled:!0,children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"disabled-accordion-details-two",role:"region","aria-labelledby":"disabled-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"disabled-accordion-details-three",class:"denhaag-accordion__title",id:"disabled-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"disabled-accordion-details-three",role:"region","aria-labelledby":"disabled-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"focus",children:"Focus"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Focus",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"focus-accordion-details-one",class:"denhaag-accordion__title",id:"focus-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"focus-accordion-details-one",role:"region","aria-labelledby":"focus-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"focus-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--focus",id:"focus-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"focus-accordion-details-two",role:"region","aria-labelledby":"focus-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"focus-accordion-details-three",class:"denhaag-accordion__title",id:"focus-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"focus-accordion-details-three",role:"region","aria-labelledby":"focus-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"hover",children:"Hover"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Hover",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"hover-accordion-details-one",class:"denhaag-accordion__title",id:"hover-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"hover-accordion-details-one",role:"region","aria-labelledby":"hover-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel denhaag-accordion__panel--hover",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"hover-accordion-details-two",class:"denhaag-accordion__title",id:"hover-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"hover-accordion-details-two",role:"region","aria-labelledby":"hover-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"hover-accordion-details-three",class:"denhaag-accordion__title",id:"hover-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"hover-accordion-details-three",role:"region","aria-labelledby":"hover-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"open",children:"Open"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Open",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"open---hover",children:"Open - hover"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Open - hover",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel denhaag-accordion__panel--hover",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"open---focus",children:"Open - focus"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Open - focus",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--focus",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})})]})}const defaultStory=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"default-accordion-details-one",class:"denhaag-accordion__title",id:"default-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"default-accordion-details-one",role:"region","aria-labelledby":"default-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"default-accordion-details-two",class:"denhaag-accordion__title",id:"default-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"default-accordion-details-two",role:"region","aria-labelledby":"default-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"default-accordion-details-three",class:"denhaag-accordion__title",id:"default-accordion3id",children:"Integer blandit libero quis risus maximus auctor. Proin ullamcorper, metus."}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"default-accordion-details-three",role:"region","aria-labelledby":"default-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});defaultStory.storyName="Default",defaultStory.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const disabled=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"disabled-accordion-details-one",class:"denhaag-accordion__title",id:"disabled-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"disabled-accordion-details-one",role:"region","aria-labelledby":"disabled-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"disabled-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--disabled",id:"disabled-accordion2id",disabled:!0,children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"disabled-accordion-details-two",role:"region","aria-labelledby":"disabled-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"disabled-accordion-details-three",class:"denhaag-accordion__title",id:"disabled-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"disabled-accordion-details-three",role:"region","aria-labelledby":"disabled-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});disabled.storyName="Disabled",disabled.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const Accordion_stories_focus=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"focus-accordion-details-one",class:"denhaag-accordion__title",id:"focus-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"focus-accordion-details-one",role:"region","aria-labelledby":"focus-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"focus-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--focus",id:"focus-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"focus-accordion-details-two",role:"region","aria-labelledby":"focus-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"focus-accordion-details-three",class:"denhaag-accordion__title",id:"focus-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"focus-accordion-details-three",role:"region","aria-labelledby":"focus-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});Accordion_stories_focus.storyName="Focus",Accordion_stories_focus.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const hover=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"hover-accordion-details-one",class:"denhaag-accordion__title",id:"hover-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"hover-accordion-details-one",role:"region","aria-labelledby":"hover-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel denhaag-accordion__panel--hover",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"hover-accordion-details-two",class:"denhaag-accordion__title",id:"hover-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"hover-accordion-details-two",role:"region","aria-labelledby":"hover-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"hover-accordion-details-three",class:"denhaag-accordion__title",id:"hover-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"hover-accordion-details-three",role:"region","aria-labelledby":"hover-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});hover.storyName="Hover",hover.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const Accordion_stories_open=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});Accordion_stories_open.storyName="Open",Accordion_stories_open.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const openHover=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel denhaag-accordion__panel--hover",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});openHover.storyName="Open - hover",openHover.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const openFocus=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--focus",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});openFocus.storyName="Open - focus",openFocus.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const componentMeta={title:"CSS/Surfaces/Accordion",parameters:{componentSubtitle:`${package_namespaceObject.UU} - ${package_namespaceObject.rE}`,docs:{source:{type:"dynamic"}},status:{type:"WORK IN PROGRESS"}},tags:["stories-mdx"],includeStories:["defaultStory","disabled","focus","hover","open","openHover","openFocus"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.RP)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}};const Accordion_stories=componentMeta,__namedExportsOrder=["defaultStory","disabled","focus","hover","open","openHover","openFocus"]},"../../components/Accordion/dist/mjs/index.js":()=>{var css_248z='.denhaag-accordion{font-family:var(--denhaag-accordion-font-family)}.denhaag-accordion__container{border:var(--denhaag-accordion-container-border);position:var(--denhaag-accordion-container-position)}.denhaag-accordion__container:last-child{border-bottom-left-radius:var(--denhaag-accordion-container-border-radius);border-bottom-right-radius:var(--denhaag-accordion-container-border-radius);border-top:var(--denhaag-accordion-container-border-top)}.denhaag-accordion__container:first-child{--denhaag-accordion-container-border-top:var(--denhaag-accordion-container-border);border-top-left-radius:var(--denhaag-accordion-container-border-radius);border-top-right-radius:var(--denhaag-accordion-container-border-radius)}.denhaag-accordion__container+.denhaag-accordion__container{border-top:var(--denhaag-accordion-container-border-top)}.denhaag-accordion__panel{align-items:var(--denhaag-accordion-panel-align-items);background-color:var(--denhaag-accordion-panel-background-color);border-radius:var(--denhaag-accordion-panel-border-radius);display:var(--denhaag-accordion-panel-display);font-family:inherit;font-size:var(--denhaag-accordion-panel-font-size);font-weight:var(--denhaag-accordion-panel-font-weight,400);margin-block-end:var(--denhaag-accordion-panel-margin-block);margin-block-start:var(--denhaag-accordion-panel-margin-block);min-height:var(--denhaag-accordion-panel-min-height);outline:var(--denhaag-accordion-panel-outline);padding-block-end:var(--denhaag-accordion-panel-padding-block);padding-block-start:var(--denhaag-accordion-panel-padding-block);padding-inline-end:var(--denhaag-accordion-panel-padding-inline);position:inherit;text-decoration:var(--denhaag-accordion-panel-text-decoration);width:inherit}.denhaag-accordion__panel>.denhaag-icon{color:inherit;pointer-events:none;position:var(--denhaag-accordion-icon-position);right:var(--denhaag-accordion-icon-right);top:var(--denhaag-accordion-icon-top);transform:var(--denhaag-accordion-icon-transform)}.denhaag-accordion__title{background:inherit;border:inherit;flex-grow:var(--denhaag-accordion-title-flex-grow);font-family:inherit;font-size:inherit;font-weight:inherit;hyphens:auto;margin-block-end:0;margin-block-start:0;padding-block-end:var(--denhaag-accordion-title-padding-block);padding-block-start:var(--denhaag-accordion-title-padding-block);padding-inline-end:calc(var(--denhaag-accordion-title-padding-inline)*2 + var(--denhaag-accordion-icon-width, 0));padding-inline-start:var(--denhaag-accordion-title-padding-inline);text-align:inherit}.denhaag-accordion__panel--hover .denhaag-accordion__title,.denhaag-accordion__panel--hover .denhaag-icon,.denhaag-accordion__title--focus,.denhaag-accordion__title--focus+.denhaag-icon,.denhaag-accordion__title:focus-visible{color:var(--denhaag-accordion-panel-color);outline:var(--denhaag-accordion-panel-outline)}.denhaag-accordion__container--open .denhaag-accordion__title,.denhaag-accordion__container--open .denhaag-icon{color:inherit}.denhaag-accordion__title--disabled,.denhaag-accordion__title--disabled+.denhaag-icon,.denhaag-accordion__title[disabled],.denhaag-accordion__title[disabled]+.denhaag-icon{z-index:1}.denhaag-accordion__title:focus-visible,.denhaag-accordion__title:focus-visible+.denhaag-icon{color:var(--denhaag-accordion-panel-color);outline:var(--denhaag-accordion-panel-outline)}.denhaag-accordion__container--open .denhaag-accordion__panel--hover .denhaag-accordion__title,.denhaag-accordion__container--open .denhaag-accordion__panel--hover .denhaag-icon,.denhaag-accordion__container--open .denhaag-accordion__panel:hover .denhaag-accordion__title,.denhaag-accordion__container--open .denhaag-accordion__panel:hover .denhaag-icon{color:var(--denhaag-accordion-container-open-color)}.denhaag-accordion__panel:hover .denhaag-accordion__title:not([disabled]),.denhaag-accordion__panel:hover .denhaag-accordion__title:not([disabled])+.denhaag-icon{color:var(--denhaag-accordion-panel-color);outline:var(--denhaag-accordion-panel-outline)}.denhaag-accordion__title--disabled:before,.denhaag-accordion__title[disabled]:before{background-color:var(--denhaag-accordion-title-disabled-background-color);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.denhaag-accordion__title--focus:after,.denhaag-accordion__title:focus-visible:after{border-radius:var(--denhaag-accordion-title-focus-border-radius);content:"";height:100%;left:0;outline:var(--denhaag-accordion-title-focus-outline);position:absolute;top:0;width:100%}.denhaag-accordion__container--open{--denhaag-accordion-details-display:var(--denhaag-accordion-details-open-display);--denhaag-accordion-title-color:var(--denhaag-accordion-container-open-title-color);--denhaag-accordion-icon-color:var(--denhaag-accordion-container-open-icon-color);--denhaag-accordion-icon-transform:var(--denhaag-accordion-container-open-icon-transform)}.denhaag-accordion__container--open .denhaag-accordion__panel{--denhaag-accordion-panel-font-weight:var(--denhaag-accordion-container-open-panel-font-weight);color:var(--denhaag-accordion-container-open-panel-color)}.denhaag-accordion__details{display:var(--denhaag-accordion-details-display);margin-inline-end:var(--denhaag-accordion-details-margin-inline-end);padding-block-end:var(--denhaag-accordion-details-padding-block-end);padding-block-start:var(--denhaag-accordion-details-padding-block-start);padding-inline-end:var(--denhaag-accordion-details-padding-inline);padding-inline-start:var(--denhaag-accordion-details-padding-inline)}';if("undefined"!=typeof document){const head=document.head||document.getElementsByTagName("head")[0],style=document.createElement("style");style.type="text/css",style.nonce=window.NONCE,head.appendChild(style),style.styleSheet?style.styleSheet.cssText=css_248z:style.appendChild(document.createTextNode(css_248z))}}}]); \ No newline at end of file +(self.webpackChunk_gemeente_denhaag_storybook=self.webpackChunk_gemeente_denhaag_storybook||[]).push([[9891],{"../../node_modules/.pnpm/@mdx-js+react@2.3.0_react@18.2.0/node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{BN:()=>MDXContext,RP:()=>useMDXComponents,gz:()=>withMDXComponents,xA:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./src/css/Accordion.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>Accordion_stories,defaultStory:()=>defaultStory,disabled:()=>disabled,focus:()=>Accordion_stories_focus,hover:()=>hover,open:()=>Accordion_stories_open,openFocus:()=>openFocus,openHover:()=>openHover});__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");var lib=__webpack_require__("../../node_modules/.pnpm/@mdx-js+react@2.3.0_react@18.2.0/node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("../../node_modules/.pnpm/@storybook+blocks@7.6.19_@types+react-dom@18.2.25_@types+react@18.2.79_encoding@0.1.13_react-_vhol4ijjugtiy3qy7stlx4qiyu/node_modules/@storybook/blocks/dist/index.mjs");__webpack_require__("../../components/Accordion/dist/mjs/index.js");const package_namespaceObject=JSON.parse('{"UU":"@gemeente-denhaag/accordion","rE":"0.2.3-alpha.399"}'),README_namespaceObject="# Accordion\n\nAn accordion is a vertically stacked list of headers that reveal or hide associated sections of content.\n\n## When to use\n\nAn accordion is used to:\n\n- Organize related information.\n- Shorten pages and reduce scrolling when content is not crucial to read in full.\n- When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.\n\n## Alternatives and related components\n\nNone.\n\n## Anatomy\n\nThe accordion consists of:\n\n1. Title: contains the section title and is control for revealing the panel.\n2. Icon: indicates if the panel is open or closed.\n3. Panel: the section of content associated with an accordion header.\n4. Container\n\n## (Interactive) states\n\nThe accordion contains the states inactive, active, hover, disabled and focus.\n\n## Design properties\n\n### Typography\n\n- Title inactive: TheSans/md/400\n- Title active: TheSans/md/700\n- Panel: TheSans/md/400\n\n### Color\n\n- Title: text color Grey/4\n- Icon: svg color Grey/4\n- Panel: text color Grey/4\n- Container: border color Grey/2\n\n### Interactive states\n\n- Active: title text color Blue/3, icon svg color Blue/3\n- Hover: title text color Blue/3, icon svg color Blue/3\n- Disabled: title text color Grey/2, icon svg color Grey/2\n- Focus: title text color Grey/4, icon svg color Grey/4, container border color Ocher/5\n\n### Structure\n\n- Title inactive: padding-top and padding-bottom 12px, height 48px\n- Title active: padding top and padding-bottom 16px\n- Title: margin-left 16px\n- Icon: height and width 24px, padding-right 16px\n- Panel: padding-right 16px\n- Container: border 1px\n\n## Accessibility\n\nAvailability of accordion content to assistive technology requires the use of aria-controls and toggling aria-expanded as regions are expanded and collapsed.\n\n## Content guidelines\n\n### Title\n\nAccordion titles should:\n\n- Be clear because it hides content\n- Be as brief as possible while still being clear and descriptive.\n\nIf you struggle to come up with clear titles, it might be because the way you’ve separated the content is not clear.\n\n### Panel\n\nContent inside of a section may be split into paragraphs and include sub-headers if needed.\n\n## Best practices\n\n### Dos\n\nAccordions should:\n\n- Have an overview of multiple, related sections of content.\n- Show and hide those sections as needed.\n- Open as many panels as needed.\n\n### Don’ts\n\nAccordions should:\n\n- Not be used if you can keep the content on a single page.\n- Not be used to split up a series of questions into sections.\n- Not hide content which is essential to all users.\n\n## References\n\n[https://design-system.service.gov.uk/components/accordion/](https://design-system.service.gov.uk/components/accordion/)\n[https://www.nngroup.com/articles/accordions-complex-content/](https://www.nngroup.com/articles/accordions-complex-content/)\n";var jsx_runtime=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h2:"h2",h3:"h3",div:"div",button:"button",svg:"svg",path:"path",p:"p"},(0,lib.RP)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.W8,{title:"CSS/Surfaces/Accordion",parameters:{componentSubtitle:`${package_namespaceObject.UU} - ${package_namespaceObject.rE}`,docs:{source:{type:"dynamic"}},status:{type:"WORK IN PROGRESS"}}}),"\n",(0,jsx_runtime.jsx)(dist.VY,{markdown:README_namespaceObject}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"stories",children:"Stories"}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"default",children:"Default"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Default",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"default-accordion-details-one",class:"denhaag-accordion__title",id:"default-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"default-accordion-details-one",role:"region","aria-labelledby":"default-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"default-accordion-details-two",class:"denhaag-accordion__title",id:"default-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"default-accordion-details-two",role:"region","aria-labelledby":"default-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"default-accordion-details-three",class:"denhaag-accordion__title",id:"default-accordion3id",children:"Integer blandit libero quis risus maximus auctor. Proin ullamcorper, metus."}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"default-accordion-details-three",role:"region","aria-labelledby":"default-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"disabled",children:"Disabled"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Disabled",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"disabled-accordion-details-one",class:"denhaag-accordion__title",id:"disabled-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"disabled-accordion-details-one",role:"region","aria-labelledby":"disabled-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"disabled-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--disabled",id:"disabled-accordion2id",disabled:!0,children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"disabled-accordion-details-two",role:"region","aria-labelledby":"disabled-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"disabled-accordion-details-three",class:"denhaag-accordion__title",id:"disabled-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"disabled-accordion-details-three",role:"region","aria-labelledby":"disabled-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"focus",children:"Focus"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Focus",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"focus-accordion-details-one",class:"denhaag-accordion__title",id:"focus-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"focus-accordion-details-one",role:"region","aria-labelledby":"focus-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"focus-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--focus",id:"focus-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"focus-accordion-details-two",role:"region","aria-labelledby":"focus-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"focus-accordion-details-three",class:"denhaag-accordion__title",id:"focus-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"focus-accordion-details-three",role:"region","aria-labelledby":"focus-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"hover",children:"Hover"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Hover",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"hover-accordion-details-one",class:"denhaag-accordion__title",id:"hover-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"hover-accordion-details-one",role:"region","aria-labelledby":"hover-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel denhaag-accordion__panel--hover",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"hover-accordion-details-two",class:"denhaag-accordion__title",id:"hover-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"hover-accordion-details-two",role:"region","aria-labelledby":"hover-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"hover-accordion-details-three",class:"denhaag-accordion__title",id:"hover-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"hover-accordion-details-three",role:"region","aria-labelledby":"hover-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"open",children:"Open"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Open",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"open---hover",children:"Open - hover"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Open - hover",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel denhaag-accordion__panel--hover",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"open---focus",children:"Open - focus"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Open - focus",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--focus",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)(_components.h3,{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)(_components.button,{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)(_components.path,{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)(_components.div,{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)(_components.p,{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]})})})]})}const defaultStory=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"default-accordion-details-one",class:"denhaag-accordion__title",id:"default-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"default-accordion-details-one",role:"region","aria-labelledby":"default-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"default-accordion-details-two",class:"denhaag-accordion__title",id:"default-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"default-accordion-details-two",role:"region","aria-labelledby":"default-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"default-accordion-details-three",class:"denhaag-accordion__title",id:"default-accordion3id",children:"Integer blandit libero quis risus maximus auctor. Proin ullamcorper, metus."}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"default-accordion-details-three",role:"region","aria-labelledby":"default-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});defaultStory.storyName="Default",defaultStory.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const disabled=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"disabled-accordion-details-one",class:"denhaag-accordion__title",id:"disabled-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"disabled-accordion-details-one",role:"region","aria-labelledby":"disabled-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"disabled-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--disabled",id:"disabled-accordion2id",disabled:!0,children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"disabled-accordion-details-two",role:"region","aria-labelledby":"disabled-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"disabled-accordion-details-three",class:"denhaag-accordion__title",id:"disabled-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"disabled-accordion-details-three",role:"region","aria-labelledby":"disabled-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});disabled.storyName="Disabled",disabled.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const Accordion_stories_focus=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"focus-accordion-details-one",class:"denhaag-accordion__title",id:"focus-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"focus-accordion-details-one",role:"region","aria-labelledby":"focus-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"focus-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--focus",id:"focus-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"focus-accordion-details-two",role:"region","aria-labelledby":"focus-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"focus-accordion-details-three",class:"denhaag-accordion__title",id:"focus-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"focus-accordion-details-three",role:"region","aria-labelledby":"focus-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});Accordion_stories_focus.storyName="Focus",Accordion_stories_focus.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const hover=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"hover-accordion-details-one",class:"denhaag-accordion__title",id:"hover-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"hover-accordion-details-one",role:"region","aria-labelledby":"hover-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel denhaag-accordion__panel--hover",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"hover-accordion-details-two",class:"denhaag-accordion__title",id:"hover-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"hover-accordion-details-two",role:"region","aria-labelledby":"hover-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"hover-accordion-details-three",class:"denhaag-accordion__title",id:"hover-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"hover-accordion-details-three",role:"region","aria-labelledby":"hover-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});hover.storyName="Hover",hover.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const Accordion_stories_open=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});Accordion_stories_open.storyName="Open",Accordion_stories_open.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const openHover=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel denhaag-accordion__panel--hover",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});openHover.storyName="Open - hover",openHover.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const openFocus=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-one",class:"denhaag-accordion__title",id:"open-accordion1id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-one",role:"region","aria-labelledby":"open-accordion1id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container denhaag-accordion__container--open",open:!0,children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"true","aria-controls":"open-accordion-details-two",class:"denhaag-accordion__title denhaag-accordion__title--focus",id:"open-accordion2id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-two",role:"region","aria-labelledby":"open-accordion2id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-accordion__container",children:[(0,jsx_runtime.jsxs)("h3",{class:"denhaag-accordion__panel",children:[(0,jsx_runtime.jsx)("button",{"aria-expanded":"false","aria-controls":"open-accordion-details-three",class:"denhaag-accordion__title",id:"open-accordion3id",children:"Accordion"}),(0,jsx_runtime.jsx)("svg",{class:"denhaag-icon",width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true","shape-rendering":"auto",children:(0,jsx_runtime.jsx)("path",{d:"M5.293 8.293a1 1 0 011.414 0L12 13.586l5.293-5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414z",fill:"currentColor"})})]}),(0,jsx_runtime.jsx)("div",{id:"open-accordion-details-three",role:"region","aria-labelledby":"open-accordion3id",class:"denhaag-accordion__details",children:(0,jsx_runtime.jsx)("p",{class:"utrecht-paragraph",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."})})]})]});openFocus.storyName="Open - focus",openFocus.parameters={storySource:{source:'() =>
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
\n

\n \n \n

\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit\n leo lobortis eget.\n

\n
\n
\n
'}};const componentMeta={title:"CSS/Surfaces/Accordion",parameters:{componentSubtitle:`${package_namespaceObject.UU} - ${package_namespaceObject.rE}`,docs:{source:{type:"dynamic"}},status:{type:"WORK IN PROGRESS"}},tags:["stories-mdx"],includeStories:["defaultStory","disabled","focus","hover","open","openHover","openFocus"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.RP)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}};const Accordion_stories=componentMeta,__namedExportsOrder=["defaultStory","disabled","focus","hover","open","openHover","openFocus"]},"../../components/Accordion/dist/mjs/index.js":()=>{var css_248z='.denhaag-accordion{font-family:var(--denhaag-accordion-font-family)}.denhaag-accordion__container{border:var(--denhaag-accordion-container-border);position:var(--denhaag-accordion-container-position)}.denhaag-accordion__container:last-child{border-bottom-left-radius:var(--denhaag-accordion-container-border-radius);border-bottom-right-radius:var(--denhaag-accordion-container-border-radius);border-top:var(--denhaag-accordion-container-border-top)}.denhaag-accordion__container:first-child{--denhaag-accordion-container-border-top:var(--denhaag-accordion-container-border);border-top-left-radius:var(--denhaag-accordion-container-border-radius);border-top-right-radius:var(--denhaag-accordion-container-border-radius)}.denhaag-accordion__container+.denhaag-accordion__container{border-top:var(--denhaag-accordion-container-border-top)}.denhaag-accordion__panel{align-items:var(--denhaag-accordion-panel-align-items);background-color:var(--denhaag-accordion-panel-background-color);border-radius:var(--denhaag-accordion-panel-border-radius);display:var(--denhaag-accordion-panel-display);font-family:inherit;font-size:var(--denhaag-accordion-panel-font-size);font-weight:var(--denhaag-accordion-panel-font-weight,400);margin-block-end:var(--denhaag-accordion-panel-margin-block);margin-block-start:var(--denhaag-accordion-panel-margin-block);min-height:var(--denhaag-accordion-panel-min-height);outline:var(--denhaag-accordion-panel-outline);padding-block-end:var(--denhaag-accordion-panel-padding-block);padding-block-start:var(--denhaag-accordion-panel-padding-block);padding-inline-end:var(--denhaag-accordion-panel-padding-inline);position:inherit;text-decoration:var(--denhaag-accordion-panel-text-decoration);width:inherit}.denhaag-accordion__panel>.denhaag-icon{color:inherit;pointer-events:none;position:var(--denhaag-accordion-icon-position);right:var(--denhaag-accordion-icon-right);top:var(--denhaag-accordion-icon-top);transform:var(--denhaag-accordion-icon-transform)}.denhaag-accordion__title{background:inherit;border:inherit;flex-grow:var(--denhaag-accordion-title-flex-grow);font-family:inherit;font-size:inherit;font-weight:inherit;hyphens:auto;margin-block-end:0;margin-block-start:0;padding-block-end:var(--denhaag-accordion-title-padding-block);padding-block-start:var(--denhaag-accordion-title-padding-block);padding-inline-end:calc(var(--denhaag-accordion-title-padding-inline)*2 + var(--denhaag-accordion-icon-width, 0));padding-inline-start:var(--denhaag-accordion-title-padding-inline);text-align:inherit}.denhaag-accordion__panel--hover .denhaag-accordion__title,.denhaag-accordion__panel--hover .denhaag-icon,.denhaag-accordion__title--focus,.denhaag-accordion__title--focus+.denhaag-icon,.denhaag-accordion__title:focus-visible{color:var(--denhaag-accordion-panel-color);outline:var(--denhaag-accordion-panel-outline)}.denhaag-accordion__container--open .denhaag-accordion__title,.denhaag-accordion__container--open .denhaag-icon{color:inherit}.denhaag-accordion__title--disabled,.denhaag-accordion__title--disabled+.denhaag-icon,.denhaag-accordion__title[disabled],.denhaag-accordion__title[disabled]+.denhaag-icon{z-index:1}.denhaag-accordion__title:focus-visible,.denhaag-accordion__title:focus-visible+.denhaag-icon{color:var(--denhaag-accordion-panel-color);outline:var(--denhaag-accordion-panel-outline)}.denhaag-accordion__container--open .denhaag-accordion__panel--hover .denhaag-accordion__title,.denhaag-accordion__container--open .denhaag-accordion__panel--hover .denhaag-icon,.denhaag-accordion__container--open .denhaag-accordion__panel:hover .denhaag-accordion__title,.denhaag-accordion__container--open .denhaag-accordion__panel:hover .denhaag-icon{color:var(--denhaag-accordion-container-open-color)}.denhaag-accordion__panel:hover .denhaag-accordion__title:not([disabled]),.denhaag-accordion__panel:hover .denhaag-accordion__title:not([disabled])+.denhaag-icon{color:var(--denhaag-accordion-panel-color);outline:var(--denhaag-accordion-panel-outline)}.denhaag-accordion__title--disabled:before,.denhaag-accordion__title[disabled]:before{background-color:var(--denhaag-accordion-title-disabled-background-color);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.denhaag-accordion__title--focus:after,.denhaag-accordion__title:focus-visible:after{border-radius:var(--denhaag-accordion-title-focus-border-radius);content:"";height:100%;left:0;outline:var(--denhaag-accordion-title-focus-outline);position:absolute;top:0;width:100%}.denhaag-accordion__container--open{--denhaag-accordion-details-display:var(--denhaag-accordion-details-open-display);--denhaag-accordion-title-color:var(--denhaag-accordion-container-open-title-color);--denhaag-accordion-icon-color:var(--denhaag-accordion-container-open-icon-color);--denhaag-accordion-icon-transform:var(--denhaag-accordion-container-open-icon-transform)}.denhaag-accordion__container--open .denhaag-accordion__panel{--denhaag-accordion-panel-font-weight:var(--denhaag-accordion-container-open-panel-font-weight);color:var(--denhaag-accordion-container-open-panel-color)}.denhaag-accordion__details{display:var(--denhaag-accordion-details-display);margin-inline-end:var(--denhaag-accordion-details-margin-inline-end);padding-block-end:var(--denhaag-accordion-details-padding-block-end);padding-block-start:var(--denhaag-accordion-details-padding-block-start);padding-inline-end:var(--denhaag-accordion-details-padding-inline);padding-inline-start:var(--denhaag-accordion-details-padding-inline)}';if("undefined"!=typeof document){const head=document.head||document.getElementsByTagName("head")[0],style=document.createElement("style");style.type="text/css",style.nonce=window.NONCE,head.appendChild(style),style.styleSheet?style.styleSheet.cssText=css_248z:style.appendChild(document.createTextNode(css_248z))}}}]); \ No newline at end of file diff --git a/css-Action-stories-mdx.1a5964f7.iframe.bundle.js b/css-Action-stories-mdx.36024b6b.iframe.bundle.js similarity index 99% rename from css-Action-stories-mdx.1a5964f7.iframe.bundle.js rename to css-Action-stories-mdx.36024b6b.iframe.bundle.js index c53e45a4d..d3436f68f 100644 --- a/css-Action-stories-mdx.1a5964f7.iframe.bundle.js +++ b/css-Action-stories-mdx.36024b6b.iframe.bundle.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_gemeente_denhaag_storybook=self.webpackChunk_gemeente_denhaag_storybook||[]).push([[4917],{"../../node_modules/.pnpm/@mdx-js+react@2.3.0_react@18.2.0/node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{BN:()=>MDXContext,RP:()=>useMDXComponents,gz:()=>withMDXComponents,xA:()=>MDXProvider});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./src/css/Action.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,default:()=>Action_stories,multiple:()=>multiple,multipleFocus:()=>multipleFocus,multipleHover:()=>multipleHover,multipleWithDate:()=>multipleWithDate,multipleWithWarningDate:()=>multipleWithWarningDate,single:()=>single,singleFocus:()=>singleFocus,singleHover:()=>singleHover,singleWithDate:()=>singleWithDate,singleWithWarningDate:()=>singleWithWarningDate});__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");var lib=__webpack_require__("../../node_modules/.pnpm/@mdx-js+react@2.3.0_react@18.2.0/node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("../../node_modules/.pnpm/@storybook+blocks@7.6.19_@types+react-dom@18.2.25_@types+react@18.2.79_encoding@0.1.13_react-_vhol4ijjugtiy3qy7stlx4qiyu/node_modules/@storybook/blocks/dist/index.mjs");__webpack_require__("../../components/Action/dist/mjs/index.js"),__webpack_require__("../../components/Button/dist/mjs/index.js");const package_namespaceObject=JSON.parse('{"UU":"@gemeente-denhaag/action","rE":"0.1.1-alpha.64"}');var README=__webpack_require__("../../components/Action/README.md"),jsx_runtime=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h2:"h2",h3:"h3",a:"a",div:"div",svg:"svg",path:"path",span:"span",g:"g",defs:"defs",clipPath:"clipPath",rect:"rect"},(0,lib.RP)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.W8,{title:"CSS/Actions/Action",parameters:{chromatic:{viewports:[1768,1280,768,360]},componentSubtitle:`${package_namespaceObject.UU} - ${package_namespaceObject.rE}`,docs:{source:{type:"dynamic"}},status:{type:"ALPHA"}}}),"\n",(0,jsx_runtime.jsx)(dist.VY,{markdown:README}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"stories",children:"Stories"}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"single",children:"Single"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Single",children:()=>(0,jsx_runtime.jsxs)(_components.a,{href:"#example",class:"denhaag-action denhaag-action--single",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-action__link-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,jsx_runtime.jsx)(_components.path,{d:"M10.2438 4.9107C10.5692 4.58527 11.0968 4.58527 11.4223 4.9107L16.4223 9.9107C16.5785 10.067 16.6663 10.2789 16.6663 10.5C16.6663 10.721 16.5785 10.9329 16.4223 11.0892L11.4223 16.0892C11.0968 16.4147 10.5692 16.4147 10.2438 16.0892C9.91831 15.7638 9.91832 15.2361 10.2438 14.9107L13.8212 11.3333L4.16634 11.3333C3.7061 11.3333 3.33301 10.9602 3.33301 10.5C3.33301 10.0397 3.7061 9.66663 4.16634 9.66663L13.8212 9.66663L10.2438 6.08921C9.91831 5.76378 9.91831 5.23614 10.2438 4.9107Z",fill:"currentColor"})})})})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"single---hover",children:"Single - hover"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Single - hover",children:()=>(0,jsx_runtime.jsxs)(_components.a,{href:"#example",class:"denhaag-action denhaag-action--single denhaag-action--hover",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-action__link-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,jsx_runtime.jsx)(_components.path,{d:"M10.2438 4.9107C10.5692 4.58527 11.0968 4.58527 11.4223 4.9107L16.4223 9.9107C16.5785 10.067 16.6663 10.2789 16.6663 10.5C16.6663 10.721 16.5785 10.9329 16.4223 11.0892L11.4223 16.0892C11.0968 16.4147 10.5692 16.4147 10.2438 16.0892C9.91831 15.7638 9.91832 15.2361 10.2438 14.9107L13.8212 11.3333L4.16634 11.3333C3.7061 11.3333 3.33301 10.9602 3.33301 10.5C3.33301 10.0397 3.7061 9.66663 4.16634 9.66663L13.8212 9.66663L10.2438 6.08921C9.91831 5.76378 9.91831 5.23614 10.2438 4.9107Z",fill:"currentColor"})})})})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"single---focus",children:"Single - focus"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Single - focus",children:()=>(0,jsx_runtime.jsxs)(_components.a,{href:"#example",class:"denhaag-action denhaag-action--single denhaag-action--focus",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-action__link-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,jsx_runtime.jsx)(_components.path,{d:"M10.2438 4.9107C10.5692 4.58527 11.0968 4.58527 11.4223 4.9107L16.4223 9.9107C16.5785 10.067 16.6663 10.2789 16.6663 10.5C16.6663 10.721 16.5785 10.9329 16.4223 11.0892L11.4223 16.0892C11.0968 16.4147 10.5692 16.4147 10.2438 16.0892C9.91831 15.7638 9.91832 15.2361 10.2438 14.9107L13.8212 11.3333L4.16634 11.3333C3.7061 11.3333 3.33301 10.9602 3.33301 10.5C3.33301 10.0397 3.7061 9.66663 4.16634 9.66663L13.8212 9.66663L10.2438 6.08921C9.91831 5.76378 9.91831 5.23614 10.2438 4.9107Z",fill:"currentColor"})})})})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"single---with-date",children:"Single - with date"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Single - with date",children:()=>(0,jsx_runtime.jsxs)(_components.a,{href:"#example",class:"denhaag-action denhaag-action--single",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action__details",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__date",children:(0,jsx_runtime.jsx)(_components.span,{children:"vóór 1 maart 2023"})}),(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-action__link-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,jsx_runtime.jsx)(_components.path,{d:"M10.2438 4.9107C10.5692 4.58527 11.0968 4.58527 11.4223 4.9107L16.4223 9.9107C16.5785 10.067 16.6663 10.2789 16.6663 10.5C16.6663 10.721 16.5785 10.9329 16.4223 11.0892L11.4223 16.0892C11.0968 16.4147 10.5692 16.4147 10.2438 16.0892C9.91831 15.7638 9.91832 15.2361 10.2438 14.9107L13.8212 11.3333L4.16634 11.3333C3.7061 11.3333 3.33301 10.9602 3.33301 10.5C3.33301 10.0397 3.7061 9.66663 4.16634 9.66663L13.8212 9.66663L10.2438 6.08921C9.91831 5.76378 9.91831 5.23614 10.2438 4.9107Z",fill:"currentColor"})})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"single---with-warning-date",children:"Single - with warning date"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Single - with warning date",children:()=>(0,jsx_runtime.jsxs)(_components.a,{href:"#example",class:"denhaag-action denhaag-action--single",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action__details",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action__date denhaag-action__date--warning",children:[(0,jsx_runtime.jsxs)(_components.svg,{class:"denhaag-action__warning-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:[(0,jsx_runtime.jsxs)(_components.g,{"clip-path":"url(#clip0_35868_30297)",children:[(0,jsx_runtime.jsx)(_components.path,{d:"M8.57465 3.71672L1.51632 15.5C1.37079 15.7521 1.29379 16.0378 1.29298 16.3288C1.29216 16.6198 1.36756 16.906 1.51167 17.1588C1.65579 17.4116 1.86359 17.6223 2.11441 17.7699C2.36523 17.9175 2.65032 17.9969 2.94132 18H17.058C17.349 17.9969 17.6341 17.9175 17.8849 17.7699C18.1357 17.6223 18.3435 17.4116 18.4876 17.1588C18.6317 16.906 18.7071 16.6198 18.7063 16.3288C18.7055 16.0378 18.6285 15.7521 18.483 15.5L11.4247 3.71672C11.2761 3.4718 11.0669 3.26931 10.8173 3.12879C10.5677 2.98826 10.2861 2.91443 9.99965 2.91443C9.71321 2.91443 9.43159 2.98826 9.18199 3.12879C8.93238 3.26931 8.72321 3.4718 8.57465 3.71672Z",fill:"currentColor",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),(0,jsx_runtime.jsx)(_components.path,{d:"M10 14.6666H10.0083",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),(0,jsx_runtime.jsx)(_components.path,{d:"M10 8V11.3333",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})]}),(0,jsx_runtime.jsx)(_components.defs,{children:(0,jsx_runtime.jsx)(_components.clipPath,{id:"clip0_35868_30297",children:(0,jsx_runtime.jsx)(_components.rect,{width:"20",height:"20",fill:"white",transform:"translate(0 0.5)"})})})]}),(0,jsx_runtime.jsx)(_components.span,{children:"nog 2 dagen"})]}),(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)(_components.svg,{class:"denhaag-action__link-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,jsx_runtime.jsx)(_components.path,{d:"M10.2438 4.9107C10.5692 4.58527 11.0968 4.58527 11.4223 4.9107L16.4223 9.9107C16.5785 10.067 16.6663 10.2789 16.6663 10.5C16.6663 10.721 16.5785 10.9329 16.4223 11.0892L11.4223 16.0892C11.0968 16.4147 10.5692 16.4147 10.2438 16.0892C9.91831 15.7638 9.91832 15.2361 10.2438 14.9107L13.8212 11.3333L4.16634 11.3333C3.7061 11.3333 3.33301 10.9602 3.33301 10.5C3.33301 10.0397 3.7061 9.66663 4.16634 9.66663L13.8212 9.66663L10.2438 6.08921C9.91831 5.76378 9.91831 5.23614 10.2438 4.9107Z",fill:"currentColor"})})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"multiple",children:"Multiple"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Multiple",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)(_components.a,{href:"#example",class:"denhaag-button",children:"Actie"})})})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"multiple---hover",children:"Multiple - hover"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Multiple - hover",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)(_components.a,{href:"#example",class:"denhaag-button denhaag-button--hover",children:"Actie"})})})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"multiple---focus",children:"Multiple - focus"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Multiple - focus",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)(_components.a,{href:"#example",class:"denhaag-button denhaag-button--focus",children:"Actie"})})})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"multiple---with-date",children:"Multiple - with date"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Multiple - with date",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action__details",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__date",children:(0,jsx_runtime.jsx)(_components.span,{children:"vóór 1 maart 2023"})}),(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)(_components.a,{href:"#example",class:"denhaag-button",children:"Actie"})})]})]})})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"multiple---with-warning-date",children:"Multiple - with warning date"}),"\n",(0,jsx_runtime.jsx)(dist.Hl,{children:(0,jsx_runtime.jsx)(dist.gG,{name:"Multiple - with warning date",children:()=>(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action",children:[(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action__details",children:[(0,jsx_runtime.jsxs)(_components.div,{class:"denhaag-action__date denhaag-action__date--warning",children:[(0,jsx_runtime.jsxs)(_components.svg,{class:"denhaag-action__warning-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:[(0,jsx_runtime.jsxs)(_components.g,{"clip-path":"url(#clip0_35868_30297)",children:[(0,jsx_runtime.jsx)(_components.path,{d:"M8.57465 3.71672L1.51632 15.5C1.37079 15.7521 1.29379 16.0378 1.29298 16.3288C1.29216 16.6198 1.36756 16.906 1.51167 17.1588C1.65579 17.4116 1.86359 17.6223 2.11441 17.7699C2.36523 17.9175 2.65032 17.9969 2.94132 18H17.058C17.349 17.9969 17.6341 17.9175 17.8849 17.7699C18.1357 17.6223 18.3435 17.4116 18.4876 17.1588C18.6317 16.906 18.7071 16.6198 18.7063 16.3288C18.7055 16.0378 18.6285 15.7521 18.483 15.5L11.4247 3.71672C11.2761 3.4718 11.0669 3.26931 10.8173 3.12879C10.5677 2.98826 10.2861 2.91443 9.99965 2.91443C9.71321 2.91443 9.43159 2.98826 9.18199 3.12879C8.93238 3.26931 8.72321 3.4718 8.57465 3.71672Z",fill:"currentColor",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),(0,jsx_runtime.jsx)(_components.path,{d:"M10 14.6666H10.0083",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),(0,jsx_runtime.jsx)(_components.path,{d:"M10 8V11.3333",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})]}),(0,jsx_runtime.jsx)(_components.defs,{children:(0,jsx_runtime.jsx)(_components.clipPath,{id:"clip0_35868_30297",children:(0,jsx_runtime.jsx)(_components.rect,{width:"20",height:"20",fill:"white",transform:"translate(0 0.5)"})})})]}),(0,jsx_runtime.jsx)(_components.span,{children:"nog 2 dagen"})]}),(0,jsx_runtime.jsx)(_components.div,{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)(_components.a,{href:"#example",class:"denhaag-button",children:"Actie"})})]})]})})})]})}const single=()=>(0,jsx_runtime.jsxs)("a",{href:"#example",class:"denhaag-action denhaag-action--single",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)("div",{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)("div",{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)("svg",{class:"denhaag-action__link-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,jsx_runtime.jsx)("path",{d:"M10.2438 4.9107C10.5692 4.58527 11.0968 4.58527 11.4223 4.9107L16.4223 9.9107C16.5785 10.067 16.6663 10.2789 16.6663 10.5C16.6663 10.721 16.5785 10.9329 16.4223 11.0892L11.4223 16.0892C11.0968 16.4147 10.5692 16.4147 10.2438 16.0892C9.91831 15.7638 9.91832 15.2361 10.2438 14.9107L13.8212 11.3333L4.16634 11.3333C3.7061 11.3333 3.33301 10.9602 3.33301 10.5C3.33301 10.0397 3.7061 9.66663 4.16634 9.66663L13.8212 9.66663L10.2438 6.08921C9.91831 5.76378 9.91831 5.23614 10.2438 4.9107Z",fill:"currentColor"})})})})]});single.storyName="Single",single.parameters={storySource:{source:'() => \n
Taak
\n
\n
\n \n \n \n
\n
\n '}};const singleHover=()=>(0,jsx_runtime.jsxs)("a",{href:"#example",class:"denhaag-action denhaag-action--single denhaag-action--hover",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)("div",{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)("div",{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)("svg",{class:"denhaag-action__link-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,jsx_runtime.jsx)("path",{d:"M10.2438 4.9107C10.5692 4.58527 11.0968 4.58527 11.4223 4.9107L16.4223 9.9107C16.5785 10.067 16.6663 10.2789 16.6663 10.5C16.6663 10.721 16.5785 10.9329 16.4223 11.0892L11.4223 16.0892C11.0968 16.4147 10.5692 16.4147 10.2438 16.0892C9.91831 15.7638 9.91832 15.2361 10.2438 14.9107L13.8212 11.3333L4.16634 11.3333C3.7061 11.3333 3.33301 10.9602 3.33301 10.5C3.33301 10.0397 3.7061 9.66663 4.16634 9.66663L13.8212 9.66663L10.2438 6.08921C9.91831 5.76378 9.91831 5.23614 10.2438 4.9107Z",fill:"currentColor"})})})})]});singleHover.storyName="Single - hover",singleHover.parameters={storySource:{source:'() => \n
Taak
\n
\n
\n \n \n \n
\n
\n '}};const singleFocus=()=>(0,jsx_runtime.jsxs)("a",{href:"#example",class:"denhaag-action denhaag-action--single denhaag-action--focus",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)("div",{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)("div",{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)("svg",{class:"denhaag-action__link-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,jsx_runtime.jsx)("path",{d:"M10.2438 4.9107C10.5692 4.58527 11.0968 4.58527 11.4223 4.9107L16.4223 9.9107C16.5785 10.067 16.6663 10.2789 16.6663 10.5C16.6663 10.721 16.5785 10.9329 16.4223 11.0892L11.4223 16.0892C11.0968 16.4147 10.5692 16.4147 10.2438 16.0892C9.91831 15.7638 9.91832 15.2361 10.2438 14.9107L13.8212 11.3333L4.16634 11.3333C3.7061 11.3333 3.33301 10.9602 3.33301 10.5C3.33301 10.0397 3.7061 9.66663 4.16634 9.66663L13.8212 9.66663L10.2438 6.08921C9.91831 5.76378 9.91831 5.23614 10.2438 4.9107Z",fill:"currentColor"})})})})]});singleFocus.storyName="Single - focus",singleFocus.parameters={storySource:{source:'() => \n
Taak
\n
\n
\n \n \n \n
\n
\n '}};const singleWithDate=()=>(0,jsx_runtime.jsxs)("a",{href:"#example",class:"denhaag-action denhaag-action--single",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-action__details",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__date",children:(0,jsx_runtime.jsx)("span",{children:"vóór 1 maart 2023"})}),(0,jsx_runtime.jsx)("div",{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)("svg",{class:"denhaag-action__link-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,jsx_runtime.jsx)("path",{d:"M10.2438 4.9107C10.5692 4.58527 11.0968 4.58527 11.4223 4.9107L16.4223 9.9107C16.5785 10.067 16.6663 10.2789 16.6663 10.5C16.6663 10.721 16.5785 10.9329 16.4223 11.0892L11.4223 16.0892C11.0968 16.4147 10.5692 16.4147 10.2438 16.0892C9.91831 15.7638 9.91832 15.2361 10.2438 14.9107L13.8212 11.3333L4.16634 11.3333C3.7061 11.3333 3.33301 10.9602 3.33301 10.5C3.33301 10.0397 3.7061 9.66663 4.16634 9.66663L13.8212 9.66663L10.2438 6.08921C9.91831 5.76378 9.91831 5.23614 10.2438 4.9107Z",fill:"currentColor"})})})]})]});singleWithDate.storyName="Single - with date",singleWithDate.parameters={storySource:{source:'() => \n
Taak
\n
\n
\n vóór 1 maart 2023\n
\n
\n \n \n \n
\n
\n '}};const singleWithWarningDate=()=>(0,jsx_runtime.jsxs)("a",{href:"#example",class:"denhaag-action denhaag-action--single",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-action__details",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-action__date denhaag-action__date--warning",children:[(0,jsx_runtime.jsxs)("svg",{class:"denhaag-action__warning-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:[(0,jsx_runtime.jsxs)("g",{"clip-path":"url(#clip0_35868_30297)",children:[(0,jsx_runtime.jsx)("path",{d:"M8.57465 3.71672L1.51632 15.5C1.37079 15.7521 1.29379 16.0378 1.29298 16.3288C1.29216 16.6198 1.36756 16.906 1.51167 17.1588C1.65579 17.4116 1.86359 17.6223 2.11441 17.7699C2.36523 17.9175 2.65032 17.9969 2.94132 18H17.058C17.349 17.9969 17.6341 17.9175 17.8849 17.7699C18.1357 17.6223 18.3435 17.4116 18.4876 17.1588C18.6317 16.906 18.7071 16.6198 18.7063 16.3288C18.7055 16.0378 18.6285 15.7521 18.483 15.5L11.4247 3.71672C11.2761 3.4718 11.0669 3.26931 10.8173 3.12879C10.5677 2.98826 10.2861 2.91443 9.99965 2.91443C9.71321 2.91443 9.43159 2.98826 9.18199 3.12879C8.93238 3.26931 8.72321 3.4718 8.57465 3.71672Z",fill:"currentColor",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),(0,jsx_runtime.jsx)("path",{d:"M10 14.6666H10.0083",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),(0,jsx_runtime.jsx)("path",{d:"M10 8V11.3333",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})]}),(0,jsx_runtime.jsx)("defs",{children:(0,jsx_runtime.jsx)("clipPath",{id:"clip0_35868_30297",children:(0,jsx_runtime.jsx)("rect",{width:"20",height:"20",fill:"white",transform:"translate(0 0.5)"})})})]}),(0,jsx_runtime.jsx)("span",{children:"nog 2 dagen"})]}),(0,jsx_runtime.jsx)("div",{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)("svg",{class:"denhaag-action__link-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,jsx_runtime.jsx)("path",{d:"M10.2438 4.9107C10.5692 4.58527 11.0968 4.58527 11.4223 4.9107L16.4223 9.9107C16.5785 10.067 16.6663 10.2789 16.6663 10.5C16.6663 10.721 16.5785 10.9329 16.4223 11.0892L11.4223 16.0892C11.0968 16.4147 10.5692 16.4147 10.2438 16.0892C9.91831 15.7638 9.91832 15.2361 10.2438 14.9107L13.8212 11.3333L4.16634 11.3333C3.7061 11.3333 3.33301 10.9602 3.33301 10.5C3.33301 10.0397 3.7061 9.66663 4.16634 9.66663L13.8212 9.66663L10.2438 6.08921C9.91831 5.76378 9.91831 5.23614 10.2438 4.9107Z",fill:"currentColor"})})})]})]});singleWithWarningDate.storyName="Single - with warning date",singleWithWarningDate.parameters={storySource:{source:'() => \n
Taak
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n nog 2 dagen\n
\n
\n \n \n \n
\n
\n '}};const multiple=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-action",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)("div",{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)("div",{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)("a",{href:"#example",class:"denhaag-button",children:"Actie"})})})]});multiple.storyName="Multiple",multiple.parameters={storySource:{source:'() =>
\n
Taak
\n
\n
\n \n Actie\n \n
\n
\n
'}};const multipleHover=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-action",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)("div",{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)("div",{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)("a",{href:"#example",class:"denhaag-button denhaag-button--hover",children:"Actie"})})})]});multipleHover.storyName="Multiple - hover",multipleHover.parameters={storySource:{source:'() =>
\n
Taak
\n
\n
\n \n Actie\n \n
\n
\n
'}};const multipleFocus=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-action",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsx)("div",{class:"denhaag-action__details",children:(0,jsx_runtime.jsx)("div",{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)("a",{href:"#example",class:"denhaag-button denhaag-button--focus",children:"Actie"})})})]});multipleFocus.storyName="Multiple - focus",multipleFocus.parameters={storySource:{source:'() =>
\n
Taak
\n
\n
\n \n Actie\n \n
\n
\n
'}};const multipleWithDate=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-action",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-action__details",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__date",children:(0,jsx_runtime.jsx)("span",{children:"vóór 1 maart 2023"})}),(0,jsx_runtime.jsx)("div",{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)("a",{href:"#example",class:"denhaag-button",children:"Actie"})})]})]});multipleWithDate.storyName="Multiple - with date",multipleWithDate.parameters={storySource:{source:'() =>
\n
Taak
\n
\n
\n vóór 1 maart 2023\n
\n
\n \n Actie\n \n
\n
\n
'}};const multipleWithWarningDate=()=>(0,jsx_runtime.jsxs)("div",{class:"denhaag-action",children:[(0,jsx_runtime.jsx)("div",{class:"denhaag-action__content",children:"Taak"}),(0,jsx_runtime.jsxs)("div",{class:"denhaag-action__details",children:[(0,jsx_runtime.jsxs)("div",{class:"denhaag-action__date denhaag-action__date--warning",children:[(0,jsx_runtime.jsxs)("svg",{class:"denhaag-action__warning-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:[(0,jsx_runtime.jsxs)("g",{"clip-path":"url(#clip0_35868_30297)",children:[(0,jsx_runtime.jsx)("path",{d:"M8.57465 3.71672L1.51632 15.5C1.37079 15.7521 1.29379 16.0378 1.29298 16.3288C1.29216 16.6198 1.36756 16.906 1.51167 17.1588C1.65579 17.4116 1.86359 17.6223 2.11441 17.7699C2.36523 17.9175 2.65032 17.9969 2.94132 18H17.058C17.349 17.9969 17.6341 17.9175 17.8849 17.7699C18.1357 17.6223 18.3435 17.4116 18.4876 17.1588C18.6317 16.906 18.7071 16.6198 18.7063 16.3288C18.7055 16.0378 18.6285 15.7521 18.483 15.5L11.4247 3.71672C11.2761 3.4718 11.0669 3.26931 10.8173 3.12879C10.5677 2.98826 10.2861 2.91443 9.99965 2.91443C9.71321 2.91443 9.43159 2.98826 9.18199 3.12879C8.93238 3.26931 8.72321 3.4718 8.57465 3.71672Z",fill:"currentColor",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),(0,jsx_runtime.jsx)("path",{d:"M10 14.6666H10.0083",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),(0,jsx_runtime.jsx)("path",{d:"M10 8V11.3333",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})]}),(0,jsx_runtime.jsx)("defs",{children:(0,jsx_runtime.jsx)("clipPath",{id:"clip0_35868_30297",children:(0,jsx_runtime.jsx)("rect",{width:"20",height:"20",fill:"white",transform:"translate(0 0.5)"})})})]}),(0,jsx_runtime.jsx)("span",{children:"nog 2 dagen"})]}),(0,jsx_runtime.jsx)("div",{class:"denhaag-action__actions",children:(0,jsx_runtime.jsx)("a",{href:"#example",class:"denhaag-button",children:"Actie"})})]})]});multipleWithWarningDate.storyName="Multiple - with warning date",multipleWithWarningDate.parameters={storySource:{source:'() =>
\n
Taak
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n nog 2 dagen\n
\n
\n \n Actie\n \n
\n
\n
'}};const componentMeta={title:"CSS/Actions/Action",parameters:{chromatic:{viewports:[1768,1280,768,360]},componentSubtitle:`${package_namespaceObject.UU} - ${package_namespaceObject.rE}`,docs:{source:{type:"dynamic"}},status:{type:"ALPHA"}},tags:["stories-mdx"],includeStories:["single","singleHover","singleFocus","singleWithDate","singleWithWarningDate","multiple","multipleHover","multipleFocus","multipleWithDate","multipleWithWarningDate"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.RP)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}};const Action_stories=componentMeta,__namedExportsOrder=["single","singleHover","singleFocus","singleWithDate","singleWithWarningDate","multiple","multipleHover","multipleFocus","multipleWithDate","multipleWithWarningDate"]},"../../components/Button/dist/mjs/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{$:()=>Button});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js"),__assign=function(){return __assign=Object.assign||function __assign(t){for(var s,i=1,n=arguments.length;i{module.exports="# Action\n\n![npm (scoped)](https://img.shields.io/npm/v/@gemeente-denhaag/alert?logo=npm&style=flat-square)\n![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/nl-design-system/denhaag/Build%20and%20deploy%20Storybook%20to%20Azure%20Web%20App/main?logo=github&style=flat-square)\n\nEen task is een interactief element dat je navigeert naar een andere pagina en als doel heeft om een actie uit te voeren.\n\n## When to use\n\nEen task is een interactief element dat je navigeert naar een andere pagina en als doel heeft om een actie uit te voeren.\n\n## When not to use\n\nEen task is een interactief element dat je navigeert naar een andere pagina en als doel heeft om een actie uit te voeren.\n\n## Alternatives and related components\n\n- Link: Gebruik een link wanneer de gewenste actie is om de gebruiker naar een nieuwe pagina te leiden.\n- Button: Gebruik een button om acties door te geven die gebruikers kunnen ondernemen en om interactie met de pagina mogelijk te maken.\n\n## Anatomy\n\nEen task bestaat uit:\n\n1. Leading icon (optional): biedt ondersteuning bij de bevestiging.\n2. Label: communiceert de taak die je gaat uitvoeren.\n3. Subtext: biedt ondersteuning aan de label.\n4. Deadline icon (optional): geeft weer dat er een waarschuwing is waar je op moet letten.\n5. Date: communiceert de deadline van de taak.\n6. Trailing icon: laat zien dat je ergens naartoe navigeert als je interacteert met de taak.\n7. Secondary button: toont de actie die zal worden uitgevoerd wanneer de gebruiker ermee communiceert.\n8. Primary button: toont de actie die zal worden uitgevoerd wanneer de gebruiker ermee communiceert.\n9. Container\n\n## Staten\n\nDe task bevat de staten:\n\n- default\n- hover\n- checked\n- focus\n\n## Design properties\n\n**Typography**\n\n- Label: TheSans/md/700\n- Subtext: TheSans/md/400\n- Date:\n - Default: TheSans/md/400\n - Deadline: TheSans/md/700\n\n**Colors**\n\nDefault:\n\n- Label: text color Grey/5\n- Subtext: text color Grey/4\n- Deadline icon: svg color Orange/4\n- Date:\n- Default: text color Grey/4\n- Deadline: text color Orange/5\n- Trailing icon: svg color Blue/3\n- Buttons: zoals beschreven staat bij het component Buttons.\n- Container: border color Grey/2\n\nHover:\n\n- Overview:\n - Container: background-color Warm/grey\n- Detail:\n - Buttons: zoals beschreven staat bij het component Buttons.\n\nFocus:\n\n- Overview:\n - Container: border color Ocher/5\n- Detail:\n - Buttons: zoals beschreven staat bij het component Buttons.\n\n## Best practices\n\n### Do's\n\n- Gebruik pictogrammen en kleuren die gemakkelijk te begrijpen zijn. Gebruik een vinkje om voltooide taken aan te geven en een deadline icoon om achterstallige taken aan te geven.\n- Zorg ervoor dat de taak responsief is en goed werkt op verschillende schermformaten en apparaten.\n- Zorg voor duidelijke en beschrijvende labels en gebruik contrastrijke kleuren.\n- Wanneer een taak is voltooid, animeer dan de bevestiging in de oude taak. De oude taak blijft dus in eerste instantie staan en wordt vervangen door de bevestiging.\n\n### Don'ts\n\n- Gebruik geen kleur als enige manier om informatie over te brengen, zoals bij het markeren van de deadline. Dit kan problematisch zijn voor gebruikers die kleurenblind zijn of die kleuren niet goed kunnen onderscheiden.\n- Vermijd het gebruik van kleurencombinaties die onvoldoende contrast bieden en daardoor moeilijk leesbaar zijn voor gebruikers met een visuele beperking.\n- Gebruik geen verwarrende, onduidelijke of dubbelzinnige labels voor de elementen van de taak. Zorg ervoor dat de labels duidelijk en beknopt zijn, zodat gebruikers de functie van elk element gemakkelijk kunnen begrijpen.\n- Verberg geen belangrijke informatie: Verberg geen belangrijke informatie zoals de checked status of prioriteit van een taak en iconen die mogelijk niet toegankelijk zijn voor alle gebruikers.\n- Vermijd onnodige animaties of bewegende elementen in de Task-component. Dit kan afleidend zijn en kan gebruikers afleiden van hun taak of de toegankelijkheid verminderen voor gebruikers met een visuele of cognitieve beperking.\n\n## Content guidelines\n\nLabel:\n\n- Gebruik labels die gemakkelijk te begrijpen zijn en de taak duidelijk omschrijven.\n- Gebruik bijvoorbeeld in plaats van 'Taak 1' als label 'Verleng uw identiteitskaart’.\n- Start de label van een taak die je moet uitvoeren altijd met een werkwoord in gebiedende wijs, gevolgd door een zaak/productnaam. Bijvoorbeeld: ‘Geef informatie voor uw aanvraag subsidie geluidsisolatie’.\n\nButton:\nDe buttons moeten in de vorm ‘Infinitief (onbepaalde wijs)’ worden geschreven. Bijvoorbeeld: ‘Betalen’, ‘Informatie geven’ en ‘Negeren’.\n\nSubtext:\nDe subtext moet altijd gelijk zijn wanneer een taak succesvol is uitgevoerd.\n\nDatum:\n\n- Communiceer datums op de volgende manier: ‘vóór [dag] [maand] [jaar]’. Bijvoorbeeld: ‘vóór 1 mei 2023’.\n- Als een taak binnen 2 dagen moet uitgevoerd, maak je gebruik van de deadline variant. De datum communiceer je op de volgende manier:\n\n - nog 2 dagen\n - nog 1 dag\n - vandaag\n\n## Accessibility\n\nGebruik semantische HTML-tags om de taakcomponent te structureren, zoals
,