@appquality/unguess-design-system 2.12.54 → 2.12.56

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v2.12.56 (Mon Jan 16 2023)
+
+#### 🐛 Bug Fix
+
+- Multiselect fixes [#176](https://github.com/AppQuality/unguess-design-system/pull/176) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.12.55 (Mon Jan 16 2023)
+
+#### 🐛 Bug Fix
+
+- Add slider and awesome lightbox [#175](https://github.com/AppQuality/unguess-design-system/pull/175) ([@cannarocks](https://github.com/cannarocks))
+- UN-297-lightbox [#172](https://github.com/AppQuality/unguess-design-system/pull/172) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.54 (Fri Jan 13 2023)
 
 #### 🐛 Bug Fix

package/build/index.d.ts

@@ -48,6 +48,7 @@ export * from "./stories/grid/row";
 export * from "./stories/grid/grid";
 export * from "./stories/icons";
 export * from "./stories/label";
+export * from "./stories/lightbox";
 export * from "./stories/loaders/progress";
 export * from "./stories/loaders/skeleton";
 export * from "./stories/loaders/spinner";
@@ -71,6 +72,7 @@ export * from "./stories/notifications";
 export * from "./stories/pagination";
 export * from "./stories/navigation/page-header";
 export * from "./stories/profile-modal";
+export * from "./stories/slider";
 export * from "./stories/stepper";
 export { Table, Head as TableHead, HeaderRow, HeaderCell, Body as TableBody, Row as TableRow, Cell as TableCell, Caption, } from "./stories/table";
 export { GroupRow, GroupedTable } from "./stories/table/grouped";

package/build/index.js

@@ -35,6 +35,7 @@ var reactGrid = require('@zendeskgarden/react-grid');
 var reactChrome = require('@zendeskgarden/react-chrome');
 var formik = require('formik');
 var reactPagination = require('@zendeskgarden/react-pagination');
+var SlickSlider = require('react-slick');
 var reactTables = require('@zendeskgarden/react-tables');
 var reactSpring = require('react-spring');
 var reactTooltips = require('@zendeskgarden/react-tooltips');
@@ -67,6 +68,7 @@ var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
 var Placeholder__default = /*#__PURE__*/_interopDefaultLegacy(Placeholder);
 var CharacterCount__default = /*#__PURE__*/_interopDefaultLegacy(CharacterCount);
+var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
 
 const palette = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.palette), { black: "#000", white: "#fff", product: {
         support: "#00a656",
@@ -858,7 +860,7 @@ const Divider = styled__default["default"].div `
   margin-bottom: ${({ theme }) => theme.space.xxs};
   background-color: ${({ theme }) => theme.palette.grey["300"]};
 `;
-const Footer$2 = styled__default["default"].div `
+const Footer$3 = styled__default["default"].div `
   display: flex;
   flex-direction: column;
   margin-top: auto;
@@ -875,7 +877,7 @@ const Container$1 = styled__default["default"].div `
       ${wrap ? "flex-wrap: wrap;" : ""}
     `}
 `;
-const CardFooter = (props) => (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, Object.assign({}, props, { children: props.children }))] }));
+const CardFooter = (props) => (jsxRuntime.jsxs(Footer$3, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, Object.assign({}, props, { children: props.children }))] }));
 
 const UgContentCard = styled__default["default"](reactNotifications.Well) `
   border-radius: ${({ theme }) => theme.borderRadii.lg};
@@ -942,7 +944,7 @@ const getTypeDataIcon = (type) => {
             return SvgCampaignFunctional;
     }
 };
-const StyledTag$2 = styled__default["default"](Tag) `
+const StyledTag$3 = styled__default["default"](Tag) `
   color: ${({ theme }) => theme.palette.grey["700"]};
   cursor: pointer;
 `;
@@ -959,7 +961,7 @@ const CampaignCard = (_a) => {
     var { isNew, date, projectTitle, campaignTitle, status, type, labelNew } = _a, props = __rest(_a, ["isNew", "date", "projectTitle", "campaignTitle", "status", "type", "labelNew"]);
     const StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
     const PillIcon = getTypeDataIcon(type);
-    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$2, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, Object.assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, Object.assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, Object.assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
+    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$2, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, Object.assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$3, Object.assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, Object.assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
 };
 
 const StyledTagNew = styled__default["default"](Tag) `
@@ -985,7 +987,7 @@ const ServiceTitle = styled__default["default"](LG) `
   margin-bottom: ${({ theme }) => theme.space.base}px;
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
 `;
-const StyledTag$1 = styled__default["default"](Tag) `
+const StyledTag$2 = styled__default["default"](Tag) `
   margin-right: ${({ theme }) => theme.space.xs};
   margin-top: ${({ theme }) => theme.space.xs};
 `;
@@ -1052,7 +1054,7 @@ const StyledCard$1 = styled__default["default"](SpecialCard) `
 `;
 const ServiceCard = (props) => {
     const { serviceIcon, serviceTitle, serviceSubtitle } = props;
-    return (jsxRuntime.jsxs(StyledCard$1, Object.assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map((button) => button) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, Object.assign({ justifyContent: "start", wrap: true }, { children: props.tags.map((tag, index) => (jsxRuntime.jsxs(StyledTag$1, Object.assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index))) })))] })] })));
+    return (jsxRuntime.jsxs(StyledCard$1, Object.assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map((button) => button) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, Object.assign({ justifyContent: "start", wrap: true }, { children: props.tags.map((tag, index) => (jsxRuntime.jsxs(StyledTag$2, Object.assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$2.Avatar, { children: tag.icon }), tag.label] }), index))) })))] })] })));
 };
 
 const ButtonsWrap = styled__default["default"].div `
@@ -1278,7 +1280,7 @@ const LegendItemWrapper = styled__default["default"].div `
   flex: 0 0 auto;
   overflow: hidden;
 `;
-const StyledSM = styled__default["default"](SM) `
+const StyledSM$1 = styled__default["default"](SM) `
   max-width: calc(100% - ${({ squareSize }) => squareSize}px);
   color: ${({ theme }) => theme.palette.grey[600]};
 `;
@@ -1286,7 +1288,7 @@ const LegendItem = ({ color, value, }) => {
     const theme = React.useContext(styled.ThemeContext);
     const squareSide = theme.space.base * 3;
     const marginRight = theme.space.base * 2;
-    return (jsxRuntime.jsxs(LegendItemWrapper, { children: [jsxRuntime.jsx(LegendColoredSquare, { color: color, size: squareSide, marginRight: marginRight }), jsxRuntime.jsx(StyledSM, Object.assign({ isBold: true, squareSize: squareSide + marginRight }, { children: jsxRuntime.jsx(StyledEllipsis$1, { children: value }) }))] }));
+    return (jsxRuntime.jsxs(LegendItemWrapper, { children: [jsxRuntime.jsx(LegendColoredSquare, { color: color, size: squareSide, marginRight: marginRight }), jsxRuntime.jsx(StyledSM$1, Object.assign({ isBold: true, squareSize: squareSide + marginRight }, { children: jsxRuntime.jsx(StyledEllipsis$1, { children: value }) }))] }));
 };
 const LegendWrapper = styled__default["default"].div `
   width: ${({ width }) => width};
@@ -1666,7 +1668,7 @@ function useWindowSize() {
 }
 
 const StyledSpan = styled__default["default"](Span) ``;
-const StyledTag = styled__default["default"](Tag) `
+const StyledTag$1 = styled__default["default"](Tag) `
   background-color: transparent;
   pointer-events: none;
   ${({ status, theme }) => {
@@ -1697,9 +1699,9 @@ const StyledTag = styled__default["default"](Tag) `
 const Counter = (props) => {
     const { width } = useWindowSize();
     const { status, counter } = props;
-    return (jsxRuntime.jsxs(StyledTag, Object.assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), width > parseInt(theme.breakpoints.sm) && props.children, counter !== undefined && jsxRuntime.jsx(StyledSpan, { children: counter.toString() })] })));
+    return (jsxRuntime.jsxs(StyledTag$1, Object.assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), width > parseInt(theme.breakpoints.sm) && props.children, counter !== undefined && jsxRuntime.jsx(StyledSpan, { children: counter.toString() })] })));
 };
-Counter.Avatar = StyledTag.Avatar;
+Counter.Avatar = StyledTag$1.Avatar;
 
 const UgDrawer = styled__default["default"](reactModals.DrawerModal) `
   @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
@@ -2336,7 +2338,7 @@ const EditorHeader = (props) => {
     return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$1, Object.assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
 };
 
-const Footer$1 = styled__default["default"].div `
+const Footer$2 = styled__default["default"].div `
   display: flex;
   flex-direction: row;
   padding: ${({ theme }) => theme.space.sm} 16px;
@@ -2346,7 +2348,7 @@ const Text = styled__default["default"](SM) `
   line-height: 1.7;
 `;
 const EditorFooter = ({ saveText }) => {
-    return jsxRuntime.jsxs(Footer$1, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
+    return jsxRuntime.jsxs(Footer$2, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
 };
 
 const EditorContainer = styled__default["default"].div `
@@ -2767,6 +2769,64 @@ const Icon = (props) => {
     return (jsxRuntime.jsxs(StyledUgIcon$1, { children: [type === "square" && jsxRuntime.jsx(SvgUgSquare, { width: dim, height: dim }), type === "triangle" && jsxRuntime.jsx(SvgUgTriangle, { width: dim, height: dim }), type === "circle" && jsxRuntime.jsx(SvgUgCircle, { width: dim, height: dim })] }));
 };
 
+const UgModalBody = styled__default["default"](reactModals.Body) `
+  color: ${({ theme }) => theme.palette.grey["800"]};
+`;
+const UgModal = styled__default["default"](reactModals.Modal) `
+  ${({ isExtraLarge }) => isExtraLarge && "height: 90%; width: 90%;"}
+`;
+const ModalComponent = React.forwardRef((props, ref) => (jsxRuntime.jsx(UgModal, Object.assign({ ref: ref }, props))));
+const Modal = ModalComponent;
+const FooterItem = reactModals.FooterItem;
+Modal.Header = reactModals.Header;
+Modal.Body = UgModalBody;
+Modal.Footer = reactModals.Footer;
+
+const StyledBody$5 = styled__default["default"].div `
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: nowrap;
+  padding: 0;
+  min-height: 0;
+`;
+const MainContent = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  width: 66.66666667%;
+  padding: 0;
+  background-color: ${({ theme }) => theme.palette.grey["700"]};
+`;
+const Details = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  width: 33.33333333%;
+  padding: ${({ theme }) => theme.space.md};
+  overflow: auto;
+`;
+const ModalBody = StyledBody$5;
+ModalBody.Main = MainContent;
+ModalBody.Details = Details;
+
+const Footer$1 = styled__default["default"](Modal.Footer) `
+    padding: ${({ theme }) => `${theme.space.base * 3.5}px ${theme.space.xl}`};
+    display: flex;
+    justify-content: space-between;
+`;
+
+/**
+ * Lightbox is a special modal component used to enlarge some specific content or a list of contents with a slider as main content.
+ */
+const LightboxComponent = React.forwardRef((props, ref) => {
+    return jsxRuntime.jsx(Modal, Object.assign({ ref: ref, isExtraLarge: true }, props, { style: { overflow: "hidden" } }));
+});
+const Lightbox = LightboxComponent;
+Lightbox.Header = Modal.Header;
+Lightbox.Body = ModalBody; // Includes Main and Details
+Lightbox.Footer = Footer$1;
+Lightbox.Close = reactModals.Close;
+
 const UgProgress = styled__default["default"](reactLoaders.Progress) ``;
 /**
  * A Progress loader communicates progress when downloading or uploading content.
@@ -3548,6 +3608,9 @@ const DisabledItem = ({ label }) => (jsxRuntime.jsx(reactDropdowns.Item, Object.
 const MultiSelect = ({ options, selectedItems, onChange, creatable, i18n, maxItems, size, menuHeight, }) => {
     var _a, _b, _c;
     const { isLoading, currentSelectedItems, matchingOptions, inputValue, setInputValue, selectItems, } = useOptions({ options, selectedItems, onChange });
+    React.useEffect(() => {
+        selectItems(selectedItems || []);
+    }, [options, selectedItems]);
     const itemToString = (item) => (item ? item.id : "");
     return (jsxRuntime.jsx("div", Object.assign({ style: isLoading ? { pointerEvents: "none", opacity: "0.3" } : {} }, { children: jsxRuntime.jsxs(reactDropdowns.Dropdown, Object.assign({ inputValue: inputValue, selectedItems: currentSelectedItems, onSelect: (items) => selectItems(items), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(reactDropdowns.Field, { children: [jsxRuntime.jsx(reactDropdowns.Label, Object.assign({ hidden: true }, { children: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.label) !== null && _a !== void 0 ? _a : "Multiselect" })), jsxRuntime.jsx(reactDropdowns.Multiselect, { placeholder: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.placeholder) !== null && _b !== void 0 ? _b : "Select Items", isCompact: size !== "medium", maxItems: maxItems, renderItem: ({ value }) => (jsxRuntime.jsxs(reactTags.Tag, Object.assign({ isPill: true }, { children: [jsxRuntime.jsx("span", { children: value.label }), jsxRuntime.jsx(reactTags.Tag.Close, { onClick: () => {
                                             selectItems(currentSelectedItems.filter((item) => item.id !== value.id));
@@ -3561,18 +3624,6 @@ const MultiSelect = ({ options, selectedItems, onChange, creatable, i18n, maxIte
                                         : `Want to add ${inputValue}?` })] })) : null] })] })) })));
 };
 
-const UgModalBody = styled__default["default"](reactModals.Body) `
-  color: ${({ theme }) => theme.palette.grey["800"]};
-`;
-const UgModal = styled__default["default"](reactModals.Modal) `
-  ${({ isExtraLarge }) => isExtraLarge && "height: 90%; width: 90%;"}
-`;
-const Modal = (props) => jsxRuntime.jsx(UgModal, Object.assign({}, props));
-const FooterItem = reactModals.FooterItem;
-Modal.Header = reactModals.Header;
-Modal.Body = UgModalBody;
-Modal.Footer = reactModals.Footer;
-
 const StyledModal$1 = styled__default["default"](Modal) `
   width: 100%;
   height: 100%;
@@ -4173,6 +4224,194 @@ const ProfileModal = (_a) => {
     return (jsxRuntime.jsx(StyledModal, Object.assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, Object.assign({}, menuArgs)) }) })));
 };
 
+const NavButton = styled__default["default"](IconButton) `
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+  z-index: 1;
+`;
+const PrevButton = (props) => (jsxRuntime.jsx(NavButton, Object.assign({}, props, { style: { left: theme.space.md } }, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) })));
+const NextButton = (props) => (jsxRuntime.jsx(NavButton, Object.assign({}, props, { style: { right: theme.space.md } }, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) })));
+
+const SliderContainer = styled__default["default"].div `
+  position: relative;
+  height: 100%;
+`;
+
+const SliderContext = React.createContext(null);
+const SliderContextProvider = ({ children, }) => {
+    const [sliderH, setSliderH] = React.useState();
+    const sliderRef = React.useRef(null);
+    const windowSize = useWindowSize();
+    const SliderContextValue = React.useMemo(() => {
+        return {
+            sliderH,
+            setSliderH,
+        };
+    }, [sliderH, setSliderH]);
+    React.useEffect(() => {
+        var _a;
+        if ((_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)
+            setSliderH(sliderRef.current.clientHeight);
+    }, [sliderRef, windowSize]);
+    return (jsxRuntime.jsx(SliderContext.Provider, Object.assign({ value: SliderContextValue }, { children: jsxRuntime.jsx(SliderContainer, Object.assign({ ref: sliderRef }, { children: children })) })));
+};
+const useSliderContext = () => {
+    const context = React.useContext(SliderContext);
+    if (!context)
+        throw new Error("Provider not found for SliderContextProvider");
+    return context; // Now we can use the context in the component, SAFELY.
+};
+
+const StyledTag = styled__default["default"](Tag) `
+  position: absolute;
+  top: ${({ theme }) => theme.space.sm};
+  right: ${({ theme }) => theme.space.md};
+  padding: ${({ theme }) => `${theme.space.xs} ${theme.space.sm}`};
+  z-index: 1;
+`;
+const StyledSM = styled__default["default"](SM) `
+  color: ${({ theme }) => theme.palette.grey[600]};
+  span {
+    color: ${({ theme }) => theme.colors.primaryHue};
+  }
+`;
+const SliderCounter = ({ current, total, }) => {
+    return (jsxRuntime.jsx(StyledTag, Object.assign({ isPill: true, hue: theme.palette.white }, { children: jsxRuntime.jsxs(StyledSM, { children: [jsxRuntime.jsx("span", { children: current + 1 }), "/", total] }) })));
+};
+
+const StyledSlick = styled__default["default"](SlickSlider__default["default"]) `
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+  height: 100%;
+
+  .slick-list,
+  .slick-track {
+    position: relative;
+    display: block;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .slick-list {
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    .slick-track {
+      top: 0;
+      left: 0;
+
+      &:after,
+      &:before {
+        display: table;
+        content: "";
+      }
+
+      &:after {
+        clear: both;
+      }
+
+      .slick-slide {
+        float: left;
+        min-height: 1px;
+
+        img, video {
+          display: block;
+          height: 100%;
+          width: auto;
+          margin: 0 auto;
+        }
+
+        &.dragging img {
+          pointer-events: none;
+        }
+      }
+    }
+  }
+
+  .slick-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .slick-dots {
+    position: absolute;
+    display: block;
+    padding: 0;
+    bottom: -25px;
+    width: 100%;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+
+    & li {
+      position: relative;
+      display: inline-block;
+      padding: ${({ theme }) => theme.space.xxs};
+      cursor: pointer;
+    }
+  }
+`;
+
+const StyledDiv = styled__default["default"].div `
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: calc(90vh - 161px);
+`;
+const Slide = (props) => {
+    const { sliderH } = useSliderContext();
+    if (!sliderH)
+        return null;
+    return jsxRuntime.jsx(StyledDiv, Object.assign({}, props, { style: { height: `${sliderH}px` } }));
+};
+
+const defaultSettings = {
+    dots: false,
+    infinite: true,
+    adaptiveHeight: true,
+    nextArrow: jsxRuntime.jsx(NextButton, {}),
+    prevArrow: jsxRuntime.jsx(PrevButton, {}),
+    customPaging: (i) => jsxRuntime.jsx(Button, Object.assign({ isBasic: true }, { children: i + 1 })),
+    counter: true,
+};
+/**
+ * Slider is a simple component used to show a series of generic container.
+ * All spaces and margins are delegated to related content component.
+ * <hr>
+ * Used for this:
+    - Show media content
+    - As a slideshow component
+ */
+const Slider = (props) => {
+    const [current, setCurrent] = React.useState(props.initialSlide || 0);
+    const settings = Object.assign(Object.assign({}, defaultSettings), props);
+    const slides = React.Children.toArray(settings.children).length;
+    const updateSlide = React.useCallback((oldIndex, index) => {
+        setCurrent(index);
+        if (props.onSlideChange)
+            props.onSlideChange(index);
+    }, [current]);
+    return (jsxRuntime.jsxs(SliderContextProvider, { children: [settings.counter && jsxRuntime.jsx(SliderCounter, { current: current, total: slides }), jsxRuntime.jsx(StyledSlick, Object.assign({}, settings, { beforeChange: updateSlide }))] }));
+};
+Slider.Slide = Slide;
+
 const UgStep = styled__default["default"](reactAccordions.Stepper.Step) `
   svg {
     color: ${({ theme }) => theme.palette.green[700]};
@@ -4604,6 +4843,7 @@ exports.ItemContent = ItemContent;
 exports.ItemMeta = ItemMeta;
 exports.LG = LG;
 exports.Label = Label;
+exports.Lightbox = Lightbox;
 exports.LoginForm = LoginForm;
 exports.Logo = Logo;
 exports.MD = MD;
@@ -4646,6 +4886,7 @@ exports.Separator = Separator;
 exports.ServiceCard = ServiceCard;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
+exports.Slider = Slider;
 exports.Span = Span;
 exports.SpecialCard = SpecialCard;
 exports.Spinner = Spinner;

package/build/stories/lightbox/_types.d.ts

@@ -0,0 +1,3 @@
+import { ModalArgs } from "../modals/_types";
+export interface LightboxArgs extends Omit<ModalArgs, "isLarge" | "isExtraLarge"> {
+}

package/build/stories/lightbox/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Modal, ModalClose } from "../modals";
+import { ModalBody } from "./parts/body";
+import { Footer } from "./parts/footer";
+import { LightboxArgs } from "./_types";
+export declare const Lightbox: import("react").ForwardRefExoticComponent<LightboxArgs & import("react").RefAttributes<HTMLDivElement>> & {
+    Header: typeof Modal.Header;
+    Body: typeof ModalBody;
+    Footer: typeof Footer;
+    Close: typeof ModalClose;
+};

package/build/stories/lightbox/index.stories.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+/// <reference types="hoist-non-react-statics" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { LightboxArgs } from "./_types";
+import { SliderStoryArg } from "../slider/index.stories";
+interface LightboxStoryArgs extends LightboxArgs {
+    headerTitle: string;
+    headerBugId?: string;
+    slider?: SliderStoryArg;
+}
+export declare const Default: Story<LightboxStoryArgs>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<LightboxArgs & import("react").RefAttributes<HTMLDivElement>> & {
+    Header: import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-modals/dist/typings/types").IHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: string & import("styled-components").StyledComponentBase<"div", any, {}, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+        Main: import("styled-components").StyledComponent<"div", any, {}, never>;
+        Details: import("styled-components").StyledComponent<"div", any, {}, never>;
+    };
+    Footer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Close: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;
+export default _default;

package/build/stories/lightbox/parts/body.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="hoist-non-react-statics" />
+declare const MainContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const Details: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalBody: string & import("styled-components").StyledComponentBase<"div", any, {}, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+    Main: typeof MainContent;
+    Details: typeof Details;
+};
+export {};

package/build/stories/lightbox/parts/footer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Footer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/build/stories/modals/index.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { Close as ModalClose } from "@zendeskgarden/react-modals";
+import { Header as ModalHeader, Footer as ModalFooter, Close as ModalClose } from "@zendeskgarden/react-modals";
 import { ModalArgs } from "./_types";
-declare const Modal: {
-    (props: ModalArgs): JSX.Element;
-    Header: import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-modals/dist/typings/types").IHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
-    Body: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-    Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const UgModalBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const Modal: import("react").ForwardRefExoticComponent<ModalArgs & import("react").RefAttributes<HTMLDivElement>> & {
+    Header: typeof ModalHeader;
+    Body: typeof UgModalBody;
+    Footer: typeof ModalFooter;
 };
 declare const FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
 export { Modal, FooterItem, ModalClose };

package/build/stories/modals/index.stories.d.ts

@@ -10,8 +10,7 @@ export declare const Default: Story<ModalStoryArgs>;
 export declare const Danger: Story<ModalStoryArgs>;
 export declare const Large: Story<ModalStoryArgs>;
 export declare const WithCustomContent: Story<ModalStoryArgs>;
-declare const _default: ComponentMeta<{
-    (props: ModalArgs): JSX.Element;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<ModalArgs & import("react").RefAttributes<HTMLDivElement>> & {
     Header: import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-modals/dist/typings/types").IHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
     Body: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
     Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/build/stories/slider/_types.d.ts

@@ -0,0 +1,9 @@
+import { Settings } from "react-slick";
+export interface SliderArgs extends Settings {
+    counter?: boolean;
+    onSlideChange?: (currentSlide: number) => void;
+}
+export interface SliderContextType {
+    sliderH?: number;
+    setSliderH: (h: number) => void;
+}

package/build/stories/slider/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { SliderArgs } from "./_types";
+/**
+ * Slider is a simple component used to show a series of generic container.
+ * All spaces and margins are delegated to related content component.
+ * <hr>
+ * Used for this:
+    - Show media content
+    - As a slideshow component
+ */
+export declare const Slider: {
+    (props: SliderArgs): JSX.Element;
+    Slide: (props: import("react").HTMLAttributes<HTMLDivElement>) => JSX.Element | null;
+};

package/build/stories/slider/index.stories.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { SliderArgs } from "./_types";
+export interface SliderStoryArg extends SliderArgs {
+    items: Array<{
+        headerTitle?: string;
+        content?: string;
+        imageUrl?: string;
+        videoUrl?: string;
+    }>;
+}
+export declare const Default: Story<SliderStoryArg>;
+export declare const Media: Story<SliderStoryArg>;
+declare const _default: ComponentMeta<{
+    (props: SliderArgs): JSX.Element;
+    Slide: (props: import("react").HTMLAttributes<HTMLDivElement>) => JSX.Element | null;
+}>;
+export default _default;

package/build/stories/slider/parts/buttons.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonArgs } from "../../buttons/icon-button/_types";
+export declare const PrevButton: (props: IconButtonArgs) => JSX.Element;
+export declare const NextButton: (props: IconButtonArgs) => JSX.Element;

package/build/stories/slider/parts/container.d.ts

@@ -0,0 +1 @@
+export declare const SliderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/build/stories/slider/parts/counter.d.ts

@@ -0,0 +1,4 @@
+export declare const SliderCounter: ({ current, total, }: {
+    current: number;
+    total: number;
+}) => JSX.Element;

package/build/stories/slider/parts/slickSlider.d.ts

@@ -0,0 +1,3 @@
+import { SliderArgs } from "../_types";
+import SlickSlider from "react-slick";
+export declare const StyledSlick: import("styled-components").StyledComponent<typeof SlickSlider, any, SliderArgs, never>;

package/build/stories/slider/parts/slide.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from "react";
+export declare const Slide: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element | null;

package/build/stories/slider/parts/sliderContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SliderContextType } from "../_types";
+export declare const SliderContext: import("react").Context<SliderContextType | null>;
+export declare const SliderContextProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useSliderContext: () => SliderContextType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.54",
+  "version": "2.12.56",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",
@@ -17,6 +17,7 @@
     "@tiptap/extension-typography": "^2.0.0-beta.22",
     "@tiptap/react": "^2.0.0-beta.114",
     "@tiptap/starter-kit": "^2.0.0-beta.191",
+    "@types/react-slick": "^0.23.10",
     "@zendeskgarden/css-bedrock": "^9.0.0",
     "@zendeskgarden/react-accordions": "^8.49.0",
     "@zendeskgarden/react-avatars": "^8.49.0",
@@ -33,6 +34,7 @@
     "@zendeskgarden/react-tags": "^8.49.0",
     "@zendeskgarden/react-tooltips": "^8.49.0",
     "@zendeskgarden/react-typography": "^8.49.0",
+    "react-slick": "^0.29.0",
     "react-spring": "^9.4.4",
     "react-window": "^1.8.6",
     "ua-parser-js": "^1.0.2"