@speakapbv/dough-component-library 10.9.1 → 10.10.0

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.
Files changed (6) hide show
  1. package/dist/components/texts/texts.d.ts +4 -0
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.es.js +5 -2
  4. package/dist/index.js +5 -1
  5. package/dist/node_modules/@speakapbv/dough-component-library-tokens/index.d.ts +1 -0
  6. package/package.json +2 -2
package/dist/components/texts/texts.d.ts CHANGED
@@ -26,6 +26,10 @@ export interface TypoProps {
26
26
  color?: string;
27
27
  component?: string;
28
28
  }
29
+ export declare const Hero: {
30
+ (props: TypoProps): JSX.Element;
31
+ displayName: string;
32
+ };
29
33
  export declare const H1: {
30
34
  (props: TypoProps): JSX.Element;
31
35
  displayName: string;
package/dist/index.d.ts CHANGED
@@ -11,7 +11,7 @@ export { LayoutFlexBox } from "./components/layout-comp/layout-flex-box";
11
11
  export { Header } from "./components/containers/card/header";
12
12
  export { Footer } from "./components/containers/card/footer";
13
13
  export { DropMenu, DoughDropMenuRef } from "./components/drop-menu/drop-menu";
14
- export { H1, H2, H3, H4, H5, H6, H7, Subtitle, Text, Paragraph, TextAlignment, DoughListItem, UnorderedList, } from "./components/texts/texts";
14
+ export { H1, H2, H3, H4, H5, H6, H7, Subtitle, Text, Paragraph, TextAlignment, DoughListItem, UnorderedList, Hero, } from "./components/texts/texts";
15
15
  export { InputWrapper } from "./components/form-elements/input-wrapper/input-wrapper";
16
16
  export { TextInput } from "./components/form-elements/text-inputs/text-input";
17
17
  export { DateTime, DoughDateInput, } from "./components/form-elements/date-time/date-time";
package/dist/index.es.js CHANGED
@@ -874,7 +874,7 @@ var LayoutFlexBox = function (props) {
874
874
  };
875
875
  LayoutFlexBox.displayName = "LayoutFlexBox";
876
876
 
877
- var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5;\n box-sizing: border-box;\n margin: 0;\n user-select: text;\n position: relative;\n}\n.dough-typo.dough-text-nowrap {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dough-typo.dough-text-word-break {\n word-break: break-word;\n}\n.dough-typo.dough-text-ellipsis {\n text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n text-align: left;\n}\n.dough-typo.dough-text-align-right {\n text-align: right;\n}\n.dough-typo.dough-text-align-center {\n text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n text-align: justify;\n}\n.dough-typo.dough-text {\n line-height: 1.3rem;\n}\n.dough-typo.dough-text-h1 {\n font-size: 1.625rem;\n line-height: 1.875rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n font-size: 1.625rem !important;\n font-weight: 700 !important;\n top: 0.40625rem;\n}\n.dough-typo.dough-text-h1.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h2 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n font-size: 1.5rem !important;\n font-weight: 700 !important;\n top: 0.375rem;\n}\n.dough-typo.dough-text-h2.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h3 {\n font-size: 1.25rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n font-size: 1.25rem !important;\n font-weight: 700 !important;\n top: 0.3125rem;\n}\n.dough-typo.dough-text-h3.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h4 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n font-size: 1.125rem !important;\n font-weight: 700 !important;\n top: 0.28125rem;\n}\n.dough-typo.dough-text-h4.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h5 {\n font-size: 1rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n font-size: 1rem !important;\n font-weight: 700 !important;\n top: 0.25rem;\n}\n.dough-typo.dough-text-h5.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h6 {\n font-size: 0.875rem;\n line-height: 1.3rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n font-size: 0.875rem !important;\n font-weight: 700 !important;\n top: 0.21875rem;\n}\n.dough-typo.dough-text-h6.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h7 {\n font-size: 0.8125rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n font-size: 0.8125rem !important;\n font-weight: 700 !important;\n top: 0.203125rem;\n}\n.dough-typo.dough-text-h7.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-subtitle {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n line-height: 0.94rem;\n font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n line-height: 0.8rem;\n font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n line-height: 0.6875rem;\n font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n text-decoration: line-through;\n}";
877
+ var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5;\n box-sizing: border-box;\n margin: 0;\n user-select: text;\n position: relative;\n}\n.dough-typo.dough-text-nowrap {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dough-typo.dough-text-word-break {\n word-break: break-word;\n}\n.dough-typo.dough-text-ellipsis {\n text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n text-align: left;\n}\n.dough-typo.dough-text-align-right {\n text-align: right;\n}\n.dough-typo.dough-text-align-center {\n text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n text-align: justify;\n}\n.dough-typo.dough-text {\n line-height: 1.3rem;\n}\n.dough-typo.dough-text-hero {\n font-size: 2rem;\n line-height: 2.344rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-hero input[type=text],\n.dough-typo.dough-text-hero .dough-fe-label {\n font-size: 2rem !important;\n font-weight: 700 !important;\n top: 0.5rem;\n}\n.dough-typo.dough-text-hero.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h1 {\n font-size: 1.625rem;\n line-height: 1.875rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n font-size: 1.625rem !important;\n font-weight: 700 !important;\n top: 0.40625rem;\n}\n.dough-typo.dough-text-h1.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h2 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n font-size: 1.5rem !important;\n font-weight: 700 !important;\n top: 0.375rem;\n}\n.dough-typo.dough-text-h2.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h3 {\n font-size: 1.25rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n font-size: 1.25rem !important;\n font-weight: 700 !important;\n top: 0.3125rem;\n}\n.dough-typo.dough-text-h3.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h4 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n font-size: 1.125rem !important;\n font-weight: 700 !important;\n top: 0.28125rem;\n}\n.dough-typo.dough-text-h4.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h5 {\n font-size: 1rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n font-size: 1rem !important;\n font-weight: 700 !important;\n top: 0.25rem;\n}\n.dough-typo.dough-text-h5.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h6 {\n font-size: 0.875rem;\n line-height: 1.3rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n font-size: 0.875rem !important;\n font-weight: 700 !important;\n top: 0.21875rem;\n}\n.dough-typo.dough-text-h6.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h7 {\n font-size: 0.8125rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n font-size: 0.8125rem !important;\n font-weight: 700 !important;\n top: 0.203125rem;\n}\n.dough-typo.dough-text-h7.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-subtitle {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n line-height: 0.94rem;\n font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n line-height: 0.8rem;\n font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n line-height: 0.6875rem;\n font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n text-decoration: line-through;\n}";
878
878
  styleInject(css_248z$6);
