@uva-glass/component-library 3.43.1 → 3.45.0

package/dist/components/SearchField/SearcheField.stories.js

@@ -0,0 +1,113 @@
+import { jsx as n, jsxs as E } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { SearchField as l } from "./SearchField.js";
+import { MOCK_DATA as L } from "./mockData.js";
+const v = `
+// Has all HTMLInputElement props available except "className" and "style" 
+<SearchField 
+  id={string} 
+  queryLength?={number}
+  placeholder?={string} 
+  isLoading?={boolean} 
+  isCompact?={boolean} 
+  onChange?={function}
+  onSelect?={function}
+  children={ReactNode}
+  resultCountRow?={ReactNode}
+>
+  <SearchField.ResultOption>
+   {loop custom options here}
+  </SearchField.ResultOption>
+</SearchField>`, w = 4, c = 12, T = 1e3;
+var h = /* @__PURE__ */ ((t) => (t.DEGREE = "degree-programme", t.CERTIFICATE = "certificate-programme", t.ADMINISTRATIVE = "administrative-programme", t))(h || {});
+const M = {
+  title: "Molecules/SearchField",
+  component: l,
+  args: {},
+  argTypes: {
+    onSelect: {
+      action: "selected url",
+      table: {
+        disable: !0
+      }
+    },
+    onChange: {
+      table: {
+        disable: !0
+      }
+    },
+    children: {
+      table: {
+        disable: !0
+      }
+    },
+    id: {
+      table: {
+        disable: !0
+      }
+    },
+    resultCountRow: {
+      table: {
+        disable: !0
+      }
+    },
+    isCompact: {
+      control: "boolean",
+      default: !1
+    }
+  },
+  parameters: {
+    inspectComponent: l,
+    codeString: v
+  }
+}, I = (t) => {
+  const [i, d] = m(!1), [u, r] = m(), g = "2026", p = "NL", f = (e, o, s, a) => `education-preparation/${h[o]}/${e}/${s}/${a}`, C = (e) => {
+    if (e.length < w) {
+      r(null);
+      return;
+    }
+    d(!0);
+    const o = e.toLowerCase(), s = L.filter(
+      (a) => a.name.NL.toLowerCase().includes(o) || a.code.toLowerCase().includes(o)
+    );
+    setTimeout(() => {
+      r(s), d(!1);
+    }, T);
+  }, S = (e) => e.length > c ? `${e.length} resultaten gevonden, alleen de ${c} beste resultaten worden weergegeven.` : e.length > 0 && e.length <= c ? `${e.length} resultaten gevonden.` : i ? "Zoeken..." : "Geen resultaten gevonden.", b = (e) => e ? /* @__PURE__ */ n("div", { style: { padding: "0.5rem 1rem" }, children: S(e) }, "result-count") : null, R = (e) => {
+    r(null), t.onSelect?.(e);
+  };
+  return /* @__PURE__ */ n("div", { style: { width: "20rem", display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ n(
+    l,
+    {
+      placeholder: "Zoek...",
+      id: "search-field-1",
+      isLoading: i,
+      isCompact: t.isCompact,
+      onChange: (e) => C(e),
+      onSelect: (e) => R(e),
+      resultCountRow: b(u || []),
+      children: u?.map((e) => /* @__PURE__ */ n(
+        l.ResultOption,
+        {
+          ariaLabel: `${e.code}, ${e.name[p]}`,
+          value: f(
+            g,
+            e.programmeType,
+            e.programmeCode,
+            e.code
+          ),
+          children: /* @__PURE__ */ E("div", { style: { display: "flex", gap: "1rem" }, children: [
+            /* @__PURE__ */ n("span", { children: e.code }),
+            /* @__PURE__ */ n("span", { children: e.name[p] })
+          ] })
+        },
+        e.id
+      ))
+    }
+  ) });
+}, N = I.bind({});
+export {
+  N as InputExample,
+  M as default
+};
+//# sourceMappingURL=SearcheField.stories.js.map

package/dist/components/SearchField/SearcheField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearcheField.stories.js","sources":["../../../src/components/SearchField/SearcheField.stories.tsx"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SearchFieldProps } from './SearchField';\r\n\r\nimport { SearchField } from './SearchField';\r\nimport { MOCK_DATA } from './mockData';\r\n\r\nconst codeString = `\r\n// Has all HTMLInputElement props available except \"className\" and \"style\" \r\n<SearchField \r\n  id={string} \r\n  queryLength?={number}\r\n  placeholder?={string} \r\n  isLoading?={boolean} \r\n  isCompact?={boolean} \r\n  onChange?={function}\r\n  onSelect?={function}\r\n  children={ReactNode}\r\n  resultCountRow?={ReactNode}\r\n>\r\n  <SearchField.ResultOption>\r\n   {loop custom options here}\r\n  </SearchField.ResultOption>\r\n</SearchField>`;\r\n\r\nconst MIN_QUERY_LENGTH = 4;\r\nconst MAX_RESULTS = 12;\r\nconst QUERY_SPEED = 1000; // ms\r\n\r\nenum ProgrammeType {\r\n  DEGREE = 'degree-programme',\r\n  CERTIFICATE = 'certificate-programme',\r\n  ADMINISTRATIVE = 'administrative-programme',\r\n}\r\n\r\ninterface SearchResult {\r\n  __typename: string;\r\n  id: string;\r\n  code: string;\r\n  name: {\r\n    EN: string;\r\n    NL: string;\r\n  };\r\n  programmeType: string;\r\n  programmeCode: string;\r\n}\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Molecules/SearchField',\r\n  component: SearchField,\r\n  args: {},\r\n  argTypes: {\r\n    onSelect: {\r\n      action: 'selected url',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    onChange: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    children: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    id: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    resultCountRow: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    isCompact: {\r\n      control: 'boolean',\r\n      default: false,\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: SearchField,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<SearchFieldProps>;\r\n\r\nconst Template: StoryFn<SearchFieldProps> = (args) => {\r\n  const [loading, setLoading] = useState(false);\r\n  const [searchResults, setSearchResults] = useState<SearchResult[] | null>();\r\n  const academicYear = '2026';\r\n  const currentLanguage = 'NL';\r\n\r\n  const createUrl = (\r\n    academicYear: string,\r\n    programmeType: keyof typeof ProgrammeType,\r\n    programmeCode: string,\r\n    code: string\r\n  ) => `education-preparation/${ProgrammeType[programmeType]}/${academicYear}/${programmeCode}/${code}`;\r\n\r\n  const searchInMockData = (query: string) => {\r\n    if (query.length < MIN_QUERY_LENGTH) {\r\n      setSearchResults(null);\r\n      return;\r\n    }\r\n    setLoading(true);\r\n\r\n    const lowerCaseQuery = query.toLowerCase();\r\n\r\n    const mockResults = MOCK_DATA.filter(\r\n      (item) => item.name.NL.toLowerCase().includes(lowerCaseQuery) || item.code.toLowerCase().includes(lowerCaseQuery)\r\n    );\r\n\r\n    setTimeout(() => {\r\n      setSearchResults(mockResults);\r\n      setLoading(false);\r\n    }, QUERY_SPEED);\r\n  };\r\n\r\n  const getResultMessage = (results: SearchResult[]) => {\r\n    if (results.length > MAX_RESULTS) {\r\n      return `${results.length} resultaten gevonden, alleen de ${MAX_RESULTS} beste resultaten worden weergegeven.`;\r\n    } else if (results.length > 0 && results.length <= MAX_RESULTS) {\r\n      return `${results.length} resultaten gevonden.`;\r\n    } else if (loading) {\r\n      return 'Zoeken...';\r\n    } else {\r\n      return 'Geen resultaten gevonden.';\r\n    }\r\n  };\r\n\r\n  const resultBar = (results: SearchResult[]) =>\r\n    results ? (\r\n      <div key={'result-count'} style={{ padding: '0.5rem 1rem' }}>\r\n        {getResultMessage(results)}\r\n      </div>\r\n    ) : null;\r\n\r\n  const handleSelect = (value: string | number) => {\r\n    setSearchResults(null);\r\n    args.onSelect?.(value);\r\n  };\r\n\r\n  return (\r\n    <div style={{ width: '20rem', display: 'flex', justifyContent: 'flex-end' }}>\r\n      <SearchField\r\n        placeholder=\"Zoek...\"\r\n        id=\"search-field-1\"\r\n        isLoading={loading}\r\n        isCompact={args.isCompact}\r\n        onChange={(event) => searchInMockData(event)}\r\n        onSelect={(event) => handleSelect(event)}\r\n        resultCountRow={resultBar(searchResults || [])}\r\n      >\r\n        {searchResults?.map((result) => (\r\n          <SearchField.ResultOption\r\n            key={result.id}\r\n            ariaLabel={`${result.code}, ${result.name[currentLanguage]}`}\r\n            value={createUrl(\r\n              academicYear,\r\n              result.programmeType as keyof typeof ProgrammeType,\r\n              result.programmeCode,\r\n              result.code\r\n            )}\r\n          >\r\n            <div style={{ display: 'flex', gap: '1rem' }}>\r\n              <span>{result.code}</span>\r\n              <span>{result.name[currentLanguage]}</span>\r\n            </div>\r\n          </SearchField.ResultOption>\r\n        ))}\r\n      </SearchField>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const InputExample = Template.bind({});\r\n"],"names":["codeString","MIN_QUERY_LENGTH","MAX_RESULTS","QUERY_SPEED","ProgrammeType","SearcheField_stories","SearchField","Template","args","loading","setLoading","useState","searchResults","setSearchResults","academicYear","currentLanguage","createUrl","programmeType","programmeCode","code","searchInMockData","query","lowerCaseQuery","mockResults","MOCK_DATA","item","getResultMessage","results","resultBar","handleSelect","value","jsx","event","result","jsxs","InputExample"],"mappings":"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"}

