From 7406145d6f6e71f261954921155a58b2cf891f9d Mon Sep 17 00:00:00 2001 From: huwshimi Date: Tue, 7 Jun 2022 12:19:26 +1000 Subject: [PATCH] Prepare 0.37.1 release (#787) * Build docs for 0.37.1. * v0.37.1 --- docs/iframe.html | 2 +- ...51d5.iframe.bundle.js => main.c87f3c39.iframe.bundle.js} | 2 +- docs/project.json | 2 +- docs/vendors~main.aafa1d3f.iframe.bundle.js.map | 1 - ...ame.bundle.js => vendors~main.b06633a4.iframe.bundle.js} | 6 +++--- ...t => vendors~main.b06633a4.iframe.bundle.js.LICENSE.txt} | 0 docs/vendors~main.b06633a4.iframe.bundle.js.map | 1 + package.json | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) rename docs/{main.47c151d5.iframe.bundle.js => main.c87f3c39.iframe.bundle.js} (62%) delete mode 100644 docs/vendors~main.aafa1d3f.iframe.bundle.js.map rename docs/{vendors~main.aafa1d3f.iframe.bundle.js => vendors~main.b06633a4.iframe.bundle.js} (53%) rename docs/{vendors~main.aafa1d3f.iframe.bundle.js.LICENSE.txt => vendors~main.b06633a4.iframe.bundle.js.LICENSE.txt} (100%) create mode 100644 docs/vendors~main.b06633a4.iframe.bundle.js.map diff --git a/docs/iframe.html b/docs/iframe.html index e02cb91c6..74ebae205 100644 --- a/docs/iframe.html +++ b/docs/iframe.html @@ -371,4 +371,4 @@ - window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|ts|jsx|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|ts|jsx|tsx|mdx))$"}]; \ No newline at end of file + window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|ts|jsx|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|ts|jsx|tsx|mdx))$"}]; \ No newline at end of file diff --git a/docs/main.47c151d5.iframe.bundle.js b/docs/main.c87f3c39.iframe.bundle.js similarity index 62% rename from docs/main.47c151d5.iframe.bundle.js rename to docs/main.c87f3c39.iframe.bundle.js index e51bca2e5..88589f561 100644 --- a/docs/main.47c151d5.iframe.bundle.js +++ b/docs/main.c87f3c39.iframe.bundle.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{"./.storybook/preview.js-generated-config-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("./node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("./node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("./node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("./node_modules/core-js/modules/es.object.define-property.js");var ClientApi=__webpack_require__("./node_modules/@storybook/client-api/dist/esm/ClientApi.js"),esm=__webpack_require__("./node_modules/@storybook/theming/dist/esm/index.js"),parameters=(__webpack_require__("./node_modules/vanilla-framework/scss/build.scss"),{docs:{theme:esm.k.vanillaish}});function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":return Object(ClientApi.d)(value);case"argTypes":return Object(ClientApi.b)(value);case"decorators":return value.forEach((function(decorator){return Object(ClientApi.f)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(ClientApi.g)(loader,!1)}));case"parameters":return Object(ClientApi.h)(function _objectSpread(target){for(var i=1;i 55) {\n @return $color-dark; // Lighter background, return dark color\n } @else {\n @return $color-x-light; // Darker background, return light color\n }\n}\n\n// Returns the font color to be presented on the passed background-color\n// variable.\n@function vf-determine-text-color($background-color) {\n @if (lightness($background-color) > 50) {\n @return $color-dark;\n } @else {\n @return $color-x-light;\n }\n}\n\n// Adds visual focus to elements on :focus-visible,\n// or :focus if the browser doesn't support the former\n@mixin vf-focus($color: $color-focus, $width: $bar-thickness, $has-validation: false) {\n &:focus {\n outline: $width solid $color;\n outline-offset: -#{$width};\n }\n\n &:focus-visible {\n outline: $width solid $color;\n outline-offset: -#{$width};\n }\n\n &:focus:not(:focus-visible) {\n outline: 0;\n outline-offset: 0;\n }\n\n @if ($has-validation) {\n .is-error &:focus {\n outline-color: $color-negative;\n }\n\n .is-caution &:focus {\n outline-color: $color-caution;\n }\n\n .is-success &:focus {\n outline-color: $color-positive;\n }\n }\n}\n\n// Raises a number to a power (https://css-tricks.com/snippets/sass/power-function/)\n@function pow($number, $exponent) {\n $value: 1;\n\n @if $exponent > 0 {\n @for $i from 1 through $exponent {\n $value: $value * $number;\n }\n } @else if $exponent < 0 {\n @for $i from 1 through -$exponent {\n $value: math.div($value, $number);\n }\n }\n\n @return $value;\n}\n\n@mixin vf-highlight-bar($bg-color: $color-mid-dark, $position: top, $over-border: false) {\n position: relative;\n\n &::before {\n #{$position}: 0;\n background-color: $bg-color;\n content: '';\n position: absolute;\n }\n\n @if $position == top or $position == bottom {\n &::before {\n height: $bar-thickness;\n width: auto;\n\n @if $over-border == true {\n left: -1px;\n right: -1px;\n z-index: 1;\n } @else {\n left: 0;\n right: 0;\n }\n\n @if $position == bottom {\n bottom: 0;\n top: auto;\n }\n }\n } @else if $position == left or $position == right {\n &::before {\n height: auto;\n width: $bar-thickness;\n\n @if $over-border == true {\n bottom: -1px;\n top: -1px;\n z-index: 1;\n } @else {\n bottom: 0;\n top: 0;\n }\n }\n }\n}\n\n@mixin vf-icon-size($size: $default-icon-size) {\n background-size: contain;\n height: $size;\n width: $size;\n}\n","@use 'sass:math';\n\n// Typographic scale settings\n$ms-ratio: math.div(16, 14) !default;\n$sp-unit-ratio: 0.5 !default;\n\n// Baseline grid settings\n$sp-unit: 1rem * $sp-unit-ratio !default;\n\n$font-sizes: (\n h1: pow($ms-ratio, 8),\n h1-mobile: pow($ms-ratio, 6),\n h2: pow($ms-ratio, 6),\n h2-mobile: 1.83274,\n h3: pow($ms-ratio, 4),\n h3-mobile: pow($ms-ratio, 3),\n h4: pow($ms-ratio, 2),\n h4-mobile: 1.22176,\n small: pow($ms-ratio, -1),\n x-small: pow($ms-ratio, -2),\n);\n\n$line-heights: (\n h1: 7 * $sp-unit,\n h1-mobile: 6 * $sp-unit,\n h2: 6 * $sp-unit,\n h2-mobile: 5 * $sp-unit,\n h3: 5 * $sp-unit,\n h3-mobile: 4 * $sp-unit,\n h4: 4 * $sp-unit,\n h4-mobile: 3 * $sp-unit,\n default-text: 3 * $sp-unit,\n small: 2.5 * $sp-unit,\n x-small: 2 * $sp-unit,\n) !default;\n\n// baseline nudges for type scale ratio of (16/14)^2\n$nudges: (\n h1-large: 0.15rem,\n h1-mobile: 0.165rem,\n h1: 0.2rem,\n h2: 0.2rem,\n h2-mobile: 0.1rem,\n h3: 0.1rem,\n h3-mobile: 0.5rem,\n h4-large: 0,\n h4: 0.05rem,\n h4-mobile: 0.3rem,\n h6: 0.338rem,\n h6-large: 0.345rem,\n p: 0.4rem,\n p-ubuntumono: 0.45rem,\n small: 0.05rem,\n x-small: 0.25rem,\n) !default;\n\n// Correct baseline drift due to browser rounding. (Visible in text > 1000 lines)\n// It is applied only to padding-top.\n$browser-rounding-compensations: (\n h1: 0.001rem,\n h2: 0.001rem,\n h3: 0.001rem,\n h4: 0.001rem,\n h5: 0.001rem,\n h6: 0,\n p: 0.0005rem,\n small-largescreen: 0.0006rem,\n small: 0.0005rem,\n) !default;\n\n// Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.\n\n$spv--x-small: $sp-unit * 0.5 !default;\n$spv--small: $sp-unit !default;\n$spv--medium: $sp-unit * 1.5 !default;\n$spv--large: $sp-unit * 2;\n$spv--x-large: $sp-unit * 3 !default;\n$spv--strip-regular: $sp-unit * 8 !default;\n$spv--strip-deep: $sp-unit * 12 !default;\n\n$sph--x-small: $sp-unit * 0.5 !default; // to be used in place of an inline space between characters/words\n$sph--small: $sp-unit !default;\n$sph--large: $sp-unit * 2 !default;\n$sph--x-large: $sp-unit * 3 !default;\n\n// Space after text elements\n$sp-after: (\n h1: $spv--large,\n h1-mobile: $spv--large,\n h2: $spv--large,\n h2-mobile: $spv--large,\n h3: $spv--large,\n h3-mobile: $spv--large,\n h4: $spv--large,\n h4-mobile: $spv--large,\n p: $spv--x-large,\n p-dense: $spv--large,\n default-text: $sp-unit,\n small: $spv--large,\n small--dense: $spv--large,\n x-small: $spv--large,\n) !default;\n\n// commonly occuring calculations available as variables\n$spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit\n$spv-nudge-compensation: $sp-unit - $spv-nudge !default;\n$input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;\n$input-vertical-padding: calc(#{$spv-nudge} - 1px);\n\n// tick element variables\n$form-tick-box-size: 1rem;\n$form-tick-height: 0.375rem;\n$form-tick-offset-top: 0.1875rem;\n$form-tick-box-nudge: 0.15rem; // to nudge the tick box a bit below baseline (to correctly align with default text size)\n$form-radio-inner-circle-diameter: 0.375rem;\n$form-radio-circle-offset: 0.5 * ($form-tick-box-size - $form-radio-inner-circle-diameter);\n\n$text-max-width: 40em !default;\n\n$icon-sizes: (\n small: $sp-unit * 1.5,\n default: $sp-unit * 2,\n heading-icon--x-small: $sp-unit * 3,\n heading-icon--small: $sp-unit * 4,\n heading-icon: $sp-unit * 5,\n thumb: $sp-unit * 6,\n thumb--large: $sp-unit * 12,\n) !default;\n\n$default-icon-size: map-get($icon-sizes, default);\n\n$table-cell-vertical-padding: $spv--small;\n\n// generic units\n$sp-xx-small: $sp-unit * 0.25 !default;\n$sp-x-small: $sp-unit * 0.5 !default;\n$sp-small: $sp-unit !default;\n$sp-medium: $sp-unit * 2 !default;\n$sp-large: $sp-unit * 3 !default;\n$sp-x-large: $sp-unit * 4 !default;\n$sp-xx-large: $sp-unit * 5 !default;\n$sp-xxx-large: $sp-unit * 6 !default;\n$sp-xxxx-large: $sp-unit * 8 !default;\n$sp-xxxxx-large: $sp-unit * 12 !default; // anythng this large should be expressed as a sum of constituent heights. This is not currently used AFAIK , consider removing for 3.0\n","@import 'settings';\n\n@mixin vf-p-icons {\n @include vf-p-icons-common;\n @include vf-p-icon-anchor;\n @include vf-p-icon-plus;\n @include vf-p-icon-minus;\n @include vf-p-icon-expand;\n @include vf-p-icon-collapse;\n @include vf-p-icon-chevron;\n @include vf-p-icon-close;\n @include vf-p-icon-help;\n @include vf-p-icon-info;\n @include vf-p-icon-delete;\n @include vf-p-icon-error;\n @include vf-p-icon-warning;\n @include vf-p-icon-external-link;\n @include vf-p-icon-drag;\n @include vf-p-icon-code;\n @include vf-p-icon-menu;\n @include vf-p-icon-copy;\n @include vf-p-icon-search;\n @include vf-p-icon-success;\n @include vf-p-icon-share;\n @include vf-p-icon-user;\n @include vf-p-icon-spinner;\n @include vf-p-icon-facebook;\n @include vf-p-icon-github;\n @include vf-p-icon-twitter;\n @include vf-p-icon-instagram;\n @include vf-p-icon-linkedin;\n @include vf-p-icon-youtube;\n @include vf-p-icon-rss;\n @include vf-p-icon-email;\n @include vf-p-icon-sizes;\n @include vf-p-icon-show;\n @include vf-p-icon-hide;\n}\n\n@mixin vf-p-icons-common {\n // stylelint-disable selector-max-type\n h1,\n .p-heading--1,\n .u-match-h1 {\n [class*='p-icon'] {\n @include vf-icon-size($x-height);\n\n vertical-align: 0;\n }\n }\n\n h2,\n .p-heading--2,\n .u-match-h2 {\n [class*='p-icon'] {\n @include vf-icon-size($x-height);\n\n vertical-align: 0;\n }\n }\n\n h3,\n .p-heading--3,\n .u-match-h3 {\n [class*='p-icon'] {\n @include vf-icon-size($default-icon-size);\n\n vertical-align: 0;\n }\n }\n\n h4,\n .p-heading--4,\n .u-match-h4 {\n [class*='p-icon'] {\n vertical-align: 0;\n }\n }\n // stylelint-enable selector-max-type\n}\n\n/// Icons\n@mixin vf-p-icon-anchor {\n .p-icon--anchor {\n @extend %icon;\n @include vf-icon-anchor($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-anchor($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-plus {\n .p-icon--plus {\n @extend %icon;\n @include vf-icon-plus($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-plus($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-minus {\n .p-icon--minus {\n @extend %icon;\n @include vf-icon-minus($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-minus($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-expand {\n .p-icon--expand {\n @extend %icon;\n @include vf-icon-expand($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-expand($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-collapse {\n .p-icon--collapse {\n @extend %icon;\n @include vf-icon-collapse($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-collapse($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-chevron {\n .p-icon--chevron-up {\n transform: rotate(180deg);\n }\n\n .p-icon--chevron-down,\n .p-icon--chevron-up {\n @extend %icon;\n @include vf-icon-chevron($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-chevron($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-close {\n .p-icon--close {\n @extend %icon;\n @include vf-icon-close($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-close($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-help {\n .p-icon--help,\n .p-icon--question {\n @extend %icon;\n @include vf-icon-help($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-help($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-info {\n .p-icon--information {\n @extend %icon;\n @include vf-icon-info($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-info($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-delete {\n .p-icon--delete {\n @extend %icon;\n @include vf-icon-delete($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-delete($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-error {\n .p-icon--error {\n @extend %icon;\n @include vf-icon-error($color-negative);\n }\n}\n\n@mixin vf-p-icon-warning {\n .p-icon--warning {\n @extend %icon;\n @include vf-icon-warning($color-caution);\n }\n}\n\n@mixin vf-p-icon-external-link {\n .p-icon--external-link {\n @extend %icon;\n @include vf-icon-external-link($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-external-link($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-drag {\n .p-icon--drag {\n @extend %icon;\n @include vf-icon-drag($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-drag($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-code {\n .p-icon--code {\n @extend %icon;\n @include vf-icon-code($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-code($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-menu {\n .p-icon--menu {\n @extend %icon;\n @include vf-icon-menu($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-menu($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-copy {\n .p-icon--copy {\n @extend %icon;\n @include vf-icon-copy($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-copy($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-search {\n .p-icon--search {\n @extend %icon;\n @include vf-icon-search($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-search($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-success {\n .p-icon--success {\n @extend %icon;\n @include vf-icon-success($color-positive);\n }\n}\n\n@mixin vf-p-icon-share {\n .p-icon--share {\n @extend %icon;\n @include vf-icon-share($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-share($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-user {\n .p-icon--user {\n @extend %icon;\n @include vf-icon-user($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-user($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-spinner {\n .p-icon--spinner {\n @extend %icon;\n @include vf-icon-spinner($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-spinner($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-facebook {\n .p-icon--facebook {\n @extend %social-icon;\n @include vf-icon-facebook;\n }\n}\n\n@mixin vf-p-icon-github {\n .p-icon--github {\n @extend %social-icon;\n @include vf-icon-github;\n }\n}\n\n@mixin vf-p-icon-twitter {\n .p-icon--twitter {\n @extend %social-icon;\n @include vf-icon-twitter;\n }\n}\n\n@mixin vf-p-icon-instagram {\n .p-icon--instagram {\n @extend %social-icon;\n @include vf-icon-instagram;\n }\n}\n\n@mixin vf-p-icon-linkedin {\n .p-icon--linkedin {\n @extend %social-icon;\n @include vf-icon-linkedin;\n }\n}\n\n@mixin vf-p-icon-youtube {\n .p-icon--youtube {\n @extend %social-icon;\n @include vf-icon-youtube;\n }\n}\n\n@mixin vf-p-icon-rss {\n .p-icon--rss {\n @extend %social-icon;\n @include vf-icon-rss;\n }\n}\n\n@mixin vf-p-icon-email {\n .p-icon--email {\n @extend %social-icon;\n @include vf-icon-email;\n }\n}\n\n@mixin vf-p-icon-sizes {\n .p-icon--medium {\n @include vf-icon-size(1.25rem);\n }\n\n .p-icon--large {\n @include vf-icon-size($sp-large);\n }\n\n .p-icon--x-large {\n @include vf-icon-size(2.25rem);\n }\n\n .p-icon--xx-large {\n @include vf-icon-size($sp-xxx-large);\n }\n}\n\n@mixin vf-p-icon-applications {\n .p-icon--applications {\n @extend %icon;\n @include vf-icon-applications($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-applications($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-controllers {\n .p-icon--controllers {\n @extend %icon;\n @include vf-icon-controllers($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-controllers($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-fullscreen {\n .p-icon--fullscreen {\n @extend %icon;\n @include vf-icon-fullscreen($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-fullscreen($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-models {\n .p-icon--models {\n @extend %icon;\n @include vf-icon-models($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-models($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-machines {\n .p-icon--machines {\n @extend %icon;\n @include vf-icon-machines($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-machines($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-pin {\n .p-icon--pin {\n @extend %icon;\n @include vf-icon-pin($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-pin($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-units {\n .p-icon--units {\n @extend %icon;\n @include vf-icon-units($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-units($color-mid-x-light);\n }\n }\n}\n\n// ADDITIONAL\n\n@mixin vf-p-icon-priority-critical {\n .p-icon--priority-critical {\n @extend %icon;\n @include vf-icon-priority-critical($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-priority-critical($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-priority-high {\n .p-icon--priority-high {\n @extend %icon;\n @include vf-icon-priority-high($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-priority-high($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-priority-low {\n .p-icon--priority-low {\n @extend %icon;\n @include vf-icon-priority-low($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-priority-low($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-priority-medium {\n .p-icon--priority-medium {\n @extend %icon;\n @include vf-icon-priority-medium($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-priority-medium($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-priority-negligible {\n .p-icon--priority-negligible {\n @extend %icon;\n @include vf-icon-priority-negligible($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-priority-negligible($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-priority-unknown {\n .p-icon--priority-unknown {\n @extend %icon;\n @include vf-icon-priority-unknown($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-priority-unknown($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-add-canvas {\n .p-icon--add-canvas {\n @extend %icon;\n @include vf-icon-add-canvas($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-add-canvas($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-add-logical-volume {\n .p-icon--add-logical-volume {\n @extend %icon;\n @include vf-icon-add-logical-volume($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-add-logical-volume($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-add-partition {\n .p-icon--add-partition {\n @extend %icon;\n @include vf-icon-add-partition($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-add-partition($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-back-to-top {\n .p-icon--back-to-top {\n @extend %icon;\n @include vf-icon-back-to-top($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-back-to-top($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-begin-downloading {\n .p-icon--begin-downloading {\n @extend %icon;\n @include vf-icon-begin-downloading($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-begin-downloading($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-bundle {\n .p-icon--bundle {\n @extend %icon;\n @include vf-icon-bundle($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-bundle($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-canvas {\n .p-icon--canvas {\n @extend %icon;\n @include vf-icon-canvas($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-canvas($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-change-version {\n .p-icon--change-version {\n @extend %icon;\n @include vf-icon-change-version($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-change-version($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-comments {\n .p-icon--comments {\n @extend %icon;\n @include vf-icon-comments($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-comments($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-conflict-grey {\n .p-icon--conflict-grey {\n @extend %icon;\n @include vf-icon-conflict-grey($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-conflict-grey($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-conflict-resolution-grey {\n .p-icon--conflict-resolution-grey {\n @extend %icon;\n @include vf-icon-conflict-resolution-grey($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-conflict-resolution-grey($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-conflict-resolution {\n .p-icon--conflict-resolution {\n @extend %icon;\n @include vf-icon-conflict-resolution($color-positive, $color-x-light);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-conflict-resolution($color-positive, $color-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-conflict {\n .p-icon--conflict {\n @extend %icon;\n @include vf-icon-conflict($color-caution, $color-x-light);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-conflict($color-caution, $color-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-connected {\n .p-icon--connected {\n @extend %icon;\n @include vf-icon-connected($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-connected($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-containers {\n .p-icon--containers {\n @extend %icon;\n @include vf-icon-containers($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-containers($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-copy-to-clipboard {\n .p-icon--copy-to-clipboard {\n @extend %icon;\n @include vf-icon-copy-to-clipboard($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-copy-to-clipboard($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-disconnect {\n .p-icon--disconnect {\n @extend %icon;\n @include vf-icon-disconnect($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-disconnect($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-edit {\n .p-icon--edit {\n @extend %icon;\n @include vf-icon-edit($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-edit($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-export {\n .p-icon--export {\n @extend %icon;\n @include vf-icon-export($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-export($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-exposed {\n .p-icon--exposed {\n @extend %icon;\n @include vf-icon-exposed($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-exposed($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-filter {\n .p-icon--filter {\n @extend %icon;\n @include vf-icon-filter($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-filter($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-fork {\n .p-icon--fork {\n @extend %icon;\n @include vf-icon-fork($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-fork($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-get-link {\n .p-icon--get-link {\n @extend %icon;\n @include vf-icon-get-link($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-get-link($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-halfscreen-bar {\n .p-icon--halfscreen-bar {\n @extend %icon;\n @include vf-icon-halfscreen-bar($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-halfscreen-bar($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-hide {\n .p-icon--hide {\n @extend %icon;\n @include vf-icon-hide($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-hide($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-highlight-off {\n .p-icon--highlight-off {\n @extend %icon;\n @include vf-icon-highlight-off($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-highlight-off($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-highlight-on {\n .p-icon--highlight-on {\n @extend %icon;\n @include vf-icon-highlight-on($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-highlight-on($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-home {\n .p-icon--home {\n @extend %icon;\n @include vf-icon-home($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-home($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-import {\n .p-icon--import {\n @extend %icon;\n @include vf-icon-import($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-import($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-in-progress {\n .p-icon--in-progress {\n @extend %icon;\n @include vf-icon-in-progress($color-x-light, $color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-in-progress($color-x-light, $color-mid-dark);\n }\n }\n}\n\n@mixin vf-p-icon-inspector-debug {\n .p-icon--inspector-debug {\n @extend %icon;\n @include vf-icon-inspector-debug($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-inspector-debug($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-loading-steps {\n .p-icon--loading-steps {\n @extend %icon;\n @include vf-icon-loading-steps($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-loading-steps($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-lock-locked-active {\n .p-icon--lock-locked-active {\n @extend %icon;\n @include vf-icon-lock-locked-active($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-lock-locked-active($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-lock-locked {\n .p-icon--lock-locked {\n @extend %icon;\n @include vf-icon-lock-locked($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-lock-locked($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-lock-unlock {\n .p-icon--lock-unlock {\n @extend %icon;\n @include vf-icon-lock-unlock($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-lock-unlock($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-maximise-bar {\n .p-icon--maximise-bar {\n @extend %icon;\n @include vf-icon-maximise-bar($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-maximise-bar($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-minimise-bar {\n .p-icon--minimise-bar {\n @extend %icon;\n @include vf-icon-minimise-bar($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-minimise-bar($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-mount-2 {\n .p-icon--mount-2 {\n @extend %icon;\n @include vf-icon-mount-2($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-mount-2($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-mount {\n .p-icon--mount {\n @extend %icon;\n @include vf-icon-mount($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-mount($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-open-terminal {\n .p-icon--open-terminal {\n @extend %icon;\n @include vf-icon-open-terminal($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-open-terminal($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-plans {\n .p-icon--plans {\n @extend %icon;\n @include vf-icon-plans($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-plans($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-pods {\n .p-icon--pods {\n @extend %icon;\n @include vf-icon-pods($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-pods($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-power-error {\n .p-icon--power-error {\n @extend %icon;\n @include vf-icon-power-error($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-power-error($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-power-off {\n .p-icon--power-off {\n @extend %icon;\n @include vf-icon-power-off($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-power-off($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-power-on {\n .p-icon--power-on {\n @extend %icon;\n @include vf-icon-power-on($color-mid-dark, $color-mid-x-light);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-power-on($color-mid-dark, $color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-profile {\n .p-icon--profile {\n @extend %icon;\n @include vf-icon-profile($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-profile($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-restart {\n .p-icon--restart {\n @extend %icon;\n @include vf-icon-restart($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-restart($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-revisions {\n .p-icon--revisions {\n @extend %icon;\n @include vf-icon-revisions($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-revisions($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-security {\n .p-icon--security {\n @extend %icon;\n @include vf-icon-security($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-security($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-settings {\n .p-icon--settings {\n @extend %icon;\n @include vf-icon-settings($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-settings($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-show {\n .p-icon--show {\n @extend %icon;\n @include vf-icon-show($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-show($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-sort-both {\n .p-icon--sort-both {\n @extend %icon;\n @include vf-icon-sort-both($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-sort-both($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-sort-down {\n .p-icon--sort-down {\n @extend %icon;\n @include vf-icon-sort-down($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-sort-down($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-sort-up {\n .p-icon--sort-up {\n @extend %icon;\n @include vf-icon-sort-up($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-sort-up($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-starred {\n .p-icon--starred {\n @extend %icon;\n @include vf-icon-starred($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-starred($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-status-failed-small {\n .p-icon--status-failed-small {\n @extend %icon;\n @include vf-icon-status-small($color-negative);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-status-small($color-negative);\n }\n }\n}\n\n@mixin vf-p-icon-status-in-progress-small {\n .p-icon--status-in-progress-small {\n @extend %icon;\n @include vf-icon-status-small($color-information);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-status-small($color-information);\n }\n }\n}\n\n@mixin vf-p-icon-status-in-progress {\n .p-icon--status-in-progress {\n @extend %icon;\n @include vf-icon-status-in-progress($color-information, $color-light, $color-x-light);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-status-in-progress($color-information, $color-light, $color-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-status-queued-small {\n .p-icon--status-queued-small {\n @extend %icon;\n @include vf-icon-status-small($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-status-small($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-status-queued {\n .p-icon--status-queued {\n @extend %icon;\n @include vf-icon-status-queued($color-x-light);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-status-queued($color-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-status-succeeded-small {\n .p-icon--status-succeeded-small {\n @extend %icon;\n @include vf-icon-status-small($color-positive);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-status-small($color-positive);\n }\n }\n}\n\n@mixin vf-p-icon-status-waiting-small {\n .p-icon--status-waiting-small {\n @extend %icon;\n @include vf-icon-status-small($color-caution);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-status-small($color-caution);\n }\n }\n}\n\n@mixin vf-p-icon-status-waiting {\n .p-icon--status-waiting {\n @extend %icon;\n @include vf-icon-status-waiting($color-caution, $color-mid-light, $color-light, $color-x-light);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-status-waiting($color-caution, $color-mid-light, $color-light, $color-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-status {\n .p-icon--status {\n @extend %icon;\n @include vf-icon-status($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-status($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-submit-bug {\n .p-icon--submit-bug {\n @extend %icon;\n @include vf-icon-submit-bug($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-submit-bug($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-success-grey {\n .p-icon--success-grey {\n @extend %icon;\n @include vf-icon-success-grey($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-success-grey($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-switcher-dashboard {\n .p-icon--switcher-dashboard {\n @extend %icon;\n @include vf-icon-switcher-dashboard($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-switcher-dashboard($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-switcher-environments {\n .p-icon--switcher-environments {\n @extend %icon;\n @include vf-icon-switcher-environments($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-switcher-environments($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-switcher {\n .p-icon--switcher {\n @extend %icon;\n @include vf-icon-switcher($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-switcher($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-tag {\n .p-icon--tag {\n @extend %icon;\n @include vf-icon-tag($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-tag($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-task-outstanding {\n .p-icon--task-outstanding {\n @extend %icon;\n @include vf-icon-task-outstanding($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-task-outstanding($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-timed-out-grey {\n .p-icon--timed-out-grey {\n @extend %icon;\n @include vf-icon-timed-out-grey($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-timed-out-grey($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-timed-out {\n .p-icon--timed-out {\n @extend %icon;\n @include vf-icon-timed-out($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-timed-out($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-topic {\n .p-icon--topic {\n @extend %icon;\n @include vf-icon-topic($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-topic($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-unit-pending {\n .p-icon--unit-pending {\n @extend %icon;\n @include vf-icon-unit-pending($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-unit-pending($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-unit-running {\n .p-icon--unit-running {\n @extend %icon;\n @include vf-icon-unit-running($color-positive, $color-x-light);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-unit-running($color-positive, $color-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-unmount {\n .p-icon--unmount {\n @extend %icon;\n @include vf-icon-unmount($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-unmount($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-unstarred {\n .p-icon--unstarred {\n @extend %icon;\n @include vf-icon-unstarred($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-unstarred($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-user-group {\n .p-icon--user-group {\n @extend %icon;\n @include vf-icon-user-group($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-user-group($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-video-play {\n .p-icon--video-play {\n @extend %icon;\n @include vf-icon-video-play($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-video-play($color-mid-x-light);\n }\n }\n}\n\n@mixin vf-p-icon-warning-grey {\n .p-icon--warning-grey {\n @extend %icon;\n @include vf-icon-warning-grey($color-mid-dark);\n\n [class*='--dark'] &,\n &.is-light {\n @include vf-icon-warning-grey($color-mid-x-light);\n }\n }\n}\n",'// Global font settings\n$font-base-family: \'"Ubuntu", -apple-system, "Segoe UI", "Roboto", "Oxygen", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif\' !default;\n$font-monospace: \'"Ubuntu Mono", Consolas, Monaco, Courier, monospace\' !default;\n$font-heading-family: $font-base-family !default;\n$font-use-subset-latin: false !default;\n$font-display-option: fallback !default;\n$font-allow-cyrillic-greek-latin: false !default;\n$increase-font-size-on-larger-screens: true !default;\n$font-size-ratio--largescreen: 1.125 !default;\n$font-size-largescreen: #{$font-size-ratio--largescreen}rem;\n$base-font-sizes: (\n base: 1rem,\n large: $font-size-largescreen,\n) !default;\n$font-weight-display-heading: 100 !default;\n$font-weight-regular-text: 300 !default;\n$font-weight-bold: 400 !default;\n\n// Ubuntu Font metrics\n$baseline-position: 0.932em !default; // HHead Ascent from the font file\'s metrics. Viewable in Fontforge Font Information>OS/2\n$cap-height: 0.693em !default;\n$x-height: 0.517em !default;\n','@import "~vanilla-framework/scss/settings";\n@import "~vanilla-framework/scss/base_placeholders";\n@import "~vanilla-framework/scss/base_icon-definitions";\n@import "~vanilla-framework/scss/patterns_icons";\n\n@include vf-b-placeholders;\n@include vf-p-icons-common;\n\n.p-icon--custom {\n @extend %icon;\n\n background-image: url(#{$assets-path}a4d31b28-icon-quote.svg);\n}\n'],sourceRoot:""}]),__webpack_exports__.a=___CSS_LOADER_EXPORT___},"./src sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|ts|jsx|tsx|mdx))$":function(module,exports,__webpack_require__){var map={"./components/Accordion/Accordion.stories.mdx":"./src/components/Accordion/Accordion.stories.mdx","./components/ActionButton/ActionButton.stories.mdx":"./src/components/ActionButton/ActionButton.stories.mdx","./components/ArticlePagination/ArticlePagination.stories.mdx":"./src/components/ArticlePagination/ArticlePagination.stories.mdx","./components/Button/Button.stories.mdx":"./src/components/Button/Button.stories.mdx","./components/Card/Card.stories.mdx":"./src/components/Card/Card.stories.mdx","./components/CheckboxInput/CheckboxInput.stories.mdx":"./src/components/CheckboxInput/CheckboxInput.stories.mdx","./components/Chip/Chip.stories.mdx":"./src/components/Chip/Chip.stories.mdx","./components/CodeSnippet/CodeSnippet.stories.mdx":"./src/components/CodeSnippet/CodeSnippet.stories.mdx","./components/Col/Col.stories.mdx":"./src/components/Col/Col.stories.mdx","./components/ContextualMenu/ContextualMenu.stories.mdx":"./src/components/ContextualMenu/ContextualMenu.stories.mdx","./components/Form/Form.stories.mdx":"./src/components/Form/Form.stories.mdx","./components/Icon/Icon.stories.mdx":"./src/components/Icon/Icon.stories.mdx","./components/Input/Input.stories.mdx":"./src/components/Input/Input.stories.mdx","./components/Link/Link.stories.mdx":"./src/components/Link/Link.stories.mdx","./components/List/List.stories.mdx":"./src/components/List/List.stories.mdx","./components/Loader/Loader.stories.mdx":"./src/components/Loader/Loader.stories.mdx","./components/MainTable/MainTable.stories.mdx":"./src/components/MainTable/MainTable.stories.mdx","./components/Modal/Modal.stories.mdx":"./src/components/Modal/Modal.stories.mdx","./components/ModularTable/ModularTable.stories.mdx":"./src/components/ModularTable/ModularTable.stories.mdx","./components/Navigation/Navigation.stories.mdx":"./src/components/Navigation/Navigation.stories.mdx","./components/Notification/Notification.stories.mdx":"./src/components/Notification/Notification.stories.mdx","./components/Pagination/Pagination.stories.mdx":"./src/components/Pagination/Pagination.stories.mdx","./components/PasswordToggle/PasswordToggle.stories.mdx":"./src/components/PasswordToggle/PasswordToggle.stories.mdx","./components/RadioInput/RadioInput.stories.mdx":"./src/components/RadioInput/RadioInput.stories.mdx","./components/Row/Row.stories.mdx":"./src/components/Row/Row.stories.mdx","./components/SearchAndFilter/SearchAndFilter.stories.mdx":"./src/components/SearchAndFilter/SearchAndFilter.stories.mdx","./components/SearchBox/SearchBox.stories.mdx":"./src/components/SearchBox/SearchBox.stories.mdx","./components/Select/Select.stories.mdx":"./src/components/Select/Select.stories.mdx","./components/Slider/Slider.stories.mdx":"./src/components/Slider/Slider.stories.mdx","./components/Spinner/Spinner.stories.mdx":"./src/components/Spinner/Spinner.stories.mdx","./components/StatusLabel/StatusLabel.stories.mdx":"./src/components/StatusLabel/StatusLabel.stories.mdx","./components/Strip/Strip.stories.mdx":"./src/components/Strip/Strip.stories.mdx","./components/SummaryButton/SummaryButton.stories.mdx":"./src/components/SummaryButton/SummaryButton.stories.mdx","./components/Switch/Switch.stories.mdx":"./src/components/Switch/Switch.stories.mdx","./components/Tabs/Tabs.stories.mdx":"./src/components/Tabs/Tabs.stories.mdx","./components/Textarea/Textarea.stories.mdx":"./src/components/Textarea/Textarea.stories.mdx","./components/Tooltip/Tooltip.stories.mdx":"./src/components/Tooltip/Tooltip.stories.mdx","./docs/getting-started.stories.mdx":"./src/docs/getting-started.stories.mdx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./src sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|ts|jsx|tsx|mdx))$"},"./src/components/Accordion/Accordion.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Accordion_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"externalState",(function(){return Accordion_stories_externalState})),__webpack_require__.d(__webpack_exports__,"headings",(function(){return headings}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=(__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("./node_modules/classnames/index.js")),classnames_default=__webpack_require__.n(classnames),useId=__webpack_require__("./src/hooks/useId.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),AccordionSection_AccordionSection=function AccordionSection(_ref){var content=_ref.content,expanded=_ref.expanded,onTitleClick=_ref.onTitleClick,sectionKey=_ref.sectionKey,setExpanded=_ref.setExpanded,title=_ref.title,titleElement=_ref.titleElement,_ref$headingLevel=_ref.headingLevel,headingLevel=void 0===_ref$headingLevel?3:_ref$headingLevel,sectionId=Object(useId.a)(),key=sectionKey||sectionId,isExpanded=expanded===key,Title=titleElement||"div";return Object(jsx_runtime.jsxs)("li",{className:"p-accordion__group",children:[Object(jsx_runtime.jsx)(Title,{role:titleElement?null:"heading","aria-level":titleElement?null:headingLevel,className:"p-accordion__heading",children:Object(jsx_runtime.jsx)("button",{"aria-controls":"#"+sectionId,"aria-expanded":isExpanded?"true":"false",className:"p-accordion__tab",onClick:function onClick(){isExpanded?setExpanded(null,null):setExpanded(key,title),onTitleClick&&onTitleClick(!isExpanded,key)},role:"tab",type:"button",children:title})}),Object(jsx_runtime.jsx)("section",{"aria-hidden":isExpanded?"false":"true","aria-labelledby":sectionId,className:"p-accordion__panel",id:sectionId,role:"tabpanel",children:content})]})};AccordionSection_AccordionSection.displayName="AccordionSection";var components_AccordionSection_AccordionSection=AccordionSection_AccordionSection;try{AccordionSection_AccordionSection.displayName="AccordionSection",AccordionSection_AccordionSection.__docgenInfo={description:"",displayName:"AccordionSection",props:{content:{defaultValue:null,description:"The content of the section.",name:"content",required:!1,type:{name:"ReactNode"}},expanded:{defaultValue:null,description:"An optional value to set the expanded section. The value must match a\nsection key.",name:"expanded",required:!1,type:{name:"string"}},headingLevel:{defaultValue:{value:"3"},description:"",name:"headingLevel",required:!1,type:{name:"number"}},onTitleClick:{defaultValue:null,description:"An optional click event when the title is clicked.",name:"onTitleClick",required:!1,type:{name:"(expanded: boolean, key: string) => void"}},sectionKey:{defaultValue:null,description:"An optional key to be used to track which section is selected.",name:"sectionKey",required:!1,type:{name:"string"}},setExpanded:{defaultValue:null,description:"",name:"setExpanded",required:!1,type:{name:"(key: string, title: string) => void"}},title:{defaultValue:null,description:"The title of the section.",name:"title",required:!1,type:{name:"string"}},titleElement:{defaultValue:null,description:"Optional string describing heading element that should be used for the section titles.",name:"titleElement",required:!1,type:{name:"enum",value:[{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'},{value:'"h6"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/AccordionSection/AccordionSection.tsx#AccordionSection"]={docgenInfo:AccordionSection_AccordionSection.__docgenInfo,name:"AccordionSection",path:"src/components/AccordionSection/AccordionSection.tsx#AccordionSection"})}catch(__react_docgen_typescript_loader_error){}var _excluded=["key"],_excluded2=["className","expanded","externallyControlled","onExpandedChange","sections","titleElement"];function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 Accordion_generateSections=function generateSections(sections,setExpanded,expanded,titleElement){return sections.map((function(_ref,i){var key=_ref.key,props=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsx)(components_AccordionSection_AccordionSection,Object.assign({expanded:expanded,sectionKey:null==key?void 0:key.toString(),setExpanded:setExpanded,titleElement:titleElement},props),key||i)}))},Accordion_Accordion=function Accordion(_ref2){var className=_ref2.className,expanded=_ref2.expanded,externallyControlled=_ref2.externallyControlled,onExpandedChange=_ref2.onExpandedChange,sections=_ref2.sections,titleElement=_ref2.titleElement,asideProps=_objectWithoutProperties(_ref2,_excluded2),_useState2=_slicedToArray(Object(react.useState)(expanded),2),expandedSection=_useState2[0],setExpandedSection=_useState2[1];return Object(jsx_runtime.jsx)("aside",Object.assign({className:classnames_default()(className,"p-accordion")},asideProps,{role:"tablist","aria-multiselectable":"true",children:Object(jsx_runtime.jsx)("ul",{className:"p-accordion__list",children:Accordion_generateSections(sections,(function setExpanded(id,title){setExpandedSection(id),onExpandedChange&&onExpandedChange(id,title)}),externallyControlled?expanded:expandedSection,titleElement)})}))};Accordion_Accordion.displayName="Accordion";var components_Accordion_Accordion=Accordion_Accordion;try{Accordion_Accordion.displayName="Accordion",Accordion_Accordion.__docgenInfo={description:"",displayName:"Accordion",props:{className:{defaultValue:null,description:"Optional classes applied to the parent element.",name:"className",required:!1,type:{name:"string"}},expanded:{defaultValue:null,description:"An optional value to set the expanded section. The value must match a\nsection key. This value will only set the expanded section on first render\nif externallyControlled is not set to `true`.",name:"expanded",required:!1,type:{name:"string"}},externallyControlled:{defaultValue:null,description:"Whether the expanded section will be controlled via external state.",name:"externallyControlled",required:!1,type:{name:"boolean"}},onExpandedChange:{defaultValue:null,description:"Optional function that is called when the expanded section is changed.\nThe function is provided the section title or null.",name:"onExpandedChange",required:!1,type:{name:"(id: any, title: string) => void"}},sections:{defaultValue:null,description:"An array of sections and content.",name:"sections",required:!0,type:{name:"Section[]"}},titleElement:{defaultValue:null,description:"Optional string describing heading element that should be used for the section titles.",name:"titleElement",required:!1,type:{name:"enum",value:[{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'},{value:'"h6"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Accordion/Accordion.tsx#Accordion"]={docgenInfo:Accordion_Accordion.__docgenInfo,name:"Accordion",path:"src/components/Accordion/Accordion.tsx#Accordion"})}catch(__react_docgen_typescript_loader_error){}var Accordion_stories_excluded=["components"];function Accordion_stories_slicedToArray(arr,i){return function Accordion_stories_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function Accordion_stories_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function Accordion_stories_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return Accordion_stories_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Accordion_stories_arrayLikeToArray(o,minLen)}(arr,i)||function Accordion_stories_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Accordion_stories_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var Accordion_stories_externalState=function externalState(){var _useState4=Accordion_stories_slicedToArray(Object(react.useState)(),2),expandedSection=_useState4[0],setExpandedSection=_useState4[1];return Object(esm.b)(components_Accordion_Accordion,{expanded:expandedSection,externallyControlled:!0,onExpandedChange:setExpandedSection,sections:[{title:"Advanced topics",key:"advanced-topics",content:Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)("p",null,"Charm bundles"),Object(esm.b)("p",null,"Machine authentication"),Object(esm.b)("p",null,"Migrating models"),Object(esm.b)("p",null,"Using storage"),Object(esm.b)("p",null,"Working with actions"),Object(esm.b)("p",null,"Working with resources"),Object(esm.b)("p",null,"Cloud image metadata"),Object(esm.b)("p",null,"Tools"))},{title:"Networking",key:"networking",content:Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)("p",null,"Working offline"),Object(esm.b)("p",null,"Fan container networking"),Object(esm.b)("p",null,"Network spaces"))},{title:"Miscellaneous",key:"miscellaneous",content:Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)("p",null,"Juju GUI"),Object(esm.b)("p",null,"CentOS support"),Object(esm.b)("p",null,"Collecting Juju metrics"))}]})};Accordion_stories_externalState.displayName="externalState",Accordion_stories_externalState.storyName="External state",Accordion_stories_externalState.parameters={storySource:{source:'() => {\n const [expandedSection, setExpandedSection] = useState();\n return \n

Charm bundles

\n

Machine authentication

\n

Migrating models

\n

Using storage

\n

Working with actions

\n

Working with resources

\n

Cloud image metadata

\n

Tools

\n \n }, {\n title: "Networking",\n key: "networking",\n content: <>\n

Working offline

\n

Fan container networking

\n

Network spaces

\n \n }, {\n title: "Miscellaneous",\n key: "miscellaneous",\n content: <>\n

Juju GUI

\n

CentOS support

\n

Collecting Juju metrics

\n \n }]} />;\n}'}};var headings=Accordion_stories_Template.bind({});headings.storyName="Headings",headings.args={sections:[{title:"Advanced topics",content:Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)("p",null,"Charm bundles"),Object(esm.b)("p",null,"Machine authentication"),Object(esm.b)("p",null,"Migrating models"),Object(esm.b)("p",null,"Using storage"),Object(esm.b)("p",null,"Working with actions"),Object(esm.b)("p",null,"Working with resources"),Object(esm.b)("p",null,"Cloud image metadata"),Object(esm.b)("p",null,"Tools"))},{title:"Networking",content:Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)("p",null,"Working offline"),Object(esm.b)("p",null,"Fan container networking"),Object(esm.b)("p",null,"Network spaces"))},{title:"Miscellaneous",content:Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)("p",null,"Juju GUI"),Object(esm.b)("p",null,"CentOS support"),Object(esm.b)("p",null,"Collecting Juju metrics"))}],titleElement:"h3"},headings.parameters={storySource:{source:"args => "}};var componentMeta={title:"Accordion",component:components_Accordion_Accordion,argTypes:{sections:{control:{disable:!0}},externallyControlled:{control:{disable:!0}}},includeStories:["defaultStory","externalState","headings"]},mdxStoryNameToKey={Default:"defaultStory","External state":"externalState",Headings:"headings"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/ActionButton/ActionButton.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"loading",(function(){return loading}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_ActionButton__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/ActionButton/ActionButton.tsx"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i=0||(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 layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.c,{title:"ActionButton",component:_ActionButton__WEBPACK_IMPORTED_MODULE_8__.a,argTypes:{children:{control:{type:"text"}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"ActionButton"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"ActionButton accepts the props from ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"p",href:"?path=/docs/button--base"},"Button")," in addition to the following:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.a,{of:_ActionButton__WEBPACK_IMPORTED_MODULE_8__.a,mdxType:"ArgsTable"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_ActionButton__WEBPACK_IMPORTED_MODULE_8__.a,{appearance:"positive",mdxType:"ActionButton"},"Click me!"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Loading"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Loading",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_ActionButton__WEBPACK_IMPORTED_MODULE_8__.a,{appearance:"positive",loading:!0,disabled:!0,mdxType:"ActionButton"},"Click me!"))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_ActionButton__WEBPACK_IMPORTED_MODULE_8__.a,{appearance:"positive"},"Click me!")};defaultStory.displayName="defaultStory",defaultStory.storyName="Default",defaultStory.parameters={storySource:{source:'Click me!'}};var loading=function loading(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_ActionButton__WEBPACK_IMPORTED_MODULE_8__.a,{appearance:"positive",loading:!0,disabled:!0},"Click me!")};loading.displayName="loading",loading.storyName="Loading",loading.parameters={storySource:{source:'\n Click me!\n '}};var componentMeta={title:"ActionButton",component:_ActionButton__WEBPACK_IMPORTED_MODULE_8__.a,argTypes:{children:{control:{type:"text"}}},includeStories:["defaultStory","loading"]},mdxStoryNameToKey={Default:"defaultStory",Loading:"loading"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/ActionButton/ActionButton.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_13___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_13__),react__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/react/index.js"),_Icon__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./src/components/Icon/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["appearance","children","className","disabled","inline","loading","success"];function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 ActionButton=function ActionButton(_ref){var appearance=_ref.appearance,children=_ref.children,className=_ref.className,_ref$disabled=_ref.disabled,disabled=void 0!==_ref$disabled&&_ref$disabled,_ref$inline=_ref.inline,inline=void 0!==_ref$inline&&_ref$inline,_ref$loading=_ref.loading,loading=void 0!==_ref$loading&&_ref$loading,_ref$success=_ref.success,success=void 0!==_ref$success&&_ref$success,buttonProps=_objectWithoutProperties(_ref,_excluded),_useState2=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_14__.useState)(),2),height=_useState2[0],setHeight=_useState2[1],_useState4=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_14__.useState)(),2),width=_useState4[0],setWidth=_useState4[1],_useState6=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_14__.useState)(!1),2),showLoader=_useState6[0],setShowLoader=_useState6[1],_useState8=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_14__.useState)(!1),2),showSuccess=_useState8[0],setShowSuccess=_useState8[1],ref=Object(react__WEBPACK_IMPORTED_MODULE_14__.useRef)(null);Object(react__WEBPACK_IMPORTED_MODULE_14__.useEffect)((function(){var loaderTimeout;return loading&&(ref.current&&ref.current.getBoundingClientRect()&&(setHeight(ref.current.getBoundingClientRect().height),setWidth(ref.current.getBoundingClientRect().width)),setShowLoader(!0)),!loading&&showLoader&&(loaderTimeout=window.setTimeout((function(){setShowLoader(!1),success&&setShowSuccess(!0)}),400)),function(){return window.clearTimeout(loaderTimeout)}}),[loading,showLoader,success]),Object(react__WEBPACK_IMPORTED_MODULE_14__.useEffect)((function(){var successTimeout;return showSuccess&&(successTimeout=window.setTimeout((function(){setHeight(null),setWidth(null),setShowSuccess(!1)}),2e3)),function(){return window.clearTimeout(successTimeout)}}),[showSuccess]);var buttonClasses=classnames__WEBPACK_IMPORTED_MODULE_13___default()(className,"p-action-button",appearance?"p-button--"+appearance:"p-button",{"is-processing":showLoader||showSuccess,"is-disabled":disabled,"is-inline":inline}),showIcon=showLoader||showSuccess,icon=(showLoader?"spinner":showSuccess&&"success")||null,iconLight="positive"===appearance||"negative"===appearance;return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_16__.jsx)("button",Object.assign({className:buttonClasses,disabled:disabled,ref:ref,style:height&&width?{height:height+"px",width:width+"px"}:void 0},buttonProps,{children:showIcon?Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_16__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_15__.b,{className:showLoader?"u-animation--spin":null,light:iconLight,name:icon}):children}))};ActionButton.displayName="ActionButton",__webpack_exports__.a=ActionButton;try{ActionButton.displayName="ActionButton",ActionButton.__docgenInfo={description:"",displayName:"ActionButton",props:{appearance:{defaultValue:null,description:"The appearance of the button.",name:"appearance",required:!1,type:{name:"string"}},children:{defaultValue:null,description:"The content of the button.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the button element.",name:"className",required:!1,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"Whether the button should be disabled.",name:"disabled",required:!1,type:{name:"boolean"}},inline:{defaultValue:{value:"false"},description:"Whether the button should display inline.",name:"inline",required:!1,type:{name:"boolean"}},loading:{defaultValue:{value:"false"},description:"Whether the button should be in the loading state.",name:"loading",required:!1,type:{name:"boolean"}},success:{defaultValue:{value:"false"},description:"Whether the button should be in the success state.",name:"success",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ActionButton/ActionButton.tsx#ActionButton"]={docgenInfo:ActionButton.__docgenInfo,name:"ActionButton",path:"src/components/ActionButton/ActionButton.tsx#ActionButton"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/ArticlePagination/ArticlePagination.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return ArticlePagination_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","nextURL","nextLabel","previousURL","previousLabel"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 ArticlePagination_ArticlePagination=function ArticlePagination(_ref){var className=_ref.className,nextURL=_ref.nextURL,nextLabel=_ref.nextLabel,previousURL=_ref.previousURL,previousLabel=_ref.previousLabel,props=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsxs)("footer",Object.assign({className:classnames_default()(className,"p-article-pagination")},props,{children:[previousURL&&previousLabel&&Object(jsx_runtime.jsxs)("a",{className:"p-article-pagination__link--previous",href:previousURL,children:[Object(jsx_runtime.jsx)("span",{className:"p-article-pagination__label",children:"Previous"}),Object(jsx_runtime.jsx)("span",{className:"p-article-pagination__title",children:previousLabel})]}),nextURL&&nextLabel&&Object(jsx_runtime.jsxs)("a",{className:"p-article-pagination__link--next",href:nextURL,children:[Object(jsx_runtime.jsx)("span",{className:"p-article-pagination__label",children:"Next"}),Object(jsx_runtime.jsx)("span",{className:"p-article-pagination__title",children:nextLabel})]})]}))};ArticlePagination_ArticlePagination.displayName="ArticlePagination";var components_ArticlePagination_ArticlePagination=ArticlePagination_ArticlePagination;try{ArticlePagination_ArticlePagination.displayName="ArticlePagination",ArticlePagination_ArticlePagination.__docgenInfo={description:"",displayName:"ArticlePagination",props:{className:{defaultValue:null,description:"Optional classes to add to the wrapping element.",name:"className",required:!1,type:{name:"string"}},nextURL:{defaultValue:null,description:"The URL for the next link.",name:"nextURL",required:!1,type:{name:"string"}},nextLabel:{defaultValue:null,description:"The label for the next link.",name:"nextLabel",required:!1,type:{name:"string"}},previousURL:{defaultValue:null,description:"The URL for the previous link.",name:"previousURL",required:!1,type:{name:"string"}},previousLabel:{defaultValue:null,description:"The label for the previous link.",name:"previousLabel",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ArticlePagination/ArticlePagination.tsx#ArticlePagination"]={docgenInfo:ArticlePagination_ArticlePagination.__docgenInfo,name:"ArticlePagination",path:"src/components/ArticlePagination/ArticlePagination.tsx#ArticlePagination"})}catch(__react_docgen_typescript_loader_error){}var ArticlePagination_stories_excluded=["components"];function ArticlePagination_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function ArticlePagination_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var componentMeta={title:"ArticlePagination",component:components_ArticlePagination_ArticlePagination,includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Button/Button.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"defaultDisabled",(function(){return defaultDisabled})),__webpack_require__.d(__webpack_exports__,"base",(function(){return base})),__webpack_require__.d(__webpack_exports__,"baseDisabled",(function(){return baseDisabled})),__webpack_require__.d(__webpack_exports__,"link",(function(){return link})),__webpack_require__.d(__webpack_exports__,"linkDisabled",(function(){return linkDisabled})),__webpack_require__.d(__webpack_exports__,"positive",(function(){return positive})),__webpack_require__.d(__webpack_exports__,"positiveDisabled",(function(){return positiveDisabled})),__webpack_require__.d(__webpack_exports__,"negative",(function(){return negative})),__webpack_require__.d(__webpack_exports__,"negativeDisabled",(function(){return negativeDisabled})),__webpack_require__.d(__webpack_exports__,"brand",(function(){return brand})),__webpack_require__.d(__webpack_exports__,"brandDisabled",(function(){return brandDisabled})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return inline})),__webpack_require__.d(__webpack_exports__,"dense",(function(){return dense})),__webpack_require__.d(__webpack_exports__,"small",(function(){return small})),__webpack_require__.d(__webpack_exports__,"icon",(function(){return icon})),__webpack_require__.d(__webpack_exports__,"iconText",(function(){return iconText}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_Button__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/Button/Button.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i '}};var baseDisabled=function baseDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"base",disabled:!0},"Base button disabled")};baseDisabled.displayName="baseDisabled",baseDisabled.storyName="Base disabled",baseDisabled.parameters={storySource:{source:''}};var link=function link(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{element:"a",href:"#test",appearance:"base"},"Link button")};link.displayName="link",link.storyName="Link",link.parameters={storySource:{source:''}};var linkDisabled=function linkDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{element:"a",href:"#test",appearance:"base",disabled:!0},"Link button disabled")};linkDisabled.displayName="linkDisabled",linkDisabled.storyName="Link disabled",linkDisabled.parameters={storySource:{source:''}};var positive=function positive(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"positive"},"Positive button")};positive.displayName="positive",positive.storyName="Positive",positive.parameters={storySource:{source:''}};var positiveDisabled=function positiveDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"positive",disabled:!0},"Positive button disabled")};positiveDisabled.displayName="positiveDisabled",positiveDisabled.storyName="Positive disabled",positiveDisabled.parameters={storySource:{source:''}};var negative=function negative(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"negative"},"Negative button")};negative.displayName="negative",negative.storyName="Negative",negative.parameters={storySource:{source:''}};var negativeDisabled=function negativeDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"negative",disabled:!0},"Negative button disabled")};negativeDisabled.displayName="negativeDisabled",negativeDisabled.storyName="Negative disabled",negativeDisabled.parameters={storySource:{source:''}};var brand=function brand(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"brand"},"Brand button")};brand.displayName="brand",brand.storyName="Brand",brand.parameters={storySource:{source:''}};var brandDisabled=function brandDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"brand",disabled:!0},"Brand button disabled")};brandDisabled.displayName="brandDisabled",brandDisabled.storyName="Brand disabled",brandDisabled.parameters={storySource:{source:''}};var inline=function inline(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,"Everything you need to get started with Vanilla. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"neutral",inline:!0},"Inline button"))};inline.storyName="Inline",inline.parameters={storySource:{source:'<>\n Everything you need to get started with Vanilla. \n \n '}};var dense=function dense(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,"Everything you need to get started with Vanilla. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{dense:!0},"Dense button"))};dense.storyName="Dense",dense.parameters={storySource:{source:"<>\n Everything you need to get started with Vanilla. \n \n "}};var small=function small(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{small:!0},"Small button"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{small:!0,dense:!0},"Small dense button"))};small.storyName="Small",small.parameters={storySource:{source:"<>\n \n \n "}};var icon=function icon(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{hasIcon:!0},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("i",{className:"p-icon--plus"}))};icon.displayName="icon",icon.storyName="Icon",icon.parameters={storySource:{source:''}};var iconText=function iconText(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Button__WEBPACK_IMPORTED_MODULE_8__.b,{hasIcon:!0},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("i",{className:"p-icon--plus"})," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,"Button with icon & text"))};iconText.displayName="iconText",iconText.storyName="Icon & text",iconText.parameters={storySource:{source:''}};var componentMeta={title:"Button",component:_Button__WEBPACK_IMPORTED_MODULE_8__.b,argTypes:{children:{control:{type:"text"},defaultValue:"Click me!"},appearance:{control:{options:_Button__WEBPACK_IMPORTED_MODULE_8__.a,type:"select"},defaultValue:_Button__WEBPACK_IMPORTED_MODULE_8__.a.DEFAULT}},includeStories:["defaultStory","defaultDisabled","base","baseDisabled","link","linkDisabled","positive","positiveDisabled","negative","negativeDisabled","brand","brandDisabled","inline","dense","small","icon","iconText"]},mdxStoryNameToKey={Default:"defaultStory","Default disabled":"defaultDisabled",Base:"base","Base disabled":"baseDisabled",Link:"link","Link disabled":"linkDisabled",Positive:"positive","Positive disabled":"positiveDisabled",Negative:"negative","Negative disabled":"negativeDisabled",Brand:"brand","Brand disabled":"brandDisabled",Inline:"inline",Dense:"dense",Small:"small",Icon:"icon","Icon & text":"iconText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/Button/Button.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return ButtonAppearance}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.string.small.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_5__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/react/jsx-runtime.js")),_excluded=["appearance","children","className","dense","disabled","element","hasIcon","inline","onClick","small"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 ButtonAppearance={BASE:"base",BRAND:"brand",DEFAULT:"",LINK:"link",NEGATIVE:"negative",POSITIVE:"positive"},Button=function Button(_ref){var appearance=_ref.appearance,children=_ref.children,className=_ref.className,dense=_ref.dense,disabled=_ref.disabled,_ref$element=_ref.element,Component=void 0===_ref$element?"button":_ref$element,hasIcon=_ref.hasIcon,inline=_ref.inline,onClick=_ref.onClick,small=_ref.small,buttonProps=_objectWithoutProperties(_ref,_excluded),classes=classnames__WEBPACK_IMPORTED_MODULE_5___default()(appearance?"p-button--"+appearance:"p-button",{"has-icon":hasIcon,"is-dense":dense,"is-disabled":"button"!==Component&&disabled,"is-inline":inline,"is-small":small},className),disabledProp="button"===Component?{disabled:disabled}:{"aria-disabled":disabled};return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(Component,Object.assign({className:classes,onClick:disabled?function onClickDisabled(e){return e.preventDefault()}:onClick},disabledProp,buttonProps,{children:children}))};Button.displayName="Button",__webpack_exports__.b=Button;try{Button.displayName="Button",Button.__docgenInfo={description:"A component for the Vanilla button.",displayName:"Button",props:{appearance:{defaultValue:null,description:"The appearance of the button.",name:"appearance",required:!1,type:{name:"string"}},children:{defaultValue:null,description:"The content of the button.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the button element.",name:"className",required:!1,type:{name:"string"}},dense:{defaultValue:null,description:"Whether the button should have dense padding.",name:"dense",required:!1,type:{name:"boolean"}},disabled:{defaultValue:null,description:"Whether the button should be disabled.",name:"disabled",required:!1,type:{name:"boolean"}},element:{defaultValue:null,description:"Optional element or component to use instead of `button`.",name:"element",required:!1,type:{name:"ElementType | ComponentType

"}},hasIcon:{defaultValue:null,description:"Whether the button has an icon in the content.",name:"hasIcon",required:!1,type:{name:"boolean"}},inline:{defaultValue:null,description:"Whether the button should display inline.",name:"inline",required:!1,type:{name:"boolean"}},onClick:{defaultValue:null,description:"Function for handling button click event.",name:"onClick",required:!1,type:{name:"MouseEventHandler"}},small:{defaultValue:null,description:"Whether the button should be small.",name:"small",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/components/Button/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Button/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";var _Button__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/Button/Button.tsx");__webpack_require__.d(__webpack_exports__,"b",(function(){return _Button__WEBPACK_IMPORTED_MODULE_0__.b})),__webpack_require__.d(__webpack_exports__,"a",(function(){return _Button__WEBPACK_IMPORTED_MODULE_0__.a}))},"./src/components/Card/Card.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Card_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"header",(function(){return Card_stories_header})),__webpack_require__.d(__webpack_exports__,"highlighted",(function(){return Card_stories_highlighted})),__webpack_require__.d(__webpack_exports__,"overlay",(function(){return Card_stories_overlay}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["children","className","highlighted","overlay","thumbnail","title"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Card_Card=function Card(_ref){var children=_ref.children,className=_ref.className,highlighted=_ref.highlighted,overlay=_ref.overlay,thumbnail=_ref.thumbnail,title=_ref.title,props=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsxs)("div",Object.assign({className:classnames_default()(className,{"p-card":!highlighted&&!overlay,"p-card--highlighted":highlighted,"p-card--overlay":overlay})},props,{children:[thumbnail&&Object(jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[Object(jsx_runtime.jsx)("img",{className:"p-card__thumbnail",src:thumbnail,alt:""}),Object(jsx_runtime.jsx)("hr",{className:"u-sv1"})]}),title&&Object(jsx_runtime.jsx)("h3",{className:"p-card__title",children:title}),Object(jsx_runtime.jsx)("div",{className:"p-card__content",children:children})]}))};Card_Card.displayName="Card";var components_Card_Card=Card_Card;try{Card_Card.displayName="Card",Card_Card.__docgenInfo={description:"",displayName:"Card",props:{children:{defaultValue:null,description:"The content of the card.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping div element.",name:"className",required:!1,type:{name:"string"}},highlighted:{defaultValue:null,description:"Whether the card should have highlighted styling.",name:"highlighted",required:!1,type:{name:"boolean"}},overlay:{defaultValue:null,description:"Whether the card should have overlay styling.",name:"overlay",required:!1,type:{name:"boolean"}},thumbnail:{defaultValue:null,description:"The path to a thumbnail image.",name:"thumbnail",required:!1,type:{name:"string"}},title:{defaultValue:null,description:"The title of the card.",name:"title",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Card/Card.tsx#Card"]={docgenInfo:Card_Card.__docgenInfo,name:"Card",path:"src/components/Card/Card.tsx#Card"})}catch(__react_docgen_typescript_loader_error){}var Col=__webpack_require__("./src/components/Col/index.ts"),Row=__webpack_require__("./src/components/Row/index.ts"),Card_stories_excluded=["components"];function Card_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function Card_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var Card_stories_header=function header(){return Object(esm.b)(components_Card_Card,{title:"Raspberry Pi2 and Pi3",thumbnail:"https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png"},"For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world’s most beloved board.")};Card_stories_header.displayName="header",Card_stories_header.storyName="Header",Card_stories_header.parameters={storySource:{source:'\n For fun, for education and for profit, the RPi makes device development\n personal and entertaining. With support for both the Pi2 and the new Pi3,\n Ubuntu Core supports the world’s most beloved board.\n '}};var Card_stories_highlighted=function highlighted(){return Object(esm.b)(components_Card_Card,{title:"We'd love to have you join us as a partner.",highlighted:!0},"If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below.")};Card_stories_highlighted.displayName="highlighted",Card_stories_highlighted.storyName="Highlighted",Card_stories_highlighted.parameters={storySource:{source:"\n If you are an independent software vendor or bundle author, it's easy to\n apply. You can find out more below.\n "}};var Card_stories_overlay=function overlay(){return Object(esm.b)("section",{className:"p-strip--image is-light",style:{backgroundImage:"url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')"}},Object(esm.b)(Row.a,null,Object(esm.b)(Col.a,{size:6,emptyLarge:7},Object(esm.b)(components_Card_Card,{title:"Web browsing",overlay:!0},"Renowned for speed and security, Ubuntu and Firefox make browsing the web a pleasure again. Ubuntu also includes Chrome, Opera and other browsers that can be installed from the Ubuntu Software Centre."))))};Card_stories_overlay.displayName="overlay",Card_stories_overlay.storyName="Overlay",Card_stories_overlay.parameters={storySource:{source:'

\n \n \n \n Renowned for speed and security, Ubuntu and Firefox make browsing\n the web a pleasure again. Ubuntu also includes Chrome, Opera and\n other browsers that can be installed from the Ubuntu Software\n Centre.\n \n \n \n
'}};var componentMeta={title:"Card",component:components_Card_Card,argTypes:{children:{control:{type:"text"}},title:{control:{type:"text"}}},includeStories:["defaultStory","header","highlighted","overlay"]},mdxStoryNameToKey={Default:"defaultStory",Header:"header",Highlighted:"highlighted",Overlay:"overlay"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/CheckableInput/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return components_CheckableInput_CheckableInput}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),react=__webpack_require__("./node_modules/react/index.js"),useId=__webpack_require__("./src/hooks/useId.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["inputType","label","labelClassName","indeterminate"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 CheckableInput_CheckableInput=function CheckableInput(_ref){var inputType=_ref.inputType,label=_ref.label,labelClassName=_ref.labelClassName,_ref$indeterminate=_ref.indeterminate,indeterminate=void 0!==_ref$indeterminate&&_ref$indeterminate,checkboxProps=_objectWithoutProperties(_ref,_excluded),inputId=Object(useId.a)(),inputRef=Object(react.useRef)(null);return Object(react.useEffect)((function(){inputRef.current.indeterminate=indeterminate}),[indeterminate]),Object(jsx_runtime.jsxs)("label",{className:classnames_default()(labelClassName,"p-"+inputType+(checkboxProps.inline?"--inline":""),{"is-required":checkboxProps.required}),children:[Object(jsx_runtime.jsx)("input",Object.assign({"aria-labelledby":inputId,className:"p-"+inputType+"__input",ref:inputRef,type:inputType},checkboxProps)),Object(jsx_runtime.jsx)("span",{className:"p-"+inputType+"__label",id:inputId,children:label})]})};CheckableInput_CheckableInput.displayName="CheckableInput";var components_CheckableInput_CheckableInput=CheckableInput_CheckableInput;try{CheckableInput_CheckableInput.displayName="CheckableInput",CheckableInput_CheckableInput.__docgenInfo={description:"",displayName:"CheckableInput",props:{inputType:{defaultValue:null,description:"The type of the input element.",name:"inputType",required:!0,type:{name:"enum",value:[{value:'"checkbox"'},{value:'"radio"'}]}},label:{defaultValue:null,description:"The label for the input element.",name:"label",required:!0,type:{name:"ReactNode"}},labelClassName:{defaultValue:null,description:"Optional class(es) to pass to the label element.",name:"labelClassName",required:!1,type:{name:"string"}},indeterminate:{defaultValue:{value:"false"},description:"Whether the input element should display in indeterminate state.",name:"indeterminate",required:!1,type:{name:"boolean"}},inline:{defaultValue:null,description:"Ensures the input and the label text are properly aligned with other inline text.",name:"inline",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/CheckableInput/CheckableInput.tsx#CheckableInput"]={docgenInfo:CheckableInput_CheckableInput.__docgenInfo,name:"CheckableInput",path:"src/components/CheckableInput/CheckableInput.tsx#CheckableInput"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/CheckboxInput/CheckboxInput.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"children",(function(){return children})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"required",(function(){return required})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return inline})),__webpack_require__.d(__webpack_exports__,"indeterminate",(function(){return indeterminate}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_CheckboxInput__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/CheckboxInput/CheckboxInput.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var children=function children(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_CheckboxInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,null,"I agree to ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"http://ubuntu.com/legal"},"Terms and Conditions")),name:"CheckboxInput"})};children.displayName="children",children.storyName="Children",children.parameters={storySource:{source:'\n I agree to Terms and Conditions\n } name="CheckboxInput">'}};var disabled=function disabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_CheckboxInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Disabled",disabled:!0})};disabled.displayName="disabled",disabled.storyName="Disabled",disabled.parameters={storySource:{source:''}};var required=function required(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_CheckboxInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Required",required:!0})};required.displayName="required",required.storyName="Required",required.parameters={storySource:{source:''}};var inline=function inline(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_CheckboxInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Inline",inline:!0})};inline.displayName="inline",inline.storyName="Inline",inline.parameters={storySource:{source:''}};var indeterminate=function indeterminate(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_CheckboxInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Indeterminate",indeterminate:!0})};indeterminate.displayName="indeterminate",indeterminate.storyName="Indeterminate",indeterminate.parameters={storySource:{source:''}};var componentMeta={title:"CheckboxInput",component:_CheckboxInput__WEBPACK_IMPORTED_MODULE_8__.a,argTypes:{label:{control:{type:"text"},defaultValue:"CheckboxInput"},disabled:{control:{type:"boolean"}},required:{control:{type:"boolean"}},inline:{control:{type:"boolean"}},indeterminate:{control:{type:"boolean"}}},includeStories:["defaultStory","children","disabled","required","inline","indeterminate"]},mdxStoryNameToKey={Default:"defaultStory",Children:"children",Disabled:"disabled",Required:"required",Inline:"inline",Indeterminate:"indeterminate"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/CheckboxInput/CheckboxInput.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _CheckableInput__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/CheckableInput/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["label","indeterminate"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 CheckboxInput=function CheckboxInput(_ref){var label=_ref.label,_ref$indeterminate=_ref.indeterminate,indeterminate=void 0!==_ref$indeterminate&&_ref$indeterminate,checkboxProps=_objectWithoutProperties(_ref,_excluded);return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_CheckableInput__WEBPACK_IMPORTED_MODULE_5__.a,Object.assign({label:label,inputType:"checkbox",indeterminate:indeterminate},checkboxProps))};CheckboxInput.displayName="CheckboxInput",__webpack_exports__.a=CheckboxInput;try{CheckboxInput.displayName="CheckboxInput",CheckboxInput.__docgenInfo={description:"",displayName:"CheckboxInput",props:{label:{defaultValue:null,description:"The label for the input element.",name:"label",required:!0,type:{name:"ReactNode"}},inline:{defaultValue:null,description:"Ensures the input and the label text are properly aligned with other inline text.",name:"inline",required:!1,type:{name:"boolean"}},labelClassName:{defaultValue:null,description:"Optional class(es) to pass to the label element.",name:"labelClassName",required:!1,type:{name:"string"}},indeterminate:{defaultValue:{value:"false"},description:"Whether the input element should display in indeterminate state.",name:"indeterminate",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/CheckboxInput/CheckboxInput.tsx#CheckboxInput"]={docgenInfo:CheckboxInput.__docgenInfo,name:"CheckboxInput",path:"src/components/CheckboxInput/CheckboxInput.tsx#CheckboxInput"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Chip/Chip.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"leadValue",(function(){return leadValue})),__webpack_require__.d(__webpack_exports__,"appearance",(function(){return appearance})),__webpack_require__.d(__webpack_exports__,"dismissible",(function(){return dismissible}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_Chip__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/Chip/Chip.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var leadValue=function leadValue(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Chip__WEBPACK_IMPORTED_MODULE_8__.a,{lead:"Owner",value:"Bob"})};leadValue.displayName="leadValue",leadValue.storyName="Lead-value",leadValue.parameters={storySource:{source:''}};var appearance=function appearance(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Chip__WEBPACK_IMPORTED_MODULE_8__.a,{lead:"Type",value:"Positive",appearance:"positive"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Chip__WEBPACK_IMPORTED_MODULE_8__.a,{lead:"Type",value:"Negative",appearance:"negative"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Chip__WEBPACK_IMPORTED_MODULE_8__.a,{lead:"Type",value:"Information",appearance:"information"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Chip__WEBPACK_IMPORTED_MODULE_8__.a,{lead:"Type",value:"Caution",appearance:"caution"}))};appearance.storyName="Appearance",appearance.parameters={storySource:{source:'\n\n\n'}};var dismissible=function dismissible(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Chip__WEBPACK_IMPORTED_MODULE_8__.a,{lead:"Owner",value:"Bob",onDismiss:function onDismiss(){console.log("onDismiss called")}})};dismissible.displayName="dismissible",dismissible.storyName="Dismissible",dismissible.parameters={storySource:{source:' {\n console.log("onDismiss called");\n}} />'}};var componentMeta={title:"Chip",component:_Chip__WEBPACK_IMPORTED_MODULE_8__.a,includeStories:["defaultStory","leadValue","appearance","dismissible"]},mdxStoryNameToKey={Default:"defaultStory","Lead-value":"leadValue",Appearance:"appearance",Dismissible:"dismissible"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/Chip/Chip.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _utils__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/utils.ts"),classnames__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_6___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_6__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["appearance","lead","onClick","onDismiss","quoteValue","selected","subString","value"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Chip=function Chip(_ref){var _classNames,appearance=_ref.appearance,_ref$lead=_ref.lead,lead=void 0===_ref$lead?"":_ref$lead,onClick=_ref.onClick,onDismiss=_ref.onDismiss,quoteValue=_ref.quoteValue,selected=_ref.selected,_ref$subString=_ref.subString,subString=void 0===_ref$subString?"":_ref$subString,value=_ref.value,props=_objectWithoutProperties(_ref,_excluded),chipValue=Object(_utils__WEBPACK_IMPORTED_MODULE_5__.b)(value,subString).text,chipContent=Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment,{children:[lead&&Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("span",{className:"p-chip__lead",children:lead.toUpperCase()}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("span",{className:"p-chip__value",dangerouslySetInnerHTML:{__html:quoteValue?"'"+chipValue+"'":chipValue}})]}),chipClassName=classnames__WEBPACK_IMPORTED_MODULE_6___default()(((_classNames={})["p-chip--"+appearance]=!!appearance,_classNames["p-chip"]=!appearance,_classNames),props.className);return onDismiss?Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("span",Object.assign({},props,{className:chipClassName,children:[chipContent,Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button",{className:"p-chip__dismiss",onClick:onDismiss,type:"button",children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("i",{className:"p-icon--close",children:"Dismiss"})})]})):Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button",Object.assign({},props,{"aria-pressed":selected,className:chipClassName,onClick:onClick,onKeyDown:function onKeyDown(e){return function onKeyDown(e){" "!==e.key&&"Enter"!==e.key||"function"==typeof onClick&&onClick({lead:lead,value:value})}(e)},type:"button",children:chipContent}))};__webpack_exports__.a=Chip;try{Chip.displayName="Chip",Chip.__docgenInfo={description:"",displayName:"Chip",props:{appearance:{defaultValue:null,description:"The appearance of the chip.",name:"appearance",required:!1,type:{name:"enum",value:[{value:'"negative"'},{value:'"positive"'},{value:'"caution"'},{value:'"information"'}]}},lead:{defaultValue:{value:""},description:"The lead for the chip.",name:"lead",required:!1,type:{name:"string"}},onClick:{defaultValue:null,description:"Function for handling chip div click event.",name:"onClick",required:!1,type:{name:"(event: MouseEvent | { lead: string; value: string; }) => void"}},onDismiss:{defaultValue:null,description:"Function for handling dismissing a chip.",name:"onDismiss",required:!1,type:{name:"() => void"}},selected:{defaultValue:null,description:"Whether the chip is selected.",name:"selected",required:!1,type:{name:"boolean"}},subString:{defaultValue:{value:""},description:'A substring to emphasise if it is part of the chip\'s value,\ne.g. "sit" => poSITive',name:"subString",required:!1,type:{name:"string"}},quoteValue:{defaultValue:null,description:"Whether to wrap the value in quotation marks.",name:"quoteValue",required:!1,type:{name:"boolean"}},value:{defaultValue:null,description:"The value of the chip.",name:"value",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Chip/Chip.tsx#Chip"]={docgenInfo:Chip.__docgenInfo,name:"Chip",path:"src/components/Chip/Chip.tsx#Chip"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/CodeSnippet/CodeSnippet.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return CodeSnippet_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"title",(function(){return CodeSnippet_stories_title})),__webpack_require__.d(__webpack_exports__,"multipleBlocks",(function(){return CodeSnippet_stories_multipleBlocks})),__webpack_require__.d(__webpack_exports__,"appearance",(function(){return CodeSnippet_stories_appearance})),__webpack_require__.d(__webpack_exports__,"wrapLines",(function(){return CodeSnippet_stories_wrapLines})),__webpack_require__.d(__webpack_exports__,"dropdown",(function(){return CodeSnippet_stories_dropdown})),__webpack_require__.d(__webpack_exports__,"dropdowns",(function(){return CodeSnippet_stories_dropdowns})),__webpack_require__.d(__webpack_exports__,"dropdownsStacked",(function(){return CodeSnippet_stories_dropdownsStacked})),__webpack_require__.d(__webpack_exports__,"content",(function(){return CodeSnippet_stories_content}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),addon_docs_blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=(__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/classnames/index.js")),classnames_default=__webpack_require__.n(classnames),jsx_runtime=(__webpack_require__("./node_modules/core-js/modules/es.string.split.js"),__webpack_require__("./node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("./node_modules/react/jsx-runtime.js")),_excluded=["options","onChange"],_excluded2=["label","value"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 CodeSnippetDropdown(_ref){var options=_ref.options,onChange=_ref.onChange,props=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsx)("select",Object.assign({className:"p-code-snippet__dropdown",onChange:onChange},props,{children:options.map((function(_ref2){var label=_ref2.label,value=_ref2.value,props=_objectWithoutProperties(_ref2,_excluded2);return Object(jsx_runtime.jsx)("option",Object.assign({value:value},props,{children:label}),value+""||label)}))}))}CodeSnippetDropdown.displayName="CodeSnippetDropdown";try{CodeSnippetDropdown.displayName="CodeSnippetDropdown",CodeSnippetDropdown.__docgenInfo={description:"",displayName:"CodeSnippetDropdown",props:{onChange:{defaultValue:null,description:"Function for handling the select value changing.",name:"onChange",required:!1,type:{name:"ChangeEventHandler & FormEventHandler"}},options:{defaultValue:null,description:"Options to pass to the select.",name:"options",required:!0,type:{name:"DropdownOptionProps[]"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/CodeSnippet/CodeSnippetDropdown.tsx#CodeSnippetDropdown"]={docgenInfo:CodeSnippetDropdown.__docgenInfo,name:"CodeSnippetDropdown",path:"src/components/CodeSnippet/CodeSnippetDropdown.tsx#CodeSnippetDropdown"})}catch(__react_docgen_typescript_loader_error){}var CodeSnippetBlockAppearance_LINUX_PROMPT="linuxPrompt",CodeSnippetBlockAppearance_NUMBERED="numbered",CodeSnippetBlockAppearance_URL="url",CodeSnippetBlockAppearance_WINDOWS_PROMPT="windowsPrompt";function CodeSnippetBlock(_ref){var numberedCode,appearance=_ref.appearance,code=_ref.code,content=_ref.content,dropdowns=_ref.dropdowns,_ref$stacked=_ref.stacked,stacked=void 0!==_ref$stacked&&_ref$stacked,title=_ref.title,_ref$wrapLines=_ref.wrapLines,wrapLines=void 0!==_ref$wrapLines&&_ref$wrapLines,className="p-code-snippet__block",isNumbered=appearance===CodeSnippetBlockAppearance_NUMBERED,hasIcon=appearance===CodeSnippetBlockAppearance_LINUX_PROMPT||appearance===CodeSnippetBlockAppearance_WINDOWS_PROMPT||appearance===CodeSnippetBlockAppearance_URL;isNumbered?(className+="--numbered",numberedCode=code.split(/\r?\n/).map((function(line,i){return Object(jsx_runtime.jsxs)(react_default.a.Fragment,{children:[Object(jsx_runtime.jsx)("span",{className:"p-code-snippet__line",children:line}),"\n"]},"p-code-snippet__line-"+i)}))):hasIcon&&(className+="--icon");className=classnames_default()(className,{"is-windows-prompt":appearance===CodeSnippetBlockAppearance_WINDOWS_PROMPT,"is-url":appearance===CodeSnippetBlockAppearance_URL,"is-wrapped":wrapLines});var hasDropdowns=dropdowns&&dropdowns.length;return Object(jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(title||hasDropdowns)&&Object(jsx_runtime.jsxs)("div",{className:"p-code-snippet__header "+(stacked?"is-stacked":""),children:[Object(jsx_runtime.jsx)("h5",{className:"p-code-snippet__title",children:title}),hasDropdowns&&Object(jsx_runtime.jsx)("div",{className:"p-code-snippet__dropdowns",children:dropdowns.map((function(dropdown,i){return Object(react.createElement)(CodeSnippetDropdown,Object.assign({},dropdown,{key:"code-snippet-dropdown-"+i}))}))})]}),Object(jsx_runtime.jsx)("pre",{className:className,children:Object(jsx_runtime.jsx)("code",{children:isNumbered?numberedCode:code})}),content]})}try{CodeSnippetBlock.displayName="CodeSnippetBlock",CodeSnippetBlock.__docgenInfo={description:"",displayName:"CodeSnippetBlock",props:{appearance:{defaultValue:null,description:"The appearance of the code block.",name:"appearance",required:!1,type:{name:"enum",value:[{value:'"url"'},{value:'"linuxPrompt"'},{value:'"numbered"'},{value:'"windowsPrompt"'}]}},code:{defaultValue:null,description:"The code snippet to display.",name:"code",required:!0,type:{name:"string"}},content:{defaultValue:null,description:"Content to show below the code snippet.",name:"content",required:!1,type:{name:"ReactNode"}},dropdowns:{defaultValue:null,description:"A list of dropdowns to display in the header.",name:"dropdowns",required:!1,type:{name:"Props[]"}},stacked:{defaultValue:{value:"false"},description:"Whether the title should display stacked on top of the dropdowns.",name:"stacked",required:!1,type:{name:"boolean"}},title:{defaultValue:null,description:"The title of the code block.",name:"title",required:!1,type:{name:"string"}},wrapLines:{defaultValue:{value:"false"},description:"Whether to enable line wrapping inside the code block.",name:"wrapLines",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/CodeSnippet/CodeSnippetBlock.tsx#CodeSnippetBlock"]={docgenInfo:CodeSnippetBlock.__docgenInfo,name:"CodeSnippetBlock",path:"src/components/CodeSnippet/CodeSnippetBlock.tsx#CodeSnippetBlock"})}catch(__react_docgen_typescript_loader_error){}var CodeSnippet_excluded=["className","blocks"];function CodeSnippet_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function CodeSnippet_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 CodeSnippet(_ref){var className=_ref.className,blocks=_ref.blocks,props=CodeSnippet_objectWithoutProperties(_ref,CodeSnippet_excluded);return Object(jsx_runtime.jsx)("div",Object.assign({className:classnames_default()("p-code-snippet",{"is-bordered":blocks.some((function(block){return block.content}))},className)},props,{children:blocks.map((function(blockProps,i){return Object(jsx_runtime.jsx)(CodeSnippetBlock,Object.assign({},blockProps),"code-snippet-block-"+i)}))}))}CodeSnippet.displayName="CodeSnippet";try{CodeSnippet.displayName="CodeSnippet",CodeSnippet.__docgenInfo={description:"",displayName:"CodeSnippet",props:{className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping div element.",name:"className",required:!1,type:{name:"string"}},blocks:{defaultValue:null,description:"A list of code blocks to display.",name:"blocks",required:!0,type:{name:"Props[]"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/CodeSnippet/CodeSnippet.tsx#CodeSnippet"]={docgenInfo:CodeSnippet.__docgenInfo,name:"CodeSnippet",path:"src/components/CodeSnippet/CodeSnippet.tsx#CodeSnippet"})}catch(__react_docgen_typescript_loader_error){}var CodeSnippet_stories_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 layoutProps={};function MDXContent(_ref){var components=_ref.components,props=CodeSnippet_stories_objectWithoutProperties(_ref,CodeSnippet_stories_excluded);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(addon_docs_blocks.c,{title:"CodeSnippet",component:CodeSnippet,argTypes:{className:{control:{type:"text"}}},mdxType:"Meta"}),Object(esm.b)("h3",null,"Code snippet"),Object(esm.b)("p",null,"This is a ",Object(esm.b)("a",{parentName:"p",href:"https://reactjs.org/"},"React")," component for the Vanilla ",Object(esm.b)("a",{parentName:"p",href:"https://docs.vanillaframework.io/base/code#code-snippet"},"Code snippet"),"."),Object(esm.b)("h3",null,"Props"),Object(esm.b)(addon_docs_blocks.a,{of:CodeSnippet,mdxType:"ArgsTable"}),Object(esm.b)("h4",null,"Blocks"),Object(esm.b)("p",null,"Single ",Object(esm.b)("inlineCode",{parentName:"p"},"CodeSnippet")," component can render multiple separate code blocks. Blocks are provided as an array via the ",Object(esm.b)("inlineCode",{parentName:"p"},"blocks")," prop. Each block object defines values of props for each code block of the snippet:"),Object(esm.b)(addon_docs_blocks.a,{of:CodeSnippetBlock,mdxType:"ArgsTable"}),Object(esm.b)("h3",null,"Default"),Object(esm.b)(addon_docs_blocks.b,{mdxType:"Canvas"},Object(esm.b)(addon_docs_blocks.f,{name:"Default",mdxType:"Story"},Object(esm.b)(CodeSnippet,{blocks:[{code:"Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"}],mdxType:"CodeSnippet"}))),Object(esm.b)("h3",null,"Title"),Object(esm.b)("p",null,"Use the ",Object(esm.b)("inlineCode",{parentName:"p"},"title")," prop to add a title to a code block."),Object(esm.b)(addon_docs_blocks.b,{mdxType:"Canvas"},Object(esm.b)(addon_docs_blocks.f,{name:"Title",mdxType:"Story"},Object(esm.b)(CodeSnippet,{blocks:[{title:"Output",code:"Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"}],mdxType:"CodeSnippet"}))),Object(esm.b)("h3",null,"Multiple blocks"),Object(esm.b)("p",null,"Pass an array of ",Object(esm.b)("inlineCode",{parentName:"p"},"blocks")," to render multiple code blocks (for example input and output) within a single code snippet."),Object(esm.b)(addon_docs_blocks.b,{mdxType:"Canvas"},Object(esm.b)(addon_docs_blocks.f,{name:"Multiple blocks",mdxType:"Story"},Object(esm.b)(CodeSnippet,{blocks:[{title:"JavaScript",code:"console.log('Vanilla');"},{title:"Output",code:"Vanilla"}],mdxType:"CodeSnippet"}))),Object(esm.b)("h3",null,"Appearance"),Object(esm.b)("p",null,"Use ",Object(esm.b)("inlineCode",{parentName:"p"},"appearance")," to control the visual aspects of the code block. ",Object(esm.b)("inlineCode",{parentName:"p"},'"numbered"')," appearance will add line numbers in the code blocks.\nValues of ",Object(esm.b)("inlineCode",{parentName:"p"},'"linuxPrompt"'),", ",Object(esm.b)("inlineCode",{parentName:"p"},'"windowsPrompt"'),", ",Object(esm.b)("inlineCode",{parentName:"p"},'"url"')," will add a relevant icon in the code block."),Object(esm.b)(addon_docs_blocks.b,{mdxType:"Canvas"},Object(esm.b)(addon_docs_blocks.f,{name:"Appearance",mdxType:"Story"},Object(esm.b)(CodeSnippet,{blocks:[{title:"Install on Linux",appearance:CodeSnippetBlockAppearance_LINUX_PROMPT,code:"snap install toto"},{title:"Install on Windows",appearance:CodeSnippetBlockAppearance_WINDOWS_PROMPT,code:"snap install toto"},{title:"Get from the Store",appearance:CodeSnippetBlockAppearance_URL,code:"http://snapcraft.io/toto"}],mdxType:"CodeSnippet"}),Object(esm.b)(CodeSnippet,{blocks:[{appearance:CodeSnippetBlockAppearance_NUMBERED,code:'#!/bin/bash\nset -eu . $CONJURE_UP_SPELLSDIR/sdk/common.sh\nif [[ "$JUJU_PROVIDERTYPE" == "lxd" ]]; then\n debug "Running pre-deploy for $CONJURE_UP_SPELL"\n sed "s/##MODEL##/$JUJU_MODEL/" $(scriptPath)/lxd-profile.yaml | lxc profile edit "juju-$JUJU_MODEL" || exposeResult "Failed to set profile" $? "false"\nfi\nexposeResult "Successful pre-deploy." 0 "true"'}],mdxType:"CodeSnippet"}))),Object(esm.b)("h3",null,"Wrap lines"),Object(esm.b)("p",null,"Set ",Object(esm.b)("inlineCode",{parentName:"p"},"wrapLines")," prop to ",Object(esm.b)("inlineCode",{parentName:"p"},"true")," to enable line wrapping inside the code block."),Object(esm.b)(addon_docs_blocks.b,{mdxType:"Canvas"},Object(esm.b)(addon_docs_blocks.f,{name:"Wrap lines",mdxType:"Story"},Object(esm.b)(CodeSnippet,{blocks:[{appearance:CodeSnippetBlockAppearance_NUMBERED,wrapLines:!0,code:'#!/bin/bash\nset -eu . $CONJURE_UP_SPELLSDIR/sdk/common.sh\nif [[ "$JUJU_PROVIDERTYPE" == "lxd" ]]; then\n debug "Running pre-deploy for $CONJURE_UP_SPELL"\n sed "s/##MODEL##/$JUJU_MODEL/" $(scriptPath)/lxd-profile.yaml | lxc profile edit "juju-$JUJU_MODEL" || exposeResult "Failed to set profile" $? "false"\nfi\nexposeResult "Successful pre-deploy." 0 "true"'}],mdxType:"CodeSnippet"}))),Object(esm.b)("h3",null,"Dropdowns"),Object(esm.b)("p",null,"Dropdown select menus can be added to the headers of code blocks to allow users to choose one of the options. The dropdowns options are passed via ",Object(esm.b)("inlineCode",{parentName:"p"},"dropdowns")," property in the block options object."),Object(esm.b)("p",null,"Dropdown configuration object is structured as follows:"),Object(esm.b)(addon_docs_blocks.a,{of:CodeSnippetDropdown,mdxType:"ArgsTable"}),Object(esm.b)("p",null,"With the ",Object(esm.b)("inlineCode",{parentName:"p"},"options")," being an array of option properties compatible with the ",Object(esm.b)("inlineCode",{parentName:"p"},"Select")," options (",Object(esm.b)("inlineCode",{parentName:"p"},"[{ label: string, value: string | number }]"),")."),Object(esm.b)(addon_docs_blocks.b,{mdxType:"Canvas"},Object(esm.b)(addon_docs_blocks.f,{name:"Dropdown",mdxType:"Story"},(function(){var _useState2=_slicedToArray(Object(react.useState)("html"),2),lang=_useState2[0],setLang=_useState2[1];return Object(esm.b)(CodeSnippet,{blocks:[{code:{js:'console.log("Example 1");',css:".p-heading--2 { color: red; }",html:'

How to use code snippets

'}[lang],dropdowns:[{options:[{value:"js",label:"JS"},{value:"css",label:"CSS"},{value:"html",label:"HTML"}],value:lang,onChange:function onChange(event){setLang(event.target.value)}}]}],mdxType:"CodeSnippet"})}))),Object(esm.b)("p",null,"Multiple dropdowns can be passed in if needed."),Object(esm.b)(addon_docs_blocks.b,{mdxType:"Canvas"},Object(esm.b)(addon_docs_blocks.f,{name:"Dropdowns",mdxType:"Story"},(function(){var _useState4=_slicedToArray(Object(react.useState)("stable"),2),channel=_useState4[0],setChannel=_useState4[1],_useState6=_slicedToArray(Object(react.useState)("firefox"),2),snap=_useState6[0],setSnap=_useState6[1],code="sudo snap install "+snap+" "+("stable"===channel?"":"--"+channel);return Object(esm.b)(CodeSnippet,{blocks:[{title:"Install snap",code:code,dropdowns:[{options:[{value:"stable",label:"stable"},{value:"candidate",label:"candidate"},{value:"beta",label:"beta"},{value:"edge",label:"edge"}],value:channel,onChange:function onChange(event){setChannel(event.target.value)}},{options:[{value:"firefox",label:"Firefox"},{value:"gimp",label:"Gimp"},{value:"vlc",label:"VLC"}],value:snap,onChange:function onChange(event){setSnap(event.target.value)}}]}],mdxType:"CodeSnippet"})}))),Object(esm.b)("p",null,"If multiple dropdowns may overlap with long title you can use ",Object(esm.b)("inlineCode",{parentName:"p"},"stacked")," variant, by setting the relevant property on code block options."),Object(esm.b)(addon_docs_blocks.b,{mdxType:"Canvas"},Object(esm.b)(addon_docs_blocks.f,{name:"DropdownsStacked",mdxType:"Story"},(function(){var _useState8=_slicedToArray(Object(react.useState)("stable"),2),channel=_useState8[0],setChannel=_useState8[1],_useState10=_slicedToArray(Object(react.useState)("firefox"),2),snap=_useState10[0],setSnap=_useState10[1],code="sudo snap install "+snap+" "+("stable"===channel?"":"--"+channel);return Object(esm.b)(CodeSnippet,{blocks:[{title:"Install Firefox, Gimp or VLC as a snap from different channels using command line",code:code,stacked:!0,dropdowns:[{options:[{value:"stable",label:"stable"},{value:"candidate",label:"candidate"},{value:"beta",label:"beta"},{value:"edge",label:"edge"}],value:channel,onChange:function onChange(event){setChannel(event.target.value)}},{options:[{value:"firefox",label:"Firefox"},{value:"gimp",label:"Gimp"},{value:"vlc",label:"VLC"}],value:snap,onChange:function onChange(event){setSnap(event.target.value)}}]}],mdxType:"CodeSnippet"})}))),Object(esm.b)("h3",null,"Content"),Object(esm.b)("p",null,"Custom elements can be passed to a CodeBlock via the ",Object(esm.b)("inlineCode",{parentName:"p"},"content")," prop. In these cases, a border will be added around the entire code snippet to visually associate the content with the code block."),Object(esm.b)(addon_docs_blocks.b,{mdxType:"Canvas"},Object(esm.b)(addon_docs_blocks.f,{name:"Content",mdxType:"Story"},Object(esm.b)(CodeSnippet,{blocks:[{title:"With embedded iframe",code:"",content:Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)("iframe",{src:"/iframe.html?id=button--base&viewMode=story"}))}],mdxType:"CodeSnippet"}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var CodeSnippet_stories_defaultStory=function defaultStory(){return Object(esm.b)(CodeSnippet,{blocks:[{code:"Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"}]})};CodeSnippet_stories_defaultStory.displayName="defaultStory",CodeSnippet_stories_defaultStory.storyName="Default",CodeSnippet_stories_defaultStory.parameters={storySource:{source:''}};var CodeSnippet_stories_title=function title(){return Object(esm.b)(CodeSnippet,{blocks:[{title:"Output",code:"Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"}]})};CodeSnippet_stories_title.displayName="title",CodeSnippet_stories_title.storyName="Title",CodeSnippet_stories_title.parameters={storySource:{source:''}};var CodeSnippet_stories_multipleBlocks=function multipleBlocks(){return Object(esm.b)(CodeSnippet,{blocks:[{title:"JavaScript",code:"console.log('Vanilla');"},{title:"Output",code:"Vanilla"}]})};CodeSnippet_stories_multipleBlocks.displayName="multipleBlocks",CodeSnippet_stories_multipleBlocks.storyName="Multiple blocks",CodeSnippet_stories_multipleBlocks.parameters={storySource:{source:''}};var CodeSnippet_stories_appearance=function appearance(){return Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)(CodeSnippet,{blocks:[{title:"Install on Linux",appearance:CodeSnippetBlockAppearance_LINUX_PROMPT,code:"snap install toto"},{title:"Install on Windows",appearance:CodeSnippetBlockAppearance_WINDOWS_PROMPT,code:"snap install toto"},{title:"Get from the Store",appearance:CodeSnippetBlockAppearance_URL,code:"http://snapcraft.io/toto"}]}),Object(esm.b)(CodeSnippet,{blocks:[{appearance:CodeSnippetBlockAppearance_NUMBERED,code:'#!/bin/bash\nset -eu . $CONJURE_UP_SPELLSDIR/sdk/common.sh\nif [[ "$JUJU_PROVIDERTYPE" == "lxd" ]]; then\n debug "Running pre-deploy for $CONJURE_UP_SPELL"\n sed "s/##MODEL##/$JUJU_MODEL/" $(scriptPath)/lxd-profile.yaml | lxc profile edit "juju-$JUJU_MODEL" || exposeResult "Failed to set profile" $? "false"\nfi\nexposeResult "Successful pre-deploy." 0 "true"'}]}))};CodeSnippet_stories_appearance.storyName="Appearance",CodeSnippet_stories_appearance.parameters={storySource:{source:'\n'}};var CodeSnippet_stories_wrapLines=function wrapLines(){return Object(esm.b)(CodeSnippet,{blocks:[{appearance:CodeSnippetBlockAppearance_NUMBERED,wrapLines:!0,code:'#!/bin/bash\nset -eu . $CONJURE_UP_SPELLSDIR/sdk/common.sh\nif [[ "$JUJU_PROVIDERTYPE" == "lxd" ]]; then\n debug "Running pre-deploy for $CONJURE_UP_SPELL"\n sed "s/##MODEL##/$JUJU_MODEL/" $(scriptPath)/lxd-profile.yaml | lxc profile edit "juju-$JUJU_MODEL" || exposeResult "Failed to set profile" $? "false"\nfi\nexposeResult "Successful pre-deploy." 0 "true"'}]})};CodeSnippet_stories_wrapLines.displayName="wrapLines",CodeSnippet_stories_wrapLines.storyName="Wrap lines",CodeSnippet_stories_wrapLines.parameters={storySource:{source:''}};var CodeSnippet_stories_dropdown=function dropdown(){var _useState12=_slicedToArray(Object(react.useState)("html"),2),lang=_useState12[0],setLang=_useState12[1];return Object(esm.b)(CodeSnippet,{blocks:[{code:{js:'console.log("Example 1");',css:".p-heading--2 { color: red; }",html:'

How to use code snippets

'}[lang],dropdowns:[{options:[{value:"js",label:"JS"},{value:"css",label:"CSS"},{value:"html",label:"HTML"}],value:lang,onChange:function onChange(event){setLang(event.target.value)}}]}]})};CodeSnippet_stories_dropdown.displayName="dropdown",CodeSnippet_stories_dropdown.storyName="Dropdown",CodeSnippet_stories_dropdown.parameters={storySource:{source:'() => {\n const [lang, setLang] = useState("html");\n const code = {\n js: `console.log("Example 1");`,\n css: `.p-heading--2 { color: red; }`,\n html: `

How to use code snippets

`\n };\n return {\n setLang(event.target.value);\n }\n }]\n }]} />;\n}'}};var CodeSnippet_stories_dropdowns=function dropdowns(){var _useState14=_slicedToArray(Object(react.useState)("stable"),2),channel=_useState14[0],setChannel=_useState14[1],_useState16=_slicedToArray(Object(react.useState)("firefox"),2),snap=_useState16[0],setSnap=_useState16[1],code="sudo snap install "+snap+" "+("stable"===channel?"":"--"+channel);return Object(esm.b)(CodeSnippet,{blocks:[{title:"Install snap",code:code,dropdowns:[{options:[{value:"stable",label:"stable"},{value:"candidate",label:"candidate"},{value:"beta",label:"beta"},{value:"edge",label:"edge"}],value:channel,onChange:function onChange(event){setChannel(event.target.value)}},{options:[{value:"firefox",label:"Firefox"},{value:"gimp",label:"Gimp"},{value:"vlc",label:"VLC"}],value:snap,onChange:function onChange(event){setSnap(event.target.value)}}]}]})};CodeSnippet_stories_dropdowns.displayName="dropdowns",CodeSnippet_stories_dropdowns.storyName="Dropdowns",CodeSnippet_stories_dropdowns.parameters={storySource:{source:'() => {\n const [channel, setChannel] = useState("stable");\n const [snap, setSnap] = useState("firefox");\n const code = `sudo snap install ${snap} ${channel === "stable" ? "" : "--" + channel}`;\n return {\n setChannel(event.target.value);\n }\n }, {\n options: [{\n value: "firefox",\n label: "Firefox"\n }, {\n value: "gimp",\n label: "Gimp"\n }, {\n value: "vlc",\n label: "VLC"\n }],\n value: snap,\n onChange: event => {\n setSnap(event.target.value);\n }\n }]\n }]} />;\n}'}};var CodeSnippet_stories_dropdownsStacked=function dropdownsStacked(){var _useState18=_slicedToArray(Object(react.useState)("stable"),2),channel=_useState18[0],setChannel=_useState18[1],_useState20=_slicedToArray(Object(react.useState)("firefox"),2),snap=_useState20[0],setSnap=_useState20[1],code="sudo snap install "+snap+" "+("stable"===channel?"":"--"+channel);return Object(esm.b)(CodeSnippet,{blocks:[{title:"Install Firefox, Gimp or VLC as a snap from different channels using command line",code:code,stacked:!0,dropdowns:[{options:[{value:"stable",label:"stable"},{value:"candidate",label:"candidate"},{value:"beta",label:"beta"},{value:"edge",label:"edge"}],value:channel,onChange:function onChange(event){setChannel(event.target.value)}},{options:[{value:"firefox",label:"Firefox"},{value:"gimp",label:"Gimp"},{value:"vlc",label:"VLC"}],value:snap,onChange:function onChange(event){setSnap(event.target.value)}}]}]})};CodeSnippet_stories_dropdownsStacked.displayName="dropdownsStacked",CodeSnippet_stories_dropdownsStacked.storyName="DropdownsStacked",CodeSnippet_stories_dropdownsStacked.parameters={storySource:{source:'() => {\n const [channel, setChannel] = useState("stable");\n const [snap, setSnap] = useState("firefox");\n const code = `sudo snap install ${snap} ${channel === "stable" ? "" : "--" + channel}`;\n return {\n setChannel(event.target.value);\n }\n }, {\n options: [{\n value: "firefox",\n label: "Firefox"\n }, {\n value: "gimp",\n label: "Gimp"\n }, {\n value: "vlc",\n label: "VLC"\n }],\n value: snap,\n onChange: event => {\n setSnap(event.target.value);\n }\n }]\n }]} />;\n}'}};var CodeSnippet_stories_content=function content(){return Object(esm.b)(CodeSnippet,{blocks:[{title:"With embedded iframe",code:"",content:Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)("iframe",{src:"/iframe.html?id=button--base&viewMode=story"}))}]})};CodeSnippet_stories_content.displayName="content",CodeSnippet_stories_content.storyName="Content",CodeSnippet_stories_content.parameters={storySource:{source:'",\n content: <>\n \n \n}]} />'}};var componentMeta={title:"CodeSnippet",component:CodeSnippet,argTypes:{className:{control:{type:"text"}}},includeStories:["defaultStory","title","multipleBlocks","appearance","wrapLines","dropdown","dropdowns","dropdownsStacked","content"]},mdxStoryNameToKey={Default:"defaultStory",Title:"title","Multiple blocks":"multipleBlocks",Appearance:"appearance","Wrap lines":"wrapLines",Dropdown:"dropdown",Dropdowns:"dropdowns",DropdownsStacked:"dropdownsStacked",Content:"content"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Col/Col.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"grid",(function(){return grid})),__webpack_require__.d(__webpack_exports__,"nestedColumns",(function(){return nestedColumns})),__webpack_require__.d(__webpack_exports__,"emptyColumns",(function(){return emptyColumns}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_Col__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/Col/Col.tsx"),_Row__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./src/components/Row/index.ts"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i {\n return
\n \n \n \n
;\n}'}};var grid=function grid(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:12},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-12"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:11},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-11")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:1},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-1"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:10},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-10")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:2},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-2"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:9},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-9")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:3},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-9"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:8},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-8")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:4},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-4"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:7},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-7")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:5},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-5"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:6},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-6")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:6},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-6"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:5},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-5")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:7},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-7"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:4},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-4")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:8},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-8"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:3},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-3")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:9},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-9"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:2},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-2")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:10},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-10"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:1},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-1")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:11},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",null,".col-11"))))};grid.displayName="grid",grid.storyName="Grid",grid.parameters={storySource:{source:'
\n \n \n .col-12\n \n \n \n \n .col-11\n \n \n .col-1\n \n \n \n \n .col-10\n \n \n .col-2\n \n \n \n \n .col-9\n \n \n .col-9\n \n \n \n \n .col-8\n \n \n .col-4\n \n \n \n \n .col-7\n \n \n .col-5\n \n \n \n \n .col-6\n \n \n .col-6\n \n \n \n \n .col-5\n \n \n .col-7\n \n \n \n \n .col-4\n \n \n .col-8\n \n \n \n \n .col-3\n \n \n .col-9\n \n \n \n \n .col-2\n \n \n .col-10\n \n \n \n \n .col-1\n \n \n .col-11\n \n \n
'}};var nestedColumns=function nestedColumns(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{small:4,medium:6,size:12},"col-small-4 .col-medium-6 .col-12",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{small:3,medium:3,size:9},"col-small-3 .col-medium-3 .col-9",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{small:1,medium:1,size:2},"col-small-1 col-medium-1 col-2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{small:1,medium:1,size:3},"col-small-1 col-medium-1 col-2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{small:1,medium:1,size:3},"col-small-1 col-medium-1 col-2"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{small:1,medium:3,size:3},"col-small-2 col-medium-3 col-3")))))};nestedColumns.displayName="nestedColumns",nestedColumns.storyName="Nested columns",nestedColumns.parameters={storySource:{source:'
\n \n \n col-small-4 .col-medium-6 .col-12\n \n \n col-small-3 .col-medium-3 .col-9\n \n \n col-small-1 col-medium-1 col-2\n \n \n col-small-1 col-medium-1 col-2\n \n \n col-small-1 col-medium-1 col-2\n \n \n \n \n col-small-2 col-medium-3 col-3\n \n \n \n \n
'}};var emptyColumns=function emptyColumns(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:8},".col-8"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:4},".col-4")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:7},".col-7"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:4},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:3,emptyLarge:2},"col-3 col-start-large-2 inside col-4")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:7},".col-7"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:4},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:3},"col-3 inside col-4")))))};emptyColumns.displayName="emptyColumns",emptyColumns.storyName="Empty columns",emptyColumns.parameters={storySource:{source:'
\n \n .col-8\n .col-4\n \n \n .col-7\n \n \n \n col-3 col-start-large-2 inside col-4\n \n \n \n \n \n .col-7\n \n \n col-3 inside col-4\n \n \n \n
'}};var componentMeta={title:"Col",component:_Col__WEBPACK_IMPORTED_MODULE_8__.a,argTypes:{children:{control:{type:"text"}},size:{control:{type:"range",min:1,max:12,step:1}}},includeStories:["defaultStory","grid","nestedColumns","emptyColumns"]},mdxStoryNameToKey={Default:"defaultStory",Grid:"grid","Nested columns":"nestedColumns","Empty columns":"emptyColumns"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/Col/Col.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.string.small.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_5__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/react/jsx-runtime.js")),_excluded=["children","className","element","emptyLarge","emptyMedium","emptySmall","large","medium","size","small"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Col=function Col(_ref){var _classNames,children=_ref.children,className=_ref.className,_ref$element=_ref.element,Component=void 0===_ref$element?"div":_ref$element,emptyLarge=_ref.emptyLarge,emptyMedium=_ref.emptyMedium,emptySmall=_ref.emptySmall,large=_ref.large,medium=_ref.medium,size=_ref.size,small=_ref.small,props=_objectWithoutProperties(_ref,_excluded);return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(Component,Object.assign({className:classnames__WEBPACK_IMPORTED_MODULE_5___default()(className,"col-"+size,(_classNames={},_classNames["col-small-"+small]=!!small,_classNames["col-medium-"+medium]=!!medium,_classNames["col-large-"+large]=!!large,_classNames["col-start-small-"+emptySmall]=!!emptySmall,_classNames["col-start-medium-"+emptyMedium]=!!emptyMedium,_classNames["col-start-large-"+emptyLarge]=!!emptyLarge,_classNames))},props,{children:children}))};Col.displayName="Col",__webpack_exports__.a=Col;try{Col.displayName="Col",Col.__docgenInfo={description:"",displayName:"Col",props:{children:{defaultValue:null,description:"The content of the column.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping element.",name:"className",required:!1,type:{name:"string"}},element:{defaultValue:null,description:'Optional element type to give the wrapper if not "div".',name:"element",required:!1,type:{name:"ElementType"}},emptyLarge:{defaultValue:null,description:"The number of columns to skip before starting on large screens.",name:"emptyLarge",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"},{value:"5"},{value:"6"},{value:"7"},{value:"8"},{value:"9"},{value:"10"},{value:"11"},{value:"12"}]}},emptyMedium:{defaultValue:null,description:"The number of columns to skip before starting on medium screens.",name:"emptyMedium",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"},{value:"5"},{value:"6"},{value:"7"},{value:"8"},{value:"9"},{value:"10"},{value:"11"},{value:"12"}]}},emptySmall:{defaultValue:null,description:"The number of columns to skip before starting on small screens.",name:"emptySmall",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"},{value:"5"},{value:"6"},{value:"7"},{value:"8"},{value:"9"},{value:"10"},{value:"11"},{value:"12"}]}},large:{defaultValue:null,description:"Override for the number of columns the content occupies on large screens.",name:"large",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"},{value:"5"},{value:"6"},{value:"7"},{value:"8"},{value:"9"},{value:"10"},{value:"11"},{value:"12"}]}},medium:{defaultValue:null,description:"Override for the number of columns the content occupies on medium screens.",name:"medium",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"},{value:"5"},{value:"6"},{value:"7"},{value:"8"},{value:"9"},{value:"10"},{value:"11"},{value:"12"}]}},size:{defaultValue:null,description:"The number of columns the content occupies.",name:"size",required:!0,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"},{value:"5"},{value:"6"},{value:"7"},{value:"8"},{value:"9"},{value:"10"},{value:"11"},{value:"12"}]}},small:{defaultValue:null,description:"Override for the number of columns the content occupies on small screens.",name:"small",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"},{value:"5"},{value:"6"},{value:"7"},{value:"8"},{value:"9"},{value:"10"},{value:"11"},{value:"12"}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Col/Col.tsx#Col"]={docgenInfo:Col.__docgenInfo,name:"Col",path:"src/components/Col/Col.tsx#Col"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Col/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";var _Col__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/Col/Col.tsx");__webpack_require__.d(__webpack_exports__,"a",(function(){return _Col__WEBPACK_IMPORTED_MODULE_0__.a}))},"./src/components/ContextualMenu/ContextualMenu.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"toggle",(function(){return toggle}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_ContextualMenu__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/ContextualMenu/ContextualMenu.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i
\n \n
'}};var toggle=Template.bind({});toggle.storyName="Toggle",toggle.args={links:[{children:"Link 1",onClick:function onClick(){}},{children:"Link 2",onClick:function onClick(){}}],hasToggleIcon:!0,position:"right",toggleLabel:"Click me!"},toggle.parameters={storySource:{source:'args =>
\n \n
'}};var componentMeta={title:"ContextualMenu",component:_ContextualMenu__WEBPACK_IMPORTED_MODULE_8__.a,argTypes:{children:{control:{disable:!0}},links:{control:{disable:!0}}},includeStories:["defaultStory","toggle"]},mdxStoryNameToKey={Default:"defaultStory",Toggle:"toggle"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/ContextualMenu/ContextualMenu.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),react=__webpack_require__("./node_modules/react/index.js"),usePortal=__webpack_require__("./node_modules/react-useportal/dist/usePortal.js"),usePortal_default=__webpack_require__.n(usePortal),hooks=__webpack_require__("./src/hooks/index.ts"),Button=__webpack_require__("./src/components/Button/index.ts"),jsx_runtime=(__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/react/jsx-runtime.js")),_excluded=["children","className","onClick"],_excluded2=["adjustedPosition","autoAdjust","closePortal","constrainPanelWidth","dropdownClassName","dropdownContent","id","isOpen","links","position","positionCoords","positionNode","setAdjustedPosition","wrapperClass"];function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 getPositionStyle=function getPositionStyle(position,positionCoords,constrainPanelWidth){if(!positionCoords)return null;var height=positionCoords.height,left=positionCoords.left,top=positionCoords.top,width=positionCoords.width,topPos=top+height+(window.scrollY||0),leftPos=left;switch(position){case"left":leftPos=left;break;case"center":leftPos=left+width/2;break;case"right":leftPos=left+width}return Object.assign({position:"absolute",left:leftPos,top:topPos},constrainPanelWidth?{width:width}:null)},adjustForWindow=function adjustForWindow(position,fitsWindow){var newPosition=position;return fitsWindow.fromRight.fitsLeft||"right"!==newPosition||(newPosition="left"),fitsWindow.fromLeft.fitsRight||"left"!==newPosition||(newPosition="right"),fitsWindow.fromLeft.fitsRight||fitsWindow.fromRight.fitsLeft||"left"!==newPosition&&"right"!==newPosition||(newPosition="center"),"center"!==newPosition||fitsWindow.fromCenter.fitsCentered.fitsRight&&fitsWindow.fromCenter.fitsCentered.fitsLeft||(fitsWindow.fromLeft.fitsRight&&(newPosition="left"),fitsWindow.fromRight.fitsLeft&&(newPosition="right")),newPosition},ContextualMenuDropdown_generateLink=function generateLink(link,key,closePortal){var children=link.children,className=link.className,onClick=link.onClick,props=_objectWithoutProperties(link,_excluded);return Object(jsx_runtime.jsx)(Button.b,Object.assign({className:classnames_default()("p-contextual-menu__link",className),onClick:onClick?function(evt){closePortal(evt.nativeEvent),onClick(evt)}:null},props,{children:children}),key)};ContextualMenuDropdown_generateLink.displayName="generateLink";var ContextualMenuDropdown_ContextualMenuDropdown=function ContextualMenuDropdown(_ref){var adjustedPosition=_ref.adjustedPosition,autoAdjust=_ref.autoAdjust,closePortal=_ref.closePortal,constrainPanelWidth=_ref.constrainPanelWidth,dropdownClassName=_ref.dropdownClassName,dropdownContent=_ref.dropdownContent,id=_ref.id,isOpen=_ref.isOpen,links=_ref.links,position=_ref.position,positionCoords=_ref.positionCoords,positionNode=_ref.positionNode,setAdjustedPosition=_ref.setAdjustedPosition,wrapperClass=_ref.wrapperClass,props=_objectWithoutProperties(_ref,_excluded2),dropdown=Object(react.useRef)(),_useState2=_slicedToArray(Object(react.useState)(getPositionStyle(adjustedPosition,positionCoords,constrainPanelWidth)),2),positionStyle=_useState2[0],setPositionStyle=_useState2[1],updatePositionStyle=Object(react.useCallback)((function(){setPositionStyle(getPositionStyle(adjustedPosition,positionCoords,constrainPanelWidth))}),[adjustedPosition,positionCoords,constrainPanelWidth]),onUpdateWindowFitment=Object(react.useCallback)((function(fitsWindow){setAdjustedPosition(adjustForWindow(position,fitsWindow))}),[position,setAdjustedPosition]);return Object(hooks.g)(dropdown.current,positionNode,onUpdateWindowFitment,0,isOpen&&autoAdjust),Object(react.useEffect)((function(){updatePositionStyle()}),[adjustedPosition,updatePositionStyle]),Object(jsx_runtime.jsx)("span",Object.assign({className:wrapperClass,style:positionStyle},props,{children:Object(jsx_runtime.jsx)("span",{className:classnames_default()("p-contextual-menu__dropdown",dropdownClassName),id:id,"aria-hidden":isOpen?"false":"true","aria-label":"submenu",ref:dropdown,style:constrainPanelWidth&&null!=positionStyle&&positionStyle.width?{width:positionStyle.width,minWidth:0,maxWidth:"none"}:null,children:dropdownContent||links.map((function(item,i){return Array.isArray(item)?Object(jsx_runtime.jsx)("span",{className:"p-contextual-menu__group",children:item.map((function(link,j){return ContextualMenuDropdown_generateLink(link,j,closePortal)}))},i):"string"==typeof item?Object(jsx_runtime.jsx)("div",{className:"p-contextual-menu__non-interactive",children:item},i):ContextualMenuDropdown_generateLink(item,i,closePortal)}))})}))};ContextualMenuDropdown_ContextualMenuDropdown.displayName="ContextualMenuDropdown";var ContextualMenu_ContextualMenuDropdown_ContextualMenuDropdown=ContextualMenuDropdown_ContextualMenuDropdown;try{adjustForWindow.displayName="adjustForWindow",adjustForWindow.__docgenInfo={description:"Calculate the adjusted position in relation to the window.",displayName:"adjustForWindow",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.tsx#adjustForWindow"]={docgenInfo:adjustForWindow.__docgenInfo,name:"adjustForWindow",path:"src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.tsx#adjustForWindow"})}catch(__react_docgen_typescript_loader_error){}try{ContextualMenuDropdown_ContextualMenuDropdown.displayName="ContextualMenuDropdown",ContextualMenuDropdown_ContextualMenuDropdown.__docgenInfo={description:"",displayName:"ContextualMenuDropdown",props:{adjustedPosition:{defaultValue:null,description:"",name:"adjustedPosition",required:!1,type:{name:"enum",value:[{value:'"left"'},{value:'"right"'},{value:'"center"'}]}},autoAdjust:{defaultValue:null,description:"",name:"autoAdjust",required:!1,type:{name:"boolean"}},closePortal:{defaultValue:null,description:"",name:"closePortal",required:!1,type:{name:"(evt?: MouseEvent) => void"}},constrainPanelWidth:{defaultValue:null,description:"",name:"constrainPanelWidth",required:!1,type:{name:"boolean"}},dropdownClassName:{defaultValue:null,description:"",name:"dropdownClassName",required:!1,type:{name:"string"}},dropdownContent:{defaultValue:null,description:"",name:"dropdownContent",required:!1,type:{name:"ReactNode"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},isOpen:{defaultValue:null,description:"",name:"isOpen",required:!1,type:{name:"boolean"}},links:{defaultValue:null,description:"",name:"links",required:!1,type:{name:"MenuLink[]"}},position:{defaultValue:null,description:"",name:"position",required:!1,type:{name:"enum",value:[{value:'"left"'},{value:'"right"'},{value:'"center"'}]}},positionCoords:{defaultValue:null,description:"",name:"positionCoords",required:!1,type:{name:"ClientRect"}},positionNode:{defaultValue:null,description:"",name:"positionNode",required:!1,type:{name:"HTMLElement"}},setAdjustedPosition:{defaultValue:null,description:"",name:"setAdjustedPosition",required:!1,type:{name:"(position: Position) => void"}},wrapperClass:{defaultValue:null,description:"",name:"wrapperClass",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.tsx#ContextualMenuDropdown"]={docgenInfo:ContextualMenuDropdown_ContextualMenuDropdown.__docgenInfo,name:"ContextualMenuDropdown",path:"src/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.tsx#ContextualMenuDropdown"})}catch(__react_docgen_typescript_loader_error){}var useId=__webpack_require__("./src/hooks/useId.ts"),ContextualMenu_excluded=["autoAdjust","children","className","closeOnEsc","closeOnOutsideClick","constrainPanelWidth","dropdownClassName","dropdownProps","hasToggleIcon","links","onToggleMenu","position","positionNode","toggleAppearance","toggleClassName","toggleDisabled","toggleLabel","toggleLabelFirst","toggleProps","visible"];function ContextualMenu_slicedToArray(arr,i){return function ContextualMenu_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function ContextualMenu_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function ContextualMenu_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return ContextualMenu_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return ContextualMenu_arrayLikeToArray(o,minLen)}(arr,i)||function ContextualMenu_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ContextualMenu_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 getPositionNode=function getPositionNode(wrapper,positionNode){return positionNode||(wrapper?wrapper.querySelector(".p-contextual-menu__toggle")||wrapper:null)},ContextualMenu_ContextualMenu=function ContextualMenu(_ref){var _classNames,_ref$autoAdjust=_ref.autoAdjust,autoAdjust=void 0===_ref$autoAdjust||_ref$autoAdjust,children=_ref.children,className=_ref.className,_ref$closeOnEsc=_ref.closeOnEsc,closeOnEsc=void 0===_ref$closeOnEsc||_ref$closeOnEsc,_ref$closeOnOutsideCl=_ref.closeOnOutsideClick,closeOnOutsideClick=void 0===_ref$closeOnOutsideCl||_ref$closeOnOutsideCl,constrainPanelWidth=_ref.constrainPanelWidth,dropdownClassName=_ref.dropdownClassName,dropdownProps=_ref.dropdownProps,hasToggleIcon=_ref.hasToggleIcon,links=_ref.links,onToggleMenu=_ref.onToggleMenu,_ref$position=_ref.position,position=void 0===_ref$position?"right":_ref$position,positionNode=_ref.positionNode,toggleAppearance=_ref.toggleAppearance,toggleClassName=_ref.toggleClassName,toggleDisabled=_ref.toggleDisabled,toggleLabel=_ref.toggleLabel,_ref$toggleLabelFirst=_ref.toggleLabelFirst,toggleLabelFirst=void 0===_ref$toggleLabelFirst||_ref$toggleLabelFirst,toggleProps=_ref.toggleProps,_ref$visible=_ref.visible,visible=void 0!==_ref$visible&&_ref$visible,wrapperProps=ContextualMenu_objectWithoutProperties(_ref,ContextualMenu_excluded),id=Object(useId.a)(),wrapper=Object(react.useRef)(),_useState2=ContextualMenu_slicedToArray(Object(react.useState)(),2),positionCoords=_useState2[0],setPositionCoords=_useState2[1],_useState4=ContextualMenu_slicedToArray(Object(react.useState)(position),2),adjustedPosition=_useState4[0],setAdjustedPosition=_useState4[1],hasToggle=hasToggleIcon||toggleLabel,updatePositionCoords=Object(react.useCallback)((function(){var parent=getPositionNode(wrapper.current,positionNode);if(!parent)return null;setPositionCoords(parent.getBoundingClientRect())}),[wrapper,positionNode]),_usePortal=usePortal_default()({closeOnEsc:closeOnEsc,closeOnOutsideClick:closeOnOutsideClick,isOpen:visible,onOpen:function onOpen(){onToggleMenu&&onToggleMenu(!0),updatePositionCoords()},onClose:function onClose(){onToggleMenu&&onToggleMenu(!1)}}),openPortal=_usePortal.openPortal,closePortal=_usePortal.closePortal,isOpen=_usePortal.isOpen,Portal=_usePortal.Portal,ref=_usePortal.ref,previousVisible=Object(hooks.f)(visible),labelNode=toggleLabel?Object(jsx_runtime.jsx)("span",{children:toggleLabel}):null,wrapperClass=classnames_default()(className,"p-contextual-menu",((_classNames={})["p-contextual-menu--"+adjustedPosition]="right"!==adjustedPosition,_classNames)),wrapperRef=Object(react.useCallback)((function(node){wrapper.current=node,null!==node&&updatePositionCoords()}),[updatePositionCoords]);Object(react.useEffect)((function(){visible!==previousVisible&&(visible&&!isOpen?openPortal():!visible&&isOpen&&closePortal())}),[closePortal,openPortal,visible,isOpen,previousVisible]);var onResize=Object(react.useCallback)((function(evt){var parent=getPositionNode(wrapper.current,positionNode);parent&&!function getPositionNodeVisible(positionNode){return!positionNode||null!==positionNode.offsetParent}(parent)?closePortal(evt):updatePositionCoords()}),[closePortal,positionNode,updatePositionCoords]);return Object(hooks.c)(window,onResize,"resize",!0,isOpen),Object(jsx_runtime.jsxs)("span",Object.assign({className:wrapperClass,ref:wrapperRef,style:positionNode?null:{position:"relative"}},wrapperProps,{children:[hasToggle?Object(jsx_runtime.jsxs)(Button.b,Object.assign({appearance:toggleAppearance,"aria-controls":id,"aria-expanded":isOpen?"true":"false","aria-pressed":isOpen?"true":"false","aria-haspopup":"true",className:classnames_default()("p-contextual-menu__toggle",toggleClassName),disabled:toggleDisabled,hasIcon:hasToggleIcon,onClick:function onClick(evt){isOpen?closePortal(evt):openPortal(evt)},type:"button"},toggleProps,{children:[toggleLabelFirst?labelNode:null,hasToggleIcon?Object(jsx_runtime.jsx)("i",{className:classnames_default()("p-icon--chevron-down p-contextual-menu__indicator",{"is-light":["negative","positive"].includes(toggleAppearance)})}):null,toggleLabelFirst?null:labelNode]})):Object(jsx_runtime.jsx)(jsx_runtime.Fragment,{children:Object(jsx_runtime.jsx)("span",{style:{display:"none"},ref:ref})}),isOpen&&Object(jsx_runtime.jsx)(Portal,{children:Object(jsx_runtime.jsx)(ContextualMenu_ContextualMenuDropdown_ContextualMenuDropdown,Object.assign({adjustedPosition:adjustedPosition,autoAdjust:autoAdjust,closePortal:closePortal,constrainPanelWidth:constrainPanelWidth,dropdownClassName:dropdownClassName,dropdownContent:children,id:id,isOpen:isOpen,links:links,position:position,positionCoords:positionCoords,positionNode:getPositionNode(wrapper.current,positionNode),setAdjustedPosition:setAdjustedPosition,wrapperClass:wrapperClass},dropdownProps))})]}))};ContextualMenu_ContextualMenu.displayName="ContextualMenu";__webpack_exports__.a=ContextualMenu_ContextualMenu;try{ContextualMenu_ContextualMenu.displayName="ContextualMenu",ContextualMenu_ContextualMenu.__docgenInfo={description:"A component for the Vanilla contextual menu.",displayName:"ContextualMenu",props:{autoAdjust:{defaultValue:{value:"true"},description:"Whether the menu should adjust to fit in the screen.",name:"autoAdjust",required:!1,type:{name:"boolean"}},children:{defaultValue:null,description:"The menu content (if the links prop is not supplied).",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"An optional class to apply to the wrapping element.",name:"className",required:!1,type:{name:"string"}},closeOnEsc:{defaultValue:{value:"true"},description:"Whether the menu should close when the escape key is pressed.",name:"closeOnEsc",required:!1,type:{name:"boolean"}},closeOnOutsideClick:{defaultValue:{value:"true"},description:"Whether the menu should close when clicking outside the menu.",name:"closeOnOutsideClick",required:!1,type:{name:"boolean"}},constrainPanelWidth:{defaultValue:null,description:"Whether the menu's width should match the toggle's width.",name:"constrainPanelWidth",required:!1,type:{name:"boolean"}},dropdownClassName:{defaultValue:null,description:"An optional class to apply to the dropdown.",name:"dropdownClassName",required:!1,type:{name:"string"}},dropdownProps:{defaultValue:null,description:"Additional props to pass to the dropdown.",name:"dropdownProps",required:!1,type:{name:"SubComponentProps>"}},hasToggleIcon:{defaultValue:null,description:"Whether the toggle should display a chevron icon.",name:"hasToggleIcon",required:!1,type:{name:"boolean"}},links:{defaultValue:null,description:"A list of links to display in the menu (if the children prop is not supplied.)",name:"links",required:!1,type:{name:"MenuLink[]"}},onToggleMenu:{defaultValue:null,description:"A function to call when the menu is toggled.",name:"onToggleMenu",required:!1,type:{name:"(isOpen: boolean) => void"}},position:{defaultValue:{value:"right"},description:"The position of the menu.",name:"position",required:!1,type:{name:"enum",value:[{value:'"left"'},{value:'"right"'},{value:'"center"'}]}},positionNode:{defaultValue:null,description:"An element to make the menu relative to.",name:"positionNode",required:!1,type:{name:"HTMLElement"}},toggleAppearance:{defaultValue:null,description:"The appearance of the toggle button.",name:"toggleAppearance",required:!1,type:{name:"string"}},toggleClassName:{defaultValue:null,description:"A class to apply to the toggle button.",name:"toggleClassName",required:!1,type:{name:"string"}},toggleDisabled:{defaultValue:null,description:"Whether the toggle button should be disabled.",name:"toggleDisabled",required:!1,type:{name:"boolean"}},toggleLabel:{defaultValue:null,description:"The toggle button's label.",name:"toggleLabel",required:!1,type:{name:"string"}},toggleLabelFirst:{defaultValue:{value:"true"},description:"Whether the toggle lable or icon should appear first.",name:"toggleLabelFirst",required:!1,type:{name:"boolean"}},toggleProps:{defaultValue:null,description:"Additional props to pass to the toggle button.",name:"toggleProps",required:!1,type:{name:"SubComponentProps>"}},visible:{defaultValue:{value:"false"},description:"Whether the menu should be visible.",name:"visible",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ContextualMenu/ContextualMenu.tsx#ContextualMenu"]={docgenInfo:ContextualMenu_ContextualMenu.__docgenInfo,name:"ContextualMenu",path:"src/components/ContextualMenu/ContextualMenu.tsx#ContextualMenu"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Field/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return components_Field_Field}));var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),Label=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./src/components/Label/index.ts")),Col=__webpack_require__("./src/components/Col/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),Field_generateHelpText=function generateHelpText(_ref){var help=_ref.help,helpId=_ref.helpId,helpClassName=_ref.helpClassName,isTickElement=_ref.isTickElement;return help?Object(jsx_runtime.jsx)("p",{className:classnames_default()("p-form-help-text",helpClassName,{"is-tick-element":isTickElement}),id:helpId,children:help}):null},Field_generateError=function generateError(error,caution,success,validationId){if(!error&&!caution&&!success)return null;var messageType=(error?"Error":caution&&"Caution")||success&&"Success";return Object(jsx_runtime.jsxs)("p",{className:"p-form-validation__message",id:validationId,children:[Object(jsx_runtime.jsxs)("strong",{children:[messageType,":"]})," ",error||caution||success]})};Field_generateError.displayName="generateError";var Field_generateContent=function generateContent(_ref2){var isSelect=_ref2.isSelect,children=_ref2.children,labelFirst=_ref2.labelFirst,labelNode=_ref2.labelNode,help=_ref2.help,helpClassName=_ref2.helpClassName,error=_ref2.error,caution=_ref2.caution,success=_ref2.success,validationId=_ref2.validationId,helpId=_ref2.helpId,isTickElement=_ref2.isTickElement;return Object(jsx_runtime.jsxs)("div",{className:"p-form__control u-clearfix",children:[isSelect?Object(jsx_runtime.jsx)("div",{className:"p-form-validation__select-wrapper",children:children}):children,!labelFirst&&labelNode,Field_generateHelpText({helpId:helpId,help:help,helpClassName:helpClassName,isTickElement:isTickElement}),Field_generateError(error,caution,success,validationId)]})};Field_generateContent.displayName="generateContent";var Field_Field=function Field(_ref3){var caution=_ref3.caution,children=_ref3.children,className=_ref3.className,error=_ref3.error,forId=_ref3.forId,help=_ref3.help,helpClassName=_ref3.helpClassName,helpId=_ref3.helpId,isSelect=_ref3.isSelect,isTickElement=_ref3.isTickElement,label=_ref3.label,labelClassName=_ref3.labelClassName,_ref3$labelFirst=_ref3.labelFirst,labelFirst=void 0===_ref3$labelFirst||_ref3$labelFirst,required=_ref3.required,stacked=_ref3.stacked,success=_ref3.success,validationId=_ref3.validationId,labelNode=function generateLabel(forId,required,label,labelClassName,stacked){if(!label)return null;var labelNode=Object(jsx_runtime.jsx)(Label.a,{className:labelClassName,forId:forId,required:required,children:label});return stacked?Object(jsx_runtime.jsx)(Col.a,{size:4,children:labelNode}):labelNode}(forId,required,label,labelClassName,stacked),content=Field_generateContent({isSelect:isSelect,isTickElement:isTickElement,children:children,labelFirst:labelFirst,labelNode:labelNode,help:help,helpClassName:helpClassName,error:error,caution:caution,success:success,validationId:validationId,helpId:helpId});return Object(jsx_runtime.jsxs)("div",{className:classnames_default()("p-form__group","p-form-validation",className,{"is-error":error,"is-caution":caution,"is-success":success,row:stacked}),children:[labelFirst&&labelNode,stacked?Object(jsx_runtime.jsx)(Col.a,{size:8,children:content}):content]})};Field_Field.displayName="Field";var components_Field_Field=Field_Field;try{Field_Field.displayName="Field",Field_Field.__docgenInfo={description:"",displayName:"Field",props:{caution:{defaultValue:null,description:"The content for caution validation.",name:"caution",required:!1,type:{name:"ReactNode"}},children:{defaultValue:null,description:"The content of the Field component.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the Field wrapper div.",name:"className",required:!1,type:{name:"string"}},error:{defaultValue:null,description:"The content for error validation.",name:"error",required:!1,type:{name:"ReactNode"}},forId:{defaultValue:null,description:"The id of the input this Field component is controlling.",name:"forId",required:!1,type:{name:"string"}},help:{defaultValue:null,description:"Help text to show below the field.",name:"help",required:!1,type:{name:"ReactNode"}},helpClassName:{defaultValue:null,description:"Optional class(es) to pass to the help text element.",name:"helpClassName",required:!1,type:{name:"ReactNode"}},helpId:{defaultValue:null,description:"An id to give to the help element.",name:"helpId",required:!1,type:{name:"string"}},isSelect:{defaultValue:null,description:"Whether the component is wrapping a select element.",name:"isSelect",required:!1,type:{name:"boolean"}},isTickElement:{defaultValue:null,description:"Whether the component is wrapping a checkbox or radio element.",name:"isTickElement",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"The label for the field.",name:"label",required:!1,type:{name:"ReactNode"}},labelClassName:{defaultValue:null,description:"Optional class(es) to pass to the label component.",name:"labelClassName",required:!1,type:{name:"string"}},labelFirst:{defaultValue:{value:"true"},description:"Whether the label should show before the input.",name:"labelFirst",required:!1,type:{name:"boolean"}},required:{defaultValue:null,description:"Whether the field is required.",name:"required",required:!1,type:{name:"boolean"}},stacked:{defaultValue:null,description:"Whether the form field should have a stacked appearance.",name:"stacked",required:!1,type:{name:"boolean"}},success:{defaultValue:null,description:"The content for success validation.",name:"success",required:!1,type:{name:"ReactNode"}},validationId:{defaultValue:null,description:"An id to give to the caution, error or success element.",name:"validationId",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Field/Field.tsx#Field"]={docgenInfo:Field_Field.__docgenInfo,name:"Field",path:"src/components/Field/Field.tsx#Field"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Form/Form.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Form_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"fieldset",(function(){return Form_stories_fieldset})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return Form_stories_inline})),__webpack_require__.d(__webpack_exports__,"stacked",(function(){return Form_stories_stacked})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return Form_stories_disabled})),__webpack_require__.d(__webpack_exports__,"validation",(function(){return Form_stories_validation})),__webpack_require__.d(__webpack_exports__,"required",(function(){return Form_stories_required}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["children","className","inline","stacked"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Form_Form=function Form(_ref){var children=_ref.children,className=_ref.className,inline=_ref.inline,stacked=_ref.stacked,props=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsx)("form",Object.assign({className:classnames_default()(className,{"p-form":inline||stacked,"p-form--inline":inline,"p-form--stacked":stacked})},props,{children:children}))};Form_Form.displayName="Form";var components_Form_Form=Form_Form;try{Form_Form.displayName="Form",Form_Form.__docgenInfo={description:"",displayName:"Form",props:{children:{defaultValue:null,description:"The content of the form.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the form element.",name:"className",required:!1,type:{name:"string"}},inline:{defaultValue:null,description:"",name:"inline",required:!1,type:{name:"boolean"}},stacked:{defaultValue:null,description:"",name:"stacked",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Form/Form.tsx#Form"]={docgenInfo:Form_Form.__docgenInfo,name:"Form",path:"src/components/Form/Form.tsx#Form"})}catch(__react_docgen_typescript_loader_error){}var Input=__webpack_require__("./src/components/Input/Input.tsx"),Select=__webpack_require__("./src/components/Select/Select.tsx"),Form_stories_excluded=["components"];function Form_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function Form_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i")," parent element."),Object(esm.b)("h3",null,"Props"),Object(esm.b)(blocks.a,{of:components_Form_Form,mdxType:"ArgsTable"}),Object(esm.b)("h3",null,"Forms"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Default",args:{children:Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)(Input.a,{type:"text",id:"exampleInputEmail12",placeholder:"example@canonical.com",label:"Email address",mdxType:"Input"}),Object(esm.b)(Input.a,{type:"password",id:"exampleInputPassword12",placeholder:"******",label:"Password",mdxType:"Input"}),Object(esm.b)(Input.a,{type:"file",id:"exampleInputFile2",label:"File input",mdxType:"Input"}),Object(esm.b)(Input.a,{type:"checkbox",id:"CheckMe2",label:"I agree to receive information about Canonical’s products and services.",mdxType:"Input"}))},mdxType:"Story"},Form_stories_Template.bind({}))),Object(esm.b)("h3",null,"Fieldset"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Fieldset",mdxType:"Story"},Object(esm.b)(components_Form_Form,{mdxType:"Form"},Object(esm.b)("fieldset",null,Object(esm.b)(Input.a,{placeholder:"Joe",id:"list-input-12",type:"text",label:"First name",mdxType:"Input"}),Object(esm.b)(Input.a,{placeholder:"Bloggs",id:"list-input-22",type:"text",label:"Last name",mdxType:"Input"}),Object(esm.b)(Input.a,{placeholder:"example@canonical.com",id:"list-input-32",type:"text",label:"Email address",mdxType:"Input"}))))),Object(esm.b)("h3",null,"Inline"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Inline",mdxType:"Story"},Object(esm.b)(components_Form_Form,{inline:!0,mdxType:"Form"},Object(esm.b)(Input.a,{type:"text",id:"username-inline2",className:"p-form__control",label:"Username",help:"30 characters or fewer.",mdxType:"Input"}),Object(esm.b)(Input.a,{type:"text",id:"address-inline22","aria-invalid":"true",label:"Email address",error:"Please enter a valid email address.",mdxType:"Input"})))),Object(esm.b)("h3",null,"Stacked"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Stacked",mdxType:"Story"},Object(esm.b)(components_Form_Form,{stacked:!0,mdxType:"Form"},Object(esm.b)(Input.a,{type:"text",id:"full-name-stacked2",label:"Full name",stacked:!0,mdxType:"Input"}),Object(esm.b)(Input.a,{type:"text",id:"username-stacked2",label:"Username",stacked:!0,help:"30 characters or fewer.",mdxType:"Input"}),Object(esm.b)(Input.a,{type:"text",id:"username-stacked-error2",label:"Email address",stacked:!0,error:"This field is required",mdxType:"Input"}),Object(esm.b)(Input.a,{type:"text",id:"address-optional-stacked2",label:"Address line 1",stacked:!0,mdxType:"Input"}),Object(esm.b)(Input.a,{type:"text",id:"address-optional-stacked3",label:"Address line 2",stacked:!0,mdxType:"Input"})))),Object(esm.b)("h3",null,"Disabled"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Disabled",mdxType:"Story"},Object(esm.b)(components_Form_Form,{mdxType:"Form"},Object(esm.b)(Input.a,{label:"Email address",type:"text",id:"disabled-input2",placeholder:"example@canonical.com",disabled:"disabled",mdxType:"Input"})))),Object(esm.b)("h3",null,"Validation"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Validation",mdxType:"Story"},Object(esm.b)(components_Form_Form,{mdxType:"Form"},Object(esm.b)(Input.a,{type:"text",id:"exampleTextInputError2",placeholder:"example@canonical.com",label:"Email address",error:"This field is required.",mdxType:"Input"}),Object(esm.b)(Input.a,{type:"text",id:"exampleTextInputCaution2",placeholder:"14",label:"Mail configuration ID",caution:"No validation is performed in preview mode.",mdxType:"Input"}),Object(esm.b)(Input.a,{type:"text",id:"exampleTextInputSuccess2",placeholder:"**** **** **** ****",label:"Card number",success:"Verified.",mdxType:"Input"}),Object(esm.b)(Select.a,{id:"exampleSelectInputError3",defaultValue:"",options:[{value:"",disabled:"disabled",label:"--Select an option--"},{value:"1",label:"Cosmic Cuttlefish"},{value:"2",label:"Bionic Beaver"},{value:"3",label:"Xenial Xerus"}],label:"Ubuntu releases",error:"You need to select an OS to complete your install.",mdxType:"Select"})))),Object(esm.b)("h3",null,"Required"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Required",mdxType:"Story"},Object(esm.b)(components_Form_Form,{mdxType:"Form"},Object(esm.b)(Input.a,{type:"text",id:"exampleTextInputError3",placeholder:"e.g joe@bloggs.com",error:"This field is required.",label:"Email address",required:!0,mdxType:"Input"})))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var defaultStory=Form_stories_Template.bind({});defaultStory.storyName="Default",defaultStory.args={children:Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)(Input.a,{type:"text",id:"exampleInputEmail12",placeholder:"example@canonical.com",label:"Email address"}),Object(esm.b)(Input.a,{type:"password",id:"exampleInputPassword12",placeholder:"******",label:"Password"}),Object(esm.b)(Input.a,{type:"file",id:"exampleInputFile2",label:"File input"}),Object(esm.b)(Input.a,{type:"checkbox",id:"CheckMe2",label:"I agree to receive information about Canonical’s products and services."}))},defaultStory.parameters={storySource:{source:"args =>
"}};var Form_stories_fieldset=function fieldset(){return Object(esm.b)(components_Form_Form,null,Object(esm.b)("fieldset",null,Object(esm.b)(Input.a,{placeholder:"Joe",id:"list-input-12",type:"text",label:"First name"}),Object(esm.b)(Input.a,{placeholder:"Bloggs",id:"list-input-22",type:"text",label:"Last name"}),Object(esm.b)(Input.a,{placeholder:"example@canonical.com",id:"list-input-32",type:"text",label:"Email address"})))};Form_stories_fieldset.displayName="fieldset",Form_stories_fieldset.storyName="Fieldset",Form_stories_fieldset.parameters={storySource:{source:'\n
\n \n \n \n
\n
'}};var Form_stories_inline=function inline(){return Object(esm.b)(components_Form_Form,{inline:!0},Object(esm.b)(Input.a,{type:"text",id:"username-inline2",className:"p-form__control",label:"Username",help:"30 characters or fewer."}),Object(esm.b)(Input.a,{type:"text",id:"address-inline22","aria-invalid":"true",label:"Email address",error:"Please enter a valid email address."}))};Form_stories_inline.displayName="inline",Form_stories_inline.storyName="Inline",Form_stories_inline.parameters={storySource:{source:'
\n \n \n
'}};var Form_stories_stacked=function stacked(){return Object(esm.b)(components_Form_Form,{stacked:!0},Object(esm.b)(Input.a,{type:"text",id:"full-name-stacked2",label:"Full name",stacked:!0}),Object(esm.b)(Input.a,{type:"text",id:"username-stacked2",label:"Username",stacked:!0,help:"30 characters or fewer."}),Object(esm.b)(Input.a,{type:"text",id:"username-stacked-error2",label:"Email address",stacked:!0,error:"This field is required"}),Object(esm.b)(Input.a,{type:"text",id:"address-optional-stacked2",label:"Address line 1",stacked:!0}),Object(esm.b)(Input.a,{type:"text",id:"address-optional-stacked3",label:"Address line 2",stacked:!0}))};Form_stories_stacked.displayName="stacked",Form_stories_stacked.storyName="Stacked",Form_stories_stacked.parameters={storySource:{source:'
\n \n \n \n \n \n
'}};var Form_stories_disabled=function disabled(){return Object(esm.b)(components_Form_Form,null,Object(esm.b)(Input.a,{label:"Email address",type:"text",id:"disabled-input2",placeholder:"example@canonical.com",disabled:"disabled"}))};Form_stories_disabled.displayName="disabled",Form_stories_disabled.storyName="Disabled",Form_stories_disabled.parameters={storySource:{source:'
\n \n
'}};var Form_stories_validation=function validation(){return Object(esm.b)(components_Form_Form,null,Object(esm.b)(Input.a,{type:"text",id:"exampleTextInputError2",placeholder:"example@canonical.com",label:"Email address",error:"This field is required."}),Object(esm.b)(Input.a,{type:"text",id:"exampleTextInputCaution2",placeholder:"14",label:"Mail configuration ID",caution:"No validation is performed in preview mode."}),Object(esm.b)(Input.a,{type:"text",id:"exampleTextInputSuccess2",placeholder:"**** **** **** ****",label:"Card number",success:"Verified."}),Object(esm.b)(Select.a,{id:"exampleSelectInputError3",defaultValue:"",options:[{value:"",disabled:"disabled",label:"--Select an option--"},{value:"1",label:"Cosmic Cuttlefish"},{value:"2",label:"Bionic Beaver"},{value:"3",label:"Xenial Xerus"}],label:"Ubuntu releases",error:"You need to select an OS to complete your install."}))};Form_stories_validation.displayName="validation",Form_stories_validation.storyName="Validation",Form_stories_validation.parameters={storySource:{source:'
\n \n \n \n \n
'}};var componentMeta={title:"Form",component:components_Form_Form,argTypes:{children:{control:{disable:!0}}},includeStories:["defaultStory","fieldset","inline","stacked","disabled","validation","required"]},mdxStoryNameToKey={Default:"defaultStory",Fieldset:"fieldset",Inline:"inline",Stacked:"stacked",Disabled:"disabled",Validation:"validation",Required:"required"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Icon/Icon.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Icon_stories_Template})),__webpack_require__.d(__webpack_exports__,"base",(function(){return base})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Icon_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"custom",(function(){return Icon_stories_custom})),__webpack_require__.d(__webpack_exports__,"social",(function(){return Icon_stories_social}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.string.search.js"),__webpack_require__("./node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("./node_modules/core-js/modules/es.string.anchor.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),Icon=__webpack_require__("./src/components/Icon/Icon.tsx"),injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),Icon_stories=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Icon/Icon.stories.scss"),options={insert:"head",singleton:!1},_excluded=(injectStylesIntoStyleTag_default()(Icon_stories.a,options),Icon_stories.a.locals,["components"]);function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var Icon_stories_defaultStory=function defaultStory(){return Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)(Icon.b,{name:Icon.a.plus}),Object(esm.b)(Icon.b,{name:Icon.a.minus}),Object(esm.b)(Icon.b,{name:Icon.a.expand}),Object(esm.b)(Icon.b,{name:Icon.a.collapse}),Object(esm.b)(Icon.b,{name:Icon.a.spinner}),Object(esm.b)(Icon.b,{name:Icon.a.drag}),Object(esm.b)(Icon.b,{name:Icon.a.close}),Object(esm.b)(Icon.b,{name:Icon.a.help}),Object(esm.b)(Icon.b,{name:Icon.a.information}),Object(esm.b)(Icon.b,{name:Icon.a.delete}),Object(esm.b)(Icon.b,{name:Icon.a.externalLink}),Object(esm.b)(Icon.b,{name:Icon.a.chevronUp}),Object(esm.b)(Icon.b,{name:Icon.a.chevronDown}),Object(esm.b)(Icon.b,{name:Icon.a.menu}),Object(esm.b)(Icon.b,{name:Icon.a.code}),Object(esm.b)(Icon.b,{name:Icon.a.copy}),Object(esm.b)(Icon.b,{name:Icon.a.search}),Object(esm.b)(Icon.b,{name:Icon.a.share}),Object(esm.b)(Icon.b,{name:Icon.a.user}),Object(esm.b)(Icon.b,{name:Icon.a.anchor}),Object(esm.b)(Icon.b,{name:Icon.a.success}),Object(esm.b)(Icon.b,{name:Icon.a.warning}),Object(esm.b)(Icon.b,{name:Icon.a.error}))};Icon_stories_defaultStory.storyName="Default",Icon_stories_defaultStory.parameters={storySource:{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"}};var Icon_stories_custom=function custom(){return Object(esm.b)(Icon.b,{name:"custom"})};Icon_stories_custom.displayName="custom",Icon_stories_custom.storyName="Custom",Icon_stories_custom.parameters={storySource:{source:''}};var Icon_stories_social=function social(){return Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)(Icon.b,{name:Icon.a.facebook}),Object(esm.b)(Icon.b,{name:Icon.a.twitter}),Object(esm.b)(Icon.b,{name:Icon.a.instagram}),Object(esm.b)(Icon.b,{name:Icon.a.linkedin}),Object(esm.b)(Icon.b,{name:Icon.a.youtube}),Object(esm.b)(Icon.b,{name:Icon.a.github}),Object(esm.b)(Icon.b,{name:Icon.a.rss}),Object(esm.b)(Icon.b,{name:Icon.a.email}))};Icon_stories_social.storyName="Social",Icon_stories_social.parameters={storySource:{source:"\n\n\n\n\n\n\n"}};var componentMeta={title:"Icon",component:Icon.b,includeStories:["base","defaultStory","custom","social"]},mdxStoryNameToKey={Base:"base",Default:"defaultStory",Custom:"custom",Social:"social"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Icon/Icon.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return ICONS}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_5__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/react/jsx-runtime.js")),_excluded=["className","light","name"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 ICONS={anchor:"anchor",chevronDown:"chevron-down",chevronUp:"chevron-up",close:"close",code:"code",collapse:"collapse",copy:"copy",delete:"delete",drag:"drag",error:"error",expand:"expand",externalLink:"external-link",help:"help",information:"information",menu:"menu",minus:"minus",plus:"plus",search:"search",share:"share",spinner:"spinner",success:"success",user:"user",warning:"warning",facebook:"facebook",twitter:"twitter",instagram:"instagram",linkedin:"linkedin",youtube:"youtube",github:"github",rss:"rss",email:"email"},Icon=function Icon(_ref){var className=_ref.className,light=_ref.light,name=_ref.name,props=_objectWithoutProperties(_ref,_excluded);return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("i",Object.assign({className:classnames__WEBPACK_IMPORTED_MODULE_5___default()(className,"p-icon--"+name,{"is-light":light})},props))};Icon.displayName="Icon",__webpack_exports__.b=Icon;try{Icon.displayName="Icon",Icon.__docgenInfo={description:"Icon",displayName:"Icon",props:{className:{defaultValue:null,description:"Optional classes to add to the icon element.",name:"className",required:!1,type:{name:"string"}},light:{defaultValue:null,description:"Whether to show the light variant of the icon.",name:"light",required:!1,type:{name:"boolean"}},name:{defaultValue:null,description:"The name of the icon.",name:"name",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Icon/Icon.tsx#Icon"]={docgenInfo:Icon.__docgenInfo,name:"Icon",path:"src/components/Icon/Icon.tsx#Icon"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Icon/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";var _Icon__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/Icon/Icon.tsx");__webpack_require__.d(__webpack_exports__,"b",(function(){return _Icon__WEBPACK_IMPORTED_MODULE_0__.b})),__webpack_require__.d(__webpack_exports__,"a",(function(){return _Icon__WEBPACK_IMPORTED_MODULE_0__.a}))},"./src/components/Input/Input.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"textInput",(function(){return textInput})),__webpack_require__.d(__webpack_exports__,"stacked",(function(){return stacked})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"caution",(function(){return caution})),__webpack_require__.d(__webpack_exports__,"required",(function(){return required})),__webpack_require__.d(__webpack_exports__,"checkbox",(function(){return checkbox})),__webpack_require__.d(__webpack_exports__,"radioButton",(function(){return radioButton}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_Input__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/Input/Input.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var stacked=function stacked(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{type:"text",id:"exampleTextInput3",placeholder:"example@canonical.com",stacked:!0,label:"Email address"})};stacked.displayName="stacked",stacked.storyName="Stacked",stacked.parameters={storySource:{source:''}};var disabled=function disabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{type:"text",id:"exampleTextInput4",placeholder:"example@canonical.com",disabled:!0,label:"Email address"})};disabled.displayName="disabled",disabled.storyName="Disabled",disabled.parameters={storySource:{source:''}};var error=function error(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{type:"text",id:"exampleTextInput5",placeholder:"example@canonical.com",error:"This field is required.",label:"Email address"})};error.displayName="error",error.storyName="Error",error.parameters={storySource:{source:''}};var success=function success(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{type:"text",id:"exampleTextInput6",placeholder:"example@canonical.com",success:"Verified.",label:"Email address"})};success.displayName="success",success.storyName="Success",success.parameters={storySource:{source:''}};var caution=function caution(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{type:"text",id:"exampleTextInput7",placeholder:"example@canonical.com",caution:"No validation is performed in preview mode.",label:"Email address"})};caution.displayName="caution",caution.storyName="Caution",caution.parameters={storySource:{source:''}};var required=function required(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{type:"text",id:"exampleTextInput8",placeholder:"example@canonical.com",required:!0,label:"Email address"})};required.displayName="required",required.storyName="Required",required.parameters={storySource:{source:''}};var checkbox=function checkbox(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{type:"checkbox",id:"checkExample12",defaultChecked:!0,label:"HTML"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{type:"checkbox",id:"checkExample22",label:"CSS",help:"Cascading Style Sheets"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{type:"checkbox",id:"checkExample32",disabled:"disabled",label:"PHP"}))};checkbox.storyName="Checkbox",checkbox.parameters={storySource:{source:'\n\n'}};var radioButton=function radioButton(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Linux",type:"radio",name:"RadioOptions",id:"Radio12",defaultValue:"option1",defaultChecked:!0,help:"Ubuntu"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Mac OS",type:"radio",name:"RadioOptions",id:"Radio22",defaultValue:"option2"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Input__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Windows",type:"radio",name:"RadioOptions",id:"Radio42",defaultValue:"option4",disabled:"disabled"}))};radioButton.storyName="Radio button",radioButton.parameters={storySource:{source:'\n\n'}};var componentMeta={title:"Input",component:_Input__WEBPACK_IMPORTED_MODULE_8__.a,argTypes:{caution:{control:{type:"text"}},error:{control:{type:"text"}},help:{control:{type:"text"}},helpClassName:{control:{type:"text"}},label:{control:{type:"text"}},success:{control:{type:"text"}},id:{control:{disable:!0}},placeholder:{control:{type:"text"}}},includeStories:["textInput","stacked","disabled","error","success","caution","required","checkbox","radioButton"]},mdxStoryNameToKey={"Text input":"textInput",Stacked:"stacked",Disabled:"disabled",Error:"error",Success:"success",Caution:"caution",Required:"required",Checkbox:"checkbox","Radio button":"radioButton"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/Input/Input.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),react=__webpack_require__("./node_modules/react/index.js"),Field=__webpack_require__("./src/components/Field/index.ts"),CheckboxInput=__webpack_require__("./src/components/CheckboxInput/CheckboxInput.tsx"),RadioInput=__webpack_require__("./src/components/RadioInput/RadioInput.tsx"),hooks=__webpack_require__("./src/hooks/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["caution","className","error","help","helpClassName","id","label","labelClassName","required","stacked","success","takeFocus","type","wrapperClassName"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Input_Input=function Input(_ref){var input,caution=_ref.caution,className=_ref.className,error=_ref.error,help=_ref.help,helpClassName=_ref.helpClassName,id=_ref.id,label=_ref.label,labelClassName=_ref.labelClassName,required=_ref.required,stacked=_ref.stacked,success=_ref.success,takeFocus=_ref.takeFocus,type=_ref.type,wrapperClassName=_ref.wrapperClassName,inputProps=_objectWithoutProperties(_ref,_excluded),inputRef=Object(react.useRef)(null),fieldLabel=["checkbox","radio"].includes(type)?"":label,validationId=Object(hooks.b)(),helpId=Object(hooks.b)(),hasError=!!error,commonProps=Object.assign({"aria-describedby":help?helpId:null,"aria-errormessage":hasError?validationId:null,"aria-invalid":hasError,id:id,label:label,required:required},inputProps);return Object(react.useEffect)((function(){takeFocus&&inputRef.current.focus()}),[takeFocus]),input="checkbox"===type?Object(jsx_runtime.jsx)(CheckboxInput.a,Object.assign({label:label,labelClassName:labelClassName},commonProps)):"radio"===type?Object(jsx_runtime.jsx)(RadioInput.a,Object.assign({label:label,labelClassName:labelClassName},commonProps)):Object(jsx_runtime.jsx)("input",Object.assign({className:classnames_default()("p-form-validation__input",className),ref:inputRef,type:type},commonProps)),Object(jsx_runtime.jsx)(Field.a,{caution:caution,className:wrapperClassName,error:error,forId:id,help:help,helpClassName:helpClassName,helpId:helpId,isTickElement:"checkbox"===type||"radio"===type,label:fieldLabel,labelClassName:labelClassName,required:required,stacked:stacked,success:success,validationId:validationId,children:input})};Input_Input.displayName="Input";__webpack_exports__.a=Input_Input;try{Input_Input.displayName="Input",Input_Input.__docgenInfo={description:"",displayName:"Input",props:{caution:{defaultValue:null,description:"The content for caution validation.",name:"caution",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the input element.",name:"className",required:!1,type:{name:"string"}},error:{defaultValue:null,description:"The content for error validation message. Controls the value of aria-invalid attribute.",name:"error",required:!1,type:{name:"ReactNode"}},help:{defaultValue:null,description:"Help text to show below the field.",name:"help",required:!1,type:{name:"ReactNode"}},helpClassName:{defaultValue:null,description:"Optional class(es) to pass to the help text element.",name:"helpClassName",required:!1,type:{name:"ReactNode"}},id:{defaultValue:null,description:"The id of the input.",name:"id",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"The label for the field.",name:"label",required:!1,type:{name:"ReactNode"}},labelClassName:{defaultValue:null,description:"Optional class(es) to pass to the label component.",name:"labelClassName",required:!1,type:{name:"string"}},required:{defaultValue:null,description:"Whether the field is required.",name:"required",required:!1,type:{name:"boolean"}},stacked:{defaultValue:null,description:"Whether the form field should have a stacked appearance.",name:"stacked",required:!1,type:{name:"boolean"}},success:{defaultValue:null,description:"The content for success validation.",name:"success",required:!1,type:{name:"ReactNode"}},takeFocus:{defaultValue:null,description:"Whether to focus on the input on initial render.",name:"takeFocus",required:!1,type:{name:"boolean"}},wrapperClassName:{defaultValue:null,description:"Optional class(es) to pass to the wrapping Field component",name:"wrapperClassName",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.tsx#Input"]={docgenInfo:Input_Input.__docgenInfo,name:"Input",path:"src/components/Input/Input.tsx#Input"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Label/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return components_Label_Label}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/react/jsx-runtime.js")),_excluded=["children","className","forId","required"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Label_Label=function Label(_ref){var children=_ref.children,className=_ref.className,forId=_ref.forId,required=_ref.required,props=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsx)("label",Object.assign({className:classnames_default()(className,"p-form__label",{"is-required":required}),htmlFor:forId},props,{children:children}))};Label_Label.displayName="Label";var components_Label_Label=Label_Label;try{Label_Label.displayName="Label",Label_Label.__docgenInfo={description:"",displayName:"Label",props:{children:{defaultValue:null,description:"The label content.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to give to the label element.",name:"className",required:!1,type:{name:"string"}},forId:{defaultValue:null,description:"The id of the input this label is connected to.",name:"forId",required:!1,type:{name:"string"}},required:{defaultValue:null,description:"Whether to apply required styling to the label.",name:"required",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Label/Label.tsx#Label"]={docgenInfo:Label_Label.__docgenInfo,name:"Label",path:"src/components/Label/Label.tsx#Label"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Link/Link.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Link_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"soft",(function(){return Link_stories_soft})),__webpack_require__.d(__webpack_exports__,"inverted",(function(){return Link_stories_inverted})),__webpack_require__.d(__webpack_exports__,"backToTop",(function(){return Link_stories_backToTop}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["children","className","href","inverted","soft","top"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Link_Link=function Link(_ref){var children=_ref.children,className=_ref.className,_ref$href=_ref.href,href=void 0===_ref$href?"#":_ref$href,_ref$inverted=_ref.inverted,inverted=void 0!==_ref$inverted&&_ref$inverted,_ref$soft=_ref.soft,soft=void 0!==_ref$soft&&_ref$soft,_ref$top=_ref.top,top=void 0!==_ref$top&&_ref$top,props=_objectWithoutProperties(_ref,_excluded),link=Object(jsx_runtime.jsx)("a",Object.assign({className:classnames_default()(className,{"p-link--inverted":inverted,"p-link--soft":soft,"p-top__link":top}),href:href},props,{children:children}));return top?Object(jsx_runtime.jsx)("div",{className:"p-top",children:link}):link},components_Link_Link=Link_Link;try{Link_Link.displayName="Link",Link_Link.__docgenInfo={description:"",displayName:"Link",props:{children:{defaultValue:null,description:"The content of the link.",name:"children",required:!0,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping anchor element.",name:"className",required:!1,type:{name:"string"}},inverted:{defaultValue:{value:"false"},description:"Whether the link should have inverted styling.",name:"inverted",required:!1,type:{name:"boolean"}},soft:{defaultValue:{value:"false"},description:"Whether the link should have soft styling.",name:"soft",required:!1,type:{name:"boolean"}},top:{defaultValue:{value:"false"},description:'Whether the link should have "back to top" styling.',name:"top",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Link/Link.tsx#Link"]={docgenInfo:Link_Link.__docgenInfo,name:"Link",path:"src/components/Link/Link.tsx#Link"})}catch(__react_docgen_typescript_loader_error){}var Strip=__webpack_require__("./src/components/Strip/Strip.tsx"),Link_stories_excluded=["components"];function Link_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function Link_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var Link_stories_soft=function soft(){return Object(esm.b)(components_Link_Link,{soft:!0},"Learn about MAAS")};Link_stories_soft.displayName="soft",Link_stories_soft.storyName="Soft",Link_stories_soft.parameters={storySource:{source:"Learn about MAAS"}};var Link_stories_inverted=function inverted(){return Object(esm.b)(Strip.a,{type:"dark"},Object(esm.b)(components_Link_Link,{inverted:!0},"Package & publish your app"))};Link_stories_inverted.displayName="inverted",Link_stories_inverted.storyName="Inverted",Link_stories_inverted.parameters={storySource:{source:'\n Package & publish your app\n '}};var Link_stories_backToTop=function backToTop(){return Object(esm.b)(components_Link_Link,{top:!0},"Back to top")};Link_stories_backToTop.displayName="backToTop",Link_stories_backToTop.storyName="Back to top",Link_stories_backToTop.parameters={storySource:{source:"Back to top"}};var componentMeta={title:"Link",component:components_Link_Link,argTypes:{children:{control:{type:"text"}}},includeStories:["defaultStory","soft","inverted","backToTop"]},mdxStoryNameToKey={Default:"defaultStory",Soft:"soft",Inverted:"inverted","Back to top":"backToTop"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/List/List.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return List_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"ticked",(function(){return List_stories_ticked})),__webpack_require__.d(__webpack_exports__,"horizontalDivider",(function(){return List_stories_horizontalDivider})),__webpack_require__.d(__webpack_exports__,"tickedWithHorizontalDivider",(function(){return List_stories_tickedWithHorizontalDivider})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return List_stories_inline})),__webpack_require__.d(__webpack_exports__,"middot",(function(){return List_stories_middot})),__webpack_require__.d(__webpack_exports__,"stretch",(function(){return List_stories_stretch})),__webpack_require__.d(__webpack_exports__,"verticalStepped",(function(){return List_stories_verticalStepped})),__webpack_require__.d(__webpack_exports__,"horizontalStepped",(function(){return List_stories_horizontalStepped})),__webpack_require__.d(__webpack_exports__,"split",(function(){return List_stories_split}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=(__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/core-js/modules/es.string.split.js"),__webpack_require__("./node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("./node_modules/classnames/index.js")),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["title","className","content","titleElement"],_excluded2=["title","className","content"],_excluded3=["className","detailed","divided","inline","isDark","items","middot","stretch","split","stepped","ticked"];function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}var List_generateItems=function generateItems(_ref){var items=_ref.items,ticked=_ref.ticked,inline=_ref.inline,middot=_ref.middot,stepped=_ref.stepped;return items.map((function(item,i){var body,title,className,content,liProps,TitleComponent="h3";if(react_default.a.isValidElement(item)||"string"==typeof item||"number"==typeof item)content=item;else if(item&&"object"==typeof item&&"content"in item)if("titleElement"in item){var _item=item;title=_item.title,className=_item.className,content=_item.content;var _item$titleElement=_item.titleElement;TitleComponent=void 0===_item$titleElement?"h3":_item$titleElement,liProps=_objectWithoutPropertiesLoose(_item,_excluded)}else{var _item2=item;title=_item2.title,className=_item2.className,content=_item2.content,liProps=_objectWithoutPropertiesLoose(_item2,_excluded2)}return body=stepped?Object(jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[Object(jsx_runtime.jsx)(TitleComponent,{className:"p-stepped-list__title",children:title}),Object(jsx_runtime.jsx)("p",{className:"p-stepped-list__content",children:content})]}):content,Object(jsx_runtime.jsxs)("li",Object.assign({className:classnames_default()(className,{"p-list__item":!inline&&!stepped,"p-inline-list__item":inline,"p-stepped-list__item":stepped,"is-ticked":ticked})},liProps,{children:[body,middot?" ":null]}),i)}))},List_List=function List(_ref2){var className=_ref2.className,detailed=_ref2.detailed,divided=_ref2.divided,inline=_ref2.inline,isDark=_ref2.isDark,items=_ref2.items,middot=_ref2.middot,stretch=_ref2.stretch,split=_ref2.split,stepped=_ref2.stepped,ticked=_ref2.ticked,props=function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=_objectWithoutPropertiesLoose(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}(_ref2,_excluded3),Component=stepped?"ol":"ul";return Object(jsx_runtime.jsx)(Component,Object.assign({className:classnames_default()(className,{"p-list":!(divided||inline||middot||stretch||stepped),"p-list--divided":divided,"p-inline-list":inline,"p-inline-list--middot":middot,"p-inline-list--stretch":stretch,"p-stepped-list":stepped&&!detailed,"p-stepped-list--detailed":stepped&&detailed,"is-dark":isDark,"is-split":split})},props,{children:List_generateItems({items:items,ticked:ticked,inline:inline||middot||stretch,middot:middot,stepped:stepped})}))};List_List.displayName="List";var components_List_List=List_List;try{List_List.displayName="List",List_List.__docgenInfo={description:"",displayName:"List",props:{className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping element.",name:"className",required:!1,type:{name:"string"}},items:{defaultValue:null,description:"The list's items.",name:"items",required:!0,type:{name:"ListItem[] | SteppedListItem[]"}},detailed:{defaultValue:null,description:"",name:"detailed",required:!1,type:{name:"boolean"}},divided:{defaultValue:null,description:"",name:"divided",required:!1,type:{name:"boolean"}},inline:{defaultValue:null,description:"",name:"inline",required:!1,type:{name:"boolean"}},isDark:{defaultValue:null,description:"",name:"isDark",required:!1,type:{name:"boolean"}},middot:{defaultValue:null,description:"",name:"middot",required:!1,type:{name:"boolean"}},split:{defaultValue:null,description:"",name:"split",required:!1,type:{name:"boolean"}},stepped:{defaultValue:null,description:"",name:"stepped",required:!1,type:{name:"boolean"}},stretch:{defaultValue:null,description:"",name:"stretch",required:!1,type:{name:"boolean"}},ticked:{defaultValue:null,description:"",name:"ticked",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.tsx#List"]={docgenInfo:List_List.__docgenInfo,name:"List",path:"src/components/List/List.tsx#List"})}catch(__react_docgen_typescript_loader_error){}var StatusLabel=__webpack_require__("./src/components/StatusLabel/StatusLabel.tsx"),List_stories_excluded=["components"];function List_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function List_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i")," and ",Object(esm.b)("inlineCode",{parentName:"p"},"
    "),", we have 7 list styles at your disposal."),Object(esm.b)("h3",null,"Props"),Object(esm.b)(blocks.a,{of:components_List_List,mdxType:"ArgsTable"}),Object(esm.b)("h3",null,"Default"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Default",args:{items:["Digital signage","Robotics","Gateways"]},mdxType:"Story"},List_stories_Template.bind({}))),Object(esm.b)("h3",null,"Ticked"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Ticked",mdxType:"Story"},Object(esm.b)(components_List_List,{items:["Hardware guidance and sizing","Fixed-price deployment","Reference architecture"],ticked:!0,mdxType:"List"}))),Object(esm.b)("h3",null,"Horizontal divider"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Horizontal divider",mdxType:"Story"},Object(esm.b)(components_List_List,{items:["Single-command install and upgrade","Postgres database for reliable state","High availability for all services"],divided:!0,mdxType:"List"}))),Object(esm.b)("h3",null,"Ticked with horizontal divider"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Ticked with horizontal divider",mdxType:"Story"},Object(esm.b)(components_List_List,{items:["Balance compute load in the cloud","Optimise for specific workloads","Assess overcommit ratios"],divided:!0,ticked:!0,mdxType:"List"}))),Object(esm.b)("h3",null,"Inline"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Inline",mdxType:"Story"},Object(esm.b)(components_List_List,{items:["Community","Careers","Press centre"],inline:!0,mdxType:"List"}))),Object(esm.b)("h3",null,"Middot"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Middot",mdxType:"Story"},Object(esm.b)(components_List_List,{items:["Legal information","Data privacy","Report a bug on this site"],middot:!0,mdxType:"List"}))),Object(esm.b)("h3",null,"Stretch"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Stretch",mdxType:"Story"},Object(esm.b)(components_List_List,{items:[{content:Object(esm.b)("h3",null,"Documentation")},{content:Object(esm.b)(StatusLabel.b,{appearance:"positive",mdxType:"StatusLabel"},"New"),className:"u-vertically-center u-align--right"}],stretch:!0,mdxType:"List"}))),Object(esm.b)("h3",null,"Vertical stepped"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Vertical stepped",mdxType:"Story"},Object(esm.b)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'},{title:"Credentials and SSH keys",content:"After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials."}],stepped:!0,mdxType:"List"}),Object(esm.b)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.",titleElement:"h4"},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.',titleElement:"h4"},{title:"Credentials and SSH keys",content:"After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.",titleElement:"h4"}],stepped:!0,mdxType:"List"}))),Object(esm.b)("h3",null,"Horizontal stepped"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Horizontal stepped",mdxType:"Story"},Object(esm.b)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'}],stepped:!0,detailed:!0,mdxType:"List"}))),Object(esm.b)("h3",null,"Split"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Split",mdxType:"Story"},Object(esm.b)(components_List_List,{items:["Jointly shape the OpenStack architecture","We help you plan your cloud hardware requirements","We build OpenStack in your data center","We operate the cloud to an SLA","Transparent audit, logging, monitoring and management","When your team is ready, we hand over the keys"],divided:!0,split:!0,ticked:!0,mdxType:"List"}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var defaultStory=List_stories_Template.bind({});defaultStory.storyName="Default",defaultStory.args={items:["Digital signage","Robotics","Gateways"]},defaultStory.parameters={storySource:{source:"args => "}};var List_stories_ticked=function ticked(){return Object(esm.b)(components_List_List,{items:["Hardware guidance and sizing","Fixed-price deployment","Reference architecture"],ticked:!0})};List_stories_ticked.displayName="ticked",List_stories_ticked.storyName="Ticked",List_stories_ticked.parameters={storySource:{source:''}};var List_stories_horizontalDivider=function horizontalDivider(){return Object(esm.b)(components_List_List,{items:["Single-command install and upgrade","Postgres database for reliable state","High availability for all services"],divided:!0})};List_stories_horizontalDivider.displayName="horizontalDivider",List_stories_horizontalDivider.storyName="Horizontal divider",List_stories_horizontalDivider.parameters={storySource:{source:''}};var List_stories_tickedWithHorizontalDivider=function tickedWithHorizontalDivider(){return Object(esm.b)(components_List_List,{items:["Balance compute load in the cloud","Optimise for specific workloads","Assess overcommit ratios"],divided:!0,ticked:!0})};List_stories_tickedWithHorizontalDivider.displayName="tickedWithHorizontalDivider",List_stories_tickedWithHorizontalDivider.storyName="Ticked with horizontal divider",List_stories_tickedWithHorizontalDivider.parameters={storySource:{source:''}};var List_stories_inline=function inline(){return Object(esm.b)(components_List_List,{items:["Community","Careers","Press centre"],inline:!0})};List_stories_inline.displayName="inline",List_stories_inline.storyName="Inline",List_stories_inline.parameters={storySource:{source:''}};var List_stories_middot=function middot(){return Object(esm.b)(components_List_List,{items:["Legal information","Data privacy","Report a bug on this site"],middot:!0})};List_stories_middot.displayName="middot",List_stories_middot.storyName="Middot",List_stories_middot.parameters={storySource:{source:''}};var List_stories_stretch=function stretch(){return Object(esm.b)(components_List_List,{items:[{content:Object(esm.b)("h3",null,"Documentation")},{content:Object(esm.b)(StatusLabel.b,{appearance:"positive"},"New"),className:"u-vertically-center u-align--right"}],stretch:!0})};List_stories_stretch.displayName="stretch",List_stories_stretch.storyName="Stretch",List_stories_stretch.parameters={storySource:{source:'Documentation\n}, {\n content: New,\n className: "u-vertically-center u-align--right"\n}]} stretch />'}};var List_stories_verticalStepped=function verticalStepped(){return Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'},{title:"Credentials and SSH keys",content:"After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials."}],stepped:!0}),Object(esm.b)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.",titleElement:"h4"},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.',titleElement:"h4"},{title:"Credentials and SSH keys",content:"After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.",titleElement:"h4"}],stepped:!0}))};List_stories_verticalStepped.storyName="Vertical stepped",List_stories_verticalStepped.parameters={storySource:{source:'\n'}};var List_stories_horizontalStepped=function horizontalStepped(){return Object(esm.b)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'}],stepped:!0,detailed:!0})};List_stories_horizontalStepped.displayName="horizontalStepped",List_stories_horizontalStepped.storyName="Horizontal stepped",List_stories_horizontalStepped.parameters={storySource:{source:''}};var List_stories_split=function split(){return Object(esm.b)(components_List_List,{items:["Jointly shape the OpenStack architecture","We help you plan your cloud hardware requirements","We build OpenStack in your data center","We operate the cloud to an SLA","Transparent audit, logging, monitoring and management","When your team is ready, we hand over the keys"],divided:!0,split:!0,ticked:!0})};List_stories_split.displayName="split",List_stories_split.storyName="Split",List_stories_split.parameters={storySource:{source:''}};var componentMeta={title:"List",component:components_List_List,argTypes:{items:{control:{disable:!0}},stepped:{control:{disable:!0}}},includeStories:["defaultStory","ticked","horizontalDivider","tickedWithHorizontalDivider","inline","middot","stretch","verticalStepped","horizontalStepped","split"]},mdxStoryNameToKey={Default:"defaultStory",Ticked:"ticked","Horizontal divider":"horizontalDivider","Ticked with horizontal divider":"tickedWithHorizontalDivider",Inline:"inline",Middot:"middot",Stretch:"stretch","Vertical stepped":"verticalStepped","Horizontal stepped":"horizontalStepped",Split:"split"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Loader/Loader.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Loader_stories_defaultStory}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),Spinner=__webpack_require__("./src/components/Spinner/Spinner.tsx"),utils=__webpack_require__("./src/utils.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),Loader_Loader=function Loader(props){return utils.a&&console.warn("The Loader component has been renamed to Spinner and will be removed in a future release. https://canonical-web-and-design.github.io/react-components/?path=/story/spinner--default-story"),Object(jsx_runtime.jsx)(Spinner.a,Object.assign({},props))};Loader_Loader.displayName="Loader";var components_Loader_Loader=Loader_Loader;try{Loader_Loader.displayName="Loader",Loader_Loader.__docgenInfo={description:"",displayName:"Loader",props:{className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping span element.",name:"className",required:!1,type:{name:"string"}},isLight:{defaultValue:null,description:"Whether the spinner should have a light appearance.",name:"isLight",required:!1,type:{name:"boolean"}},text:{defaultValue:null,description:"Text to display next to the spinner.",name:"text",required:!1,type:{name:"string"}},role:{defaultValue:null,description:"What the role of the spinner should be.",name:"role",required:!1,type:{name:"string & AriaRole"}},ariaLive:{defaultValue:null,description:"The politeness setting of the spinner alert.",name:"ariaLive",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"assertive"'},{value:'"polite"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Loader/Loader.tsx#Loader"]={docgenInfo:Loader_Loader.__docgenInfo,name:"Loader",path:"src/components/Loader/Loader.tsx#Loader"})}catch(__react_docgen_typescript_loader_error){}var _excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i=0||(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 layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"Loader",component:components_Loader_Loader,mdxType:"Meta"}),Object(esm.b)("h3",null,"Loader"),Object(esm.b)("p",null,"The Loader component has been renamed to ",Object(esm.b)("a",{parentName:"p",href:"/?path=/story/spinner--default-story"},"Spinner"),"."),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Default",mdxType:"Story"},Object(esm.b)(components_Loader_Loader,{text:"Loading...",mdxType:"Loader"}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var Loader_stories_defaultStory=function defaultStory(){return Object(esm.b)(components_Loader_Loader,{text:"Loading..."})};Loader_stories_defaultStory.displayName="defaultStory",Loader_stories_defaultStory.storyName="Default",Loader_stories_defaultStory.parameters={storySource:{source:''}};var componentMeta={title:"Loader",component:components_Loader_Loader,includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/MainTable/MainTable.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return MainTable_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"sortable",(function(){return MainTable_stories_sortable})),__webpack_require__.d(__webpack_exports__,"expanding",(function(){return MainTable_stories_expanding})),__webpack_require__.d(__webpack_exports__,"overflow",(function(){return MainTable_stories_overflow})),__webpack_require__.d(__webpack_exports__,"responsive",(function(){return MainTable_stories_responsive})),__webpack_require__.d(__webpack_exports__,"paginated",(function(){return MainTable_stories_paginated})),__webpack_require__.d(__webpack_exports__,"empty",(function(){return MainTable_stories_empty}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),Pagination=(__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/core-js/modules/es.array.sort.js"),__webpack_require__("./node_modules/core-js/modules/es.object.entries.js"),__webpack_require__("./src/components/Pagination/Pagination.tsx")),Table=__webpack_require__("./src/components/Table/index.ts"),TableRow=__webpack_require__("./src/components/TableRow/index.ts"),TableHeader=__webpack_require__("./src/components/TableHeader/index.ts"),TableCell=__webpack_require__("./src/components/TableCell/index.ts"),hooks=__webpack_require__("./src/hooks/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["content","sortKey"],_excluded2=["columns","expanded","expandedContent","key","sortData"],_excluded3=["content"],_excluded4=["defaultSort","defaultSortDirection","emptyStateMsg","expanding","headers","onUpdateSort","paginate","rows","responsive","sortable","sortFunction"];function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||_unsupportedIterableToArray(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 MainTable_updateSort=function updateSort(setSortKey,setSortDirection,sortKey,sortDirection){var newDirection=null;"none"===sortDirection?newDirection="ascending":"ascending"===sortDirection?newDirection="descending":sortKey=null,setSortKey(sortKey),setSortDirection(newDirection)},MainTable_generateHeaders=function generateHeaders(currentSortKey,currentSortDirection,expanding,headers,sortable,setSortKey,setSortDirection){var headerItems=headers.map((function(_ref,index){var sortDirection,content=_ref.content,sortKey=_ref.sortKey,props=_objectWithoutProperties(_ref,_excluded);return sortable&&sortKey&&(sortDirection=currentSortKey===sortKey?currentSortDirection:"none"),Object(jsx_runtime.jsx)(TableHeader.a,Object.assign({sort:sortDirection,onClick:sortable?MainTable_updateSort.bind(undefined,setSortKey,setSortDirection,sortKey,sortDirection):void 0},props,{children:content}),index)}));return Object(jsx_runtime.jsx)("thead",{children:Object(jsx_runtime.jsxs)(TableRow.a,{children:[headerItems,expanding&&Object(jsx_runtime.jsx)(TableHeader.a,{"aria-hidden":"true"})]})})};MainTable_generateHeaders.displayName="generateHeaders";var MainTable_generateRows=function generateRows(_ref2){var rows=_ref2.rows,headers=_ref2.headers,responsive=_ref2.responsive,expanding=_ref2.expanding;return rows.map((function(_ref3,index){var columns=_ref3.columns,expanded=_ref3.expanded,expandedContent=_ref3.expandedContent,key=_ref3.key,rowProps=(_ref3.sortData,_objectWithoutProperties(_ref3,_excluded2)),cellItems=null==columns?void 0:columns.map((function(_ref4,index){var content=_ref4.content,cellProps=_objectWithoutProperties(_ref4,_excluded3),headerContent=headers&&headers[index].content,headerReplacement=headers&&headers[index].heading;return responsive&&(cellProps["data-heading"]="string"==typeof headerContent?headerContent:headerReplacement),Object(jsx_runtime.jsx)(TableCell.a,Object.assign({},cellProps,{children:content}),index)}));return null==key&&(key=index),Object(jsx_runtime.jsxs)(TableRow.a,Object.assign({},rowProps,{children:[cellItems,expanding&&Object(jsx_runtime.jsx)(TableCell.a,{expanding:!0,hidden:!expanded,children:expandedContent})]}),key)}))},MainTable_MainTable=function MainTable(_ref6){var defaultSort=_ref6.defaultSort,defaultSortDirection=_ref6.defaultSortDirection,_ref6$emptyStateMsg=_ref6.emptyStateMsg,emptyStateMsg=void 0===_ref6$emptyStateMsg?"":_ref6$emptyStateMsg,expanding=_ref6.expanding,headers=_ref6.headers,onUpdateSort=_ref6.onUpdateSort,paginate=_ref6.paginate,rows=_ref6.rows,responsive=_ref6.responsive,sortable=_ref6.sortable,sortFunction=_ref6.sortFunction,props=_objectWithoutProperties(_ref6,_excluded4),_useState2=_slicedToArray(Object(react.useState)(defaultSort),2),currentSortKey=_useState2[0],setSortKey=_useState2[1],_useState4=_slicedToArray(Object(react.useState)(defaultSortDirection),2),currentSortDirection=_useState4[0],setSortDirection=_useState4[1];Object(react.useEffect)((function(){setSortKey(defaultSort)}),[defaultSort]),Object(react.useEffect)((function(){setSortDirection(defaultSortDirection)}),[defaultSortDirection]);var sortedRows=Object(react.useMemo)((function(){return function sortRows(_ref5){var currentSortDirection=_ref5.currentSortDirection,currentSortKey=_ref5.currentSortKey,rows=_ref5.rows,sortable=_ref5.sortable,sortFunction=_ref5.sortFunction;if(!rows)return[];var sortedRows=_toConsumableArray(rows);return sortable&¤tSortKey&&(sortFunction||(sortFunction=function sortFunction(a,b){return a.sortData&&b.sortData?a.sortData[currentSortKey]>b.sortData[currentSortKey]?"ascending"===currentSortDirection?1:-1:a.sortData[currentSortKey]0&&Object(jsx_runtime.jsx)(Pagination.a,{currentPage:currentPage,itemsPerPage:paginate,paginate:setCurrentPage,style:{marginTop:"1rem"},totalItems:rows.length})]})},components_MainTable_MainTable=MainTable_MainTable;try{MainTable_MainTable.displayName="MainTable",MainTable_MainTable.__docgenInfo={description:"",displayName:"MainTable",props:{defaultSort:{defaultValue:null,description:"The default key to sort the rows by.",name:"defaultSort",required:!1,type:{name:"string"}},defaultSortDirection:{defaultValue:null,description:"The default direction the row data should be sorted by.",name:"defaultSortDirection",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"ascending"'},{value:'"descending"'}]}},emptyStateMsg:{defaultValue:{value:""},description:"A message to display when there are no table rows.",name:"emptyStateMsg",required:!1,type:{name:"ReactNode"}},headers:{defaultValue:null,description:"The header columns for this table.",name:"headers",required:!1,type:{name:"MainTableHeader[]"}},onUpdateSort:{defaultValue:null,description:"A function that is called when the sort key is changed.",name:"onUpdateSort",required:!1,type:{name:"(sortKey: string) => void"}},paginate:{defaultValue:null,description:"A number of rows to paginate by.",name:"paginate",required:!1,type:{name:"number"}},rows:{defaultValue:null,description:"The rows to display in the table.",name:"rows",required:!1,type:{name:"MainTableRow[]"}},sortable:{defaultValue:null,description:"Whether this table should be sortable.",name:"sortable",required:!1,type:{name:"boolean"}},sortFunction:{defaultValue:null,description:"A function to be used when sorting.",name:"sortFunction",required:!1,type:{name:"(a: MainTableRow, b: MainTableRow, currentSortDirection: SortDirection, currentSortKey: string) => 0 | 1 | -1"}},className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping table element.",name:"className",required:!1,type:{name:"string"}},children:{defaultValue:null,description:"The content of the table.",name:"children",required:!1,type:{name:"ReactNode"}},expanding:{defaultValue:null,description:"Whether the table can expand hidden cells.",name:"expanding",required:!1,type:{name:"boolean"}},responsive:{defaultValue:null,description:"Whether the table should show card styling on smaller screens.",name:"responsive",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/MainTable/MainTable.tsx#MainTable"]={docgenInfo:MainTable_MainTable.__docgenInfo,name:"MainTable",path:"src/components/MainTable/MainTable.tsx#MainTable"})}catch(__react_docgen_typescript_loader_error){}var Row=__webpack_require__("./src/components/Row/index.ts"),Col=__webpack_require__("./src/components/Col/index.ts"),ContextualMenu=__webpack_require__("./src/components/ContextualMenu/ContextualMenu.tsx"),MainTable_stories_excluded=["components"];function MainTable_stories_slicedToArray(arr,i){return function MainTable_stories_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function MainTable_stories_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function MainTable_stories_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return MainTable_stories_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return MainTable_stories_arrayLikeToArray(o,minLen)}(arr,i)||function MainTable_stories_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function MainTable_stories_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var MainTable_stories_sortable=function sortable(){return Object(esm.b)(components_MainTable_MainTable,{headers:[{content:"Status",sortKey:"status"},{content:"Cores",sortKey:"cores",className:"u-align--right"},{content:"RAM",sortKey:"ram",className:"u-align--right"},{content:"Disks",sortKey:"disks",className:"u-align--right"}],rows:[{columns:[{content:"Ready",role:"rowheader"},{content:1,className:"u-align--right"},{content:"1 GiB",className:"u-align--right"},{content:2,className:"u-align--right"}],sortData:{status:"ready",cores:2,ram:1,disks:2}},{columns:[{content:"Idle",role:"rowheader"},{content:1,className:"u-align--right"},{content:"1 GiB",className:"u-align--right"},{content:2,className:"u-align--right"}],sortData:{status:"idle",cores:1,ram:1,disks:2}},{columns:[{content:"Waiting",role:"rowheader"},{content:8,className:"u-align--right"},{content:"3.9 GiB",className:"u-align--right"},{content:3,className:"u-align--right"}],sortData:{status:"waiting",cores:8,ram:3.9,disks:3}}],sortable:!0})};MainTable_stories_sortable.displayName="sortable",MainTable_stories_sortable.storyName="Sortable",MainTable_stories_sortable.parameters={storySource:{source:''}};var MainTable_stories_expanding=function expanding(){var _useState6=MainTable_stories_slicedToArray(Object(react.useState)(1),2),expandedRow=_useState6[0],setExpandedRow=_useState6[1];return Object(esm.b)(components_MainTable_MainTable,{expanding:!0,headers:[{content:"Name"},{content:"Mac address"},{content:"IP"},{content:"Rack"},{content:"Last seen"},{content:"Actions",className:"u-align--right"}],rows:[{columns:[{content:"Unknown",role:"rowheader"},{content:"2c:44:fd:80:3f:25"},{content:"10.249.0.1"},{content:"karura"},{content:"Thu, 25 Oct. 2018 13:55:21"},{content:Object(esm.b)("button",{className:"u-toggle",onClick:function onClick(){return setExpandedRow(1)}},"Show"),className:"u-align--right"}],expanded:1===expandedRow,expandedContent:Object(esm.b)(Row.a,null,Object(esm.b)(Col.a,{size:8},Object(esm.b)("h4",null,"Expanding table cell"),Object(esm.b)("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))},{columns:[{content:"Unknown",role:"rowheader"},{content:"52:54:00:3a:fe:e9"},{content:"172.16.99.191"},{content:"karura"},{content:"Wed, 3 Oct. 2018 23:08:06"},{content:Object(esm.b)("button",{className:"u-toggle",onClick:function onClick(){return setExpandedRow(2)}},"Show"),className:"u-align--right"}],expanded:2===expandedRow,expandedContent:Object(esm.b)(Row.a,null,Object(esm.b)(Col.a,{size:8},Object(esm.b)("h4",null,"Expanding table cell"),Object(esm.b)("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))},{columns:[{content:"Unknown",role:"rowheader"},{content:"52:54:00:74:c2:10"},{content:"172.16.99.192"},{content:"karura"},{content:"Wed, 17 Oct. 2018 12:18:18"},{content:Object(esm.b)("button",{className:"u-toggle",onClick:function onClick(){return setExpandedRow(3)}},"Show"),className:"u-align--right"}],expanded:3===expandedRow,expandedContent:Object(esm.b)(Row.a,null,Object(esm.b)(Col.a,{size:8},Object(esm.b)("h4",null,"Expanding table cell"),Object(esm.b)("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))}]})};MainTable_stories_expanding.displayName="expanding",MainTable_stories_expanding.storyName="Expanding",MainTable_stories_expanding.parameters={storySource:{source:'() => {\n let [expandedRow, setExpandedRow] = useState(1);\n return setExpandedRow(1)}>\n Show\n ,\n className: "u-align--right"\n }],\n expanded: expandedRow === 1,\n expandedContent: \n \n

    Expanding table cell

    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Consequuntur cum dicta beatae nostrum eligendi similique\n earum, dolorem fuga quis, sequi voluptates architecto ipsa\n dolorum eaque rem expedita inventore voluptas odit\n aspernatur alias molestias facere.\n

    \n \n     \n }, {\n columns: [{\n content: "Unknown",\n role: "rowheader"\n }, {\n content: "52:54:00:3a:fe:e9"\n }, {\n content: "172.16.99.191"\n }, {\n content: "karura"\n }, {\n content: "Wed, 3 Oct. 2018 23:08:06"\n }, {\n content: ,\n className: "u-align--right"\n }],\n expanded: expandedRow === 2,\n expandedContent: \n \n

    Expanding table cell

    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Consequuntur cum dicta beatae nostrum eligendi similique\n earum, dolorem fuga quis, sequi voluptates architecto ipsa\n dolorum eaque rem expedita inventore voluptas odit\n aspernatur alias molestias facere.\n

    \n \n     \n }, {\n columns: [{\n content: "Unknown",\n role: "rowheader"\n }, {\n content: "52:54:00:74:c2:10"\n }, {\n content: "172.16.99.192"\n }, {\n content: "karura"\n }, {\n content: "Wed, 17 Oct. 2018 12:18:18"\n }, {\n content: ,\n className: "u-align--right"\n }],\n expanded: expandedRow === 3,\n expandedContent: \n \n

    Expanding table cell

    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Consequuntur cum dicta beatae nostrum eligendi similique\n earum, dolorem fuga quis, sequi voluptates architecto ipsa\n dolorum eaque rem expedita inventore voluptas odit\n aspernatur alias molestias facere.\n

    \n \n     \n }]} />;\n}'}};var MainTable_stories_overflow=function overflow(){var _useState8=MainTable_stories_slicedToArray(Object(react.useState)(1),2);_useState8[0],_useState8[1];return Object(esm.b)(components_MainTable_MainTable,{headers:[{content:"Name"},{content:"Mac address"},{content:"IP"},{content:"Rack"},{content:"Last seen"},{content:"Actions",className:"u-align--right"}],rows:[{columns:[{content:"Unknown",role:"rowheader"},{content:"2c:44:fd:80:3f:25"},{content:"10.249.0.1"},{content:"karura"},{content:"Thu, 25 Oct. 2018 13:55:21"},{content:Object(esm.b)(ContextualMenu.a,{links:[{children:"Link 1",onClick:function onClick(){}},{children:"Link 2",onClick:function onClick(){}}],hasToggleIcon:!0,position:"right"}),className:"u-align--right",hasOverflow:!0}]},{columns:[{content:"Unknown",role:"rowheader"},{content:"52:54:00:3a:fe:e9"},{content:"172.16.99.191"},{content:"karura"},{content:"Wed, 3 Oct. 2018 23:08:06"},{content:Object(esm.b)(ContextualMenu.a,{links:[{children:"Link 1",onClick:function onClick(){}},{children:"Link 2",onClick:function onClick(){}}],hasToggleIcon:!0,position:"right"}),className:"u-align--right",hasOverflow:!0}]},{columns:[{content:"Unknown",role:"rowheader"},{content:"52:54:00:74:c2:10"},{content:"172.16.99.192"},{content:"karura"},{content:"Wed, 17 Oct. 2018 12:18:18"},{content:Object(esm.b)(ContextualMenu.a,{links:[{children:"Link 1",onClick:function onClick(){}},{children:"Link 2",onClick:function onClick(){}}],hasToggleIcon:!0,position:"right"}),className:"u-align--right",hasOverflow:!0}]}]})};MainTable_stories_overflow.displayName="overflow",MainTable_stories_overflow.storyName="Overflow",MainTable_stories_overflow.parameters={storySource:{source:'() => {\n let [expandedRow, setExpandedRow] = useState(1);\n return {}\n }, {\n children: "Link 2",\n onClick: () => {}\n }]} hasToggleIcon position="right" />,\n className: "u-align--right",\n hasOverflow: true\n }]\n }, {\n columns: [{\n content: "Unknown",\n role: "rowheader"\n }, {\n content: "52:54:00:3a:fe:e9"\n }, {\n content: "172.16.99.191"\n }, {\n content: "karura"\n }, {\n content: "Wed, 3 Oct. 2018 23:08:06"\n }, {\n content: {}\n }, {\n children: "Link 2",\n onClick: () => {}\n }]} hasToggleIcon position="right" />,\n className: "u-align--right",\n hasOverflow: true\n }]\n }, {\n columns: [{\n content: "Unknown",\n role: "rowheader"\n }, {\n content: "52:54:00:74:c2:10"\n }, {\n content: "172.16.99.192"\n }, {\n content: "karura"\n }, {\n content: "Wed, 17 Oct. 2018 12:18:18"\n }, {\n content: {}\n }, {\n children: "Link 2",\n onClick: () => {}\n }]} hasToggleIcon position="right" />,\n className: "u-align--right",\n hasOverflow: true\n }]\n }]} />;\n}'}};var MainTable_stories_responsive=function responsive(){return Object(esm.b)(components_MainTable_MainTable,{headers:[{content:Object(esm.b)("span",null,"Name ",Object(esm.b)("i",{className:"p-icon--information"})),heading:"Name"},{content:"Users",className:"u-align--right"},{content:"Units",className:"u-align--right"}],rows:[{columns:[{content:"Ready",role:"rowheader"},{content:1,className:"u-align--right"},{content:"1 GiB",className:"u-align--right"}]},{columns:[{content:"Ready",role:"rowheader"},{content:1,className:"u-align--right"},{content:"1 GiB",className:"u-align--right"}]},{columns:[{content:"Ready",role:"rowheader"},{content:1,className:"u-align--right"},{content:"1 GiB",className:"u-align--right"}]}],responsive:!0})};MainTable_stories_responsive.displayName="responsive",MainTable_stories_responsive.storyName="Responsive",MainTable_stories_responsive.parameters={storySource:{source:'\n Name \n ,\n heading: "Name"\n}, {\n content: "Users",\n className: "u-align--right"\n}, {\n content: "Units",\n className: "u-align--right"\n}]} rows={[{\n columns: [{\n content: "Ready",\n role: "rowheader"\n }, {\n content: 1,\n className: "u-align--right"\n }, {\n content: "1 GiB",\n className: "u-align--right"\n }]\n}, {\n columns: [{\n content: "Ready",\n role: "rowheader"\n }, {\n content: 1,\n className: "u-align--right"\n }, {\n content: "1 GiB",\n className: "u-align--right"\n }]\n}, {\n columns: [{\n content: "Ready",\n role: "rowheader"\n }, {\n content: 1,\n className: "u-align--right"\n }, {\n content: "1 GiB",\n className: "u-align--right"\n }]\n}]} responsive />'}};var MainTable_stories_paginated=function paginated(){return Object(esm.b)(components_MainTable_MainTable,{headers:[{content:"Status"},{content:"Cores"}],paginate:5,rows:[{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]}]})};MainTable_stories_paginated.displayName="paginated",MainTable_stories_paginated.storyName="Paginated",MainTable_stories_paginated.parameters={storySource:{source:''}};var MainTable_stories_empty=function empty(){return Object(esm.b)(components_MainTable_MainTable,{headers:[{content:"Plan"},{content:"Foundation Cloud"},{content:"Foundation Cloud Plus"}],rows:[],emptyStateMsg:"No data to display"})};MainTable_stories_empty.displayName="empty",MainTable_stories_empty.storyName="Empty",MainTable_stories_empty.parameters={storySource:{source:''}};var componentMeta={title:"MainTable",component:components_MainTable_MainTable,argTypes:{headers:{control:{disable:!0}},rows:{control:{disable:!0}}},includeStories:["defaultStory","sortable","expanding","overflow","responsive","paginated","empty"]},mdxStoryNameToKey={Default:"defaultStory",Sortable:"sortable",Expanding:"expanding",Overflow:"overflow",Responsive:"responsive",Paginated:"paginated",Empty:"empty"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Modal/Modal.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Modal_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Modal_stories_defaultStory}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=(__webpack_require__("./node_modules/core-js/modules/es.map.js"),__webpack_require__("./node_modules/classnames/index.js")),classnames_default=__webpack_require__.n(classnames),useId=__webpack_require__("./src/hooks/useId.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["buttonRow","children","className","close","title"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Modal_Modal=function Modal(_ref){var buttonRow=_ref.buttonRow,children=_ref.children,className=_ref.className,close=_ref.close,title=_ref.title,wrapperProps=_objectWithoutProperties(_ref,_excluded),descriptionId=Object(useId.a)(),titleId=Object(useId.a)(),shouldClose=Object(react.useRef)(!1),modalRef=Object(react.useRef)(null),focusableModalElements=Object(react.useRef)(null),keyListenersMap=new Map([[27,close],[9,function handleTabKey(e){if(focusableModalElements.current.length>0){var firstElement=focusableModalElements.current[0],lastElement=focusableModalElements.current[focusableModalElements.current.length-1];if(e.shiftKey||document.activeElement!==lastElement||(firstElement.focus(),e.preventDefault()),e.shiftKey&&document.activeElement===firstElement)return lastElement.focus(),e.preventDefault()}}]]);Object(react.useEffect)((function(){modalRef.current.focus()}),[modalRef]),Object(react.useEffect)((function(){var _focusableModalElemen;focusableModalElements.current=modalRef.current.querySelectorAll('a[href]:not([tabindex="-1"]), button:not([disabled]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), area[href]:not([tabindex="-1"]), iframe:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [contentEditable=true]:not([tabindex="-1"])'),null===(_focusableModalElemen=focusableModalElements.current[0])||void 0===_focusableModalElemen||_focusableModalElemen.focus()}),[]),Object(react.useEffect)((function(){var keyDown=function keyDown(e){var listener=keyListenersMap.get(e.keyCode);return listener&&listener(e)};return document.addEventListener("keydown",keyDown),function(){document.removeEventListener("keydown",keyDown)}}));return Object(jsx_runtime.jsx)("div",Object.assign({className:classnames_default()("p-modal",className),onClick:function handleOverlayOnClick(){shouldClose.current&&close()},onMouseDown:function handleOverlayOnMouseDown(event){event.target===modalRef.current&&(shouldClose.current=!0)}},wrapperProps,{ref:modalRef,children:Object(jsx_runtime.jsxs)("section",{className:"p-modal__dialog",role:"dialog","aria-modal":"true","aria-labelledby":titleId,"aria-describedby":descriptionId,onMouseDown:function handleContentOnMouseDown(){shouldClose.current=!1},onMouseUp:function handleContentOnMouseUp(){shouldClose.current=!1},children:[!!title&&Object(jsx_runtime.jsxs)("header",{className:"p-modal__header",children:[Object(jsx_runtime.jsx)("h2",{className:"p-modal__title",id:titleId,children:title}),!!close&&Object(jsx_runtime.jsx)("button",{className:"p-modal__close","aria-label":"Close active modal",onClick:close,children:"Close"})]}),Object(jsx_runtime.jsx)("div",{id:descriptionId,children:children}),!!buttonRow&&Object(jsx_runtime.jsx)("footer",{className:"p-modal__footer",children:buttonRow})]})}))};Modal_Modal.displayName="Modal";var components_Modal_Modal=Modal_Modal;try{Modal_Modal.displayName="Modal",Modal_Modal.__docgenInfo={description:"",displayName:"Modal",props:{buttonRow:{defaultValue:null,description:"Buttons to display underneath the main modal content.",name:"buttonRow",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to apply to the wrapping element.",name:"className",required:!1,type:{name:"string"}},children:{defaultValue:null,description:"The content of the modal.",name:"children",required:!0,type:{name:"ReactNode"}},close:{defaultValue:null,description:"Function to handle closing the modal.",name:"close",required:!1,type:{name:"() => void"}},title:{defaultValue:null,description:"The title of the modal.",name:"title",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Modal/Modal.tsx#Modal"]={docgenInfo:Modal_Modal.__docgenInfo,name:"Modal",path:"src/components/Modal/Modal.tsx#Modal"})}catch(__react_docgen_typescript_loader_error){}var Modal_stories_excluded=["components"];function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i {\n const [modalOpen, setModalOpen] = useState(true);\n\n const closeHandler = () => setModalOpen(false);\n\n return <>\n \n {modalOpen ? \n \n \n }>\n

    \n Are you sure you want to delete user "Simon"? This action is\n permanent and can not be undone.\n

    \n     : null}\n ;\n}'}};var componentMeta={title:"Modal",component:components_Modal_Modal,argTypes:{buttonRow:{control:{disable:!0}},children:{control:{disable:!0}}},includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/ModularTable/ModularTable.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getSampleData",(function(){return getSampleData})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return ModularTable_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"empty",(function(){return ModularTable_stories_empty})),__webpack_require__.d(__webpack_exports__,"loadMore",(function(){return ModularTable_stories_loadMore}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),Notification=__webpack_require__("./src/components/Notification/Notification.tsx"),SummaryButton=__webpack_require__("./src/components/SummaryButton/SummaryButton.tsx"),react_table=(__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/react-table/index.js")),Table=__webpack_require__("./src/components/Table/index.ts"),TableRow=__webpack_require__("./src/components/TableRow/index.ts"),TableHeader=__webpack_require__("./src/components/TableHeader/index.ts"),TableCell=__webpack_require__("./src/components/TableCell/index.ts"),Icon=__webpack_require__("./src/components/Icon/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["data","columns","emptyMsg","footer","getHeaderProps","getRowProps","getCellProps","getRowId"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 ModularTable(_ref){var data=_ref.data,columns=_ref.columns,emptyMsg=_ref.emptyMsg,footer=_ref.footer,getHeaderProps=_ref.getHeaderProps,getRowProps=_ref.getRowProps,getCellProps=_ref.getCellProps,getRowId=_ref.getRowId,props=_objectWithoutProperties(_ref,_excluded),_useTable=Object(react_table.useTable)({columns:columns,data:data,getRowId:getRowId||void 0}),getTableProps=_useTable.getTableProps,getTableBodyProps=_useTable.getTableBodyProps,headerGroups=_useTable.headerGroups,rows=_useTable.rows,prepareRow=_useTable.prepareRow,showEmpty=!(!emptyMsg||rows&&0!==rows.length);return Object(jsx_runtime.jsxs)(Table.a,Object.assign({},getTableProps(),props,{children:[Object(jsx_runtime.jsx)("thead",{children:headerGroups.map((function(headerGroup){return Object(jsx_runtime.jsx)(TableRow.a,Object.assign({},headerGroup.getHeaderGroupProps(),{children:headerGroup.headers.map((function(column){return Object(jsx_runtime.jsx)(TableHeader.a,Object.assign({},column.getHeaderProps([{className:column.className},{className:column.getCellIcon?"p-table__cell--icon-placeholder":""},Object.assign({},null==getHeaderProps?void 0:getHeaderProps(column))]),{children:column.render("Header")}))}))}))}))}),Object(jsx_runtime.jsxs)("tbody",Object.assign({},getTableBodyProps(),{children:[rows.map((function(row){return prepareRow(row),Object(jsx_runtime.jsx)(TableRow.a,Object.assign({},row.getRowProps(null==getRowProps?void 0:getRowProps(row)),{children:row.cells.map((function(cell){var _cell$column$getCellI,_cell$column,hasColumnIcon=cell.column.getCellIcon,iconName=hasColumnIcon&&(null===(_cell$column$getCellI=(_cell$column=cell.column).getCellIcon)||void 0===_cell$column$getCellI?void 0:_cell$column$getCellI.call(_cell$column,cell));return Object(jsx_runtime.jsxs)(TableCell.a,Object.assign({},cell.getCellProps([{className:cell.column.className},{className:hasColumnIcon?"p-table__cell--icon-placeholder":""},Object.assign({},null==getCellProps?void 0:getCellProps(cell))]),{children:[iconName&&Object(jsx_runtime.jsx)(Icon.b,{name:iconName}),cell.render("Cell")]}))}))}))})),showEmpty&&Object(jsx_runtime.jsx)(TableRow.a,{children:Object(jsx_runtime.jsx)(TableCell.a,{colSpan:columns.length,children:emptyMsg})}),footer&&Object(jsx_runtime.jsx)(TableRow.a,{children:Object(jsx_runtime.jsx)(TableCell.a,{colSpan:columns.length,children:footer})})]}))]}))}ModularTable.displayName="ModularTable";var ModularTable_ModularTable=ModularTable;try{ModularTable.displayName="ModularTable",ModularTable.__docgenInfo={description:"",displayName:"ModularTable",props:{columns:{defaultValue:null,description:"The columns of the table.",name:"columns",required:!0,type:{name:"Column>[]"}},data:{defaultValue:null,description:"The data of the table.",name:"data",required:!0,type:{name:"Record[]"}},emptyMsg:{defaultValue:null,description:"A message to display if data is empty.",name:"emptyMsg",required:!1,type:{name:"string"}},footer:{defaultValue:null,description:"Optional extra row to display underneath the main table content.",name:"footer",required:!1,type:{name:"ReactNode"}},getHeaderProps:{defaultValue:null,description:"This function is used to resolve any props needed for a particular column's header cell.",name:"getHeaderProps",required:!1,type:{name:"(header: HeaderGroup>) => Partial>"}},getRowProps:{defaultValue:null,description:"This function is used to resolve any props needed for a particular row.",name:"getRowProps",required:!1,type:{name:"(row: Row>) => Partial>"}},getCellProps:{defaultValue:null,description:"This function is used to resolve any props needed for a particular cell.",name:"getCellProps",required:!1,type:{name:"(cell: Cell, any>) => Partial>"}},getRowId:{defaultValue:null,description:"",name:"getRowId",required:!1,type:{name:"(originalRow: Record, relativeIndex: number, parent?: Row>) => string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ModularTable/ModularTable.tsx#ModularTable"]={docgenInfo:ModularTable.__docgenInfo,name:"ModularTable",path:"src/components/ModularTable/ModularTable.tsx#ModularTable"})}catch(__react_docgen_typescript_loader_error){}var ModularTable_stories_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 getSampleData=function getSampleData(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return[{data:100*++i+i},{data:100*++i+i},{data:100*++i+i},{data:100*++i+i},{data:100*++i+i}]},Canvas=function makeShortcode(name){return function MDXDefaultShortcode(props){return console.warn("Component "+name+" was not imported, exported, or provided by MDXProvider as global scope"),Object(esm.b)("div",props)}}("Canvas"),layoutProps={getSampleData:getSampleData};function MDXContent(_ref){var components=_ref.components,props=ModularTable_stories_objectWithoutProperties(_ref,ModularTable_stories_excluded);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"ModularTable",component:ModularTable_ModularTable,mdxType:"Meta"}),Object(esm.b)("h3",null,"ModularTable"),Object(esm.b)("p",null,"This is a ",Object(esm.b)("a",{parentName:"p",href:"https://reactjs.org/"},"React")," component to support many table use cases."),Object(esm.b)("h3",null,"Props"),Object(esm.b)(blocks.e,{of:ModularTable_ModularTable,mdxType:"Props"}),Object(esm.b)("p",null,"ModularTable components accepts ",Object(esm.b)("inlineCode",{parentName:"p"},"columns")," and ",Object(esm.b)("inlineCode",{parentName:"p"},"data")," arguments in the same format as ",Object(esm.b)("a",{parentName:"p",href:"https://react-table.tanstack.com/docs/api/useTable"},Object(esm.b)("inlineCode",{parentName:"a"},"useTable"))," hook of the ReactTable library."),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"columns")," - The core columns configuration object for the entire table. ",Object(esm.b)("a",{parentName:"li",href:"https://react-table.tanstack.com/docs/api/useTable#column-options"},"https://react-table.tanstack.com/docs/api/useTable#column-options")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("inlineCode",{parentName:"li"},"data")," - The data array that you want to display on the table.")),Object(esm.b)(Notification.b,{type:"caution",status:"Important:",mdxType:"Notification"},"Values passed to both of these params have to me memoized (for example via ",Object(esm.b)("code",null,"React.useMemo"),"). Memoization ensures that our data isn't recreated on every render. If we didn't use ",Object(esm.b)("code",null,"React.useMemo"),", the table would think it was receiving new data on every render and attempt to recalulate a lot of logic every single time."),Object(esm.b)("h4",null,"Custom column options"),Object(esm.b)("p",null,"In addition to standard column propeties from ",Object(esm.b)("a",{parentName:"p",href:"https://react-table.tanstack.com/docs/api/useTable"},Object(esm.b)("inlineCode",{parentName:"a"},"useTable"))," ",Object(esm.b)("inlineCode",{parentName:"p"},"ModularTable")," accepts some custom properties."),Object(esm.b)("h5",null,"Class names"),Object(esm.b)("p",null,"Custom ",Object(esm.b)("inlineCode",{parentName:"p"},"className")," can be used to provide a specific CSS class name that will be added to all cells in given column.\nYou can also provide ",Object(esm.b)("inlineCode",{parentName:"p"},"getHeaderProps"),", ",Object(esm.b)("inlineCode",{parentName:"p"},"getRowProps")," and ",Object(esm.b)("inlineCode",{parentName:"p"},"getCellProps")," to resolve additional custom props for a specific element. More on this in ",Object(esm.b)("a",{parentName:"p",href:"https://react-table.tanstack.com/docs/api/useTable#cell-properties"},Object(esm.b)("inlineCode",{parentName:"a"},"useTable - cell properties")),"."),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-js"},'getCellProps={({ value, column }) => ({\n className: `table__cell--${column.id} ${value === "1 minute" ? "p-heading--5" : ""}`,\n})}\ncolumns = {\n Header: "Hidden on mobile",\n accessor: "example",\n className: "u-hide--small"\n}\n')),Object(esm.b)("h5",null,"Icons"),Object(esm.b)("p",null,"To show an icon in the cells of a column ",Object(esm.b)("inlineCode",{parentName:"p"},"getCellIcon")," function should be defined. The function takes a cell data as an argument and should return one of built in icons (from the ",Object(esm.b)("inlineCode",{parentName:"p"},"ICONS")," const), a string with a custom icon name, or ",Object(esm.b)("inlineCode",{parentName:"p"},"false")," if no icon should be shown."),Object(esm.b)("p",null,"The ",Object(esm.b)("inlineCode",{parentName:"p"},"ICONS")," const contains all ",Object(esm.b)("a",{parentName:"p",href:"https://vanillaframework.io/docs/patterns/icons"},"the Vanilla built in icons"),' such as "plus", "minus", "success", "error", etc.'),Object(esm.b)("p",null,"Product specific icons can be used as well, assuming that the product provides the necessary CSS styling and the icon follows the Vanilla naming convention ",Object(esm.b)("inlineCode",{parentName:"p"},"p-icon--{name}"),"."),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-js"},'columns = {\n Header: "With icons",\n accessor: "status",\n getCellIcon: ({ value }) => {\n return value === "released" ? ICONS.success : false;\n }\n}\n')),Object(esm.b)("h3",null,"Default"),Object(esm.b)(blocks.d,{mdxType:"Preview"},Object(esm.b)(blocks.f,{name:"Default",mdxType:"Story"},Object(esm.b)(ModularTable_ModularTable,{getCellProps:function getCellProps(_ref2){return{className:"1 minute"===_ref2.value?"p-heading--5":""}},columns:react_default.a.useMemo((function(){return[{Header:"ID",accessor:"buildId",Cell:function Cell(_ref3){var value=_ref3.value;return Object(esm.b)("a",{href:"#"},"#",value)}},{Header:"Architecture",accessor:"arch"},{Header:"Build Duration",accessor:"duration",className:"u-hide--small"},{Header:"Result",accessor:"result",Cell:function Cell(_ref4){switch(_ref4.value){case"released":return"Released";case"failed":return"Failed";default:return"Unknown"}},getCellIcon:function getCellIcon(_ref5){switch(_ref5.value){case"released":return Icon.a.success;case"failed":return Icon.a.error;default:return!1}}},{Header:"Build Finished",accessor:"finished",className:"u-align-text--right"}]}),[]),data:react_default.a.useMemo((function(){return[{buildId:"5432",arch:"arm64",duration:"5 minutes",result:"released",finished:"10 minutes ago"},{buildId:"1234",arch:"armhf",duration:"5 minutes",result:"failed",finished:"over 1 year ago"},{buildId:"1111",arch:"test64",duration:"1 minute",result:"other",finished:"ages ago"}]}),[]),mdxType:"ModularTable"}))),Object(esm.b)("h3",null,"Empty"),Object(esm.b)(blocks.d,{mdxType:"Preview"},Object(esm.b)(blocks.f,{name:"Empty",mdxType:"Story"},Object(esm.b)(ModularTable_ModularTable,{columns:react_default.a.useMemo((function(){return[{Header:"ID",accessor:"buildId"},{Header:"Architecture",accessor:"arch"},{Header:"Build Duration",accessor:"duration",className:"u-hide--small"},{Header:"Result",accessor:"result"},{Header:"Build Finished",accessor:"finished",className:"u-align-text--right"}]}),[]),data:[],emptyMsg:"Waiting for data...",mdxType:"ModularTable"}))),Object(esm.b)("h3",null,"Load more items"),Object(esm.b)("p",null,"Example below shows a basic ",Object(esm.b)("inlineCode",{parentName:"p"},"ModularTable")," with ",Object(esm.b)("inlineCode",{parentName:"p"},"SummaryButton")," component in the footer."),Object(esm.b)(Canvas,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Load more",mdxType:"Story"},(function(){var _useState2=_slicedToArray(Object(react.useState)(getSampleData()),2),data=_useState2[0],setData=_useState2[1],footer=data.length<20?Object(esm.b)("div",{className:"u-align--right"},Object(esm.b)(SummaryButton.a,{summary:"Showing "+data.length+" of 20 items.",label:"Show 5 more",onClick:function loadMore(){setData(data.concat(getSampleData(data.length)))},mdxType:"SummaryButton"})):null;return Object(esm.b)(ModularTable_ModularTable,{data:data,columns:[{Header:"Id",accessor:function accessor(d,i){return i}},{Header:"Data",accessor:"data"}],footer:footer,mdxType:"ModularTable"})}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var ModularTable_stories_defaultStory=function defaultStory(){return Object(esm.b)(ModularTable_ModularTable,{getCellProps:function getCellProps(_ref6){return{className:"1 minute"===_ref6.value?"p-heading--5":""}},columns:react_default.a.useMemo((function(){return[{Header:"ID",accessor:"buildId",Cell:function Cell(_ref7){var value=_ref7.value;return Object(esm.b)("a",{href:"#"},"#",value)}},{Header:"Architecture",accessor:"arch"},{Header:"Build Duration",accessor:"duration",className:"u-hide--small"},{Header:"Result",accessor:"result",Cell:function Cell(_ref8){switch(_ref8.value){case"released":return"Released";case"failed":return"Failed";default:return"Unknown"}},getCellIcon:function getCellIcon(_ref9){switch(_ref9.value){case"released":return Icon.a.success;case"failed":return Icon.a.error;default:return!1}}},{Header:"Build Finished",accessor:"finished",className:"u-align-text--right"}]}),[]),data:react_default.a.useMemo((function(){return[{buildId:"5432",arch:"arm64",duration:"5 minutes",result:"released",finished:"10 minutes ago"},{buildId:"1234",arch:"armhf",duration:"5 minutes",result:"failed",finished:"over 1 year ago"},{buildId:"1111",arch:"test64",duration:"1 minute",result:"other",finished:"ages ago"}]}),[])})};ModularTable_stories_defaultStory.displayName="defaultStory",ModularTable_stories_defaultStory.storyName="Default",ModularTable_stories_defaultStory.parameters={storySource:{source:' ({\n className: value === "1 minute" ? "p-heading--5" : ""\n})} columns={React.useMemo(() => [{\n Header: "ID",\n accessor: "buildId",\n Cell: ({\n value\n }) => #{value}\n}, {\n Header: "Architecture",\n accessor: "arch"\n}, {\n Header: "Build Duration",\n accessor: "duration",\n className: "u-hide--small"\n}, {\n Header: "Result",\n accessor: "result",\n Cell: ({\n value\n }) => {\n switch (value) {\n case "released":\n return "Released";\n\n case "failed":\n return "Failed";\n\n default:\n return "Unknown";\n }\n },\n getCellIcon: ({\n value\n }) => {\n switch (value) {\n case "released":\n return ICONS.success;\n\n case "failed":\n return ICONS.error;\n\n default:\n return false;\n }\n }\n}, {\n Header: "Build Finished",\n accessor: "finished",\n className: "u-align-text--right"\n}], [])} data={React.useMemo(() => [{\n buildId: "5432",\n arch: "arm64",\n duration: "5 minutes",\n result: "released",\n finished: "10 minutes ago"\n}, {\n buildId: "1234",\n arch: "armhf",\n duration: "5 minutes",\n result: "failed",\n finished: "over 1 year ago"\n}, {\n buildId: "1111",\n arch: "test64",\n duration: "1 minute",\n result: "other",\n finished: "ages ago"\n}], [])} />'}};var ModularTable_stories_empty=function empty(){return Object(esm.b)(ModularTable_ModularTable,{columns:react_default.a.useMemo((function(){return[{Header:"ID",accessor:"buildId"},{Header:"Architecture",accessor:"arch"},{Header:"Build Duration",accessor:"duration",className:"u-hide--small"},{Header:"Result",accessor:"result"},{Header:"Build Finished",accessor:"finished",className:"u-align-text--right"}]}),[]),data:[],emptyMsg:"Waiting for data..."})};ModularTable_stories_empty.displayName="empty",ModularTable_stories_empty.storyName="Empty",ModularTable_stories_empty.parameters={storySource:{source:' [{\n Header: "ID",\n accessor: "buildId"\n}, {\n Header: "Architecture",\n accessor: "arch"\n}, {\n Header: "Build Duration",\n accessor: "duration",\n className: "u-hide--small"\n}, {\n Header: "Result",\n accessor: "result"\n}, {\n Header: "Build Finished",\n accessor: "finished",\n className: "u-align-text--right"\n}], [])} data={[]} emptyMsg="Waiting for data..." />'}};var ModularTable_stories_loadMore=function loadMore(){var _useState4=_slicedToArray(Object(react.useState)(getSampleData()),2),data=_useState4[0],setData=_useState4[1],loadMore=function loadMore(){setData(data.concat(getSampleData(data.length)))},footer=data.length<20?Object(esm.b)("div",{className:"u-align--right"},Object(esm.b)(SummaryButton.a,{summary:"Showing "+data.length+" of 20 items.",label:"Show 5 more",onClick:loadMore})):null;return Object(esm.b)(ModularTable_ModularTable,{data:data,columns:[{Header:"Id",accessor:function accessor(d,i){return i}},{Header:"Data",accessor:"data"}],footer:footer})};ModularTable_stories_loadMore.displayName="loadMore",ModularTable_stories_loadMore.storyName="Load more",ModularTable_stories_loadMore.parameters={storySource:{source:'() => {\n const [data, setData] = useState(getSampleData());\n const hasMore = data.length < 20;\n\n const loadMore = () => {\n setData(data.concat(getSampleData(data.length)));\n };\n\n const columns = [{\n Header: "Id",\n accessor: (d, i) => i\n }, {\n Header: "Data",\n accessor: "data"\n }];\n const footer = hasMore ?
    \n \n
    : null;\n return ;\n}'}};var componentMeta={title:"ModularTable",component:ModularTable_ModularTable,includeStories:["defaultStory","empty","loadMore"]},mdxStoryNameToKey={Default:"defaultStory",Empty:"empty","Load more":"loadMore"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Navigation/Navigation.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Navigation_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"dark",(function(){return dark})),__webpack_require__.d(__webpack_exports__,"dropdown",(function(){return dropdown})),__webpack_require__.d(__webpack_exports__,"search",(function(){return search})),__webpack_require__.d(__webpack_exports__,"overridingTheLogo",(function(){return overridingTheLogo})),__webpack_require__.d(__webpack_exports__,"overridingTheLinkComponent",(function(){return overridingTheLinkComponent}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=(__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/classnames/index.js")),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["generateLink","isSelected","label","url"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 NavigationLink_NavigationLink=function NavigationLink(_ref){var generateLink=_ref.generateLink,isSelected=_ref.isSelected,label=_ref.label,url=_ref.url,props=_objectWithoutProperties(_ref,_excluded),ariaCurrent=isSelected?"page":void 0;return generateLink?Object(jsx_runtime.jsx)(jsx_runtime.Fragment,{children:generateLink(Object.assign({isSelected:isSelected,label:label,url:url,"aria-current":ariaCurrent},props))}):Object(jsx_runtime.jsx)("a",Object.assign({href:url},props,{"aria-current":ariaCurrent,children:label}))},Navigation_NavigationLink_NavigationLink=NavigationLink_NavigationLink;try{NavigationLink_NavigationLink.displayName="NavigationLink",NavigationLink_NavigationLink.__docgenInfo={description:"This component is used internally to display links inside the Navigation component.",displayName:"NavigationLink",props:{isSelected:{defaultValue:null,description:"Whether this nav item is currently selected.",name:"isSelected",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"The label of the link.",name:"label",required:!0,type:{name:"ReactNode"}},url:{defaultValue:null,description:"The URL of the link.",name:"url",required:!1,type:{name:"string"}},generateLink:{defaultValue:null,description:"",name:"generateLink",required:!1,type:{name:"GenerateLink"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Navigation/NavigationLink/NavigationLink.tsx#NavigationLink"]={docgenInfo:NavigationLink_NavigationLink.__docgenInfo,name:"NavigationLink",path:"src/components/Navigation/NavigationLink/NavigationLink.tsx#NavigationLink"})}catch(__react_docgen_typescript_loader_error){}var hooks=__webpack_require__("./src/hooks/index.ts"),NavigationMenu_excluded=["alignRight","generateLink","items","label"];function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 NavigationMenu_NavigationMenu=function NavigationMenu(_ref){var alignRight=_ref.alignRight,generateLink=_ref.generateLink,items=_ref.items,label=_ref.label,props=NavigationMenu_objectWithoutProperties(_ref,NavigationMenu_excluded),_useState2=_slicedToArray(Object(react.useState)(!1),2),isOpen=_useState2[0],setIsOpen=_useState2[1],closeMenu=Object(react.useCallback)((function(){return setIsOpen(!1)}),[setIsOpen]),_useClickOutside2=_slicedToArray(Object(hooks.a)(closeMenu),2),menuRef=_useClickOutside2[0],menuId=_useClickOutside2[1];return Object(jsx_runtime.jsxs)("li",Object.assign({},props,{className:classnames_default()(props.className,"p-navigation__item--dropdown-toggle",{"is-active":isOpen}),children:[Object(jsx_runtime.jsx)("button",{"aria-controls":menuId,className:"p-navigation__link u-no-margin--right",onClick:function onClick(evt){evt.preventDefault(),setIsOpen(!isOpen)},ref:menuRef,children:label}),Object(jsx_runtime.jsx)("ul",{"aria-hidden":!isOpen,className:classnames_default()("p-navigation__dropdown",{"p-navigation__dropdown--right":alignRight}),id:menuId,children:items.map((function(item,i){return Object(jsx_runtime.jsx)("li",{children:Object(jsx_runtime.jsx)(Navigation_NavigationLink_NavigationLink,Object.assign({},item,{generateLink:generateLink,className:classnames_default()("p-navigation__dropdown-item",item.className)}))},i)}))})]}))};NavigationMenu_NavigationMenu.displayName="NavigationMenu";var Theme,Navigation_NavigationMenu_NavigationMenu=NavigationMenu_NavigationMenu;try{NavigationMenu_NavigationMenu.displayName="NavigationMenu",NavigationMenu_NavigationMenu.__docgenInfo={description:"This component is used internally to display menus inside the Navigation component.",displayName:"NavigationMenu",props:{alignRight:{defaultValue:null,description:"Whether to align the dropdown to the right edge of the navigation item.",name:"alignRight",required:!1,type:{name:"boolean"}},items:{defaultValue:null,description:"The links to appear in the dropdown.",name:"items",required:!0,type:{name:"NavLink[]"}},label:{defaultValue:null,description:"The label of the navigation item that opens the menu.",name:"label",required:!0,type:{name:"string"}},generateLink:{defaultValue:null,description:"",name:"generateLink",required:!1,type:{name:"GenerateLink"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Navigation/NavigationMenu/NavigationMenu.tsx#NavigationMenu"]={docgenInfo:NavigationMenu_NavigationMenu.__docgenInfo,name:"NavigationMenu",path:"src/components/Navigation/NavigationMenu/NavigationMenu.tsx#NavigationMenu"})}catch(__react_docgen_typescript_loader_error){}!function(Theme){Theme.DARK="dark",Theme.LIGHT="light"}(Theme||(Theme={}));var SearchBox=__webpack_require__("./src/components/SearchBox/SearchBox.tsx"),Navigation_excluded=["url","src","title","icon","aria-current","aria-label"],_excluded2=["fullWidth","generateLink","items","itemsRight","leftNavProps","logo","navProps","rightNavProps","searchProps","theme"];function Navigation_slicedToArray(arr,i){return function Navigation_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function Navigation_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function Navigation_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return Navigation_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Navigation_arrayLikeToArray(o,minLen)}(arr,i)||function Navigation_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Navigation_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 Navigation_generateLogo=function generateLogo(logo,generateLink){if(function isLogoProps(logo){return!Object(react.isValidElement)(logo)}(logo)){var url=logo.url,src=logo.src,title=logo.title,icon=logo.icon,ariaCurrent=logo["aria-current"],ariaLabel=logo["aria-label"],logoProps=Navigation_objectWithoutProperties(logo,Navigation_excluded),content=Object(jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[Object(jsx_runtime.jsx)("div",{className:"p-navigation__logo-tag",children:null!=icon?icon:Object(jsx_runtime.jsx)("img",{className:"p-navigation__logo-icon",src:src,alt:""})}),Object(jsx_runtime.jsx)("span",{className:"p-navigation__logo-title",children:title})]});return Object(jsx_runtime.jsx)("div",Object.assign({className:"p-navigation__tagged-logo"},logoProps,{children:Object(jsx_runtime.jsx)(Navigation_NavigationLink_NavigationLink,{className:"p-navigation__link",url:url,label:content,"aria-label":ariaLabel,generateLink:generateLink,isSelected:!!ariaCurrent})}))}return Object(jsx_runtime.jsx)("div",{className:"p-navigation__logo",children:logo})};Navigation_generateLogo.displayName="generateLogo";var Navigation_generateItems=function generateItems(items,closeMobileMenu,generateLink){return items.map((function(item,i){return function isMenu(item){return"items"in item}(item)?Object(react.createElement)(Navigation_NavigationMenu_NavigationMenu,Object.assign({},item,{generateLink:generateLink,key:i})):Object(jsx_runtime.jsx)("li",{className:classnames_default()("p-navigation__item",{"is-selected":item.isSelected}),children:Object(jsx_runtime.jsx)(Navigation_NavigationLink_NavigationLink,Object.assign({},item,{onClick:function onClick(evt){var _item$onClick;null===(_item$onClick=item.onClick)||void 0===_item$onClick||_item$onClick.call(item,evt),closeMobileMenu()},generateLink:generateLink,className:classnames_default()("p-navigation__link",item.className)}))},i)}))},Navigation_Navigation=function Navigation(_ref){var fullWidth=_ref.fullWidth,generateLink=_ref.generateLink,items=_ref.items,itemsRight=_ref.itemsRight,leftNavProps=_ref.leftNavProps,logo=_ref.logo,navProps=_ref.navProps,rightNavProps=_ref.rightNavProps,searchProps=_ref.searchProps,theme=_ref.theme,headerProps=Navigation_objectWithoutProperties(_ref,_excluded2),searchRef=Object(react.useRef)(),_useState2=Navigation_slicedToArray(Object(react.useState)(!1),2),mobileMenuOpen=_useState2[0],setMobileMenuOpen=_useState2[1],_useState4=Navigation_slicedToArray(Object(react.useState)(!1),2),searchOpen=_useState4[0],setSearchOpen=_useState4[1],hasSearch=!!searchProps,toggleSearch=function toggleSearch(open){setSearchOpen(null!=open?open:!searchOpen),setMobileMenuOpen(!1)},closeMobileMenu=function closeMobileMenu(){mobileMenuOpen&&setMobileMenuOpen(!1)};return Object(hooks.d)((function(){return toggleSearch(!1)})),Object(react.useEffect)((function(){var _searchRef$current;searchOpen&&(null===(_searchRef$current=searchRef.current)||void 0===_searchRef$current||_searchRef$current.focus())}),[searchOpen]),Object(jsx_runtime.jsxs)("header",Object.assign({},headerProps,{className:classnames_default()("p-navigation",headerProps.className,{"has-menu-open":mobileMenuOpen,"has-search-open":searchOpen,"is-dark":theme===Theme.DARK,"is-light":theme===Theme.LIGHT}),children:[Object(jsx_runtime.jsxs)("div",{className:fullWidth?"p-navigation__row--full-width":"p-navigation__row",children:[Object(jsx_runtime.jsxs)("div",{className:"p-navigation__banner",children:[Navigation_generateLogo(logo,generateLink),Object(jsx_runtime.jsxs)("ul",{className:"p-navigation__items",children:[hasSearch?Object(jsx_runtime.jsx)("li",{className:"p-navigation__item",children:Object(jsx_runtime.jsx)("button",{"aria-label":"Search",className:"p-navigation__link--search-toggle",onClick:function onClick(){return toggleSearch()},children:Object(jsx_runtime.jsx)("span",{className:"p-navigation__search-label",children:"Search"})})}):null,Object(jsx_runtime.jsx)("li",{className:"p-navigation__item",children:Object(jsx_runtime.jsx)("button",{"aria-pressed":mobileMenuOpen,className:"p-navigation__link",onClick:function toggleMobileMenu(){setMobileMenuOpen(!mobileMenuOpen),setSearchOpen(!1)},children:mobileMenuOpen?"Close menu":"Menu"})})]})]}),Object(jsx_runtime.jsxs)("nav",Object.assign({className:"p-navigation__nav"},navProps,{children:[Object(jsx_runtime.jsx)("ul",Object.assign({className:"p-navigation__items"},leftNavProps,{children:items?Navigation_generateItems(items,closeMobileMenu,generateLink):null})),itemsRight||hasSearch?Object(jsx_runtime.jsxs)("ul",Object.assign({className:"p-navigation__items"},rightNavProps,{children:[itemsRight?Navigation_generateItems(itemsRight,closeMobileMenu,generateLink):null,hasSearch?Object(jsx_runtime.jsx)("li",{className:"p-navigation__item",children:Object(jsx_runtime.jsx)("button",{"aria-label":"Search",className:"p-navigation__link--search-toggle",onClick:function onClick(){return toggleSearch()},children:Object(jsx_runtime.jsx)("span",{className:"p-navigation__search-label",children:"Search"})})}):null]})):null,hasSearch?Object(jsx_runtime.jsx)("div",{className:"p-navigation__search","aria-hidden":!searchOpen,children:Object(jsx_runtime.jsx)(SearchBox.a,{ref:searchRef})}):null]}))]}),hasSearch?Object(jsx_runtime.jsx)("div",{className:"p-navigation__search-overlay",onClick:function onClick(){return setSearchOpen(!1)}}):null]}))};Navigation_Navigation.displayName="Navigation";var components_Navigation_Navigation=Navigation_Navigation;try{Navigation_Navigation.displayName="Navigation",Navigation_Navigation.__docgenInfo={description:"",displayName:"Navigation",props:{fullWidth:{defaultValue:null,description:"By default the header is constrained to the width of the grid. Use this\noption to make the header take the full width of the page.",name:"fullWidth",required:!1,type:{name:"boolean"}},generateLink:{defaultValue:null,description:"This function can be used to generate link elements when you don't want to\nuse a standard HTML anchor.",name:"generateLink",required:!1,type:{name:"GenerateLink"}},items:{defaultValue:null,description:"The main navigation items that appear on the left hand side next to the logo.",name:"items",required:!1,type:{name:"NavItem[]"}},itemsRight:{defaultValue:null,description:"Additional navigation items that appear on the right hand side of the\nnavigation banner.",name:"itemsRight",required:!1,type:{name:"NavItem[]"}},leftNavProps:{defaultValue:null,description:"Additional props to be applied to the nav element that wraps the main\nnavigation items on the left hand side.",name:"leftNavProps",required:!1,type:{name:"HTMLProps"}},logo:{defaultValue:null,description:"The logo can be defined either by providing props for the standard logo\nor the full logo markup when a custom logo is needed.",name:"logo",required:!0,type:{name:"ReactNode | LogoProps"}},navProps:{defaultValue:null,description:"Additional props to be applied to the nav element that wraps the\nleft and right nav items.",name:"navProps",required:!1,type:{name:"HTMLProps"}},rightNavProps:{defaultValue:null,description:"Additional props to be applied to the nav element that wraps the\nnavigation items on the right hand side.",name:"rightNavProps",required:!1,type:{name:"HTMLProps"}},searchProps:{defaultValue:null,description:"Props to pass to the SearchBox component. When these props are provided the\nsearch box will appear.",name:"searchProps",required:!1,type:{name:"SubComponentProps"}},theme:{defaultValue:null,description:"The header theme. When this is not provided the header will use the default\ntheme defined in the Vanilla settings.",name:"theme",required:!1,type:{name:"enum",value:[{value:'"dark"'},{value:'"light"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Navigation/Navigation.tsx#Navigation"]={docgenInfo:Navigation_Navigation.__docgenInfo,name:"Navigation",path:"src/components/Navigation/Navigation.tsx#Navigation"})}catch(__react_docgen_typescript_loader_error){}var Navigation_stories_excluded=["components"],Navigation_stories_excluded2=["url","label","isSelected"],_excluded3=["url","label","isSelected"];function Navigation_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function Navigation_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var dark=Navigation_stories_Template.bind({});dark.storyName="Dark",dark.args={items:[{label:"Products",url:"#"},{label:"Services",url:"#"},{label:"Partners",url:"#"}],logo:{src:"https://assets.ubuntu.com/v1/82818827-CoF_white.svg",title:"Canonical",url:"#"},theme:Theme.DARK},dark.parameters={storySource:{source:"args => "}};var dropdown=Navigation_stories_Template.bind({});dropdown.storyName="Dropdown",dropdown.args={items:[{items:[{label:"Introduction",url:"#"},{label:"News",url:"#"},{label:"Getting started - Command line",url:"#"},{label:"Getting started - OpenStack",url:"#"},{label:"Getting started - OpenNebula",url:"#"}],label:"LXD"},{items:[{label:"Introduction",url:"#"},{label:"News",url:"#"},{label:"Getting started",url:"#"}],label:"LXCFS"}],itemsRight:[{alignRight:!0,items:[{label:"Sign out",url:"#"}],label:"My account"}],logo:{src:"https://assets.ubuntu.com/v1/82818827-CoF_white.svg",title:"LXD",url:"#"}},dropdown.parameters={storySource:{source:"args => "}};var search=Navigation_stories_Template.bind({});search.storyName="Search",search.args={items:[{label:"Products",url:"#"},{label:"Services",url:"#"},{label:"Partners",url:"#"}],logo:{src:"https://assets.ubuntu.com/v1/82818827-CoF_white.svg",title:"Canonical",url:"#"},searchProps:{onSearch:function onSearch(){return null}}},search.parameters={storySource:{source:"args => "}};var overridingTheLogo=Navigation_stories_Template.bind({});overridingTheLogo.storyName="Overriding the logo",overridingTheLogo.args={items:[{label:"Products",url:"#"},{label:"Services",url:"#"},{label:"Partners",url:"#"}],logo:Object(esm.b)("img",{alt:"",src:"https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",width:"100"})},overridingTheLogo.parameters={storySource:{source:"args => "}};var overridingTheLinkComponent=Navigation_stories_Template.bind({});overridingTheLinkComponent.storyName="Overriding the link component",overridingTheLinkComponent.args={generateLink:function generateLink(_ref3){_ref3.url;var label=_ref3.label,props=(_ref3.isSelected,Navigation_stories_objectWithoutProperties(_ref3,_excluded3));return Object(esm.b)("button",props,label)},items:[{label:"Products",url:"#"},{label:"Services",url:"#"},{label:"Partners",url:"#"}],logo:{src:"https://assets.ubuntu.com/v1/82818827-CoF_white.svg",title:"Canonical",url:"#"}},overridingTheLinkComponent.parameters={storySource:{source:"args => "}};var componentMeta={title:"Navigation",component:components_Navigation_Navigation,includeStories:["defaultStory","dark","dropdown","search","overridingTheLogo","overridingTheLinkComponent"]},mdxStoryNameToKey={Default:"defaultStory",Dark:"dark",Dropdown:"dropdown",Search:"search","Overriding the logo":"overridingTheLogo","Overriding the link component":"overridingTheLinkComponent"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Notification/Notification.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"information",(function(){return information})),__webpack_require__.d(__webpack_exports__,"caution",(function(){return caution})),__webpack_require__.d(__webpack_exports__,"negative",(function(){return negative})),__webpack_require__.d(__webpack_exports__,"positive",(function(){return positive})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return inline})),__webpack_require__.d(__webpack_exports__,"borderless",(function(){return borderless})),__webpack_require__.d(__webpack_exports__,"actions",(function(){return actions})),__webpack_require__.d(__webpack_exports__,"dismissible",(function(){return dismissible})),__webpack_require__.d(__webpack_exports__,"timeout",(function(){return timeout})),__webpack_require__.d(__webpack_exports__,"timestamp",(function(){return timestamp}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.object.values.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/react/index.js"),_mdx_js_react__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_Notification__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./src/components/Notification/Notification.tsx"),_excluded=["components"];function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var caution=Template.bind({});caution.storyName="Caution",caution.args={children:"Custom storage configuration is only supported on Ubuntu, CentOS and RHEL.",severity:"caution",title:"Blocked"},caution.parameters={storySource:{source:"args => "}};var negative=Template.bind({});negative.storyName="Negative",negative.args={children:"Node must be connected to a network.",severity:"negative",title:"Error"},negative.parameters={storySource:{source:"args => "}};var positive=Template.bind({});positive.storyName="Positive",positive.args={children:"Code successfully reformatted.",severity:"positive",title:"Success"},positive.parameters={storySource:{source:"args => "}};var inline=Template.bind({});inline.storyName="Inline",inline.args={children:"Not enough space.",inline:!0,severity:"negative",title:"Error:"},inline.parameters={storySource:{source:"args => "}};var borderless=Template.bind({});borderless.storyName="Borderless",borderless.args={borderless:!0,children:"Only 8GB storage remaining.",severity:"caution",title:"Warning"},borderless.parameters={storySource:{source:"args => "}};var actions=Template.bind({});actions.storyName="Actions",actions.args={actions:[{label:"Action 1",onClick:function onClick(){return null}},{label:"Action 2",onClick:function onClick(){return null}}],children:"Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.",severity:"information",title:"Title"},actions.parameters={storySource:{source:"args => "}};var dismissible=function dismissible(){var _useState8=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_14__.useState)(!0),2),show=_useState8[0],setShow=_useState8[1];return show?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_15__.b)(_Notification__WEBPACK_IMPORTED_MODULE_18__.b,{onDismiss:function onDismiss(){return setShow(!1)},title:"Dismissible"},"Click the dismiss button to get rid of me."):null};dismissible.displayName="dismissible",dismissible.storyName="Dismissible",dismissible.parameters={storySource:{source:'() => {\n const [show, setShow] = useState(true);\n\n if (!show) {\n return null;\n }\n\n return setShow(false)} title="Dismissible">\n Click the dismiss button to get rid of me.\n ;\n}'}};var timeout=function timeout(){var _useState10=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_14__.useState)(!0),2),show=_useState10[0],setShow=_useState10[1],_useState12=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_14__.useState)(0),2),timer=_useState12[0],setTimer=_useState12[1];return show?Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_15__.b)(_Notification__WEBPACK_IMPORTED_MODULE_18__.b,{actions:[{label:"Start timer",onClick:function onClick(){return setTimer(3e3)}}],onDismiss:function onDismiss(){return setShow(!1)},timeout:timer,title:"Timeout"},"Click the action to start a 3 second timer."):null};timeout.displayName="timeout",timeout.storyName="Timeout",timeout.parameters={storySource:{source:'() => {\n const [show, setShow] = useState(true);\n const [timer, setTimer] = useState(0);\n\n if (!show) {\n return null;\n }\n\n return setTimer(3000)\n }]} onDismiss={() => setShow(false)} timeout={timer} title="Timeout">\n Click the action to start a 3 second timer.\n ;\n}'}};var timestamp=Template.bind({});timestamp.storyName="Timestamp",timestamp.args={children:"Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.",severity:"information",timestamp:"1h ago",title:"Title"},timestamp.parameters={storySource:{source:"args => "}};var componentMeta={title:"Notification",component:_Notification__WEBPACK_IMPORTED_MODULE_18__.b,argTypes:{borderless:{control:{type:"boolean"},defaultValue:!1},children:{control:{type:"text"}},inline:{control:{type:"boolean"},defaultValue:!1},severity:{control:{type:"radio"},defaultValue:_Notification__WEBPACK_IMPORTED_MODULE_18__.a.INFORMATION,options:Object.values(_Notification__WEBPACK_IMPORTED_MODULE_18__.a)},timestamp:{control:{type:"text"}},title:{control:{type:"text"}}},includeStories:["information","caution","negative","positive","inline","borderless","actions","dismissible","timeout","timestamp"]},mdxStoryNameToKey={Information:"information",Caution:"caution",Negative:"negative",Positive:"positive",Inline:"inline",Borderless:"borderless",Actions:"actions",Dismissible:"dismissible",Timeout:"timeout",Timestamp:"timestamp"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_15__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_16__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_15__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/Notification/Notification.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return NotificationSeverity}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_5__),react__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/react/index.js"),_Button__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/components/Button/index.ts"),_utils__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/utils.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["actions","borderless","children","className","close","inline","onDismiss","severity","status","timeout","timestamp","title","type"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 NotificationSeverity={CAUTION:"caution",INFORMATION:"information",NEGATIVE:"negative",POSITIVE:"positive"},Notification=function Notification(_ref){var _classNames,actions=_ref.actions,_ref$borderless=_ref.borderless,borderless=void 0!==_ref$borderless&&_ref$borderless,children=_ref.children,className=_ref.className,close=_ref.close,_ref$inline=_ref.inline,inline=void 0!==_ref$inline&&_ref$inline,onDismiss=_ref.onDismiss,_ref$severity=_ref.severity,severity=void 0===_ref$severity?NotificationSeverity.INFORMATION:_ref$severity,status=_ref.status,timeout=_ref.timeout,timestamp=_ref.timestamp,title=_ref.title,type=_ref.type,props=_objectWithoutProperties(_ref,_excluded),timeoutId=Object(react__WEBPACK_IMPORTED_MODULE_6__.useRef)(null),hasActions=(null==actions?void 0:actions.length)>0,showMeta=!!timestamp||hasActions;return Object(react__WEBPACK_IMPORTED_MODULE_6__.useEffect)((function(){return timeout&&onDismiss&&(timeoutId.current=setTimeout((function(){return onDismiss()}),timeout)),function(){return clearTimeout(timeoutId.current)}}),[onDismiss,timeout]),_utils__WEBPACK_IMPORTED_MODULE_8__.a&&(close||status||type)&&console.warn("The Notification component is using deprecated props. Refer to the deprecated list for details: https://canonical-web-and-design.github.io/react-components/?path=/docs/notification--information#deprecated"),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div",Object.assign({className:classnames__WEBPACK_IMPORTED_MODULE_5___default()(className,(_classNames={},_classNames["p-notification--"+severity]=!!severity,_classNames["p-notification"]=!severity,_classNames["is-borderless"]=borderless,_classNames["is-inline"]=inline,_classNames))},props,{children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div",{className:"p-notification__content",children:[title&&Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("h5",{className:"p-notification__title","data-testid":"notification-title",children:title}),inline&&Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.Fragment,{children:" "}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("p",{className:"p-notification__message",children:children}),onDismiss&&Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("button",{"aria-label":"Close notification",className:"p-notification__close","data-testid":"notification-close-button",onClick:onDismiss,children:"Close"})]}),showMeta&&Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div",{className:"p-notification__meta","data-testid":"notification-meta",children:[timestamp&&Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("span",{className:"p-notification__timestamp","data-testid":"notification-timestamp",children:timestamp}),hasActions?Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div",{className:"p-notification__actions",children:actions.map((function(action,i){return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_7__.b,{appearance:_Button__WEBPACK_IMPORTED_MODULE_7__.a.LINK,className:"p-notification__action","data-testid":"notification-action",onClick:action.onClick,children:action.label},action.label+"-"+i)}))}):null]})]}))};Notification.displayName="Notification",__webpack_exports__.b=Notification;try{Notification.displayName="Notification",Notification.__docgenInfo={description:"",displayName:"Notification",props:{actions:{defaultValue:null,description:"A list of up to two actions that the notification can perform.",name:"actions",required:!1,type:{name:"NotificationAction[]"}},borderless:{defaultValue:{value:"false"},description:"Whether the notification should not have a border.",name:"borderless",required:!1,type:{name:"boolean"}},children:{defaultValue:null,description:"The notification message content.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to apply to the parent notification element.",name:"className",required:!1,type:{name:"string"}},close:{defaultValue:null,description:"**Deprecated**. Use `onDismiss` instead.",name:"close",required:!1,type:{name:"never"}},inline:{defaultValue:{value:"false"},description:"Whether the title should display inline with the message.",name:"inline",required:!1,type:{name:"boolean"}},onDismiss:{defaultValue:null,description:"The function to run when dismissing/closing the notification.",name:"onDismiss",required:!1,type:{name:"() => void"}},severity:{defaultValue:{value:"information"},description:"The severity of the notification.",name:"severity",required:!1,type:{name:"enum",value:[{value:'"negative"'},{value:'"positive"'},{value:'"caution"'},{value:'"information"'}]}},status:{defaultValue:null,description:"**Deprecated**. Use `title` instead.",name:"status",required:!1,type:{name:"never"}},timeout:{defaultValue:null,description:"The amount of time (in ms) until the notification is automatically dismissed.",name:"timeout",required:!1,type:{name:"number"}},timestamp:{defaultValue:null,description:"A relevant timestamp for the notification, e.g. when it was created.",name:"timestamp",required:!1,type:{name:"ReactNode"}},title:{defaultValue:null,description:"The title of the notification.",name:"title",required:!1,type:{name:"ReactNode"}},type:{defaultValue:null,description:"**Deprecated**. Use `severity` instead.",name:"type",required:!1,type:{name:"never"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Notification/Notification.tsx#Notification"]={docgenInfo:Notification.__docgenInfo,name:"Notification",path:"src/components/Notification/Notification.tsx#Notification"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Pagination/Pagination.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"truncated",(function(){return truncated})),__webpack_require__.d(__webpack_exports__,"disabledControls",(function(){return disabledControls}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_Pagination__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/Pagination/Pagination.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var truncated=function truncated(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Pagination__WEBPACK_IMPORTED_MODULE_8__.a,{itemsPerPage:10,totalItems:1e3,paginate:function paginate(){},currentPage:34})};truncated.displayName="truncated",truncated.storyName="Truncated",truncated.parameters={storySource:{source:" {}} currentPage={34} />"}};var disabledControls=function disabledControls(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Pagination__WEBPACK_IMPORTED_MODULE_8__.a,{itemsPerPage:20,totalItems:100,paginate:function paginate(){},currentPage:1})};disabledControls.displayName="disabledControls",disabledControls.storyName="Disabled controls",disabledControls.parameters={storySource:{source:" {}} currentPage={1} />"}};var componentMeta={title:"Pagination",component:_Pagination__WEBPACK_IMPORTED_MODULE_8__.a,includeStories:["defaultStory","truncated","disabledControls"]},mdxStoryNameToKey={Default:"defaultStory",Truncated:"truncated","Disabled controls":"disabledControls"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/Pagination/Pagination.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),PaginationButton_PaginationButton=function PaginationButton(_ref){var direction=_ref.direction,onClick=_ref.onClick,_ref$disabled=_ref.disabled,disabled=void 0!==_ref$disabled&&_ref$disabled,label="back"===direction?"Previous page":"Next page";return Object(jsx_runtime.jsx)("li",{className:"p-pagination__item",children:Object(jsx_runtime.jsx)("button",{className:classnames_default()({"p-pagination__link--previous":"back"===direction,"p-pagination__link--next":"forward"===direction}),disabled:disabled,onClick:onClick,children:Object(jsx_runtime.jsx)("i",{className:"p-icon--chevron-down",children:label})})})};PaginationButton_PaginationButton.displayName="PaginationButton";var components_PaginationButton_PaginationButton=PaginationButton_PaginationButton;try{PaginationButton_PaginationButton.displayName="PaginationButton",PaginationButton_PaginationButton.__docgenInfo={description:"",displayName:"PaginationButton",props:{direction:{defaultValue:null,description:"The direction of the pagination.",name:"direction",required:!0,type:{name:"enum",value:[{value:'"forward"'},{value:'"back"'}]}},disabled:{defaultValue:{value:"false"},description:"Whether the pagination button should be disabled.",name:"disabled",required:!1,type:{name:"boolean"}},onClick:{defaultValue:null,description:"Function to handle clicking the pagination button.",name:"onClick",required:!0,type:{name:"MouseEventHandler"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/PaginationButton/PaginationButton.tsx#PaginationButton"]={docgenInfo:PaginationButton_PaginationButton.__docgenInfo,name:"PaginationButton",path:"src/components/PaginationButton/PaginationButton.tsx#PaginationButton"})}catch(__react_docgen_typescript_loader_error){}var PaginationItem_PaginationItem=function PaginationItem(_ref){var number=_ref.number,onClick=_ref.onClick,_ref$isActive=_ref.isActive,isActive=void 0!==_ref$isActive&&_ref$isActive;return Object(jsx_runtime.jsx)("li",{className:"p-pagination__item",children:Object(jsx_runtime.jsx)("button",{className:classnames_default()("p-pagination__link",{"is-active":isActive}),onClick:onClick,"aria-current":isActive?"page":void 0,children:number})})};PaginationItem_PaginationItem.displayName="PaginationItem";var components_PaginationItem_PaginationItem=PaginationItem_PaginationItem;try{PaginationItem_PaginationItem.displayName="PaginationItem",PaginationItem_PaginationItem.__docgenInfo={description:"",displayName:"PaginationItem",props:{isActive:{defaultValue:{value:"false"},description:"Whether the pagination item is active, i.e. the current page is this page.",name:"isActive",required:!1,type:{name:"boolean"}},number:{defaultValue:null,description:"The page number.",name:"number",required:!0,type:{name:"number"}},onClick:{defaultValue:null,description:"Function to handle clicking the pagination item.",name:"onClick",required:!0,type:{name:"MouseEventHandler"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/PaginationItem/PaginationItem.tsx#PaginationItem"]={docgenInfo:PaginationItem_PaginationItem.__docgenInfo,name:"PaginationItem",path:"src/components/PaginationItem/PaginationItem.tsx#PaginationItem"})}catch(__react_docgen_typescript_loader_error){}var _excluded=["itemsPerPage","totalItems","paginate","currentPage","scrollToTop","truncateThreshold"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Pagination_generatePaginationItems=function generatePaginationItems(pageNumbers,currentPage,truncateThreshold,changePage){var visiblePages,lastPage=pageNumbers.length,truncated=lastPage>truncateThreshold;if(truncated){var start=currentPage-2,end=currentPage+1;1===currentPage&&(start=1,end=currentPage+3),2===currentPage&&(start=1,end=currentPage+2),currentPage!==lastPage&¤tPage!==lastPage-1||(start=lastPage-4,end=lastPage-1),visiblePages=pageNumbers.slice(start,end)}else visiblePages=pageNumbers;var items=[];return truncated&&(items.push(Object(jsx_runtime.jsx)(components_PaginationItem_PaginationItem,{number:1,isActive:1===currentPage,onClick:function onClick(){return changePage(1)}},1)),[1,2,3].includes(currentPage)||items.push(Object(jsx_runtime.jsx)(Pagination_PaginationItemSeparator,{},"sep1"))),items.push(visiblePages.map((function(number){return Object(jsx_runtime.jsx)(components_PaginationItem_PaginationItem,{number:number,isActive:number===currentPage,onClick:function onClick(){return changePage(number)}},number)}))),truncated&&([lastPage,lastPage-1,lastPage-2].includes(currentPage)||items.push(Object(jsx_runtime.jsx)(Pagination_PaginationItemSeparator,{},"sep2")),items.push(Object(jsx_runtime.jsx)(components_PaginationItem_PaginationItem,{number:lastPage,isActive:currentPage===lastPage,onClick:function onClick(){return changePage(lastPage)}},lastPage))),items},Pagination_PaginationItemSeparator=function PaginationItemSeparator(){return Object(jsx_runtime.jsx)("li",{className:"p-pagination__item p-pagination__item--truncation",children:"…"})};Pagination_PaginationItemSeparator.displayName="PaginationItemSeparator";var Pagination_Pagination=function Pagination(_ref){var itemsPerPage=_ref.itemsPerPage,totalItems=_ref.totalItems,paginate=_ref.paginate,currentPage=_ref.currentPage,scrollToTop=_ref.scrollToTop,_ref$truncateThreshol=_ref.truncateThreshold,truncateThreshold=void 0===_ref$truncateThreshol?10:_ref$truncateThreshol,navProps=_objectWithoutProperties(_ref,_excluded);if(totalItems<=itemsPerPage)return null;for(var pageNumbers=[],i=1;i<=Math.ceil(totalItems/itemsPerPage);i++)pageNumbers.push(i);var changePage=function changePage(page){paginate(page),scrollToTop&&function scrollTop(){window.scrollTo(0,0)}()};return Object(jsx_runtime.jsx)("nav",Object.assign({},navProps,{children:Object(jsx_runtime.jsxs)("ul",{className:"p-pagination",children:[Object(jsx_runtime.jsx)(components_PaginationButton_PaginationButton,{direction:"back",disabled:1===currentPage,onClick:function onClick(){return changePage(currentPage-1)}},"back"),Pagination_generatePaginationItems(pageNumbers,currentPage,truncateThreshold,changePage),Object(jsx_runtime.jsx)(components_PaginationButton_PaginationButton,{direction:"forward",disabled:currentPage===pageNumbers.length,onClick:function onClick(){return changePage(currentPage+1)}},"forward")]})}))};Pagination_Pagination.displayName="Pagination";__webpack_exports__.a=Pagination_Pagination;try{Pagination_Pagination.displayName="Pagination",Pagination_Pagination.__docgenInfo={description:"",displayName:"Pagination",props:{currentPage:{defaultValue:null,description:"The current page being viewed.",name:"currentPage",required:!0,type:{name:"number"}},itemsPerPage:{defaultValue:null,description:"The number of items to show per page.",name:"itemsPerPage",required:!0,type:{name:"number"}},paginate:{defaultValue:null,description:"Function to handle paginating the items.",name:"paginate",required:!0,type:{name:"(page: number) => void"}},totalItems:{defaultValue:null,description:"The total number of items.",name:"totalItems",required:!0,type:{name:"number"}},scrollToTop:{defaultValue:null,description:"Whether to scroll to the top of the list on page change.",name:"scrollToTop",required:!1,type:{name:"boolean"}},truncateThreshold:{defaultValue:{value:"10"},description:"The number of pages at which to truncate the pagination items.",name:"truncateThreshold",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pagination/Pagination.tsx#Pagination"]={docgenInfo:Pagination_Pagination.__docgenInfo,name:"Pagination",path:"src/components/Pagination/Pagination.tsx#Pagination"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/PasswordToggle/PasswordToggle.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return PasswordToggle_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"readOnly",(function(){return PasswordToggle_stories_readOnly})),__webpack_require__.d(__webpack_exports__,"error",(function(){return PasswordToggle_stories_error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return PasswordToggle_stories_success})),__webpack_require__.d(__webpack_exports__,"caution",(function(){return PasswordToggle_stories_caution})),__webpack_require__.d(__webpack_exports__,"help",(function(){return PasswordToggle_stories_help})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return PasswordToggle_stories_disabled}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=(__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/classnames/index.js")),classnames_default=__webpack_require__.n(classnames),Button=__webpack_require__("./src/components/Button/index.ts"),Field=__webpack_require__("./src/components/Field/index.ts"),Label=__webpack_require__("./src/components/Label/index.ts"),hooks=__webpack_require__("./src/hooks/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["caution","className","error","help","id","label","readOnly","required","success","type","wrapperClassName"];function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(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 PasswordToggle=react_default.a.forwardRef((function(_ref,ref){var caution=_ref.caution,className=_ref.className,error=_ref.error,help=_ref.help,id=_ref.id,label=_ref.label,readOnly=_ref.readOnly,required=_ref.required,success=_ref.success,type=_ref.type,wrapperClassName=_ref.wrapperClassName,inputProps=_objectWithoutProperties(_ref,_excluded),_useState2=_slicedToArray(Object(react.useState)(!0),2),isPassword=_useState2[0],setIsPassword=_useState2[1],validationId=Object(hooks.b)(),helpId=Object(hooks.b)(),hasError=!!error;return Object(jsx_runtime.jsxs)(Field.a,{caution:caution,className:wrapperClassName,error:error,help:help,helpId:helpId,required:required,success:success,validationId:validationId,children:[Object(jsx_runtime.jsxs)("div",{className:"p-form-password-toggle",children:[Object(jsx_runtime.jsx)(Label.a,{forId:id,required:required,children:label}),Object(jsx_runtime.jsxs)(Button.b,{appearance:"base",type:type||"button",className:"u-no-margin--bottom",hasIcon:!0,"aria-controls":id,"aria-live":"polite",onClick:function onClick(){return function togglePassword(){setIsPassword(!isPassword)}()},children:[Object(jsx_runtime.jsx)("span",{className:"p-form-password-toggle__label",children:isPassword?"Show":"Hide"}),Object(jsx_runtime.jsx)("i",{className:isPassword?"p-icon--show":"p-icon--hide"})]})]}),Object(jsx_runtime.jsx)("input",Object.assign({"aria-describedby":help?helpId:null,"aria-errormessage":hasError?validationId:null,"aria-invalid":hasError,className:classnames_default()("p-form-validation__input",className),id:id,readOnly:readOnly,ref:ref,type:isPassword?"password":"text"},inputProps))]})})),PasswordToggle_PasswordToggle=PasswordToggle;try{PasswordToggle.displayName="PasswordToggle",PasswordToggle.__docgenInfo={description:"",displayName:"PasswordToggle",props:{caution:{defaultValue:null,description:"The content for caution validation.",name:"caution",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the input element.",name:"className",required:!1,type:{name:"string"}},error:{defaultValue:null,description:"The content for error validation.",name:"error",required:!1,type:{name:"ReactNode"}},help:{defaultValue:null,description:"Help text to show below the field.",name:"help",required:!1,type:{name:"ReactNode"}},id:{defaultValue:null,description:"The id of the input.",name:"id",required:!0,type:{name:"string"}},label:{defaultValue:null,description:"The label for the field.",name:"label",required:!1,type:{name:"ReactNode"}},readOnly:{defaultValue:null,description:"Whether the field is read only.",name:"readOnly",required:!1,type:{name:"boolean"}},required:{defaultValue:null,description:"Whether the field is required.",name:"required",required:!1,type:{name:"boolean"}},success:{defaultValue:null,description:"The content for success validation.",name:"success",required:!1,type:{name:"ReactNode"}},type:{defaultValue:null,description:"The content for success validation.",name:"type",required:!1,type:{name:"enum",value:[{value:'"button"'},{value:'"submit"'},{value:'"reset"'}]}},wrapperClassName:{defaultValue:null,description:"Optional class(es) to pass to the wrapping Field component",name:"wrapperClassName",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/PasswordToggle/PasswordToggle.tsx#PasswordToggle"]={docgenInfo:PasswordToggle.__docgenInfo,name:"PasswordToggle",path:"src/components/PasswordToggle/PasswordToggle.tsx#PasswordToggle"})}catch(__react_docgen_typescript_loader_error){}var PasswordToggle_stories_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i=0||(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 layoutProps={};function MDXContent(_ref){var components=_ref.components,props=PasswordToggle_stories_objectWithoutProperties(_ref,PasswordToggle_stories_excluded);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"PasswordToggle",component:PasswordToggle_PasswordToggle,mdxType:"Meta"}),Object(esm.b)("h3",null,"PasswordToggle"),Object(esm.b)("p",null,"This is a ",Object(esm.b)("a",{parentName:"p",href:"https://reactjs.org/"},"React")," component for the Vanilla ",Object(esm.b)("a",{parentName:"p",href:"https://docs.vanillaframework.io/base/forms/#password-toggle"},"Password Toggle"),"."),Object(esm.b)("p",null,"It can be used when an input needs to obscure its value, whilst giving the user a way to reveal it if needed."),Object(esm.b)("h3",null,"Props"),Object(esm.b)(blocks.a,{of:PasswordToggle_PasswordToggle,mdxType:"ArgsTable"}),Object(esm.b)("h3",null,"Default"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Default",mdxType:"Story"},Object(esm.b)(PasswordToggle_PasswordToggle,{id:"examplePassword1",label:"Password",mdxType:"PasswordToggle"}))),Object(esm.b)("h3",null,"Read only"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Read only",mdxType:"Story"},Object(esm.b)(PasswordToggle_PasswordToggle,{id:"examplePassword2",label:"Password",readOnly:!0,defaultValue:"password",mdxType:"PasswordToggle"}))),Object(esm.b)("h3",null,"Error"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Error",mdxType:"Story"},Object(esm.b)(PasswordToggle_PasswordToggle,{error:"This field is required.",id:"examplePassword3",label:"Password",defaultValue:"password",mdxType:"PasswordToggle"}))),Object(esm.b)("h3",null,"Success"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Success",mdxType:"Story"},Object(esm.b)(PasswordToggle_PasswordToggle,{success:"Strong password",id:"examplePassword3",label:"Password",defaultValue:"password",mdxType:"PasswordToggle"}))),Object(esm.b)("h3",null,"Caution"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Caution",mdxType:"Story"},Object(esm.b)(PasswordToggle_PasswordToggle,{caution:"Weak password",id:"examplePassword4",label:"Password",defaultValue:"password",mdxType:"PasswordToggle"}))),Object(esm.b)("h3",null,"Help"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Help",mdxType:"Story"},Object(esm.b)(PasswordToggle_PasswordToggle,{help:"Enter a secure password",id:"examplePassword5",label:"Password",mdxType:"PasswordToggle"}))),Object(esm.b)("h3",null,"Disabled"),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.f,{name:"Disabled",mdxType:"Story"},Object(esm.b)(PasswordToggle_PasswordToggle,{disabled:!0,id:"examplePassword6",label:"Password",defaultValue:"password",mdxType:"PasswordToggle"}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var PasswordToggle_stories_defaultStory=function defaultStory(){return Object(esm.b)(PasswordToggle_PasswordToggle,{id:"examplePassword1",label:"Password"})};PasswordToggle_stories_defaultStory.displayName="defaultStory",PasswordToggle_stories_defaultStory.storyName="Default",PasswordToggle_stories_defaultStory.parameters={storySource:{source:''}};var PasswordToggle_stories_readOnly=function readOnly(){return Object(esm.b)(PasswordToggle_PasswordToggle,{id:"examplePassword2",label:"Password",readOnly:!0,defaultValue:"password"})};PasswordToggle_stories_readOnly.displayName="readOnly",PasswordToggle_stories_readOnly.storyName="Read only",PasswordToggle_stories_readOnly.parameters={storySource:{source:''}};var PasswordToggle_stories_error=function error(){return Object(esm.b)(PasswordToggle_PasswordToggle,{error:"This field is required.",id:"examplePassword3",label:"Password",defaultValue:"password"})};PasswordToggle_stories_error.displayName="error",PasswordToggle_stories_error.storyName="Error",PasswordToggle_stories_error.parameters={storySource:{source:''}};var PasswordToggle_stories_success=function success(){return Object(esm.b)(PasswordToggle_PasswordToggle,{success:"Strong password",id:"examplePassword3",label:"Password",defaultValue:"password"})};PasswordToggle_stories_success.displayName="success",PasswordToggle_stories_success.storyName="Success",PasswordToggle_stories_success.parameters={storySource:{source:''}};var PasswordToggle_stories_caution=function caution(){return Object(esm.b)(PasswordToggle_PasswordToggle,{caution:"Weak password",id:"examplePassword4",label:"Password",defaultValue:"password"})};PasswordToggle_stories_caution.displayName="caution",PasswordToggle_stories_caution.storyName="Caution",PasswordToggle_stories_caution.parameters={storySource:{source:''}};var PasswordToggle_stories_help=function help(){return Object(esm.b)(PasswordToggle_PasswordToggle,{help:"Enter a secure password",id:"examplePassword5",label:"Password"})};PasswordToggle_stories_help.displayName="help",PasswordToggle_stories_help.storyName="Help",PasswordToggle_stories_help.parameters={storySource:{source:''}};var PasswordToggle_stories_disabled=function disabled(){return Object(esm.b)(PasswordToggle_PasswordToggle,{disabled:!0,id:"examplePassword6",label:"Password",defaultValue:"password"})};PasswordToggle_stories_disabled.displayName="disabled",PasswordToggle_stories_disabled.storyName="Disabled",PasswordToggle_stories_disabled.parameters={storySource:{source:''}};var componentMeta={title:"PasswordToggle",component:PasswordToggle_PasswordToggle,includeStories:["defaultStory","readOnly","error","success","caution","help","disabled"]},mdxStoryNameToKey={Default:"defaultStory","Read only":"readOnly",Error:"error",Success:"success",Caution:"caution",Help:"help",Disabled:"disabled"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/RadioInput/RadioInput.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"children",(function(){return children})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"required",(function(){return required})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return inline}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_RadioInput__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/RadioInput/RadioInput.tsx"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i=0||(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 layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.c,{title:"RadioInput",component:_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,argTypes:{label:{control:{type:"text"},defaultValue:"RadioInput"},disabled:{control:{type:"boolean"}},required:{control:{type:"boolean"}},inline:{control:{type:"boolean"}},indeterminate:{control:{type:"boolean"}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"RadioInput"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"p",href:"https://reactjs.org/"},"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"p",href:"https://docs.vanillaframework.io/docs/base/forms#radio-button"},"Radio input"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Use radio buttons to select one of the given set of options."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.a,{of:_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,mdxType:"ArgsTable"})," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"RadioInput",mdxType:"RadioInput"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Label with child elements"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Children",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,null,"I agree to ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"http://ubuntu.com/legal"},"Terms and Conditions")),name:"RadioInput",mdxType:"RadioInput"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Disabled"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Disabled",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Disabled",name:"RadioInput",disabled:!0,mdxType:"RadioInput"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Required"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Required",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Required",name:"RadioInput",required:!0,mdxType:"RadioInput"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Inline"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Inline",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Inline",name:"RadioInput",inline:!0,mdxType:"RadioInput"}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"RadioInput"})};defaultStory.displayName="defaultStory",defaultStory.storyName="Default",defaultStory.parameters={storySource:{source:''}};var children=function children(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,null,"I agree to ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"http://ubuntu.com/legal"},"Terms and Conditions")),name:"RadioInput"})};children.displayName="children",children.storyName="Children",children.parameters={storySource:{source:'\n I agree to Terms and Conditions\n } name="RadioInput">'}};var disabled=function disabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Disabled",name:"RadioInput",disabled:!0})};disabled.displayName="disabled",disabled.storyName="Disabled",disabled.parameters={storySource:{source:''}};var required=function required(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Required",name:"RadioInput",required:!0})};required.displayName="required",required.storyName="Required",required.parameters={storySource:{source:''}};var inline=function inline(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Inline",name:"RadioInput",inline:!0})};inline.displayName="inline",inline.storyName="Inline",inline.parameters={storySource:{source:''}};var componentMeta={title:"RadioInput",component:_RadioInput__WEBPACK_IMPORTED_MODULE_8__.a,argTypes:{label:{control:{type:"text"},defaultValue:"RadioInput"},disabled:{control:{type:"boolean"}},required:{control:{type:"boolean"}},inline:{control:{type:"boolean"}},indeterminate:{control:{type:"boolean"}}},includeStories:["defaultStory","children","disabled","required","inline"]},mdxStoryNameToKey={Default:"defaultStory",Children:"children",Disabled:"disabled",Required:"required",Inline:"inline"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/RadioInput/RadioInput.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _CheckableInput__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/CheckableInput/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["label"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 RadioInput=function RadioInput(_ref){var label=_ref.label,radioProps=_objectWithoutProperties(_ref,_excluded);return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_CheckableInput__WEBPACK_IMPORTED_MODULE_5__.a,Object.assign({inputType:"radio",label:label},radioProps))};RadioInput.displayName="RadioInput",__webpack_exports__.a=RadioInput;try{RadioInput.displayName="RadioInput",RadioInput.__docgenInfo={description:"",displayName:"RadioInput",props:{label:{defaultValue:null,description:"The label for the input element.",name:"label",required:!0,type:{name:"ReactNode"}},inline:{defaultValue:null,description:"Ensures the input and the label text are properly aligned with other inline text.",name:"inline",required:!1,type:{name:"boolean"}},labelClassName:{defaultValue:null,description:"Optional class(es) to pass to the label element.",name:"labelClassName",required:!1,type:{name:"string"}},indeterminate:{defaultValue:null,description:"Whether the input element should display in indeterminate state.",name:"indeterminate",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/RadioInput/RadioInput.tsx#RadioInput"]={docgenInfo:RadioInput.__docgenInfo,name:"RadioInput",path:"src/components/RadioInput/RadioInput.tsx#RadioInput"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Row/Row.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_Row__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/Row/Row.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var componentMeta={title:"Row",component:_Row__WEBPACK_IMPORTED_MODULE_8__.a,argTypes:{children:{control:{type:"text"}}},includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/Row/Row.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_4__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/react/jsx-runtime.js")),_excluded=["children","className"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Row=function Row(_ref){var children=_ref.children,className=_ref.className,props=_objectWithoutProperties(_ref,_excluded);return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("div",Object.assign({className:classnames__WEBPACK_IMPORTED_MODULE_4___default()(className,"row")},props,{children:children}))};Row.displayName="Row",__webpack_exports__.a=Row;try{Row.displayName="Row",Row.__docgenInfo={description:"",displayName:"Row",props:{children:{defaultValue:null,description:"The content of the row.",name:"children",required:!0,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping div element.",name:"className",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Row/Row.tsx#Row"]={docgenInfo:Row.__docgenInfo,name:"Row",path:"src/components/Row/Row.tsx#Row"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Row/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";var _Row__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/components/Row/Row.tsx");__webpack_require__.d(__webpack_exports__,"a",(function(){return _Row__WEBPACK_IMPORTED_MODULE_0__.a}))},"./src/components/SearchAndFilter/SearchAndFilter.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return SearchAndFilter_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"withDataSet",(function(){return withDataSet})),__webpack_require__.d(__webpack_exports__,"withExistingSearchData",(function(){return withExistingSearchData}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),prop_types=(__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/prop-types/index.js")),prop_types_default=__webpack_require__.n(prop_types),Chip=(__webpack_require__("./node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("./node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("./node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("./node_modules/core-js/modules/es.string.trim.js"),__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/core-js/modules/es.object.values.js"),__webpack_require__("./node_modules/core-js/modules/es.string.match.js"),__webpack_require__("./node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("./node_modules/core-js/modules/es.object.entries.js"),__webpack_require__("./src/components/Chip/Chip.tsx")),overflowingChipsCount=function overflowingChipsCount(chips,overflowRowLimit){var overflowChips=0;return chips&&chips.forEach((function(chip){chip.offsetTop>chip.offsetHeight*overflowRowLimit&&overflowChips++})),overflowChips},isChipInArray=function isChipInArray(chip,existingArr){return null==existingArr?void 0:existingArr.some((function(searchDataItem){return searchDataItem.lead===chip.lead&&searchDataItem.value===chip.value}))};try{overflowingChipsCount.displayName="overflowingChipsCount",overflowingChipsCount.__docgenInfo={description:"Return number of overflowing chips given a row threshold",displayName:"overflowingChipsCount",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchAndFilter/utils.tsx#overflowingChipsCount"]={docgenInfo:overflowingChipsCount.__docgenInfo,name:"overflowingChipsCount",path:"src/components/SearchAndFilter/utils.tsx#overflowingChipsCount"})}catch(__react_docgen_typescript_loader_error){}try{isChipInArray.displayName="isChipInArray",isChipInArray.__docgenInfo={description:"Check if supplied chip object already exists in searchData prop",displayName:"isChipInArray",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchAndFilter/utils.tsx#isChipInArray"]={docgenInfo:isChipInArray.__docgenInfo,name:"isChipInArray",path:"src/components/SearchAndFilter/utils.tsx#isChipInArray"})}catch(__react_docgen_typescript_loader_error){}var utils=__webpack_require__("./src/utils.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i0&&Object(jsx_runtime.jsx)("h3",{className:"p-filter-panel-section__heading",dangerouslySetInnerHTML:{__html:Object(utils.b)(heading,searchTerm).text}}),Object(jsx_runtime.jsxs)("div",{className:"p-filter-panel-section__chips","aria-expanded":expanded,ref:chipWrapper,children:[null==chips?void 0:chips.map((function(chip){return(Object(utils.b)(chip.value,searchTerm).match||""===searchTerm||Object(utils.b)(heading,searchTerm).match)&&!sectionHidden&&Object(jsx_runtime.jsx)(Chip.a,{lead:chip.lead,value:chip.value,selected:isChipInArray(chip,searchData),subString:searchTerm,onClick:function onClick(){return function handleChipClick(chip){toggleSelected(chip)}(chip)}},chip.lead+"+"+chip.value)})),overflowCounter>0&&!expanded&&Object(jsx_runtime.jsxs)("span",{className:"p-filter-panel-section__counter",onClick:showAllChips,onKeyPress:showAllChips,tabIndex:0,children:["+",overflowCounter]})]})]})})};FilterPanelSection_FilterPanelSection.propTypes={searchData:prop_types_default.a.array.isRequired,searchTerm:prop_types_default.a.string.isRequired,sectionHidden:prop_types_default.a.bool,toggleSelected:prop_types_default.a.func.isRequired};var SearchAndFilter_FilterPanelSection_FilterPanelSection=FilterPanelSection_FilterPanelSection;try{FilterPanelSection_FilterPanelSection.displayName="FilterPanelSection",FilterPanelSection_FilterPanelSection.__docgenInfo={description:"",displayName:"FilterPanelSection",props:{data:{defaultValue:null,description:"The chip data to display in the panel.",name:"data",required:!0,type:{name:"SearchAndFilterData"}},searchData:{defaultValue:null,description:"The current search chips.",name:"searchData",required:!0,type:{name:"SearchAndFilterChip[]"}},searchTerm:{defaultValue:{value:""},description:"A search string.",name:"searchTerm",required:!1,type:{name:"string"}},sectionHidden:{defaultValue:null,description:"Whether the chips should be hidden.",name:"sectionHidden",required:!1,type:{name:"boolean"}},toggleSelected:{defaultValue:null,description:"A function to toggle whether a chip is selected.",name:"toggleSelected",required:!0,type:{name:"(chip: SearchAndFilterChip) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.tsx#FilterPanelSection"]={docgenInfo:FilterPanelSection_FilterPanelSection.__docgenInfo,name:"FilterPanelSection",path:"src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.tsx#FilterPanelSection"})}catch(__react_docgen_typescript_loader_error){}var hooks=__webpack_require__("./src/hooks/index.ts");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return SearchAndFilter_arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||SearchAndFilter_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function SearchAndFilter_slicedToArray(arr,i){return function SearchAndFilter_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function SearchAndFilter_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||SearchAndFilter_unsupportedIterableToArray(arr,i)||function SearchAndFilter_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function SearchAndFilter_unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return SearchAndFilter_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?SearchAndFilter_arrayLikeToArray(o,minLen):void 0}}function SearchAndFilter_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);isearchContainer.offsetHeight&&setSearchBoxExpanded(!0);var placeholder=searchData.length?"Add filter":"Search and filter";return Object(jsx_runtime.jsxs)("div",{className:"p-search-and-filter",ref:searchAndFilterRef,onClick:function onClick(){return filterPanelHidden&&setFilterPanelHidden(!1)},children:[Object(jsx_runtime.jsxs)("div",{className:"p-search-and-filter__search-container","aria-expanded":searchBoxExpanded,"data-active":searchContainerActive||0===searchData.length,"data-empty":searchData.length<=0,ref:searchContainerRef,children:[""!==searchTerm&&Object(jsx_runtime.jsx)("button",{className:"p-search-and-filter__clear",onClick:function onClick(){return function clearAllSearchTerms(){setSearchTerm("")}()},children:Object(jsx_runtime.jsx)("i",{className:"p-icon--close"})}),Object.values(searchData).map((function(chip){return Object(jsx_runtime.jsx)(Chip.a,{lead:chip.lead,value:chip.value,onDismiss:function onDismiss(){return function removeFromSelected(chip){if(searchData.includes(chip)){var updatedSelected=searchData.filter((function(searchDataChip){return searchDataChip!==chip}));setSearchData(updatedSelected)}}(chip)},selected:!0,quoteValue:chip.quoteValue},"search-"+chip.lead+"+"+chip.value)})),Object(jsx_runtime.jsxs)("form",{className:"p-search-and-filter__box",onSubmit:function onSubmit(e){e.preventDefault(),handleSubmit()},"data-overflowing":searchBoxExpanded,ref:searchBoxRef,children:[Object(jsx_runtime.jsx)("label",{className:"u-off-screen",htmlFor:"search-and-filter-input",children:searchData.length?"Add filter":"Search and filter"}),Object(jsx_runtime.jsx)("input",{autoComplete:"off",className:"p-search-and-filter__input",id:"search-and-filter-input",name:"search",onChange:function onChange(e){return function searchOnChange(searchTerm){setSearchTerm(searchTerm)}(e.target.value)},placeholder:placeholder,type:"search",value:searchTerm}),Object(jsx_runtime.jsx)("button",{className:"u-off-screen",type:"submit",children:"Search"})]}),overflowSearchTermCounter>0&&Object(jsx_runtime.jsxs)("span",{className:"p-search-and-filter__selected-count",onClick:function onClick(){return setSearchBoxExpanded(!0)},onKeyDown:function onKeyDown(){return setSearchBoxExpanded(!0)},role:"button",tabIndex:0,children:["+",overflowSearchTermCounter]})]}),(filterPanelData.length>0||searchTerm.length>0)&&Object(jsx_runtime.jsx)("div",{className:"p-search-and-filter__panel","aria-hidden":filterPanelHidden,children:Object(jsx_runtime.jsxs)("div",{children:[searchTerm.length>0&&Object(jsx_runtime.jsxs)("div",{className:"p-search-and-filter__search-prompt",onClick:function onClick(){return handleSubmit()},onKeyDown:function onKeyDown(e){return function searchPromptKeyDown(e){"Enter"===e.key&&handleSubmit()}(e)},role:"button",tabIndex:0,children:["Search for"," ",Object(jsx_runtime.jsx)("span",{className:"p-search-and-filter__search-query",children:searchTerm}),"..."]}),filterPanelData.map((function(filterPanelSectionData){return Object(jsx_runtime.jsx)(SearchAndFilter_FilterPanelSection_FilterPanelSection,{data:filterPanelSectionData,toggleSelected:toggleSelected,searchData:searchData,searchTerm:searchTerm},filterPanelSectionData.id)}))]})})]})};SearchAndFilter_SearchAndFilter.displayName="SearchAndFilter",SearchAndFilter_SearchAndFilter.propTypes={existingSearchData:prop_types_default.a.array,filterPanelData:prop_types_default.a.array.isRequired,returnSearchData:prop_types_default.a.func.isRequired};var components_SearchAndFilter_SearchAndFilter=SearchAndFilter_SearchAndFilter;try{SearchAndFilter_SearchAndFilter.displayName="SearchAndFilter",SearchAndFilter_SearchAndFilter.__docgenInfo={description:"",displayName:"SearchAndFilter",props:{existingSearchData:{defaultValue:{value:"[]"},description:"A list of chips to initialise inside the input.",name:"existingSearchData",required:!1,type:{name:"SearchAndFilterChip[]"}},filterPanelData:{defaultValue:null,description:"The data for the filter panel.",name:"filterPanelData",required:!0,type:{name:"SearchAndFilterData[]"}},returnSearchData:{defaultValue:null,description:"A function that is called when the search data changes.",name:"returnSearchData",required:!0,type:{name:"(searchData: SearchAndFilterChip[]) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchAndFilter/SearchAndFilter.tsx#SearchAndFilter"]={docgenInfo:SearchAndFilter_SearchAndFilter.__docgenInfo,name:"SearchAndFilter",path:"src/components/SearchAndFilter/SearchAndFilter.tsx#SearchAndFilter"})}catch(__react_docgen_typescript_loader_error){}var _excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var withDataSet=SearchAndFilter_stories_Template.bind({});withDataSet.storyName="With data set",withDataSet.args={filterPanelData:[{id:0,heading:"Cloud",chips:[{lead:"Cloud",value:"Google"},{lead:"Cloud",value:"AWS"},{lead:"Cloud",value:"Azure"}]},{id:1,heading:"Region",chips:[{lead:"Region",value:"us-east1"},{lead:"Region",value:"us-north2"},{lead:"Region",value:"us-south3"},{lead:"Region",value:"us-north4"},{lead:"Region",value:"us-east5"},{lead:"Region",value:"us-south6"},{lead:"Region",value:"us-east7"},{lead:"Region",value:"us-east8"},{lead:"Region",value:"us-east9"},{lead:"Region",value:"us-east10"}]},{id:2,heading:"Owner",chips:[{lead:"Owner",value:"foo"},{lead:"Owner",value:"bar"},{lead:"Owner",value:"baz"}]}],returnSearchData:function returnSearchData(){}},withDataSet.parameters={storySource:{source:"args => "}};var withExistingSearchData=SearchAndFilter_stories_Template.bind({});withExistingSearchData.storyName="With existing search data",withExistingSearchData.args={existingSearchData:[{lead:"Cloud",value:"Google"}],filterPanelData:[{id:0,heading:"Cloud",chips:[{lead:"Cloud",value:"Google"},{lead:"Cloud",value:"AWS"},{lead:"Cloud",value:"Azure"}]},{id:1,heading:"Region",chips:[{lead:"Region",value:"us-east1"},{lead:"Region",value:"us-north2"},{lead:"Region",value:"us-south3"},{lead:"Region",value:"us-north4"},{lead:"Region",value:"us-east5"},{lead:"Region",value:"us-south6"},{lead:"Region",value:"us-east7"},{lead:"Region",value:"us-east8"},{lead:"Region",value:"us-east9"},{lead:"Region",value:"us-east10"}]},{id:2,heading:"Owner",chips:[{lead:"Owner",value:"foo"},{lead:"Owner",value:"bar"},{lead:"Owner",value:"baz"}]}],returnSearchData:function returnSearchData(){}},withExistingSearchData.parameters={storySource:{source:"args => "}};var componentMeta={title:"Search and Filter",component:components_SearchAndFilter_SearchAndFilter,includeStories:["defaultStory","withDataSet","withExistingSearchData"]},mdxStoryNameToKey={Default:"defaultStory","With data set":"withDataSet","With existing search data":"withExistingSearchData"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/SearchBox/SearchBox.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"externalState",(function(){return externalState})),__webpack_require__.d(__webpack_exports__,"navigation",(function(){return navigation}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_SearchBox__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/SearchBox/SearchBox.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var disabled=function disabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SearchBox__WEBPACK_IMPORTED_MODULE_8__.a,{disabled:!0})};disabled.displayName="disabled",disabled.storyName="Disabled",disabled.parameters={storySource:{source:""}};var externalState=function externalState(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SearchBox__WEBPACK_IMPORTED_MODULE_8__.a,{externallyControlled:!0,onChange:function onChange(){},value:"..."})};externalState.displayName="externalState",externalState.storyName="External state",externalState.parameters={storySource:{source:' {}} value="..." />'}};var navigation=function navigation(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("header",{id:"navigation",className:"p-navigation"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("div",{className:"p-navigation__row--full-width"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("div",{className:"p-navigation__banner"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("div",{className:"p-navigation__logo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{className:"p-navigation__item",href:"#"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{className:"p-navigation__image",src:"https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",alt:"",width:"95"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"#navigation",className:"p-navigation__toggle--open",title:"menu"},"Menu"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"#navigation-closed",className:"p-navigation__toggle--close",title:"close menu"},"Close menu")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("nav",{className:"p-navigation__nav"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("span",{className:"u-off-screen"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"#main-content"},"Jump to main content")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("ul",{className:"p-navigation__items",role:"menu"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("li",{className:"p-navigation__item",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"#",class:"p-navigation__link"},"Products")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("li",{className:"p-navigation__item",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"#",class:"p-navigation__link"},"Services")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("li",{className:"p-navigation__item",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"#",class:"p-navigation__link"},"Partners")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("li",{className:"p-navigation__item",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"#",class:"p-navigation__link"},"About")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("li",{className:"p-navigation__item",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{href:"#",class:"p-navigation__link"},"Partners"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SearchBox__WEBPACK_IMPORTED_MODULE_8__.a,null))))};navigation.displayName="navigation",navigation.storyName="Navigation",navigation.parameters={storySource:{source:''}};var componentMeta={title:"SearchBox",component:_SearchBox__WEBPACK_IMPORTED_MODULE_8__.a,includeStories:["defaultStory","disabled","externalState","navigation"]},mdxStoryNameToKey={Default:"defaultStory",Disabled:"disabled","External state":"externalState",Navigation:"navigation"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/SearchBox/SearchBox.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_4__),react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__),_Icon__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/components/Icon/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["autocomplete","className","disabled","externallyControlled","onChange","onSearch","placeholder","value"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 SearchBox=react__WEBPACK_IMPORTED_MODULE_5___default.a.forwardRef((function(_ref,forwardedRef){var _ref$autocomplete=_ref.autocomplete,autocomplete=void 0===_ref$autocomplete?"on":_ref$autocomplete,className=_ref.className,disabled=_ref.disabled,externallyControlled=_ref.externallyControlled,_onChange=_ref.onChange,onSearch=_ref.onSearch,_ref$placeholder=_ref.placeholder,placeholder=void 0===_ref$placeholder?"Search":_ref$placeholder,value=_ref.value,props=_objectWithoutProperties(_ref,_excluded),internalRef=Object(react__WEBPACK_IMPORTED_MODULE_5__.useRef)();return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_4___default()("p-search-box",className),children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("label",{className:"u-off-screen",htmlFor:"search",children:placeholder||"Search"}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("input",Object.assign({autoComplete:autocomplete,className:"p-search-box__input",disabled:disabled,id:"search",name:"search",onChange:function onChange(evt){return _onChange(evt.target.value)},placeholder:placeholder,ref:function ref(input){internalRef.current=input,"function"==typeof forwardedRef?forwardedRef(input):forwardedRef&&(forwardedRef.current=input)},type:"search",defaultValue:externallyControlled?void 0:value,value:externallyControlled?value:void 0},props)),value&&Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button",{className:"p-search-box__reset",disabled:disabled,onClick:function resetInput(){_onChange&&_onChange(""),internalRef.current&&(internalRef.current.value="")},type:"reset",children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_6__.b,{name:"close",children:"Clear search field"})}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button",{className:"p-search-box__button",disabled:disabled,onClick:function triggerSearch(){onSearch&&onSearch()},children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_6__.b,{name:"search",children:"Search"})})]})}));SearchBox.displayName="SearchBox",__webpack_exports__.a=SearchBox;try{SearchBox.displayName="SearchBox",SearchBox.__docgenInfo={description:"",displayName:"SearchBox",props:{disabled:{defaultValue:null,description:"Whether the input and buttons should be disabled.",name:"disabled",required:!1,type:{name:"boolean"}},placeholder:{defaultValue:{value:"Search"},description:"A search input placeholder message.",name:"placeholder",required:!1,type:{name:"string"}},value:{defaultValue:null,description:"The value of the search input when the state is externally controlled.",name:"value",required:!1,type:{name:"string"}},className:{defaultValue:null,description:"Optional classes to pass to the form element.",name:"className",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"A function that will be called when the input value changes.",name:"onChange",required:!1,type:{name:"(inputValue: string) => void"}},externallyControlled:{defaultValue:null,description:"Whether the input value will be controlled via external state.",name:"externallyControlled",required:!1,type:{name:"boolean"}},autocomplete:{defaultValue:{value:"on"},description:"Whether autocomplete should be enabled for the search input.",name:"autocomplete",required:!1,type:{name:"enum",value:[{value:'"on"'},{value:'"off"'}]}},onSearch:{defaultValue:null,description:"A function that is called when the user clicks the search icon",name:"onSearch",required:!1,type:{name:"() => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchBox/SearchBox.tsx#SearchBox"]={docgenInfo:SearchBox.__docgenInfo,name:"SearchBox",path:"src/components/SearchBox/SearchBox.tsx#SearchBox"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Select/Select.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"select",(function(){return select})),__webpack_require__.d(__webpack_exports__,"selectMultiple",(function(){return selectMultiple}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_Select__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/Select/Select.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i '}};var componentMeta={title:"Select",component:_Select__WEBPACK_IMPORTED_MODULE_8__.a,argTypes:{caution:{control:{type:"text"}},error:{control:{type:"text"}},help:{control:{type:"text"}},label:{control:{type:"text"}},success:{control:{type:"text"}},id:{control:{disable:!0}},options:{control:{disable:!0}}},includeStories:["select","selectMultiple"]},mdxStoryNameToKey={Select:"select","Select multiple":"selectMultiple"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/Select/Select.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_5__),react__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/react/index.js"),_Field__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/components/Field/index.ts"),_hooks__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/hooks/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["label","value"],_excluded2=["caution","className","error","help","id","label","labelClassName","onChange","options","required","stacked","success","takeFocus","wrapperClassName"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 generateOptions=function generateOptions(options){return null==options?void 0:options.map((function(_ref){var label=_ref.label,value=_ref.value,props=_objectWithoutProperties(_ref,_excluded);return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("option",Object.assign({value:value},props,{children:label}),""+value||label)}))},Select=function Select(_ref2){var caution=_ref2.caution,className=_ref2.className,error=_ref2.error,help=_ref2.help,id=_ref2.id,label=_ref2.label,labelClassName=_ref2.labelClassName,_onChange=_ref2.onChange,options=_ref2.options,required=_ref2.required,stacked=_ref2.stacked,success=_ref2.success,takeFocus=_ref2.takeFocus,wrapperClassName=_ref2.wrapperClassName,selectProps=_objectWithoutProperties(_ref2,_excluded2),selectRef=Object(react__WEBPACK_IMPORTED_MODULE_6__.useRef)(null),validationId=Object(_hooks__WEBPACK_IMPORTED_MODULE_8__.b)(),helpId=Object(_hooks__WEBPACK_IMPORTED_MODULE_8__.b)(),hasError=!!error;return Object(react__WEBPACK_IMPORTED_MODULE_6__.useEffect)((function(){takeFocus&&selectRef.current.focus()}),[takeFocus]),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_Field__WEBPACK_IMPORTED_MODULE_7__.a,{caution:caution,className:wrapperClassName,error:error,forId:id,help:help,helpId:helpId,isSelect:!0,label:label,labelClassName:labelClassName,required:required,stacked:stacked,success:success,validationId:validationId,children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("select",Object.assign({"aria-describedby":help?helpId:null,"aria-errormessage":hasError?validationId:null,"aria-invalid":hasError,className:classnames__WEBPACK_IMPORTED_MODULE_5___default()("p-form-validation__input",className),id:id,onChange:function onChange(evt){return _onChange&&_onChange(evt)},ref:selectRef},selectProps,{children:generateOptions(options)}))})};Select.displayName="Select",__webpack_exports__.a=Select;try{Select.displayName="Select",Select.__docgenInfo={description:"",displayName:"Select",props:{caution:{defaultValue:null,description:"The content for caution validation.",name:"caution",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the input element.",name:"className",required:!1,type:{name:"string"}},error:{defaultValue:null,description:"The content for error validation.",name:"error",required:!1,type:{name:"ReactNode"}},help:{defaultValue:null,description:"Help text to show below the field.",name:"help",required:!1,type:{name:"ReactNode"}},id:{defaultValue:null,description:"The id of the input.",name:"id",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"The label for the field.",name:"label",required:!1,type:{name:"ReactNode"}},labelClassName:{defaultValue:null,description:"Optional class(es) to pass to the label component.",name:"labelClassName",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"Function to run when select value changes.",name:"onChange",required:!1,type:{name:"ChangeEventHandler"}},options:{defaultValue:null,description:"Array of options that the select can choose from.",name:"options",required:!1,type:{name:"Option[]"}},required:{defaultValue:null,description:"Whether the field is required.",name:"required",required:!1,type:{name:"boolean"}},stacked:{defaultValue:null,description:"Whether the form field should have a stacked appearance.",name:"stacked",required:!1,type:{name:"boolean"}},success:{defaultValue:null,description:"The content for success validation.",name:"success",required:!1,type:{name:"ReactNode"}},takeFocus:{defaultValue:null,description:"Whether to focus on the input on initial render.",name:"takeFocus",required:!1,type:{name:"boolean"}},wrapperClassName:{defaultValue:null,description:"Optional class(es) to pass to the wrapping Field component",name:"wrapperClassName",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Select/Select.tsx#Select"]={docgenInfo:Select.__docgenInfo,name:"Select",path:"src/components/Select/Select.tsx#Select"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Slider/Slider.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Slider_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"withInput",(function(){return withInput}));__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),Field=(__webpack_require__("./node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("./node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("./node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("./src/components/Field/index.ts")),hooks=__webpack_require__("./src/hooks/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["caution","disabled","error","help","id","inputDisabled","label","max","min","onChange","required","showInput"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Slider_Slider=function Slider(_ref){var _navigator,_navigator$userAgent,caution=_ref.caution,_ref$disabled=_ref.disabled,disabled=void 0!==_ref$disabled&&_ref$disabled,error=_ref.error,help=_ref.help,id=_ref.id,_ref$inputDisabled=_ref.inputDisabled,inputDisabled=void 0!==_ref$inputDisabled&&_ref$inputDisabled,label=_ref.label,max=_ref.max,min=_ref.min,onChange=_ref.onChange,_ref$required=_ref.required,required=void 0!==_ref$required&&_ref$required,_ref$showInput=_ref.showInput,showInput=void 0!==_ref$showInput&&_ref$showInput,inputProps=_objectWithoutProperties(_ref,_excluded),validationId=Object(hooks.b)(),helpId=Object(hooks.b)(),hasError=!!error,style={};if(null!==(_navigator=navigator)&&void 0!==_navigator&&null!==(_navigator$userAgent=_navigator.userAgent)&&void 0!==_navigator$userAgent&&_navigator$userAgent.includes("AppleWebKit")){var val=inputProps.value||inputProps.defaultValue,filledPercentage=(Number(val)-min)/(max-min)*100+"%";style={background:"linear-gradient(\n to right,\n #0066CC 0%,\n #0066CC "+filledPercentage+",\n #D9D9D9 "+filledPercentage+",\n #D9D9D9 100%\n )"}}return Object(jsx_runtime.jsx)(Field.a,{caution:caution,error:error,help:help,helpId:helpId,label:label,required:required,validationId:validationId,children:Object(jsx_runtime.jsxs)("div",{className:"p-slider__wrapper",children:[Object(jsx_runtime.jsx)("input",Object.assign({"aria-describedby":help?helpId:null,"aria-errormessage":hasError?validationId:null,"aria-invalid":hasError,disabled:disabled,id:id,max:max,min:min,onChange:onChange,required:required,style:style,type:"range"},inputProps)),showInput&&Object(jsx_runtime.jsx)("input",Object.assign({"aria-describedby":help?helpId:null,"aria-errormessage":hasError?validationId:null,"aria-invalid":hasError,className:"p-slider__input",disabled:disabled||inputDisabled,max:max,min:min,onChange:onChange,type:"number"},inputProps))]})})};Slider_Slider.displayName="Slider";var components_Slider_Slider=Slider_Slider;try{Slider_Slider.displayName="Slider",Slider_Slider.__docgenInfo={description:"",displayName:"Slider",props:{caution:{defaultValue:null,description:"Field caution message.",name:"caution",required:!1,type:{name:"ReactNode"}},disabled:{defaultValue:{value:"false"},description:"Whether to disable the slider and input (if showInput is true).",name:"disabled",required:!1,type:{name:"boolean"}},error:{defaultValue:null,description:"Field error message.",name:"error",required:!1,type:{name:"ReactNode"}},help:{defaultValue:null,description:"Field help message.",name:"help",required:!1,type:{name:"ReactNode"}},id:{defaultValue:null,description:"Field id. Only passed to range input, not to number input.",name:"id",required:!1,type:{name:"string"}},inputDisabled:{defaultValue:{value:"false"},description:"Whether to disable only the input, but not the slider.",name:"inputDisabled",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"Field label.",name:"label",required:!1,type:{name:"ReactNode"}},max:{defaultValue:null,description:"Maximum value of the slider.",name:"max",required:!0,type:{name:"number"}},min:{defaultValue:null,description:"Minimum value of the slider.",name:"min",required:!0,type:{name:"number"}},onChange:{defaultValue:null,description:"Change event handler.",name:"onChange",required:!0,type:{name:"ChangeEventHandler"}},required:{defaultValue:{value:"false"},description:"Whether the field is required for the form to submit.",name:"required",required:!1,type:{name:"boolean"}},showInput:{defaultValue:{value:"false"},description:"Whether to show a number input with the numerical value next to the slider.",name:"showInput",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Slider/Slider.tsx#Slider"]={docgenInfo:Slider_Slider.__docgenInfo,name:"Slider",path:"src/components/Slider/Slider.tsx#Slider"})}catch(__react_docgen_typescript_loader_error){}var Slider_stories_excluded=["components"];function Slider_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function Slider_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [selectedValue, setSelectedValue] = useState(50);\n return setSelectedValue(e.target.value)} value={selectedValue} />;\n}"}};var withInput=Slider_stories_Template.bind({});withInput.storyName="With input",withInput.args={disabled:!1,inputDisabled:!1,label:"Volume",max:100,min:0,showInput:!0},withInput.parameters={storySource:{source:"args => {\n const [selectedValue, setSelectedValue] = useState(50);\n return setSelectedValue(e.target.value)} value={selectedValue} />;\n}"}};var componentMeta={title:"Slider",component:components_Slider_Slider,argTypes:{caution:{control:{type:"text"}},error:{control:{type:"text"}},help:{control:{type:"text"}},label:{control:{type:"text"}}},includeStories:["defaultStory","withInput"]},mdxStoryNameToKey={Default:"defaultStory","With input":"withInput"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Spinner/Spinner.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"text",(function(){return text})),__webpack_require__.d(__webpack_exports__,"assertive",(function(){return assertive}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_Spinner__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/Spinner/Spinner.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var text=Template.bind({});text.storyName="Text",text.args={text:"Loading..."},text.parameters={storySource:{source:"args => "}};var assertive=Template.bind({});assertive.storyName="Assertive",assertive.args={ariaLive:"assertive"},assertive.parameters={storySource:{source:"args => "}};var componentMeta={title:"Spinner",component:_Spinner__WEBPACK_IMPORTED_MODULE_8__.a,includeStories:["defaultStory","text","assertive"]},mdxStoryNameToKey={Default:"defaultStory",Text:"text",Assertive:"assertive"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/Spinner/Spinner.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js");var prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),classnames__WEBPACK_IMPORTED_MODULE_6__=(__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/classnames/index.js")),classnames__WEBPACK_IMPORTED_MODULE_6___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_6__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["className","text","isLight","ariaLive","role"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Spinner=function Spinner(_ref){var className=_ref.className,text=_ref.text,_ref$isLight=_ref.isLight,isLight=void 0!==_ref$isLight&&_ref$isLight,_ref$ariaLive=_ref.ariaLive,ariaLive=void 0===_ref$ariaLive?"polite":_ref$ariaLive,_ref$role=_ref.role,role=void 0===_ref$role?"alert":_ref$role,props=_objectWithoutProperties(_ref,_excluded);return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("span",Object.assign({},props,{className:classnames__WEBPACK_IMPORTED_MODULE_6___default()(className,"p-text--default"),role:role,"aria-live":ariaLive,children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("i",{className:classnames__WEBPACK_IMPORTED_MODULE_6___default()("p-icon--spinner","u-animation--spin",{"is-light":isLight}),children:text?"":"Loading"}),text&&Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.Fragment,{children:[" ",Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("span",{children:text})]})]}))};Spinner.displayName="Spinner",Spinner.propTypes={isLight:prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.bool,text:prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,role:prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,ariaLive:prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.oneOf(["assertive","off","polite"])},__webpack_exports__.a=Spinner;try{Spinner.displayName="Spinner",Spinner.__docgenInfo={description:"",displayName:"Spinner",props:{className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping span element.",name:"className",required:!1,type:{name:"string"}},isLight:{defaultValue:{value:"false"},description:"Whether the spinner should have a light appearance.",name:"isLight",required:!1,type:{name:"boolean"}},text:{defaultValue:null,description:"Text to display next to the spinner.",name:"text",required:!1,type:{name:"string"}},role:{defaultValue:{value:"alert"},description:"What the role of the spinner should be.",name:"role",required:!1,type:{name:"string & AriaRole"}},ariaLive:{defaultValue:{value:"polite"},description:"The politeness setting of the spinner alert.",name:"ariaLive",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"assertive"'},{value:'"polite"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Spinner/Spinner.tsx#Spinner"]={docgenInfo:Spinner.__docgenInfo,name:"Spinner",path:"src/components/Spinner/Spinner.tsx#Spinner"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/StatusLabel/StatusLabel.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"statusLabel",(function(){return statusLabel})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"positive",(function(){return positive})),__webpack_require__.d(__webpack_exports__,"caution",(function(){return caution})),__webpack_require__.d(__webpack_exports__,"negative",(function(){return negative})),__webpack_require__.d(__webpack_exports__,"information",(function(){return information}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_StatusLabel__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/StatusLabel/StatusLabel.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_StatusLabel__WEBPACK_IMPORTED_MODULE_8__.b,null,"Default")};defaultStory.displayName="defaultStory",defaultStory.storyName="Default",defaultStory.parameters={storySource:{source:"Default"}};var positive=function positive(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_StatusLabel__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"positive"},"Positive")};positive.displayName="positive",positive.storyName="Positive",positive.parameters={storySource:{source:'Positive'}};var caution=function caution(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_StatusLabel__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"caution"},"Caution")};caution.displayName="caution",caution.storyName="Caution",caution.parameters={storySource:{source:'Caution'}};var negative=function negative(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_StatusLabel__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"negative"},"Negative")};negative.displayName="negative",negative.storyName="Negative",negative.parameters={storySource:{source:'Negative'}};var information=function information(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_StatusLabel__WEBPACK_IMPORTED_MODULE_8__.b,{appearance:"information"},"Information")};information.displayName="information",information.storyName="Information",information.parameters={storySource:{source:'Information'}};var componentMeta={title:"StatusLabel",component:_StatusLabel__WEBPACK_IMPORTED_MODULE_8__.b,argTypes:{children:{control:{type:"text"},defaultValue:"Label"},appearance:{control:{options:_StatusLabel__WEBPACK_IMPORTED_MODULE_8__.a,type:"select"},defaultValue:_StatusLabel__WEBPACK_IMPORTED_MODULE_8__.a.Positive}},includeStories:["statusLabel","defaultStory","positive","caution","negative","information"]},mdxStoryNameToKey={StatusLabel:"statusLabel",Default:"defaultStory",Positive:"positive",Caution:"caution",Negative:"negative",Information:"information"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/StatusLabel/StatusLabel.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return StatusLabelAppearance}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_5__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["appearance","children","className"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 StatusLabelAppearance={CAUTION:"caution",DEFAULT:"",INFORMATION:"information",NEGATIVE:"negative",POSITIVE:"positive"},StatusLabel=function StatusLabel(_ref){var appearance=_ref.appearance,children=_ref.children,className=_ref.className,labelProps=_objectWithoutProperties(_ref,_excluded),classes=classnames__WEBPACK_IMPORTED_MODULE_5___default()(appearance?"p-status-label--"+appearance:"p-status-label",className);return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("div",Object.assign({},labelProps,{className:classes,children:children}))};StatusLabel.displayName="StatusLabel",__webpack_exports__.b=StatusLabel;try{StatusLabel.displayName="StatusLabel",StatusLabel.__docgenInfo={description:"A component for the Vanilla Label.",displayName:"StatusLabel",props:{appearance:{defaultValue:null,description:"The appearance of the label.",name:"appearance",required:!1,type:{name:"string"}},children:{defaultValue:null,description:"The content of the label.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping element.",name:"className",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/StatusLabel/StatusLabel.tsx#StatusLabel"]={docgenInfo:StatusLabel.__docgenInfo,name:"StatusLabel",path:"src/components/StatusLabel/StatusLabel.tsx#StatusLabel"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Strip/Strip.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"lightStrip",(function(){return lightStrip})),__webpack_require__.d(__webpack_exports__,"darkStrip",(function(){return darkStrip})),__webpack_require__.d(__webpack_exports__,"accentStrip",(function(){return accentStrip})),__webpack_require__.d(__webpack_exports__,"imageStrip",(function(){return imageStrip})),__webpack_require__.d(__webpack_exports__,"borderedStrip",(function(){return borderedStrip})),__webpack_require__.d(__webpack_exports__,"deepStrip",(function(){return deepStrip})),__webpack_require__.d(__webpack_exports__,"shallowStrip",(function(){return shallowStrip}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react/index.js"),react__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_Col__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/Col/index.ts"),_Row__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./src/components/Row/index.ts"),_Strip__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./src/components/Strip/Strip.tsx"),_excluded=["components"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var darkStrip=function darkStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Strip__WEBPACK_IMPORTED_MODULE_10__.a,{type:"dark"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"This is a dark row"))};darkStrip.displayName="darkStrip",darkStrip.storyName="Dark strip",darkStrip.parameters={storySource:{source:'\n

    This is a dark row

    \n     '}};var accentStrip=function accentStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Strip__WEBPACK_IMPORTED_MODULE_10__.a,{type:"accent",element:"section",includeCol:!1},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:8},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h1",null,"Still running Ubuntu 14.04 LTS?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Learn how to maintain ongoing security compliance for your Ubuntu 14.04 LTS systems.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:4},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://assets.ubuntu.com/v1/2217d1c8-Security.svg",alt:"Placeholder"})))};accentStrip.displayName="accentStrip",accentStrip.storyName="Accent strip",accentStrip.parameters={storySource:{source:'\n \n

    Still running Ubuntu 14.04 LTS?

    \n

    \n Learn how to maintain ongoing security compliance for your Ubuntu\n 14.04 LTS systems.\n

    \n \n \n Placeholder\n \n     '}};var imageStrip=function imageStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(react__WEBPACK_IMPORTED_MODULE_4___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Strip__WEBPACK_IMPORTED_MODULE_10__.a,{background:"https://assets.ubuntu.com/sites/ubuntu/latest/u/img/backgrounds/image-background-paper.png",includeCol:!1,element:"section",light:!0,rowClassName:"u-vertically-center",type:"image"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:8},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h1",null,"Get started with big software, fast"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"conjure-up lets you summon up a big-software stack as a “spell” — a model of the stack, combined with extra know-how to get you from an installed stack to a fully usable one. Start using your big software instead of learning how to deploy it.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:4,className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://assets.ubuntu.com/v1/1abb8716-conjure-up-illustration.svg",alt:"Placeholder"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Strip__WEBPACK_IMPORTED_MODULE_10__.a,{background:"https://assets.ubuntu.com/v1/9b68976e-Aubergine_suru_background_2.png",dark:!0,includeCol:!1,element:"section",type:"image"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Row__WEBPACK_IMPORTED_MODULE_9__.a,{className:"u-vertically-center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:8},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h1",null,"We are Canonical"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"It is our mission to make open source software available to people everywhere. We believe the best way to fuel innovation is to give the innovators the technology they need.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:4,className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://assets.ubuntu.com/v1/9c74eb2d-logo-canonical-white.svg",alt:"Placeholder"})))))};imageStrip.storyName="Image strip",imageStrip.parameters={storySource:{source:'<>\n \n \n

    Get started with big software, fast

    \n

    \n conjure-up lets you summon up a big-software stack as a “spell” — a\n model of the stack, combined with extra know-how to get you from an\n installed stack to a fully usable one. Start using your big software\n instead of learning how to deploy it.\n

    \n \n \n Placeholder\n \n     \n \n \n \n

    We are Canonical

    \n

    \n It is our mission to make open source software available to people\n everywhere. We believe the best way to fuel innovation is to give\n the innovators the technology they need.\n

    \n \n \n Placeholder\n \n     \n     \n '}};var borderedStrip=function borderedStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Strip__WEBPACK_IMPORTED_MODULE_10__.a,{bordered:!0,colSize:8,element:"section"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",null,"The node lifecycle"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Each machine (“node”) managed by MAAS goes through a lifecycle — from its enlistment or onboarding to MAAS, through commissioning when we inventory and can setup firmware or other hardware-specific elements, then allocation to a user and deployment, and finally they are released back to the pool or retired altogether."))};borderedStrip.displayName="borderedStrip",borderedStrip.storyName="Bordered strip",borderedStrip.parameters={storySource:{source:'\n

    The node lifecycle

    \n

    \n Each machine (“node”) managed by MAAS goes through a lifecycle — from\n its enlistment or onboarding to MAAS, through commissioning when we\n inventory and can setup firmware or other hardware-specific elements,\n then allocation to a user and deployment, and finally they are released\n back to the pool or retired altogether.\n

    \n     '}};var deepStrip=function deepStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Strip__WEBPACK_IMPORTED_MODULE_10__.a,{deep:!0,includeCol:!1,element:"section",type:"light",rowClassName:"u-vertically-center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:8},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",null,"The fastest way to go from development to production in IoT"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Learn about how Ubuntu Core and snaps can help you build your connected devices.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:4,className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",alt:"Placeholder"})))};deepStrip.displayName="deepStrip",deepStrip.storyName="Deep strip",deepStrip.parameters={storySource:{source:'\n \n

    The fastest way to go from development to production in IoT

    \n

    \n Learn about how Ubuntu Core and snaps can help you build your\n connected devices.\n

    \n \n \n Placeholder\n \n     '}};var shallowStrip=function shallowStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Strip__WEBPACK_IMPORTED_MODULE_10__.a,{shallow:!0,includeCol:!1,element:"section",type:"light",rowClassName:"u-vertically-center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:8},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",null,"The fastest way to go from development to production in IoT"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Learn about how Ubuntu Core and snaps can help you build your connected devices.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_Col__WEBPACK_IMPORTED_MODULE_8__.a,{size:4,className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("img",{src:"https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",alt:"Placeholder"})))};shallowStrip.displayName="shallowStrip",shallowStrip.storyName="Shallow strip",shallowStrip.parameters={storySource:{source:'\n \n

    The fastest way to go from development to production in IoT

    \n

    \n Learn about how Ubuntu Core and snaps can help you build your\n connected devices.\n

    \n \n \n Placeholder\n \n     '}};var componentMeta={title:"Strip",component:_Strip__WEBPACK_IMPORTED_MODULE_10__.a,argTypes:{children:{control:{disable:!0}}},includeStories:["lightStrip","darkStrip","accentStrip","imageStrip","borderedStrip","deepStrip","shallowStrip"]},mdxStoryNameToKey={"Light strip":"lightStrip","Dark strip":"darkStrip","Accent strip":"accentStrip","Image strip":"imageStrip","Bordered strip":"borderedStrip","Deep strip":"deepStrip","Shallow strip":"shallowStrip"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/Strip/Strip.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_4__),_Col__WEBPACK_IMPORTED_MODULE_6__=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./src/components/Col/index.ts")),_Row__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/components/Row/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["background","bordered","children","className","colSize","dark","deep","includeCol","element","light","rowClassName","shallow","type"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Strip=function Strip(_ref){var _classNames,background=_ref.background,_ref$bordered=_ref.bordered,bordered=void 0!==_ref$bordered&&_ref$bordered,children=_ref.children,className=_ref.className,_ref$colSize=_ref.colSize,colSize=void 0===_ref$colSize?12:_ref$colSize,_ref$dark=_ref.dark,dark=void 0!==_ref$dark&&_ref$dark,_ref$deep=_ref.deep,deep=void 0!==_ref$deep&&_ref$deep,_ref$includeCol=_ref.includeCol,includeCol=void 0===_ref$includeCol||_ref$includeCol,_ref$element=_ref.element,Component=void 0===_ref$element?"div":_ref$element,_ref$light=_ref.light,light=void 0!==_ref$light&&_ref$light,rowClassName=_ref.rowClassName,_ref$shallow=_ref.shallow,shallow=void 0!==_ref$shallow&&_ref$shallow,type=_ref.type,props=_objectWithoutProperties(_ref,_excluded);return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(Component,Object.assign({className:classnames__WEBPACK_IMPORTED_MODULE_4___default()(className,(_classNames={},_classNames["p-strip--"+type]=!!type,_classNames["p-strip"]=!type,_classNames["is-bordered"]=bordered,_classNames["is-dark"]=dark,_classNames["is-deep"]=deep,_classNames["is-light"]=light,_classNames["is-shallow"]=shallow,_classNames)),style:background&&{backgroundImage:"url('"+background+"')"}},props,{children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{className:rowClassName,children:includeCol?Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:colSize,children:children}):children})}))};Strip.displayName="Strip",__webpack_exports__.a=Strip;try{Strip.displayName="Strip",Strip.__docgenInfo={description:"",displayName:"Strip",props:{children:{defaultValue:null,description:"The content of the strip.",name:"children",required:!0,type:{name:"ReactNode"}},background:{defaultValue:null,description:"A background images for the strip.",name:"background",required:!1,type:{name:"string"}},bordered:{defaultValue:{value:"false"},description:"Whether the strip should display borders.",name:"bordered",required:!1,type:{name:"boolean"}},className:{defaultValue:null,description:"Optional classes for the strip.",name:"className",required:!1,type:{name:"string"}},colSize:{defaultValue:{value:"12"},description:"The width of the column if `includeCol` has been set.",name:"colSize",required:!1,type:{name:"enum",value:[{value:"1"},{value:"2"},{value:"3"},{value:"4"},{value:"5"},{value:"6"},{value:"7"},{value:"8"},{value:"9"},{value:"10"},{value:"11"},{value:"12"}]}},dark:{defaultValue:{value:"false"},description:"Whether the strip should be dark.",name:"dark",required:!1,type:{name:"boolean"}},deep:{defaultValue:{value:"false"},description:"Whether the strip should be deep.",name:"deep",required:!1,type:{name:"boolean"}},element:{defaultValue:null,description:"The base HTML element of the strip.",name:"element",required:!1,type:{name:"ElementType"}},includeCol:{defaultValue:{value:"true"},description:"Whether the strip should wrap the content in a column.",name:"includeCol",required:!1,type:{name:"boolean"}},light:{defaultValue:{value:"false"},description:"Whether the strip should be light.",name:"light",required:!1,type:{name:"boolean"}},rowClassName:{defaultValue:null,description:"Optional classes to apply to the row.",name:"rowClassName",required:!1,type:{name:"string"}},shallow:{defaultValue:{value:"false"},description:"Whether the strip should be shallow.",name:"shallow",required:!1,type:{name:"boolean"}},type:{defaultValue:null,description:'The type of the strip (e.g. "accent" or "image").',name:"type",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Strip/Strip.tsx#Strip"]={docgenInfo:Strip.__docgenInfo,name:"Strip",path:"src/components/Strip/Strip.tsx#Strip"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/SummaryButton/SummaryButton.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"doNothing",(function(){return doNothing})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"actionOnly",(function(){return actionOnly})),__webpack_require__.d(__webpack_exports__,"summaryOnly",(function(){return summaryOnly})),__webpack_require__.d(__webpack_exports__,"loading",(function(){return loading}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),_SummaryButton__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/SummaryButton/SummaryButton.tsx"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i=0||(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 doNothing=function doNothing(){},layoutProps={doNothing:doNothing};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.c,{title:"SummaryButton",component:_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",null,"SummaryButton"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"SummaryButton")," is a component to render a short summary with an action button. It's initial use case is a summary of table contents with action to load more items."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.a,{of:_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,mdxType:"ArgsTable"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,{summary:"Showing 15 out of 100 items.",label:"Show more",onClick:doNothing,mdxType:"SummaryButton"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Action only"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Summary text is optional."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Action only",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Show more items",onClick:doNothing,mdxType:"SummaryButton"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Summary only"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Action is optional as well. When ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"onClick")," prop is not provided component will render just the summary text."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Summary only",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,{summary:"Showing 100 out of 100 items.",label:"Show more items",mdxType:"SummaryButton"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",null,"Loading"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"When data is loaded asynchronusly ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"isLoading")," prop should be set to ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"true")," to shows a spinner animation in place of the action button."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.b,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.f,{name:"Loading",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,{summary:"Showing 15 out of 100 items.",label:"Show more",isLoading:!0,onClick:doNothing,mdxType:"SummaryButton"}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,{summary:"Showing 15 out of 100 items.",label:"Show more",onClick:doNothing})};defaultStory.displayName="defaultStory",defaultStory.storyName="Default",defaultStory.parameters={storySource:{source:''}};var actionOnly=function actionOnly(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,{label:"Show more items",onClick:doNothing})};actionOnly.displayName="actionOnly",actionOnly.storyName="Action only",actionOnly.parameters={storySource:{source:''}};var summaryOnly=function summaryOnly(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,{summary:"Showing 100 out of 100 items.",label:"Show more items"})};summaryOnly.displayName="summaryOnly",summaryOnly.storyName="Summary only",summaryOnly.parameters={storySource:{source:''}};var loading=function loading(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,{summary:"Showing 15 out of 100 items.",label:"Show more",isLoading:!0,onClick:doNothing})};loading.displayName="loading",loading.storyName="Loading",loading.parameters={storySource:{source:''}};var componentMeta={title:"SummaryButton",component:_SummaryButton__WEBPACK_IMPORTED_MODULE_8__.a,includeStories:["defaultStory","actionOnly","summaryOnly","loading"]},mdxStoryNameToKey={Default:"defaultStory","Action only":"actionOnly","Summary only":"summaryOnly",Loading:"loading"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/components/SummaryButton/SummaryButton.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("./node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),ActionButton=__webpack_require__("./src/components/ActionButton/ActionButton.tsx"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),SummaryButton_SummaryButton=function SummaryButton(_ref){var className=_ref.className,isLoading=_ref.isLoading,summary=_ref.summary,label=_ref.label,onClick=_ref.onClick;return Object(jsx_runtime.jsxs)("small",{className:className,children:[summary&&Object(jsx_runtime.jsx)("span",{className:"u-text--muted",children:summary}),onClick&&Object(jsx_runtime.jsx)(ActionButton.a,{className:classnames_default()("is-small","is-dense",{"is-inline":summary}),onClick:onClick,loading:isLoading,disabled:isLoading,children:label})]})};SummaryButton_SummaryButton.displayName="SummaryButton";__webpack_exports__.a=SummaryButton_SummaryButton;try{SummaryButton_SummaryButton.displayName="SummaryButton",SummaryButton_SummaryButton.__docgenInfo={description:"",displayName:"SummaryButton",props:{className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping element.",name:"className",required:!1,type:{name:"string"}},isLoading:{defaultValue:null,description:"Whether the summary button is loading.",name:"isLoading",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"The label of the summary button.",name:"label",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"Function to handle clicking the summary button.",name:"onClick",required:!0,type:{name:"MouseEventHandler"}},summary:{defaultValue:null,description:"The summary content.",name:"summary",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SummaryButton/SummaryButton.tsx#SummaryButton"]={docgenInfo:SummaryButton_SummaryButton.__docgenInfo,name:"SummaryButton",path:"src/components/SummaryButton/SummaryButton.tsx#SummaryButton"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Switch/Switch.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Switch_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return Switch_stories_disabled}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["label","disabled"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Switch_Switch=function Switch(_ref){var label=_ref.label,_ref$disabled=_ref.disabled,disabled=void 0!==_ref$disabled&&_ref$disabled,inputProps=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsxs)("label",{className:"p-switch",children:[Object(jsx_runtime.jsx)("input",Object.assign({type:"checkbox",className:"p-switch__input",role:"switch",disabled:disabled},inputProps)),Object(jsx_runtime.jsx)("span",{className:"p-switch__slider"}),Object(jsx_runtime.jsx)("span",{className:"p-switch__label",children:label})]})};Switch_Switch.displayName="Switch";var components_Switch_Switch=Switch_Switch;try{Switch_Switch.displayName="Switch",Switch_Switch.__docgenInfo={description:"",displayName:"Switch",props:{label:{defaultValue:null,description:"The label name for the switch",name:"label",required:!0,type:{name:"ReactNode"}},disabled:{defaultValue:{value:"false"},description:"Whether the switch is disabled or not",name:"disabled",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Switch/Switch.tsx#Switch"]={docgenInfo:Switch_Switch.__docgenInfo,name:"Switch",path:"src/components/Switch/Switch.tsx#Switch"})}catch(__react_docgen_typescript_loader_error){}var Switch_stories_excluded=["components"];function Switch_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function Switch_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var Switch_stories_disabled=Switch_stories_Template.bind({});Switch_stories_disabled.storyName="Disabled",Switch_stories_disabled.args={disabled:!0,label:"Disabled switch"},Switch_stories_disabled.parameters={storySource:{source:"args => "}};var componentMeta={title:"Switch",component:components_Switch_Switch,includeStories:["defaultStory","disabled"]},mdxStoryNameToKey={Default:"defaultStory",Disabled:"disabled"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Table/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return components_Table_Table}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/react/jsx-runtime.js")),_excluded=["children","className","expanding","responsive"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Table_Table=function Table(_ref){var children=_ref.children,className=_ref.className,_ref$expanding=_ref.expanding,expanding=void 0!==_ref$expanding&&_ref$expanding,_ref$responsive=_ref.responsive,responsive=void 0!==_ref$responsive&&_ref$responsive,props=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsx)("table",Object.assign({role:"grid",className:classnames_default()(className,{"p-table--mobile-card":responsive,"p-table--expanding":expanding})},props,{children:children}))};Table_Table.displayName="Table";var components_Table_Table=Table_Table;try{Table_Table.displayName="Table",Table_Table.__docgenInfo={description:"",displayName:"Table",props:{children:{defaultValue:null,description:"The content of the table.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping table element.",name:"className",required:!1,type:{name:"string"}},expanding:{defaultValue:{value:"false"},description:"Whether the table can expand hidden cells.",name:"expanding",required:!1,type:{name:"boolean"}},responsive:{defaultValue:{value:"false"},description:"Whether the table should show card styling on smaller screens.",name:"responsive",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Table/Table.tsx#Table"]={docgenInfo:Table_Table.__docgenInfo,name:"Table",path:"src/components/Table/Table.tsx#Table"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/TableCell/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return components_TableCell_TableCell}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),jsx_runtime=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/react/jsx-runtime.js")),_excluded=["children","className","hasOverflow","expanding","hidden","role"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 TableCell_TableCell=function TableCell(_ref){var children=_ref.children,className=_ref.className,_ref$hasOverflow=_ref.hasOverflow,hasOverflow=void 0!==_ref$hasOverflow&&_ref$hasOverflow,_ref$expanding=_ref.expanding,expanding=void 0!==_ref$expanding&&_ref$expanding,_ref$hidden=_ref.hidden,hidden=void 0!==_ref$hidden&&_ref$hidden,_ref$role=_ref.role,role=void 0===_ref$role?"gridcell":_ref$role,props=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsx)("td",Object.assign({role:role,"aria-hidden":hidden,className:classnames_default()(className,{"p-table__expanding-panel":expanding,"has-overflow":hasOverflow})},props,{children:children}))};TableCell_TableCell.displayName="TableCell";var components_TableCell_TableCell=TableCell_TableCell;try{TableCell_TableCell.displayName="TableCell",TableCell_TableCell.__docgenInfo={description:"",displayName:"TableCell",props:{children:{defaultValue:null,description:"The content of the table cell.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the wrapping td element.",name:"className",required:!1,type:{name:"string"}},expanding:{defaultValue:{value:"false"},description:"Whether the cell is an expanded cell.",name:"expanding",required:!1,type:{name:"boolean"}},hasOverflow:{defaultValue:{value:"false"},description:"Whether content of the cell should be able to overflow, e.g. a dropdown.",name:"hasOverflow",required:!1,type:{name:"boolean"}},hidden:{defaultValue:{value:"false"},description:"Whether the cell is currently hidden.",name:"hidden",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/TableCell/TableCell.tsx#TableCell"]={docgenInfo:TableCell_TableCell.__docgenInfo,name:"TableCell",path:"src/components/TableCell/TableCell.tsx#TableCell"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/TableHeader/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return components_TableHeader_TableHeader}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.sort.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["children","sort"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 TableHeader_TableHeader=function TableHeader(_ref){var children=_ref.children,sort=_ref.sort,props=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsx)("th",Object.assign({role:"columnheader","aria-sort":sort},props,{children:children}))};TableHeader_TableHeader.displayName="TableHeader";var components_TableHeader_TableHeader=TableHeader_TableHeader;try{TableHeader_TableHeader.displayName="TableHeader",TableHeader_TableHeader.__docgenInfo={description:"",displayName:"TableHeader",props:{children:{defaultValue:null,description:"The content of the table header.",name:"children",required:!1,type:{name:"ReactNode"}},sort:{defaultValue:null,description:"The direction of sorting, if applicable.",name:"sort",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"ascending"'},{value:'"descending"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/TableHeader/TableHeader.tsx#TableHeader"]={docgenInfo:TableHeader_TableHeader.__docgenInfo,name:"TableHeader",path:"src/components/TableHeader/TableHeader.tsx#TableHeader"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/TableRow/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return components_TableRow_TableRow}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["children"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 TableRow_TableRow=function TableRow(_ref){var children=_ref.children,trProps=_objectWithoutProperties(_ref,_excluded);return Object(jsx_runtime.jsx)("tr",Object.assign({role:"row"},trProps,{children:children}))};TableRow_TableRow.displayName="TableRow";var components_TableRow_TableRow=TableRow_TableRow;try{TableRow_TableRow.displayName="TableRow",TableRow_TableRow.__docgenInfo={description:"",displayName:"TableRow",props:{children:{defaultValue:null,description:"The content of the table row.",name:"children",required:!0,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/TableRow/TableRow.tsx#TableRow"]={docgenInfo:TableRow_TableRow.__docgenInfo,name:"TableRow",path:"src/components/TableRow/TableRow.tsx#TableRow"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/Tabs/Tabs.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Tabs_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"horizontallyAligned",(function(){return Tabs_stories_horizontallyAligned}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),Row=__webpack_require__("./src/components/Row/index.ts"),classnames=(__webpack_require__("./node_modules/core-js/modules/es.array.map.js"),__webpack_require__("./node_modules/classnames/index.js")),classnames_default=__webpack_require__.n(classnames),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["active","className","component","label","listItemClassName"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Tabs_Tabs=function Tabs(_ref){var className=_ref.className,links=_ref.links,listClassName=_ref.listClassName;return Object(jsx_runtime.jsx)("nav",{className:classnames_default()("p-tabs",className),children:Object(jsx_runtime.jsx)("ul",{className:classnames_default()("p-tabs__list",listClassName),children:links.map((function(link,i){var active=link.active,className=link.className,component=link.component,label=link.label,listItemClassName=link.listItemClassName,rest=_objectWithoutProperties(link,_excluded),Component=component||"a";return Object(jsx_runtime.jsx)("li",{className:classnames_default()("p-tabs__item",listItemClassName),children:Object(jsx_runtime.jsx)(Component,Object.assign({"aria-selected":active,className:classnames_default()("p-tabs__link",className),"data-testid":"tab-link-"+label},rest,{children:label}))},i)}))})})};Tabs_Tabs.displayName="Tabs";var components_Tabs_Tabs=Tabs_Tabs;try{Tabs_Tabs.displayName="Tabs",Tabs_Tabs.__docgenInfo={description:"",displayName:"Tabs",props:{className:{defaultValue:null,description:'Optional classes applied to the parent "nav" element.',name:"className",required:!1,type:{name:"string"}},links:{defaultValue:null,description:"An array of tab link objects.",name:"links",required:!0,type:{name:"TabLink

    []"}},listClassName:{defaultValue:null,description:'Optional classes applied to the "ul" element.',name:"listClassName",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Tabs/Tabs.tsx#Tabs"]={docgenInfo:Tabs_Tabs.__docgenInfo,name:"Tabs",path:"src/components/Tabs/Tabs.tsx#Tabs"})}catch(__react_docgen_typescript_loader_error){}var Tabs_stories_excluded=["components"];function Tabs_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function Tabs_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i "}};var Tabs_stories_horizontallyAligned=function horizontallyAligned(){return Object(esm.b)(Row.a,null,Object(esm.b)(components_Tabs_Tabs,{links:[{active:!0,label:"Summary"},{active:!1,label:"Network"},{active:!1,label:"Storage"},{active:!1,label:"Settings"}]}),Object(esm.b)("p",null,"There should be gutters and the text should be horizontally aligned"))};Tabs_stories_horizontallyAligned.displayName="horizontallyAligned",Tabs_stories_horizontallyAligned.storyName="Horizontally aligned",Tabs_stories_horizontallyAligned.parameters={storySource:{source:'\n \n

    There should be gutters and the text should be horizontally aligned

    \n     '}};var componentMeta={title:"Tabs",component:components_Tabs_Tabs,includeStories:["defaultStory","horizontallyAligned"]},mdxStoryNameToKey={Default:"defaultStory","Horizontally aligned":"horizontallyAligned"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},"./src/components/Textarea/Textarea.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Textarea_stories_Template})),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory}));__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js");var react=__webpack_require__("./node_modules/react/index.js"),esm=__webpack_require__("./node_modules/@mdx-js/react/dist/esm.js"),dist_esm=__webpack_require__("./node_modules/@storybook/addon-docs/dist/esm/index.js"),blocks=__webpack_require__("./node_modules/@storybook/addon-docs/blocks.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),Field=__webpack_require__("./src/components/Field/index.ts"),hooks=__webpack_require__("./src/hooks/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["caution","className","error","grow","help","id","label","labelClassName","onKeyUp","required","stacked","style","success","takeFocus","wrapperClassName"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 Textarea_Textarea=function Textarea(_ref){var caution=_ref.caution,className=_ref.className,error=_ref.error,_ref$grow=_ref.grow,grow=void 0!==_ref$grow&&_ref$grow,help=_ref.help,id=_ref.id,label=_ref.label,labelClassName=_ref.labelClassName,_onKeyUp=_ref.onKeyUp,required=_ref.required,stacked=_ref.stacked,style=_ref.style,success=_ref.success,_ref$takeFocus=_ref.takeFocus,takeFocus=void 0!==_ref$takeFocus&&_ref$takeFocus,wrapperClassName=_ref.wrapperClassName,props=_objectWithoutProperties(_ref,_excluded),textareaRef=Object(react.useRef)(null),validationId=Object(hooks.b)(),helpId=Object(hooks.b)(),hasError=!!error;return Object(react.useEffect)((function(){takeFocus&&textareaRef.current.focus()}),[takeFocus]),Object(jsx_runtime.jsx)(Field.a,{caution:caution,className:wrapperClassName,error:error,forId:id,help:help,helpId:helpId,label:label,labelClassName:labelClassName,required:required,stacked:stacked,success:success,validationId:validationId,children:Object(jsx_runtime.jsx)("textarea",Object.assign({"aria-describedby":help?helpId:null,"aria-errormessage":hasError?validationId:null,"aria-invalid":hasError,className:classnames_default()("p-form-validation__input",className),id:id,onKeyUp:function onKeyUp(evt){_onKeyUp&&_onKeyUp(evt),grow&&(evt.currentTarget.style.height=evt.currentTarget.scrollHeight+"px")},ref:textareaRef,style:grow&&Object.assign({minHeight:"5rem",resize:"none",overflow:"hidden",boxSizing:"border-box"},style)||style},props))})};Textarea_Textarea.displayName="Textarea";var components_Textarea_Textarea=Textarea_Textarea;try{Textarea_Textarea.displayName="Textarea",Textarea_Textarea.__docgenInfo={description:"",displayName:"Textarea",props:{caution:{defaultValue:null,description:"The content for caution validation.",name:"caution",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Optional class(es) to pass to the textarea element.",name:"className",required:!1,type:{name:"string"}},error:{defaultValue:null,description:"The content for error validation.",name:"error",required:!1,type:{name:"ReactNode"}},grow:{defaultValue:{value:"false"},description:"Whether the textarea should grow to fit the content automatically.",name:"grow",required:!1,type:{name:"boolean"}},help:{defaultValue:null,description:"Help text to show below the field.",name:"help",required:!1,type:{name:"ReactNode"}},id:{defaultValue:null,description:"The id of the textarea.",name:"id",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"The label for the field.",name:"label",required:!1,type:{name:"ReactNode"}},labelClassName:{defaultValue:null,description:"Optional class(es) to pass to the label component.",name:"labelClassName",required:!1,type:{name:"string"}},required:{defaultValue:null,description:"Whether the field is required.",name:"required",required:!1,type:{name:"boolean"}},stacked:{defaultValue:null,description:"Whether the form field should have a stacked appearance.",name:"stacked",required:!1,type:{name:"boolean"}},success:{defaultValue:null,description:"The content for success validation.",name:"success",required:!1,type:{name:"ReactNode"}},takeFocus:{defaultValue:{value:"false"},description:"Whether to focus on the input on initial render.",name:"takeFocus",required:!1,type:{name:"boolean"}},wrapperClassName:{defaultValue:null,description:"Optional class(es) to pass to the wrapping Field component",name:"wrapperClassName",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Textarea/Textarea.tsx#Textarea"]={docgenInfo:Textarea_Textarea.__docgenInfo,name:"Textarea",path:"src/components/Textarea/Textarea.tsx#Textarea"})}catch(__react_docgen_typescript_loader_error){}var Textarea_stories_excluded=["components"];function Textarea_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function Textarea_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(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 _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i