@wistia/ui 0.13.1-beta.dfa62396.22fa8d9 → 0.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -1528,62 +1528,6 @@ declare const Divider: {
1528
1528
  displayName: string;
1529
1529
  };
1530
1530
 
1531
- type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
1532
- declare const variantStyleMap$1: {
1533
- hero: styled_components.FlattenSimpleInterpolation;
1534
- heading1: styled_components.FlattenSimpleInterpolation;
1535
- heading2: styled_components.FlattenSimpleInterpolation;
1536
- heading3: styled_components.FlattenSimpleInterpolation;
1537
- heading4: styled_components.FlattenSimpleInterpolation;
1538
- heading5: styled_components.FlattenSimpleInterpolation;
1539
- heading6: styled_components.FlattenSimpleInterpolation;
1540
- };
1541
- declare const DEFAULT_ELEMENT = "h1";
1542
- type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
1543
- /**
1544
- * The horizontal alignment
1545
- * <br />
1546
- * _Note: this only affects block elements_
1547
- */
1548
- align?: AlignmentTypes$1;
1549
- /**
1550
- * The content of the heading
1551
- */
1552
- children: ReactNode;
1553
- /**
1554
- * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
1555
- */
1556
- colorScheme?: ColorSchemeTypes;
1557
- /**
1558
- * Styles to text as disabled
1559
- */
1560
- disabled?: boolean;
1561
- /**
1562
- * Display the text as inline content
1563
- */
1564
- inline?: boolean;
1565
- /**
1566
- * Prevents text from being highlighted and copied
1567
- */
1568
- preventUserSelect?: boolean;
1569
- renderAs?: ElementType;
1570
- /**
1571
- * Number of lines to display before truncating with an ellipsis.
1572
- * Set to 1 to truncate after a single line, 2 for two lines, etc.
1573
- * <br />
1574
- * _Note: this only affects block elements_
1575
- */
1576
- truncate?: number;
1577
- /**
1578
- * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
1579
- */
1580
- variant?: keyof typeof variantStyleMap$1;
1581
- };
1582
- /**
1583
- * Displaying heading text, both visually and semantically
1584
- */
1585
- declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
1586
-
1587
1531
  type EditableHeadingProps = {
1588
1532
  /**
1589
1533
  * The initial text content of the heading.
@@ -1608,10 +1552,6 @@ type EditableHeadingProps = {
1608
1552
  * Sets an aria-label for the input and label for the screen reader only button.
1609
1553
  */
1610
1554
  ariaLabel?: string;
1611
- /**
1612
- * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the renderAs prop is used
1613
- */
1614
- variant?: HeadingProps['variant'];
1615
1555
  /**
1616
1556
  * Force editing state for testing purposes
1617
1557
  * @ignore
@@ -1629,7 +1569,7 @@ type EditableHeadingProps = {
1629
1569
  * an accessible button that enables editing mode. The component handles empty values, keyboard
1630
1570
  * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
1631
1571
  */
1632
- declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, variant, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
1572
+ declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
1633
1573
 
1634
1574
  type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
1635
1575
  /**
@@ -1832,6 +1772,62 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
1832
1772
  };
1833
1773
  declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
1834
1774
 
1775
+ type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
1776
+ declare const variantStyleMap$1: {
1777
+ hero: styled_components.FlattenSimpleInterpolation;
1778
+ heading1: styled_components.FlattenSimpleInterpolation;
1779
+ heading2: styled_components.FlattenSimpleInterpolation;
1780
+ heading3: styled_components.FlattenSimpleInterpolation;
1781
+ heading4: styled_components.FlattenSimpleInterpolation;
1782
+ heading5: styled_components.FlattenSimpleInterpolation;
1783
+ heading6: styled_components.FlattenSimpleInterpolation;
1784
+ };
1785
+ declare const DEFAULT_ELEMENT = "h1";
1786
+ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
1787
+ /**
1788
+ * The horizontal alignment
1789
+ * <br />
1790
+ * _Note: this only affects block elements_
1791
+ */
1792
+ align?: AlignmentTypes$1;
1793
+ /**
1794
+ * The content of the heading
1795
+ */
1796
+ children: ReactNode;
1797
+ /**
1798
+ * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
1799
+ */
1800
+ colorScheme?: ColorSchemeTypes;
1801
+ /**
1802
+ * Styles to text as disabled
1803
+ */
1804
+ disabled?: boolean;
1805
+ /**
1806
+ * Display the text as inline content
1807
+ */
1808
+ inline?: boolean;
1809
+ /**
1810
+ * Prevents text from being highlighted and copied
1811
+ */
1812
+ preventUserSelect?: boolean;
1813
+ renderAs?: ElementType;
1814
+ /**
1815
+ * Number of lines to display before truncating with an ellipsis.
1816
+ * Set to 1 to truncate after a single line, 2 for two lines, etc.
1817
+ * <br />
1818
+ * _Note: this only affects block elements_
1819
+ */
1820
+ truncate?: number;
1821
+ /**
1822
+ * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
1823
+ */
1824
+ variant?: keyof typeof variantStyleMap$1;
1825
+ };
1826
+ /**
1827
+ * Displaying heading text, both visually and semantically
1828
+ */
1829
+ declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
1830
+
1835
1831
  type IconButtonProps = {
1836
1832
  /**
1837
1833
  * Accessible text for screen readers.
package/dist/index.d.ts CHANGED
@@ -1528,62 +1528,6 @@ declare const Divider: {
1528
1528
  displayName: string;
1529
1529
  };
1530
1530
 
1531
- type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
1532
- declare const variantStyleMap$1: {
1533
- hero: styled_components.FlattenSimpleInterpolation;
1534
- heading1: styled_components.FlattenSimpleInterpolation;
1535
- heading2: styled_components.FlattenSimpleInterpolation;
1536
- heading3: styled_components.FlattenSimpleInterpolation;
1537
- heading4: styled_components.FlattenSimpleInterpolation;
1538
- heading5: styled_components.FlattenSimpleInterpolation;
1539
- heading6: styled_components.FlattenSimpleInterpolation;
1540
- };
1541
- declare const DEFAULT_ELEMENT = "h1";
1542
- type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
1543
- /**
1544
- * The horizontal alignment
1545
- * <br />
1546
- * _Note: this only affects block elements_
1547
- */
1548
- align?: AlignmentTypes$1;
1549
- /**
1550
- * The content of the heading
1551
- */
1552
- children: ReactNode;
1553
- /**
1554
- * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
1555
- */
1556
- colorScheme?: ColorSchemeTypes;
1557
- /**
1558
- * Styles to text as disabled
1559
- */
1560
- disabled?: boolean;
1561
- /**
1562
- * Display the text as inline content
1563
- */
1564
- inline?: boolean;
1565
- /**
1566
- * Prevents text from being highlighted and copied
1567
- */
1568
- preventUserSelect?: boolean;
1569
- renderAs?: ElementType;
1570
- /**
1571
- * Number of lines to display before truncating with an ellipsis.
1572
- * Set to 1 to truncate after a single line, 2 for two lines, etc.
1573
- * <br />
1574
- * _Note: this only affects block elements_
1575
- */
1576
- truncate?: number;
1577
- /**
1578
- * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
1579
- */
1580
- variant?: keyof typeof variantStyleMap$1;
1581
- };
1582
- /**
1583
- * Displaying heading text, both visually and semantically
1584
- */
1585
- declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
1586
-
1587
1531
  type EditableHeadingProps = {
1588
1532
  /**
1589
1533
  * The initial text content of the heading.
@@ -1608,10 +1552,6 @@ type EditableHeadingProps = {
1608
1552
  * Sets an aria-label for the input and label for the screen reader only button.
1609
1553
  */
1610
1554
  ariaLabel?: string;
1611
- /**
1612
- * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the renderAs prop is used
1613
- */
1614
- variant?: HeadingProps['variant'];
1615
1555
  /**
1616
1556
  * Force editing state for testing purposes
1617
1557
  * @ignore
@@ -1629,7 +1569,7 @@ type EditableHeadingProps = {
1629
1569
  * an accessible button that enables editing mode. The component handles empty values, keyboard
1630
1570
  * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
1631
1571
  */
1632
- declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, variant, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
1572
+ declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
1633
1573
 
1634
1574
  type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
1635
1575
  /**
@@ -1832,6 +1772,62 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
1832
1772
  };
1833
1773
  declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
1834
1774
 
1775
+ type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
1776
+ declare const variantStyleMap$1: {
1777
+ hero: styled_components.FlattenSimpleInterpolation;
1778
+ heading1: styled_components.FlattenSimpleInterpolation;
1779
+ heading2: styled_components.FlattenSimpleInterpolation;
1780
+ heading3: styled_components.FlattenSimpleInterpolation;
1781
+ heading4: styled_components.FlattenSimpleInterpolation;
1782
+ heading5: styled_components.FlattenSimpleInterpolation;
1783
+ heading6: styled_components.FlattenSimpleInterpolation;
1784
+ };
1785
+ declare const DEFAULT_ELEMENT = "h1";
1786
+ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
1787
+ /**
1788
+ * The horizontal alignment
1789
+ * <br />
1790
+ * _Note: this only affects block elements_
1791
+ */
1792
+ align?: AlignmentTypes$1;
1793
+ /**
1794
+ * The content of the heading
1795
+ */
1796
+ children: ReactNode;
1797
+ /**
1798
+ * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
1799
+ */
1800
+ colorScheme?: ColorSchemeTypes;
1801
+ /**
1802
+ * Styles to text as disabled
1803
+ */
1804
+ disabled?: boolean;
1805
+ /**
1806
+ * Display the text as inline content
1807
+ */
1808
+ inline?: boolean;
1809
+ /**
1810
+ * Prevents text from being highlighted and copied
1811
+ */
1812
+ preventUserSelect?: boolean;
1813
+ renderAs?: ElementType;
1814
+ /**
1815
+ * Number of lines to display before truncating with an ellipsis.
1816
+ * Set to 1 to truncate after a single line, 2 for two lines, etc.
1817
+ * <br />
1818
+ * _Note: this only affects block elements_
1819
+ */
1820
+ truncate?: number;
1821
+ /**
1822
+ * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
1823
+ */
1824
+ variant?: keyof typeof variantStyleMap$1;
1825
+ };
1826
+ /**
1827
+ * Displaying heading text, both visually and semantically
1828
+ */
1829
+ declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
1830
+
1835
1831
  type IconButtonProps = {
1836
1832
  /**
1837
1833
  * Accessible text for screen readers.
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v0.13.1-beta.dfa62396.22fa8d9
3
+ * @license @wistia/ui v0.13.1
4
4
  *
5
5
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -10550,13 +10550,11 @@ var StyledInput = styled39(Input)`
10550
10550
  }
10551
10551
 
10552
10552
  && {
10553
- ${({ $variant }) => variantStyleMap[$variant]}
10554
- /* The input font styles (edit mode) needs the same font styles as Heading */
10555
- --wui-input-font-size: var(--font-size);
10556
- --wui-input-font-weight: var(--font-weight);
10557
- --wui-input-line-height: var(--line-height);
10553
+ --wui-input-font-size: var(--wui-typography-heading-1-size);
10554
+ --wui-input-font-weight: var(--wui-typography-heading-1-weight);
10555
+ --wui-input-line-height: var(--wui-typography-heading-1-line-height);
10558
10556
 
10559
- font-family: var(--font-family);
10557
+ font-family: var(--wui-typography-heading-1-family);
10560
10558
  width: 100%;
10561
10559
  padding: var(--wui-space-02);
10562
10560
  border: none;
@@ -10588,7 +10586,6 @@ var EditableHeading = ({
10588
10586
  onEditingChange,
10589
10587
  tooltipText = "Click to edit title",
10590
10588
  ariaLabel = "Edit title",
10591
- variant = "heading1",
10592
10589
  __forceEditing = false,
10593
10590
  editingDisabled = false
10594
10591
  }) => {
@@ -10635,7 +10632,7 @@ var EditableHeading = ({
10635
10632
  ref: headingRef,
10636
10633
  $editingDisabled: editingDisabled,
10637
10634
  onClick: () => handleSetEditing(true),
10638
- variant,
10635
+ variant: "heading1",
10639
10636
  children: value
10640
10637
  }
10641
10638
  );
@@ -10647,7 +10644,6 @@ var EditableHeading = ({
10647
10644
  StyledInput,
10648
10645
  {
10649
10646
  $height: headingHeight,
10650
- $variant: variant,
10651
10647
  autoFocus: true,
10652
10648
  fullWidth: true,
10653
10649
  onBlur: handleFinishEditing,