@bbl-digital/snorre 4.2.82 → 4.2.83

package/lib/core/QuillEditor/config.d.ts

@@ -5,14 +5,14 @@ export declare const basicToolbar: (string[] | ({
     indent: string;
     list?: undefined;
 })[])[];
-export declare const richToolbar: (string[] | ({
+export declare const richToolbar: (string[] | {
+    header: (number | boolean)[];
+}[] | ({
     list: string;
     indent?: undefined;
 } | {
     indent: string;
     list?: undefined;
 })[] | {
-    header: (number | boolean)[];
-}[] | {
     align: string;
 }[])[];

package/lib/index.d.ts

@@ -325,3 +325,9 @@ export { handleDateToStringConvertion, handleStringToDateConvertion, getTimeFrom
 export { getFormattedPrice, getFormattedPriceWithEnding, getFormattedDate, getTitleString, getFormattedCardNumber, getFormattedTime, getFormattedOrganizationNumber, getFormattedDateTimePretty, getFormattedTimePeriod, } from './utils/format';
 export { getContrastColor, isContrastColorNeeded } from './utils/contrastColor';
 export { Topbar, Layout, LayoutShell, AppShell, AppLoader, Alert, Button, Card, Divider, Dropdown, Header, Input, Image, Checkbox, Link, List, ListItem, Tag, Text, Footer, FooterCol, FooterGroup, FooterLabel, FooterLink, FooterButton, Radio, Skeleton, Html, CustomText, Select, SearchSelect, Option, UserMenu, UserMenuOption, Modal, MediaCarousel, NotificationsMenu, NotificationRow, Table, Cell, Row, FileInput, Datepicker, DatepickerRange, Menu, AppPicker, MainMenu, MenuItem, MenuTop, SecondaryMenu, SecondaryMenuItem, MenuSpacer, Submenu, SubmenuItem, PreemptionCard, PreemptionCardLoading, PieChart, SimpleBarChart, SimpleLineChart, BarAndLineComposedChart, BarChartWithCustomizedEvent, QuillEditor, IconMedal, IconPercent, IconApartment, IconArchives, IconArea, IconChoice, IconReply, IconReplyAll, IconForward, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAttachment, IconBack, IconBath, IconBoard, IconBookmarkOutline, IconBookmarkFilled, IconBus, IconBlock, IconCar, IconCaretDown, IconCaretLeft, IconCaretUp, IconCases, IconCaretRight, IconCheck, IconCheckedOutline, IconCheckedFilled, IconChevronLeft, IconChevronRight, IconChevronDown, IconClose, IconCloseAlt, IconComment, IconCompanyBuilding, IconDelete, IconDoor, IconDotFilled, IconDotOutline, IconDownload, IconDraft, IconElevator, IconErrorOutline, IconErrorFilled, IconExternalLink, IconEye, IconEyeDeny, IconFamily, IconFerry, IconFile, IconFileEdit, IconFileAdd, IconFileExcel, IconFilePDF, IconFileWord, IconFillOut, IconFloor, IconGarage, IconGrid, IconGym, IconHearth, IconHearthOutline, IconHelp, IconHistory, IconHouse, IconHomeFilled, IconHomeOutline, IconHouseBlockFilled, IconHouseBlockOutline, IconHumans, IconImportantComment, IconInbox, IconLabel, IconJointcost, IconJointcost2, IconKey, IconKitchen, IconLeafFilled, IconLeafOutline, IconLeisureTime, IconLock, IconLockLocked, IconLockOpen, IconMap, IconMail, IconEmailMarkAsRead, IconMenu, IconMinus, IconMoney, IconPinned, IconParking, IconPaymentCard, IconPlus, IconPortalUser, IconReciept, IconRedo, IconRefresh, IconRoom, IconSave, IconSearch, IconSend, IconSettings, IconShopping, IconSign, IconStarFilled, IconStarHalf, IconStarOutline, IconStore, IconSubway, IconSwitch, IconSliders, IconTrain, IconTram, IconPrint, IconTransport, IconTypeOfBuilding, IconTypeOfBuildingOutline, IconUpload, IconUser, IconUserThin, IconVote, IconWalk, IconWarning, IconWarningBell, IconZip, IconSort, IconFilterList, IconBellOutline, IconPlusAlt, IconPhone, IconHouseOutline, IconMembership, IconMembershipFilled, IconCalendar, IconInfoOutline, IconInfoFilled, IconCamera, IllustrationBudget, IllustrationHouse, IllustrationHighHouseComposition, IllustrationHighHouse, IllustrationHouseComposition, IllustrationLowHouse, IllustrationLowHouseComposition, IllustrationSemiDetachedHouse, IllustrationSemiDetachedHouseComposition, IllustrationSmallHouse, IllustrationSmallHouseComposition, IllustrationTerraceBlock, IllustrationTerraceBlockComposition, IllustrationTownHouse, IllustrationTownHouseComposition, IllustrationHousesBackground, IllustrationHousesBackgroundWithComposition, IllustrationHouseMissing, IllustrationError, IllustrationErrorGeneric, IllustrationPaperCompleted, IllustrationPaperMissing, IllustrationMySiteBuilding, IllustrationMySiteCoffeeBook, IllustrationMySiteComputer, IllustrationMySiteGift, IllustrationMySitePapers, IllustrationMySitePiggyBank, IllustrationMySiteDashboard, IllustrationMySiteAssociation, IllustrationMySiteCooperative, IllustrationMySiteMailbox, IllustrationMySiteTransfer, IllustrationMySiteLetterSent, IllustrationMySiteBenefits, IllustrationTechninalDifficulties, IllustrationServiceMessage, IconCommunication, IconCommunicationFilled, IconCompanyBuildingOutline, IconCompanyBuildingFilled, IconDashboard, IconDashboardFilled, IconEconomy, IconEconomyFilled, IconWork, IconWorkFilled, IconProfile, IconProfileFilled, IconLookup, IconLookupFilled, IconDocument, IconDocumentFilled, IconEarth, IconEdit, IconMinusAlt, IconMinusAltFilled, IconUndo, IconVisa, IconMasterCard, IconBankAxept, IconAmericanExpress, IconFileCopy, IconBblFlame, IconBblWater, IconBblShield, IconFullscreenOpen, IconFullscreenClose, IconGmail, IconOffice365, IconAuditorFilled, IconAuditorOutline, IconJanitorFilled, IconJanitorOutline, VisuallyHidden, useScreenOrientation, Box, Textarea, InfoButton, CommentsTimeline, CommentLine, HeaderCell, RowCell, TableHeader, TableRow, BoxedTable, DraggableRow, CollapseList, CollapseListItem, Banner, Calendar, YearWheel, DropdownMenu, DropdownMenuOption, Timeline, Timepicker, TimelineStep, HighlightText, TabBar, TabItem, TabNav, Video, TabNavItem, NoticeCard, ListPager, Spinner, Autocomplete, GoogleButton, NotificationCounter, SearchFilter, ImagePicker, Tooltip, ImageViewer, Stepper, };
+
+
+
+declare module '@emotion/react' {
+  export interface Theme extends IAppTheme {}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "4.2.82",
+  "version": "4.2.83",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -55,7 +55,9 @@
     "start": "yarn storybook",
     "theme": "node ./theme-generator.js",
     "build-storybook": "storybook build",
-    "build": "vite build && yarn run build:tsc",
+    "build": "rimraf dist && vite build",
+    "build:watch": "vite build --watch",
+    "types": "tsc --emitDeclarationOnly --outDir dist/types",
     "build:tsc": "tsc -p ./src/packages/tsconfig.json",
     "build:cjs": "babel --extensions .ts,.tsx ./src/packages --out-dir ./lib",
     "build:esm": "babel --extensions .ts,.tsx ./src/packages --out-dir ./esm",

package/esm/app-shell/index.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
-var _AppLoader = _interopRequireDefault(require("../core/AppLoader"));
-var _useSnorreTheme = _interopRequireDefault(require("../utils/useSnorreTheme"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Wrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ep4gpb60"
-} : {
-  target: "ep4gpb60",
-  label: "Wrapper"
-})("min-height:100vh;width:auto;background-color:", ({
-  theme
-}) => theme.bg, ";");
-const AppShell = ({
-  themeUrl,
-  defaultTextColor,
-  globalsFolder,
-  children
-}) => {
-  const {
-    appTheme,
-    globals
-  } = (0, _useSnorreTheme.default)({
-    themeUrl,
-    defaultTextColor,
-    globalsFolder
-  });
-  return appTheme && globals ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react2.ThemeProvider, {
-    theme: appTheme,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Global, {
-      styles: /*#__PURE__*/(0, _react2.css)(globals, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:AppShell;"))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
-      children: children
-    })]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppLoader.default, {});
-};
-var _default = exports.default = AppShell;

package/esm/app-shell/theme.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.initTheme = void 0;
-const initTheme = (values, defaultTextColor) => {
-  const styles = {
-    ...values,
-    defaultText: defaultTextColor || values?.defaultText || '#000'
-  };
-  return styles;
-};
-exports.initTheme = initTheme;

package/esm/core/Alert/Alert.stories.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithoutClose = exports.Success = exports.Info = exports.Default = exports.Danger = void 0;
-var _ = _interopRequireDefault(require("."));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  title: 'Core/Alert',
-  component: _.default
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  args: {
-    onClose: () => console.log('close'),
-    children: 'Here is some general information.'
-  },
-  name: 'Default'
-};
-const Success = exports.Success = {
-  args: {
-    success: true,
-    onClose: () => console.log('close'),
-    children: 'Thank you for feedback!'
-  },
-  name: 'Success'
-};
-const Info = exports.Info = {
-  args: {
-    info: true,
-    onClose: () => console.log('close'),
-    children: 'The service is down between 23:00 - 05:00.'
-  },
-  name: 'Info'
-};
-const Danger = exports.Danger = {
-  args: {
-    danger: true,
-    onClose: () => console.log('close'),
-    children: 'There has been a mistake. Could not reach service.'
-  },
-  name: 'Danger'
-};
-const WithoutClose = exports.WithoutClose = {
-  args: {
-    children: 'Here is some general information.'
-  },
-  name: 'Without close'
-};

package/esm/core/Alert/index.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _styles = require("./styles");
-var _Button = _interopRequireDefault(require("../Button"));
-var _IconClose = _interopRequireDefault(require("../../icons/General/IconClose"));
-var _VisuallyHidden = _interopRequireDefault(require("../../shared/components/VisuallyHidden"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsxImportSource @emotion/react */
-
-const Alert = ({
-  primary,
-  success,
-  info,
-  danger,
-  rounded,
-  css,
-  children,
-  className,
-  onClose,
-  ...restProps
-}) => {
-  const ariaLivePolicy = success ? 'polite' : 'assertive';
-  // Random id for aria-describedby
-  const id = Math.random().toString(36).substring(7);
-  const descriptionId = (0, _react.useRef)(`aria-describedby-${id}`);
-  const childTextContent = _react.default.Children.toArray(children).filter(child => typeof child === 'string');
-  const getDefaultAriaLabel = () => {
-    if (success) {
-      return 'Suksess';
-    }
-    if (danger) {
-      return 'Fare';
-    }
-    return 'Informasjon';
-  };
-  const accessibilityProps = {
-    'aria-live': ariaLivePolicy,
-    'aria-atomic': restProps['aria-atomic'] || true,
-    'aria-label': restProps['aria-label'] || getDefaultAriaLabel(),
-    'aria-relevant': restProps['aria-relevant'] || 'all',
-    'aria-describedby': descriptionId.current
-  };
-  return (0, _jsxRuntime.jsxs)("div", {
-    role: "alert",
-    css: theme => [_styles.styles.default(theme), success && _styles.styles.success(theme), info && _styles.styles.info(theme), danger && _styles.styles.danger(theme), rounded && _styles.styles.rounded, primary && _styles.styles.primary(theme), css && css],
-    className: className,
-    ...restProps,
-    ...accessibilityProps,
-    children: [children, onClose && (0, _jsxRuntime.jsx)(_Button.default, {
-      onClick: onClose,
-      nostyle: true,
-      "aria-label": "Lukk",
-      children: (0, _jsxRuntime.jsx)(_IconClose.default, {
-        size: 14
-      })
-    }), (0, _jsxRuntime.jsx)(_VisuallyHidden.default, {
-      id: descriptionId.current,
-      children: childTextContent
-    })]
-  });
-};
-var _default = exports.default = Alert;

package/esm/core/Alert/styles.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = exports.default = void 0;
-var _react = require("@emotion/react");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const styles = exports.styles = {
-  default: theme => /*#__PURE__*/(0, _react.css)("position:relative;display:flex;align-items:center;justify-content:space-between;font-size:14px;background-color:", theme.bgLight, ";border:1px solid ", theme.bgMedium, ";color:", theme.bgDark, ";padding:1em;&>button svg polygon{fill:", theme.bgDark, ";opacity:0.25;}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;")),
-  success: theme => /*#__PURE__*/(0, _react.css)("background-color:", theme.successLight, ";color:", theme.defaultText, ";border-color:", theme.successBorder, ";&>button svg polygon{fill:", theme.bgDark, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:success;")),
-  danger: theme => /*#__PURE__*/(0, _react.css)("background-color:", theme.alertLight, ";color:", theme.defaultText, ";border-color:", theme.alertBorder, ";&>button svg polygon{fill:", theme.defaultText, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:danger;")),
-  info: theme => /*#__PURE__*/(0, _react.css)("background-color:", theme.infoLight, ";color:", theme.defaultText, ";border-color:", theme.infoBorder, ";&>button svg polygon{fill:", theme.defaultText, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:info;")),
-  primary: theme => /*#__PURE__*/(0, _react.css)("background-color:", theme.illustrationPrimary10, ";border-color:", theme.illustrationPrimary50, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:primary;")),
-  rounded: process.env.NODE_ENV === "production" ? {
-    name: "118z35s",
-    styles: "border-radius:16px;padding:1.5em"
-  } : {
-    name: "1q6n14v-rounded",
-    styles: "border-radius:16px;padding:1.5em;label:rounded;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
-};
-var _default = exports.default = styles;

package/esm/core/AppLoader/AppLoader.stories.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _ = _interopRequireDefault(require("."));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  title: 'Core/AppLoader',
-  component: _.default
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: 'Default'
-};

package/esm/core/AppLoader/index.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styles = require("./styles");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/** @jsxImportSource @emotion/react */
-
-const AppLoader = ({
-  color,
-  ...restProps
-}) => {
-  const accessibilityProps = {
-    'aria-live': restProps['aria-live'] || 'polite',
-    'aria-label': restProps['aria-label'] || 'Laster innhold'
-  };
-  return (0, _jsxRuntime.jsxs)("div", {
-    role: "status",
-    css: theme => [_styles.styles.default(theme, color)],
-    ...restProps,
-    ...accessibilityProps,
-    children: [(0, _jsxRuntime.jsx)("div", {}), (0, _jsxRuntime.jsx)("div", {}), (0, _jsxRuntime.jsx)("div", {}), (0, _jsxRuntime.jsx)("div", {})]
-  });
-};
-var _default = exports.default = AppLoader;

package/esm/core/AppLoader/styles.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = exports.default = void 0;
-var _react = require("@emotion/react");
-const styles = exports.styles = {
-  default: (theme, color) => /*#__PURE__*/(0, _react.css)("display:inline-block;position:relative;min-width:58px;height:10px;div{position:absolute;width:10px;height:10px;border-radius:50%;background:", color ? color : '#ccc', ";animation-timing-function:cubic-bezier(0, 1, 1, 0);}div:nth-of-type(1){left:6px;animation:lds-ellipsis1 0.6s infinite;}div:nth-of-type(2){left:6px;animation:lds-ellipsis2 0.6s infinite;}div:nth-of-type(3){left:24px;animation:lds-ellipsis2 0.6s infinite;}div:nth-of-type(4){left:42px;animation:lds-ellipsis3 0.6s infinite;}@keyframes lds-ellipsis1{0%{transform:scale(0);}100%{transform:scale(1);}}@keyframes lds-ellipsis3{0%{transform:scale(1);}100%{transform:scale(0);}}@keyframes lds-ellipsis2{0%{transform:translate(0, 0);}100%{transform:translate(18px, 0);}}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"))
-};
-var _default = exports.default = styles;

package/esm/core/Autocomplete/Autocomplete.stories.js

@@ -1,333 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithValuesAndTags = exports.WithValues = exports.WithTags = exports.WithSecondaryLabel = exports.WithNormalValuesAndFuzzy = exports.WithLoading = exports.WithError = exports.WithCustomValueInputAndTagsWithCustomValueHeight = exports.WithCustomValueInputAndTags = exports.WithCustomValueInput = exports.WithCustomOpen = exports.WithCustomObjectsValues = exports.WithButtonForLabelText = exports.WithAlmostAllProps = exports.WithActions = exports.Default = void 0;
-var _addonActions = require("@storybook/addon-actions");
-var _ = _interopRequireDefault(require("."));
-var _Tag = _interopRequireDefault(require("../Tag"));
-var _Card = _interopRequireDefault(require("../Card"));
-var _Text = _interopRequireDefault(require("../Text"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Core/Autocomplete',
-  component: _.default
-};
-const Default = exports.Default = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text"
-  }),
-  name: 'Default'
-};
-const WithError = exports.WithError = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    validation: true,
-    invalid: true,
-    invalidMessage: "Something went wrong"
-  }),
-  name: 'With error'
-};
-const WithLoading = exports.WithLoading = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    loading: true
-  }),
-  name: 'With loading'
-};
-const WithSecondaryLabel = exports.WithSecondaryLabel = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    labelSecondary: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-      small: true,
-      italic: true,
-      children: "Secondary label"
-    })
-  }),
-  name: 'With secondary label'
-};
-const WithActions = exports.WithActions = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    loading: true,
-    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-      small: true,
-      primary: true,
-      children: "Hello"
-    })
-  }),
-  name: 'With actions'
-};
-const WithTags = exports.WithTags = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    renderOptions: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        margin: '5px 0',
-        display: 'flex',
-        gap: '0.25em'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        strictClose: true,
-        children: "Here"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        withclose: true,
-        children: "Here"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        withclose: true,
-        children: "Here"
-      })]
-    })
-  }),
-  name: 'With tags'
-};
-const WithButtonForLabelText = exports.WithButtonForLabelText = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    onLabelClick: () => console.log('clicked'),
-    label: "Label",
-    placeholder: "Placeholder text"
-  }),
-  name: 'With button for label text'
-};
-const WithValuesAndTags = exports.WithValuesAndTags = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    validation: true,
-    invalid: true,
-    onSelectItem: (0, _addonActions.action)('onChange'),
-    invalidMessage: "Something went wrong",
-    renderOptions: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        margin: '5px 0',
-        display: 'flex',
-        gap: '0.25em'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        strictClose: true,
-        children: "Here"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        withclose: true,
-        children: "Here"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        withclose: true,
-        children: "Here"
-      })]
-    }),
-    values: [{
-      label: 'Here',
-      key: '1'
-    }, {
-      label: 'Here two',
-      key: '2'
-    }, {
-      label: 'Here three',
-      key: '3'
-    }]
-  }),
-  name: 'With values and tags'
-};
-const WithValues = exports.WithValues = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    values: [{
-      label: 'Here',
-      key: '1'
-    }, {
-      label: 'Here two',
-      key: '2'
-    }, {
-      label: 'Here three',
-      key: '3'
-    }]
-  }),
-  name: 'With values'
-};
-const WithCustomObjectsValues = exports.WithCustomObjectsValues = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    labelFromValues: "option",
-    keyFromValues: "id",
-    onSelectItem: (0, _addonActions.action)('onChange'),
-    values: [{
-      id: '1',
-      option: 'One'
-    }, {
-      id: '2',
-      option: 'Two'
-    }, {
-      id: '3',
-      option: 'Three'
-    }]
-  }),
-  name: 'With custom objects values'
-};
-const WithNormalValuesAndFuzzy = exports.WithNormalValuesAndFuzzy = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      height: '12em'
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      fuzzy: true,
-      chevron: true,
-      value: "Hello",
-      placeholder: "Placeholder",
-      onSelectItem: console.log,
-      values: [{
-        key: '1',
-        label: 'Hello'
-      }, {
-        key: '2',
-        label: 'I am '
-      }, {
-        key: '3',
-        label: 'I am north'
-      }, {
-        key: '4',
-        label: 'I am south'
-      }, {
-        key: '5',
-        label: 'I am east'
-      }, {
-        key: '6',
-        label: 'I am west'
-      }, {
-        key: '7',
-        label: 'Testtext'
-      }]
-    })
-  }),
-  name: 'With normal values and fuzzy'
-};
-const WithCustomValueInput = exports.WithCustomValueInput = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    renderCustomValueInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
-      withhover: true,
-      children: "Hover me!"
-    })
-  }),
-  name: 'With custom value input'
-};
-const WithCustomValueInputAndTags = exports.WithCustomValueInputAndTags = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    renderCustomValueInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
-      withhover: true,
-      children: "Hover me!"
-    }),
-    renderOptions: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        margin: '5px 0',
-        display: 'flex',
-        gap: '0.25em'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        strictClose: true,
-        children: "Here"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        withclose: true,
-        children: "Here"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        withclose: true,
-        children: "Here"
-      })]
-    })
-  }),
-  name: 'With custom value input and tags'
-};
-const WithCustomValueInputAndTagsWithCustomValueHeight = exports.WithCustomValueInputAndTagsWithCustomValueHeight = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    dynamicallyPlaceInput: true,
-    label: "Label",
-    placeholder: "Placeholder text",
-    renderCustomValueInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
-      withhover: true,
-      children: "Hover me!"
-    }),
-    renderOptions: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        margin: '5px 0',
-        display: 'flex',
-        gap: '0.25em'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        strictClose: true,
-        children: "Here"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        withclose: true,
-        children: "Here"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        withclose: true,
-        children: "Here"
-      })]
-    })
-  }),
-  name: 'With custom value input and tags with custom value height'
-};
-const WithCustomOpen = exports.WithCustomOpen = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    label: "Label",
-    placeholder: "Placeholder text",
-    isOpen: true,
-    renderCustomValueInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
-      withhover: true,
-      children: "Hover me!"
-    })
-  }),
-  name: 'With custom open'
-};
-const WithAlmostAllProps = exports.WithAlmostAllProps = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    dynamicallyPlaceInput: true,
-    label: "Label",
-    placeholder: "Placeholder text",
-    onSelectItem: v => console.log('action', v),
-    onKeyDown: e => console.log('keydown', e),
-    openCustomValueInputOnKeyPress: true,
-    renderCustomValueInput: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
-      children: ["Hover me!", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        children: "This is here to click on"
-      })]
-    }),
-    renderOptions: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        margin: '5px 0',
-        display: 'flex',
-        gap: '0.25em'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        strictClose: true,
-        children: "Here"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        withclose: true,
-        children: "Here"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-        withclose: true,
-        children: "Here"
-      })]
-    }),
-    validation: true,
-    invalid: true,
-    invalidMessage: "Something went wrong",
-    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-      small: true,
-      primary: true,
-      children: "Hello"
-    })
-  }),
-  name: 'With almost all props'
-};