@hubspot/cms-component-library 0.3.3 → 0.3.5

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

@@ -1,31 +1,13 @@
-import { TextField, ChoiceField } from '@hubspot/cms-components/fields';
+import { TextField } from '@hubspot/cms-components/fields';
 import type { ContentFieldsProps } from './types.js';
 
 const ContentFields = ({
   titleLabel = 'Title',
   titleName = 'title',
   titleDefault = 'Accordion Title',
-  iconLabel = 'Icon',
-  iconName = 'icon',
-  iconDefault = 'chevron',
 }: ContentFieldsProps) => {
   return (
-    <>
-      <ChoiceField
-        label={iconLabel}
-        name={iconName}
-        display="buttons"
-        choices={[
-          ['chevron', 'Chevron'],
-          ['plus', 'Plus'],
-          ['caret', 'Caret'],
-        ]}
-        preset="expand_icon"
-        required={false}
-        default={iconDefault}
-      />
-      <TextField label={titleLabel} name={titleName} default={titleDefault} />
-    </>
+    <TextField label={titleLabel} name={titleName} default={titleDefault} />
   );
 };
 

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

@@ -0,0 +1,26 @@
+import { ChoiceField } from '@hubspot/cms-components/fields';
+import type { StyleFieldsProps } from './types.js';
+
+const StyleFields = ({
+  iconLabel = 'Icon',
+  iconName = 'icon',
+  iconDefault = 'chevron',
+}: StyleFieldsProps) => {
+  return (
+    <ChoiceField
+      label={iconLabel}
+      name={iconName}
+      display="buttons"
+      choices={[
+        ['caret', 'Caret'],
+        ['chevron', 'Chevron'],
+        ['plus', 'Plus'],
+      ]}
+      preset="expand_icon"
+      required={false}
+      default={iconDefault}
+    />
+  );
+};
+
+export default StyleFields;

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

@@ -1,5 +1,6 @@
 import styles from './index.module.scss';
 import ContentFields from './ContentFields.js';
+import StyleFields from './StyleFields.js';
 import cx from '../../utils/classname.js';
 import { AccordionTitleProps } from './types.js';
 import { ChevronIcon, PlusIcon, MinusIcon, CaretIcon } from './icons.js';
