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

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

@@ -0,0 +1,64 @@
+// src/components/00-foundations/icons/categories/notifications.ts
+// Set category name
+const category = 'Notifications and expressions';
+// Import Material Icons
+import FavoriteIcon from "@material-symbols/svg-700/sharp/favorite.svg";
+import FavoriteFillIcon from "@material-symbols/svg-700/sharp/favorite-fill.svg";
+import HelpIcon from "@material-symbols/svg-700/sharp/help.svg";
+import HelpFillIcon from "@material-symbols/svg-700/sharp/help-fill.svg";
+import InfoIcon from "@material-symbols/svg-700/sharp/info.svg";
+import InfoFillIcon from "@material-symbols/svg-700/sharp/info-fill.svg";
+import WarningIcon from "@material-symbols/svg-700/sharp/warning.svg";
+import WarningFillIcon from "@material-symbols/svg-700/sharp/warning-fill.svg";
+import CheckIcon from "@material-symbols/svg-700/sharp/check.svg";
+import CheckCircleIcon from "@material-symbols/svg-700/sharp/check_circle.svg";
+import CheckCircleFillIcon from "@material-symbols/svg-700/sharp/check_circle-fill.svg";
+import NotificationsIcon from "@material-symbols/svg-700/sharp/notifications.svg";
+import NotificationsFillIcon from "@material-symbols/svg-700/sharp/notifications-fill.svg";
+import NotificationsOffIcon from "@material-symbols/svg-700/sharp/notifications_off.svg";
+import NotificationsOffFillIcon from "@material-symbols/svg-700/sharp/notifications_off-fill.svg";
+import NotificationsUnreadIcon from "@material-symbols/svg-700/sharp/notifications_unread.svg";
+import NotificationsUnreadFillIcon from "@material-symbols/svg-700/sharp/notifications_unread-fill.svg";
+import NotificationsActiveIcon from "@material-symbols/svg-700/sharp/notifications_active.svg";
+import NotificationsActiveFillIcon from "@material-symbols/svg-700/sharp/notifications_active-fill.svg";
+import SentimentSatisfiedIcon from "@material-symbols/svg-700/sharp/sentiment_satisfied.svg";
+import SentimentSatisfiedFillIcon from "@material-symbols/svg-700/sharp/sentiment_satisfied-fill.svg";
+import SentimentNeutralIcon from "@material-symbols/svg-700/sharp/sentiment_neutral.svg";
+import SentimentNeutralFillIcon from "@material-symbols/svg-700/sharp/sentiment_neutral-fill.svg";
+import SentimentDissatisfiedIcon from "@material-symbols/svg-700/sharp/sentiment_dissatisfied.svg";
+import SentimentDissatisfiedFillIcon from "@material-symbols/svg-700/sharp/sentiment_dissatisfied-fill.svg";
+import SmartToyIcon from "@material-symbols/svg-700/sharp/smart_toy.svg";
+import SmartToyFillIcon from "@material-symbols/svg-700/sharp/smart_toy-fill.svg";
+import StarIcon from "@material-symbols/svg-700/sharp/star.svg";
+import StarFillIcon from "@material-symbols/svg-700/sharp/star-fill.svg";
+export const icons = [
+    { name: 'favorite', component: FavoriteIcon, category: category },
+    { name: 'favorite_fill', component: FavoriteFillIcon, category: category },
+    { name: 'help', component: HelpIcon, category: category },
+    { name: 'help_fill', component: HelpFillIcon, category: category },
+    { name: 'info', component: InfoIcon, category: category },
+    { name: 'info_fill', component: InfoFillIcon, category: category },
+    { name: 'warning', component: WarningIcon, category: category },
+    { name: 'warning_fill', component: WarningFillIcon, category: category },
+    { name: 'check', component: CheckIcon, category: category },
+    { name: 'check_circle', component: CheckCircleIcon, category: category },
+    { name: 'check_circle_fill', component: CheckCircleFillIcon, category: category },
+    { name: 'notifications', component: NotificationsIcon, category: category },
+    { name: 'notifications_fill', component: NotificationsFillIcon, category: category },
+    { name: 'notifications_off', component: NotificationsOffIcon, category: category },
+    { name: 'notifications_off_fill', component: NotificationsOffFillIcon, category: category },
+    { name: 'notifications_unread', component: NotificationsUnreadIcon, category: category },
+    { name: 'notifications_unread_fill', component: NotificationsUnreadFillIcon, category: category },
+    { name: 'notifications_active', component: NotificationsActiveIcon, category: category },
+    { name: 'notifications_active_fill', component: NotificationsActiveFillIcon, category: category },
+    { name: 'sentiment_satisfied', component: SentimentSatisfiedIcon, category: category },
+    { name: 'sentiment_satisfied_fill', component: SentimentSatisfiedFillIcon, category: category },
+    { name: 'sentiment_neutral', component: SentimentNeutralIcon, category: category },
+    { name: 'sentiment_neutral_fill', component: SentimentNeutralFillIcon, category: category },
+    { name: 'sentiment_dissatisfied', component: SentimentDissatisfiedIcon, category: category },
+    { name: 'sentiment_dissatisfied_fill', component: SentimentDissatisfiedFillIcon, category: category },
+    { name: 'smart_toy', component: SmartToyIcon, category: category },
+    { name: 'smart_toy_fill', component: SmartToyFillIcon, category: category },
+    { name: 'star', component: StarIcon, category: category },
+    { name: 'star_fill', component: StarFillIcon, category: category },
+];

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

