@uh-design-system/component-library 0.1.0 → 0.2.0-alpha.0

package/dist/cjs/index.cjs.js

@@ -1,11 +1,2 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function format(first, middle, last) {
-    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
-
-exports.format = format;
-
-//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/loader.cjs.js

@@ -2,16 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-eaf5876c.js');
+const index = require('./index-f7420801.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ds-icon.cjs",[[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]]], options);
+  return index.bootstrapLazy([["ds-accordion_2.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]],["ds-button_2.cjs",[[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-visually-hidden"]]],["ds-text-input.cjs",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"id":[1],"name":[1],"disabled":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;
-
-//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/uh-component-library.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-eaf5876c.js');
+const index = require('./index-f7420801.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.23.0 | MIT Licensed | https://stenciljs.com
  */
 var patchBrowser = () => {
   const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('uh-component-library.cjs.js', document.baseURI).href));
@@ -19,9 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ds-icon.cjs",[[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]]], options);
+  return index.bootstrapLazy([["ds-accordion_2.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]],["ds-button_2.cjs",[[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-visually-hidden"]]],["ds-text-input.cjs",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"id":[1],"name":[1],"disabled":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;
-
-//# sourceMappingURL=uh-component-library.cjs.js.map

package/dist/collection/collection-manifest.json

@@ -1,10 +1,14 @@
 {
   "entries": [
-    "components/01-base-components/ds-icon/ds-icon.js"
+    "components/01-base-components/ds-accordion/ds-accordion.js",
+    "components/01-base-components/ds-button/ds-button.js",
+    "components/01-base-components/ds-icon/ds-icon.js",
+    "components/01-base-components/ds-text-input/ds-text-input.js",
+    "components/01-base-components/ds-visually-hidden/ds-visually-hidden.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.22.2",
+    "version": "4.23.0",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/00-foundations/borders/borders.stories.js

@@ -1,20 +1,19 @@
 // src/components/00-foundations/borders/borders.stories.ts
 import "./_borders.scss";
-import { getBorderVariables, createBorderItem } from "../../../utils/borders/borderUtils";
+import { getBorderVariables, createBorderSection, categories } from "../../../utils/borders/borderUtils";
 export default {
     title: 'Foundations/Borders',
 };
 export const Borders = () => {
     const container = document.createElement('div');
-    const containerTitle = document.createElement('h2');
-    containerTitle.textContent = 'Borders';
-    container.appendChild(containerTitle);
     const borderVariables = getBorderVariables();
-    borderVariables.forEach(item => {
-        if (borderVariables.length > 0) {
-            container.appendChild(createBorderItem(item.name, item.value));
+    const renderedCategories = new Set();
+    const categoryNames = [...new Set(Object.values(categories)), 'Other'];
+    categoryNames.forEach(category => {
+        const categoryBorder = borderVariables.filter(border => border.category === category);
+        if (categoryBorder && categoryBorder.length > 0) {
+            container.appendChild(createBorderSection(category, categoryBorder, renderedCategories));
         }
     });
     return container;
 };
-//# sourceMappingURL=borders.stories.js.map

package/dist/collection/components/00-foundations/breakpoints/breakpoints.stories.js

@@ -0,0 +1,20 @@
+// src/components/00-foundations/breakpoints/breakpoints.stories.ts
+import "./_breakpoints.scss";
+import { getBreakpointVariables, createCategorySection, categories } from "../../../utils/breakpoints/breakpointsUtils";
+export default {
+    title: 'Foundations/Breakpoints',
+};
+export const Breakpoints = () => {
+    const container = document.createElement('div');
+    const breakpointVariables = getBreakpointVariables();
+    // Reset the renderedCategories set
+    const renderedCategories = new Set();
+    const categoryNames = [...new Set(Object.values(categories)), 'Other'];
+    categoryNames.forEach(category => {
+        const categoryType = breakpointVariables.filter(spacing => spacing.category === category);
+        if (categoryType.length > 0) {
+            container.appendChild(createCategorySection(category, categoryType, renderedCategories));
+        }
+    });
+    return container;
+};

package/dist/collection/components/00-foundations/colours/colours.stories.js

@@ -1,21 +1,13 @@
-// src/components/00-foundations/colours/colours.stories.ts
-import "./_colours.scss";
-import { getColourVariables, createCategorySection, categories } from "../../../utils/colours/colourUtils";
+import { createColourContainer } from "../../../utils/colours/colourUtils";
 export default {
     title: 'Foundations/Colours',
 };
-export const Colours = () => {
-    const container = document.createElement('div');
-    const colourVariables = getColourVariables();
-    // Reset the renderedCategories set
-    const renderedCategories = new Set();
-    const categoryNames = [...new Set(Object.values(categories)), 'Other'];
-    categoryNames.forEach(category => {
-        const categoryColours = colourVariables.filter(colour => colour.category === category);
-        if (categoryColours.length > 0) {
-            container.appendChild(createCategorySection(category, categoryColours, renderedCategories));
-        }
-    });
-    return container;
+export const Palette = () => {
+    return createColourContainer('palette');
+};
+export const Opaque = () => {
+    return createColourContainer('opaque');
+};
+export const SemanticColours = () => {
+    return createColourContainer('semantic');
 };
-//# sourceMappingURL=colours.stories.js.map

package/dist/collection/components/00-foundations/icons/categories/actions.js

@@ -0,0 +1,110 @@
+// src/components/00-foundations/icons/categories/actions.ts
+// Set category name
+const category = 'Actions';
+// Import Material Icons
+import ArchiveIcon from "@material-symbols/svg-700/sharp/archive.svg";
+import ArchiveFillIcon from "@material-symbols/svg-700/sharp/archive-fill.svg";
+import DownloadIcon from "@material-symbols/svg-700/sharp/download.svg";
+import FileSaveIcon from "@material-symbols/svg-700/sharp/file_save.svg";
+import FileSaveFillIcon from "@material-symbols/svg-700/sharp/file_save-fill.svg";
+import SendIcon from "@material-symbols/svg-700/sharp/send.svg";
+import SendFillIcon from "@material-symbols/svg-700/sharp/send-fill.svg";
+import ListAltIcon from "@material-symbols/svg-700/sharp/list_alt.svg";
+import ListAltAddIcon from "@material-symbols/svg-700/sharp/list_alt_add.svg";
+import ListAltCheckIcon from "@material-symbols/svg-700/sharp/list_alt_check.svg";
+import ForkRightIcon from "@material-symbols/svg-700/sharp/fork_right.svg";
+import ManufacturingIcon from "@material-symbols/svg-700/sharp/manufacturing.svg";
+import DragIndicatorIcon from "@material-symbols/svg-700/sharp/drag_indicator.svg";
+import ResizeIcon from "@material-symbols/svg-700/sharp/resize.svg";
+import EditIcon from "@material-symbols/svg-700/sharp/edit.svg";
+import EditFillIcon from "@material-symbols/svg-700/sharp/edit-fill.svg";
+import CodeBlocksIcon from "@material-symbols/svg-700/sharp/code_blocks.svg";
+import VisibilityIcon from "@material-symbols/svg-700/sharp/visibility.svg";
+import VisibilityFillIcon from "@material-symbols/svg-700/sharp/visibility-fill.svg";
+import VisibilityOffIcon from "@material-symbols/svg-700/sharp/visibility_off.svg";
+import VisibilityOffFillIcon from "@material-symbols/svg-700/sharp/visibility_off-fill.svg";
+import CloseIcon from "@material-symbols/svg-700/sharp/close.svg";
+import CancelIcon from "@material-symbols/svg-700/sharp/cancel.svg";
+import CancelFillIcon from "@material-symbols/svg-700/sharp/cancel-fill.svg";
+import AttachFileIcon from "@material-symbols/svg-700/sharp/attach_file.svg";
+import AttachFileAddIcon from "@material-symbols/svg-700/sharp/attach_file_add.svg";
+import AttachFileOffIcon from "@material-symbols/svg-700/sharp/attach_file_off.svg";
+import AttachEmailIcon from "@material-symbols/svg-700/sharp/attach_email.svg";
+import AttachEmailFillIcon from "@material-symbols/svg-700/sharp/attach_email-fill.svg";
+import ZoomInIcon from "@material-symbols/svg-700/sharp/zoom_in.svg";
+import ZoomOutIcon from "@material-symbols/svg-700/sharp/zoom_out.svg";
+import SearchIcon from "@material-symbols/svg-700/sharp/search.svg";
+import SettingsIcon from "@material-symbols/svg-700/sharp/settings.svg";
+import SettingsFillIcon from "@material-symbols/svg-700/sharp/settings-fill.svg";
+import LoginIcon from "@material-symbols/svg-700/sharp/login.svg";
+import LogoutIcon from "@material-symbols/svg-700/sharp/logout.svg";
+import ExportNotesIcon from "@material-symbols/svg-700/sharp/export_notes.svg";
+import ExportNotesFillIcon from "@material-symbols/svg-700/sharp/export_notes-fill.svg";
+import ShareIcon from "@material-symbols/svg-700/sharp/share.svg";
+import ThreeSixtyIcon from "@material-symbols/svg-700/sharp/360.svg";
+import RefreshIcon from "@material-symbols/svg-700/sharp/refresh.svg";
+import HistoryIcon from "@material-symbols/svg-700/sharp/history.svg";
+import RotateLeftIcon from "@material-symbols/svg-700/sharp/rotate_left.svg";
+import RotateRightIcon from "@material-symbols/svg-700/sharp/rotate_right.svg";
+import SyncIcon from "@material-symbols/svg-700/sharp/sync.svg";
+import BuildIcon from "@material-symbols/svg-700/sharp/build.svg";
+import ConstructionIcon from "@material-symbols/svg-700/sharp/construction.svg";
+import BuildFillIcon from "@material-symbols/svg-700/sharp/build-fill.svg";
+import DeleteIcon from "@material-symbols/svg-700/sharp/delete.svg";
+import DeleteFillIcon from "@material-symbols/svg-700/sharp/delete-fill.svg";
+import SaveIcon from "@material-symbols/svg-700/sharp/save.svg";
+import SaveFillIcon from "@material-symbols/svg-700/sharp/save-fill.svg";
+export const icons = [
+    { name: 'archive', component: ArchiveIcon, category: category },
+    { name: 'archive_fill', component: ArchiveFillIcon, category: category },
+    { name: 'download', component: DownloadIcon, category: category },
+    { name: 'file_save', component: FileSaveIcon, category: category },
+    { name: 'file_save_fill', component: FileSaveFillIcon, category: category },
+    { name: 'send', component: SendIcon, category: category },
+    { name: 'send_fill', component: SendFillIcon, category: category },
+    { name: 'list_alt', component: ListAltIcon, category: category },
+    { name: 'list_alt_add', component: ListAltAddIcon, category: category },
+    { name: 'list_alt_check', component: ListAltCheckIcon, category: category },
+    { name: 'fork_right', component: ForkRightIcon, category: category },
+    { name: 'manufacturing', component: ManufacturingIcon, category: category },
+    { name: 'drag_indicator', component: DragIndicatorIcon, category: category },
+    { name: 'resize', component: ResizeIcon, category: category },
+    { name: 'edit', component: EditIcon, category: category },
+    { name: 'edit_fill', component: EditFillIcon, category: category },
+    { name: 'code_blocks', component: CodeBlocksIcon, category: category },
+    { name: 'visibility', component: VisibilityIcon, category: category },
+    { name: 'visibility_fill', component: VisibilityFillIcon, category: category },
+    { name: 'visibility_off', component: VisibilityOffIcon, category: category },
+    { name: 'visibility_off_fill', component: VisibilityOffFillIcon, category: category },
+    { name: 'close', component: CloseIcon, category: category },
+    { name: 'cancel', component: CancelIcon, category: category },
+    { name: 'cancel_fill', component: CancelFillIcon, category: category },
+    { name: 'attach_file', component: AttachFileIcon, category: category },
+    { name: 'attach_file_add', component: AttachFileAddIcon, category: category },
+    { name: 'attach_file_off', component: AttachFileOffIcon, category: category },
+    { name: 'attach_email', component: AttachEmailIcon, category: category },
+    { name: 'attach_email_fill', component: AttachEmailFillIcon, category: category },
+    { name: 'zoom_in', component: ZoomInIcon, category: category },
+    { name: 'zoom_out', component: ZoomOutIcon, category: category },
+    { name: 'search', component: SearchIcon, category: category },
+    { name: 'settings', component: SettingsIcon, category: category },
+    { name: 'settings_fill', component: SettingsFillIcon, category: category },
+    { name: 'login', component: LoginIcon, category: category },
+    { name: 'logout', component: LogoutIcon, category: category },
+    { name: 'export_notes', component: ExportNotesIcon, category: category },
+    { name: 'export_notes_fill', component: ExportNotesFillIcon, category: category },
+    { name: 'share', component: ShareIcon, category: category },
+    { name: '360', component: ThreeSixtyIcon, category: category },
+    { name: 'refresh', component: RefreshIcon, category: category },
+    { name: 'history', component: HistoryIcon, category: category },
+    { name: 'rotate_left', component: RotateLeftIcon, category: category },
+    { name: 'rotate_right', component: RotateRightIcon, category: category },
+    { name: 'sync', component: SyncIcon, category: category },
+    { name: 'build', component: BuildIcon, category: category },
+    { name: 'construction', component: ConstructionIcon, category: category },
+    { name: 'build_fill', component: BuildFillIcon, category: category },
+    { name: 'delete', component: DeleteIcon, category: category },
+    { name: 'delete_fill', component: DeleteFillIcon, category: category },
+    { name: 'save', component: SaveIcon, category: category },
+    { name: 'save_fill', component: SaveFillIcon, category: category },
+];

package/dist/collection/components/00-foundations/icons/categories/arrows.js

@@ -0,0 +1,64 @@
+// src/components/00-foundations/icons/categories/arrows.ts
+// Set category name
+const category = 'Arrows and operators';
+// Import Material Icons
+import ArrowUpwardIcon from "@material-symbols/svg-700/sharp/arrow_upward.svg";
+import AddIcon from "@material-symbols/svg-700/sharp/add.svg";
+import ArrowOutwardIcon from "@material-symbols/svg-700/sharp/arrow_outward.svg";
+import ArrowDownwardIcon from "@material-symbols/svg-700/sharp/arrow_downward.svg";
+import ArrowForwardIcon from "@material-symbols/svg-700/sharp/arrow_forward.svg";
+import ArrowBackIcon from "@material-symbols/svg-700/sharp/arrow_back.svg";
+import ArrowInsertIcon from "@material-symbols/svg-700/sharp/arrow_insert.svg";
+import RemoveIcon from "@material-symbols/svg-700/sharp/remove.svg";
+import ChevronBackwardIcon from "@material-symbols/svg-700/sharp/chevron_backward.svg";
+import ChevronForwardIcon from "@material-symbols/svg-700/sharp/chevron_forward.svg";
+import KeyboardArrowUpIcon from "@material-symbols/svg-700/sharp/keyboard_arrow_up.svg";
+import KeyboardArrowDownIcon from "@material-symbols/svg-700/sharp/keyboard_arrow_down.svg";
+import UnfoldLessIcon from "@material-symbols/svg-700/sharp/unfold_less.svg";
+import UnfoldMoreIcon from "@material-symbols/svg-700/sharp/unfold_more.svg";
+import CollapseContentIcon from "@material-symbols/svg-700/sharp/collapse_content.svg";
+import ExpandContentIcon from "@material-symbols/svg-700/sharp/expand_content.svg";
+import EqualIcon from "@material-symbols/svg-700/sharp/equal.svg";
+import FunctionsIcon from "@material-symbols/svg-700/sharp/functions.svg";
+import PercentIcon from "@material-symbols/svg-700/sharp/percent.svg";
+import CloseSmallIcon from "@material-symbols/svg-700/sharp/close_small.svg";
+import CalculateIcon from "@material-symbols/svg-700/sharp/calculate.svg";
+import CalculateFillIcon from "@material-symbols/svg-700/sharp/calculate-fill.svg";
+import ArrowDropDownCircleFillIcon from "@material-symbols/svg-700/sharp/arrow_drop_down_circle-fill.svg";
+import ArrowDropDownCircleIcon from "@material-symbols/svg-700/sharp/arrow_drop_down_circle.svg";
+import ZoomOutMapIcon from "@material-symbols/svg-700/sharp/zoom_out_map.svg";
+import ZoomInMapIcon from "@material-symbols/svg-700/sharp/zoom_in_map.svg";
+import ArrowDropUpIcon from "@material-symbols/svg-700/sharp/arrow_drop_up.svg";
+import ArrowDropDownIcon from "@material-symbols/svg-700/sharp/arrow_drop_down.svg";
+import FunctionIcon from "@material-symbols/svg-700/sharp/function.svg";
+export const icons = [
+    { name: 'arrow_upward', component: ArrowUpwardIcon, category: category },
+    { name: 'add', component: AddIcon, category: category },
+    { name: 'arrow_outward', component: ArrowOutwardIcon, category: category },
+    { name: 'arrow_downward', component: ArrowDownwardIcon, category: category },
+    { name: 'arrow_forward', component: ArrowForwardIcon, category: category },
+    { name: 'arrow_back', component: ArrowBackIcon, category: category },
+    { name: 'arrow_insert', component: ArrowInsertIcon, category: category },
+    { name: 'remove', component: RemoveIcon, category: category },
+    { name: 'chevron_backward', component: ChevronBackwardIcon, category: category },
+    { name: 'chevron_forward', component: ChevronForwardIcon, category: category },
+    { name: 'keyboard_arrow_up', component: KeyboardArrowUpIcon, category: category },
+    { name: 'keyboard_arrow_down', component: KeyboardArrowDownIcon, category: category },
+    { name: 'unfold_less', component: UnfoldLessIcon, category: category },
+    { name: 'unfold_more', component: UnfoldMoreIcon, category: category },
+    { name: 'collapse_content', component: CollapseContentIcon, category: category },
+    { name: 'expand_content', component: ExpandContentIcon, category: category },
+    { name: 'equal', component: EqualIcon, category: category },
+    { name: 'functions', component: FunctionsIcon, category: category },
+    { name: 'percent', component: PercentIcon, category: category },
+    { name: 'close_small', component: CloseSmallIcon, category: category },
+    { name: 'calculate', component: CalculateIcon, category: category },
+    { name: 'calculate_fill', component: CalculateFillIcon, category: category },
+    { name: 'arrow_drop_down_circle_fill', component: ArrowDropDownCircleFillIcon, category: category },
+    { name: 'arrow_drop_down_circle', component: ArrowDropDownCircleIcon, category: category },
+    { name: 'zoom_out_map', component: ZoomOutMapIcon, category: category },
+    { name: 'zoom_in_map', component: ZoomInMapIcon, category: category },
+    { name: 'arrow_drop_up', component: ArrowDropUpIcon, category: category },
+    { name: 'arrow_drop_down', component: ArrowDropDownIcon, category: category },
+    { name: 'function', component: FunctionIcon, category: category },
+];

package/dist/collection/components/00-foundations/icons/categories/custom.js

@@ -0,0 +1,10 @@
+// src/components/00-foundations/icons/categories/custom.ts
+// Set category name
+const category = 'DS Custom icons';
+// Import custom icons
+import DSFlameIcon from "../../../../../custom-icons/ds-flame.svg";
+import DSFlameFillIcon from "../../../../../custom-icons/ds-flame-fill.svg";
+export const icons = [
+    { name: 'ds_flame', component: DSFlameIcon, category: category },
+    { name: 'ds_flame_fill', component: DSFlameFillIcon, category: category },
+];

package/dist/collection/components/00-foundations/icons/categories/information.js

@@ -0,0 +1,94 @@
+// src/components/00-foundations/icons/categories/information.ts
+// Set category name
+const category = 'Information';
+// Import Material Icons
+import CalendarMonthIcon from "@material-symbols/svg-700/sharp/calendar_month.svg";
+import CalendarMonthFillIcon from "@material-symbols/svg-700/sharp/calendar_month-fill.svg";
+import EventAvailableIcon from "@material-symbols/svg-700/sharp/event_available.svg";
+import EventAvailableFillIcon from "@material-symbols/svg-700/sharp/event_available-fill.svg";
+import EditCalendarIcon from "@material-symbols/svg-700/sharp/edit_calendar.svg";
+import EditCalendarFillIcon from "@material-symbols/svg-700/sharp/edit_calendar-fill.svg";
+import PersonPinCircleIcon from "@material-symbols/svg-700/sharp/person_pin_circle.svg";
+import PersonPinCircleFillIcon from "@material-symbols/svg-700/sharp/person_pin_circle-fill.svg";
+import EuroSymbolIcon from "@material-symbols/svg-700/sharp/euro_symbol.svg";
+import LanguageIcon from "@material-symbols/svg-700/sharp/language.svg";
+import Grid4x4Icon from "@material-symbols/svg-700/sharp/grid_4x4.svg";
+import SellIcon from "@material-symbols/svg-700/sharp/sell.svg";
+import SellFillIcon from "@material-symbols/svg-700/sharp/sell-fill.svg";
+import MailIcon from "@material-symbols/svg-700/sharp/mail.svg";
+import MailFillIcon from "@material-symbols/svg-700/sharp/mail-fill.svg";
+import DraftsIcon from "@material-symbols/svg-700/sharp/drafts.svg";
+import DraftsFillIcon from "@material-symbols/svg-700/sharp/drafts-fill.svg";
+import ReorderIcon from "@material-symbols/svg-700/sharp/reorder.svg";
+import GridOnIcon from "@material-symbols/svg-700/sharp/grid_on.svg";
+import GridOnFillIcon from "@material-symbols/svg-700/sharp/grid_on-fill.svg";
+import ViewListIcon from "@material-symbols/svg-700/sharp/view_list.svg";
+import ViewListFillIcon from "@material-symbols/svg-700/sharp/view_list-fill.svg";
+import WidgetSmallIcon from "@material-symbols/svg-700/sharp/widget_small.svg";
+import WidgetSmallFillIcon from "@material-symbols/svg-700/sharp/widget_small-fill.svg";
+import LockIcon from "@material-symbols/svg-700/sharp/lock.svg";
+import LockFillIcon from "@material-symbols/svg-700/sharp/lock-fill.svg";
+import LockOpenIcon from "@material-symbols/svg-700/sharp/lock_open.svg";
+import LockOpenFillIcon from "@material-symbols/svg-700/sharp/lock_open-fill.svg";
+import PublicIcon from "@material-symbols/svg-700/sharp/public.svg";
+import VpnLockIcon from "@material-symbols/svg-700/sharp/vpn_lock.svg";
+import HourglassIcon from "@material-symbols/svg-700/sharp/hourglass.svg";
+import HourglassBottomIcon from "@material-symbols/svg-700/sharp/hourglass_bottom.svg";
+import HourglassTopIcon from "@material-symbols/svg-700/sharp/hourglass_top.svg";
+import ScheduleIcon from "@material-symbols/svg-700/sharp/schedule.svg";
+import ScheduleFillIcon from "@material-symbols/svg-700/sharp/schedule-fill.svg";
+import TimerIcon from "@material-symbols/svg-700/sharp/timer.svg";
+import TimerFillIcon from "@material-symbols/svg-700/sharp/timer-fill.svg";
+import ChecklistIcon from "@material-symbols/svg-700/sharp/checklist.svg";
+import CheckBoxFillIcon from "@material-symbols/svg-700/sharp/check_box-fill.svg";
+import CheckBoxIcon from "@material-symbols/svg-700/sharp/check_box.svg";
+import CheckBoxOutlineBlankIcon from "@material-symbols/svg-700/sharp/check_box_outline_blank.svg";
+import AccountBalanceIcon from "@material-symbols/svg-700/sharp/account_balance.svg";
+import AccountBalanceFillIcon from "@material-symbols/svg-700/sharp/account_balance-fill.svg";
+import ProgressActivityIcon from "@material-symbols/svg-700/sharp/progress_activity.svg";
+export const icons = [
+    { name: 'calendar_month', component: CalendarMonthIcon, category: category },
+    { name: 'calendar_month_fill', component: CalendarMonthFillIcon, category: category },
+    { name: 'event_available', component: EventAvailableIcon, category: category },
+    { name: 'event_available_fill', component: EventAvailableFillIcon, category: category },
+    { name: 'edit_calendar', component: EditCalendarIcon, category: category },
+    { name: 'edit_calendar_fill', component: EditCalendarFillIcon, category: category },
+    { name: 'person_pin_circle', component: PersonPinCircleIcon, category: category },
+    { name: 'person_pin_circle_fill', component: PersonPinCircleFillIcon, category: category },
+    { name: 'euro_symbol', component: EuroSymbolIcon, category: category },
+    { name: 'language', component: LanguageIcon, category: category },
+    { name: 'grid_4x4', component: Grid4x4Icon, category: category },
+    { name: 'sell', component: SellIcon, category: category },
+    { name: 'sell_fill', component: SellFillIcon, category: category },
+    { name: 'mail', component: MailIcon, category: category },
+    { name: 'mail_fill', component: MailFillIcon, category: category },
+    { name: 'drafts', component: DraftsIcon, category: category },
+    { name: 'drafts_fill', component: DraftsFillIcon, category: category },
+    { name: 'reorder', component: ReorderIcon, category: category },
+    { name: 'grid_on', component: GridOnIcon, category: category },
+    { name: 'grid_on_fill', component: GridOnFillIcon, category: category },
+    { name: 'view_list', component: ViewListIcon, category: category },
+    { name: 'view_list_fill', component: ViewListFillIcon, category: category },
+    { name: 'widget_small', component: WidgetSmallIcon, category: category },
+    { name: 'widget_small_fill', component: WidgetSmallFillIcon, category: category },
+    { name: 'lock', component: LockIcon, category: category },
+    { name: 'lock_fill', component: LockFillIcon, category: category },
+    { name: 'lock_open', component: LockOpenIcon, category: category },
+    { name: 'lock_open_fill', component: LockOpenFillIcon, category: category },
+    { name: 'public', component: PublicIcon, category: category },
+    { name: 'vpn_lock', component: VpnLockIcon, category: category },
+    { name: 'hourglass', component: HourglassIcon, category: category },
+    { name: 'hourglass_bottom', component: HourglassBottomIcon, category: category },
+    { name: 'hourglass_top', component: HourglassTopIcon, category: category },
+    { name: 'schedule', component: ScheduleIcon, category: category },
+    { name: 'schedule_fill', component: ScheduleFillIcon, category: category },
+    { name: 'timer', component: TimerIcon, category: category },
+    { name: 'timer_fill', component: TimerFillIcon, category: category },
+    { name: 'checklist', component: ChecklistIcon, category: category },
+    { name: 'check_box_fill', component: CheckBoxFillIcon, category: category },
+    { name: 'check_box', component: CheckBoxIcon, category: category },
+    { name: 'check_box_outline_blank', component: CheckBoxOutlineBlankIcon, category: category },
+    { name: 'account_balance', component: AccountBalanceIcon, category: category },
+    { name: 'account_balance_fill', component: AccountBalanceFillIcon, category: category },
+    { name: 'progress_activity', component: ProgressActivityIcon, category: category },
+];

package/dist/collection/components/00-foundations/icons/categories/media.js

@@ -0,0 +1,76 @@
+// src/components/00-foundations/icons/categories/media.ts
+// Set category name
+const category = 'Media and devices';
+// Import Material Icons
+import PhotoCameraIcon from "@material-symbols/svg-700/sharp/photo_camera.svg";
+import PhotoCameraFillIcon from "@material-symbols/svg-700/sharp/photo_camera-fill.svg";
+import ChatIcon from "@material-symbols/svg-700/sharp/chat.svg";
+import ChatFillIcon from "@material-symbols/svg-700/sharp/chat-fill.svg";
+import RSSFeedIcon from "@material-symbols/svg-700/sharp/rss_feed.svg";
+import DescriptionIcon from "@material-symbols/svg-700/sharp/description.svg";
+import ImageIcon from "@material-symbols/svg-700/sharp/image.svg";
+import ImageFillIcon from "@material-symbols/svg-700/sharp/image-fill.svg";
+import PhotoLibraryIcon from "@material-symbols/svg-700/sharp/photo_library.svg";
+import GalleryThumbnailIcon from "@material-symbols/svg-700/sharp/gallery_thumbnail.svg";
+import FiberManualRecordIcon from "@material-symbols/svg-700/sharp/fiber_manual_record.svg";
+import FiberManualRecordFillIcon from "@material-symbols/svg-700/sharp/fiber_manual_record-fill.svg";
+import PauseIcon from "@material-symbols/svg-700/sharp/pause.svg";
+import PauseFillIcon from "@material-symbols/svg-700/sharp/pause-fill.svg";
+import PauseCircleIcon from "@material-symbols/svg-700/sharp/pause_circle.svg";
+import PauseCircleFillIcon from "@material-symbols/svg-700/sharp/pause_circle-fill.svg";
+import StopCircleIcon from "@material-symbols/svg-700/sharp/stop_circle.svg";
+import StopCircleFillIcon from "@material-symbols/svg-700/sharp/stop_circle-fill.svg";
+import StopIcon from "@material-symbols/svg-700/sharp/stop.svg";
+import StopFillIcon from "@material-symbols/svg-700/sharp/stop-fill.svg";
+import PlayPauseIcon from "@material-symbols/svg-700/sharp/play_pause.svg";
+import PlayArrowIcon from "@material-symbols/svg-700/sharp/play_arrow.svg";
+import PlayArrowFillIcon from "@material-symbols/svg-700/sharp/play_arrow-fill.svg";
+import SkipPreviousIcon from "@material-symbols/svg-700/sharp/skip_previous.svg";
+import SkipPreviousFillIcon from "@material-symbols/svg-700/sharp/skip_previous-fill.svg";
+import SkipNextIcon from "@material-symbols/svg-700/sharp/skip_next.svg";
+import SkipNextFillIcon from "@material-symbols/svg-700/sharp/skip_next-fill.svg";
+import FastRewindIcon from "@material-symbols/svg-700/sharp/fast_rewind.svg";
+import FastRewindFillIcon from "@material-symbols/svg-700/sharp/fast_rewind-fill.svg";
+import FastForwardIcon from "@material-symbols/svg-700/sharp/fast_forward.svg";
+import FastForwardFillIcon from "@material-symbols/svg-700/sharp/fast_forward-fill.svg";
+import CallIcon from "@material-symbols/svg-700/sharp/call.svg";
+import CallFillIcon from "@material-symbols/svg-700/sharp/call-fill.svg";
+import PictureAsPdfIcon from "@material-symbols/svg-700/sharp/picture_as_pdf.svg";
+import PictureAsPdfFillIcon from "@material-symbols/svg-700/sharp/picture_as_pdf-fill.svg";
+export const icons = [
+    { name: 'photo_camera', component: PhotoCameraIcon, category: category },
+    { name: 'photo_camera_fill', component: PhotoCameraFillIcon, category: category },
+    { name: 'chat', component: ChatIcon, category: category },
+    { name: 'chat_fill', component: ChatFillIcon, category: category },
+    { name: 'rss_feed', component: RSSFeedIcon, category: category },
+    { name: 'description', component: DescriptionIcon, category: category },
+    { name: 'image', component: ImageIcon, category: category },
+    { name: 'image_fill', component: ImageFillIcon, category: category },
+    { name: 'photo_library', component: PhotoLibraryIcon, category: category },
+    { name: 'gallery_thumbnail', component: GalleryThumbnailIcon, category: category },
+    { name: 'fiber_manual_record', component: FiberManualRecordIcon, category: category },
+    { name: 'fiber_manual_record_fill', component: FiberManualRecordFillIcon, category: category },
+    { name: 'pause', component: PauseIcon, category: category },
+    { name: 'pause_fill', component: PauseFillIcon, category: category },
+    { name: 'pause_circle', component: PauseCircleIcon, category: category },
+    { name: 'pause_circle_fill', component: PauseCircleFillIcon, category: category },
+    { name: 'stop_circle', component: StopCircleIcon, category: category },
+    { name: 'stop_circle_fill', component: StopCircleFillIcon, category: category },
+    { name: 'stop', component: StopIcon, category: category },
+    { name: 'stop_fill', component: StopFillIcon, category: category },
+    { name: 'play_pause', component: PlayPauseIcon, category: category },
+    { name: 'play_arrow', component: PlayArrowIcon, category: category },
+    { name: 'play_arrow_fill', component: PlayArrowFillIcon, category: category },
+    { name: 'skip_previous', component: SkipPreviousIcon, category: category },
+    { name: 'skip_previous_fill', component: SkipPreviousFillIcon, category: category },
+    { name: 'skip_next', component: SkipNextIcon, category: category },
+    { name: 'skip_next_fill', component: SkipNextFillIcon, category: category },
+    { name: 'fast_rewind', component: FastRewindIcon, category: category },
+    { name: 'fast_rewind_fill', component: FastRewindFillIcon, category: category },
+    { name: 'fast_forward', component: FastForwardIcon, category: category },
+    { name: 'fast_forward_fill', component: FastForwardFillIcon, category: category },
+    { name: 'call', component: CallIcon, category: category },
+    { name: 'call_fill', component: CallFillIcon, category: category },
+    { name: 'picture_as_pdf', component: PictureAsPdfIcon, category: category },
+    { name: 'picture_as_pdf_fill', component: PictureAsPdfFillIcon, category: category },
+];

package/dist/collection/components/00-foundations/icons/categories/navigation.js

@@ -0,0 +1,50 @@
+// src/components/00-foundations/icons/categories/navigation.ts
+// Set category name
+const category = 'Navigation';
+// Import Material Icons
+import HomeIcon from "@material-symbols/svg-700/sharp/home.svg";
+import MenuIcon from "@material-symbols/svg-700/sharp/menu.svg";
+import HomeFillIcon from "@material-symbols/svg-700/sharp/home-fill.svg";
+import LinkIcon from "@material-symbols/svg-700/sharp/link.svg";
+import LocationSearchingIcon from "@material-symbols/svg-700/sharp/location_searching.svg";
+import ExploreFillIcon from "@material-symbols/svg-700/sharp/explore-fill.svg";
+import ExploreIcon from "@material-symbols/svg-700/sharp/explore.svg";
+import LocationOnFillIcon from "@material-symbols/svg-700/sharp/location_on-fill.svg";
+import LocationOnIcon from "@material-symbols/svg-700/sharp/location_on.svg";
+import MyLocationFillIcon from "@material-symbols/svg-700/sharp/my_location-fill.svg";
+import MyLocationIcon from "@material-symbols/svg-700/sharp/my_location.svg";
+import UngroupIcon from "@material-symbols/svg-700/sharp/ungroup.svg";
+import OpenInNewIcon from "@material-symbols/svg-700/sharp/open_in_new.svg";
+import MoreVertIcon from "@material-symbols/svg-700/sharp/more_vert.svg";
+import MoreHorizIcon from "@material-symbols/svg-700/sharp/more_horiz.svg";
+import PendingIcon from "@material-symbols/svg-700/sharp/pending.svg";
+import MapIcon from "@material-symbols/svg-700/sharp/map.svg";
+import MapFillIcon from "@material-symbols/svg-700/sharp/map-fill.svg";
+import MapSearchIcon from "@material-symbols/svg-700/sharp/map_search.svg";
+import MapSearchFillIcon from "@material-symbols/svg-700/sharp/map_search-fill.svg";
+import TourIcon from "@material-symbols/svg-700/sharp/tour.svg";
+import TourFillIcon from "@material-symbols/svg-700/sharp/tour-fill.svg";
+export const icons = [
+    { name: 'home', component: HomeIcon, category: category },
+    { name: 'menu', component: MenuIcon, category: category },
+    { name: 'home_fill', component: HomeFillIcon, category: category },
+    { name: 'link', component: LinkIcon, category: category },
+    { name: 'location_searching', component: LocationSearchingIcon, category: category },
+    { name: 'explore_fill', component: ExploreFillIcon, category: category },
+    { name: 'explore', component: ExploreIcon, category: category },
+    { name: 'location_on_fill', component: LocationOnFillIcon, category: category },
+    { name: 'location_on', component: LocationOnIcon, category: category },
+    { name: 'my_location_fill', component: MyLocationFillIcon, category: category },
+    { name: 'my_location', component: MyLocationIcon, category: category },
+    { name: 'ungroup', component: UngroupIcon, category: category },
+    { name: 'open_in_new', component: OpenInNewIcon, category: category },
+    { name: 'more_vert', component: MoreVertIcon, category: category },
+    { name: 'more_horiz', component: MoreHorizIcon, category: category },
+    { name: 'pending', component: PendingIcon, category: category },
+    { name: 'map', component: MapIcon, category: category },
+    { name: 'map_fill', component: MapFillIcon, category: category },
+    { name: 'map_search', component: MapSearchIcon, category: category },
+    { name: 'map_search_fill', component: MapSearchFillIcon, category: category },
+    { name: 'tour', component: TourIcon, category: category },
+    { name: 'tour_fill', component: TourFillIcon, category: category },
+];