879
879
 
880
880
  var TextAlignment;
@@ -903,6 +903,8 @@ var TextElement = function (props) {
903
903
  var HeaderElement = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, {
904
904
  "dough-header-regular": props.bold === false,
905
905
  }) }))); };
906
+ var Hero = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-hero"), component: props.component ? props.component : "h1" }))); };
907
+ Hero.displayName = "Hero";
906
908
  var H1 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h1"), component: props.component ? props.component : "h1" }))); };
907
909
  H1.displayName = "H1";
908
910
  var H2 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h2"), component: props.component ? props.component : "h2" }))); };
@@ -4630,6 +4632,7 @@ var DesignTokens = {
4630
4632
  textH3: "1.25rem",
4631
4633
  textH2: "1.5rem",
4632
4634
  textH1: "1.625rem",
4635
+ textHero: "2rem",
4633
4636
  textTiny: "0.6875rem",
4634
4637
  lineHeightHeading: "1.25",
4635
4638
  lineHeightBody: "1.5",
@@ -5729,4 +5732,4 @@ GridItem.displayName = "GridItem";
5729
5732
 
5730
5733
  injectRobotoFont();
5731
5734
 
5732
- export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, CardColors, Carousel, CheckBox, CheckBoxAlignment, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DividerDecorator, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, MultiProgressBar, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };
5735
+ export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, CardColors, Carousel, CheckBox, CheckBoxAlignment, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DividerDecorator, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, Hero, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, MultiProgressBar, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };
package/dist/index.js CHANGED
@@ -867,7 +867,7 @@ var LayoutFlexBox = function (props) {
867
867
  };