@@ -0,0 +1,18 @@
+// src/components/00-foundations/icons/categories/text.ts
+// Set category name
+const category = 'Text formatting';
+// Import Material Icons
+import FormatQuoteIcon from "@material-symbols/svg-700/sharp/format_quote.svg";
+import FormatQuoteFillIcon from "@material-symbols/svg-700/sharp/format_quote-fill.svg";
+import FormatQuoteOffIcon from "@material-symbols/svg-700/sharp/format_quote_off.svg";
+import FormatQuoteOffFillIcon from "@material-symbols/svg-700/sharp/format_quote_off-fill.svg";
+import FormatItalicIcon from "@material-symbols/svg-700/sharp/format_italic.svg";
+import FormatBoldIcon from "@material-symbols/svg-700/sharp/format_bold.svg";
+export const icons = [
+    { name: 'format_quote', component: FormatQuoteIcon, category: category },
+    { name: 'format_quote_fill', component: FormatQuoteFillIcon, category: category },
+    { name: 'format_quote_off', component: FormatQuoteOffIcon, category: category },
+    { name: 'format_quote_off_fill', component: FormatQuoteOffFillIcon, category: category },
+    { name: 'format_italic', component: FormatItalicIcon, category: category },
+    { name: 'format_bold', component: FormatBoldIcon, category: category },
+];

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

@@ -0,0 +1,52 @@
+// src/components/00-foundations/icons/categories/users.ts
+// Set category name
+const category = 'Users and avatars';
+// Import Material Icons
+import AccountCircleIcon from "@material-symbols/svg-700/sharp/account_circle.svg";
+import AccountCircleFillIcon from "@material-symbols/svg-700/sharp/account_circle-fill.svg";
+import PersonIcon from "@material-symbols/svg-700/sharp/person.svg";
+import PersonFillIcon from "@material-symbols/svg-700/sharp/person-fill.svg";
+import PersonAddIcon from "@material-symbols/svg-700/sharp/person_add.svg";
+import PersonAddFillIcon from "@material-symbols/svg-700/sharp/person_add-fill.svg";
+import PersonRemoveIcon from "@material-symbols/svg-700/sharp/person_remove.svg";
+import PersonRemoveFillIcon from "@material-symbols/svg-700/sharp/person_remove-fill.svg";
+import PersonAlertIcon from "@material-symbols/svg-700/sharp/person_alert.svg";
+import PersonAlertFillIcon from "@material-symbols/svg-700/sharp/person_alert-fill.svg";
+import GroupIcon from "@material-symbols/svg-700/sharp/group.svg";
+import GroupFillIcon from "@material-symbols/svg-700/sharp/group-fill.svg";
+import GroupAddIcon from "@material-symbols/svg-700/sharp/group_add.svg";
+import GroupAddFillIcon from "@material-symbols/svg-700/sharp/group_add-fill.svg";
+import GroupRemoveIcon from "@material-symbols/svg-700/sharp/group_remove.svg";
+import GroupRemoveFillIcon from "@material-symbols/svg-700/sharp/group_remove-fill.svg";
+import SupervisorAccountIcon from "@material-symbols/svg-700/sharp/supervisor_account.svg";
+import SupervisorAccountFillIcon from "@material-symbols/svg-700/sharp/supervisor_account-fill.svg";
+import EscalatorWarningIcon from "@material-symbols/svg-700/sharp/escalator_warning.svg";
+import BoyIcon from "@material-symbols/svg-700/sharp/boy.svg";
+import GirlIcon from "@material-symbols/svg-700/sharp/girl.svg";
+import BadgeIcon from "@material-symbols/svg-700/sharp/badge.svg";
+import BadgeFillIcon from "@material-symbols/svg-700/sharp/badge-fill.svg";
+export const icons = [
+    { name: 'account_circle', component: AccountCircleIcon, category: category },
+    { name: 'account_circle_fill', component: AccountCircleFillIcon, category: category },
+    { name: 'person', component: PersonIcon, category: category },
+    { name: 'person_fill', component: PersonFillIcon, category: category },
+    { name: 'person_add', component: PersonAddIcon, category: category },
+    { name: 'person_add_fill', component: PersonAddFillIcon, category: category },
+    { name: 'person_remove', component: PersonRemoveIcon, category: category },
+    { name: 'person_remove_fill', component: PersonRemoveFillIcon, category: category },
+    { name: 'person_alert', component: PersonAlertIcon, category: category },
+    { name: 'person_alert_fill', component: PersonAlertFillIcon, category: category },
+    { name: 'group', component: GroupIcon, category: category },
+    { name: 'group_fill', component: GroupFillIcon, category: category },
+    { name: 'group_add', component: GroupAddIcon, category: category },
+    { name: 'group_add_fill', component: GroupAddFillIcon, category: category },
+    { name: 'group_remove', component: GroupRemoveIcon, category: category },
+    { name: 'group_remove_fill', component: GroupRemoveFillIcon, category: category },
+    { name: 'supervisor_account', component: SupervisorAccountIcon, category: category },
+    { name: 'supervisor_account_fill', component: SupervisorAccountFillIcon, category: category },
+    { name: 'escalator_warning', component: EscalatorWarningIcon, category: category },
+    { name: 'boy', component: BoyIcon, category: category },
+    { name: 'girl', component: GirlIcon, category: category },
+    { name: 'badge', component: BadgeIcon, category: category },
+    { name: 'badge_fill', component: BadgeFillIcon, category: category },
+];

