@astryxdesign/cli 0.7.12 → 0.7.13-canary.a5ad1f2

package/assets/icons/definitions/alignTop.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'alignTop',
+  description: 'Align items to the top edge.',
+  words: ['top align', 'align start vertical'],
+};

package/assets/icons/definitions/angle.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'angle',
+  description: 'An angle, such as the rotation of an item.',
+  words: ['rotation', 'degrees', 'triangle'],
+};

package/assets/icons/definitions/cloud.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'cloud',
+  description: 'Cloud storage, a hosted service, or weather.',
+  words: ['storage', 'hosted', 'sync'],
+};

package/assets/icons/definitions/collection.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'collection',
+  description: 'A series or stack of related items.',
+  words: ['series', 'stack', 'set of items'],
+};

package/assets/icons/definitions/contrast.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'contrast',
+  description: 'Contrast, or a two-tone effect on an image.',
+  words: ['duotone', 'two tone', 'half circle'],
+};

package/assets/icons/definitions/cornerRadius.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'cornerRadius',
+  description: 'How round the corners of an item are.',
+  words: ['radius', 'rounded corners', 'border radius'],
+};

package/assets/icons/definitions/cut.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'cut',
+  description: 'Cut a selection so you can paste it somewhere else.',
+  words: ['scissors', 'cut out', 'clip'],
+};

package/assets/icons/definitions/fingerprint.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'fingerprint',
+  description: 'A passkey, biometric sign-in, or unique identity.',
+  words: ['passkey', 'biometric', 'touch id'],
+};

package/assets/icons/definitions/fire.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'fire',
+  description: 'Something popular, trending, or hot.',
+  words: ['trending', 'hot', 'popular', 'flame'],
+};

package/assets/icons/definitions/frame.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'frame',
+  description: 'A frame that holds other layers on a canvas.',
+  words: ['artboard', 'canvas frame', 'container'],
+};

package/assets/icons/definitions/gift.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'gift',
+  description: 'A gift, gift card, or reward.',
+  words: ['present', 'reward', 'gift card'],
+};

package/assets/icons/definitions/group.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'group',
+  description: 'Group selected items together.',
+  words: ['group layers', 'combine', 'bundle'],
+};

package/assets/icons/definitions/integration.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'integration',
+  description: 'A connected app, plugin, or extension.',
+  words: ['plugin', 'extension', 'add-on', 'connected app'],
+};

package/assets/icons/definitions/lowercase.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'lowercase',
+  description: 'Make text all small letters.',
+  words: ['lower case', 'small letters'],
+};

package/assets/icons/definitions/paddingHorizontal.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'paddingHorizontal',
+  description: 'Space on the left and right sides inside an item.',
+  words: ['horizontal padding', 'inline padding'],
+};

package/assets/icons/definitions/paddingPerSide.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'paddingPerSide',
+  description: 'Set the space inside an item one side at a time.',
+  words: ['padding per side', 'individual padding'],
+};

package/assets/icons/definitions/paddingVertical.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'paddingVertical',
+  description: 'Space on the top and bottom sides inside an item.',
+  words: ['vertical padding', 'block padding'],
+};

package/assets/icons/definitions/panelBottom.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'panelBottom',
+  description: 'Show or hide a panel at the bottom edge.',
+  words: ['bottom panel', 'toolbar', 'dock'],
+};

package/assets/icons/definitions/photoEffect.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'photoEffect',
+  description: 'An effect on a photo, such as grain or a lens look.',
+  words: ['aperture', 'lens', 'grain', 'camera effect'],
+};

package/assets/icons/definitions/radiusPerCorner.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'radiusPerCorner',
+  description: 'Set the roundness of each corner on its own.',
+  words: ['radius per corner', 'individual corners'],
+};

package/assets/icons/definitions/rotateCounterclockwise.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'rotateCounterclockwise',
+  description: 'Rotate to the left, against the clock.',
+  words: ['rotate left', 'counterclockwise', 'anticlockwise'],
+};

package/assets/icons/definitions/tablet.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'tablet',
+  description: 'A tablet device, or a tablet-sized view.',
+  words: ['ipad', 'device', 'tablet view'],
+};

package/assets/icons/definitions/text.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'text',
+  description: 'Text content, such as a text layer or a text field.',
+  words: ['type', 'typography', 'text layer'],
+};

package/assets/icons/definitions/textRegular.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'textRegular',
+  description: 'Plain upright text, the regular style beside italic.',
+  words: ['regular', 'normal text', 'not italic'],
+};

package/assets/icons/definitions/transfer.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'transfer',
+  description: 'Move money or items between two places.',
+  words: ['exchange', 'swap', 'payment processor'],
+};