@@ -39,9 +40,11 @@ const AccordionTitleComponent = ({
 
 type AccordionTitleComponentType = typeof AccordionTitleComponent & {
   ContentFields: typeof ContentFields;
+  StyleFields: typeof StyleFields;
 };
 
 const AccordionTitle = AccordionTitleComponent as AccordionTitleComponentType;
 AccordionTitle.ContentFields = ContentFields;
+AccordionTitle.StyleFields = StyleFields;
 
 export default AccordionTitle;

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

@@ -11,6 +11,9 @@ export type ContentFieldsProps = {
   titleLabel?: string;
   titleName?: string;
   titleDefault?: string;
+};
+
+export type StyleFieldsProps = {
   iconLabel?: string;
   iconName?: string;
   iconDefault?: AccordionIconType;

package/components/componentLibrary/Accordion/llm.txt

@@ -52,7 +52,8 @@ Accordion/
 ├── AccordionTitle/
 │   ├── index.tsx                 # AccordionTitle component
 │   ├── types.ts                  # AccordionTitle TypeScript types
-│   ├── ContentFields.tsx         # HubSpot field definitions for title/icon
+│   ├── ContentFields.tsx         # HubSpot field definitions for title text
+│   ├── StyleFields.tsx           # HubSpot field definitions for icon
 │   ├── icons.tsx                 # SVG icon components (Chevron, Plus, Minus)
 │   └── index.module.scss         # CSS module for title styling
 ├── AccordionContent/
@@ -228,13 +229,25 @@ Configurable props for variant selection:
 
 #### AccordionTitle.ContentFields
 
-Configurable props for title text and icon:
+Configurable props for title text:
 
 ```tsx
 <AccordionTitle.ContentFields
   titleName="title"
   titleLabel="Title"
   titleDefault="Accordion Title"
+/>
+```
+
+**Fields:**
+- `title`: TextField for accordion title text
+
+#### AccordionTitle.StyleFields
+
+Configurable props for icon style:
+
+```tsx
+<AccordionTitle.StyleFields
   iconName="icon"
   iconLabel="Icon"
   iconDefault="chevron"
@@ -242,7 +255,6 @@ Configurable props for title text and icon:
 ```
 
 **Fields:**
-- `title`: TextField for accordion title text
 - `icon`: ChoiceField for selecting icon type (caret, chevron, plus)
 
 #### AccordionContent.ContentFields
@@ -275,11 +287,11 @@ import { AccordionIconType } from '@hubspot/cms-component-library/Accordion/Acco
 type FAQModuleProps = {
   style?: {
     variant?: AccordionVariant;
+    icon?: AccordionIconType;
   };
   accordionItems?: Array<{
     title?: string;
     content?: string;
-    icon?: AccordionIconType;
   }>;
 };
 
@@ -288,10 +300,11 @@ export const Component = ({
   accordionItems = [],
 }: FAQModuleProps) => {
   const variant = style?.variant;
+  const icon = style?.icon;
 
   return (
     <Accordion>
-      {accordionItems.map(({ title, content, icon }, index) => (
+      {accordionItems.map(({ title, content }, index) => (
         <AccordionItem key={index} variant={variant}>
           <AccordionTitle icon={icon}>{title}</AccordionTitle>
           <AccordionContent>{content}</AccordionContent>
@@ -326,7 +339,6 @@ import {
 const defaultItem = {
   title: 'Accordion Title',
   content: '<p>Accordion content goes here. You can add multiple lines of text.</p>',
-  icon: 'chevron',
 };
 
 export const fields = (
@@ -342,6 +354,7 @@ export const fields = (
     </RepeatedFieldGroup>
     <FieldGroup label="Style" name="style" tab="STYLE">
       <AccordionItem.StyleFields />
+      <AccordionTitle.StyleFields />
     </FieldGroup>
   </ModuleFields>
 );

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/Form/ContentFields.tsx

@@ -0,0 +1,19 @@
+import { FormField } from '@hubspot/cms-components/fields';
+import { ContentFieldsProps } from './types.js';
+
+const ContentFields = ({
+  formIdLabel = 'Form',
+  formIdName = 'form',
+  formIdDefault = {},
+}: ContentFieldsProps) => {
+  return (
+    <FormField
+      label={formIdLabel}
+      name={formIdName}
+      embedVersions={['v4']}
+      default={formIdDefault}
+    />
+  );
+};
+
+export default ContentFields;

package/components/componentLibrary/Form/index.tsx

@@ -0,0 +1,18 @@
+// @ts-expect-error -- ?island not typed
+import FormIsland from './islands/FormIsland.js?island';
+import { FormProps } from './types.js';
+import { Island } from '@hubspot/cms-components';
+import ContentFields from './ContentFields.js';
+
+const FormComponent = (props: FormProps) => {
+  return <Island module={FormIsland} {...props} />;
+};
+
+type FormComponentType = typeof FormComponent & {
+  ContentFields: typeof ContentFields;
+};
+
+const Form = FormComponent as FormComponentType;
+Form.ContentFields = ContentFields;
+
+export default Form;

package/components/componentLibrary/Form/islands/FormIsland.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { FormProps, InternalFormProps } from '../types.js';
+import { getHubID } from '@hubspot/cms-components';
+
+const getScriptSrc = (portalId: number, env: string) => {
+  const host = env === 'qa' ? 'js.hsformsqa.net' : 'js.hsforms.net';
+  return `https://${host}/forms/embed/${portalId}.js`;
+};
+
+const FormIsland = ({ formId, env }: FormProps & InternalFormProps) => {
+  const portalId = getHubID();
+  const resolvedEnv = env === 'qa' ? env : 'prod';
+
+  useEffect(() => {
+    if (!formId || !portalId) {
+      return;
+    }
+
+    const scriptSrc = getScriptSrc(portalId, resolvedEnv);
+    const existingScript = document.querySelector(`script[src="${scriptSrc}"]`);
+
+    if (existingScript) {
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = scriptSrc;
+    document.head.appendChild(script);
+
+    return () => {
+      script.remove();
+    };
+  }, [formId, portalId, resolvedEnv]);
+
+  if (!formId || !portalId) {
+    return null;
+  }
+
+  /*
+<script src="https://js.hsformsqa.net/forms/embed/102771136.js" defer></script>
+<div class="hs-form-frame" data-env="qa" data-region="na1" data-form-id="53e5b258-4526-4012-9274-8bbe23ab2d09" data-portal-id="102771136"></div>
+*/
+
+  return (
+    <div
+      className="hs-form-frame"
+      data-form-id={formId}
+      data-portal-id={portalId}
+      data-env={resolvedEnv}
+    />
+  );
+};
+
+export default FormIsland;

package/components/componentLibrary/Form/islands/index.module.scss

@@ -0,0 +1,3 @@
+.form {
+  width: var(--hscl-form-width, 100%);
+}

package/components/componentLibrary/Form/types.ts

@@ -0,0 +1,13 @@
+import { FormFieldDefaults } from '@hubspot/cms-components/fields';
+export type InternalFormProps = {
+  env?: 'qa' | 'prod';
+};
+export type FormProps = {
+  formId: string;
+};
+
+export type ContentFieldsProps = {
+  formIdLabel?: string;
+  formIdName?: string;
+  formIdDefault?: typeof FormFieldDefaults;
+};

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,10 +2,10 @@
   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 {

package/components/componentLibrary/Icon/index.tsx

@@ -6,10 +6,22 @@ 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',
@@ -22,8 +34,16 @@ const IconComponent = ({
 }: IconProps) => {
   if (!showIcon) return null;
 
+  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 }),
   };
 
@@ -33,7 +53,7 @@ const IconComponent = ({
   const icon = (
     <CMSIcon
       fieldPath={fieldPath}
-      height={size}
+      height={resolvedSize}
       className={combinedClasses}
       style={{ ...cssVariables, ...style }}
       purpose={purpose}
@@ -50,8 +70,8 @@ const IconComponent = ({
     ...(iconBackgroundPadding && {
       '--hscl-iconBackground-padding': `${iconBackgroundPadding}px`,
     }),
-    ...(iconBackgroundShape && {
-      '--hscl-iconBackground-shape': iconBackgroundShape,
+    ...(resolvedShape && {
+      '--hscl-iconBackground-shape': resolvedShape,
     }),
   };
 

package/components/componentLibrary/Icon/llm.txt

@@ -36,7 +36,7 @@ Icon/
 ```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)
@@ -46,7 +46,7 @@ Icon/
   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?: string;                    // Border-radius of the background div, e.g. '0px', '8px', '100%' (default: 0px)
+  iconBackgroundShape?: 'square' | 'rounded' | 'circle' | string; // Background shape — natural language or raw CSS border-radius value
 }
 ```
 
@@ -103,7 +103,7 @@ import Icon from '@hubspot/cms-component-library/Icon';
   showIconBackground={true}
   iconBackgroundColor="#2C2C2C"
   iconBackgroundPadding={16}
-  iconBackgroundShape="100%"
+  iconBackgroundShape="circle"
 />
 ```
 
@@ -144,8 +144,8 @@ Configurable props for icon appearance:
 **Fields:**
 - `iconColor`: ColorField for the icon fill color
 - `iconBackgroundColor`: ColorField for the background div color
-- `iconShape`: ChoiceField for the background border-radius (`'0px'` Square, `'8px'` Rounded, `'100%'` Circle)
-- `iconSize`: ChoiceField for icon size (16px Small, 24px Medium, 32px Large)
+- `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`.
 
@@ -158,7 +158,7 @@ export default function IconModule({ fieldValues }) {
   return (
     <Icon
       fieldPath="icon"
-      size={Number(fieldValues.style?.iconSize) || 24}
+      size={fieldValues.style?.iconSize}
       showIcon={fieldValues.showIcon}
       fill={fieldValues.style?.iconColor?.color}
       showIconBackground={fieldValues.style?.showIconBackground}
@@ -193,8 +193,8 @@ 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
@@ -217,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
-- **Background shape**: The `iconShape` StyleField value maps directly to `iconBackgroundShape` on the component — pass it through as-is
+- **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,9 +8,12 @@ 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;
@@ -20,7 +23,7 @@ export type IconProps = {
   showIconBackground?: boolean;
   iconBackgroundColor?: string;
   iconBackgroundPadding?: number;
-  iconBackgroundShape?: string;
+  iconBackgroundShape?: IconShape | string;
 };
 
 type IconToggleProps = {
@@ -60,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.3",
+  "version": "0.3.5",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
   "exports": {