@hubspot/cms-component-library 0.3.2 → 0.3.4

package/components/componentLibrary/Accordion/AccordionItem/index.module.scss

@@ -18,3 +18,7 @@
 .accordionItem[open] :global(.accordionIconMinus) {
   display: block;
 }
+
+.accordionItem[open] :global(.accordionIconCaret) {
+  transform: rotate(180deg);
+}

package/components/componentLibrary/Accordion/AccordionTitle/ContentFields.tsx

@@ -18,6 +18,7 @@ const ContentFields = ({
         choices={[
           ['chevron', 'Chevron'],
           ['plus', 'Plus'],
+          ['caret', 'Caret'],
         ]}
         preset="expand_icon"
         required={false}

package/components/componentLibrary/Accordion/AccordionTitle/icons.tsx

@@ -57,3 +57,22 @@ export const MinusIcon = () => {
     </svg>
   );
 };
+
+export const CaretIcon = () => {
+  return (
+    <svg
+      className={cx(
+        styles.accordionIcon,
+        styles.accordionIconCaret,
+        'accordionIconCaret'
+      )}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      role="img"
+    >
+      <path d="M11.2445 16.5296C11.717 16.9121 12.4107 16.8859 12.8495 16.4471L17.6495 11.6471C17.9945 11.3021 18.0957 10.7884 17.9082 10.3384C17.7207 9.88836 17.2857 9.59961 16.802 9.59961H7.20195C6.7182 9.59961 6.27945 9.89211 6.09195 10.3421C5.90445 10.7921 6.00945 11.3059 6.35445 11.6471L11.1545 16.4471L11.2445 16.5296Z" />
+    </svg>
+  );
+};

package/components/componentLibrary/Accordion/AccordionTitle/index.module.scss

@@ -44,3 +44,7 @@
   height: 24px;
 }
 
+.accordionIconCaret {
+  width: 24px;
+  height: 24px;
+}

package/components/componentLibrary/Accordion/AccordionTitle/index.tsx

@@ -2,7 +2,7 @@ import styles from './index.module.scss';
 import ContentFields from './ContentFields.js';
 import cx from '../../utils/classname.js';
 import { AccordionTitleProps } from './types.js';
