rbro-tat-uds 2.2.16 → 2.2.17

package/build/cjs/components/Accordion/Accordion.cjs

@@ -78,7 +78,7 @@ const Accordion = ({ open = false, children, ...rest }) => {
         {
           icon: open ? "select-hide" : "select-open-down",
           size: 18,
-          color: utils.colors.info_800
+          color: utils.colors.info_600
         }
       )
     ] }),

package/build/cjs/components/ConfigurationStickyBar/ConfigurationStickyBar.cjs

@@ -0,0 +1,66 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const ConfigurationStickyBarStyled = styled.div`
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  z-index: 9999;
+  padding-left: 110px;
+  display: ${({ $visible }) => $visible ? "flex" : "none"};
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  & > div {
+    width: 100%;
+    padding: 0px 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 1220px;
+
+    & > div {
+      width: 100%;
+      border-top: 1px solid ${utils.colors.gray_300};
+      border-left: 1px solid ${utils.colors.gray_300};
+      border-right: 1px solid ${utils.colors.gray_300};
+      background-color: ${utils.colors.white};
+    }
+  }
+`;
+const ConfigurationStickyBar = ({
+  referenceContent,
+  children,
+  threshold = 0.6,
+  ...rest
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  React.useEffect(() => {
+    if (!referenceContent?.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.intersectionRatio < threshold);
+      },
+      {
+        threshold: [threshold],
+        root: null
+      }
+    );
+    observer.observe(referenceContent.current);
+    return () => observer.disconnect();
+  }, [referenceContent, threshold]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ConfigurationStickyBarStyled, { $visible: isVisible, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { children }) }) });
+};
+
+exports.default = ConfigurationStickyBar;

package/build/cjs/components/ConfigurationStickyBar/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ConfigurationStickyBar = require('./ConfigurationStickyBar.cjs');
+
+
+
+exports.default = ConfigurationStickyBar.default;

package/build/cjs/components/Content/Content.cjs

@@ -33,7 +33,15 @@ const Content = ({
   gap = 32,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledContentOutside, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(StyledContentInside, { $padding: padding, $gap: gap, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledContentOutside, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+    StyledContentInside,
+    {
+      className: "uds-inner-content-component",
+      $padding: padding,
+      $gap: gap,
+      children
+    }
+  ) });
 };
 
 exports.default = Content;

package/build/cjs/components/Flex/Flex.cjs

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var styled = require('styled-components');
 var utils = require('../../utils');
 
@@ -69,60 +69,64 @@ const StyledFlex = styled.div`
     ${props.$css}
   `}
 `;
-const Flex = ({
-  children,
-  element = "div",
-  width,
-  height,
-  background,
-  gap,
-  direction,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  justify,
-  items,
-  content,
-  padding,
-  margin,
-  radius,
-  border,
-  css: css2,
-  ...rest
-}) => {
-  const limitedAs = {
-    div: "div",
-    main: "main",
-    article: "article",
-    p: "p",
-    span: "span"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledFlex,
-    {
-      $width: width,
-      $height: height,
-      $background: background,
-      $gap: gap,
-      $wrap: wrap,
-      $grow: grow,
-      $shrink: shrink,
-      $basis: basis,
-      $justify: justify,
-      $items: items,
-      $content: content,
-      $padding: padding,
-      $margin: margin,
-      $radius: radius,
-      $border: border,
-      $css: css2,
-      $direction: direction,
-      as: limitedAs[element],
-      ...rest,
-      children
-    }
-  );
-};
+const Flex = React.forwardRef(
+  ({
+    children,
+    element = "div",
+    width,
+    height,
+    background,
+    gap,
+    direction,
+    wrap,
+    grow,
+    shrink,
+    basis,
+    justify,
+    items,
+    content,
+    padding,
+    margin,
+    radius,
+    border,
+    css: css2,
+    ...rest
+  }, ref) => {
+    const limitedAs = {
+      div: "div",
+      main: "main",
+      article: "article",
+      p: "p",
+      span: "span"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledFlex,
+      {
+        ref,
+        $width: width,
+        $height: height,
+        $background: background,
+        $gap: gap,
+        $wrap: wrap,
+        $grow: grow,
+        $shrink: shrink,
+        $basis: basis,
+        $justify: justify,
+        $items: items,
+        $content: content,
+        $padding: padding,
+        $margin: margin,
+        $radius: radius,
+        $border: border,
+        $css: css2,
+        $direction: direction,
+        as: limitedAs[element],
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
 
 exports.default = Flex;

package/build/cjs/components/index.cjs

@@ -95,6 +95,7 @@ var Accordion = require('./Accordion/Accordion.cjs');
 var PropunereAsigurareLocuinta = require('./PropunereAsigurareLocuinta/PropunereAsigurareLocuinta.cjs');
 var Textarea = require('./Textarea/Textarea.cjs');
 var FeedbackCard = require('./FeedbackCard/FeedbackCard.cjs');
+var ConfigurationStickyBar = require('./ConfigurationStickyBar/ConfigurationStickyBar.cjs');
 
 
 
@@ -190,3 +191,4 @@ exports.Accordion = Accordion.default;
 exports.PropunereAsigurareLocuinta = PropunereAsigurareLocuinta.default;
 exports.Textarea = Textarea.default;
 exports.FeedbackCard = FeedbackCard.default;
+exports.ConfigurationStickyBar = ConfigurationStickyBar.default;

package/build/cjs/index.cjs

@@ -61248,7 +61248,15 @@ const Content = ({
   gap = 32,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledContentOutside, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(StyledContentInside, { $padding: padding, $gap: gap, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledContentOutside, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+    StyledContentInside,
+    {
+      className: "uds-inner-content-component",
+      $padding: padding,
+      $gap: gap,
+      children
+    }
+  ) });
 };
 
 const ContentDropdownStyled = styled__default.default.div`
