@uh-design-system/component-library 0.2.4 → 0.4.0

package/dist/components/ds-icon2.js

@@ -14,10 +14,10 @@ const DSFlameFillIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="
 </svg>
 `;
 
-const category$8 = 'DS Custom icons';
-const icons$9 = [
-    { name: 'ds_flame', component: DSFlameIcon, category: category$8 },
-    { name: 'ds_flame_fill', component: DSFlameFillIcon, category: category$8 },
+const category$9 = 'DS Custom icons';
+const icons$a = [
+    { name: 'ds_flame', component: DSFlameIcon, category: category$9 },
+    { name: 'ds_flame_fill', component: DSFlameFillIcon, category: category$9 },
 ];
 
 const ArchiveIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m480-279 158-158-53-54-65 65v-150h-80v150l-65-64-52 54 157 157ZM189-639v450h582v-450H189ZM95-95v-621l121-150h528l122 150v621H95Zm128-631h513l-36-46H259l-36 46Zm257 312Z"/></svg>`;
@@ -124,60 +124,60 @@ const SaveIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
 
 const SaveFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M866-694v599H95v-771h599l172 172ZM479.76-254q43.24 0 73.74-30.26 30.5-30.27 30.5-73.5 0-43.24-30.26-73.74-30.27-30.5-73.5-30.5-43.24 0-73.74 30.26-30.5 30.27-30.5 73.5 0 43.24 30.26 73.74 30.27 30.5 73.5 30.5ZM242-575h358v-143H242v143Z"/></svg>`;
 
