@nimbus-ds/popover 4.2.0-rc.6 → 4.3.0-rc.11

package/README.md

@@ -32,15 +32,36 @@ The use of arrows is recommended to make a reference between the Popover and the
 
 We can configure the padding according to the component chosen to be inside the Popover, for example if the inserted element already has padding we can deactivate this functionality.
 
+### Overlay
+
+The overlay feature provides a completely transparent and invisible layer that prevents accidental clicks on elements behind the popover. This is particularly useful when the popover is positioned over clickable elements and you want to ensure that clicking outside the popover to close it doesn't unintentionally trigger actions on underlying elements.
+
+When `overlay` is enabled:
+
+- A transparent backdrop covers the entire viewport (completely invisible to users)
+- Clicking outside the popover will close it without triggering underlying elements
+- The overlay doesn't change the visual appearance, unlike Modal which uses a semi-transparent background
+- The popover maintains its correct positioning relative to the trigger element
+
+### Technical Implementation
+
+The overlay implementation uses a custom transparent backdrop instead of the standard `FloatingOverlay` component. This ensures that:
+
+- The popover maintains its correct positioning calculated by floating-ui
+- The overlay doesn't interfere with the popover's placement logic
+- Click prevention works seamlessly without affecting visual positioning
+
 ### Recommendation for use
 
 - View list of products within an order
 - View lists of complementary actions
 - Display content related to new features
+- Use overlay when popover appears over interactive elements to prevent accidental clicks
 
 ### Related components
 
 - Tooltip - Can be used to give the user quick tips related to some element on the screen.
+- Modal - Provides a more intrusive way to display content with built-in overlay functionality.
 
 ## Usage
 

package/dist/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 Use Popovers to bring attention to specific user interface elements and suggest an action or to guide users through a new experience
 