@@ -64839,61 +64847,65 @@ const StyledFlex = styled__default.default.div`
     ${props.$css}
   `}
 `;
-const Flex = ({
-  children,
-  element = "div",
-  width,
-  height,
-  background,
-  gap,
-  direction,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  justify,
-  items,
-  content,
-  padding,
-  margin,
-  radius,
-  border,
-  css: css2,
-  ...rest
-}) => {
-  const limitedAs = {
-    div: "div",
-    main: "main",
-    article: "article",
-    p: "p",
-    span: "span"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledFlex,
-    {
-      $width: width,
-      $height: height,
-      $background: background,
-      $gap: gap,
-      $wrap: wrap,
-      $grow: grow,
-      $shrink: shrink,
-      $basis: basis,
-      $justify: justify,
-      $items: items,
-      $content: content,
-      $padding: padding,
-      $margin: margin,
-      $radius: radius,
-      $border: border,
-      $css: css2,
-      $direction: direction,
-      as: limitedAs[element],
-      ...rest,
-      children
-    }
-  );
-};
+const Flex = React__namespace.default.forwardRef(
+  ({
+    children,
+    element = "div",
+    width,
+    height,
+    background,
+    gap,
+    direction,
+    wrap,
+    grow,
+    shrink,
+    basis,
+    justify,
+    items,
+    content,
+    padding,
+    margin,
+    radius,
+    border,
+    css: css2,
+    ...rest
+  }, ref) => {
+    const limitedAs = {
+      div: "div",
+      main: "main",
+      article: "article",
+      p: "p",
+      span: "span"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledFlex,
+      {
+        ref,
+        $width: width,
+        $height: height,
+        $background: background,
+        $gap: gap,
+        $wrap: wrap,
+        $grow: grow,
+        $shrink: shrink,
+        $basis: basis,
+        $justify: justify,
+        $items: items,
+        $content: content,
+        $padding: padding,
+        $margin: margin,
+        $radius: radius,
+        $border: border,
+        $css: css2,
+        $direction: direction,
+        as: limitedAs[element],
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
 
 const GraficConfiguratiePensiiStyled = styled__default.default.svg`
   & > .limitMinLabel {
@@ -81933,7 +81945,7 @@ const Accordion = ({ open = false, children, ...rest }) => {
         {
           icon: open ? "select-hide" : "select-open-down",
           size: 18,
-          color: utils.colors.info_800
+          color: utils.colors.info_600
         }
       )
     ] }),
@@ -82482,6 +82494,59 @@ const FeedbackCard = ({
   );
 };
 