-const category$7 = 'Actions';
-const icons$8 = [
-    { name: 'archive', component: ArchiveIcon, category: category$7 },
-    { name: 'archive_fill', component: ArchiveFillIcon, category: category$7 },
-    { name: 'download', component: DownloadIcon, category: category$7 },
-    { name: 'file_save', component: FileSaveIcon, category: category$7 },
-    { name: 'file_save_fill', component: FileSaveFillIcon, category: category$7 },
-    { name: 'send', component: SendIcon, category: category$7 },
-    { name: 'send_fill', component: SendFillIcon, category: category$7 },
-    { name: 'list_alt', component: ListAltIcon, category: category$7 },
-    { name: 'list_alt_add', component: ListAltAddIcon, category: category$7 },
-    { name: 'list_alt_check', component: ListAltCheckIcon, category: category$7 },
-    { name: 'fork_right', component: ForkRightIcon, category: category$7 },
-    { name: 'manufacturing', component: ManufacturingIcon, category: category$7 },
-    { name: 'drag_indicator', component: DragIndicatorIcon, category: category$7 },
-    { name: 'resize', component: ResizeIcon, category: category$7 },
-    { name: 'edit', component: EditIcon, category: category$7 },
-    { name: 'edit_fill', component: EditFillIcon, category: category$7 },
-    { name: 'code_blocks', component: CodeBlocksIcon, category: category$7 },
-    { name: 'visibility', component: VisibilityIcon, category: category$7 },
-    { name: 'visibility_fill', component: VisibilityFillIcon, category: category$7 },
-    { name: 'visibility_off', component: VisibilityOffIcon, category: category$7 },
-    { name: 'visibility_off_fill', component: VisibilityOffFillIcon, category: category$7 },
-    { name: 'close', component: CloseIcon, category: category$7 },
-    { name: 'cancel', component: CancelIcon, category: category$7 },
-    { name: 'cancel_fill', component: CancelFillIcon, category: category$7 },
-    { name: 'attach_file', component: AttachFileIcon, category: category$7 },
-    { name: 'attach_file_add', component: AttachFileAddIcon, category: category$7 },
-    { name: 'attach_file_off', component: AttachFileOffIcon, category: category$7 },
-    { name: 'attach_email', component: AttachEmailIcon, category: category$7 },
-    { name: 'attach_email_fill', component: AttachEmailFillIcon, category: category$7 },
-    { name: 'zoom_in', component: ZoomInIcon, category: category$7 },
-    { name: 'zoom_out', component: ZoomOutIcon, category: category$7 },
-    { name: 'search', component: SearchIcon, category: category$7 },
-    { name: 'settings', component: SettingsIcon, category: category$7 },
-    { name: 'settings_fill', component: SettingsFillIcon, category: category$7 },
-    { name: 'login', component: LoginIcon, category: category$7 },
-    { name: 'logout', component: LogoutIcon, category: category$7 },
-    { name: 'export_notes', component: ExportNotesIcon, category: category$7 },
-    { name: 'export_notes_fill', component: ExportNotesFillIcon, category: category$7 },
-    { name: 'share', component: ShareIcon, category: category$7 },
-    { name: '360', component: ThreeSixtyIcon, category: category$7 },
-    { name: 'refresh', component: RefreshIcon, category: category$7 },
-    { name: 'history', component: HistoryIcon, category: category$7 },
-    { name: 'rotate_left', component: RotateLeftIcon, category: category$7 },
-    { name: 'rotate_right', component: RotateRightIcon, category: category$7 },
-    { name: 'sync', component: SyncIcon, category: category$7 },
-    { name: 'build', component: BuildIcon, category: category$7 },
-    { name: 'construction', component: ConstructionIcon, category: category$7 },
-    { name: 'build_fill', component: BuildFillIcon, category: category$7 },
-    { name: 'delete', component: DeleteIcon, category: category$7 },
-    { name: 'delete_fill', component: DeleteFillIcon, category: category$7 },
-    { name: 'save', component: SaveIcon, category: category$7 },
-    { name: 'save_fill', component: SaveFillIcon, category: category$7 },
+const category$8 = 'Actions';
+const icons$9 = [
+    { name: 'archive', component: ArchiveIcon, category: category$8 },
+    { name: 'archive_fill', component: ArchiveFillIcon, category: category$8 },
+    { name: 'download', component: DownloadIcon, category: category$8 },
+    { name: 'file_save', component: FileSaveIcon, category: category$8 },
+    { name: 'file_save_fill', component: FileSaveFillIcon, category: category$8 },
+    { name: 'send', component: SendIcon, category: category$8 },
+    { name: 'send_fill', component: SendFillIcon, category: category$8 },
+    { name: 'list_alt', component: ListAltIcon, category: category$8 },
+    { name: 'list_alt_add', component: ListAltAddIcon, category: category$8 },
+    { name: 'list_alt_check', component: ListAltCheckIcon, category: category$8 },
+    { name: 'fork_right', component: ForkRightIcon, category: category$8 },
+    { name: 'manufacturing', component: ManufacturingIcon, category: category$8 },
+    { name: 'drag_indicator', component: DragIndicatorIcon, category: category$8 },
+    { name: 'resize', component: ResizeIcon, category: category$8 },
+    { name: 'edit', component: EditIcon, category: category$8 },
+    { name: 'edit_fill', component: EditFillIcon, category: category$8 },
+    { name: 'code_blocks', component: CodeBlocksIcon, category: category$8 },
+    { name: 'visibility', component: VisibilityIcon, category: category$8 },
+    { name: 'visibility_fill', component: VisibilityFillIcon, category: category$8 },
+    { name: 'visibility_off', component: VisibilityOffIcon, category: category$8 },
+    { name: 'visibility_off_fill', component: VisibilityOffFillIcon, category: category$8 },
+    { name: 'close', component: CloseIcon, category: category$8 },
+    { name: 'cancel', component: CancelIcon, category: category$8 },
+    { name: 'cancel_fill', component: CancelFillIcon, category: category$8 },
+    { name: 'attach_file', component: AttachFileIcon, category: category$8 },
+    { name: 'attach_file_add', component: AttachFileAddIcon, category: category$8 },
+    { name: 'attach_file_off', component: AttachFileOffIcon, category: category$8 },
+    { name: 'attach_email', component: AttachEmailIcon, category: category$8 },
+    { name: 'attach_email_fill', component: AttachEmailFillIcon, category: category$8 },
+    { name: 'zoom_in', component: ZoomInIcon, category: category$8 },
+    { name: 'zoom_out', component: ZoomOutIcon, category: category$8 },
+    { name: 'search', component: SearchIcon, category: category$8 },
+    { name: 'settings', component: SettingsIcon, category: category$8 },
+    { name: 'settings_fill', component: SettingsFillIcon, category: category$8 },
+    { name: 'login', component: LoginIcon, category: category$8 },
+    { name: 'logout', component: LogoutIcon, category: category$8 },
+    { name: 'export_notes', component: ExportNotesIcon, category: category$8 },
+    { name: 'export_notes_fill', component: ExportNotesFillIcon, category: category$8 },
+    { name: 'share', component: ShareIcon, category: category$8 },
+    { name: '360', component: ThreeSixtyIcon, category: category$8 },
+    { name: 'refresh', component: RefreshIcon, category: category$8 },
+    { name: 'history', component: HistoryIcon, category: category$8 },
+    { name: 'rotate_left', component: RotateLeftIcon, category: category$8 },
+    { name: 'rotate_right', component: RotateRightIcon, category: category$8 },
+    { name: 'sync', component: SyncIcon, category: category$8 },
+    { name: 'build', component: BuildIcon, category: category$8 },
+    { name: 'construction', component: ConstructionIcon, category: category$8 },
+    { name: 'build_fill', component: BuildFillIcon, category: category$8 },
+    { name: 'delete', component: DeleteIcon, category: category$8 },
+    { name: 'delete_fill', component: DeleteFillIcon, category: category$8 },
+    { name: 'save', component: SaveIcon, category: category$8 },
+    { name: 'save_fill', component: SaveFillIcon, category: category$8 },
 ];
 
 const ArrowUpwardIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M433-135v-510L201-413l-66-67 345-346 346 346-67 67-232-232v510h-94Z"/></svg>`;
@@ -238,37 +238,46 @@ const ArrowDropDownIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" he
 
 const FunctionIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M389-221v-80h70l128-137-127.93-138H379l-70 360q-11 56-45.75 88T179-96q-48 0-80.5-28.64Q66-153.27 66-194q0-30.65 18.3-50.32Q102.6-264 131.76-264q26.24 0 42.74 16 16.5 16 16.5 41 0 10-4 18t-11 13q3 2 7.5 3t10.5 1q12 1 21-10.5t12-29.5l71-364H160v-79h153l19-84q13-60 47.22-93.5t86.07-33.5Q513-866 545-838.5q32 27.5 32 68.5 0 32.7-18.5 52.35T510.53-698q-25.53 0-42.03-15T452-753q0-7.56 3.5-16.5 3.5-8.94 8.5-13.5-2-2-6-3.5t-8-1.5q-12-1-22 10.75T415-749l-20 94h214v79h-44l78 87 73-87h-45v-79h219v79h-68L694-438l129 137h67v80H671v-80h45l-75-82-78 82h46v80H389Z"/></svg>`;
 
-const category$6 = 'Arrows and operators';
-const icons$7 = [
-    { name: 'arrow_upward', component: ArrowUpwardIcon, category: category$6 },
-    { name: 'add', component: AddIcon, category: category$6 },
-    { name: 'arrow_outward', component: ArrowOutwardIcon, category: category$6 },
-    { name: 'arrow_downward', component: ArrowDownwardIcon, category: category$6 },
-    { name: 'arrow_forward', component: ArrowForwardIcon, category: category$6 },
-    { name: 'arrow_back', component: ArrowBackIcon, category: category$6 },
-    { name: 'arrow_insert', component: ArrowInsertIcon, category: category$6 },
-    { name: 'remove', component: RemoveIcon, category: category$6 },
-    { name: 'chevron_backward', component: ChevronBackwardIcon, category: category$6 },
-    { name: 'chevron_forward', component: ChevronForwardIcon, category: category$6 },
-    { name: 'keyboard_arrow_up', component: KeyboardArrowUpIcon, category: category$6 },
-    { name: 'keyboard_arrow_down', component: KeyboardArrowDownIcon, category: category$6 },
-    { name: 'unfold_less', component: UnfoldLessIcon, category: category$6 },
-    { name: 'unfold_more', component: UnfoldMoreIcon, category: category$6 },
-    { name: 'collapse_content', component: CollapseContentIcon, category: category$6 },
-    { name: 'expand_content', component: ExpandContentIcon, category: category$6 },
-    { name: 'equal', component: EqualIcon, category: category$6 },
-    { name: 'functions', component: FunctionsIcon, category: category$6 },
-    { name: 'percent', component: PercentIcon, category: category$6 },
-    { name: 'close_small', component: CloseSmallIcon, category: category$6 },
-    { name: 'calculate', component: CalculateIcon, category: category$6 },
-    { name: 'calculate_fill', component: CalculateFillIcon, category: category$6 },
-    { name: 'arrow_drop_down_circle_fill', component: ArrowDropDownCircleFillIcon, category: category$6 },
-    { name: 'arrow_drop_down_circle', component: ArrowDropDownCircleIcon, category: category$6 },
-    { name: 'zoom_out_map', component: ZoomOutMapIcon, category: category$6 },
-    { name: 'zoom_in_map', component: ZoomInMapIcon, category: category$6 },
-    { name: 'arrow_drop_up', component: ArrowDropUpIcon, category: category$6 },
-    { name: 'arrow_drop_down', component: ArrowDropDownIcon, category: category$6 },
-    { name: 'function', component: FunctionIcon, category: category$6 },
+const TrendingDownIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M628-218v-94h118L543-517 376-350 55-670l67-67 253 253 167-167 270 271v-115h94v277H628Z"/></svg>`;
+
+const TrendingUpIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m122-218-67-67 321-319 167 167 203-205H628v-95h278v278h-94v-115L542-303 375-470 122-218Z"/></svg>`;
+
+const SwapHorizIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M272-135 55-352l217-217 66 66-103 104h277v95H235l103 103-66 66Zm416-257-66-66 104-103H449v-95h277L622-760l66-66 218 217-218 217Z"/></svg>`;
+
+const category$7 = 'Arrows and operators';
+const icons$8 = [
+    { name: 'arrow_upward', component: ArrowUpwardIcon, category: category$7 },
+    { name: 'add', component: AddIcon, category: category$7 },
+    { name: 'arrow_outward', component: ArrowOutwardIcon, category: category$7 },
+    { name: 'arrow_downward', component: ArrowDownwardIcon, category: category$7 },
+    { name: 'arrow_forward', component: ArrowForwardIcon, category: category$7 },
+    { name: 'arrow_back', component: ArrowBackIcon, category: category$7 },
+    { name: 'arrow_insert', component: ArrowInsertIcon, category: category$7 },
+    { name: 'remove', component: RemoveIcon, category: category$7 },
+    { name: 'chevron_backward', component: ChevronBackwardIcon, category: category$7 },
+    { name: 'chevron_forward', component: ChevronForwardIcon, category: category$7 },
+    { name: 'keyboard_arrow_up', component: KeyboardArrowUpIcon, category: category$7 },
+    { name: 'keyboard_arrow_down', component: KeyboardArrowDownIcon, category: category$7 },
+    { name: 'unfold_less', component: UnfoldLessIcon, category: category$7 },
+    { name: 'unfold_more', component: UnfoldMoreIcon, category: category$7 },
+    { name: 'collapse_content', component: CollapseContentIcon, category: category$7 },
+    { name: 'expand_content', component: ExpandContentIcon, category: category$7 },
+    { name: 'equal', component: EqualIcon, category: category$7 },
+    { name: 'functions', component: FunctionsIcon, category: category$7 },
+    { name: 'percent', component: PercentIcon, category: category$7 },
+    { name: 'close_small', component: CloseSmallIcon, category: category$7 },
+    { name: 'calculate', component: CalculateIcon, category: category$7 },
+    { name: 'calculate_fill', component: CalculateFillIcon, category: category$7 },
+    { name: 'arrow_drop_down_circle_fill', component: ArrowDropDownCircleFillIcon, category: category$7 },
+    { name: 'arrow_drop_down_circle', component: ArrowDropDownCircleIcon, category: category$7 },
+    { name: 'zoom_out_map', component: ZoomOutMapIcon, category: category$7 },
+    { name: 'zoom_in_map', component: ZoomInMapIcon, category: category$7 },
+    { name: 'arrow_drop_up', component: ArrowDropUpIcon, category: category$7 },
+    { name: 'arrow_drop_down', component: ArrowDropDownIcon, category: category$7 },
+    { name: 'function', component: FunctionIcon, category: category$7 },
+    { name: 'trending_down', component: TrendingDownIcon, category: category$7 },
+    { name: 'trending_up', component: TrendingUpIcon, category: category$7 },
+    { name: 'swap_horiz', component: SwapHorizIcon, category: category$7 },
 ];
 
 const CalendarMonthIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M434-394v-92h92v92h-92Zm-160 0v-92h92v92h-92Zm320 0v-92h92v92h-92ZM434-234v-92h92v92h-92Zm-160 0v-92h92v92h-92Zm320 0v-92h92v92h-92ZM95-55v-791h150.2v-60H327v60h306v-60h82.2v60H866v791H95Zm94-94h582v-421H189v421Zm0-481h582v-121H189v121Zm0 0v-121 121Z"/></svg>`;
@@ -359,52 +368,70 @@ const AccountBalanceFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="4
 
 const ProgressActivityIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-55q-90.2 0-167.57-32.58-77.37-32.57-134.82-90.03-57.46-57.45-90.03-134.82Q55-389.8 55-480q0-89.87 32.56-167.25 32.57-77.37 89.87-135.11 57.31-57.74 134.79-90.69Q389.7-906 480-906v95q-138.33 0-234.66 96.27Q149-618.46 149-480.23 149-342 245.27-245.5t234.5 96.5Q618-149 714.5-245.34 811-341.67 811-480h95q0 90.3-33.01 167.79-33.02 77.5-90.5 134.85Q725-120 647.5-87.5 570.01-55 480-55Z"/></svg>`;
 
-const category$5 = 'Information';
-const icons$6 = [
-    { name: 'calendar_month', component: CalendarMonthIcon, category: category$5 },
-    { name: 'calendar_month_fill', component: CalendarMonthFillIcon, category: category$5 },
-    { name: 'event_available', component: EventAvailableIcon, category: category$5 },
-    { name: 'event_available_fill', component: EventAvailableFillIcon, category: category$5 },
-    { name: 'edit_calendar', component: EditCalendarIcon, category: category$5 },
-    { name: 'edit_calendar_fill', component: EditCalendarFillIcon, category: category$5 },
-    { name: 'person_pin_circle', component: PersonPinCircleIcon, category: category$5 },
-    { name: 'person_pin_circle_fill', component: PersonPinCircleFillIcon, category: category$5 },
-    { name: 'euro_symbol', component: EuroSymbolIcon, category: category$5 },
-    { name: 'language', component: LanguageIcon, category: category$5 },
-    { name: 'grid_4x4', component: Grid4x4Icon, category: category$5 },
-    { name: 'sell', component: SellIcon, category: category$5 },
-    { name: 'sell_fill', component: SellFillIcon, category: category$5 },
-    { name: 'mail', component: MailIcon, category: category$5 },
-    { name: 'mail_fill', component: MailFillIcon, category: category$5 },
-    { name: 'drafts', component: DraftsIcon, category: category$5 },
-    { name: 'drafts_fill', component: DraftsFillIcon, category: category$5 },
-    { name: 'reorder', component: ReorderIcon, category: category$5 },
-    { name: 'grid_on', component: GridOnIcon, category: category$5 },
-    { name: 'grid_on_fill', component: GridOnFillIcon, category: category$5 },
-    { name: 'view_list', component: ViewListIcon, category: category$5 },
-    { name: 'view_list_fill', component: ViewListFillIcon, category: category$5 },
-    { name: 'widget_small', component: WidgetSmallIcon, category: category$5 },
-    { name: 'widget_small_fill', component: WidgetSmallFillIcon, category: category$5 },
-    { name: 'lock', component: LockIcon, category: category$5 },
-    { name: 'lock_fill', component: LockFillIcon, category: category$5 },
-    { name: 'lock_open', component: LockOpenIcon, category: category$5 },
-    { name: 'lock_open_fill', component: LockOpenFillIcon, category: category$5 },
-    { name: 'public', component: PublicIcon, category: category$5 },
-    { name: 'vpn_lock', component: VpnLockIcon, category: category$5 },
-    { name: 'hourglass', component: HourglassIcon, category: category$5 },
-    { name: 'hourglass_bottom', component: HourglassBottomIcon, category: category$5 },
-    { name: 'hourglass_top', component: HourglassTopIcon, category: category$5 },
-    { name: 'schedule', component: ScheduleIcon, category: category$5 },
-    { name: 'schedule_fill', component: ScheduleFillIcon, category: category$5 },
-    { name: 'timer', component: TimerIcon, category: category$5 },
-    { name: 'timer_fill', component: TimerFillIcon, category: category$5 },
-    { name: 'checklist', component: ChecklistIcon, category: category$5 },
-    { name: 'check_box_fill', component: CheckBoxFillIcon, category: category$5 },
-    { name: 'check_box', component: CheckBoxIcon, category: category$5 },
-    { name: 'check_box_outline_blank', component: CheckBoxOutlineBlankIcon, category: category$5 },
-    { name: 'account_balance', component: AccountBalanceIcon, category: category$5 },
-    { name: 'account_balance_fill', component: AccountBalanceFillIcon, category: category$5 },
-    { name: 'progress_activity', component: ProgressActivityIcon, category: category$5 },
+const BarChartIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M662-135v-316h164v316H662Zm-263 0v-691h162v691H399Zm-264 0v-491h163v491H135Z"/></svg>`;
+
+const ShowChartIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m126-196-70-70 324-324 159 159 298-335 67 65-362 411-162-160-254 254Z"/></svg>`;
+
+const PieChartIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M527-527h279q-12-108-91-189t-188-90v279Zm-94 373v-652q-121 16-202.5 108.99t-81.5 217Q149-356 230.5-263 312-170 433-154Zm94 0q109-10 187.5-90.5T806-433H527v279Zm-47-326Zm.14 425q-88.03 0-165.58-33Q237-121 179-179T88-314.45q-33-77.44-33-165.5Q55-568 88-645.5q33-77.5 90.88-135.55 57.88-58.06 135.44-91.5Q391.89-906 480.08-906q88.92 0 166.2 33.56 77.28 33.57 135 91Q839-724 872.5-646.64 906-569.28 906-480q0 89.3-33.62 166.75-33.63 77.45-91.27 134.78-57.64 57.32-135.21 90.39Q568.33-55 480.14-55Z"/></svg>`;
+
+const PieChartFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M527-527v-316q124 14 212 103t104 213H527Zm-95 410q-137-18-227-121.5T115-480q0-138 90-241.5T432-843v726Zm95 0v-315h316q-15 123-103.5 212.5T527-117Z"/></svg>`;
+
+const TableIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M95-95v-771h771v771H95Zm338-254H189v160h244v-160Zm94 0v160h244v-160H527Zm-94-95v-160H189v160h244Zm94 0h244v-160H527v160ZM189-698h582v-73H189v73Z"/></svg>`;
+
+const TableFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M450-328H95v233h355v-233Zm60 0v233h356v-233H510Zm-60-60v-234H95v234h355Zm60 0h356v-234H510v234ZM95-682h771v-184H95v184Z"/></svg>`;
+
+const category$6 = 'Information';
+const icons$7 = [
+    { name: 'calendar_month', component: CalendarMonthIcon, category: category$6 },
+    { name: 'calendar_month_fill', component: CalendarMonthFillIcon, category: category$6 },
+    { name: 'event_available', component: EventAvailableIcon, category: category$6 },
+    { name: 'event_available_fill', component: EventAvailableFillIcon, category: category$6 },
+    { name: 'edit_calendar', component: EditCalendarIcon, category: category$6 },
+    { name: 'edit_calendar_fill', component: EditCalendarFillIcon, category: category$6 },
+    { name: 'person_pin_circle', component: PersonPinCircleIcon, category: category$6 },
+    { name: 'person_pin_circle_fill', component: PersonPinCircleFillIcon, category: category$6 },
+    { name: 'euro_symbol', component: EuroSymbolIcon, category: category$6 },
+    { name: 'language', component: LanguageIcon, category: category$6 },
+    { name: 'grid_4x4', component: Grid4x4Icon, category: category$6 },
+    { name: 'sell', component: SellIcon, category: category$6 },
+    { name: 'sell_fill', component: SellFillIcon, category: category$6 },
+    { name: 'mail', component: MailIcon, category: category$6 },
+    { name: 'mail_fill', component: MailFillIcon, category: category$6 },
+    { name: 'drafts', component: DraftsIcon, category: category$6 },
+    { name: 'drafts_fill', component: DraftsFillIcon, category: category$6 },
+    { name: 'reorder', component: ReorderIcon, category: category$6 },
+    { name: 'grid_on', component: GridOnIcon, category: category$6 },
+    { name: 'grid_on_fill', component: GridOnFillIcon, category: category$6 },
+    { name: 'view_list', component: ViewListIcon, category: category$6 },
+    { name: 'view_list_fill', component: ViewListFillIcon, category: category$6 },
+    { name: 'widget_small', component: WidgetSmallIcon, category: category$6 },
+    { name: 'widget_small_fill', component: WidgetSmallFillIcon, category: category$6 },
+    { name: 'lock', component: LockIcon, category: category$6 },
+    { name: 'lock_fill', component: LockFillIcon, category: category$6 },
+    { name: 'lock_open', component: LockOpenIcon, category: category$6 },
+    { name: 'lock_open_fill', component: LockOpenFillIcon, category: category$6 },
+    { name: 'public', component: PublicIcon, category: category$6 },
+    { name: 'vpn_lock', component: VpnLockIcon, category: category$6 },
+    { name: 'hourglass', component: HourglassIcon, category: category$6 },
+    { name: 'hourglass_bottom', component: HourglassBottomIcon, category: category$6 },
+    { name: 'hourglass_top', component: HourglassTopIcon, category: category$6 },
+    { name: 'schedule', component: ScheduleIcon, category: category$6 },
+    { name: 'schedule_fill', component: ScheduleFillIcon, category: category$6 },
+    { name: 'timer', component: TimerIcon, category: category$6 },
+    { name: 'timer_fill', component: TimerFillIcon, category: category$6 },
+    { name: 'checklist', component: ChecklistIcon, category: category$6 },
+    { name: 'check_box_fill', component: CheckBoxFillIcon, category: category$6 },
+    { name: 'check_box', component: CheckBoxIcon, category: category$6 },
+    { name: 'check_box_outline_blank', component: CheckBoxOutlineBlankIcon, category: category$6 },
+    { name: 'account_balance', component: AccountBalanceIcon, category: category$6 },
+    { name: 'account_balance_fill', component: AccountBalanceFillIcon, category: category$6 },
+    { name: 'progress_activity', component: ProgressActivityIcon, category: category$6 },
+    { name: 'bar_chart', component: BarChartIcon, category: category$6 },
+    { name: 'show_chart', component: ShowChartIcon, category: category$6 },
+    { name: 'pie_chart', component: PieChartIcon, category: category$6 },
+    { name: 'pie_chart_fill', component: PieChartFillIcon, category: category$6 },
+    { name: 'table', component: TableIcon, category: category$6 },
+    { name: 'table_fill', component: TableFillIcon, category: category$6 },
 ];
 
 const HomeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M229-189h124v-258h254v258h124v-377L480-754 229-565.67V-189Zm-94 94v-518l345-259 346 259v518H524v-269h-88v269H135Zm345-377Z"/></svg>`;
@@ -451,30 +478,30 @@ const TourIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
 
 const TourFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M187-55v-851h94v78h611l-96 225 96 225H281v323h-94Zm322.21-476Q539-531 560-552.21t21-51Q581-633 559.79-654t-51-21Q479-675 458-653.79t-21 51Q437-573 458.21-552t51 21Z"/></svg>`;
 
-const category$4 = 'Navigation';
-const icons$5 = [
-    { name: 'home', component: HomeIcon, category: category$4 },
-    { name: 'menu', component: MenuIcon, category: category$4 },
-    { name: 'home_fill', component: HomeFillIcon, category: category$4 },
-    { name: 'link', component: LinkIcon, category: category$4 },
-    { name: 'location_searching', component: LocationSearchingIcon, category: category$4 },
-    { name: 'explore_fill', component: ExploreFillIcon, category: category$4 },
-    { name: 'explore', component: ExploreIcon, category: category$4 },
-    { name: 'location_on_fill', component: LocationOnFillIcon, category: category$4 },
-    { name: 'location_on', component: LocationOnIcon, category: category$4 },
-    { name: 'my_location_fill', component: MyLocationFillIcon, category: category$4 },
-    { name: 'my_location', component: MyLocationIcon, category: category$4 },
-    { name: 'ungroup', component: UngroupIcon, category: category$4 },
-    { name: 'open_in_new', component: OpenInNewIcon, category: category$4 },
-    { name: 'more_vert', component: MoreVertIcon, category: category$4 },
-    { name: 'more_horiz', component: MoreHorizIcon, category: category$4 },
-    { name: 'pending', component: PendingIcon, category: category$4 },
-    { name: 'map', component: MapIcon, category: category$4 },
-    { name: 'map_fill', component: MapFillIcon, category: category$4 },
-    { name: 'map_search', component: MapSearchIcon, category: category$4 },
-    { name: 'map_search_fill', component: MapSearchFillIcon, category: category$4 },
-    { name: 'tour', component: TourIcon, category: category$4 },
-    { name: 'tour_fill', component: TourFillIcon, category: category$4 },
+const category$5 = 'Navigation';
+const icons$6 = [
+    { name: 'home', component: HomeIcon, category: category$5 },
+    { name: 'menu', component: MenuIcon, category: category$5 },
+    { name: 'home_fill', component: HomeFillIcon, category: category$5 },
+    { name: 'link', component: LinkIcon, category: category$5 },
+    { name: 'location_searching', component: LocationSearchingIcon, category: category$5 },
+    { name: 'explore_fill', component: ExploreFillIcon, category: category$5 },
+    { name: 'explore', component: ExploreIcon, category: category$5 },
+    { name: 'location_on_fill', component: LocationOnFillIcon, category: category$5 },
+    { name: 'location_on', component: LocationOnIcon, category: category$5 },
+    { name: 'my_location_fill', component: MyLocationFillIcon, category: category$5 },
+    { name: 'my_location', component: MyLocationIcon, category: category$5 },
+    { name: 'ungroup', component: UngroupIcon, category: category$5 },
+    { name: 'open_in_new', component: OpenInNewIcon, category: category$5 },
+    { name: 'more_vert', component: MoreVertIcon, category: category$5 },
+    { name: 'more_horiz', component: MoreHorizIcon, category: category$5 },
+    { name: 'pending', component: PendingIcon, category: category$5 },
+    { name: 'map', component: MapIcon, category: category$5 },
+    { name: 'map_fill', component: MapFillIcon, category: category$5 },
+    { name: 'map_search', component: MapSearchIcon, category: category$5 },
+    { name: 'map_search_fill', component: MapSearchFillIcon, category: category$5 },
+    { name: 'tour', component: TourIcon, category: category$5 },
+    { name: 'tour_fill', component: TourFillIcon, category: category$5 },
 ];
 
 const FavoriteIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m479-87-58-52Q312.23-239.12 241.62-311.56 171-384 129-441.5t-58.5-105Q54-594 54-643.1q0-101.22 67.66-169.06T289-880q56.29 0 104.14 24Q441-832 479-785q44-50 90.03-72.5Q615.07-880 669-880q101.38 0 169.19 67.87T906-643q0 48.97-16.5 95.99Q873-500 831-442.5 789-385 718.02-311.95 647.03-238.9 538-139l-59 52Zm-.5-124q100.74-93 165.12-158Q708-434 745.5-482.5t52-86.28q14.5-37.79 14.5-74.05 0-62.17-39.86-102.67T669.71-786q-49.01 0-91.36 32T509-666h-60q-25.75-56-68.93-88-43.18-32-91.13-32-61.21 0-100.58 39.86Q149-706.29 149-642.68q0 37.77 14.94 76.34t52.5 87.46Q254-430 317.5-365.5t161 154.5Zm2.5-288Z"/></svg>`;
@@ -535,37 +562,37 @@ const StarIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"
 
 const StarFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m196-68 75-324L19-610l332-28 129-306 129 306 332 28-252 218 76 324-285-173L196-68Z"/></svg>`;
 
-const category$3 = 'Notifications and expressions';
-const icons$4 = [
-    { name: 'favorite', component: FavoriteIcon, category: category$3 },
-    { name: 'favorite_fill', component: FavoriteFillIcon, category: category$3 },
-    { name: 'help', component: HelpIcon, category: category$3 },
-    { name: 'help_fill', component: HelpFillIcon, category: category$3 },
-    { name: 'info', component: InfoIcon, category: category$3 },
-    { name: 'info_fill', component: InfoFillIcon, category: category$3 },
-    { name: 'warning', component: WarningIcon, category: category$3 },
-    { name: 'warning_fill', component: WarningFillIcon, category: category$3 },
-    { name: 'check', component: CheckIcon, category: category$3 },
-    { name: 'check_circle', component: CheckCircleIcon, category: category$3 },
-    { name: 'check_circle_fill', component: CheckCircleFillIcon, category: category$3 },
-    { name: 'notifications', component: NotificationsIcon, category: category$3 },
-    { name: 'notifications_fill', component: NotificationsFillIcon, category: category$3 },
-    { name: 'notifications_off', component: NotificationsOffIcon, category: category$3 },
-    { name: 'notifications_off_fill', component: NotificationsOffFillIcon, category: category$3 },
-    { name: 'notifications_unread', component: NotificationsUnreadIcon, category: category$3 },
-    { name: 'notifications_unread_fill', component: NotificationsUnreadFillIcon, category: category$3 },
-    { name: 'notifications_active', component: NotificationsActiveIcon, category: category$3 },
-    { name: 'notifications_active_fill', component: NotificationsActiveFillIcon, category: category$3 },
-    { name: 'sentiment_satisfied', component: SentimentSatisfiedIcon, category: category$3 },
-    { name: 'sentiment_satisfied_fill', component: SentimentSatisfiedFillIcon, category: category$3 },
-    { name: 'sentiment_neutral', component: SentimentNeutralIcon, category: category$3 },
-    { name: 'sentiment_neutral_fill', component: SentimentNeutralFillIcon, category: category$3 },
-    { name: 'sentiment_dissatisfied', component: SentimentDissatisfiedIcon, category: category$3 },
-    { name: 'sentiment_dissatisfied_fill', component: SentimentDissatisfiedFillIcon, category: category$3 },
-    { name: 'smart_toy', component: SmartToyIcon, category: category$3 },
-    { name: 'smart_toy_fill', component: SmartToyFillIcon, category: category$3 },
-    { name: 'star', component: StarIcon, category: category$3 },
-    { name: 'star_fill', component: StarFillIcon, category: category$3 },
+const category$4 = 'Notifications and expressions';
+const icons$5 = [
+    { name: 'favorite', component: FavoriteIcon, category: category$4 },
+    { name: 'favorite_fill', component: FavoriteFillIcon, category: category$4 },
+    { name: 'help', component: HelpIcon, category: category$4 },
+    { name: 'help_fill', component: HelpFillIcon, category: category$4 },
+    { name: 'info', component: InfoIcon, category: category$4 },
+    { name: 'info_fill', component: InfoFillIcon, category: category$4 },
+    { name: 'warning', component: WarningIcon, category: category$4 },
+    { name: 'warning_fill', component: WarningFillIcon, category: category$4 },
+    { name: 'check', component: CheckIcon, category: category$4 },
+    { name: 'check_circle', component: CheckCircleIcon, category: category$4 },
+    { name: 'check_circle_fill', component: CheckCircleFillIcon, category: category$4 },
+    { name: 'notifications', component: NotificationsIcon, category: category$4 },
+    { name: 'notifications_fill', component: NotificationsFillIcon, category: category$4 },
+    { name: 'notifications_off', component: NotificationsOffIcon, category: category$4 },
+    { name: 'notifications_off_fill', component: NotificationsOffFillIcon, category: category$4 },
+    { name: 'notifications_unread', component: NotificationsUnreadIcon, category: category$4 },
+    { name: 'notifications_unread_fill', component: NotificationsUnreadFillIcon, category: category$4 },
+    { name: 'notifications_active', component: NotificationsActiveIcon, category: category$4 },
+    { name: 'notifications_active_fill', component: NotificationsActiveFillIcon, category: category$4 },
+    { name: 'sentiment_satisfied', component: SentimentSatisfiedIcon, category: category$4 },
+    { name: 'sentiment_satisfied_fill', component: SentimentSatisfiedFillIcon, category: category$4 },
+    { name: 'sentiment_neutral', component: SentimentNeutralIcon, category: category$4 },
+    { name: 'sentiment_neutral_fill', component: SentimentNeutralFillIcon, category: category$4 },
+    { name: 'sentiment_dissatisfied', component: SentimentDissatisfiedIcon, category: category$4 },
+    { name: 'sentiment_dissatisfied_fill', component: SentimentDissatisfiedFillIcon, category: category$4 },
+    { name: 'smart_toy', component: SmartToyIcon, category: category$4 },
+    { name: 'smart_toy_fill', component: SmartToyFillIcon, category: category$4 },
+    { name: 'star', component: StarIcon, category: category$4 },
+    { name: 'star_fill', component: StarFillIcon, category: category$4 },
 ];
 
 const PhotoCameraIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M479.26-261q75.74 0 126.24-50.26 50.5-50.27 50.5-126 0-74.74-50.26-125.24-50.27-50.5-126-50.5-74.74 0-125.24 50.26-50.5 50.27-50.5 125 0 75.74 50.26 126.24 50.27 50.5 125 50.5Zm.24-80q-41.5 0-68.5-27.5t-27-69q0-41.5 27-69t68.5-27.5q41.5 0 69.5 27.5t28 69q0 41.5-28 69T479.5-341ZM55-95v-684h219l83-87h246l84 87h219v684H55Zm94-94h662v-495H647l-81-87H396l-85 87H149v495Zm331-248Z"/></svg>`;
@@ -614,6 +641,10 @@ const PlayArrowIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height
 
 const PlayArrowFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M295-157v-652l512 326-512 326Z"/></svg>`;
 
+const PlayCircleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m377-300 284-180-284-181v361ZM480.14-55Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Zm-.14-94q138 0 234.5-96.37T811-480q0-138-96.5-234.5t-235-96.5q-137.5 0-234 96.5t-96.5 235q0 137.5 96.37 234T480-149Zm0-331Z"/></svg>`;
+
+const PlayCircleFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m377-300 284-180-284-181v361ZM480.14-55Q392-55 314.51-88.08q-77.48-33.09-135.41-91.02-57.93-57.93-91.02-135.27Q55-391.72 55-479.86 55-569 88.08-646.49q33.09-77.48 90.86-134.97 57.77-57.48 135.19-91.01Q391.56-906 479.78-906q89.22 0 166.83 33.45 77.6 33.46 135.01 90.81t90.89 134.87Q906-569.34 906-480q0 88.28-33.53 165.75t-91.01 135.28q-57.49 57.8-134.83 90.89Q569.28-55 480.14-55Z"/></svg>`;
+
 const SkipPreviousIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M173-193v-574h94v574h-94Zm614 0L370-480l417-287v574Zm-94-287Zm0 108v-216L537-480l156 108Z"/></svg>`;
 
 const SkipPreviousFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M173-193v-574h94v574h-94Zm614 0L370-480l417-287v574Z"/></svg>`;
@@ -638,43 +669,92 @@ const PictureAsPdfIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" hei
 
 const PictureAsPdfFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M353-448h37v-83h62l23-24v-75l-23-23h-99v205Zm37-120v-48h48v48h-48Zm122 120h98l23-24v-158l-23-23h-98v205Zm37-37v-131h47v131h-47Zm129 37h37v-83h50v-37h-50v-48h50v-37h-87v205ZM192-192v-731h731v731H192ZM37-37v-731h95v636h636v95H37Z"/></svg>`;
 
-const category$2 = 'Media and devices';
+const category$3 = 'Media and devices';
+const icons$4 = [
+    { name: 'photo_camera', component: PhotoCameraIcon, category: category$3 },
+    { name: 'photo_camera_fill', component: PhotoCameraFillIcon, category: category$3 },
+    { name: 'chat', component: ChatIcon, category: category$3 },
+    { name: 'chat_fill', component: ChatFillIcon, category: category$3 },
+    { name: 'rss_feed', component: RSSFeedIcon, category: category$3 },
+    { name: 'description', component: DescriptionIcon, category: category$3 },
+    { name: 'image', component: ImageIcon, category: category$3 },
+    { name: 'image_fill', component: ImageFillIcon, category: category$3 },
+    { name: 'photo_library', component: PhotoLibraryIcon, category: category$3 },
+    { name: 'gallery_thumbnail', component: GalleryThumbnailIcon, category: category$3 },
+    { name: 'fiber_manual_record', component: FiberManualRecordIcon, category: category$3 },
+    { name: 'fiber_manual_record_fill', component: FiberManualRecordFillIcon, category: category$3 },
+    { name: 'pause', component: PauseIcon, category: category$3 },
+    { name: 'pause_fill', component: PauseFillIcon, category: category$3 },
+    { name: 'pause_circle', component: PauseCircleIcon, category: category$3 },
+    { name: 'pause_circle_fill', component: PauseCircleFillIcon, category: category$3 },
+    { name: 'stop_circle', component: StopCircleIcon, category: category$3 },
+    { name: 'stop_circle_fill', component: StopCircleFillIcon, category: category$3 },
+    { name: 'stop', component: StopIcon, category: category$3 },
+    { name: 'stop_fill', component: StopFillIcon, category: category$3 },
+    { name: 'play_pause', component: PlayPauseIcon, category: category$3 },
+    { name: 'play_arrow', component: PlayArrowIcon, category: category$3 },
+    { name: 'play_arrow_fill', component: PlayArrowFillIcon, category: category$3 },
+    { name: 'play_circle', component: PlayCircleIcon, category: category$3 },
+    { name: 'play_circle_fill', component: PlayCircleFillIcon, category: category$3 },
+    { name: 'skip_previous', component: SkipPreviousIcon, category: category$3 },
+    { name: 'skip_previous_fill', component: SkipPreviousFillIcon, category: category$3 },
+    { name: 'skip_next', component: SkipNextIcon, category: category$3 },
+    { name: 'skip_next_fill', component: SkipNextFillIcon, category: category$3 },
+    { name: 'fast_rewind', component: FastRewindIcon, category: category$3 },
+    { name: 'fast_rewind_fill', component: FastRewindFillIcon, category: category$3 },
+    { name: 'fast_forward', component: FastForwardIcon, category: category$3 },
+    { name: 'fast_forward_fill', component: FastForwardFillIcon, category: category$3 },
+    { name: 'call', component: CallIcon, category: category$3 },
+    { name: 'call_fill', component: CallFillIcon, category: category$3 },
+    { name: 'picture_as_pdf', component: PictureAsPdfIcon, category: category$3 },
+    { name: 'picture_as_pdf_fill', component: PictureAsPdfFillIcon, category: category$3 },
+];
+
+const FacebookIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3C21 9 21 15 21 21L15.644 21L15.6442 13.8804H18.079L18.4286 11.1643H15.6442V9.42857C15.6442 8.64107 15.8612 8.1067 16.9902 8.1067H18.4286V5.67991L18.0781 5.64435L17.7377 5.61862C17.3573 5.59334 16.8651 5.57143 16.3312 5.57143C14.258 5.57143 12.8357 6.83705 12.8357 9.16339V11.1683H10.3929V13.8844H12.8397L12.839 21C9.55933 21 6.27967 21 3 21V3.00003C9 2.99985 15 3 21 3Z" />
+</svg>
+`;
+
+const InstagramIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3C21 9 21 15 21 21C15.0002 21 8.99971 21.029 3 20.9942C3 14.9962 2.99997 8.99809 2.99997 3.00003C8.99998 3.00003 15 3 21 3ZM9.11255 5.04922C7.99442 5.10232 7.00123 5.35842 6.17981 6.17672C5.35839 6.99501 5.10541 7.9882 5.04919 9.10945L5.03066 9.54572C4.98433 10.9687 4.99051 13.8504 5.04919 14.8844C5.10228 16.0056 5.35839 16.9988 6.17981 17.8171C7.00123 18.6354 7.9913 18.8915 9.11255 18.9477L9.54881 18.9662C10.9718 19.0126 13.8535 19.0064 14.8874 18.9477C16.0087 18.8946 17.0019 18.6385 17.8202 17.8171C18.6385 16.9988 18.8946 16.0056 18.9508 14.8844L18.9693 14.4482C19.0157 13.0258 19.0095 10.1465 18.9508 9.11258C18.8977 7.99133 18.6416 6.99813 17.8202 6.17984C17.0019 5.36155 16.0087 5.10544 14.8874 5.04922L14.4512 5.03069C13.0282 4.98436 10.1465 4.99054 9.11255 5.04922ZM12.0016 6.26104L13.0197 6.25367C14.097 6.24927 15.454 6.27645 16.1274 6.54214C16.7395 6.78575 17.2112 7.25736 17.4579 7.87264C17.8233 8.794 17.739 10.9803 17.739 11.9985L17.7474 13.3166C17.7452 14.335 17.7015 15.5121 17.4579 16.1243C17.2143 16.7364 16.7427 17.2081 16.1274 17.4548C15.206 17.8202 13.0197 17.7359 12.0016 17.7359L10.9835 17.7433C9.90609 17.7477 8.54911 17.7205 7.87574 17.4548C7.26358 17.2112 6.79197 16.7396 6.54523 16.1243C6.17981 15.2029 6.26414 13.0166 6.26414 11.9985L6.25676 10.9804C6.25236 9.903 6.27954 8.54602 6.54523 7.87264C6.78884 7.26049 7.26046 6.78887 7.87574 6.54214C8.7971 6.17672 10.9834 6.26104 12.0016 6.26104ZM12.0016 8.40984C10.0152 8.40984 8.41294 10.0121 8.41294 11.9985C8.41294 13.9849 10.0152 15.5871 12.0016 15.5871C13.988 15.5871 15.5902 13.9849 15.5902 11.9985C15.5902 10.0121 13.988 8.40984 12.0016 8.40984ZM12.0016 9.66539C13.2883 9.66539 14.3346 10.7117 14.3346 11.9985C14.3346 13.2852 13.2852 14.3315 12.0016 14.3315C10.7179 14.3315 9.66849 13.2852 9.66849 11.9985C9.66849 10.7117 10.7148 9.66539 12.0016 9.66539ZM15.737 7.42602C15.2747 7.42602 14.8999 7.80081 14.8999 8.26305C14.8999 8.72529 15.2716 9.10008 15.737 9.10008C16.1992 9.10008 16.574 8.72842 16.574 8.26305C16.574 7.80081 16.1992 7.42602 15.737 7.42602Z" />
+</svg>
+`;
+
+const LinkedInIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3C15 3 9 2.99982 3 3.00006V21C9 21 15 21 21 21C21 15 21 9 21 3ZM5.77232 18.4286V9.83839H8.4442V18.4286H5.77232ZM5.55937 7.1183C5.55937 6.26652 6.25045 5.57143 7.10625 5.57143C7.95804 5.57143 8.65312 6.26652 8.65312 7.1183C8.65312 7.97411 7.96205 8.66518 7.10625 8.66518C6.25045 8.66518 5.55937 7.97009 5.55937 7.1183ZM15.7728 18.4286V14.25C15.7728 13.2536 15.7527 11.9719 14.3866 11.9719C12.9964 11.9719 12.7835 13.0567 12.7835 14.1777V18.4286H10.1156V9.83839H12.675V11.0116H12.7112C13.0688 10.3366 13.9406 9.62545 15.2384 9.62545C17.9384 9.62545 18.4406 11.4054 18.4406 13.7196V18.4286H15.7728Z" />
+</svg>
+`;
+
+const TikTokIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3C15 3 8.99998 2.99982 2.99998 3.00006C2.99999 9.00004 3.00007 15 2.99998 21C8.99999 21 15 21 21 21C21 15 21 9 21 3ZM17.1454 10.8527C17.0471 10.8623 16.9485 10.8673 16.8497 10.8677C15.7666 10.8679 14.7563 10.3219 14.163 9.41571V14.3601C14.163 16.3784 12.5269 18.0146 10.5086 18.0146C8.49029 18.0146 6.85414 16.3784 6.85414 14.3601C6.85414 12.3419 8.49029 10.7057 10.5086 10.7057C10.5849 10.7057 10.6594 10.7126 10.7344 10.7173V12.5181C10.6594 12.5091 10.5857 12.4954 10.5086 12.4954C9.47848 12.4954 8.64343 13.3305 8.64343 14.3606C8.64343 15.3907 9.47848 16.2257 10.5086 16.2257C11.5389 16.2257 12.4487 15.414 12.4487 14.3837L12.4667 5.98629H14.1896C14.352 7.53126 15.5978 8.73802 17.1471 8.85129V10.8527" />
+</svg>
+`;
+
+const XIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.00003 3.00002C3.00001 4.00002 3.00002 4.00002 3.00002 5.00002L3.00002 21C4.5 21 4.00002 21 5.00002 21L21 21C21 20 21 20 21 19L21 3.00003C20 2.99999 20 3.00002 19 3.00002H3.00003ZM16.9092 7.00001H15.2128L12.4175 10.1954L10.0005 7.00001H6.50002L10.6826 12.4692L6.71848 17H8.41591L11.4754 13.5041L14.1492 17H17.5631L13.2031 11.2359L16.9092 7.00001Z" />
+<path d="M14.6175 15.9846H15.5575L9.48976 7.96207H8.48104L14.6175 15.9846Z" />
+</svg>
+`;
+
+const YouTubeIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3.00002C21 8.3569 21 15.643 21 21.0001C15 20.9806 8.99999 21 3 21V3.00019C8.35684 2.99992 15.6429 3.00002 21 3.00002ZM12.4663 7.00165L11.7079 7.0004C10.7113 7.00644 7.45039 7.04509 6.52908 7.29244C5.92669 7.4538 5.45224 7.92917 5.29122 8.5328C5.06455 9.38044 5.01349 10.9415 5.00199 11.6018V12.2175C5.01349 12.8778 5.06455 14.4389 5.29122 15.2865C5.45224 15.8901 5.92669 16.3457 6.52908 16.5071C7.36319 16.731 10.115 16.7839 11.368 16.7964H12.6307C13.8837 16.7839 16.6355 16.731 17.4696 16.5071C18.072 16.3457 18.5464 15.8901 18.7074 15.2865C18.8713 14.6738 18.9434 13.6884 18.9751 12.9398L18.9995 11.817C18.9958 11.3789 18.9649 9.49561 18.7074 8.5328C18.5464 7.92917 18.072 7.45378 17.4696 7.29244C16.5968 7.05811 13.6241 7.01109 12.4663 7.00165ZM10.5992 9.79955L14.0995 11.8998L10.5992 14V9.79955Z" />
+</svg>
+`;
+
+const BlueskyIcon = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 3H3V21H21V3ZM12 11.657C11.419 10.4553 9.83643 8.21532 8.36526 7.11048C7.30359 6.31365 5.58334 5.69707 5.58334 7.6594C5.58334 8.0514 5.80793 10.9517 5.94093 11.4225C6.39884 13.0599 8.06776 13.477 9.55293 13.2244C6.95709 13.666 6.29676 15.129 7.72301 16.5926C10.4296 19.3697 11.6134 15.9001 11.9183 15.0065L11.9189 15.0047L11.9201 15.0011C11.9747 14.8397 12 14.7649 12.0006 14.8297C12.0006 14.765 12.0268 14.8414 12.0823 15.0047L12.0829 15.0065C12.3877 15.9001 13.5716 19.3697 16.2782 16.5926C17.7038 15.129 17.0435 13.666 14.4483 13.2244C15.9328 13.477 17.6023 13.0593 18.0603 11.4225C18.1921 10.9517 18.4167 8.0514 18.4167 7.6594C18.4167 5.69707 16.6964 6.31365 15.6348 7.11106C14.1636 8.21531 12.581 10.4553 12 11.657Z" />
+</svg>
+`;
+
+const category$2 = 'Social media';
 const icons$3 = [
-    { name: 'photo_camera', component: PhotoCameraIcon, category: category$2 },
-    { name: 'photo_camera_fill', component: PhotoCameraFillIcon, category: category$2 },
-    { name: 'chat', component: ChatIcon, category: category$2 },
-    { name: 'chat_fill', component: ChatFillIcon, category: category$2 },
-    { name: 'rss_feed', component: RSSFeedIcon, category: category$2 },
-    { name: 'description', component: DescriptionIcon, category: category$2 },
-    { name: 'image', component: ImageIcon, category: category$2 },
-    { name: 'image_fill', component: ImageFillIcon, category: category$2 },
-    { name: 'photo_library', component: PhotoLibraryIcon, category: category$2 },
-    { name: 'gallery_thumbnail', component: GalleryThumbnailIcon, category: category$2 },
-    { name: 'fiber_manual_record', component: FiberManualRecordIcon, category: category$2 },
-    { name: 'fiber_manual_record_fill', component: FiberManualRecordFillIcon, category: category$2 },
-    { name: 'pause', component: PauseIcon, category: category$2 },
-    { name: 'pause_fill', component: PauseFillIcon, category: category$2 },
-    { name: 'pause_circle', component: PauseCircleIcon, category: category$2 },
-    { name: 'pause_circle_fill', component: PauseCircleFillIcon, category: category$2 },
-    { name: 'stop_circle', component: StopCircleIcon, category: category$2 },
-    { name: 'stop_circle_fill', component: StopCircleFillIcon, category: category$2 },
-    { name: 'stop', component: StopIcon, category: category$2 },
-    { name: 'stop_fill', component: StopFillIcon, category: category$2 },
-    { name: 'play_pause', component: PlayPauseIcon, category: category$2 },
-    { name: 'play_arrow', component: PlayArrowIcon, category: category$2 },
-    { name: 'play_arrow_fill', component: PlayArrowFillIcon, category: category$2 },
-    { name: 'skip_previous', component: SkipPreviousIcon, category: category$2 },
-    { name: 'skip_previous_fill', component: SkipPreviousFillIcon, category: category$2 },
-    { name: 'skip_next', component: SkipNextIcon, category: category$2 },
-    { name: 'skip_next_fill', component: SkipNextFillIcon, category: category$2 },
-    { name: 'fast_rewind', component: FastRewindIcon, category: category$2 },
-    { name: 'fast_rewind_fill', component: FastRewindFillIcon, category: category$2 },
-    { name: 'fast_forward', component: FastForwardIcon, category: category$2 },
-    { name: 'fast_forward_fill', component: FastForwardFillIcon, category: category$2 },
-    { name: 'call', component: CallIcon, category: category$2 },
-    { name: 'call_fill', component: CallFillIcon, category: category$2 },
-    { name: 'picture_as_pdf', component: PictureAsPdfIcon, category: category$2 },
-    { name: 'picture_as_pdf_fill', component: PictureAsPdfFillIcon, category: category$2 },
+    { name: 'facebook', component: FacebookIcon, category: category$2 },
+    { name: 'instagram', component: InstagramIcon, category: category$2 },
+    { name: 'linkedin', component: LinkedInIcon, category: category$2 },
+    { name: 'tiktok', component: TikTokIcon, category: category$2 },
+    { name: 'x', component: XIcon, category: category$2 },
+    { name: 'youtube', component: YouTubeIcon, category: category$2 },
+    { name: 'bluesky', component: BlueskyIcon, category: category$2 },
 ];
 
 const FormatQuoteIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m209-217 102-174q-5 1-11 1.5t-11 .5q-68-6-112.5-55.5T132-560q0-73.35 50.82-123.67Q233.65-734 307-734q72 0 122.5 50.33Q480-633.35 480-560q0 21.37-5.25 41.87Q469.5-497.63 460-480L309-217H209Zm388 0 101-174q-5 1-11 1.5t-11 .5q-68-6-112-55.5T520-560q0-73.35 50.33-123.67Q620.65-734 694-734q72 0 123 50.33 51 50.32 51 123.67 0 21.37-5.25 41.87Q857.5-497.63 848-480L696-217h-99ZM306.26-489q29.74 0 50.24-20.59 20.5-20.59 20.5-50T356.65-610q-20.35-21-49.41-21-30.24 0-50.74 20.59-20.5 20.59-20.5 50T256.26-510q20.27 21 50 21Zm387.03 0Q723-489 744-509.59t21-50Q765-589 744.36-610q-20.64-21-50.12-21-29.91 0-50.57 20.59-20.67 20.59-20.67 50T643.5-510q20.5 21 49.79 21Zm.71-71Zm-387 0Z"/></svg>`;
@@ -773,6 +853,7 @@ const icons$1 = [
 ];
 
 const icons = [
+    ...icons$a,
     ...icons$9,
     ...icons$8,
     ...icons$7,
@@ -784,7 +865,13 @@ const icons = [
     ...icons$1,
 ];
 
-const dsIconCss = ":host{display:inline}";
+function remToPx(remString) {
+    const rootFontSize = 16;
+    const rem = parseFloat(remString);
+    return `${rem * rootFontSize}px`;
+}
+
+const dsIconCss = ":host{display:flex}.ds-icon--container{display:flex}";
 const DsIconStyle0 = dsIconCss;
 
 const DsIcon = proxyCustomElement(class DsIcon extends H {
@@ -796,7 +883,7 @@ const DsIcon = proxyCustomElement(class DsIcon extends H {
     name;
     colour;
     size = '1.5rem';
-    title = 'Icon';
+    dsTitle = 'Icon';
     role = 'img';
     hidden = true;
     message = '';
@@ -825,7 +912,9 @@ const DsIcon = proxyCustomElement(class DsIcon extends H {
         const size = this.size || '1.5rem';
         const colour = this.getIconColour() || 'currentColor';
         const role = this.role || 'img';
-        const title = this.title || '';
+        const title = this.dsTitle || '';
+        svgElement.setAttribute('width', remToPx(size));
+        svgElement.setAttribute('height', remToPx(size));
         svgElement.setAttribute('style', `fill: ${colour}; width: ${size}; height: ${size};`);
         svgElement.setAttribute('role', role);
         const titleText = title || 'Icon';
@@ -837,14 +926,14 @@ const DsIcon = proxyCustomElement(class DsIcon extends H {
         }
     }
     render() {
-        return (h(Fragment, { key: '8d8a1304c6293c49ecc830ec02227dff9852b8c5' }, h("span", { key: '83f992b6b58f24398fa84e0fe62a62e60ea72e1b', class: "icon-container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: 'cc6f636f46e631b82570aaa156bbced5e7c23fc6' }, h("span", { key: 'c3305714b164807c119ff1e9ab4d9496dd3eb105', class: 'ds-icon--container', innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get style() { return DsIconStyle0; }
 }, [1, "ds-icon", {
         "name": [1],
         "colour": [1],
         "size": [1],
-        "title": [1],
+        "dsTitle": [1, "title"],
         "role": [1],
         "hidden": [4],
         "message": [32]