-import { ChevronIcon, PlusIcon, MinusIcon } from './icons.js';
+import { ChevronIcon, PlusIcon, MinusIcon, CaretIcon } from './icons.js';
 
 const AccordionTitleComponent = ({
   icon = 'chevron',
@@ -24,6 +24,8 @@ const AccordionTitleComponent = ({
       );
     }
 
+    if (icon === 'caret') return <CaretIcon />;
+
     return null;
   };
 

package/components/componentLibrary/Accordion/AccordionTitle/types.ts

@@ -1,4 +1,4 @@
-export type AccordionIconType = 'chevron' | 'plus';
+export type AccordionIconType = 'chevron' | 'plus' | 'caret';
 
 export type AccordionTitleProps = {
   icon?: AccordionIconType;

package/components/componentLibrary/Accordion/llm.txt

@@ -104,10 +104,10 @@ Accordion/
 **Props:**
 ```tsx
 {
-  icon?: 'chevron' | 'plus';       // Icon type (default: 'chevron')
-  className?: string;              // Additional CSS classes
-  style?: React.CSSProperties;     // Inline styles
-  children?: React.ReactNode;      // Title text content
+  icon?: 'chevron' | 'plus' | 'caret';  // Icon type (default: 'chevron')
+  className?: string;                   // Additional CSS classes
+  style?: React.CSSProperties;          // Inline styles
+  children?: React.ReactNode;           // Title text content
 }
 ```
 
@@ -243,7 +243,7 @@ Configurable props for title text and icon:
 
 **Fields:**
 - `title`: TextField for accordion title text
-- `icon`: ChoiceField for selecting icon type (chevron, plus)
+- `icon`: ChoiceField for selecting icon type (caret, chevron, plus)
 
 #### AccordionContent.ContentFields
 
@@ -397,6 +397,7 @@ The Accordion component uses CSS variables for theming and customization. Variab
 - `.accordionIconChevron`: Chevron-specific sizing (rotates 180° when open)
 - `.accordionIconPlus`: Plus icon (hidden when open)
 - `.accordionIconMinus`: Minus icon (shown when open)
+- `.accordionIconCaret`: Caret icon (rotates 180° when open)
 
 **AccordionContent (`AccordionContent/index.module.scss`):**
 - `.accordionContent`: Content area with padding and typography
@@ -420,7 +421,7 @@ The Accordion component follows accessibility best practices:
 
 ## Best Practices
 
-- **Choose appropriate icons**: Use `chevron` for subtle indication, `plus` for clearer expand/collapse semantics (common in FAQs)
+- **Choose appropriate icons**: Use `caret` for a compact filled triangle indicator, `chevron` for subtle indication, `plus` for clearer expand/collapse semantics (common in FAQs)
 - **Consistent variants**: Apply the same variant to all items within an accordion for visual consistency
 - **Gap selection**: Use any valid CSS length value (e.g., '8px', '16px', '24px', '48px') for spacing between items
 - **Dynamic rendering**: Always provide unique `key` props when mapping arrays to AccordionItems

package/components/componentLibrary/Accordion/stories/Accordion.stories.tsx

@@ -106,6 +106,27 @@ export const IconOptions: Story = {
           </AccordionItem>
         </Accordion>
       </SBContainer>
+
+      <SBContainer addBackground>
+        <h4>Caret Icon</h4>
+        <Accordion gap="16px">
+          <AccordionItem>
+            <AccordionTitle icon="caret">Caret Icon</AccordionTitle>
+            <AccordionContent>
+              <p>
+                The caret icon provides a simple visual cue for the expanded
+                state.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionTitle icon="caret">Another caret item</AccordionTitle>
+            <AccordionContent>
+              <p>This is just some caret cake.</p>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </SBContainer>
     </SBContainer>
   ),
 };

package/components/componentLibrary/Card/StyleFields.tsx

@@ -1,35 +1,23 @@
-import { ChoiceField, NumberField } from '@hubspot/cms-components/fields';
+import { ChoiceField } from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
 const StyleFields = ({
   variantLabel = 'Card Variant',
   variantName = 'variant',
   variantDefault = 'elevated',
-  borderRadiusLabel = 'Border Radius',
-  borderRadiusName = 'borderRadius',
-  borderRadiusDefault = 8,
 }: StyleFieldsProps) => {
   return (
-    <>
-      <ChoiceField
-        label={variantLabel}
-        name={variantName}
-        required={true}
-        choices={[
-          ['elevated', 'Elevated (with shadow)'],
-          ['outlined', 'Outlined (with border)'],
-          ['filled', 'Filled (solid background)'],
-        ]}
-        default={variantDefault}
-      />
-      <NumberField
-        label={borderRadiusLabel}
-        name={borderRadiusName}
-        suffix="px"
-        min={0}
-        default={borderRadiusDefault}
-      />
-    </>
+    <ChoiceField
+      label={variantLabel}
+      name={variantName}
+      required={true}
+      choices={[
+        ['elevated', 'Elevated (with shadow)'],
+        ['outlined', 'Outlined (with border)'],
+        ['filled', 'Filled (solid background)'],
+      ]}
+      default={variantDefault}
+    />
   );
 };
 

package/components/componentLibrary/Card/llm.txt

@@ -56,15 +56,6 @@ import Card from '@hubspot/cms-component-library/Card';
 </Card>
 ```
 
-### Card with Custom Border Radius
-
-```tsx
-<Card variant="outlined" borderRadius={16}>
-  <h3>Rounded Card</h3>
-  <p>This card has a larger border radius for a softer appearance.</p>
-</Card>
-```
-
 ### Semantic Article Card
 
 ```tsx
@@ -96,7 +87,7 @@ const features = [
 ### Card with Rich Content
 
 ```tsx
-<Card variant="outlined" borderRadius={12}>
+<Card variant="outlined">
   <h3>Product Features</h3>
   <ul>
     <li>Real-time collaboration</li>
@@ -122,15 +113,11 @@ Configurable props for customizing field labels, names, and defaults:
   variantLabel="Card variant"
   variantName="variant"
   variantDefault="elevated"
-  borderRadiusLabel="Border radius"
-  borderRadiusName="borderRadius"
-  borderRadiusDefault={8}
 />
 ```
 
 **Fields:**
 - `variant`: ChoiceField for selecting visual style (elevated, outlined, filled)
-- `borderRadius`: NumberField for border radius in pixels (min: 0)
 
 ### Module Usage Example
 
@@ -141,7 +128,6 @@ export default function FeatureCardModule({ fieldValues }) {
   return (
     <Card
       variant={fieldValues.variant}
-      borderRadius={fieldValues.borderRadius}
       as="article"
     >
       <h3>{fieldValues.title}</h3>
@@ -187,7 +173,7 @@ The Card component follows accessibility best practices:
 ## Best Practices
 
 - **Choose semantic elements**: Use `as="article"` for self-contained content, `as="section"` for thematic groupings, and `as="div"` (default) for generic containers
-- **Border radius consistency**: Maintain consistent border radius values across your design system (typically 4px, 8px, 12px, or 16px)
+- **Border radius via theme settings**: Border radius is controlled by card shape settings in theme settings/variants, not an element-level field. Use the `borderRadius` prop only for programmatic overrides.
 - **Override CSS variables**: Customize appearance using CSS variables rather than overriding class styles
 - **Grid layouts**: Use CSS Grid or Flexbox for card layouts rather than relying on card margins
 - **Content flexibility**: Cards are content-agnostic containers; structure internal content using appropriate semantic elements

package/components/componentLibrary/Card/types.ts

@@ -15,7 +15,4 @@ export type StyleFieldsProps = {
   variantLabel?: string;
   variantName?: string;
   variantDefault?: CardVariant;
-  borderRadiusLabel?: string;
-  borderRadiusName?: string;
-  borderRadiusDefault?: number;
 };

package/components/componentLibrary/Divider/index.tsx

@@ -41,15 +41,13 @@ const DividerComponent = ({
   length = 100,
   thickness = 1,
   color,
-  variant = 'primary', // !todo: not used atm but keeping for when we need to add variant system.
   className = '',
   style = {},
 }: DividerProps) => {
-  const variantClass = styles[`hscl-divider-${variant}`];
   const orientationClass =
     orientation === 'horizontal' ? styles.horizontal : styles.vertical;
 
-  const defaultClasses = cx(styles.divider, variantClass, orientationClass);
+  const defaultClasses = cx(styles.divider, orientationClass);
   const combinedClasses = cx(defaultClasses, className);
 
   const cssVariables: CSSVariables = {

package/components/componentLibrary/Divider/llm.txt

@@ -44,7 +44,6 @@ Divider/
   length?: number;                                             // Length as percentage (1-100) of available space (default: 100)
   thickness?: number;                                          // Border thickness in pixels (default: 1)
   color?: { rgba?: string; color?: string; opacity?: number }; // Line color (from ColorField or rgba value)
-  variant?: 'primary' | 'secondary' | 'tertiary';             // Visual style variant (default: 'primary')
   className?: string;                                          // Additional CSS classes
   style?: React.CSSProperties;                                 // Inline styles (including CSS variables)
 }

package/components/componentLibrary/Divider/stories/Divider.stories.tsx

@@ -30,7 +30,6 @@ export const Default: Story = {
     length: 100,
     thickness: 1,
     spacing: '16px',
-    variant: 'primary',
   },
   render: args => (
     <SBContainer

package/components/componentLibrary/Divider/types.ts

@@ -23,7 +23,6 @@ export type DividerProps = {
   length?: number;
   thickness?: number;
   color?: ColorValue;
-  variant?: 'primary' | 'secondary' | 'tertiary';
   className?: string;
   style?: CSSVariables;
 };

package/components/componentLibrary/Icon/StyleFields.tsx

@@ -11,10 +11,10 @@ const StyleFields = ({
   iconBackgroundColorDefault = { color: '#2C2C2C', opacity: 100 },
   iconShapeLabel = 'Icon shape',
   iconShapeName = 'iconShape',
-  iconShapeDefault = '0px',
+  iconShapeDefault = 'square',
   iconSizeLabel = 'Icon size',
   iconSizeName = 'iconSize',
-  iconSizeDefault = '16',
+  iconSizeDefault = 'small',
 }: StyleFieldsProps) => {
   return (
     <>
@@ -23,6 +23,7 @@ const StyleFields = ({
           label={iconColorLabel}
           name={iconColorName}
           default={iconColorDefault}
+          required
           showOpacity={false}
         />
       )}
@@ -31,6 +32,7 @@ const StyleFields = ({
           label={iconBackgroundColorLabel}
           name={iconBackgroundColorName}
           default={iconBackgroundColorDefault}
+          required
           showOpacity={false}
         />
       )}
@@ -41,9 +43,9 @@ const StyleFields = ({
           display="buttons"
           preset="icon_shape"
           choices={[
-            ['0px', 'Square'],
-            ['8px', 'Rounded'],
-            ['100%', 'Circle'],
+            ['square', 'Square'],
+            ['rounded', 'Rounded'],
+            ['circle', 'Circle'],
           ]}
           default={iconShapeDefault}
           required={true}
@@ -54,9 +56,9 @@ const StyleFields = ({
           label={iconSizeLabel}
           name={iconSizeName}
           choices={[
-            ['16', 'Small (16x16 px)'],
-            ['24', 'Medium (24x24 px)'],
-            ['32', 'Large (32x32 px)'],
+            ['small', 'Small (16x16 px)'],
+            ['medium', 'Medium (24x24 px)'],
+            ['large', 'Large (32x32 px)'],
           ]}
           default={iconSizeDefault}
           required={true}

package/components/componentLibrary/Icon/index.module.scss

@@ -2,8 +2,19 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  fill: var(--hscl-icon-fill);
+  fill: var(--hscl-icon-fill, transparent);
   stroke: var(--hscl-icon-stroke);
-  width: var(--hscl-icon-size);
-  height: var(--hscl-icon-size);
+  width: var(--hscl-icon-size, 16px);
+  height: var(--hscl-icon-size, 16px);
+}
+
+.iconBackground {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: flex-start;
+  align-self: flex-start;
+  background-color: var(--hscl-iconBackground-backgroundColor, transparent);
+  padding: var(--hscl-iconBackground-padding, 12px);
+  border-radius: var(--hscl-iconBackground-shape, 0px);
 }

package/components/componentLibrary/Icon/index.tsx

@@ -6,36 +6,80 @@ import cx from '../utils/classname.js';
 import type { CSSVariables } from '../utils/types.js';
 import { IconProps } from './types.js';
 
+const ICON_SIZE_MAP: Record<string, number> = {
+  small: 16,
+  medium: 24,
+  large: 32,
+};
+
+const ICON_SHAPE_MAP: Record<string, string> = {
+  square: '0px',
+  rounded: '8px',
+  circle: '100%',
+};
+
 const IconComponent = ({
   fieldPath,
   showIcon = true,
-  size = 12,
+  size,
   className = '',
   style = {},
   purpose = 'DECORATIVE',
   title = '',
   fill,
+  showIconBackground = false,
+  iconBackgroundColor,
+  iconBackgroundPadding,
+  iconBackgroundShape,
 }: IconProps) => {
   if (!showIcon) return null;
 
-  const defaultClasses = styles.icon;
-  const combinedClasses = cx(defaultClasses, className);
+  const resolvedSize =
+    typeof size === 'string' ? ICON_SIZE_MAP[size] : undefined;
+  const resolvedShape = iconBackgroundShape
+    ? ICON_SHAPE_MAP[iconBackgroundShape] ?? iconBackgroundShape
+    : undefined;
 
   const cssVariables: CSSVariables = {
-    '--hscl-icon-size': `${size}px`,
+    ...(resolvedSize !== undefined && {
+      '--hscl-icon-size': `${resolvedSize}px`,
+    }),
     ...(fill && { '--hscl-icon-fill': fill }),
   };
 
-  return (
+  const defaultClasses = styles.icon;
+  const combinedClasses = cx(defaultClasses, className);
+
+  const icon = (
     <CMSIcon
       fieldPath={fieldPath}
-      height={size}
+      height={resolvedSize}
       className={combinedClasses}
       style={{ ...cssVariables, ...style }}
       purpose={purpose}
       title={title}
     />
   );
+
+  if (!showIconBackground) return icon;
+
+  const backgroundCssVariables: CSSVariables = {
+    ...(iconBackgroundColor && {
+      '--hscl-iconBackground-backgroundColor': iconBackgroundColor,
+    }),
+    ...(iconBackgroundPadding && {
+      '--hscl-iconBackground-padding': `${iconBackgroundPadding}px`,
+    }),
+    ...(resolvedShape && {
+      '--hscl-iconBackground-shape': resolvedShape,
+    }),
+  };
+
+  return (
+    <div className={styles.iconBackground} style={backgroundCssVariables}>
+      {icon}
+    </div>
+  );
 };
 
 type IconComponentType = typeof IconComponent & {

package/components/componentLibrary/Icon/llm.txt

@@ -9,7 +9,7 @@ import Icon from '@hubspot/cms-component-library/Icon';
 
 ## Purpose
 
-The Icon component wraps the native HubSpot CMS Icon component to provide a consistent interface for rendering icons with customizable styling and accessibility options. It simplifies icon usage in HubSpot CMS projects by handling common configuration patterns like sizing, color theming through CSS variables, and proper accessibility attributes (SEMANTIC vs DECORATIVE purpose).
+The Icon component wraps the native HubSpot CMS Icon component to provide a consistent interface for rendering icons with customizable styling and accessibility options. It simplifies icon usage in HubSpot CMS projects by handling common configuration patterns like sizing, color theming through CSS variables, optional background containers, and proper accessibility attributes (SEMANTIC vs DECORATIVE purpose).
 
 ## Component Structure
 
@@ -18,6 +18,7 @@ Icon/
 ├── index.tsx                     # Main component with render logic
 ├── types.ts                      # TypeScript type definitions
 ├── ContentFields.tsx             # HubSpot field definitions for icon content
+├── StyleFields.tsx               # HubSpot field definitions for icon styles
 ├── index.module.scss             # CSS module with design tokens
 └── stories/
     ├── Icon.stories.tsx          # Component usage examples
@@ -29,19 +30,23 @@ Icon/
 
 ### Icon (Main Component)
 
-**Purpose:** Renders an icon with configurable size, color, and accessibility properties.
+**Purpose:** Renders an icon with configurable size, color, background, and accessibility properties.
 
 **Props:**
 ```tsx
 {
   fieldPath?: string;                              // Path to icon in HubSpot fields
-  size?: number;                                   // Icon size in pixels, sets both width and height (default: 12)
+  size?: number | 'small' | 'medium' | 'large';   // Icon size — natural language or explicit px value. Omit to use CSS default (16px)
   fill?: string;                                   // Icon fill color (overrides CSS variable)
   className?: string;                              // Additional CSS classes
   style?: React.CSSProperties;                     // Inline styles (including CSS variables)
   showIcon?: boolean;                              // Toggle icon visibility (default: true)
   purpose?: 'SEMANTIC' | 'DECORATIVE';            // Icon accessibility role (default: 'DECORATIVE')
   title?: string;                                  // Icon title for screen readers (use with SEMANTIC)
+  showIconBackground?: boolean;                    // Renders a centered background div behind the icon (default: false)
+  iconBackgroundColor?: string;                    // Background div color (used when showIconBackground is true)
+  iconBackgroundPadding?: number;                  // Padding around the icon inside the background div in px (default: 12)
+  iconBackgroundShape?: 'square' | 'rounded' | 'circle' | string; // Background shape — natural language or raw CSS border-radius value
 }
 ```
 
@@ -89,6 +94,19 @@ import Icon from '@hubspot/cms-component-library/Icon';
 />
 ```
 
+### Icon with Background
+
+```tsx
+<Icon
+  fieldPath="icon"
+  size={24}
+  showIconBackground={true}
+  iconBackgroundColor="#2C2C2C"
+  iconBackgroundPadding={16}
+  iconBackgroundShape="circle"
+/>
+```
+
 ## HubSpot CMS Integration
 
 ### Field Definitions
@@ -115,9 +133,21 @@ Configurable props for icon selection and visibility:
 - `icon`: IconField for selecting the icon
 - `showIcon`: BooleanField toggle for icon visibility (optional, enabled with `addIconToggle={true}`)
 
-#### Style Fields
+#### StyleFields
 
-**Note:** There are no style fields included with this component. Do not try to import them.
+Configurable props for icon appearance:
+
+```tsx
+<Icon.StyleFields />
+```
+
+**Fields:**
+- `iconColor`: ColorField for the icon fill color
+- `iconBackgroundColor`: ColorField for the background div color
+- `iconShape`: ChoiceField for the background border-radius (`'square'`, `'rounded'`, `'circle'`)
+- `iconSize`: ChoiceField for icon size (`'small'` 16px, `'medium'` 24px, `'large'` 32px)
+
+All fields support `label`, `name`, and `default` customization props, and can be hidden via `hideFields`.
 
 ### Module Usage Example
 
@@ -128,8 +158,12 @@ export default function IconModule({ fieldValues }) {
   return (
     <Icon
       fieldPath="icon"
-      size={fieldValues.iconSize || 24}
+      size={fieldValues.style?.iconSize}
       showIcon={fieldValues.showIcon}
+      fill={fieldValues.style?.iconColor?.color}
+      showIconBackground={fieldValues.style?.showIconBackground}
+      iconBackgroundColor={fieldValues.style?.iconBackgroundColor?.color}
+      iconBackgroundShape={fieldValues.style?.iconShape}
       purpose="DECORATIVE"
     />
   );
@@ -139,14 +173,15 @@ export default function IconModule({ fieldValues }) {
 ### Module Fields Example
 
 ```tsx
-import { ModuleFields } from '@hubspot/cms-components/fields';
+import { ModuleFields, FieldGroup } from '@hubspot/cms-components/fields';
 import Icon from '@hubspot/cms-component-library/Icon';
 
 export const fields = (
   <ModuleFields>
-    <Icon.ContentFields
-      addIconToggle={true}
-    />
+    <Icon.ContentFields addIconToggle={true} />
+    <FieldGroup name="style" label="Style" tab="STYLE">
+      <Icon.StyleFields />
+    </FieldGroup>
   </ModuleFields>
 );
 ```
@@ -158,8 +193,13 @@ export const fields = (
 The Icon component uses CSS variables for theming and customization:
 
 **Base Styles:**
-- `--hscl-icon-fill`: Icon fill color (default: currentColor)
-- `--hscl-icon-size`: Icon width and height (set automatically from the `size` prop)
+- `--hscl-icon-fill`: Icon fill color (default: `transparent`)
+- `--hscl-icon-size`: Icon width and height (default: `16px`). Only set when `size` prop is provided — omitting `size` lets the CSS default apply.
+
+**Background Styles (applied when `showIconBackground` is true):**
+- `--hscl-iconBackground-backgroundColor`: Background div color
+- `--hscl-iconBackground-padding`: Padding around the icon inside the background div (default: 12px)
+- `--hscl-iconBackground-shape`: Border-radius of the background div (default: 0px)
 
 
 ## Accessibility
@@ -177,6 +217,6 @@ The Icon component follows accessibility best practices:
 - **Choose the right purpose**: Use `SEMANTIC` when the icon conveys important meaning, `DECORATIVE` when it's purely visual
 - **Always provide title with SEMANTIC**: When using `purpose="SEMANTIC"`, always include a meaningful `title` for screen readers
 - **Use CSS variables for theming**: Override `--hscl-icon-fill` for consistent color theming across your application
-- **Size appropriately**: Common sizes are 12px (small), 16px (default inline), 24px (medium), 32px (large), 48px (extra large)
+- **Use natural language sizes**: Pass `'small'` (16px), `'medium'` (24px), or `'large'` (32px) to `size`, or an explicit `number` in pixels. Omit `size` entirely to use the CSS default of `16px`.
 - **Field path**: The `fieldPath` prop should match the field name defined in ContentFields
-- **Style fields**: There are no style fields in this component. Do not try to import them.
+- **Background shape**: Pass `iconShape` field values (`'square'`, `'rounded'`, `'circle'`) directly to `iconBackgroundShape` — the component maps them to CSS values internally. Raw CSS border-radius strings are also accepted.

package/components/componentLibrary/Icon/stories/Icon.stories.tsx

@@ -25,18 +25,40 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     fieldPath: 'icon',
-    size: 24,
+    size: 'medium',
     showIcon: true,
     purpose: 'DECORATIVE',
   },
 };
 
+export const NamedSizes: Story = {
+  name: 'Named Sizes',
+  render: () => (
+    <SBContainer flex direction="row" gap="large" alignItems="center">
+      <SBContainer addBackground flex alignItems="center">
+        <h4>small (16px)</h4>
+        <Icon fieldPath="icon" size="small" />
+      </SBContainer>
+
+      <SBContainer addBackground flex alignItems="center">
+        <h4>medium (24px)</h4>
+        <Icon fieldPath="icon" size="medium" />
+      </SBContainer>
+
+      <SBContainer addBackground flex alignItems="center">
+        <h4>large (32px)</h4>
+        <Icon fieldPath="icon" size="large" />
+      </SBContainer>
+    </SBContainer>
+  ),
+};
+
 export const IconSizes: Story = {
-  name: 'Icon Sizes',
+  name: 'Icon Sizes (Explicit px)',
   render: () => (
     <SBContainer flex direction="row" gap="large" alignItems="center">
       <SBContainer addBackground flex alignItems="center">
-        <h4>12px (default)</h4>
+        <h4>12px</h4>
         <Icon fieldPath="icon" size={12} />
       </SBContainer>
 
@@ -68,7 +90,7 @@ export const Colors: Story = {
   render: () => (
     <SBContainer flex direction="row" gap="large" alignItems="center">
       <SBContainer addBackground flex alignItems="center">
-        <h4>Default (currentColor)</h4>
+        <h4>Default (transparent)</h4>
         <Icon fieldPath="icon" size={32} />
       </SBContainer>
 
@@ -102,3 +124,43 @@ export const Colors: Story = {
     </SBContainer>
   ),
 };
+
+export const BackgroundShapes: Story = {
+  name: 'Background Shapes',
+  render: () => (
+    <SBContainer flex direction="row" gap="large" alignItems="center">
+      <SBContainer addBackground flex alignItems="center">
+        <h4>square</h4>
+        <Icon
+          fieldPath="icon"
+          size="medium"
+          showIconBackground
+          iconBackgroundColor="#2C2C2C"
+          iconBackgroundShape="square"
+        />
+      </SBContainer>
+
+      <SBContainer addBackground flex alignItems="center">
+        <h4>rounded</h4>
+        <Icon
+          fieldPath="icon"
+          size="medium"
+          showIconBackground
+          iconBackgroundColor="#2C2C2C"
+          iconBackgroundShape="rounded"
+        />
+      </SBContainer>
+
+      <SBContainer addBackground flex alignItems="center">
+        <h4>circle</h4>
+        <Icon
+          fieldPath="icon"
+          size="medium"
+          showIconBackground
+          iconBackgroundColor="#2C2C2C"
+          iconBackgroundShape="circle"
+        />
+      </SBContainer>
+    </SBContainer>
+  ),
+};

package/components/componentLibrary/Icon/types.ts

@@ -8,15 +8,22 @@ type ColorFieldValue = typeof ColorFieldDefaults;
 
 export type IconPurpose = 'SEMANTIC' | 'DECORATIVE';
 
+export type IconSize = 'small' | 'medium' | 'large';
+export type IconShape = 'square' | 'rounded' | 'circle';
+
 export type IconProps = {
   fieldPath?: string;
-  size?: number;
+  size?: number | IconSize;
   fill?: string;
   className?: string;
   style?: React.CSSProperties;
   showIcon?: boolean;
   purpose?: IconPurpose;
   title?: string;
+  showIconBackground?: boolean;
+  iconBackgroundColor?: string;
+  iconBackgroundPadding?: number;
+  iconBackgroundShape?: IconShape | string;
 };
 
 type IconToggleProps = {
@@ -56,8 +63,8 @@ export type StyleFieldsProps = {
   iconBackgroundColorDefault?: ColorFieldValue;
   iconShapeLabel?: string;
   iconShapeName?: string;
-  iconShapeDefault?: string;
+  iconShapeDefault?: IconShape;
   iconSizeLabel?: string;
   iconSizeName?: string;
-  iconSizeDefault?: string;
+  iconSizeDefault?: IconSize;
 };

package/components/componentLibrary/Text/ContentFields.tsx

@@ -7,17 +7,10 @@ import type { ContentFieldsProps } from './types.js';
 // To do: These are placeholders - we can refine and add more after some UX feedback and further discussion
 
 const headingEnabledFeatures: RichTextFieldType['enabledFeatures'] = [
-  'block',
   'alignment',
-  'indents',
-  'lists',
   'standard_emphasis',
-  'advanced_emphasis',
   'link',
   'personalize',
-  'nonbreaking_space',
-  'source_code',
-  'visual_blocks',
 ];
 
 const bodyContentEnabledFeatures: RichTextFieldType['enabledFeatures'] = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/cms-component-library",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
   "exports": {