package/assets/icons/definitions/uppercase.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'uppercase',
+  description: 'Make text all capital letters.',
+  words: ['caps', 'all caps', 'upper case'],
+};

package/assets/icons/definitions/userRemove.doc.mjs

@@ -0,0 +1,9 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').IconDefinitionDoc} */
+export default {
+  type: 'icon-definition',
+  name: 'userRemove',
+  description: 'Remove a person from a group, chat, or team.',
+  words: ['remove person', 'user minus', 'kick'],
+};

package/assets/templates/blocks/components/BaseTypeahead/BaseTypeaheadMenu.doc.mjs

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'BaseTypeahead',
+  name: 'BaseTypeahead — Menu',
+  displayName: 'BaseTypeahead — Menu',
+  description:
+    "A filter field built on BaseTypeahead's `menu`. The listbox role puts a heading and a key hint around the result list, and keeps every action a result. Picking a field switches the same menu to a dialog role that edits the value; `handleRef.open()` reopens it from a filter button, and Escape returns focus to that button.",
+  isReady: true,
+  isShowcase: false,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'BaseTypeahead',
+    'Button',
+    'Icon',
+    'Layout',
+    'RadioList',
+    'Text',
+  ],
+  icons: {FunnelIcon: 'funnel'},
+};

package/assets/templates/blocks/components/BaseTypeahead/BaseTypeaheadMenu.tsx

@@ -0,0 +1,199 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useRef, useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {BaseTypeahead, createStaticSource} from '@astryxdesign/core/Typeahead';
+import type {
+  BaseTypeaheadHandle,
+  BaseTypeaheadMenu,
+  SearchableItem,
+} from '@astryxdesign/core/Typeahead';
+import {Button} from '@astryxdesign/core/Button';
+import {Icon} from '@astryxdesign/core/Icon';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
+import {Text} from '@astryxdesign/core/Text';
+import {
+  borderVars,
+  colorVars,
+  focusVars,
+  radiusVars,
+  spacingVars,
+} from '@astryxdesign/core/theme/tokens.stylex';
+import {FunnelIcon} from '@heroicons/react/24/outline';
+
+type Field = SearchableItem & {values: string[]};
+
+const fields: Field[] = [
+  {id: 'status', label: 'Status', values: ['Open', 'In review', 'Closed']},
+  {id: 'priority', label: 'Priority', values: ['High', 'Medium', 'Low']},
+  {id: 'owner', label: 'Owner', values: ['Me', 'My team', 'Anyone']},
+];
+
+const source = createStaticSource<Field>(fields);
+
+type Filter = {field: Field; value: string};
+
+const styles = stylex.create({
+  root: {
+    width: '100%',
+    maxWidth: 420,
+  },
+  // The ring follows the field's own input; the menu's dialog renders inside
+  // this box and holds inputs of its own.
+  field: {
+    backgroundColor: colorVars['--color-background-surface'],
+    borderColor: colorVars['--color-border'],
+    borderRadius: radiusVars['--radius-element'],
+    borderStyle: 'solid',
+    borderWidth: borderVars['--border-width'],
+    paddingBlock: spacingVars['--spacing-1-5'],
+    paddingInline: spacingVars['--spacing-2'],
+    outlineColor: {
+      default: 'transparent',
+      ':has(> input:focus-visible)': focusVars['--focus-outline-color'],
+    },
+    outlineOffset: focusVars['--focus-outline-offset'],
+    outlineStyle: 'solid',
+    outlineWidth: {
+      default: '0',
+      ':has(> input:focus-visible)': focusVars['--focus-outline-width'],
+    },
+  },
+  menuNote: {
+    paddingBlock: spacingVars['--spacing-1'],
+    paddingInline: spacingVars['--spacing-3'],
+  },
+  editor: {
+    padding: spacingVars['--spacing-3'],
+    minWidth: 260,
+  },
+});
+
+/**
+ * A filter field built on BaseTypeahead's `menu`. Typing lists the fields
+ * with a heading and a key hint around the list. Picking a field switches the
+ * same menu to a dialog that edits its value; a filter's button reopens that
+ * dialog, and Escape returns focus to the button.
+ */
+export default function BaseTypeaheadMenu() {
+  const fieldRef = useRef<HTMLDivElement>(null);
+  const typeahead = useRef<BaseTypeaheadHandle>(null);
+  const [filters, setFilters] = useState<Filter[]>([]);
+  const [editing, setEditing] = useState<Filter | null>(null);
+  const [draft, setDraft] = useState('');
+
+  const edit = (filter: Filter) => {
+    setEditing(filter);
+    setDraft(filter.value);
+    typeahead.current?.open();
+  };
+
+  const menu: BaseTypeaheadMenu =
+    editing == null
+      ? {
+          role: 'listbox',
+          render: ({listbox, query}) => (
+            <>
+              <Text
+                type="supporting"
+                color="secondary"
+                xstyle={styles.menuNote}>
+                {query === '' ? 'Filter by' : `Fields matching “${query}”`}
+              </Text>
+              {listbox}
+              <Text
+                type="supporting"
+                color="secondary"
+                xstyle={styles.menuNote}>
+                Arrow keys move, Enter picks
+              </Text>
+            </>
+          ),
+        }
+      : {
+          role: 'dialog',
+          label: `${editing.field.label} filter`,
+          render: ({close}) => (
+            <VStack gap={3} xstyle={styles.editor}>
+              <RadioList
+                label={editing.field.label}
+                value={draft}
+                onChange={setDraft}>
+                {editing.field.values.map(value => (
+                  <RadioListItem key={value} label={value} value={value} />
+                ))}
+              </RadioList>
+              <HStack gap={2} hAlign="end">
+                <Button label="Cancel" variant="secondary" onClick={close} />
+                <Button
+                  label="Apply"
+                  variant="primary"
+                  onClick={() => {
+                    const next = {field: editing.field, value: draft};
+                    setFilters(current => [
+                      ...current.filter(f => f.field.id !== next.field.id),
+                      next,
+                    ]);
+                    close();
+                  }}
+                />
+              </HStack>
+            </VStack>
+          ),
+        };
+
+  return (
+    <VStack gap={3} xstyle={styles.root}>
+      <HStack ref={fieldRef} gap={2} vAlign="center" xstyle={styles.field}>
+        <Icon icon={FunnelIcon} size="sm" color="secondary" />
+        <BaseTypeahead<Field>
+          aria-label="Add a filter"
+          searchSource={source}
+          value={null}
+          onChange={field => {
+            if (field != null) {
+              // A field that already has a filter opens on its applied value.
+              edit(
+                filters.find(filter => filter.field.id === field.id) ?? {
+                  field,
+                  value: field.values[0],
+                },
+              );
+            }
+          }}
+          onOpenChange={isOpen => {
+            if (!isOpen) {
+              setEditing(null);
+            }
+          }}
+          handleRef={typeahead}
+          menu={menu}
+          anchorRef={fieldRef}
+          placeholder="Add a filter…"
+          hasEntriesOnFocus
+          debounceMs={0}
+        />
+      </HStack>
+      <HStack gap={2} wrap="wrap">
+        {filters.length === 0 ? (
+          <Text type="supporting" color="secondary">
+            No filters
+          </Text>
+        ) : (
+          filters.map(filter => (
+            <Button
+              key={filter.field.id}
+              label={`${filter.field.label}: ${filter.value}`}
+              variant="secondary"
+              size="sm"
+              onClick={() => edit(filter)}
+            />
+          ))
+        )}
+      </HStack>
+    </VStack>
+  );
+}