+const ConfigurationStickyBarStyled = styled__default.default.div`
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  z-index: 9999;
+  padding-left: 110px;
+  display: ${({ $visible }) => $visible ? "flex" : "none"};
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  & > div {
+    width: 100%;
+    padding: 0px 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 1220px;
+
+    & > div {
+      width: 100%;
+      border-top: 1px solid ${utils.colors.gray_300};
+      border-left: 1px solid ${utils.colors.gray_300};
+      border-right: 1px solid ${utils.colors.gray_300};
+      background-color: ${utils.colors.white};
+    }
+  }
+`;
+const ConfigurationStickyBar = ({
+  referenceContent,
+  children,
+  threshold = 0.6,
+  ...rest
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  React.useEffect(() => {
+    if (!referenceContent?.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.intersectionRatio < threshold);
+      },
+      {
+        threshold: [threshold],
+        root: null
+      }
+    );
+    observer.observe(referenceContent.current);
+    return () => observer.disconnect();
+  }, [referenceContent, threshold]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ConfigurationStickyBarStyled, { $visible: isVisible, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { children }) }) });
+};
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AppBranding = AppBranding;
@@ -82495,6 +82560,7 @@ exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.CityPicker = CityPicker;
 exports.ConfigurationSaveInfo = ConfigurationSaveInfo;
+exports.ConfigurationStickyBar = ConfigurationStickyBar;
 exports.Container = Container;
 exports.Content = Content;
 exports.ContentDropdown = ContentDropdown;

package/build/esm/components/Accordion/Accordion.js

@@ -74,7 +74,7 @@ const Accordion = ({ open = false, children, ...rest }) => {
         {
           icon: open ? "select-hide" : "select-open-down",
           size: 18,
-          color: colors.info_800
+          color: colors.info_600
         }
       )
     ] }),

package/build/esm/components/ConfigurationStickyBar/ConfigurationStickyBar.js

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../utils';
+
+const ConfigurationStickyBarStyled = styled.div`
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  z-index: 9999;
+  padding-left: 110px;
+  display: ${({ $visible }) => $visible ? "flex" : "none"};
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  & > div {
+    width: 100%;
+    padding: 0px 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 1220px;
+
+    & > div {
+      width: 100%;
+      border-top: 1px solid ${colors.gray_300};
+      border-left: 1px solid ${colors.gray_300};
+      border-right: 1px solid ${colors.gray_300};
+      background-color: ${colors.white};
+    }
+  }
+`;
+const ConfigurationStickyBar = ({
+  referenceContent,
+  children,
+  threshold = 0.6,
+  ...rest
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    if (!referenceContent?.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.intersectionRatio < threshold);
+      },
+      {
+        threshold: [threshold],
+        root: null
+      }
+    );
+    observer.observe(referenceContent.current);
+    return () => observer.disconnect();
+  }, [referenceContent, threshold]);
+  return /* @__PURE__ */ jsx(ConfigurationStickyBarStyled, { $visible: isVisible, ...rest, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { children }) }) });
+};
+
+export { ConfigurationStickyBar as default };

package/build/esm/components/ConfigurationStickyBar/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import ConfigurationStickyBar from './ConfigurationStickyBar.js';
+
+
+
+export { ConfigurationStickyBar as default };

package/build/esm/components/Content/Content.js