868
868
  LayoutFlexBox.displayName = "LayoutFlexBox";
869
869
 
870
- var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5;\n box-sizing: border-box;\n margin: 0;\n user-select: text;\n position: relative;\n}\n.dough-typo.dough-text-nowrap {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dough-typo.dough-text-word-break {\n word-break: break-word;\n}\n.dough-typo.dough-text-ellipsis {\n text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n text-align: left;\n}\n.dough-typo.dough-text-align-right {\n text-align: right;\n}\n.dough-typo.dough-text-align-center {\n text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n text-align: justify;\n}\n.dough-typo.dough-text {\n line-height: 1.3rem;\n}\n.dough-typo.dough-text-h1 {\n font-size: 1.625rem;\n line-height: 1.875rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n font-size: 1.625rem !important;\n font-weight: 700 !important;\n top: 0.40625rem;\n}\n.dough-typo.dough-text-h1.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h2 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n font-size: 1.5rem !important;\n font-weight: 700 !important;\n top: 0.375rem;\n}\n.dough-typo.dough-text-h2.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h3 {\n font-size: 1.25rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n font-size: 1.25rem !important;\n font-weight: 700 !important;\n top: 0.3125rem;\n}\n.dough-typo.dough-text-h3.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h4 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n font-size: 1.125rem !important;\n font-weight: 700 !important;\n top: 0.28125rem;\n}\n.dough-typo.dough-text-h4.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h5 {\n font-size: 1rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n font-size: 1rem !important;\n font-weight: 700 !important;\n top: 0.25rem;\n}\n.dough-typo.dough-text-h5.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h6 {\n font-size: 0.875rem;\n line-height: 1.3rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n font-size: 0.875rem !important;\n font-weight: 700 !important;\n top: 0.21875rem;\n}\n.dough-typo.dough-text-h6.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h7 {\n font-size: 0.8125rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n font-size: 0.8125rem !important;\n font-weight: 700 !important;\n top: 0.203125rem;\n}\n.dough-typo.dough-text-h7.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-subtitle {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n line-height: 0.94rem;\n font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n line-height: 0.8rem;\n font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n line-height: 0.6875rem;\n font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n text-decoration: line-through;\n}";
870
+ var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5;\n box-sizing: border-box;\n margin: 0;\n user-select: text;\n position: relative;\n}\n.dough-typo.dough-text-nowrap {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dough-typo.dough-text-word-break {\n word-break: break-word;\n}\n.dough-typo.dough-text-ellipsis {\n text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n text-align: left;\n}\n.dough-typo.dough-text-align-right {\n text-align: right;\n}\n.dough-typo.dough-text-align-center {\n text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n text-align: justify;\n}\n.dough-typo.dough-text {\n line-height: 1.3rem;\n}\n.dough-typo.dough-text-hero {\n font-size: 2rem;\n line-height: 2.344rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-hero input[type=text],\n.dough-typo.dough-text-hero .dough-fe-label {\n font-size: 2rem !important;\n font-weight: 700 !important;\n top: 0.5rem;\n}\n.dough-typo.dough-text-hero.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h1 {\n font-size: 1.625rem;\n line-height: 1.875rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n font-size: 1.625rem !important;\n font-weight: 700 !important;\n top: 0.40625rem;\n}\n.dough-typo.dough-text-h1.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h2 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n font-size: 1.5rem !important;\n font-weight: 700 !important;\n top: 0.375rem;\n}\n.dough-typo.dough-text-h2.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h3 {\n font-size: 1.25rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n font-size: 1.25rem !important;\n font-weight: 700 !important;\n top: 0.3125rem;\n}\n.dough-typo.dough-text-h3.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h4 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n font-size: 1.125rem !important;\n font-weight: 700 !important;\n top: 0.28125rem;\n}\n.dough-typo.dough-text-h4.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h5 {\n font-size: 1rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n font-size: 1rem !important;\n font-weight: 700 !important;\n top: 0.25rem;\n}\n.dough-typo.dough-text-h5.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h6 {\n font-size: 0.875rem;\n line-height: 1.3rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n font-size: 0.875rem !important;\n font-weight: 700 !important;\n top: 0.21875rem;\n}\n.dough-typo.dough-text-h6.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h7 {\n font-size: 0.8125rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n font-size: 0.8125rem !important;\n font-weight: 700 !important;\n top: 0.203125rem;\n}\n.dough-typo.dough-text-h7.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-subtitle {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n line-height: 0.94rem;\n font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n line-height: 0.8rem;\n font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n line-height: 0.6875rem;\n font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n text-decoration: line-through;\n}";
871
871
  styleInject(css_248z$6);