package/assets/templates/blocks/components/ButtonGroup/ButtonGroupShowcase.doc.mjs

@@ -14,5 +14,6 @@ export const doc = {
     ChevronDownIcon: 'chevronDown',
     ClipboardDocumentIcon: 'clipboard',
     ClipboardIcon: 'clipboard',
+    ScissorsIcon: 'cut',
   },
 };

package/assets/templates/blocks/components/ChatSystemMessage/ChatSystemMessageStatusUpdates.doc.mjs

@@ -6,9 +6,14 @@ export const doc = {
   exampleFor: 'ChatSystemMessage',
   name: 'ChatSystemMessage — Status Updates',
   displayName: 'ChatSystemMessage — Status Updates',
-  description: 'Realistic status messages in a conversation flow showing membership changes, timestamps, and resolution notices.',
+  description:
+    'Realistic status messages in a conversation flow showing membership changes, timestamps, and resolution notices.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['Chat', 'Icon'],
-  icons: {CheckCircleIcon: 'success', UserPlusIcon: 'userAdd'},
+  icons: {
+    CheckCircleIcon: 'success',
+    UserMinusIcon: 'userRemove',
+    UserPlusIcon: 'userAdd',
+  },
 };

package/assets/templates/pages/canvas-editor/template.doc.mjs

