@speakapbv/dough-component-library 9.21.0 → 9.22.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 (10) hide show
  1. package/dist/{src/components → components}/app-background/app-background.d.ts +0 -0
  2. package/dist/{src/components → components}/containers/grid/grid.d.ts +0 -0
  3. package/dist/{src/components → components}/containers/table/table-row.d.ts +0 -0
  4. package/dist/{src/components → components}/spacer/spacer.d.ts +0 -0
  5. package/dist/{src/components → components}/spinner/spinner.d.ts +0 -0
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.es.js +8 -3
  8. package/dist/index.js +9 -2
  9. package/dist/node_modules/@speakapbv/dough-component-library-tokens/index.d.ts +1 -0
  10. package/package.json +2 -2
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, } from "./components/texts/texts";
14
+ export { H1, H2, H3, H4, H5, H6, H7, Subtitle, Text, Paragraph, TextAlignment, DoughListItem, UnorderedList, } 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
@@ -899,7 +899,11 @@ Subtitle.displayName = "Subtitle";
899
899
  var Text = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text"), component: props.component ? props.component : "span" }))); };
900
900
  Text.displayName = "Text";
901
901
  var Paragraph = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-paragraph"), component: props.component ? props.component : "p" }))); };
902
- Paragraph.displayName = "Paragraph";
902
+ Paragraph.displayName = "Paragraph";
903
+ var UnorderedList = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-unordered-list"), component: props.component ? props.component : "ul" }))); };
904
+ UnorderedList.displayName = "UnorderedList";
905
+ var DoughListItem = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-list-item"), component: props.component ? props.component : "li" }))); };
906
+ DoughListItem.displayName = "DoughListItem";
903
907
 
