@geneui/components 2.11.1 → 2.12.1

package/Holder/index.js

@@ -0,0 +1,261 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { n as noop } from '../index-a0e4e333.js';
+import { g as popoverV2Config } from '../configs-fed6ac34.js';
+import Icon from '../Icon/index.js';
+import Button from '../Button/index.js';
+import Portal from '../Portal/index.js';
+import CustomScrollbar from '../Scrollbar/index.js';
+import ModuleTitle from '../ModuleTitle/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import '../GeneUIProvider/index.js';
+import '../Popover-f4d1cac0.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.1\"] .holder{--delay:200ms;--width:1.9rem;--opened-width:39.9rem;background:var(--background);height:100%;position:relative;top:0;transition:width .4s var(--delay);width:var(--width);z-index:200}[data-gene-ui-version=\"2.12.1\"] .holder.disabled{pointer-events:none}[data-gene-ui-version=\"2.12.1\"] .holder.disabled .holder-toggle .icon{opacity:.5}[data-gene-ui-version=\"2.12.1\"] .holder.pinned{--width:var(--opened-width);--delay:0ms}[data-gene-ui-version=\"2.12.1\"] .holder.pinned.opened .layer-1{transform:scale(1)}[data-gene-ui-version=\"2.12.1\"] .holder.opened{--delay:400ms}[data-gene-ui-version=\"2.12.1\"] .holder.opened .holder-wrapper{opacity:1;width:var(--opened-width)}[data-gene-ui-version=\"2.12.1\"] .holder:not(.pinned).opened .layer-3,[data-gene-ui-version=\"2.12.1\"] .holder:not(.pinned):not(.opened) .layer-2{transform:scale(1)}[data-gene-ui-version=\"2.12.1\"] .holder-c-wrapper{background:var(--background);height:100%;min-width:100%;position:absolute;top:0}[data-gene-ui-version=\"2.12.1\"] .holder-toggle{padding:.5rem;position:absolute;top:1rem}[data-gene-ui-version=\"2.12.1\"] .holder-toggle button{background:var(--background);border-radius:100%;box-shadow:0 0 .2rem rgba(var(--background-sc-rgb),.16);color:var(--hero);cursor:pointer;height:3rem;position:relative;transition:color .25s,background .25s;width:3rem}@media (hover:hover){[data-gene-ui-version=\"2.12.1\"] .holder-toggle button:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.12.1\"] .holder-toggle button.active{background:var(--hero);color:var(--hero-sc)}@media (hover:hover){[data-gene-ui-version=\"2.12.1\"] .holder-toggle button.active:hover{background:var(--hero-hover)}}[data-gene-ui-version=\"2.12.1\"] .holder-toggle .icon{left:0;padding:.3rem;position:absolute;top:0;transform:scale(0);transition:transform .4s,opacity .4s}[data-gene-ui-version=\"2.12.1\"] .holder-wrapper{height:100%;opacity:0;overflow:hidden;position:relative;transition:opacity .15s var(--delay),width .4s var(--delay);width:var(--width)}html:not([dir=rtl]) .holder-left{left:0}html[dir=rtl] .holder-left{right:0}[data-gene-ui-version=\"2.12.1\"] .holder-left .holder-c-wrapper{border-inline-end:1px solid rgba(var(--background-sc-rgb),.1)}html:not([dir=rtl]) .holder-left .holder-c-wrapper{left:0}html[dir=rtl] .holder-left .holder-c-wrapper{right:0}html:not([dir=rtl]) .holder-left .module-header{padding-right:1.5rem}html[dir=rtl] .holder-left .module-header{padding-left:1.5rem}html:not([dir=rtl]) .holder-left .holder-toggle{right:-2rem}html[dir=rtl] .holder-left .holder-toggle{left:-2rem}html:not([dir=rtl]) .holder-right{right:0}html[dir=rtl] .holder-right{left:0}[data-gene-ui-version=\"2.12.1\"] .holder-right .holder-c-wrapper{border-inline-start:1px solid rgba(var(--background-sc-rgb),.1)}html:not([dir=rtl]) .holder-right .holder-c-wrapper{right:0}html[dir=rtl] .holder-right .holder-c-wrapper{left:0}html:not([dir=rtl]) .holder-right .holder-toggle{left:-2rem}html[dir=rtl] .holder-right .holder-toggle{right:-2rem}[data-gene-ui-version=\"2.12.1\"] .opened .holder-content{width:var(--opened-width)}[data-gene-ui-version=\"2.12.1\"] .holder-content{display:grid;grid-template-areas:\"head\" \"body\" \"footer\";grid-template-columns:100%;grid-template-rows:auto 1fr auto;height:100%;overflow:hidden}[data-gene-ui-version=\"2.12.1\"] .holder-content .module-header{grid-area:head}[data-gene-ui-version=\"2.12.1\"] .holder-content .holder-body{grid-area:body}[data-gene-ui-version=\"2.12.1\"] .holder-footer{border-top:1px solid rgba(var(--background-sc-rgb),.1);display:flex;grid-area:footer;padding:2rem}[data-gene-ui-version=\"2.12.1\"] .holder-footer:empty{display:none}[data-gene-ui-version=\"2.12.1\"] .holder-body-c{display:flex;flex-wrap:wrap;padding:1rem}[data-gene-ui-version=\"2.12.1\"] .holder-body-c>*{margin:1rem}[data-gene-ui-version=\"2.12.1\"] .holder-body-c .holder-title{font:600 1.6rem/2rem var(--font-family);margin-bottom:.5rem;padding:0 1rem;width:100%}[data-gene-ui-version=\"2.12.1\"] .holder-body-c .col-6{width:50%}";
+styleInject(css_248z);
+
+function Holder(_ref) {
+  let {
+    title,
+    footer,
+    disabled,
+    children,
+    position,
+    onChange,
+    resetText,
+    applyText,
+    withPortal,
+    className,
+    onReset,
+    onApply,
+    applyDisabled,
+    resetDisabled,
+    defaultOpened,
+    expandText,
+    collapseText,
+    portalContainer,
+    rightIconType,
+    leftIconType,
+    filterIconType,
+    openedWidth,
+    disableOnHover,
+    ...restProps
+  } = _ref;
+  const parentContainer = useRef(null);
+  const isControlled = ('opened' in restProps);
+  const [holderOpened, setHolderOpened] = useState(defaultOpened);
+  const [holderHovered, setHolderHovered] = useState(false);
+  const isOpened = isControlled ? restProps.opened : holderOpened;
+  const handleEvent = open => {
+    if (!isControlled) {
+      setHolderOpened(open);
+      !open && holderHovered && setHolderHovered(false);
+    }
+    onChange(open, holderHovered);
+  };
+
+  // Will open later
+  const handleHover = hovered => {
+    if (!disableOnHover && hovered !== holderHovered) {
+      !isControlled && setHolderHovered(!holderOpened ? hovered : false);
+      onChange(holderOpened, hovered);
+    }
+  };
+  const Content = /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('holder', className, "holder-".concat(position), {
+      pinned: isOpened,
+      opened: holderHovered || isOpened,
+      disabled
+    }),
+    style: {
+      '--opened-width': openedWidth
+    },
+    onMouseLeave: () => {
+      if (!document.documentElement.classList.contains(popoverV2Config.onOpenClassName)) {
+        handleHover(false);
+      }
+    }
+  }, restProps), /*#__PURE__*/React__default.createElement("div", {
+    className: "holder-c-wrapper",
+    ref: parentContainer
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "holder-wrapper",
+    onMouseEnter: () => handleHover(true)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "holder-content"
+  }, title && /*#__PURE__*/React__default.createElement(ModuleTitle, {
+    title: title,
+    size: "extra-big"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "holder-body"
+  }, /*#__PURE__*/React__default.createElement(CustomScrollbar, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "holder-body-c"
+  }, children))), /*#__PURE__*/React__default.createElement("div", {
+    className: "holder-footer"
+  }, footer !== undefined ? footer : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    flexibility: "full-width",
+    appearance: "minimal",
+    color: "default",
+    disabled: resetDisabled,
+    onClick: onReset
+  }, resetText), /*#__PURE__*/React__default.createElement(Button, {
+    flexibility: "full-width",
+    color: "confirm",
+    disabled: applyDisabled,
+    onClick: onApply
+  }, applyText))))), /*#__PURE__*/React__default.createElement("div", {
+    className: "holder-toggle"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: classnames({
+      active: isOpened
+    })
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: isOpened ? collapseText : expandText,
+    position: "right"
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Icon, {
+    type: leftIconType,
+    className: "layer-1",
+    onClick: () => handleEvent(false)
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    type: filterIconType,
+    className: "layer-2",
+    onClick: () => handleEvent(true)
+  }))), /*#__PURE__*/React__default.createElement(Icon, {
+    type: rightIconType,
+    className: "layer-3",
+    onClick: () => handleEvent(true)
+  })))));
+  return withPortal ? /*#__PURE__*/React__default.createElement(Portal, {
+    isOpen: true,
+    container: portalContainer
+  }, Content) : Content;
+}
+Holder.propTypes = {
+  /**
+   * Custom footer,
+   * Any valid React element
+   */
+  footer: PropTypes.node,
+  /**
+   * It prevents the user from changing the state(opened/closed) of holder
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Content of holder,
+   * Valid React element
+   */
+  children: PropTypes.node,
+  /**
+   * Fires event when user changes state(opened/closed) of holder
+   * (holderOpened: Boolean) => void
+   */
+  onChange: PropTypes.func,
+  /**
+   * Wraps component with Portal component if [true]
+   */
+  withPortal: PropTypes.bool,
+  /**
+   * Custom text for reset button
+   */
+  resetText: PropTypes.string,
+  /**
+   * Custom text for apply button
+   */
+  applyText: PropTypes.string,
+  /**
+   * The CSS class name of the wrapper element.
+   */
+  className: PropTypes.string,
+  /**
+   * Fires event when user clicks on reset button
+   * (event: Event) -=> void
+   */
+  onReset: PropTypes.func,
+  /**
+   * Fires event when user clicks on apply button
+   * (event: Event) -=> void
+   */
+  onApply: PropTypes.func,
+  /**
+   * Initial state(opened/closed) for holder, I
+   * If true holder will be opened
+   */
+  defaultOpened: PropTypes.bool,
+  /**
+   * Controlled value or state(opened/closed) for holder, I
+   * If true holder will be opened
+   */
+  opened: PropTypes.bool,
+  /**
+   * Is any valid DOM node, regardless of its location in the DOM.
+   */
+  portalContainer: PropTypes.any,
+  /**
+   * Controls holder position
+   */
+  position: PropTypes.oneOf(['left', 'right']),
+  /**
+   * Title for component
+   */
+  title: PropTypes.string.isRequired,
+  /**
+   * Disabled state for "apply" button
+   */
+  applyDisabled: PropTypes.bool,
+  /**
+   * Disabled state for "reset" button
+   */
+  resetDisabled: PropTypes.bool,
+  /**
+   * Tooltip text for expanding icon
+   */
+  expandText: PropTypes.string.isRequired,
+  /**
+   * Tooltip text for collapsing icon
+   */
+  collapseText: PropTypes.string.isRequired,
+  /**
+   * Width for holder opened state (write with px)
+   */
+  openedWidth: PropTypes.string,
+  /**
+   * Left custom icon name, default is 'bc-icon-arrow-left'
+   */
+  leftIconType: PropTypes.string,
+  /**
+   * Right custom icon name, default is 'bc-icon-arrow-right'
+   */
+  rightIconType: PropTypes.string,
+  /**
+   * Filter custom icon name, default is 'bc-icon-arrow-filter'
+   */
+  filterIconType: PropTypes.string,
+  /**
+   * Disabled hover event which opening Holder component.
+   */
+  disableOnHover: PropTypes.bool
+};
+Holder.defaultProps = {
+  disabled: false,
+  applyText: 'Apply',
+  withPortal: false,
+  resetText: 'Reset',
+  defaultOpened: false,
+  position: 'left',
+  applyDisabled: false,
+  onChange: noop,
+  leftIconType: 'bc-icon-arrow-left',
+  rightIconType: 'bc-icon-arrow-right',
+  filterIconType: 'bc-icon-filter',
+  disableOnHover: false
+};
+
+export { Holder as default };