@@ -29,7 +29,15 @@ const Content = ({
   gap = 32,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx(StyledContentOutside, { ...rest, children: /* @__PURE__ */ jsx(StyledContentInside, { $padding: padding, $gap: gap, children }) });
+  return /* @__PURE__ */ jsx(StyledContentOutside, { ...rest, children: /* @__PURE__ */ jsx(
+    StyledContentInside,
+    {
+      className: "uds-inner-content-component",
+      $padding: padding,
+      $gap: gap,
+      children
+    }
+  ) });
 };
 
 export { Content as default };

package/build/esm/components/Flex/Flex.js

@@ -2,7 +2,7 @@
 "use client";
 
 import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React__default from 'react';
 import styled, { css } from 'styled-components';
 import { colors } from '../../utils';
 
@@ -65,60 +65,64 @@ const StyledFlex = styled.div`
     ${props.$css}
   `}
 `;
-const Flex = ({
-  children,
-  element = "div",
-  width,
-  height,
-  background,
-  gap,
-  direction,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  justify,
-  items,
-  content,
-  padding,
-  margin,
-  radius,
-  border,
-  css: css2,
-  ...rest
-}) => {
-  const limitedAs = {
-    div: "div",
-    main: "main",
-    article: "article",
-    p: "p",
-    span: "span"
-  };
-  return /* @__PURE__ */ jsx(
-    StyledFlex,
-    {
-      $width: width,
-      $height: height,
-      $background: background,
-      $gap: gap,
-      $wrap: wrap,
-      $grow: grow,
-      $shrink: shrink,
-      $basis: basis,
-      $justify: justify,
-      $items: items,
-      $content: content,
-      $padding: padding,
-      $margin: margin,
-      $radius: radius,
-      $border: border,
-      $css: css2,
-      $direction: direction,
-      as: limitedAs[element],
-      ...rest,
-      children
-    }
-  );
-};
+const Flex = React__default.forwardRef(
+  ({
+    children,
+    element = "div",
+    width,
+    height,
+    background,
+    gap,
+    direction,
+    wrap,
+    grow,
+    shrink,
+    basis,
+    justify,
+    items,
+    content,
+    padding,
+    margin,
+    radius,
+    border,
+    css: css2,
+    ...rest
+  }, ref) => {
+    const limitedAs = {
+      div: "div",
+      main: "main",
+      article: "article",
+      p: "p",
+      span: "span"
+    };
+    return /* @__PURE__ */ jsx(
+      StyledFlex,
+      {
+        ref,
+        $width: width,
+        $height: height,
+        $background: background,
+        $gap: gap,
+        $wrap: wrap,
+        $grow: grow,
+        $shrink: shrink,
+        $basis: basis,
+        $justify: justify,
+        $items: items,
+        $content: content,
+        $padding: padding,
+        $margin: margin,
+        $radius: radius,
+        $border: border,
+        $css: css2,
+        $direction: direction,
+        as: limitedAs[element],
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
 
 export { Flex as default };

package/build/esm/components/index.js

@@ -93,3 +93,4 @@ export { default as Accordion } from './Accordion/Accordion.js';
 export { default as PropunereAsigurareLocuinta } from './PropunereAsigurareLocuinta/PropunereAsigurareLocuinta.js';
 export { default as Textarea } from './Textarea/Textarea.js';
 export { default as FeedbackCard } from './FeedbackCard/FeedbackCard.js';
+export { default as ConfigurationStickyBar } from './ConfigurationStickyBar/ConfigurationStickyBar.js';

package/build/esm/index.js

@@ -61225,7 +61225,15 @@ const Content = ({
   gap = 32,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx(StyledContentOutside, { ...rest, children: /* @__PURE__ */ jsx(StyledContentInside, { $padding: padding, $gap: gap, children }) });
+  return /* @__PURE__ */ jsx(StyledContentOutside, { ...rest, children: /* @__PURE__ */ jsx(
+    StyledContentInside,
+    {
+      className: "uds-inner-content-component",
+      $padding: padding,
+      $gap: gap,
+      children
+    }
+  ) });
 };
 
 const ContentDropdownStyled = styled.div`