@@ -18,27 +18,47 @@ export const doc = {
   isReady: true,
   category: 'Tools - Canvas Editor',
   icons: {
+    Aperture: 'photoEffect',
+    ArrowDownToLine: 'alignBottom',
+    ArrowUpToLine: 'alignTop',
+    Baseline: 'textRegular',
+    CaseLower: 'lowercase',
     CaseSensitive: 'textCase',
+    CaseUpper: 'uppercase',
+    Contrast: 'contrast',
     Download: 'download',
     File: 'file',
     FlipHorizontal2: 'flipHorizontal',
     FlipVertical2: 'flipVertical',
+    FoldVertical: 'alignMiddle',
+    Frame: 'frame',
     Grip: 'drag',
+    Group: 'group',
     Image: 'image',
     Italic: 'italic',
     Lock: 'lock',
     LockOpen: 'unlock',
     Menu: 'menu',
     Minus: 'remove',
+    PanelBottom: 'panelBottom',
     PanelLeft: 'panelLeft',
+    PanelLeftRightDashed: 'paddingHorizontal',
     PanelRight: 'panelRight',
+    PanelTopBottomDashed: 'paddingVertical',
     Plus: 'add',
     Redo2: 'redo',
+    RotateCcw: 'rotateCounterclockwise',
     RotateCw: 'rotate',
+    Scan: 'cornerRadius',
+    SquareRoundCorner: 'radiusPerCorner',
+    SquareSquare: 'paddingPerSide',
     Strikethrough: 'strikethrough',
     TextAlignCenter: 'alignCenter',
     TextAlignEnd: 'alignEnd',
+    TextAlignJustify: 'alignJustify',
     TextAlignStart: 'alignStart',
+    TriangleRight: 'angle',
+    Type: 'text',
     Underline: 'underline',
     Undo2: 'undo',
     X: 'close',

package/assets/templates/pages/editor/template.doc.mjs

@@ -25,6 +25,7 @@ export const doc = {
     ComputerDesktopIcon: 'desktop',
     CursorArrowRaysIcon: 'click',
     DevicePhoneMobileIcon: 'mobile',
+    DeviceTabletIcon: 'tablet',
     DocumentTextIcon: 'document',
     EllipsisHorizontalIcon: 'moreHorizontal',
     EyeIcon: 'eye',

package/assets/templates/pages/form-wizard-vertical/template.doc.mjs

@@ -18,6 +18,7 @@ export const doc = {
     ExclamationTriangleIcon: 'warning',
     GlobeAltIcon: 'globe',
     LanguageIcon: 'language',
+    RectangleStackIcon: 'collection',
     TagIcon: 'tag',
     UserIcon: 'user',
   },

package/assets/templates/pages/settings-dialog/template.doc.mjs

@@ -21,6 +21,7 @@ export const doc = {
     ArrowDownTrayIcon: 'download',
     ArrowUturnLeftIcon: 'undo',
     AtSymbolIcon: 'mention',
+    Bars3BottomLeftIcon: 'panelLeft',
     Bars3Icon: 'menu',
     BeakerIcon: 'experiment',
     BellIcon: 'notification',
@@ -40,6 +41,7 @@ export const doc = {
     DocumentTextIcon: 'document',
     EnvelopeIcon: 'mail',
     EyeIcon: 'eye',
+    FingerPrintIcon: 'fingerprint',
     FolderIcon: 'folder',
     GlobeAltIcon: 'globe',
     HandRaisedIcon: 'raiseHand',
@@ -50,7 +52,9 @@ export const doc = {
     MagnifyingGlassIcon: 'search',
     MapPinIcon: 'location',
     MoonIcon: 'moon',
+    PaintBrushIcon: 'swatch',
     PencilSquareIcon: 'compose',
+    PuzzlePieceIcon: 'integration',
     QuestionMarkCircleIcon: 'info',
     ReceiptPercentIcon: 'discount',
     ShieldCheckIcon: 'shield',

package/assets/templates/pages/shell-top-nav/template.doc.mjs

@@ -20,7 +20,10 @@ export const doc = {
   category: 'Shell - Top Nav',
   icons: {
     BoltIcon: 'bolt',
+    CloudIcon: 'cloud',
     FaceSmileIcon: 'emoji',
+    FireIcon: 'fire',
+    GiftIcon: 'gift',
     GlobeAltIcon: 'globe',
     HomeModernIcon: 'home',
     MagnifyingGlassIcon: 'search',

package/assets/templates/pages/table-collapsible/template.doc.mjs

@@ -10,6 +10,7 @@ export const doc = {
   isReady: true,
   category: 'Table - Grouped',
   icons: {
+    ArrowsRightLeftIcon: 'transfer',
     BuildingLibraryIcon: 'bank',
     CreditCardIcon: 'creditCard',
     PresentationChartLineIcon: 'activity',