904
908
  var ToggleWithText = forwardRef(function (props, ref) {
905
909
  var _a = props.color, color = _a === void 0 ? Colors.LIKE : _a;
@@ -4236,7 +4240,7 @@ var Dialog = function (props) {
4236
4240
  };
4237
4241
  Dialog.displayName = "Dialog";
4238
4242
 
4239
- var css_248z$t = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tooltip {\n display: inline;\n position: relative;\n pointer-events: all;\n}\n.dough-tooltip.dough-tooltip-full-width {\n width: 100%;\n box-sizing: border-box;\n}\n.dough-tooltip.disabled {\n pointer-events: none;\n}\n\n.dough-tooltip-wrapper {\n position: fixed;\n background-color: rgba(0, 0, 0, 0);\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n transform: translate3d(0, 4px, 0);\n overflow: hidden;\n pointer-events: none;\n font-family: \"Roboto\", sans-serif;\n opacity: 0;\n transform-origin: center center;\n}\nbody:not(.no-transition) .dough-tooltip-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tooltip-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container {\n overflow: visible;\n display: block;\n padding: 0;\n box-sizing: border-box;\n pointer-events: none;\n position: relative;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-content {\n position: absolute;\n z-index: 10;\n background-color: rgb(0, 0, 0);\n padding: 8px;\n border-radius: 12px;\n font-size: 0.8125rem;\n box-sizing: border-box;\n color: rgb(255, 255, 255);\n color: var(--dough-color-white);\n max-width: 60vw;\n display: inline-block;\n overflow: hidden;\n transform: translate3d(-50%, 0, 0);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n position: absolute;\n z-index: 20;\n width: 12px;\n height: 6px;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg {\n transform: translate3d(0, 0, 0) rotateZ(180deg);\n width: 100%;\n height: 100%;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg > polygon {\n fill: rgba(0, 0, 0, 0.75);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-content {\n background-color: rgb(255, 255, 255);\n background-color: var(--dough-color-white);\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n fill: rgb(255, 255, 255);\n fill: var(--dough-color-white);\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-content, .dough-tooltip-wrapper.up-left > .dough-tooltip-container > .dough-tooltip-content {\n bottom: -7px;\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-arrow, .dough-tooltip-wrapper.up-left > .dough-tooltip-container > .dough-tooltip-arrow {\n top: -1.5px;\n transform: translate3d(-50%, 7.75px, 0) rotateZ(0deg);\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-content {\n top: 2px;\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-arrow {\n top: 4.5px;\n transform: translate3d(-50%, -8px, 0) rotateZ(180deg);\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(0, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-arrow {\n left: 3.25px;\n transform: translate3d(-12px, -1px, 0) rotateZ(90deg);\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(-100%, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-arrow {\n left: -15px;\n transform: translate3d(12px, -1px, 0) rotateZ(-90deg);\n}\n.dough-tooltip-wrapper.visible:not(:empty) {\n opacity: 1;\n}\n.dough-tooltip-wrapper.visible:not(:empty).up, .dough-tooltip-wrapper.visible:not(:empty).up-left {\n transform: translate3d(0, -12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).down {\n transform: translate3d(0, 12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).right {\n transform: translate3d(8px, 4px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).left {\n transform: translate3d(-8px, 4px, 0);\n}";
4243
+ var css_248z$t = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tooltip {\n display: inline;\n position: relative;\n pointer-events: all;\n}\n.dough-tooltip.dough-tooltip-full-width {\n width: 100%;\n box-sizing: border-box;\n}\n.dough-tooltip.disabled {\n pointer-events: none;\n}\n\n.dough-tooltip-wrapper {\n position: fixed;\n background-color: rgba(0, 0, 0, 0);\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n transform: translate3d(0, 4px, 0);\n overflow: hidden;\n pointer-events: none;\n font-family: \"Roboto\", sans-serif;\n opacity: 0;\n transform-origin: center center;\n}\nbody:not(.no-transition) .dough-tooltip-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tooltip-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container {\n overflow: visible;\n display: block;\n padding: 0;\n box-sizing: border-box;\n pointer-events: none;\n position: relative;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-content {\n position: absolute;\n z-index: 10;\n background-color: rgb(0, 0, 0);\n padding: 8px 16px;\n border-radius: 12px;\n font-size: 0.8125rem;\n box-sizing: border-box;\n color: rgb(255, 255, 255);\n color: var(--dough-color-white);\n max-width: 60vw;\n display: inline-block;\n overflow: hidden;\n transform: translate3d(-50%, 0, 0);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n position: absolute;\n z-index: 20;\n width: 12px;\n height: 6px;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg {\n transform: translate3d(0, 0, 0) rotateZ(180deg);\n width: 100%;\n height: 100%;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg > polygon {\n fill: rgba(0, 0, 0, 0.75);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-content {\n background-color: rgb(255, 255, 255);\n background-color: var(--dough-color-white);\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n fill: rgb(255, 255, 255);\n fill: var(--dough-color-white);\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-content, .dough-tooltip-wrapper.up-left > .dough-tooltip-container > .dough-tooltip-content {\n bottom: -7px;\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-arrow, .dough-tooltip-wrapper.up-left > .dough-tooltip-container > .dough-tooltip-arrow {\n top: -1.5px;\n transform: translate3d(-50%, 7.75px, 0) rotateZ(0deg);\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-content {\n top: 2px;\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-arrow {\n top: 4.5px;\n transform: translate3d(-50%, -8px, 0) rotateZ(180deg);\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(0, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-arrow {\n left: 3.25px;\n transform: translate3d(-12px, -1px, 0) rotateZ(90deg);\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(-100%, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-arrow {\n left: -15px;\n transform: translate3d(12px, -1px, 0) rotateZ(-90deg);\n}\n.dough-tooltip-wrapper.visible:not(:empty) {\n opacity: 1;\n}\n.dough-tooltip-wrapper.visible:not(:empty).up, .dough-tooltip-wrapper.visible:not(:empty).up-left {\n transform: translate3d(0, -12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).down {\n transform: translate3d(0, 12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).right {\n transform: translate3d(8px, 4px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).left {\n transform: translate3d(-8px, 4px, 0);\n}";
4240
4244
  styleInject(css_248z$t);
4241
4245
 
4242
4246
  var TooltipDirection;
@@ -4826,6 +4830,7 @@ var DesignTokens = {
4826
4830
  colorGrey3: "#9f9f9f",
4827
4831
  colorGrey2: "#696969",
4828
4832
  colorGrey1: "#444444",
4833
+ colorStatusWarningLight: "#ffefdd",
4829
4834
  colorStatusWarning: "#ff8800",
4830
4835
  colorStatusSuccess: "#008800",
4831
4836
  colorStatusDanger: "#bf2900",
@@ -5549,4 +5554,4 @@ GridItem.displayName = "GridItem";
5549
5554
 
5550
5555
  injectRobotoFont();
5551
5556
 
5552
- 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, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, 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, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, 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, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, setBreakpointSizeManually };
5557
+ 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, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, 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, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, 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, setBreakpointSizeManually };
package/dist/index.js CHANGED
@@ -892,7 +892,11 @@ Subtitle.displayName = "Subtitle";
892
892
  var Text = function (props) { return (React__default.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text"), component: props.component ? props.component : "span" }))); };
893
893
  Text.displayName = "Text";
894
894
  var Paragraph = function (props) { return (React__default.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-paragraph"), component: props.component ? props.component : "p" }))); };
895
- Paragraph.displayName = "Paragraph";
895
+ Paragraph.displayName = "Paragraph";
896
+ var UnorderedList = function (props) { return (React__default.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-unordered-list"), component: props.component ? props.component : "ul" }))); };
897
+ UnorderedList.displayName = "UnorderedList";
898
+ var DoughListItem = function (props) { return (React__default.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-list-item"), component: props.component ? props.component : "li" }))); };
899
+ DoughListItem.displayName = "DoughListItem";
896
900
 
897
901
  var ToggleWithText = React.forwardRef(function (props, ref) {
898
902
  var _a = props.color, color = _a === void 0 ? exports.Colors.LIKE : _a;
@@ -4220,7 +4224,7 @@ var Dialog = function (props) {
4220
4224
  };
4221
4225
  Dialog.displayName = "Dialog";
4222
4226
 
4223
- var css_248z$t = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tooltip {\n display: inline;\n position: relative;\n pointer-events: all;\n}\n.dough-tooltip.dough-tooltip-full-width {\n width: 100%;\n box-sizing: border-box;\n}\n.dough-tooltip.disabled {\n pointer-events: none;\n}\n\n.dough-tooltip-wrapper {\n position: fixed;\n background-color: rgba(0, 0, 0, 0);\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n transform: translate3d(0, 4px, 0);\n overflow: hidden;\n pointer-events: none;\n font-family: \"Roboto\", sans-serif;\n opacity: 0;\n transform-origin: center center;\n}\nbody:not(.no-transition) .dough-tooltip-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tooltip-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container {\n overflow: visible;\n display: block;\n padding: 0;\n box-sizing: border-box;\n pointer-events: none;\n position: relative;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-content {\n position: absolute;\n z-index: 10;\n background-color: rgb(0, 0, 0);\n padding: 8px;\n border-radius: 12px;\n font-size: 0.8125rem;\n box-sizing: border-box;\n color: rgb(255, 255, 255);\n color: var(--dough-color-white);\n max-width: 60vw;\n display: inline-block;\n overflow: hidden;\n transform: translate3d(-50%, 0, 0);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n position: absolute;\n z-index: 20;\n width: 12px;\n height: 6px;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg {\n transform: translate3d(0, 0, 0) rotateZ(180deg);\n width: 100%;\n height: 100%;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg > polygon {\n fill: rgba(0, 0, 0, 0.75);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-content {\n background-color: rgb(255, 255, 255);\n background-color: var(--dough-color-white);\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n fill: rgb(255, 255, 255);\n fill: var(--dough-color-white);\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-content, .dough-tooltip-wrapper.up-left > .dough-tooltip-container > .dough-tooltip-content {\n bottom: -7px;\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-arrow, .dough-tooltip-wrapper.up-left > .dough-tooltip-container > .dough-tooltip-arrow {\n top: -1.5px;\n transform: translate3d(-50%, 7.75px, 0) rotateZ(0deg);\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-content {\n top: 2px;\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-arrow {\n top: 4.5px;\n transform: translate3d(-50%, -8px, 0) rotateZ(180deg);\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(0, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-arrow {\n left: 3.25px;\n transform: translate3d(-12px, -1px, 0) rotateZ(90deg);\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(-100%, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-arrow {\n left: -15px;\n transform: translate3d(12px, -1px, 0) rotateZ(-90deg);\n}\n.dough-tooltip-wrapper.visible:not(:empty) {\n opacity: 1;\n}\n.dough-tooltip-wrapper.visible:not(:empty).up, .dough-tooltip-wrapper.visible:not(:empty).up-left {\n transform: translate3d(0, -12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).down {\n transform: translate3d(0, 12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).right {\n transform: translate3d(8px, 4px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).left {\n transform: translate3d(-8px, 4px, 0);\n}";
4227
+ var css_248z$t = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tooltip {\n display: inline;\n position: relative;\n pointer-events: all;\n}\n.dough-tooltip.dough-tooltip-full-width {\n width: 100%;\n box-sizing: border-box;\n}\n.dough-tooltip.disabled {\n pointer-events: none;\n}\n\n.dough-tooltip-wrapper {\n position: fixed;\n background-color: rgba(0, 0, 0, 0);\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n transform: translate3d(0, 4px, 0);\n overflow: hidden;\n pointer-events: none;\n font-family: \"Roboto\", sans-serif;\n opacity: 0;\n transform-origin: center center;\n}\nbody:not(.no-transition) .dough-tooltip-wrapper {\n transition: all 450ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tooltip-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container {\n overflow: visible;\n display: block;\n padding: 0;\n box-sizing: border-box;\n pointer-events: none;\n position: relative;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-content {\n position: absolute;\n z-index: 10;\n background-color: rgb(0, 0, 0);\n padding: 8px 16px;\n border-radius: 12px;\n font-size: 0.8125rem;\n box-sizing: border-box;\n color: rgb(255, 255, 255);\n color: var(--dough-color-white);\n max-width: 60vw;\n display: inline-block;\n overflow: hidden;\n transform: translate3d(-50%, 0, 0);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n position: absolute;\n z-index: 20;\n width: 12px;\n height: 6px;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg {\n transform: translate3d(0, 0, 0) rotateZ(180deg);\n width: 100%;\n height: 100%;\n}\n.dough-tooltip-wrapper > .dough-tooltip-container > .dough-tooltip-arrow > svg > polygon {\n fill: rgba(0, 0, 0, 0.75);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-content {\n background-color: rgb(255, 255, 255);\n background-color: var(--dough-color-white);\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n color: rgb(110, 111, 117);\n color: var(--dough-color-text-default);\n}\n.dough-tooltip-wrapper > .dough-tooltip-container.light > .dough-tooltip-arrow > svg > polygon {\n fill: rgb(255, 255, 255);\n fill: var(--dough-color-white);\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-content, .dough-tooltip-wrapper.up-left > .dough-tooltip-container > .dough-tooltip-content {\n bottom: -7px;\n}\n.dough-tooltip-wrapper.up > .dough-tooltip-container > .dough-tooltip-arrow, .dough-tooltip-wrapper.up-left > .dough-tooltip-container > .dough-tooltip-arrow {\n top: -1.5px;\n transform: translate3d(-50%, 7.75px, 0) rotateZ(0deg);\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-content {\n top: 2px;\n}\n.dough-tooltip-wrapper.down > .dough-tooltip-container > .dough-tooltip-arrow {\n top: 4.5px;\n transform: translate3d(-50%, -8px, 0) rotateZ(180deg);\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(0, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.right > .dough-tooltip-container > .dough-tooltip-arrow {\n left: 3.25px;\n transform: translate3d(-12px, -1px, 0) rotateZ(90deg);\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-content {\n transform: translate3d(-100%, -50%, 0);\n top: 2px;\n}\n.dough-tooltip-wrapper.left > .dough-tooltip-container > .dough-tooltip-arrow {\n left: -15px;\n transform: translate3d(12px, -1px, 0) rotateZ(-90deg);\n}\n.dough-tooltip-wrapper.visible:not(:empty) {\n opacity: 1;\n}\n.dough-tooltip-wrapper.visible:not(:empty).up, .dough-tooltip-wrapper.visible:not(:empty).up-left {\n transform: translate3d(0, -12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).down {\n transform: translate3d(0, 12px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).right {\n transform: translate3d(8px, 4px, 0);\n}\n.dough-tooltip-wrapper.visible:not(:empty).left {\n transform: translate3d(-8px, 4px, 0);\n}";
4224
4228
  styleInject(css_248z$t);
4225
4229
 
4226
4230
  (function (TooltipDirection) {
@@ -4809,6 +4813,7 @@ var DesignTokens = {
4809
4813
  colorGrey3: "#9f9f9f",
4810
4814
  colorGrey2: "#696969",
4811
4815
  colorGrey1: "#444444",
4816
+ colorStatusWarningLight: "#ffefdd",
4812
4817
  colorStatusWarning: "#ff8800",
4813
4818
  colorStatusSuccess: "#008800",
4814
4819
  colorStatusDanger: "#bf2900",
@@ -5550,6 +5555,7 @@ exports.DateTime = DateTime;
5550
5555
  exports.DesignTokens = DesignTokens;
5551
5556
  exports.Dialog = Dialog;
5552
5557
  exports.Divider = Divider;
5558
+ exports.DoughListItem = DoughListItem;
5553
5559
  exports.DropMenu = DropMenu;
5554
5560
  exports.Fader = Fader;
5555
5561
  exports.Footer = Footer;
@@ -5598,6 +5604,7 @@ exports.TimePicker = TimePicker;
5598
5604
  exports.Toggle = Toggle;
5599
5605
  exports.ToggleWithText = ToggleWithText;
5600
5606
  exports.Tooltip = Tooltip;
5607
+ exports.UnorderedList = UnorderedList;
5601
5608
  exports.cancelEvent = cancelEvent;
5602
5609
  exports.checkComponentType = checkComponentType;
5603
5610
  exports.cn = cn;
package/dist/node_modules/@speakapbv/dough-component-library-tokens/index.d.ts CHANGED
@@ -9,6 +9,7 @@ declare const _default: {
9
9
  colorGrey3: string;
10
10
  colorGrey2: string;
11
11
  colorGrey1: string;
12
+ colorStatusWarningLight: string;
12
13
  colorStatusWarning: string;
13
14
  colorStatusSuccess: string;
14
15
  colorStatusDanger: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "9.21.0",
3
+ "version": "9.22.0",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",
@@ -94,7 +94,7 @@
94
94
  "dist"
95
95
  ],
96
96
  "dependencies": {
97
- "@speakapbv/dough-component-library-tokens": "1.4.0"
97
+ "@speakapbv/dough-component-library-tokens": "1.5.0"
98
98
  },
99
99
  "publishConfig": {
100
100
  "registry": "https://registry.npmjs.org/"