@@ -64816,61 +64824,65 @@ const StyledFlex = styled.div`
     ${props.$css}
   `}
 `;
-const Flex = ({
-  children,
-  element = "div",
-  width,
-  height,
-  background,
-  gap,
-  direction,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  justify,
-  items,
-  content,
-  padding,
-  margin,
-  radius,
-  border,
-  css: css2,
-  ...rest
-}) => {
-  const limitedAs = {
-    div: "div",
-    main: "main",
-    article: "article",
-    p: "p",
-    span: "span"
-  };
-  return /* @__PURE__ */ jsx(
-    StyledFlex,
-    {
-      $width: width,
-      $height: height,
-      $background: background,
-      $gap: gap,
-      $wrap: wrap,
-      $grow: grow,
-      $shrink: shrink,
-      $basis: basis,
-      $justify: justify,
-      $items: items,
-      $content: content,
-      $padding: padding,
-      $margin: margin,
-      $radius: radius,
-      $border: border,
-      $css: css2,
-      $direction: direction,
-      as: limitedAs[element],
-      ...rest,
-      children
-    }
-  );
-};
+const Flex = React__default.forwardRef(
+  ({
+    children,
+    element = "div",
+    width,
+    height,
+    background,
+    gap,
+    direction,
+    wrap,
+    grow,
+    shrink,
+    basis,
+    justify,
+    items,
+    content,
+    padding,
+    margin,
+    radius,
+    border,
+    css: css2,
+    ...rest
+  }, ref) => {
+    const limitedAs = {
+      div: "div",
+      main: "main",
+      article: "article",
+      p: "p",
+      span: "span"
+    };
+    return /* @__PURE__ */ jsx(
+      StyledFlex,
+      {
+        ref,
+        $width: width,
+        $height: height,
+        $background: background,
+        $gap: gap,
+        $wrap: wrap,
+        $grow: grow,
+        $shrink: shrink,
+        $basis: basis,
+        $justify: justify,
+        $items: items,
+        $content: content,
+        $padding: padding,
+        $margin: margin,
+        $radius: radius,
+        $border: border,
+        $css: css2,
+        $direction: direction,
+        as: limitedAs[element],
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
 
 const GraficConfiguratiePensiiStyled = styled.svg`
   & > .limitMinLabel {
@@ -81910,7 +81922,7 @@ const Accordion = ({ open = false, children, ...rest }) => {
         {
           icon: open ? "select-hide" : "select-open-down",
           size: 18,
-          color: colors.info_800
+          color: colors.info_600
         }
       )
     ] }),
@@ -82459,4 +82471,57 @@ const FeedbackCard = ({
   );
 };
 
-export { Accordion, Alert, AppBranding, AutosaveStatus, Bar, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, Card, Checkbox, CityPicker, ConfigurationSaveInfo, Container, Content, ContentDropdown, CreditCard, DashboardCard, DashboardCategory, DashboardSmallShortcut, Datepicker, Divider, DonutGraph, Dropdown, FeedbackCard, Flex, FormField, GraficConfiguratiePensii, GraficContributieUnitlinked, GraficFondInvestitii, GraficFondInvestitiiInflatie, GraficPensii, GraficPlanInvestitii, GraficPropunerePensii, Icon$1 as Icon, IconButton, IconCard, Illustration, ImageCard, InPageTab, InvestmentFundItem, LabeledText, LabeledTextInLine, Layout, Logo, Modal, ObjectiveCard, ObjectiveCardSmall, OfferCard, OperationsDashboardCard, OperationsDashboardCategory, PageMessage, PageTitle, Pill, PlanFinanciarAUMBar, PlanFinanciarAUMGraph, PlanulFinanciarTeaser, ProductTeaser, ProductTeaserButton, ProductTeaserParameters, ProductTeaserStep, ProposalPensii, ProposalUnitlinked, PropunereAsigurareLocuinta, PropunereAsigurariCalatorie, PropunereFlexicredit, PropunereFondInvestitii, PropunuerePlanInvestitii as PropunerePlanInvestitii, Radio, RatesCalculator, Section, SegmentedTabs, SelectionAppCard, SelectionButton, SelectionPill, ShortcutCard, Sidebar, SidebarItem, Slider, Spinner, StepTab, StepsBar, Switch, Tab, TextInput, Textarea, TimedButton, TimelineSteps, TimelineStepsItem, Timer, UnitLinkGraph as UnitlinkGraph, VerticalHeat };
+const ConfigurationStickyBarStyled = styled.div`
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  z-index: 9999;
+  padding-left: 110px;
+  display: ${({ $visible }) => $visible ? "flex" : "none"};
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  & > div {
+    width: 100%;
+    padding: 0px 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 1220px;
+
+    & > div {
+      width: 100%;
+      border-top: 1px solid ${colors.gray_300};
+      border-left: 1px solid ${colors.gray_300};
+      border-right: 1px solid ${colors.gray_300};
+      background-color: ${colors.white};
+    }
+  }
+`;
+const ConfigurationStickyBar = ({
+  referenceContent,
+  children,
+  threshold = 0.6,
+  ...rest
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    if (!referenceContent?.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.intersectionRatio < threshold);
+      },
+      {
+        threshold: [threshold],
+        root: null
+      }
+    );
+    observer.observe(referenceContent.current);
+    return () => observer.disconnect();
+  }, [referenceContent, threshold]);
+  return /* @__PURE__ */ jsx(ConfigurationStickyBarStyled, { $visible: isVisible, ...rest, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { children }) }) });
+};
+
+export { Accordion, Alert, AppBranding, AutosaveStatus, Bar, BreadcrumbItem, Breadcrumbs, Button, ButtonLink, Card, Checkbox, CityPicker, ConfigurationSaveInfo, ConfigurationStickyBar, Container, Content, ContentDropdown, CreditCard, DashboardCard, DashboardCategory, DashboardSmallShortcut, Datepicker, Divider, DonutGraph, Dropdown, FeedbackCard, Flex, FormField, GraficConfiguratiePensii, GraficContributieUnitlinked, GraficFondInvestitii, GraficFondInvestitiiInflatie, GraficPensii, GraficPlanInvestitii, GraficPropunerePensii, Icon$1 as Icon, IconButton, IconCard, Illustration, ImageCard, InPageTab, InvestmentFundItem, LabeledText, LabeledTextInLine, Layout, Logo, Modal, ObjectiveCard, ObjectiveCardSmall, OfferCard, OperationsDashboardCard, OperationsDashboardCategory, PageMessage, PageTitle, Pill, PlanFinanciarAUMBar, PlanFinanciarAUMGraph, PlanulFinanciarTeaser, ProductTeaser, ProductTeaserButton, ProductTeaserParameters, ProductTeaserStep, ProposalPensii, ProposalUnitlinked, PropunereAsigurareLocuinta, PropunereAsigurariCalatorie, PropunereFlexicredit, PropunereFondInvestitii, PropunuerePlanInvestitii as PropunerePlanInvestitii, Radio, RatesCalculator, Section, SegmentedTabs, SelectionAppCard, SelectionButton, SelectionPill, ShortcutCard, Sidebar, SidebarItem, Slider, Spinner, StepTab, StepsBar, Switch, Tab, TextInput, Textarea, TimedButton, TimelineSteps, TimelineStepsItem, Timer, UnitLinkGraph as UnitlinkGraph, VerticalHeat };