+## 2025-01-17 `4.3.0`
+
+#### 🎉 New features
+
+- Added `overlay` property to render an invisible overlay that prevents accidental clicks on elements behind the popover when enabled. This improves UX by providing click protection without visual interference. ([#XXX](https://github.com/TiendaNube/nimbus-design-system/pull/XXX) by [@usuario](https://github.com/usuario))
+
+## 2025-03-18 `4.2.0`
+
+#### 🎉 New features
+
+- Adds `use-client` directive to the build output in order to support NextJS applications. ([#276](https://github.com/TiendaNube/nimbus-design-system/pull/276) by [@joacotornello](https://github.com/joacotornello))
+
+### 💡 Others
+
+- Rebuild after build process changes to add support for modular imports and Server Components. ([#276](https://github.com/TiendaNube/nimbus-design-system/pull/276) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2023-10-13 `4.1.1`
 
 ### 🎉 New features

package/dist/README.md

@@ -32,15 +32,36 @@ The use of arrows is recommended to make a reference between the Popover and the
 
 We can configure the padding according to the component chosen to be inside the Popover, for example if the inserted element already has padding we can deactivate this functionality.
 
+### Overlay
+
+The overlay feature provides a completely transparent and invisible layer that prevents accidental clicks on elements behind the popover. This is particularly useful when the popover is positioned over clickable elements and you want to ensure that clicking outside the popover to close it doesn't unintentionally trigger actions on underlying elements.
+
+When `overlay` is enabled:
+
+- A transparent backdrop covers the entire viewport (completely invisible to users)
+- Clicking outside the popover will close it without triggering underlying elements
+- The overlay doesn't change the visual appearance, unlike Modal which uses a semi-transparent background
+- The popover maintains its correct positioning relative to the trigger element
+
+### Technical Implementation
+
+The overlay implementation uses a custom transparent backdrop instead of the standard `FloatingOverlay` component. This ensures that:
+
+- The popover maintains its correct positioning calculated by floating-ui
+- The overlay doesn't interfere with the popover's placement logic
+- Click prevention works seamlessly without affecting visual positioning
+
 ### Recommendation for use
 
 - View list of products within an order
 - View lists of complementary actions
 - Display content related to new features
+- Use overlay when popover appears over interactive elements to prevent accidental clicks
 
 ### Related components
 
 - Tooltip - Can be used to give the user quick tips related to some element on the screen.
+- Modal - Provides a more intrusive way to display content with built-in overlay functionality.
 
 ## Usage
 

package/dist/index.d.ts

@@ -149,6 +149,11 @@ export interface PopoverProperties extends PopoverSprinkle {
 	 * @default 10
 	 */
 	offset?: number;
+	/**
+	 * When enabled, renders an invisible overlay that prevents accidental clicks on elements behind the popover.
+	 * @default false
+	 */
+	overlay?: boolean;
 }
 export type PopoverProps = PopoverProperties & Omit<HTMLAttributes<HTMLDivElement>, "children" | "content">;
 export declare const Popover: React.FC<PopoverProps>;

package/dist/index.js

@@ -1 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@floating-ui/react"),require("@nimbus-ds/styles")):"function"==typeof define&&define.amd?define(["react","@floating-ui/react","@nimbus-ds/styles"],t):"object"==typeof exports?exports["@nimbus-ds/popover"]=t(require("react"),require("@floating-ui/react"),require("@nimbus-ds/styles")):e["@nimbus-ds/popover"]=t(e.react,e["@floating-ui/react"],e["@nimbus-ds/styles"])}(global,((e,t,r)=>(()=>{"use strict";var n={443:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Popover=void 0;const n=r(769).__importStar(r(155)),o=r(955),a=r(367),i=({className:e,style:t,visible:r,onVisibility:i,backgroundColor:s="neutral-background",position:c="bottom",padding:l="base",width:u="fit-content",arrow:f=!0,offset:p=10,enabledHover:d=!1,enabledDismiss:y=!0,enabledClick:_=!0,matchReferenceWidth:b=!1,children:v,content:h,...m})=>{const{className:w,style:g,otherProps:P}=a.popover.sprinkle({...m,width:u,padding:l,backgroundColor:s,color:s}),O=(0,n.useRef)(null),[j,S]=(0,n.useState)(!1),x=(0,n.useMemo)((()=>void 0===r?j:r),[r,j]),E=[(0,o.offset)(p),(0,o.arrow)({element:O}),(0,o.shift)(),(0,o.flip)({crossAxis:c.includes("-"),fallbackAxisSideDirection:"end",padding:5}),b&&(0,o.size)({apply({rects:e,elements:t}){Object.assign(t.floating.style,{width:`${e.reference.width}px`})}})].filter((e=>!1!==e)),{refThemeProvider:T}=(0,a.useTheme)(),{context:k,floatingStyles:D}=(0,o.useFloating)({open:x,placement:c,strategy:"fixed",middleware:E,whileElementsMounted:o.autoUpdate,onOpenChange:void 0!==i?i:S}),{getReferenceProps:F,getFloatingProps:R}=(0,o.useInteractions)([(0,o.useHover)(k,{enabled:d,restMs:50,delay:{close:100},handleClose:(0,o.safePolygon)({buffer:1})}),(0,o.useClick)(k,{enabled:_}),(0,o.useDismiss)(k,{enabled:y})]);return n.default.createElement(n.default.Fragment,null,n.default.createElement("div",{"data-testid":"popover-container",ref:k.refs.setReference,...F()},"function"==typeof v?v({open:x,setVisibility:S}):v),n.default.createElement(o.FloatingPortal,{id:"nimbus-popover-floating",root:T?.current},x&&n.default.createElement("div",{...P,ref:k.refs.setFloating,className:[a.popover.classnames.content,w].join(" "),style:{...g,...D},...R()},h,f&&n.default.createElement(o.FloatingArrow,{"data-testid":"arrow-element",ref:O,context:k,fill:"currentColor"}))))};t.Popover=i,i.displayName="Popover"},955:e=>{e.exports=t},367:e=>{e.exports=r},155:t=>{t.exports=e},769:(e,t,r)=>{r.r(t),r.d(t,{__addDisposableResource:()=>A,__assign:()=>a,__asyncDelegator:()=>S,__asyncGenerator:()=>j,__asyncValues:()=>x,__await:()=>O,__awaiter:()=>y,__classPrivateFieldGet:()=>F,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>R,__createBinding:()=>b,__decorate:()=>s,__disposeResources:()=>M,__esDecorate:()=>l,__exportStar:()=>v,__extends:()=>o,__generator:()=>_,__importDefault:()=>D,__importStar:()=>k,__makeTemplateObject:()=>E,__metadata:()=>d,__param:()=>c,__propKey:()=>f,__read:()=>m,__rest:()=>i,__runInitializers:()=>u,__setFunctionName:()=>p,__spread:()=>w,__spreadArray:()=>P,__spreadArrays:()=>g,__values:()=>h,default:()=>q});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function s(e,t,r,n){var o,a=arguments.length,i=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(a<3?o(i):a>3?o(t,r,i):o(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function c(e,t){return function(r,n){t(r,n,e)}}function l(e,t,r,n,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,c=n.kind,l="getter"===c?"get":"setter"===c?"set":"value",u=!t&&e?n.static?e:e.prototype:null,f=t||(u?Object.getOwnPropertyDescriptor(u,n.name):{}),p=!1,d=r.length-1;d>=0;d--){var y={};for(var _ in n)y[_]="access"===_?{}:n[_];for(var _ in n.access)y.access[_]=n.access[_];y.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var b=(0,r[d])("accessor"===c?{get:f.get,set:f.set}:f[l],y);if("accessor"===c){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(s=i(b.get))&&(f.get=s),(s=i(b.set))&&(f.set=s),(s=i(b.init))&&o.unshift(s)}else(s=i(b))&&("field"===c?o.unshift(s):f[l]=s)}u&&Object.defineProperty(u,n.name,f),p=!0}function u(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function f(e){return"symbol"==typeof e?e:"".concat(e)}function p(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function d(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{c(n.next(e))}catch(e){a(e)}}function s(e){try{c(n.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,s)}c((n=n.apply(e,t||[])).next())}))}function _(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(c){return function(s){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(i=0)),i;)try{if(r=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,n=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(6===s[0]&&i.label<o[1]){i.label=o[1],o=s;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(s);break}o[2]&&i.ops.pop(),i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e],n=0}finally{r=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,c])}}}var b=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function v(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||b(t,e,r)}function h(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function m(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function w(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(m(arguments[t]));return e}function g(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,s=a.length;i<s;i++,o++)n[o]=a[i];return n}function P(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function O(e){return this instanceof O?(this.v=e,this):new O(e)}function j(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||s(e,t)}))})}function s(e,t){try{(r=o[e](t)).value instanceof O?Promise.resolve(r.value.v).then(c,l):u(a[0][2],r)}catch(e){u(a[0][3],e)}var r}function c(e){s("next",e)}function l(e){s("throw",e)}function u(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function S(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:O(e[n](t)),done:!1}:o?o(t):t}:o}}function x(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=h(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function E(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var T=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function k(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&b(t,e,r);return T(t,e),t}function D(e){return e&&e.__esModule?e:{default:e}}function F(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function R(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function I(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function A(e,t,r){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var n;if(r){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");n=t[Symbol.asyncDispose]}if(void 0===n){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");n=t[Symbol.dispose]}if("function"!=typeof n)throw new TypeError("Object not disposable.");e.stack.push({value:t,dispose:n,async:r})}else r&&e.stack.push({async:!0});return t}var C="function"==typeof SuppressedError?SuppressedError:function(e,t,r){var n=new Error(r);return n.name="SuppressedError",n.error=e,n.suppressed=t,n};function M(e){function t(t){e.error=e.hasError?new C(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}return function r(){for(;e.stack.length;){var n=e.stack.pop();try{var o=n.dispose&&n.dispose.call(n.value);if(n.async)return Promise.resolve(o).then(r,(function(e){return t(e),r()}))}catch(e){t(e)}}if(e.hasError)throw e.error}()}const q={__extends:o,__assign:a,__rest:i,__decorate:s,__param:c,__metadata:d,__awaiter:y,__generator:_,__createBinding:b,__exportStar:v,__values:h,__read:m,__spread:w,__spreadArrays:g,__spreadArray:P,__await:O,__asyncGenerator:j,__asyncDelegator:S,__asyncValues:x,__makeTemplateObject:E,__importStar:k,__importDefault:D,__classPrivateFieldGet:F,__classPrivateFieldSet:R,__classPrivateFieldIn:I,__addDisposableResource:A,__disposeResources:M}}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return n[e](r,r.exports,a),r.exports}a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{var e=i;Object.defineProperty(e,"__esModule",{value:!0}),e.Popover=void 0;const t=a(443);var r=a(443);Object.defineProperty(e,"Popover",{enumerable:!0,get:function(){return r.Popover}}),e.default=t.Popover})(),i})()));
+"use client";
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@floating-ui/react"),require("@nimbus-ds/styles")):"function"==typeof define&&define.amd?define(["react","@floating-ui/react","@nimbus-ds/styles"],t):"object"==typeof exports?exports["@nimbus-ds/popover"]=t(require("react"),require("@floating-ui/react"),require("@nimbus-ds/styles")):e["@nimbus-ds/popover"]=t(e.react,e["@floating-ui/react"],e["@nimbus-ds/styles"])}(global,((e,t,r)=>(()=>{"use strict";var n={443:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Popover=void 0;const n=r(769).__importStar(r(155)),o=r(955),a=r(367),i=({className:e,style:t,visible:r,onVisibility:i,backgroundColor:s="neutral-background",position:c="bottom",padding:l="base",width:u="fit-content",arrow:f=!0,offset:p=10,enabledHover:d=!1,enabledDismiss:y=!0,enabledClick:_=!0,matchReferenceWidth:v=!1,overlay:b=!1,children:h,content:m,...w})=>{const{className:g,style:P,otherProps:O}=a.popover.sprinkle({...w,width:u,padding:l,backgroundColor:s,color:s}),j=(0,n.useRef)(null),[S,x]=(0,n.useState)(!1),E=(0,n.useMemo)((()=>void 0===r?S:r),[r,S]),T=[(0,o.offset)(p),(0,o.arrow)({element:j}),(0,o.shift)(),(0,o.flip)({crossAxis:c.includes("-"),fallbackAxisSideDirection:"end",padding:5}),v&&(0,o.size)({apply({rects:e,elements:t}){Object.assign(t.floating.style,{width:`${e.reference.width}px`})}})].filter((e=>!1!==e)),{refThemeProvider:k}=(0,a.useTheme)(),{context:D,floatingStyles:F}=(0,o.useFloating)({open:E,placement:c,strategy:"fixed",middleware:T,whileElementsMounted:o.autoUpdate,onOpenChange:void 0!==i?i:x}),{getReferenceProps:R,getFloatingProps:I}=(0,o.useInteractions)([(0,o.useHover)(D,{enabled:d,restMs:50,delay:{close:100},handleClose:(0,o.safePolygon)({buffer:1})}),(0,o.useClick)(D,{enabled:_}),(0,o.useDismiss)(D,{enabled:y,outsidePressEvent:b?"mousedown":void 0})]),A=n.default.createElement("div",{...O,ref:D.refs.setFloating,className:[a.popover.classnames.content,g].join(" "),style:{...P,...F},...I()},m,f&&n.default.createElement(o.FloatingArrow,{"data-testid":"arrow-element",ref:j,context:D,fill:"currentColor"}));return n.default.createElement(n.default.Fragment,null,n.default.createElement("div",{"data-testid":"popover-container",ref:D.refs.setReference,...R()},"function"==typeof h?h({open:E,setVisibility:x}):h),n.default.createElement(o.FloatingPortal,{id:"nimbus-popover-floating",root:k?.current},E&&n.default.createElement(n.default.Fragment,null,b&&n.default.createElement("div",{className:a.popover.classnames.overlay,"data-testid":"popover-overlay"}),A)))};t.Popover=i,i.displayName="Popover"},955:e=>{e.exports=t},367:e=>{e.exports=r},155:t=>{t.exports=e},769:(e,t,r)=>{r.r(t),r.d(t,{__addDisposableResource:()=>A,__assign:()=>a,__asyncDelegator:()=>S,__asyncGenerator:()=>j,__asyncValues:()=>x,__await:()=>O,__awaiter:()=>y,__classPrivateFieldGet:()=>F,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>R,__createBinding:()=>v,__decorate:()=>s,__disposeResources:()=>M,__esDecorate:()=>l,__exportStar:()=>b,__extends:()=>o,__generator:()=>_,__importDefault:()=>D,__importStar:()=>k,__makeTemplateObject:()=>E,__metadata:()=>d,__param:()=>c,__propKey:()=>f,__read:()=>m,__rest:()=>i,__runInitializers:()=>u,__setFunctionName:()=>p,__spread:()=>w,__spreadArray:()=>P,__spreadArrays:()=>g,__values:()=>h,default:()=>q});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function s(e,t,r,n){var o,a=arguments.length,i=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(a<3?o(i):a>3?o(t,r,i):o(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function c(e,t){return function(r,n){t(r,n,e)}}function l(e,t,r,n,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,c=n.kind,l="getter"===c?"get":"setter"===c?"set":"value",u=!t&&e?n.static?e:e.prototype:null,f=t||(u?Object.getOwnPropertyDescriptor(u,n.name):{}),p=!1,d=r.length-1;d>=0;d--){var y={};for(var _ in n)y[_]="access"===_?{}:n[_];for(var _ in n.access)y.access[_]=n.access[_];y.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var v=(0,r[d])("accessor"===c?{get:f.get,set:f.set}:f[l],y);if("accessor"===c){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(s=i(v.get))&&(f.get=s),(s=i(v.set))&&(f.set=s),(s=i(v.init))&&o.unshift(s)}else(s=i(v))&&("field"===c?o.unshift(s):f[l]=s)}u&&Object.defineProperty(u,n.name,f),p=!0}function u(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function f(e){return"symbol"==typeof e?e:"".concat(e)}function p(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function d(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{c(n.next(e))}catch(e){a(e)}}function s(e){try{c(n.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,s)}c((n=n.apply(e,t||[])).next())}))}function _(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(c){return function(s){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(i=0)),i;)try{if(r=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,n=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(6===s[0]&&i.label<o[1]){i.label=o[1],o=s;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(s);break}o[2]&&i.ops.pop(),i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e],n=0}finally{r=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,c])}}}var v=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function b(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||v(t,e,r)}function h(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function m(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function w(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(m(arguments[t]));return e}function g(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,s=a.length;i<s;i++,o++)n[o]=a[i];return n}function P(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function O(e){return this instanceof O?(this.v=e,this):new O(e)}function j(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||s(e,t)}))})}function s(e,t){try{(r=o[e](t)).value instanceof O?Promise.resolve(r.value.v).then(c,l):u(a[0][2],r)}catch(e){u(a[0][3],e)}var r}function c(e){s("next",e)}function l(e){s("throw",e)}function u(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function S(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:O(e[n](t)),done:!1}:o?o(t):t}:o}}function x(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=h(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function E(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var T=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function k(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&v(t,e,r);return T(t,e),t}function D(e){return e&&e.__esModule?e:{default:e}}function F(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function R(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function I(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function A(e,t,r){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var n;if(r){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");n=t[Symbol.asyncDispose]}if(void 0===n){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");n=t[Symbol.dispose]}if("function"!=typeof n)throw new TypeError("Object not disposable.");e.stack.push({value:t,dispose:n,async:r})}else r&&e.stack.push({async:!0});return t}var C="function"==typeof SuppressedError?SuppressedError:function(e,t,r){var n=new Error(r);return n.name="SuppressedError",n.error=e,n.suppressed=t,n};function M(e){function t(t){e.error=e.hasError?new C(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}return function r(){for(;e.stack.length;){var n=e.stack.pop();try{var o=n.dispose&&n.dispose.call(n.value);if(n.async)return Promise.resolve(o).then(r,(function(e){return t(e),r()}))}catch(e){t(e)}}if(e.hasError)throw e.error}()}const q={__extends:o,__assign:a,__rest:i,__decorate:s,__param:c,__metadata:d,__awaiter:y,__generator:_,__createBinding:v,__exportStar:b,__values:h,__read:m,__spread:w,__spreadArrays:g,__spreadArray:P,__await:O,__asyncGenerator:j,__asyncDelegator:S,__asyncValues:x,__makeTemplateObject:E,__importStar:k,__importDefault:D,__classPrivateFieldGet:F,__classPrivateFieldSet:R,__classPrivateFieldIn:I,__addDisposableResource:A,__disposeResources:M}}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return n[e](r,r.exports,a),r.exports}a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{var e=i;Object.defineProperty(e,"__esModule",{value:!0}),e.Popover=void 0;const t=a(443);var r=a(443);Object.defineProperty(e,"Popover",{enumerable:!0,get:function(){return r.Popover}}),e.default=t.Popover})(),i})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/popover",
-  "version": "4.2.0-rc.6",
+  "version": "4.3.0-rc.11",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -29,9 +29,9 @@
     "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
   },
   "devDependencies": {
-    "@nimbus-ds/box": "^4.2.0-rc.6",
-    "@nimbus-ds/webpack": "^1.5.0-rc.2",
+    "@nimbus-ds/box": "workspace:^",
+    "@nimbus-ds/webpack": "workspace:^",
     "@vanilla-extract/dynamic": "^2.0.3"
   },
-  "stableVersion": "4.1.2"
-}
+  "stableVersion": "4.2.0"
+}

package/CHANGELOG.md

@@ -1,137 +0,0 @@
-# Changelog
-
-Use Popovers to bring attention to specific user interface elements and suggest an action or to guide users through a new experience
-
-## 2023-10-13 `4.1.1`
-
-### 🎉 New features
-
-- Added `maxWidth` and `matchReferenceWidth` properties to the Component. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
-
-#### 🐛 Bug fixes
-
-- Fixed bug where the maximum width of the popover exceeded the maximum size of a screen. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
-- Removed fixed minimum width so that the minimum width respects the content of the popover. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
-- Fixed arrow positioning. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
-- Fixed the positioning of the popover so that if it does not fit in the chosen position, it automatically moves to a position that has positioning space. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
-
-#### 📚 3rd party library updates
-
-- Updated `@floating-ui/react@0.26.0`. ([#196](https://github.com/TiendaNube/nimbus-design-system/pull/196) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2023-07-11 `4.1.0`
-
-#### 📚 3rd party library updates
-
-- Updated `@floating-ui/react@0.24.6`. ([#179](https://github.com/TiendaNube/nimbus-design-system/pull/179) by [@juanchigallego](https://github.com/juanchigallego))
-
-## 2023-05-18 `4.0.0`
-
-#### 🛠 Breaking changes
-
-- Changed the dynamic sending option of the `zIndex` property to use `zIndex` in the component API. ([#162](https://github.com/TiendaNube/nimbus-design-system/pull/162) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2023-05-22 `3.2.2`
-
-### 📚 3rd party library updates
-
-- Removed `@floating-ui/react-dom-interactions`. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
-- Added `@floating-ui/react`. ([#157](https://github.com/TiendaNube/nimbus-design-system/pull/157) by [@juanchigallego](https://github.com/juanchigallego))
-
-## 2023-05-02 `3.1.1`
-
-#### 🐛 Bug fixes
-
-- Omit `content` HTML prop on `Popover` API. ([#152](https://github.com/TiendaNube/nimbus-design-system/pull/152) by [@juanchigallego](https://github.com/juanchigallego))
-
-## 2023-04-13 `3.1.0`
-
-#### 🎉 New features
-
-- Added renderProps functionality to the component so that it is possible to obtain the internal state of the popover in the component's children. ([#149](https://github.com/TiendaNube/nimbus-design-system/pull/149) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2023-03-13 `3.0.0`
-
-### 🛠 Breaking changes
-
-- Changed the `backgroundColor` properties to `primary-surfaceHighlight`, `primary-interactiveHover`, `success-surfaceHighlight`, `danger-surfaceHighlight`, `neutral-surfaceHighlight` and `warning-surfaceHighlight`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
-- Changed the `color` properties to `primary-surfaceHighlight`, `primary-interactiveHover`, `success-surfaceHighlight`, `danger-surfaceHighlight`, `neutral-surfaceHighlight` and `warning-surfaceHighlight`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
-
-### 💡 Others
-
-- Refactored style classes to have more semantic names. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2023-02-24 `2.3.0`
-
-### 🎉 New features
-
-- Added `backgroundColor`, `color`, `zIndex`, `height` and `width` properties to the Component. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2023-02-23 `2.2.0`
-
-### 🎉 New features
-
-- Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2023-01-27 `2.1.0`
-
-### 🎉 New features
-
-- Rename color properties to `neutral.background`, `primary.surfaceHighlight`, `success.surfaceHighlight`, `warning.surfaceHighlight`, `danger.surfaceHighlight` and `neutral.surfaceHighlight`. ([#76](https://github.com/TiendaNube/nimbus-design-system/pull/76) by [@juanchigallego](https://github.com/juanchigallego))
-- Add `primary.interactiveHover` option to `appearance` property. ([#76](https://github.com/TiendaNube/nimbus-design-system/pull/76) by [@juanchigallego](https://github.com/juanchigallego))
-
-## 2022-12-22 `2.0.0`
-
-### 💡 Others
-
-- Removed direct dependency on `nimbus-ds/styles` package from component build. ([#69](https://github.com/TiendaNube/nimbus-design-system/pull/69) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2022-12-07 `1.3.0`
-
-### 🎉 New features
-
-- Changed build build to consume inner package `@nimbus-ds/webpack`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
-
-### 📚 3rd party library updates
-
-- Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
-- Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
-- Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
-- Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
-- Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2022-10-24 `1.2.0`
-
-### 🎉 New features
-
-- Added `visible` e `onVisibility` properties to the component. ([#48](https://github.com/TiendaNube/nimbus-design-system/pull/48) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2022-10-21 `1.1.0`
-
-### 🎉 New features
-
-- Added `enabledHover`, `enabledClick`, `enabledDismiss` and `offset` properties to the component. ([#45](https://github.com/TiendaNube/nimbus-design-system/pull/45) by [@juniorconquista](https://github.com/juniorconquista))
-- Added `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start` and `left-end` position to the component property. ([#45](https://github.com/TiendaNube/nimbus-design-system/pull/45) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2022-10-14 `1.0.1`
-
-### 🎉 New features
-
-- Added box-shadow to popover arrow. ([#40](https://github.com/TiendaNube/nimbus-design-system/pull/40) by [@juniorconquista](https://github.com/juniorconquista))
-- Added styles so that the popover container has a maximum width relative to the anchor size. ([#40](https://github.com/TiendaNube/nimbus-design-system/pull/40) by [@juniorconquista](https://github.com/juniorconquista))
-
-## 2022-10-06 `1.0.0`
-
-### 📚 3rd party library updates
-
-- Added `@floating-ui/react-dom-interactions@^0.10.1`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
-- Added `terser-webpack-plugin@5.3.5`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
-- Added `ts-loader@9.3.1`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
-- Added `typescript@4.7.4`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
-- Added `webpack@5.74.0`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
-- Added `webpack-cli@4.10.0`. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
-
-### 🎉 New features
-
-- Added `children`, `content`, `arrow`, `appearance`, `padding` and `position` properties to the Component. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))
-- Added stories on Component. ([#37](https://github.com/TiendaNube/nimbus-design-system/pull/37) by [@juniorconquista](https://github.com/juniorconquista))