package/{Icon.js → Icon/index.js}

@@ -1,11 +1,10 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default from 'react';
-import { c as classnames } from './index-6ff23041.js';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import './globalStyling-9c60a159.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import { c as classnames } from '../index-6ff23041.js';
+import PropTypes from 'prop-types';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
 
-var css_248z = "[data-gene-ui-version=\"2.11.0\"] .icon{display:block;font-size:2.4rem}[data-gene-ui-version=\"2.11.0\"] .icon.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .icon.bc-icon-loader{overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .icon.bc-icon-loader:before{animation:loader-icon .3s linear infinite;display:block}@keyframes loader-icon{to{transform:rotate(1turn)}}[data-gene-ui-version=\"2.11.0\"] [dir=rtl] .bc-icon-arrow-right-nav:before{content:\"\\e906\"}[data-gene-ui-version=\"2.11.0\"] [dir=rtl] .bc-icon-arrow-left-nav:before{content:\"\\e90a\"}[data-gene-ui-version=\"2.11.0\"] [dir=rtl] .bc-icon-arrow-right:before{content:\"\\e907\"}[data-gene-ui-version=\"2.11.0\"] [dir=rtl] .bc-icon-arrow-left:before{content:\"\\e90b\"}[data-gene-ui-version=\"2.11.0\"] [dir=rtl] .bc-icon-arrow-forward:before{content:\"\\e901\"}[data-gene-ui-version=\"2.11.0\"] [dir=rtl] .bc-icon-left-outline:before{content:\"\\e959\"}[data-gene-ui-version=\"2.11.0\"] [dir=rtl] .bc-icon-right-outline:before{content:\"\\e955\"}[data-gene-ui-version=\"2.11.0\"] [dir=rtl] .bc-icon-forwards:before{content:\"\\e95b\"}[data-gene-ui-version=\"2.11.0\"] [dir=rtl] .bc-icon-backwards:before{content:\"\\e95a\"}";
+var css_248z = "[data-gene-ui-version=\"2.12.1\"] .icon{display:block;font-size:2.4rem}[data-gene-ui-version=\"2.12.1\"] .icon.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.12.1\"] .icon.bc-icon-loader{overflow:hidden}[data-gene-ui-version=\"2.12.1\"] .icon.bc-icon-loader:before{animation:loader-icon .3s linear infinite;display:block}@keyframes loader-icon{to{transform:rotate(1turn)}}[data-gene-ui-version=\"2.12.1\"] [dir=rtl] .bc-icon-arrow-right-nav:before{content:\"\\e906\"}[data-gene-ui-version=\"2.12.1\"] [dir=rtl] .bc-icon-arrow-left-nav:before{content:\"\\e90a\"}[data-gene-ui-version=\"2.12.1\"] [dir=rtl] .bc-icon-arrow-right:before{content:\"\\e907\"}[data-gene-ui-version=\"2.12.1\"] [dir=rtl] .bc-icon-arrow-left:before{content:\"\\e90b\"}[data-gene-ui-version=\"2.12.1\"] [dir=rtl] .bc-icon-arrow-forward:before{content:\"\\e901\"}[data-gene-ui-version=\"2.12.1\"] [dir=rtl] .bc-icon-left-outline:before{content:\"\\e959\"}[data-gene-ui-version=\"2.12.1\"] [dir=rtl] .bc-icon-right-outline:before{content:\"\\e955\"}[data-gene-ui-version=\"2.12.1\"] [dir=rtl] .bc-icon-forwards:before{content:\"\\e95b\"}[data-gene-ui-version=\"2.12.1\"] [dir=rtl] .bc-icon-backwards:before{content:\"\\e95a\"}";
 styleInject(css_248z);
 
 // This this because in production we need to replace 'nonames.com' with host