package/dist/components/SearchField/components/ResultOptionBox.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export interface ResultOptionBoxProps {
+    children: ReactNode;
+    resultCountRow?: ReactNode;
+}
+export declare const ResultOptionBox: ({ children, resultCountRow }: PropsWithChildren<ResultOptionBoxProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchField/components/ResultOptionBox.js

@@ -0,0 +1,11 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { Fragment as i } from "react";
+import { s as e } from "../../../SearchField.module-fyOzyOPm.js";
+const c = ({ children: t, resultCountRow: r }) => /* @__PURE__ */ l("div", { className: e["search-field__result-wrapper"], children: [
+  /* @__PURE__ */ s("ul", { className: e["search-field__result-list"], role: "listbox", tabIndex: -1, children: t }),
+  r && /* @__PURE__ */ s(i, { children: r }, "result-count")
+] });
+export {
+  c as ResultOptionBox
+};
+//# sourceMappingURL=ResultOptionBox.js.map

package/dist/components/SearchField/components/ResultOptionBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultOptionBox.js","sources":["../../../../src/components/SearchField/components/ResultOptionBox.tsx"],"sourcesContent":["import { Fragment, type PropsWithChildren, type ReactNode } from 'react';\r\n\r\nimport styles from 'components/SearchField/SearchField.module.css';\r\n\r\nexport interface ResultOptionBoxProps {\r\n  children: ReactNode;\r\n  resultCountRow?: ReactNode;\r\n}\r\n\r\nexport const ResultOptionBox = ({ children, resultCountRow }: PropsWithChildren<ResultOptionBoxProps>) => {\r\n  return (\r\n    <div className={styles['search-field__result-wrapper']}>\r\n      <ul className={styles['search-field__result-list']} role=\"listbox\" tabIndex={-1}>\r\n        {children}\r\n      </ul>\r\n      {resultCountRow && <Fragment key=\"result-count\">{resultCountRow}</Fragment>}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["ResultOptionBox","children","resultCountRow","jsxs","styles","jsx","Fragment"],"mappings":";;;AASO,MAAMA,IAAkB,CAAC,EAAE,UAAAC,GAAU,gBAAAC,QAExC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,8BAA8B,GACnD,UAAA;AAAA,EAAA,gBAAAC,EAAC,MAAA,EAAG,WAAWD,EAAO,2BAA2B,GAAG,MAAK,WAAU,UAAU,IAC1E,UAAAH,EAAA,CACH;AAAA,EACCC,KAAkB,gBAAAG,EAACC,GAAA,EAA6B,UAAAJ,EAAA,GAAhB,cAA+B;AAAA,GAClE;"}

package/dist/components/SearchField/components/ResultsOption.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface ResultOptionProps {
+    value: string | number;
+    key: string | number;
+    ariaLabel: string;
+    children: ReactNode;
+    onSelect?: (value: string | number) => void;
+}
+export declare const ResultOption: ({ value, key, children, onSelect, ariaLabel }: ResultOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchField/components/ResultsOption.js

@@ -0,0 +1,37 @@
+import { jsx as i } from "react/jsx-runtime";
+import { s as c } from "../../../SearchField.module-fyOzyOPm.js";
+const f = ({ value: o, key: a, children: s, onSelect: r, ariaLabel: l }) => {
+  const t = (e) => {
+    e.stopPropagation(), r && r(o);
+  }, n = (e) => {
+    switch (e.key) {
+      case "Enter":
+        e.preventDefault(), t(e);
+        break;
+      case "ArrowDown":
+        e.preventDefault(), e.currentTarget.nextElementSibling?.focus();
+        break;
+      case "ArrowUp":
+        e.preventDefault(), e.currentTarget.previousElementSibling?.focus();
+        break;
+    }
+  };
+  return /* @__PURE__ */ i(
+    "li",
+    {
+      className: c["search-field__result-item"],
+      onClick: t,
+      onKeyDown: n,
+      role: "option",
+      "aria-selected": "false",
+      tabIndex: 0,
+      "aria-label": l,
+      children: s
+    },
+    a
+  );
+};
+export {
+  f as ResultOption
+};
+//# sourceMappingURL=ResultsOption.js.map

package/dist/components/SearchField/components/ResultsOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultsOption.js","sources":["../../../../src/components/SearchField/components/ResultsOption.tsx"],"sourcesContent":["import type { ReactNode, KeyboardEvent } from 'react';\r\n\r\nimport styles from 'components/SearchField/SearchField.module.css';\r\n\r\nexport interface ResultOptionProps {\r\n  value: string | number;\r\n  key: string | number;\r\n  ariaLabel: string;\r\n  children: ReactNode;\r\n  onSelect?: (value: string | number) => void;\r\n}\r\n\r\nexport const ResultOption = ({ value, key, children, onSelect, ariaLabel }: ResultOptionProps) => {\r\n  const handleSelect = (event: React.MouseEvent | React.KeyboardEvent) => {\r\n    event.stopPropagation();\r\n    if (onSelect) {\r\n      onSelect(value);\r\n    }\r\n  };\r\n\r\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\r\n    switch (event.key) {\r\n      case 'Enter':\r\n        event.preventDefault();\r\n        handleSelect(event);\r\n        break;\r\n      case 'ArrowDown':\r\n        event.preventDefault();\r\n        (event.currentTarget.nextElementSibling as HTMLLIElement)?.focus();\r\n        break;\r\n      case 'ArrowUp':\r\n        event.preventDefault();\r\n        (event.currentTarget.previousElementSibling as HTMLLIElement)?.focus();\r\n        break;\r\n    }\r\n  };\r\n\r\n  return (\r\n    <li\r\n      className={styles['search-field__result-item']}\r\n      key={key}\r\n      onClick={handleSelect}\r\n      onKeyDown={onOptionKeyDown}\r\n      role=\"option\"\r\n      aria-selected=\"false\"\r\n      tabIndex={0}\r\n      aria-label={ariaLabel}\r\n    >\r\n      {children}\r\n    </li>\r\n  );\r\n};\r\n"],"names":["ResultOption","value","key","children","onSelect","ariaLabel","handleSelect","event","onOptionKeyDown","jsx","styles"],"mappings":";;AAYO,MAAMA,IAAe,CAAC,EAAE,OAAAC,GAAO,KAAAC,GAAK,UAAAC,GAAU,UAAAC,GAAU,WAAAC,QAAmC;AAChG,QAAMC,IAAe,CAACC,MAAkD;AACtE,IAAAA,EAAM,gBAAA,GACFH,KACFA,EAASH,CAAK;AAAA,EAElB,GAEMO,IAAkB,CAACD,MAAwC;AAC/D,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACND,EAAaC,CAAK;AAClB;AAAA,MACF,KAAK;AACH,QAAAA,EAAM,eAAA,GACLA,EAAM,cAAc,oBAAsC,MAAA;AAC3D;AAAA,MACF,KAAK;AACH,QAAAA,EAAM,eAAA,GACLA,EAAM,cAAc,wBAA0C,MAAA;AAC/D;AAAA,IAAA;AAAA,EAEN;AAEA,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,2BAA2B;AAAA,MAE7C,SAASJ;AAAA,MACT,WAAWE;AAAA,MACX,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,UAAU;AAAA,MACV,cAAYH;AAAA,MAEX,UAAAF;AAAA,IAAA;AAAA,IARID;AAAA,EAAA;AAWX;"}

package/dist/components/SearchField/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchField';

package/dist/components/SearchField/index.js

@@ -0,0 +1,5 @@
+import { SearchField as o } from "./SearchField.js";
+export {
+  o as SearchField
+};
+//# sourceMappingURL=index.js.map

package/dist/components/SearchField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/SearchField/mockData.d.ts

@@ -0,0 +1,11 @@
+export declare const MOCK_DATA: {
+    __typename: string;
+    code: string;
+    id: string;
+    name: {
+        EN: string;
+        NL: string;
+    };
+    programmeType: string;
+    programmeCode: string;
+}[];

package/dist/components/SearchField/mockData.js

@@ -0,0 +1,237 @@
+const e = [
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "6414M0208Y",
+    id: "oh:course:6414M0208Y",
+    name: {
+      EN: "Tax Accounting",
+      NL: "Tax Accounting"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "EMA_FEC"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "3354TAXAVY",
+    id: "oh:course:3354TAXAVY",
+    name: {
+      EN: "Tax Accounting I",
+      NL: "Tax Accounting I"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "RMA_FISREC"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "3354TAX2VY",
+    id: "oh:course:3354TAX2VY",
+    name: {
+      EN: "Tax Accounting II",
+      NL: "Tax Accounting II"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "RMA_FISREC"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "6614ZD028Y",
+    id: "oh:course:6614ZD028Y",
+    name: {
+      EN: "Financial Accounting",
+      NL: "Financial Accounting"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "EMA_BA"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "6614ZH027Y",
+    id: "oh:course:6614ZH027Y",
+    name: {
+      EN: "Financial Accounting",
+      NL: "Financial Accounting"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "EMA_BA"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "6614ZI011Y",
+    id: "oh:course:6614ZI011Y",
+    name: {
+      EN: "Management Accounting",
+      NL: "Management Accounting"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "EMA_EMAS"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "6012B0806Y",
+    id: "oh:course:6012B0806Y",
+    name: {
+      EN: "Accounting and Control",
+      NL: "Accounting and Control"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "EBA_ANALY"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "6013B0511Y",
+    id: "oh:course:6013B0511Y",
+    name: {
+      EN: "Financial Accounting 2",
+      NL: "Financial Accounting 2"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "EBA_BUSAD"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "133221146Y",
+    id: "oh:course:133221146Y",
+    name: {
+      EN: "Language Contact",
+      NL: "Language Contact"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HBA_SL"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "184410096Y",
+    id: "oh:course:184410096Y",
+    name: {
+      EN: "Language Assessment",
+      NL: "Language Assessment"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HMA_TW"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "6614ZD020Y",
+    id: "oh:course:6614ZD020Y",
+    name: {
+      EN: "Language Technology",
+      NL: "Language Technology"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "EMA_BA"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "17842A016Y",
+    id: "oh:course:17842A016Y",
+    name: {
+      EN: "Masterlanguage course",
+      NL: "Masterlanguage course"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HMA_LS"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "136213116Y",
+    id: "oh:course:136213116Y",
+    name: {
+      EN: "Language and Cognition",
+      NL: "Language and Cognition"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HBA_FI"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "133221166Y",
+    id: "oh:course:133221166Y",
+    name: {
+      EN: "The World in Languages",
+      NL: "The World in Languages"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HBA_SL"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "6013B0539Y",
+    id: "oh:course:6013B0539Y",
+    name: {
+      EN: "Dutch Language Skills 1a",
+      NL: "Dutch Language Skills 1a"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "EBA_BUSAD"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "133219002Y",
+    id: "oh:course:133219002Y",
+    name: {
+      EN: "BA thesis Slavic Languages and Cultures",
+      NL: "Bachelorscriptie Slavische talen en culturen"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HBA_SL"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "133219026Y",
+    id: "oh:course:133219026Y",
+    name: {
+      EN: "Slavic Research Lab",
+      NL: "Slavisch onderzoekslab"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HBA_SL"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "133221006Y",
+    id: "oh:course:133221006Y",
+    name: {
+      EN: "Czech Language Acquisition 5",
+      NL: "Taalvaardigheid Tsjechisch 5"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HBA_SL"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "133221016Y",
+    id: "oh:course:133221016Y",
+    name: {
+      EN: "Czech Language Acquisition 6",
+      NL: "Taalvaardigheid Tsjechisch 6"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HBA_SL"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "133221018Y",
+    id: "oh:course:133221018Y",
+    name: {
+      EN: "Study Abroad Slavonic Languages and Cultures",
+      NL: "Buitenlandverblijf Slavische talen en culturen"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HBA_SL"
+  },
+  {
+    __typename: "EduPrepCourseSearchHit",
+    code: "133221046Y",
+    id: "oh:course:133221046Y",
+    name: {
+      EN: "The World in Languages",
+      NL: "De wereld in talen"
+    },
+    programmeType: "DEGREE",
+    programmeCode: "HBA_SL"
+  }
+];
+export {
+  e as MOCK_DATA
+};
+//# sourceMappingURL=mockData.js.map

package/dist/components/SearchField/mockData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockData.js","sources":["../../../src/components/SearchField/mockData.ts"],"sourcesContent":["export const MOCK_DATA = [\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '6414M0208Y',\r\n    id: 'oh:course:6414M0208Y',\r\n    name: {\r\n      EN: 'Tax Accounting',\r\n      NL: 'Tax Accounting',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'EMA_FEC',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '3354TAXAVY',\r\n    id: 'oh:course:3354TAXAVY',\r\n    name: {\r\n      EN: 'Tax Accounting I',\r\n      NL: 'Tax Accounting I',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'RMA_FISREC',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '3354TAX2VY',\r\n    id: 'oh:course:3354TAX2VY',\r\n    name: {\r\n      EN: 'Tax Accounting II',\r\n      NL: 'Tax Accounting II',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'RMA_FISREC',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '6614ZD028Y',\r\n    id: 'oh:course:6614ZD028Y',\r\n    name: {\r\n      EN: 'Financial Accounting',\r\n      NL: 'Financial Accounting',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'EMA_BA',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '6614ZH027Y',\r\n    id: 'oh:course:6614ZH027Y',\r\n    name: {\r\n      EN: 'Financial Accounting',\r\n      NL: 'Financial Accounting',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'EMA_BA',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '6614ZI011Y',\r\n    id: 'oh:course:6614ZI011Y',\r\n    name: {\r\n      EN: 'Management Accounting',\r\n      NL: 'Management Accounting',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'EMA_EMAS',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '6012B0806Y',\r\n    id: 'oh:course:6012B0806Y',\r\n    name: {\r\n      EN: 'Accounting and Control',\r\n      NL: 'Accounting and Control',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'EBA_ANALY',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '6013B0511Y',\r\n    id: 'oh:course:6013B0511Y',\r\n    name: {\r\n      EN: 'Financial Accounting 2',\r\n      NL: 'Financial Accounting 2',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'EBA_BUSAD',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '133221146Y',\r\n    id: 'oh:course:133221146Y',\r\n    name: {\r\n      EN: 'Language Contact',\r\n      NL: 'Language Contact',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HBA_SL',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '184410096Y',\r\n    id: 'oh:course:184410096Y',\r\n    name: {\r\n      EN: 'Language Assessment',\r\n      NL: 'Language Assessment',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HMA_TW',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '6614ZD020Y',\r\n    id: 'oh:course:6614ZD020Y',\r\n    name: {\r\n      EN: 'Language Technology',\r\n      NL: 'Language Technology',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'EMA_BA',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '17842A016Y',\r\n    id: 'oh:course:17842A016Y',\r\n    name: {\r\n      EN: 'Masterlanguage course',\r\n      NL: 'Masterlanguage course',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HMA_LS',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '136213116Y',\r\n    id: 'oh:course:136213116Y',\r\n    name: {\r\n      EN: 'Language and Cognition',\r\n      NL: 'Language and Cognition',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HBA_FI',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '133221166Y',\r\n    id: 'oh:course:133221166Y',\r\n    name: {\r\n      EN: 'The World in Languages',\r\n      NL: 'The World in Languages',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HBA_SL',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '6013B0539Y',\r\n    id: 'oh:course:6013B0539Y',\r\n    name: {\r\n      EN: 'Dutch Language Skills 1a',\r\n      NL: 'Dutch Language Skills 1a',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'EBA_BUSAD',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '133219002Y',\r\n    id: 'oh:course:133219002Y',\r\n    name: {\r\n      EN: 'BA thesis Slavic Languages and Cultures',\r\n      NL: 'Bachelorscriptie Slavische talen en culturen',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HBA_SL',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '133219026Y',\r\n    id: 'oh:course:133219026Y',\r\n    name: {\r\n      EN: 'Slavic Research Lab',\r\n      NL: 'Slavisch onderzoekslab',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HBA_SL',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '133221006Y',\r\n    id: 'oh:course:133221006Y',\r\n    name: {\r\n      EN: 'Czech Language Acquisition 5',\r\n      NL: 'Taalvaardigheid Tsjechisch 5',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HBA_SL',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '133221016Y',\r\n    id: 'oh:course:133221016Y',\r\n    name: {\r\n      EN: 'Czech Language Acquisition 6',\r\n      NL: 'Taalvaardigheid Tsjechisch 6',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HBA_SL',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '133221018Y',\r\n    id: 'oh:course:133221018Y',\r\n    name: {\r\n      EN: 'Study Abroad Slavonic Languages and Cultures',\r\n      NL: 'Buitenlandverblijf Slavische talen en culturen',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HBA_SL',\r\n  },\r\n  {\r\n    __typename: 'EduPrepCourseSearchHit',\r\n    code: '133221046Y',\r\n    id: 'oh:course:133221046Y',\r\n    name: {\r\n      EN: 'The World in Languages',\r\n      NL: 'De wereld in talen',\r\n    },\r\n    programmeType: 'DEGREE',\r\n    programmeCode: 'HBA_SL',\r\n  },\r\n];\r\n"],"names":["MOCK_DATA"],"mappings":"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"}

package/dist/components/SelectListbox/SelectListBox.stories.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as M } from "react/jsx-runtime";
-import { l as i } from "../../index-BamlKH-k.js";
+import { l as i } from "../../index-DvUwfXNb.js";
 import { SelectListbox as r } from "./SelectListbox.js";
 import * as e from "react";
 const E = ({
@@ -92,7 +92,7 @@ const E = ({
       default: !1
     },
     variant: {
-      options: ["default", "noborder", "pill", "pillLeft", "pillRight", "darkBorder"],
+      options: ["default", "noborder", "pill", "pillLeft", "pillRight", "darkBorder", "roundedLeft", "roundedRight"],
       control: { type: "select" }
     },
     optionPositionRight: {
@@ -149,7 +149,7 @@ const E = ({
   mobileBreakpoint: "28rem",
   size: "default",
   onChange: i()
-}, L = (t) => /* @__PURE__ */ a("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: d.map(({ label: l, value: c }, h) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: h, children: l }, `${c}`)) }) }), f = L.bind({});
+}, L = (t) => /* @__PURE__ */ a("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: d.map(({ label: l, value: c }, n) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: n, children: l }, `${c}`)) }) }), f = L.bind({});
 f.args = {
   ...m
 };
@@ -171,7 +171,7 @@ const S = ({ label: t, value: l }) => /* @__PURE__ */ M("div", { style: { displa
     ES: /* @__PURE__ */ a(u, { style: { width: "24px", height: "24px", marginRight: "10px" } })
   }[l],
   t
-] }), y = (t) => /* @__PURE__ */ a("div", { style: { width: "10rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: t.options.map(({ label: l, value: c }, h) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: h, children: /* @__PURE__ */ a(S, { label: l, value: c }) }, `${c}`)) }) }), k = y.bind({});
+] }), y = (t) => /* @__PURE__ */ a("div", { style: { width: "10rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...t, children: t.options.map(({ label: l, value: c }, n) => /* @__PURE__ */ a(r.SelectOption, { option: { label: l, value: c }, index: n, children: /* @__PURE__ */ a(S, { label: l, value: c }) }, `${c}`)) }) }), k = y.bind({});
 k.args = {
   ...m
 };
@@ -234,8 +234,8 @@ const B = [
   size: "default",
   onChange: i()
 }, N = (t) => {
-  const { options: l, ...c } = t, n = (t.SwitchLanguage ?? "EN") === "NL" ? B : j;
-  return /* @__PURE__ */ a("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...c, options: n, children: n.map(({ label: o, value: s }, p) => /* @__PURE__ */ a(r.SelectOption, { option: { label: o, value: s }, index: p, children: o }, `${s}`)) }) });
+  const { options: l, ...c } = t, h = (t.SwitchLanguage ?? "EN") === "NL" ? B : j;
+  return /* @__PURE__ */ a("div", { style: { width: "50rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...c, options: h, children: h.map(({ label: o, value: s }, p) => /* @__PURE__ */ a(r.SelectOption, { option: { label: o, value: s }, index: p, children: o }, `${s}`)) }) });
 }, D = N.bind({});
 D.args = {
   ...V