package/dist/collection/components/00-foundations/icons/iconList.js

@@ -1,296 +1,21 @@
 // src/components/00-foundations/icons/iconList.ts
-// Import custom icons
-import DSFlameIcon from "../../../../custom-icons/ds-flame.svg";
-import DSFlameFillIcon from "../../../../custom-icons/ds-flame-fill.svg";
-// Import Material Icons
-import ArchiveIcon from "@material-symbols/svg-500/sharp/archive.svg";
-import ArchiveFillIcon from "@material-symbols/svg-500/sharp/archive-fill.svg";
-import DownloadIcon from "@material-symbols/svg-500/sharp/download.svg";
-import FileSaveIcon from "@material-symbols/svg-500/sharp/file_save.svg";
-import FileSaveFillIcon from "@material-symbols/svg-500/sharp/file_save-fill.svg";
-import SendIcon from "@material-symbols/svg-500/sharp/send.svg";
-import SendFillIcon from "@material-symbols/svg-500/sharp/send-fill.svg";
-import ListAltIcon from "@material-symbols/svg-500/sharp/list_alt.svg";
-import ListAltAddIcon from "@material-symbols/svg-500/sharp/list_alt_add.svg";
-import ListAltCheckIcon from "@material-symbols/svg-500/sharp/list_alt_check.svg";
-import ForkRightIcon from "@material-symbols/svg-500/sharp/fork_right.svg";
-import ManufacturingIcon from "@material-symbols/svg-500/sharp/manufacturing.svg";
-import DragIndicatorIcon from "@material-symbols/svg-500/sharp/drag_indicator.svg";
-import ResizeIcon from "@material-symbols/svg-500/sharp/resize.svg";
-import EditIcon from "@material-symbols/svg-500/sharp/edit.svg";
-import EditFillIcon from "@material-symbols/svg-500/sharp/edit-fill.svg";
-import CodeBlocksIcon from "@material-symbols/svg-500/sharp/code_blocks.svg";
-import VisibilityIcon from "@material-symbols/svg-500/sharp/visibility.svg";
-import VisibilityFillIcon from "@material-symbols/svg-500/sharp/visibility-fill.svg";
-import VisibilityOffIcon from "@material-symbols/svg-500/sharp/visibility_off.svg";
-import VisibilityOffFillIcon from "@material-symbols/svg-500/sharp/visibility_off-fill.svg";
-import CloseIcon from "@material-symbols/svg-500/sharp/close.svg";
-import CancelIcon from "@material-symbols/svg-500/sharp/cancel.svg";
-import CancelFillIcon from "@material-symbols/svg-500/sharp/cancel-fill.svg";
-import AttachFileIcon from "@material-symbols/svg-500/sharp/attach_file.svg";
-import AttachFileAddIcon from "@material-symbols/svg-500/sharp/attach_file_add.svg";
-import AttachFileOffIcon from "@material-symbols/svg-500/sharp/attach_file_off.svg";
-import AttachEmailIcon from "@material-symbols/svg-500/sharp/attach_email.svg";
-import AttachEmailFillIcon from "@material-symbols/svg-500/sharp/attach_email-fill.svg";
-import ZoomInIcon from "@material-symbols/svg-500/sharp/zoom_in.svg";
-import ZoomOutIcon from "@material-symbols/svg-500/sharp/zoom_out.svg";
-import SearchIcon from "@material-symbols/svg-500/sharp/search.svg";
-import ArrowBackIcon from "@material-symbols/svg-500/sharp/arrow_back.svg";
-import ArrowForwardIcon from "@material-symbols/svg-500/sharp/arrow_forward.svg";
-import ArrowUpwardIcon from "@material-symbols/svg-500/sharp/arrow_upward.svg";
-import ArrowDownwardIcon from "@material-symbols/svg-500/sharp/arrow_downward.svg";
-import ArrowInsertIcon from "@material-symbols/svg-500/sharp/arrow_insert.svg";
-import ArrowOutwardIcon from "@material-symbols/svg-500/sharp/arrow_outward.svg";
-import ChevronBackwardIcon from "@material-symbols/svg-500/sharp/chevron_backward.svg";
-import ChevronForwardIcon from "@material-symbols/svg-500/sharp/chevron_forward.svg";
-import KeyboardArrowUpIcon from "@material-symbols/svg-500/sharp/keyboard_arrow_up.svg";
-import KeyboardArrowDownIcon from "@material-symbols/svg-500/sharp/keyboard_arrow_down.svg";
-import ArrowDropDownCircleIcon from "@material-symbols/svg-500/sharp/arrow_drop_down_circle.svg";
-import ArrowDropDownFillIcon from "@material-symbols/svg-500/sharp/arrow_drop_down-fill.svg";
-import UnfoldLessIcon from "@material-symbols/svg-500/sharp/unfold_less.svg";
-import UnfoldMoreIcon from "@material-symbols/svg-500/sharp/unfold_more.svg";
-import CollapseContentIcon from "@material-symbols/svg-500/sharp/collapse_content.svg";
-import ExpandContentIcon from "@material-symbols/svg-500/sharp/expand_content.svg";
-import ZoomOutMapIcon from "@material-symbols/svg-500/sharp/zoom_out_map.svg";
-import ZoomInMapIcon from "@material-symbols/svg-500/sharp/zoom_in_map.svg";
-import AddIcon from "@material-symbols/svg-500/sharp/add.svg";
-import CloseSmallIcon from "@material-symbols/svg-500/sharp/close_small.svg";
-import RemoveIcon from "@material-symbols/svg-500/sharp/remove.svg";
-import EqualIcon from "@material-symbols/svg-500/sharp/equal.svg";
-import FunctionIcon from "@material-symbols/svg-500/sharp/function.svg";
-import FunctionsIcon from "@material-symbols/svg-500/sharp/functions.svg";
-import PercentIcon from "@material-symbols/svg-500/sharp/percent.svg";
-import CalculateIcon from "@material-symbols/svg-500/sharp/calculate.svg";
-import CalculateFillIcon from "@material-symbols/svg-500/sharp/calculate-fill.svg";
-import CalendarMonthIcon from "@material-symbols/svg-500/sharp/calendar_month.svg";
-import CalendarMonthFillIcon from "@material-symbols/svg-500/sharp/calendar_month-fill.svg";
-import EventAvailableIcon from "@material-symbols/svg-500/sharp/event_available.svg";
-import EventAvailableFillIcon from "@material-symbols/svg-500/sharp/event_available-fill.svg";
-import EditCalendarIcon from "@material-symbols/svg-500/sharp/edit_calendar.svg";
-import EditCalendarFillIcon from "@material-symbols/svg-500/sharp/edit_calendar-fill.svg";
-import PersonPinCircleIcon from "@material-symbols/svg-500/sharp/person_pin_circle.svg";
-import PersonPinCircleFillIcon from "@material-symbols/svg-500/sharp/person_pin_circle-fill.svg";
-import EuroSymbolIcon from "@material-symbols/svg-500/sharp/euro_symbol.svg";
-import LanguageIcon from "@material-symbols/svg-500/sharp/language.svg";
-import Grid4x4Icon from "@material-symbols/svg-500/sharp/grid_4x4.svg";
-import SellIcon from "@material-symbols/svg-500/sharp/sell.svg";
-import SellFillIcon from "@material-symbols/svg-500/sharp/sell-fill.svg";
-import HomeIcon from "@material-symbols/svg-500/sharp/home.svg";
-import HomeFillIcon from "@material-symbols/svg-500/sharp/home-fill.svg";
-import MenuIcon from "@material-symbols/svg-500/sharp/menu.svg";
-import LinkIcon from "@material-symbols/svg-500/sharp/link.svg";
-import LocationSearchingIcon from "@material-symbols/svg-500/sharp/location_searching.svg";
-import MyLocationIcon from "@material-symbols/svg-500/sharp/my_location.svg";
-import MyLocationFillIcon from "@material-symbols/svg-500/sharp/my_location-fill.svg";
-import LocationOnIcon from "@material-symbols/svg-500/sharp/location_on.svg";
-import LocationOnFillIcon from "@material-symbols/svg-500/sharp/location_on-fill.svg";
-import ExploreIcon from "@material-symbols/svg-500/sharp/explore.svg";
-import ExploreFillIcon from "@material-symbols/svg-500/sharp/explore-fill.svg";
-import FavoriteIcon from "@material-symbols/svg-500/sharp/favorite.svg";
-import FavoriteFillIcon from "@material-symbols/svg-500/sharp/favorite-fill.svg";
-import HelpIcon from "@material-symbols/svg-500/sharp/help.svg";
-import HelpFillIcon from "@material-symbols/svg-500/sharp/help-fill.svg";
-import InfoIcon from "@material-symbols/svg-500/sharp/info.svg";
-import InfoFillIcon from "@material-symbols/svg-500/sharp/info-fill.svg";
-import WarningIcon from "@material-symbols/svg-500/sharp/warning.svg";
-import WarningFillIcon from "@material-symbols/svg-500/sharp/warning-fill.svg";
-import CheckIcon from "@material-symbols/svg-500/sharp/check.svg";
-import CheckCircleIcon from "@material-symbols/svg-500/sharp/check_circle.svg";
-import CheckCircleFillIcon from "@material-symbols/svg-500/sharp/check_circle-fill.svg";
-import NotificationsIcon from "@material-symbols/svg-500/sharp/notifications.svg";
-import NotificationsFillIcon from "@material-symbols/svg-500/sharp/notifications-fill.svg";
-import NotificationsOffIcon from "@material-symbols/svg-500/sharp/notifications_off.svg";
-import NotificationsOffFillIcon from "@material-symbols/svg-500/sharp/notifications_off-fill.svg";
-import NotificationsUnreadIcon from "@material-symbols/svg-500/sharp/notifications_unread.svg";
-import NotificationsUnreadFillIcon from "@material-symbols/svg-500/sharp/notifications_unread-fill.svg";
-import NotificationsActiveIcon from "@material-symbols/svg-500/sharp/notifications_active.svg";
-import NotificationsActiveFillIcon from "@material-symbols/svg-500/sharp/notifications_active-fill.svg";
-import SentimentSatisfiedIcon from "@material-symbols/svg-500/sharp/sentiment_satisfied.svg";
-import SentimentSatisfiedFillIcon from "@material-symbols/svg-500/sharp/sentiment_satisfied-fill.svg";
-import SentimentNeutralIcon from "@material-symbols/svg-500/sharp/sentiment_neutral.svg";
-import SentimentNeutralFillIcon from "@material-symbols/svg-500/sharp/sentiment_neutral-fill.svg";
-import SentimentDissatisfiedIcon from "@material-symbols/svg-500/sharp/sentiment_dissatisfied.svg";
-import SentimentDissatisfiedFillIcon from "@material-symbols/svg-500/sharp/sentiment_dissatisfied-fill.svg";
-import SmartToyIcon from "@material-symbols/svg-500/sharp/smart_toy.svg";
-import SmartToyFillIcon from "@material-symbols/svg-500/sharp/smart_toy-fill.svg";
-import StarIcon from "@material-symbols/svg-500/sharp/star.svg";
-import StarFillIcon from "@material-symbols/svg-500/sharp/star-fill.svg";
-import PhotoCameraIcon from "@material-symbols/svg-500/sharp/photo_camera.svg";
-import PhotoCameraFillIcon from "@material-symbols/svg-500/sharp/photo_camera-fill.svg";
-import ChatIcon from "@material-symbols/svg-500/sharp/chat.svg";
-import ChatFillIcon from "@material-symbols/svg-500/sharp/chat-fill.svg";
-import RSSFeedIcon from "@material-symbols/svg-500/sharp/rss_feed.svg";
-import DescriptionIcon from "@material-symbols/svg-500/sharp/description.svg";
-import ImageIcon from "@material-symbols/svg-500/sharp/image.svg";
-import ImageFillIcon from "@material-symbols/svg-500/sharp/image-fill.svg";
-import GalleryThumbnailIcon from "@material-symbols/svg-500/sharp/gallery_thumbnail.svg";
-import PhotoLibraryIcon from "@material-symbols/svg-500/sharp/photo_library.svg";
-import FiberManualRecordIcon from "@material-symbols/svg-500/sharp/fiber_manual_record.svg";
-import FiberManualRecordFillIcon from "@material-symbols/svg-500/sharp/fiber_manual_record-fill.svg";
-import PauseIcon from "@material-symbols/svg-500/sharp/pause.svg";
-import PauseFillIcon from "@material-symbols/svg-500/sharp/pause-fill.svg";
-import PauseCircleIcon from "@material-symbols/svg-500/sharp/pause_circle.svg";
-import PauseCircleFillIcon from "@material-symbols/svg-500/sharp/pause_circle-fill.svg";
-import StopCircleIcon from "@material-symbols/svg-500/sharp/stop_circle.svg";
-import StopCircleFillIcon from "@material-symbols/svg-500/sharp/stop_circle-fill.svg";
-import StopIcon from "@material-symbols/svg-500/sharp/stop.svg";
-import StopFillIcon from "@material-symbols/svg-500/sharp/stop-fill.svg";
-import PlayPauseIcon from "@material-symbols/svg-500/sharp/play_pause.svg";
-import PlayArrowIcon from "@material-symbols/svg-500/sharp/play_arrow.svg";
-import PlayArrowFillIcon from "@material-symbols/svg-500/sharp/play_arrow-fill.svg";
-import SkipPreviousIcon from "@material-symbols/svg-500/sharp/skip_previous.svg";
-import SkipPreviousFillIcon from "@material-symbols/svg-500/sharp/skip_previous-fill.svg";
-import SkipNextIcon from "@material-symbols/svg-500/sharp/skip_next.svg";
-import SkipNextFillIcon from "@material-symbols/svg-500/sharp/skip_next-fill.svg";
-import FastRewindIcon from "@material-symbols/svg-500/sharp/fast_rewind.svg";
-import FastRewindFillIcon from "@material-symbols/svg-500/sharp/fast_rewind-fill.svg";
-import FastForwardIcon from "@material-symbols/svg-500/sharp/fast_forward.svg";
-import FastForwardFillIcon from "@material-symbols/svg-500/sharp/fast_forward-fill.svg";
+import { icons as customIcons } from "./categories/custom";
+import { icons as actionIcons } from "./categories/actions";
+import { icons as arrowIcons } from "./categories/arrows";
+import { icons as informationIcons } from "./categories/information";
+import { icons as navigationIcons } from "./categories/navigation";
+import { icons as notificationIcons } from "./categories/notifications";
+import { icons as mediaIcons } from "./categories/media";
+import { icons as textIcons } from "./categories/text";
+import { icons as userIcons } from "./categories/users";
 export const icons = [
-    { name: 'ds_flame', component: DSFlameIcon, category: 'DS Custom icons' },
-    { name: 'ds_flame_fill', component: DSFlameFillIcon, category: 'DS Custom icons' },
-    { name: 'archive', component: ArchiveIcon, category: 'Actions' },
-    { name: 'archive_fill', component: ArchiveFillIcon, category: 'Actions' },
-    { name: 'download', component: DownloadIcon, category: 'Actions' },
-    { name: 'file_save', component: FileSaveIcon, category: 'Actions' },
-    { name: 'file_save_fill', component: FileSaveFillIcon, category: 'Actions' },
-    { name: 'send', component: SendIcon, category: 'Actions' },
-    { name: 'send_fill', component: SendFillIcon, category: 'Actions' },
-    { name: 'list_alt', component: ListAltIcon, category: 'Actions' },
-    { name: 'list_alt_add', component: ListAltAddIcon, category: 'Actions' },
-    { name: 'list_alt_check', component: ListAltCheckIcon, category: 'Actions' },
-    { name: 'fork_right', component: ForkRightIcon, category: 'Actions' },
-    { name: 'manufacturing', component: ManufacturingIcon, category: 'Actions' },
-    { name: 'drag_indicator', component: DragIndicatorIcon, category: 'Actions' },
-    { name: 'resize', component: ResizeIcon, category: 'Actions' },
-    { name: 'edit', component: EditIcon, category: 'Actions' },
-    { name: 'edit_fill', component: EditFillIcon, category: 'Actions' },
-    { name: 'code_blocks', component: CodeBlocksIcon, category: 'Actions' },
-    { name: 'visibility', component: VisibilityIcon, category: 'Actions' },
-    { name: 'visibility_fill', component: VisibilityFillIcon, category: 'Actions' },
-    { name: 'visibility_off', component: VisibilityOffIcon, category: 'Actions' },
-    { name: 'visibility_off_fill', component: VisibilityOffFillIcon, category: 'Actions' },
-    { name: 'close', component: CloseIcon, category: 'Actions' },
-    { name: 'cancel', component: CancelIcon, category: 'Actions' },
-    { name: 'cancel_fill', component: CancelFillIcon, category: 'Actions' },
-    { name: 'attach_file', component: AttachFileIcon, category: 'Actions' },
-    { name: 'attach_file_add', component: AttachFileAddIcon, category: 'Actions' },
-    { name: 'attach_file_off', component: AttachFileOffIcon, category: 'Actions' },
-    { name: 'attach_email', component: AttachEmailIcon, category: 'Actions' },
-    { name: 'attach_email_fill', component: AttachEmailFillIcon, category: 'Actions' },
-    { name: 'zoom_in', component: ZoomInIcon, category: 'Actions' },
-    { name: 'zoom_out', component: ZoomOutIcon, category: 'Actions' },
-    { name: 'search', component: SearchIcon, category: 'Actions' },
-    { name: 'arrow_back', component: ArrowBackIcon, category: 'Arrows and operators' },
-    { name: 'arrow_forward', component: ArrowForwardIcon, category: 'Arrows and operators' },
-    { name: 'arrow_upward', component: ArrowUpwardIcon, category: 'Arrows and operators' },
-    { name: 'arrow_downward', component: ArrowDownwardIcon, category: 'Arrows and operators' },
-    { name: 'arrow_insert', component: ArrowInsertIcon, category: 'Arrows and operators' },
-    { name: 'arrow_outward', component: ArrowOutwardIcon, category: 'Arrows and operators' },
-    { name: 'chevron_backward', component: ChevronBackwardIcon, category: 'Arrows and operators' },
-    { name: 'chevron_forward', component: ChevronForwardIcon, category: 'Arrows and operators' },
-    { name: 'keyboard_arrow_up', component: KeyboardArrowUpIcon, category: 'Arrows and operators' },
-    { name: 'keyboard_arrow_down', component: KeyboardArrowDownIcon, category: 'Arrows and operators' },
-    { name: 'arrow_drop_down_circle', component: ArrowDropDownCircleIcon, category: 'Arrows and operators' },
-    { name: 'arrow_drop_down_fill', component: ArrowDropDownFillIcon, category: 'Arrows and operators' },
-    { name: 'unfold_less', component: UnfoldLessIcon, category: 'Arrows and operators' },
-    { name: 'unfold_more', component: UnfoldMoreIcon, category: 'Arrows and operators' },
-    { name: 'collapse_content', component: CollapseContentIcon, category: 'Arrows and operators' },
-    { name: 'expand_content', component: ExpandContentIcon, category: 'Arrows and operators' },
-    { name: 'zoom_out_map', component: ZoomOutMapIcon, category: 'Arrows and operators' },
-    { name: 'zoom_in_map', component: ZoomInMapIcon, category: 'Arrows and operators' },
-    { name: 'add', component: AddIcon, category: 'Arrows and operators' },
-    { name: 'close_small', component: CloseSmallIcon, category: 'Arrows and operators' },
-    { name: 'remove', component: RemoveIcon, category: 'Arrows and operators' },
-    { name: 'equal', component: EqualIcon, category: 'Arrows and operators' },
-    { name: 'function', component: FunctionIcon, category: 'Arrows and operators' },
-    { name: 'functions', component: FunctionsIcon, category: 'Arrows and operators' },
-    { name: 'percent', component: PercentIcon, category: 'Arrows and operators' },
-    { name: 'calculate', component: CalculateIcon, category: 'Arrows and operators' },
-    { name: 'calculate_fill', component: CalculateFillIcon, category: 'Arrows and operators' },
-    { name: 'calendar_month', component: CalendarMonthIcon, category: 'Information' },
-    { name: 'calendar_month_fill', component: CalendarMonthFillIcon, category: 'Information' },
-    { name: 'event_available', component: EventAvailableIcon, category: 'Information' },
-    { name: 'event_available_fill', component: EventAvailableFillIcon, category: 'Information' },
-    { name: 'edit_calendar', component: EditCalendarIcon, category: 'Information' },
-    { name: 'edit_calendar_fill', component: EditCalendarFillIcon, category: 'Information' },
-    { name: 'person_pin_circle', component: PersonPinCircleIcon, category: 'Information' },
-    { name: 'person_pin_circle_fill', component: PersonPinCircleFillIcon, category: 'Information' },
-    { name: 'euro_symbol', component: EuroSymbolIcon, category: 'Information' },
-    { name: 'language', component: LanguageIcon, category: 'Information' },
-    { name: 'grid_4x4', component: Grid4x4Icon, category: 'Information' },
-    { name: 'sell', component: SellIcon, category: 'Information' },
-    { name: 'sell_fill', component: SellFillIcon, category: 'Information' },
-    { name: 'home', component: HomeIcon, category: 'Navigation' },
-    { name: 'home_fill', component: HomeFillIcon, category: 'Navigation' },
-    { name: 'menu', component: MenuIcon, category: 'Navigation' },
-    { name: 'link', component: LinkIcon, category: 'Navigation' },
-    { name: 'location_searching', component: LocationSearchingIcon, category: 'Navigation' },
-    { name: 'my_location', component: MyLocationIcon, category: 'Navigation' },
-    { name: 'my_location_fill', component: MyLocationFillIcon, category: 'Navigation' },
-    { name: 'location_on', component: LocationOnIcon, category: 'Navigation' },
-    { name: 'location_on_fill', component: LocationOnFillIcon, category: 'Navigation' },
-    { name: 'explore', component: ExploreIcon, category: 'Navigation' },
-    { name: 'explore_fill', component: ExploreFillIcon, category: 'Navigation' },
-    { name: 'favorite', component: FavoriteIcon, category: 'Notifications and expressions' },
-    { name: 'favorite_fill', component: FavoriteFillIcon, category: 'Notifications and expressions' },
-    { name: 'help', component: HelpIcon, category: 'Notifications and expressions' },
-    { name: 'help_fill', component: HelpFillIcon, category: 'Notifications and expressions' },
-    { name: 'info', component: InfoIcon, category: 'Notifications and expressions' },
-    { name: 'info_fill', component: InfoFillIcon, category: 'Notifications and expressions' },
-    { name: 'warning', component: WarningIcon, category: 'Notifications and expressions' },
-    { name: 'warning_fill', component: WarningFillIcon, category: 'Notifications and expressions' },
-    { name: 'check', component: CheckIcon, category: 'Notifications and expressions' },
-    { name: 'check_circle', component: CheckCircleIcon, category: 'Notifications and expressions' },
-    { name: 'check_circle_fill', component: CheckCircleFillIcon, category: 'Notifications and expressions' },
-    { name: 'notifications', component: NotificationsIcon, category: 'Notifications and expressions' },
-    { name: 'notifications_fill', component: NotificationsFillIcon, category: 'Notifications and expressions' },
-    { name: 'notifications_off', component: NotificationsOffIcon, category: 'Notifications and expressions' },
-    { name: 'notifications_off_fill', component: NotificationsOffFillIcon, category: 'Notifications and expressions' },
-    { name: 'notifications_unread', component: NotificationsUnreadIcon, category: 'Notifications and expressions' },
-    { name: 'notifications_unread_fill', component: NotificationsUnreadFillIcon, category: 'Notifications and expressions' },
-    { name: 'notifications_active', component: NotificationsActiveIcon, category: 'Notifications and expressions' },
-    { name: 'notifications_active_fill', component: NotificationsActiveFillIcon, category: 'Notifications and expressions' },
-    { name: 'sentiment_satisfied', component: SentimentSatisfiedIcon, category: 'Notifications and expressions' },
-    { name: 'sentiment_satisfied_fill', component: SentimentSatisfiedFillIcon, category: 'Notifications and expressions' },
-    { name: 'sentiment_neutral', component: SentimentNeutralIcon, category: 'Notifications and expressions' },
-    { name: 'sentiment_neutral_fill', component: SentimentNeutralFillIcon, category: 'Notifications and expressions' },
-    { name: 'sentiment_dissatisfied', component: SentimentDissatisfiedIcon, category: 'Notifications and expressions' },
-    { name: 'sentiment_dissatisfied_fill', component: SentimentDissatisfiedFillIcon, category: 'Notifications and expressions' },
-    { name: 'smart_toy', component: SmartToyIcon, category: 'Notifications and expressions' },
-    { name: 'smart_toy_fill', component: SmartToyFillIcon, category: 'Notifications and expressions' },
-    { name: 'star', component: StarIcon, category: 'Notifications and expressions' },
-    { name: 'star_fill', component: StarFillIcon, category: 'Notifications and expressions' },
-    { name: 'photo_camera', component: PhotoCameraIcon, category: 'Media and devices' },
-    { name: 'photo_camera_fill', component: PhotoCameraFillIcon, category: 'Media and devices' },
-    { name: 'chat', component: ChatIcon, category: 'Media and devices' },
-    { name: 'chat_fill', component: ChatFillIcon, category: 'Media and devices' },
-    { name: 'rss_feed', component: RSSFeedIcon, category: 'Media and devices' },
-    { name: 'description', component: DescriptionIcon, category: 'Media and devices' },
-    { name: 'image', component: ImageIcon, category: 'Media and devices' },
-    { name: 'image_fill', component: ImageFillIcon, category: 'Media and devices' },
-    { name: 'gallery_thumbnail', component: GalleryThumbnailIcon, category: 'Media and devices' },
-    { name: 'photo_library', component: PhotoLibraryIcon, category: 'Media and devices' },
-    { name: 'fiber_manual_record', component: FiberManualRecordIcon, category: 'Media and devices' },
-    { name: 'fiber_manual_record_fill', component: FiberManualRecordFillIcon, category: 'Media and devices' },
-    { name: 'pause', component: PauseIcon, category: 'Media and devices' },
-    { name: 'pause_fill', component: PauseFillIcon, category: 'Media and devices' },
-    { name: 'pause_circle', component: PauseCircleIcon, category: 'Media and devices' },
-    { name: 'pause_circle_fill', component: PauseCircleFillIcon, category: 'Media and devices' },
-    { name: 'stop_circle', component: StopCircleIcon, category: 'Media and devices' },
-    { name: 'stop_circle_fill', component: StopCircleFillIcon, category: 'Media and devices' },
-    { name: 'stop', component: StopIcon, category: 'Media and devices' },
-    { name: 'stop_fill', component: StopFillIcon, category: 'Media and devices' },
-    { name: 'play_pause', component: PlayPauseIcon, category: 'Media and devices' },
-    { name: 'play_arrow', component: PlayArrowIcon, category: 'Media and devices' },
-    { name: 'play_arrow_fill', component: PlayArrowFillIcon, category: 'Media and devices' },
-    { name: 'skip_previous', component: SkipPreviousIcon, category: 'Media and devices' },
-    { name: 'skip_previous_fill', component: SkipPreviousFillIcon, category: 'Media and devices' },
-    { name: 'skip_next', component: SkipNextIcon, category: 'Media and devices' },
-    { name: 'skip_next_fill', component: SkipNextFillIcon, category: 'Media and devices' },
-    { name: 'fast_rewind', component: FastRewindIcon, category: 'Media and devices' },
-    { name: 'fast_rewind_fill', component: FastRewindFillIcon, category: 'Media and devices' },
-    { name: 'fast_forward', component: FastForwardIcon, category: 'Media and devices' },
-    { name: 'fast_forward_fill', component: FastForwardFillIcon, category: 'Media and devices' },
+    ...customIcons,
+    ...actionIcons,
+    ...arrowIcons,
+    ...informationIcons,
+    ...navigationIcons,
+    ...notificationIcons,
+    ...mediaIcons,
+    ...textIcons,
+    ...userIcons,
 ];