@@ -40,19 +39,19 @@ Icon.propTypes = {
   /**
    * Type is the exact icon. You can find valid "type" values in the documentation example
    */
-  type: propTypesExports.string,
+  type: PropTypes.string,
   /**
    * Additional className
    */
-  className: propTypesExports.string,
+  className: PropTypes.string,
   /**
    * Icon disabled state
    */
-  disabled: propTypesExports.bool,
+  disabled: PropTypes.bool,
   /**
    * Will fill the icon when set to "true"
    */
-  isFilled: propTypesExports.bool
+  isFilled: PropTypes.bool
 };
 Icon.defaultProps = {
   disabled: false,

package/{Image.js → Image/index.js}

@@ -1,25 +1,24 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { useMemo } from 'react';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { c as classnames } from './index-6ff23041.js';
-import Empty from './Empty.js';
-import Tooltip from './Tooltip.js';
-import Checkbox from './Checkbox.js';
-import './globalStyling-9c60a159.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './Popover-f4d1cac0.js';
-import './_commonjsHelpers-24198af3.js';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import Empty from '../Empty/index.js';
+import Tooltip from '../Tooltip/index.js';
+import Checkbox from '../Checkbox/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../Popover-f4d1cac0.js';
+import '../_commonjsHelpers-24198af3.js';
 import 'react-dom';
-import './configs-91c86664.js';
-import './index-ac59cb10.js';
-import './dateValidation-67caec66.js';
-import './useDeviceType-dd51db38.js';
-import './useWindowSize-80369d76.js';
-import './GeneUIProvider.js';
-import './checkboxRadioSwitcher-5b69d7bd.js';
-import './guid-8ddf77b3.js';
+import '../configs-fed6ac34.js';
+import '../index-a0e4e333.js';
+import '../dateValidation-67caec66.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../GeneUIProvider/index.js';
+import '../checkboxRadioSwitcher-5b69d7bd.js';
+import '../guid-8ddf77b3.js';
 
-var css_248z = "[data-gene-ui-version=\"2.11.0\"] .image-holder{--image-border-radius:1rem;padding:100% 0 0;position:relative;transition:box-shadow .4s;-webkit-user-select:none;user-select:none;width:100%}[data-gene-ui-version=\"2.11.0\"] .image-holder.with-border{--distance:0.8rem;--image-border-radius:0.6rem;border-radius:1rem;box-shadow:inset 0 0 0 1px rgba(var(--background-sc-rgb),.2)}[data-gene-ui-version=\"2.11.0\"] .image-holder.with-border:hover{box-shadow:inset 0 0 0 1px rgba(var(--background-sc-rgb),.5)}[data-gene-ui-version=\"2.11.0\"] .image-holder.with-border.error{box-shadow:inset 0 0 0 1px rgba(var(--danger-rgb),.5)}[data-gene-ui-version=\"2.11.0\"] .image-holder.with-border.error:hover{box-shadow:inset 0 0 0 1px var(--danger)}[data-gene-ui-version=\"2.11.0\"] .image-content{bottom:var(--distance,0);left:var(--distance,0);position:absolute;right:var(--distance,0);top:var(--distance,0)}[data-gene-ui-version=\"2.11.0\"] .image-content img{border-radius:var(--image-border-radius);display:block;height:100%;object-fit:cover;width:100%}[data-gene-ui-version=\"2.11.0\"] .image-label-holder{background:#0003;border-radius:var(--image-border-radius);cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.11.0\"] .image-heading{align-items:center;display:flex;left:0;padding:0 .7rem;position:absolute;top:1.2rem;width:100%}[data-gene-ui-version=\"2.11.0\"] .image-heading>li{margin:0 .5rem}[data-gene-ui-version=\"2.11.0\"] .image-heading>li.image-cra{background:#fff;border-radius:.3rem;flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .image-heading>li.image-title{color:#fff;flex:auto;font:700 1.2rem/2rem var(--font-family)}[data-gene-ui-version=\"2.11.0\"] .image-actions-holder{align-items:center;background:#0009;border-radius:var(--image-border-radius);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;transition:opacity .4s,visibility .4s;width:100%}[data-gene-ui-version=\"2.11.0\"] .image-holder:not(:hover) .image-actions-holder{opacity:0;visibility:hidden}[data-gene-ui-version=\"2.11.0\"] .image-actions{align-items:center;display:flex}[data-gene-ui-version=\"2.11.0\"] .image-actions>*{box-shadow:inset 0 0 0 5rem #ffffffe6}html:not([dir=rtl]) .image-actions>*+*{margin-left:.5rem}html[dir=rtl] .image-actions>*+*{margin-right:.5rem}[data-gene-ui-version=\"2.11.0\"] .image-empty-state-holder{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}";
+var css_248z = "[data-gene-ui-version=\"2.12.1\"] .image-holder{--image-border-radius:1rem;padding:100% 0 0;position:relative;transition:box-shadow .4s;-webkit-user-select:none;user-select:none;width:100%}[data-gene-ui-version=\"2.12.1\"] .image-holder.with-border{--distance:0.8rem;--image-border-radius:0.6rem;border-radius:1rem;box-shadow:inset 0 0 0 1px rgba(var(--background-sc-rgb),.2)}[data-gene-ui-version=\"2.12.1\"] .image-holder.with-border:hover{box-shadow:inset 0 0 0 1px rgba(var(--background-sc-rgb),.5)}[data-gene-ui-version=\"2.12.1\"] .image-holder.with-border.error{box-shadow:inset 0 0 0 1px rgba(var(--danger-rgb),.5)}[data-gene-ui-version=\"2.12.1\"] .image-holder.with-border.error:hover{box-shadow:inset 0 0 0 1px var(--danger)}[data-gene-ui-version=\"2.12.1\"] .image-content{bottom:var(--distance,0);left:var(--distance,0);position:absolute;right:var(--distance,0);top:var(--distance,0)}[data-gene-ui-version=\"2.12.1\"] .image-content img{border-radius:var(--image-border-radius);display:block;height:100%;object-fit:cover;width:100%}[data-gene-ui-version=\"2.12.1\"] .image-label-holder{background:#0003;border-radius:var(--image-border-radius);cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.12.1\"] .image-heading{align-items:center;display:flex;left:0;padding:0 .7rem;position:absolute;top:1.2rem;width:100%}[data-gene-ui-version=\"2.12.1\"] .image-heading>li{margin:0 .5rem}[data-gene-ui-version=\"2.12.1\"] .image-heading>li.image-cra{background:#fff;border-radius:.3rem;flex-shrink:0}[data-gene-ui-version=\"2.12.1\"] .image-heading>li.image-title{color:#fff;flex:auto;font:700 1.2rem/2rem var(--font-family)}[data-gene-ui-version=\"2.12.1\"] .image-actions-holder{align-items:center;background:#0009;border-radius:var(--image-border-radius);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;transition:opacity .4s,visibility .4s;width:100%}[data-gene-ui-version=\"2.12.1\"] .image-holder:not(:hover) .image-actions-holder{opacity:0;visibility:hidden}[data-gene-ui-version=\"2.12.1\"] .image-actions{align-items:center;display:flex}[data-gene-ui-version=\"2.12.1\"] .image-actions>*{box-shadow:inset 0 0 0 5rem #ffffffe6}html:not([dir=rtl]) .image-actions>*+*{margin-left:.5rem}html[dir=rtl] .image-actions>*+*{margin-right:.5rem}[data-gene-ui-version=\"2.12.1\"] .image-empty-state-holder{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}";
 styleInject(css_248z);
 
 function Image(_ref) {
@@ -78,47 +77,47 @@ Image.propTypes = {
   /**
    * Image path to display
    */
-  src: propTypesExports.string.isRequired,
+  src: PropTypes.string.isRequired,
   /**
    * Will add a border when set to "true"
    */
-  withBorder: propTypesExports.bool,
+  withBorder: PropTypes.bool,
   /**
    * The property will add a checkbox and an overlay over the image.
    */
-  selectMode: propTypesExports.bool,
+  selectMode: PropTypes.bool,
   /**
    * Customize checkbox(will be rendered only when "selectMode" is set to "true").
    */
-  checkboxProps: propTypesExports.object,
+  checkboxProps: PropTypes.object,
   /**
    * Customize image tag with this property.
    */
-  imageProps: propTypesExports.object,
+  imageProps: PropTypes.object,
   /**
    * The property will render "actions" when "selectMode" is not setted to "true". Any valid React node
    */
-  actions: propTypesExports.node,
+  actions: PropTypes.node,
   /**
    * Will add a title to the top of Image atom. Any valid React node
    */
-  title: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * Title for 'Tooltip'.
    */
-  tooltipTitle: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]),
+  tooltipTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * Addional className
    */
-  className: propTypesExports.string,
+  className: PropTypes.string,
   /**
    * Image atom also can be included in "Form" organism. It can be validated as other "Form" elements
    */
-  isValid: propTypesExports.bool,
+  isValid: PropTypes.bool,
   /**
    * Empty state text for component
    */
-  emptyText: propTypesExports.string
+  emptyText: PropTypes.string
 };
 Image.defaultProps = {
   withBorder: false,