package/build/types/components/ConfigurationStickyBar/ConfigurationStickyBar.d.ts

@@ -0,0 +1,11 @@
+import React, { HTMLAttributes } from 'react';
+
+interface ConfigurationStickyBarProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    referenceContent: React.RefObject<HTMLDivElement | null>;
+    threshold?: number;
+}
+declare const ConfigurationStickyBar: React.FC<ConfigurationStickyBarProps>;
+
+export { ConfigurationStickyBar as default };
+export type { ConfigurationStickyBarProps };

package/build/types/components/ConfigurationStickyBar/index.d.ts

@@ -0,0 +1,6 @@
+import ConfigurationStickyBar from './ConfigurationStickyBar.js';
+export { ConfigurationStickyBarProps } from './ConfigurationStickyBar.js';
+
+
+
+export { ConfigurationStickyBar as default };

package/build/types/components/Flex/Flex.d.ts

@@ -28,7 +28,7 @@ interface FlexProps extends HTMLAttributes<HTMLDivElement> {
     border?: string;
     css?: string;
 }
-declare const Flex: React.FC<FlexProps>;
+declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
 
 export { Flex as default };
 export type { FlexProps };

package/build/types/index.d.ts

@@ -91,3 +91,4 @@ export { default as Accordion, AccordionProps } from './components/Accordion/Acc
 export { default as PropunereAsigurareLocuinta, PropunereAsigurareLocuintaProps } from './components/PropunereAsigurareLocuinta/PropunereAsigurareLocuinta.js';
 export { default as Textarea, TextareaProps } from './components/Textarea/Textarea.js';
 export { default as FeedbackCard, FeedbackCardProps } from './components/FeedbackCard/FeedbackCard.js';
+export { default as ConfigurationStickyBar, ConfigurationStickyBarProps } from './components/ConfigurationStickyBar/ConfigurationStickyBar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rbro-tat-uds",
-  "version": "2.2.16",
+  "version": "2.2.17",
   "type": "module",
   "main": "build/cjs/index.cjs",
   "module": "build/esm/index.js",