-//# sourceMappingURL=iconList.js.map

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

@@ -40,4 +40,3 @@ export const Icons = () => {
     });
     return container;
 };
-//# sourceMappingURL=icons.stories.js.map

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

@@ -11,11 +11,10 @@ export const Spacing = () => {
     const renderedCategories = new Set();
     const categoryNames = [...new Set(Object.values(categories)), 'Other'];
     categoryNames.forEach(category => {
-        const categorySpacing = spacingVariables.filter(spacing => spacing.category === category);
-        if (categorySpacing.length > 0) {
+        const categorySpacing = spacingVariables[category.toLowerCase()];
+        if (categorySpacing && categorySpacing.length > 0) {
             container.appendChild(createCategorySection(category, categorySpacing, renderedCategories));
         }
     });
     return container;
 };
-//# sourceMappingURL=spacing.stories.js.map

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

@@ -1,10 +1,50 @@
 // src/components/00-foundations/typography/typography.stories.ts
 import "./_typography.scss";
 import { getTypographyVariables, createCategorySection, categories } from "../../../utils/typography/typographyUtils";
-export default {
+import { html } from "lit";
+const meta = {
     title: 'Foundations/Typography',
 };
-export const Typography = () => {
+export default meta;
+export const Headings = {
+    argTypes: {
+        text: {
+            name: 'Text',
+            control: 'text',
+        },
+    },
+    args: {
+        text: 'This is a heading',
+    },
+    render: (args) => html `
+    <h1>${args.text}</h1>
+    <h2>${args.text}</h2>
+    <h3>${args.text}</h3>
+    <h4>${args.text}</h4>
+    <h5>${args.text}</h5>
+    <h6>${args.text}</h6>
+  `,
+};
+export const Text = {
+    argTypes: {
+        text: {
+            name: 'Text',
+            control: 'text',
+        },
+    },
+    args: {
+        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis nulla vehicula, commodo massa sit amet, commodo felis. Fusce et consectetur felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer elit egestas luctus.',
+    },
+    render: (args) => html `
+    <p class="bodyText bodyText--2xLarge">${args.text}</p>
+    <p class="bodyText bodyText--xLarge">${args.text}</p>
+    <p class="bodyText bodyText--large">${args.text}</p>
+    <p class="bodyText bodyText--medium">${args.text}</p>
+    <p class="bodyText bodyText--small">${args.text}</p>
+    <p class="bodyText bodyText--xSmall">${args.text}</p>
+  `,
+};
+const renderTypography = () => {
     const container = document.createElement('div');
     const typographyVariables = getTypographyVariables();
     // Reset the renderedCategories set
@@ -18,4 +58,13 @@ export const Typography = () => {
     });
     return container;
 };
-//# sourceMappingURL=typography.stories.js.map
+export const Typography = {
+    parameters: {
+        docs: {
+            source: {
+                code: renderTypography().outerHTML,
+            },
+        },
+    },
+    render: renderTypography,
+};