872
872
 
873
873
  (function (TextAlignment) {
@@ -895,6 +895,8 @@ var TextElement = function (props) {
895
895
  var HeaderElement = function (props) { return (React__default.createElement(TextElement, tslib.__assign({}, props, { className: cn(props.className, {
896
896
  "dough-header-regular": props.bold === false,
897
897
  }) }))); };
898
+ var Hero = function (props) { return (React__default.createElement(HeaderElement, tslib.__assign({}, props, { className: cn(props.className, "dough-text-hero"), component: props.component ? props.component : "h1" }))); };
899
+ Hero.displayName = "Hero";
898
900
  var H1 = function (props) { return (React__default.createElement(HeaderElement, tslib.__assign({}, props, { className: cn(props.className, "dough-text-h1"), component: props.component ? props.component : "h1" }))); };
899
901
  H1.displayName = "H1";
900
902
  var H2 = function (props) { return (React__default.createElement(HeaderElement, tslib.__assign({}, props, { className: cn(props.className, "dough-text-h2"), component: props.component ? props.component : "h2" }))); };
@@ -4611,6 +4613,7 @@ var DesignTokens = {
4611
4613
  textH3: "1.25rem",
4612
4614
  textH2: "1.5rem",
4613
4615
  textH1: "1.625rem",
4616
+ textHero: "2rem",
4614
4617
  textTiny: "0.6875rem",
4615
4618
  lineHeightHeading: "1.25",
4616
4619
  lineHeightBody: "1.5",
@@ -5742,6 +5745,7 @@ exports.H5 = H5;
5742
5745
  exports.H6 = H6;
5743
5746
  exports.H7 = H7;
5744
5747
  exports.Header = Header;
5748
+ exports.Hero = Hero;
5745
5749
  exports.HorizontalListSlider = HorizontalListSlider;
5746
5750
  exports.Image = Image;
5747
5751
  exports.ImageCarousel = ImageCarousel;
package/dist/node_modules/@speakapbv/dough-component-library-tokens/index.d.ts CHANGED
@@ -54,6 +54,7 @@ declare const _default: {
54
54
  textH3: string;
55
55
  textH2: string;
56
56
  textH1: string;
57
+ textHero: string;
57
58
  textTiny: string;
58
59
  lineHeightHeading: string;
59
60
  lineHeightBody: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "10.9.1",
3
+ "version": "10.10.0",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",
@@ -96,7 +96,7 @@
96
96
  "dist"
97
97
  ],
98
98
  "dependencies": {
99
- "@speakapbv/dough-component-library-tokens": "1.7.2",
99
+ "@speakapbv/dough-component-library-tokens": "1.8.0",
100
100
  "tslib": "^2.6.2"
101
101
  },
102
102
  "publishConfig": {