npm - @activecollab/components - Versions diffs - 1.0.34 → 1.0.38 - Mend

@activecollab/components 1.0.34 → 1.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/dist/cjs/components/Icons/collection/Minus.js ADDED Viewed

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var MinusIcon = /*#__PURE__*/_react.default.forwardRef(function (props, svgRef) {
+  return /*#__PURE__*/_react.default.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "var(--color-theme-600)",
+    ref: svgRef
+  }, props), /*#__PURE__*/_react.default.createElement("rect", {
+    x: 5,
+    y: 11,
+    width: 14,
+    height: 2,
+    rx: 1,
+    fillRule: "evenodd"
+  }));
+});
+MinusIcon.displayName = "MinusIcon";
+var _default = MinusIcon;
+exports.default = _default;
+//# sourceMappingURL=Minus.js.map

package/dist/cjs/components/Icons/collection/Minus.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/Icons/collection/Minus.tsx"],"names":["MinusIcon","React","forwardRef","props","svgRef","displayName"],"mappings":";;;;;;;AAAA;;;;;;AACA,IAAMA,SAAS,gBAAGC,eAAMC,UAAN,CAChB,UAACC,KAAD,EAAuCC,MAAvC;AAAA,sBACE;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,OAAO,EAAC,WAHV;AAIE,IAAA,KAAK,EAAC,4BAJR;AAKE,IAAA,IAAI,EAAC,wBALP;AAME,IAAA,GAAG,EAAEA;AANP,KAOMD,KAPN,gBASE;AAAM,IAAA,CAAC,EAAE,CAAT;AAAY,IAAA,CAAC,EAAE,EAAf;AAAmB,IAAA,KAAK,EAAE,EAA1B;AAA8B,IAAA,MAAM,EAAE,CAAtC;AAAyC,IAAA,EAAE,EAAE,CAA7C;AAAgD,IAAA,QAAQ,EAAC;AAAzD,IATF,CADF;AAAA,CADgB,CAAlB;;AAeAH,SAAS,CAACK,WAAV,GAAwB,WAAxB;eACeL,S","sourcesContent":["import React from \"react\";\nconst MinusIcon = React.forwardRef(\n (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n <svg\n width={24}\n height={24}\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"var(--color-theme-600)\"\n ref={svgRef}\n {...props}\n >\n <rect x={5} y={11} width={14} height={2} rx={1} fillRule=\"evenodd\" />\n </svg>\n )\n);\nMinusIcon.displayName = \"MinusIcon\";\nexport default MinusIcon;\n"],"file":"Minus.js"}

package/dist/cjs/components/Icons/collection/index.js CHANGED Viewed

@@ -489,6 +489,12 @@ Object.defineProperty(exports, "MessageSmallIcon", {
     return _MessageSmall.default;
   }
 });
+Object.defineProperty(exports, "MinusIcon", {
+  enumerable: true,
+  get: function get() {
+    return _Minus.default;
+  }
+});
 Object.defineProperty(exports, "MoveTriggerIcon", {
   enumerable: true,
   get: function get() {
@@ -928,6 +934,8 @@ var _MessageSmall = _interopRequireDefault(require("./MessageSmall"));
 var _Message = _interopRequireDefault(require("./Message"));
+var _Minus = _interopRequireDefault(require("./Minus"));
 var _MoveTrigger = _interopRequireDefault(require("./MoveTrigger"));
 var _MyWork = _interopRequireDefault(require("./MyWork"));

package/dist/cjs/components/Icons/collection/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/Icons/collection/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as ActivityIcon } from \"./Activity\";\nexport { default as AddCrossTinyIcon } from \"./AddCrossTiny\";\nexport { default as AddCrossIcon } from \"./AddCross\";\nexport { default as ArrowBackIcon } from \"./ArrowBack\";\nexport { default as ArrowCollapseMultipleIcon } from \"./ArrowCollapseMultiple\";\nexport { default as ArrowExpandeMultipleIcon } from \"./ArrowExpandeMultiple\";\nexport { default as ArrowLeftBoxIcon } from \"./ArrowLeftBox\";\nexport { default as ArrowRefreshIcon } from \"./ArrowRefresh\";\nexport { default as AssignIcon } from \"./Assign\";\nexport { default as AttachmentIcon } from \"./Attachment\";\nexport { default as BackIcon } from \"./Back\";\nexport { default as BellOffSmallIcon } from \"./BellOffSmall\";\nexport { default as BellOffIcon } from \"./BellOff\";\nexport { default as BudgetAlertIcon } from \"./BudgetAlert\";\nexport { default as BudgetNoAlertIcon } from \"./BudgetNoAlert\";\nexport { default as CalendarAddXIcon } from \"./CalendarAddX\";\nexport { default as CalendarEmptyIcon } from \"./CalendarEmpty\";\nexport { default as CalendarIcon } from \"./Calendar\";\nexport { default as CancelCrossIcon } from \"./CancelCross\";\nexport { default as CaretLeftIcon } from \"./CaretLeft\";\nexport { default as CaretRightIcon } from \"./CaretRight\";\nexport { default as ChatIcon } from \"./Chat\";\nexport { default as CheckIcon } from \"./Check\";\nexport { default as CheckboxBlankTogglerIcon } from \"./CheckboxBlankToggler\";\nexport { default as CheckboxIcon } from \"./Checkbox\";\nexport { default as ChecklistSmallIcon } from \"./ChecklistSmall\";\nexport { default as ChecklistIcon } from \"./Checklist\";\nexport { default as CircleMultipleIcon } from \"./CircleMultiple\";\nexport { default as ClockAddIcon } from \"./ClockAdd\";\nexport { default as ClockSmallIcon } from \"./ClockSmall\";\nexport { default as ClockStopwatchSmallIcon } from \"./ClockStopwatchSmall\";\nexport { default as ClockStopwatchIcon } from \"./ClockStopwatch\";\nexport { default as ClockIcon } from \"./Clock\";\nexport { default as CloseSmallIcon } from \"./CloseSmall\";\nexport { default as CollapsIcon } from \"./CollapsIcon\";\nexport { default as CollapseAllIcon } from \"./CollapseAll\";\nexport { default as CollapseExpandSingleIcon } from \"./CollapseExpandSingle\";\nexport { default as CommentIcon } from \"./Comment\";\nexport { default as CommentsIcon } from \"./Comments\";\nexport { default as ComputerIcon } from \"./Computer\";\nexport { default as CrownBlankIcon } from \"./CrownBlank\";\nexport { default as CrownSelectedIcon } from \"./CrownSelected\";\nexport { default as DependencySmallIcon } from \"./DependencySmall\";\nexport { default as DependencyIcon } from \"./Dependency\";\nexport { default as DiscussionAddIcon } from \"./DiscussionAdd\";\nexport { default as DollarCheckmarkSmallIcon } from \"./DollarCheckmarkSmall\";\nexport { default as DollarCheckmarkIcon } from \"./DollarCheckmark\";\nexport { default as DollarClockSmallIcon } from \"./DollarClockSmall\";\nexport { default as DollarClockIcon } from \"./DollarClock\";\nexport { default as DollarOffSmallIcon } from \"./DollarOffSmall\";\nexport { default as DollarOffIcon } from \"./DollarOff\";\nexport { default as DollarSmallIcon } from \"./DollarSmall\";\nexport { default as DollarIcon } from \"./Dollar\";\nexport { default as DownloadIcon } from \"./Download\";\nexport { default as DriveIcon } from \"./Drive\";\nexport { default as DropboxIcon } from \"./Dropbox\";\nexport { default as DuplicateIcon } from \"./Duplicate\";\nexport { default as EditIcon } from \"./Edit\";\nexport { default as EmojiIcon } from \"./Emoji\";\nexport { default as EstimatesIcon } from \"./Estimates\";\nexport { default as ExpandAllIcon } from \"./ExpandAll\";\nexport { default as ExpenseAddIcon } from \"./ExpenseAdd\";\nexport { default as ExportIcon } from \"./Export\";\nexport { default as EyeOffSmallIcon } from \"./EyeOffSmall\";\nexport { default as EyeOffIcon } from \"./EyeOff\";\nexport { default as EyeSmallIcon } from \"./EyeSmall\";\nexport { default as EyeIcon } from \"./Eye\";\nexport { default as FilterIcon } from \"./Filter\";\nexport { default as HelpIcon } from \"./Help\";\nexport { default as InfoSmallIcon } from \"./InfoSmall\";\nexport { default as InfoIcon } from \"./Info\";\nexport { default as IntegrationsIcon } from \"./Integrations\";\nexport { default as InvoicesIcon } from \"./Invoices\";\nexport { default as LabelsIcon } from \"./Labels\";\nexport { default as LockSmallIcon } from \"./LockSmall\";\nexport { default as LockIcon } from \"./Lock\";\nexport { default as MarkerIcon } from \"./Marker\";\nexport { default as MenuNavIcon } from \"./MenuNavIcon\";\nexport { default as MessageAddIcon } from \"./MessageAdd\";\nexport { default as MessageSmallIcon } from \"./MessageSmall\";\nexport { default as MessageIcon } from \"./Message\";\nexport { default as MoveTriggerIcon } from \"./MoveTrigger\";\nexport { default as MyWorkIcon } from \"./MyWork\";\nexport { default as NoteAddIcon } from \"./NoteAdd\";\nexport { default as NotificationBellIcon } from \"./NotificationBell\";\nexport { default as OpenExpandedIcon } from \"./OpenExpanded\";\nexport { default as OrderFirstIcon } from \"./OrderFirst\";\nexport { default as PaidSmallIcon } from \"./PaidSmall\";\nexport { default as PauseIcon } from \"./PauseIcon\";\nexport { default as PencilSmallIcon } from \"./PencilSmall\";\nexport { default as PencilIcon } from \"./Pencil\";\nexport { default as PendingPaymentSmallIcon } from \"./PendingPaymentSmall\";\nexport { default as PeopleIcon } from \"./People\";\nexport { default as PersonPlusIcon } from \"./PersonPlus\";\nexport { default as PersonIcon } from \"./Person\";\nexport { default as PlayIcon } from \"./PlayIcon\";\nexport { default as ProjectAddIcon } from \"./ProjectAdd\";\nexport { default as ProjectTemplateIcon } from \"./ProjectTemplate\";\nexport { default as ProjectsIcon } from \"./Projects\";\nexport { default as RadioBlankIcon } from \"./RadioBlank\";\nexport { default as RadioButtonIcon } from \"./RadioButton\";\nexport { default as RearangeIcon } from \"./Rearange\";\nexport { default as RearrangeSmallIcon } from \"./RearrangeSmall\";\nexport { default as RecurringCheckmarkSmallIcon } from \"./RecurringCheckmarkSmall\";\nexport { default as RecurringCheckmarkIcon } from \"./RecurringCheckmark\";\nexport { default as ReportTimeIcon } from \"./ReportTime\";\nexport { default as ReportsIcon } from \"./Reports\";\nexport { default as SearchIcon } from \"./Search\";\nexport { default as SendBlankIcon } from \"./SendBlank\";\nexport { default as SendFilledIcon } from \"./SendFilled\";\nexport { default as SortGeneralIcon } from \"./SortGeneral\";\nexport { default as SortIcon } from \"./SortIcon\";\nexport { default as StarIcon } from \"./Star\";\nexport { default as TaskAddIcon } from \"./TaskAdd\";\nexport { default as TaskListAddIcon } from \"./TaskListAdd\";\nexport { default as TextFormatGeneralAltIcon } from \"./TextFormatGeneralAlt\";\nexport { default as ThumbUpOutlineIcon } from \"./ThumbUpOutline\";\nexport { default as TrashIcon } from \"./Trash\";\nexport { default as TreeDotsIcon } from \"./TreeDots\";\nexport { default as ViewGridIcon } from \"./ViewGrid\";\nexport { default as ViewListIcon } from \"./ViewList\";\nexport { default as VolumeHighIcon } from \"./VolumeHigh\";\nexport { default as VolumeOffIcon } from \"./VolumeOff\";\nexport { default as WarningTriangleSmallIcon } from \"./WarningTriangleSmall\";\nexport { default as WarningTriangleIcon } from \"./WarningTriangle\";\nexport { default as WarningIcon } from \"./Warning\";\nexport { default as WorkloadIcon } from \"./Workload\";\n"],"file":"index.js"}
1	+ {"version":3,"sources":["../../../../../src/components/Icons/collection/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as ActivityIcon } from \"./Activity\";\nexport { default as AddCrossTinyIcon } from \"./AddCrossTiny\";\nexport { default as AddCrossIcon } from \"./AddCross\";\nexport { default as ArrowBackIcon } from \"./ArrowBack\";\nexport { default as ArrowCollapseMultipleIcon } from \"./ArrowCollapseMultiple\";\nexport { default as ArrowExpandeMultipleIcon } from \"./ArrowExpandeMultiple\";\nexport { default as ArrowLeftBoxIcon } from \"./ArrowLeftBox\";\nexport { default as ArrowRefreshIcon } from \"./ArrowRefresh\";\nexport { default as AssignIcon } from \"./Assign\";\nexport { default as AttachmentIcon } from \"./Attachment\";\nexport { default as BackIcon } from \"./Back\";\nexport { default as BellOffSmallIcon } from \"./BellOffSmall\";\nexport { default as BellOffIcon } from \"./BellOff\";\nexport { default as BudgetAlertIcon } from \"./BudgetAlert\";\nexport { default as BudgetNoAlertIcon } from \"./BudgetNoAlert\";\nexport { default as CalendarAddXIcon } from \"./CalendarAddX\";\nexport { default as CalendarEmptyIcon } from \"./CalendarEmpty\";\nexport { default as CalendarIcon } from \"./Calendar\";\nexport { default as CancelCrossIcon } from \"./CancelCross\";\nexport { default as CaretLeftIcon } from \"./CaretLeft\";\nexport { default as CaretRightIcon } from \"./CaretRight\";\nexport { default as ChatIcon } from \"./Chat\";\nexport { default as CheckIcon } from \"./Check\";\nexport { default as CheckboxBlankTogglerIcon } from \"./CheckboxBlankToggler\";\nexport { default as CheckboxIcon } from \"./Checkbox\";\nexport { default as ChecklistSmallIcon } from \"./ChecklistSmall\";\nexport { default as ChecklistIcon } from \"./Checklist\";\nexport { default as CircleMultipleIcon } from \"./CircleMultiple\";\nexport { default as ClockAddIcon } from \"./ClockAdd\";\nexport { default as ClockSmallIcon } from \"./ClockSmall\";\nexport { default as ClockStopwatchSmallIcon } from \"./ClockStopwatchSmall\";\nexport { default as ClockStopwatchIcon } from \"./ClockStopwatch\";\nexport { default as ClockIcon } from \"./Clock\";\nexport { default as CloseSmallIcon } from \"./CloseSmall\";\nexport { default as CollapsIcon } from \"./CollapsIcon\";\nexport { default as CollapseAllIcon } from \"./CollapseAll\";\nexport { default as CollapseExpandSingleIcon } from \"./CollapseExpandSingle\";\nexport { default as CommentIcon } from \"./Comment\";\nexport { default as CommentsIcon } from \"./Comments\";\nexport { default as ComputerIcon } from \"./Computer\";\nexport { default as CrownBlankIcon } from \"./CrownBlank\";\nexport { default as CrownSelectedIcon } from \"./CrownSelected\";\nexport { default as DependencySmallIcon } from \"./DependencySmall\";\nexport { default as DependencyIcon } from \"./Dependency\";\nexport { default as DiscussionAddIcon } from \"./DiscussionAdd\";\nexport { default as DollarCheckmarkSmallIcon } from \"./DollarCheckmarkSmall\";\nexport { default as DollarCheckmarkIcon } from \"./DollarCheckmark\";\nexport { default as DollarClockSmallIcon } from \"./DollarClockSmall\";\nexport { default as DollarClockIcon } from \"./DollarClock\";\nexport { default as DollarOffSmallIcon } from \"./DollarOffSmall\";\nexport { default as DollarOffIcon } from \"./DollarOff\";\nexport { default as DollarSmallIcon } from \"./DollarSmall\";\nexport { default as DollarIcon } from \"./Dollar\";\nexport { default as DownloadIcon } from \"./Download\";\nexport { default as DriveIcon } from \"./Drive\";\nexport { default as DropboxIcon } from \"./Dropbox\";\nexport { default as DuplicateIcon } from \"./Duplicate\";\nexport { default as EditIcon } from \"./Edit\";\nexport { default as EmojiIcon } from \"./Emoji\";\nexport { default as EstimatesIcon } from \"./Estimates\";\nexport { default as ExpandAllIcon } from \"./ExpandAll\";\nexport { default as ExpenseAddIcon } from \"./ExpenseAdd\";\nexport { default as ExportIcon } from \"./Export\";\nexport { default as EyeOffSmallIcon } from \"./EyeOffSmall\";\nexport { default as EyeOffIcon } from \"./EyeOff\";\nexport { default as EyeSmallIcon } from \"./EyeSmall\";\nexport { default as EyeIcon } from \"./Eye\";\nexport { default as FilterIcon } from \"./Filter\";\nexport { default as HelpIcon } from \"./Help\";\nexport { default as InfoSmallIcon } from \"./InfoSmall\";\nexport { default as InfoIcon } from \"./Info\";\nexport { default as IntegrationsIcon } from \"./Integrations\";\nexport { default as InvoicesIcon } from \"./Invoices\";\nexport { default as LabelsIcon } from \"./Labels\";\nexport { default as LockSmallIcon } from \"./LockSmall\";\nexport { default as LockIcon } from \"./Lock\";\nexport { default as MarkerIcon } from \"./Marker\";\nexport { default as MenuNavIcon } from \"./MenuNavIcon\";\nexport { default as MessageAddIcon } from \"./MessageAdd\";\nexport { default as MessageSmallIcon } from \"./MessageSmall\";\nexport { default as MessageIcon } from \"./Message\";\nexport { default as MinusIcon } from \"./Minus\";\nexport { default as MoveTriggerIcon } from \"./MoveTrigger\";\nexport { default as MyWorkIcon } from \"./MyWork\";\nexport { default as NoteAddIcon } from \"./NoteAdd\";\nexport { default as NotificationBellIcon } from \"./NotificationBell\";\nexport { default as OpenExpandedIcon } from \"./OpenExpanded\";\nexport { default as OrderFirstIcon } from \"./OrderFirst\";\nexport { default as PaidSmallIcon } from \"./PaidSmall\";\nexport { default as PauseIcon } from \"./PauseIcon\";\nexport { default as PencilSmallIcon } from \"./PencilSmall\";\nexport { default as PencilIcon } from \"./Pencil\";\nexport { default as PendingPaymentSmallIcon } from \"./PendingPaymentSmall\";\nexport { default as PeopleIcon } from \"./People\";\nexport { default as PersonPlusIcon } from \"./PersonPlus\";\nexport { default as PersonIcon } from \"./Person\";\nexport { default as PlayIcon } from \"./PlayIcon\";\nexport { default as ProjectAddIcon } from \"./ProjectAdd\";\nexport { default as ProjectTemplateIcon } from \"./ProjectTemplate\";\nexport { default as ProjectsIcon } from \"./Projects\";\nexport { default as RadioBlankIcon } from \"./RadioBlank\";\nexport { default as RadioButtonIcon } from \"./RadioButton\";\nexport { default as RearangeIcon } from \"./Rearange\";\nexport { default as RearrangeSmallIcon } from \"./RearrangeSmall\";\nexport { default as RecurringCheckmarkSmallIcon } from \"./RecurringCheckmarkSmall\";\nexport { default as RecurringCheckmarkIcon } from \"./RecurringCheckmark\";\nexport { default as ReportTimeIcon } from \"./ReportTime\";\nexport { default as ReportsIcon } from \"./Reports\";\nexport { default as SearchIcon } from \"./Search\";\nexport { default as SendBlankIcon } from \"./SendBlank\";\nexport { default as SendFilledIcon } from \"./SendFilled\";\nexport { default as SortGeneralIcon } from \"./SortGeneral\";\nexport { default as SortIcon } from \"./SortIcon\";\nexport { default as StarIcon } from \"./Star\";\nexport { default as TaskAddIcon } from \"./TaskAdd\";\nexport { default as TaskListAddIcon } from \"./TaskListAdd\";\nexport { default as TextFormatGeneralAltIcon } from \"./TextFormatGeneralAlt\";\nexport { default as ThumbUpOutlineIcon } from \"./ThumbUpOutline\";\nexport { default as TrashIcon } from \"./Trash\";\nexport { default as TreeDotsIcon } from \"./TreeDots\";\nexport { default as ViewGridIcon } from \"./ViewGrid\";\nexport { default as ViewListIcon } from \"./ViewList\";\nexport { default as VolumeHighIcon } from \"./VolumeHigh\";\nexport { default as VolumeOffIcon } from \"./VolumeOff\";\nexport { default as WarningTriangleSmallIcon } from \"./WarningTriangleSmall\";\nexport { default as WarningTriangleIcon } from \"./WarningTriangle\";\nexport { default as WarningIcon } from \"./Warning\";\nexport { default as WorkloadIcon } from \"./Workload\";\n"],"file":"index.js"}

package/dist/cjs/components/Menu/Menu.js CHANGED Viewed

@@ -108,11 +108,13 @@ var Menu = function Menu(_ref) {
     disableFocusLock: disableFocusLock,
     style: {
       position: windowAbsolutelyPositioned ? "absolute" : "fixed"
-    }
+    },
+    preventDefaultClickEvent: true
   }, /*#__PURE__*/_react.default.createElement(_Overlay.Overlay, {
     className: backgroundElementClass,
     onClick: handleClose,
-    tabIndex: -1
+    tabIndex: -1,
+    disableBackgroundColor: true
   }), /*#__PURE__*/_react.default.createElement(_Popper.Popper, {
     anchorEl: childNode,
     open: childNode ? open : false,

package/dist/cjs/components/Menu/Menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Menu/Menu.tsx"],"names":["Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","setOpen","childNode","setChildNode","elementRef","handleRefRef","ref","undefined","handleRef","handleOpen","event","preventDefault","handleClose","childProps","forceClose","targetProps","onClick","React","cloneElement","displayName"],"mappings":";;;;;;;;;AAAA;;AAWA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;AA0CO,IAAMA,IAAe,GAAG,SAAlBA,IAAkB,OAiBzB;AAAA,MAhBJC,QAgBI,QAhBJA,QAgBI;AAAA,mCAfJC,gBAeI;AAAA,MAfJA,gBAeI,sCAfe,KAef;AAAA,MAdJC,WAcI,QAdJA,WAcI;AAAA,+BAbJC,YAaI;AAAA,MAbJA,YAaI,kCAbW,IAaX;AAAA,uBAZJC,IAYI;AAAA,MAZJA,IAYI,0BAZG,QAYH;AAAA,uBAXJC,IAWI;AAAA,MAXEC,WAWF,0BAXgB,KAWhB;AAAA,MAVJC,MAUI,QAVJA,MAUI;AAAA,MATJC,OASI,QATJA,OASI;AAAA,MARJC,aAQI,QARJA,aAQI;AAAA,2BAPJC,QAOI;AAAA,MAPJA,QAOI,8BAPO,cAOP;AAAA,MANJC,MAMI,QANJA,MAMI;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,aAII,QAJJA,aAII;AAAA,MAHJC,eAGI,QAHJA,eAGI;AAAA,MAFJC,sBAEI,QAFJA,sBAEI;AAAA,mCADJC,0BACI;AAAA,MADJA,0BACI,sCADyB,KACzB;;AACJ,kBAAwB,qBAASV,WAAT,CAAxB;AAAA;AAAA,MAAOD,IAAP;AAAA,MAAaY,OAAb;;AACA,mBAAkC,sBAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AACA,MAAMC,UAAU,GAAG,mBAAuB,IAAvB,CAAnB;AAEA,wBAAU,YAAM;AACdH,IAAAA,OAAO,CAACX,WAAD,CAAP;AACD,GAFD,EAEG,CAACA,WAAD,CAFH;AAIA,MAAMe,YAAY,GAAG,yBACnBV,MAAM,GAAGA,MAAM,CAACW,GAAV,GAAgBC,SADH,EAEnBJ,YAFmB,CAArB;AAIA,MAAMK,SAAS,GAAG,yBAAWH,YAAX,EAAyBD,UAAzB,CAAlB;AAEA,MAAMK,UAAU,GAAG,wBACjB,UAACC,KAAD,EAAwD;AACtDA,IAAAA,KAAK,IAAIA,KAAK,CAACC,cAAN,EAAT;AACAV,IAAAA,OAAO,CAAC,IAAD,CAAP;AACA,WAAOV,MAAP,KAAkB,UAAlB,IAAgCA,MAAM,EAAtC;AACD,GALgB,EAMjB,CAACA,MAAD,CANiB,CAAnB;AASA,MAAMqB,WAAW,GAAG,wBAAY,YAAM;AACpC,QAAI,OAAOnB,aAAP,KAAyB,UAAzB,IAAuC,CAACA,aAAa,EAAzD,EAA6D;AAC3D;AACD;;AACDQ,IAAAA,OAAO,CAAC,KAAD,CAAP;AACA,WAAOT,OAAP,KAAmB,UAAnB,IAAiCA,OAAO,EAAxC;AACD,GANmB,EAMjB,CAACA,OAAD,EAAUC,aAAV,CANiB,CAApB;AAQA,MAAMoB,UAAU,GAAG;AACjBC,IAAAA,UAAU,EAAEF;AADK,GAAnB;AAIA,MAAMG,WAAW,GAAG;AAClB1B,IAAAA,IAAI,EAAJA,IADkB;AAElBiB,IAAAA,GAAG,EAAEE,SAFa;AAGlBQ,IAAAA,OAAO,EAAEP;AAHS,GAApB;AAMA,sBACE,4DACGd,MAAM,iBAAIsB,eAAMC,YAAN,CAAmBvB,MAAnB,EAA2BoB,WAA3B,CADb,EAEG1B,IAAI,gBACH,6BAAC,cAAD;AACE,IAAA,OAAO,EAAEuB,WADX;AAEE,IAAA,iBAAiB,EAAE,CAACzB,YAFtB;AAGE,IAAA,gBAAgB,EAAEF,gBAHpB;AAIE,IAAA,KAAK,EAAE;AACLS,MAAAA,QAAQ,EAAEM,0BAA0B,GAAG,UAAH,GAAgB;AAD/C;~~AAJT~~,~~kBAQE~~,6BAAC,gBAAD;AACE,IAAA,SAAS,EAAED,sBADb;AAEE,IAAA,OAAO,EAAEa,WAFX;AAGE,IAAA,QAAQ,EAAE,CAAC;~~AAHb~~,~~IARF~~,~~eAaE~~,6BAAC,cAAD;AACE,IAAA,QAAQ,EAAEV,SADZ;AAEE,IAAA,IAAI,EAAEA,SAAS,GAAGb,IAAH,GAAU,KAF3B;AAGE,IAAA,SAAS,EAAEK,QAHb;AAIE,IAAA,SAAS,EAAEI,eAJb;AAKE,IAAA,QAAQ,EAAE,CAAC;AALb,kBAOE,6BAAC,kBAAD;AACE,IAAA,SAAS,EAAE,yBACT,sBADS,2BAESV,IAFT,GAGTS,aAHS,EAITD,SAJS,CADb;AAOE,IAAA,KAAK,EAAER,IAPT;AAQE,IAAA,WAAW,EAAEF;AARf,kBAUE,6BAAC,4BAAD;AAAqB,IAAA,KAAK,EAAE;AAAEG,MAAAA,IAAI,EAAJA,IAAF;AAAQY,MAAAA,OAAO,EAAPA;AAAR;AAA5B,KACG,OAAOjB,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC6B,UAAD,CADX,GAEG7B,QAHN,CAVF,CAPF,~~CAbF~~,CADG,~~GAuCD~~,~~IAzCN~~,CADF;~~AA6CD~~,~~CAxGM~~;;;~~AA0GPD~~,IAAI,CAACoC,WAAL,GAAmB,MAAnB","sourcesContent":["import React, {\n useRef,\n FC,\n ReactNode,\n MouseEvent,\n useState,\n useCallback,\n useEffect,\n ReactElement,\n Ref,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper } from \"../Popper\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\nimport { Placement } from \"@popperjs/core\";\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\n\ninterface ElementWithRef<T> extends ReactElement {\n ref?: Ref<T>;\n}\n\nexport type MenuMode = \"normal\" \| \"wider\" \| \"tiny\";\n\nexport interface IMenu {\n /** Menu content /\n children: ReactNode;\n /* On menu element click /\n onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n /* Handle scroll bar /\n handleScroll?: boolean;\n /* Disable Focus Lock /\n disableFocusLock?: boolean;\n /* Menu width mode /\n mode?: MenuMode;\n /* Should menu be open when it's mounted /\n open?: boolean;\n /* Callback triggered when modal has been opened /\n onOpen?: () => void;\n /* Callback triggered when modal has been closed /\n onClose?: () => void;\n /* Before close callback /\n onBeforeClose?: () => boolean;\n /* Position Menu /\n position?: Placement;\n /* Target element /\n target?: ElementWithRef<Element>;\n className?: string;\n /* Menu classes /\n menuClassName?: string;\n /* Popper class name/\n popperClassName?: string;\n /* Background style for clickable element after the menu is open (opacity, color, etc...) /\n backgroundElementClass?: string;\n /* Should Window be positioned absolutely */\n windowAbsolutelyPositioned?: boolean;\n}\n\nexport const Menu: FC<IMenu> = ({\n children,\n disableFocusLock = false,\n onMenuClick,\n handleScroll = true,\n mode = \"normal\",\n open: defaultOpen = false,\n onOpen,\n onClose,\n onBeforeClose,\n position = \"bottom-start\",\n target,\n className,\n menuClassName,\n popperClassName,\n backgroundElementClass,\n windowAbsolutelyPositioned = false,\n}) => {\n const [open, setOpen] = useState(defaultOpen);\n const [childNode, setChildNode] = useState<Element \| null>();\n const elementRef = useRef<Element \| null>(null);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleRefRef = useForkRef(\n target ? target.ref : undefined,\n setChildNode\n );\n const handleRef = useForkRef(handleRefRef, elementRef);\n\n const handleOpen = useCallback(\n (event: Pick<MouseEvent<Element>, \"preventDefault\">) => {\n event && event.preventDefault();\n setOpen(true);\n typeof onOpen === \"function\" && onOpen();\n },\n [onOpen]\n );\n\n const handleClose = useCallback(() => {\n if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n return;\n }\n setOpen(false);\n typeof onClose === \"function\" && onClose();\n }, [onClose, onBeforeClose]);\n\n const childProps = {\n forceClose: handleClose,\n };\n\n const targetProps = {\n open,\n ref: handleRef,\n onClick: handleOpen,\n };\n\n return (\n <>\n {target && React.cloneElement(target, targetProps)}\n {open ? (\n <Window\n onClose={handleClose}\n disableScrollLock={!handleScroll}\n disableFocusLock={disableFocusLock}\n style={{\n position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n }}\n >\n <Overlay\n className={backgroundElementClass}\n onClick={handleClose}\n tabIndex={-1}\n />\n <Popper\n anchorEl={childNode}\n open={childNode ? open : false}\n placement={position}\n className={popperClassName}\n tabIndex={-1}\n >\n <StyledMenu\n className={classnames(\n \"c-simple-menu__paper\",\n `c-simple-menu__${mode}`,\n menuClassName,\n className\n )}\n $mode={mode}\n onMouseDown={onMenuClick}\n >\n <MenuContextProvider value={{ open, setOpen }}>\n {typeof children === \"function\"\n ? children(childProps)\n : children}\n </MenuContextProvider>\n </StyledMenu>\n </Popper>\n </Window>\n ) : null}\n </>\n );\n};\n\nMenu.displayName = \"Menu\";\n"],"file":"Menu.js"}
1	+ {"version":3,"sources":["../../../../src/components/Menu/Menu.tsx"],"names":["Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","setOpen","childNode","setChildNode","elementRef","handleRefRef","ref","undefined","handleRef","handleOpen","event","preventDefault","handleClose","childProps","forceClose","targetProps","onClick","React","cloneElement","displayName"],"mappings":"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","sourcesContent":["import React, {\n useRef,\n FC,\n ReactNode,\n MouseEvent,\n useState,\n useCallback,\n useEffect,\n ReactElement,\n Ref,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper } from \"../Popper\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\nimport { Placement } from \"@popperjs/core\";\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\n\ninterface ElementWithRef<T> extends ReactElement {\n ref?: Ref<T>;\n}\n\nexport type MenuMode = \"normal\" \| \"wider\" \| \"tiny\";\n\nexport interface IMenu {\n /** Menu content /\n children: ReactNode;\n /* On menu element click /\n onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n /* Handle scroll bar /\n handleScroll?: boolean;\n /* Disable Focus Lock /\n disableFocusLock?: boolean;\n /* Menu width mode /\n mode?: MenuMode;\n /* Should menu be open when it's mounted /\n open?: boolean;\n /* Callback triggered when modal has been opened /\n onOpen?: () => void;\n /* Callback triggered when modal has been closed /\n onClose?: () => void;\n /* Before close callback /\n onBeforeClose?: () => boolean;\n /* Position Menu /\n position?: Placement;\n /* Target element /\n target?: ElementWithRef<Element>;\n className?: string;\n /* Menu classes /\n menuClassName?: string;\n /* Popper class name/\n popperClassName?: string;\n /* Background style for clickable element after the menu is open (opacity, color, etc...) /\n backgroundElementClass?: string;\n /* Should Window be positioned absolutely */\n windowAbsolutelyPositioned?: boolean;\n}\n\nexport const Menu: FC<IMenu> = ({\n children,\n disableFocusLock = false,\n onMenuClick,\n handleScroll = true,\n mode = \"normal\",\n open: defaultOpen = false,\n onOpen,\n onClose,\n onBeforeClose,\n position = \"bottom-start\",\n target,\n className,\n menuClassName,\n popperClassName,\n backgroundElementClass,\n windowAbsolutelyPositioned = false,\n}) => {\n const [open, setOpen] = useState(defaultOpen);\n const [childNode, setChildNode] = useState<Element \| null>();\n const elementRef = useRef<Element \| null>(null);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleRefRef = useForkRef(\n target ? target.ref : undefined,\n setChildNode\n );\n const handleRef = useForkRef(handleRefRef, elementRef);\n\n const handleOpen = useCallback(\n (event: Pick<MouseEvent<Element>, \"preventDefault\">) => {\n event && event.preventDefault();\n setOpen(true);\n typeof onOpen === \"function\" && onOpen();\n },\n [onOpen]\n );\n\n const handleClose = useCallback(() => {\n if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n return;\n }\n setOpen(false);\n typeof onClose === \"function\" && onClose();\n }, [onClose, onBeforeClose]);\n\n const childProps = {\n forceClose: handleClose,\n };\n\n const targetProps = {\n open,\n ref: handleRef,\n onClick: handleOpen,\n };\n\n return (\n <>\n {target && React.cloneElement(target, targetProps)}\n {open ? (\n <Window\n onClose={handleClose}\n disableScrollLock={!handleScroll}\n disableFocusLock={disableFocusLock}\n style={{\n position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n }}\n preventDefaultClickEvent\n >\n <Overlay\n className={backgroundElementClass}\n onClick={handleClose}\n tabIndex={-1}\n disableBackgroundColor\n />\n <Popper\n anchorEl={childNode}\n open={childNode ? open : false}\n placement={position}\n className={popperClassName}\n tabIndex={-1}\n >\n <StyledMenu\n className={classnames(\n \"c-simple-menu__paper\",\n `c-simple-menu__${mode}`,\n menuClassName,\n className\n )}\n $mode={mode}\n onMouseDown={onMenuClick}\n >\n <MenuContextProvider value={{ open, setOpen }}>\n {typeof children === \"function\"\n ? children(childProps)\n : children}\n </MenuContextProvider>\n </StyledMenu>\n </Popper>\n </Window>\n ) : null}\n </>\n );\n};\n\nMenu.displayName = \"Menu\";\n"],"file":"Menu.js"}

package/dist/cjs/components/Modal/Modal.js CHANGED Viewed

@@ -15,7 +15,7 @@ var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
 var _createChainedFunction = _interopRequireDefault(require("../../utils/createChainedFunction"));
-var _Styles = require("./Styles");
+var _Overlay = require("../Overlay");
 var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "open", "onClose"];
@@ -87,9 +87,8 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       typeof onClose === "function" && onClose();
     }
   }, [hasTransition, onClose]);
-  var handleBackgroundClick = (0, _react.useCallback)(function (event) {
+  var handleBackgroundClick = (0, _react.useCallback)(function () {
     if (!disableBackgroundClick) {
-      event.preventDefault();
       handleClose();
     }
   }, [disableBackgroundClick, handleClose]);
@@ -122,12 +121,12 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: handleRef,
     onClose: handleClose,
     disableFocusLock: disableFocusLock,
-    disableScrollLock: disableScrollLock
-  }), /*#__PURE__*/_react.default.createElement(_Styles.StyledModalOverlay, {
+    disableScrollLock: disableScrollLock,
+    preventDefaultClickEvent: true
+  }), open ? /*#__PURE__*/_react.default.createElement(_Overlay.Overlay, {
     onClick: handleBackgroundClick,
-    $disableBackgroundColor: disableBackgroundColor,
-    $open: open
-  }), /*#__PURE__*/(0, _react.cloneElement)(children, childProps));
+    disableBackgroundColor: disableBackgroundColor
+  }) : null, /*#__PURE__*/(0, _react.cloneElement)(children, childProps));
 });
 exports.Modal = Modal;
 Modal.displayName = "Modal";

package/dist/cjs/components/Modal/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"names":["getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","open","defaultOpen","onClose","rest","setOpen","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","~~event","preventDefault","~~handleEnter","handleExited","childProps","onEnter","onExited","in","displayName"],"mappings":";;;;;;;;;AAAA;;~~AAYA~~;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,QAAD,EAAuB;AAC9C,SAAOA,QAAQ,CAACC,KAAT,GACHC,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,QAAQ,CAACC,KAA9C,EAAqD,IAArD,CADG,GAEH,KAFJ;AAGD,CAJD;;AAMO,IAAMK,KAAK,gBAAG,uBAInB,gBAWEC,GAXF,EAYK;AAAA,MAVDP,QAUC,QAVDA,QAUC;AAAA,mCATDQ,gBASC;AAAA,MATDA,gBASC,sCATkB,KASlB;AAAA,mCARDC,iBAQC;AAAA,MARDA,iBAQC,sCARmB,KAQnB;AAAA,mCAPDC,sBAOC;AAAA,MAPDA,sBAOC,sCAPwB,KAOxB;AAAA,oCANDC,sBAMC;AAAA,MANDA,sBAMC,uCANwB,KAMxB;AAAA,uBALDC,IAKC;AAAA,MALKC,WAKL,0BALmB,KAKnB;AAAA,MAJDC,OAIC,QAJDA,OAIC;AAAA,MAHEC,IAGF;;AACH,kBAAwB,qBAASF,WAAT,CAAxB;AAAA;AAAA,MAAOD,IAAP;AAAA,MAAaI,OAAb;;AACA,mBAA4B,qBAAS,IAAT,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,QAAQ,GAAG,mBAAuB,IAAvB,CAAjB;AACA,MAAMC,SAAS,GAAG,yBAAWD,QAAX,EAAqBZ,GAArB,CAAlB;AAEA,MAAMc,aAAa,GAAG,oBAAQ,YAAM;AAClC,WAAOtB,gBAAgB,CAACC,QAAD,CAAvB;AACD,GAFqB,EAEnB,CAACA,QAAD,CAFmB,CAAtB;AAIA,wBAAU,YAAM;AACdgB,IAAAA,OAAO,CAACH,WAAD,CAAP;AACD,GAFD,EAEG,CAACA,WAAD,CAFH;AAIA,MAAMS,WAAW,GAAG,wBAAY,YAAM;AACpCN,IAAAA,OAAO,CAAC,KAAD,CAAP;;AACA,QAAI,CAACK,aAAL,EAAoB;AAClB,aAAOP,OAAP,KAAmB,UAAnB,IAAiCA,OAAO,EAAxC;AACD;AACF,GALmB,EAKjB,CAACO,aAAD,EAAgBP,OAAhB,CALiB,CAApB;AAOA,MAAMS,qBAAqB,GAAG,~~wBAC5B~~,~~UAACC,KAAD,EAAuC~~;~~AACrC~~,QAAI,~~CAACd~~,sBAAL,EAA6B;~~AAC3Bc~~,MAAAA,~~KAAK,CAACC,cAAN;AACAH,MAAAA,~~WAAW;AACZ;AACF,~~GAN2B~~,~~EAO5B~~,CAACZ,sBAAD,EAAyBY,WAAzB,~~CAP4B~~,CAA9B;~~AAUA~~,~~MAAMI~~,WAAW,GAAG,wBAAY,YAAM;~~AACpCR~~,IAAAA,SAAS,CAAC,KAAD,CAAT;AACD,GAFmB,EAEjB,EAFiB,CAApB;AAIA,~~MAAMS~~,YAAY,GAAG,wBAAY,YAAM;~~AACrCT~~,IAAAA,SAAS,CAAC,IAAD,CAAT;AACA,WAAOJ,OAAP,KAAmB,UAAnB,IAAiCA,OAAO,EAAxC;AACD,GAHoB,EAGlB,CAACA,OAAD,CAHkB,CAArB;AAKA,~~MAAMc~~,UAAU,GAAG,oBAAQ,YAAM;AAC/B,~~QAAI3B~~,KAAK,GAAG,EAAZ,CAD+B,CAG/B;;AACA,QAAIoB,aAAa,IAAIrB,QAArB,EAA+B;AAC7BC,MAAAA,KAAK,GAAG;~~AACN4B~~,QAAAA,OAAO,EAAE,oCAAsBH,WAAtB,~~EAAmC1B~~,QAAQ,CAACC,KAAT,~~CAAe4B~~,OAAlD,CADH;AAENC,QAAAA,QAAQ,EAAE,oCACRH,YADQ,~~EAER3B~~,QAAQ,CAACC,KAAT,~~CAAe6B~~,QAFP,CAFJ;AAMNC,QAAAA,EAAE,~~EAAEnB~~;AANE,OAAR;AAQD;;AAED,WAAOX,KAAP;AACD,GAhBkB,EAgBhB,CAACD,QAAD,~~EAAW0B~~,WAAX,EAAwBC,YAAxB,~~EAAsCN~~,aAAtC,EAAqDT,IAArD,CAhBgB,CAAnB;;AAkBA,MAAI,CAACA,IAAD,KAAU,CAACS,aAAD,IAAkBJ,MAA5B,CAAJ,EAAyC;AACvC,WAAO,IAAP;AACD;;AAED,sBACE,6BAAC,cAAD,eACMF,IADN;AAEE,IAAA,GAAG,EAAEK,SAFP;AAGE,IAAA,OAAO,EAAEE,WAHX;AAIE,IAAA,gBAAgB,EAAEd,gBAJpB;AAKE,IAAA,iBAAiB,EAAEC;~~AALrB~~,~~mBAOE~~,6BAAC,~~0BAAD~~;AACE,IAAA,OAAO,~~EAAEc~~,qBADX;AAEE,IAAA,~~uBAAuB~~,EAAEZ~~,sBAF3B~~;~~AAGE~~,~~IAAA~~,~~KAAK~~,~~EAAEC;AAHT~~,~~IAPF~~,~~eAYG~~,~~yBAAaZ,~~QAAb,~~EAAuB4B~~,UAAvB,~~CAZH~~,CADF;~~AAgBD~~,~~CA9FkB~~,CAAd;;~~AAiGPtB~~,KAAK,~~CAAC0B~~,WAAN,GAAoB,OAApB","sourcesContent":["import React, {\n forwardRef,\n HTMLAttributes,\n useRef,\n cloneElement,\n useMemo,\n useCallback,\n ReactElement,\n useState,\n useEffect,\n ~~MouseEvent,\n~~} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { ~~StyledModalOverlay~~ } from \"~~./Styles~~\";\n\ninterface IModal {\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n open?: boolean;\n disableBackgroundClick?: boolean;\n disableBackgroundColor?: boolean;\n onClose?: () => void;\n children: ReactElement;\n}\n\nconst getHasTransition = (children): boolean => {\n return children.props\n ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n : false;\n};\n\nexport const Modal = forwardRef<\n HTMLDivElement,\n IModal & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundClick = false,\n disableBackgroundColor = false,\n open: defaultOpen = false,\n onClose,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n\n const hasTransition = useMemo(() => {\n return getHasTransition(children);\n }, [children]);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n if (!hasTransition) {\n typeof onClose === \"function\" && onClose();\n }\n }, [hasTransition, onClose]);\n\n const handleBackgroundClick = useCallback(\n (~~event: MouseEvent<HTMLDivElement>~~) => {\n if (!disableBackgroundClick) {\n ~~event.preventDefault();\n~~ handleClose();\n }\n }~~,\n~~ [disableBackgroundClick, handleClose]\n );\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const childProps = useMemo(() => {\n let props = {};\n\n // It's a Transition like component\n if (hasTransition && children) {\n props = {\n onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n onExited: createChainedFunction(\n handleExited,\n children.props.onExited\n ),\n in: open,\n };\n }\n\n return props;\n }, [children, handleEnter, handleExited, hasTransition, open]);\n\n if (!open && (!hasTransition \|\| exited)) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n >\n <~~StyledModalOverlay~~\n onClick={handleBackgroundClick}\n $disableBackgroundColor={disableBackgroundColor}\n ~~$open={open~~}\n ~~/>\n~~ {cloneElement(children, childProps)}\n </Window>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n"],"file":"Modal.js"}
1	+ {"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"names":["getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","open","defaultOpen","onClose","rest","setOpen","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","handleEnter","handleExited","childProps","onEnter","onExited","in","displayName"],"mappings":"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","sourcesContent":["import React, {\n forwardRef,\n HTMLAttributes,\n useRef,\n cloneElement,\n useMemo,\n useCallback,\n ReactElement,\n useState,\n useEffect,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\ninterface IModal {\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n open?: boolean;\n disableBackgroundClick?: boolean;\n disableBackgroundColor?: boolean;\n onClose?: () => void;\n children: ReactElement;\n}\n\nconst getHasTransition = (children): boolean => {\n return children.props\n ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n : false;\n};\n\nexport const Modal = forwardRef<\n HTMLDivElement,\n IModal & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundClick = false,\n disableBackgroundColor = false,\n open: defaultOpen = false,\n onClose,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n\n const hasTransition = useMemo(() => {\n return getHasTransition(children);\n }, [children]);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n if (!hasTransition) {\n typeof onClose === \"function\" && onClose();\n }\n }, [hasTransition, onClose]);\n\n const handleBackgroundClick = useCallback(() => {\n if (!disableBackgroundClick) {\n handleClose();\n }\n }, [disableBackgroundClick, handleClose]);\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const childProps = useMemo(() => {\n let props = {};\n\n // It's a Transition like component\n if (hasTransition && children) {\n props = {\n onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n onExited: createChainedFunction(\n handleExited,\n children.props.onExited\n ),\n in: open,\n };\n }\n\n return props;\n }, [children, handleEnter, handleExited, hasTransition, open]);\n\n if (!open && (!hasTransition \|\| exited)) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n preventDefaultClickEvent\n >\n {open ? (\n <Overlay\n onClick={handleBackgroundClick}\n disableBackgroundColor={disableBackgroundColor}\n />\n ) : null}\n {cloneElement(children, childProps)}\n </Window>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n"],"file":"Modal.js"}

package/dist/cjs/components/Overlay/Overlay.js CHANGED Viewed

@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _Styles = require("./Styles");
-var _excluded = ["className"];
+var _excluded = ["className", "disableBackgroundColor"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,10 +23,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Overlay = function Overlay(_ref) {
   var className = _ref.className,
+      _ref$disableBackgroun = _ref.disableBackgroundColor,
+      disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
       rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledOverlay, _extends({
-    className: (0, _classnames.default)("c-overlay", className)
+    className: (0, _classnames.default)("c-overlay", className),
+    $disableBackgroundColor: disableBackgroundColor
   }, rest));
 };

package/dist/cjs/components/Overlay/Overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":["Overlay","className","rest","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;~~AAEO~~,IAAMA,~~OAA2C~~,GAAG,~~SAA9CA~~,~~OAA8C~~,~~OAGrD~~;AAAA,~~MAFJC~~,~~SAEI~~,~~QAFJA~~,~~SAEI~~;AAAA,MADDC,IACC;;AACJ,sBACE,6BAAC,qBAAD;~~AAAe~~,IAAA,SAAS,EAAE,yBAAW,WAAX,~~EAAwBD~~,SAAxB;~~AAA1B~~,~~KAAkEC~~,~~IAAlE~~,EADF;~~AAGD~~,~~CAPM~~;;;~~AASPF~~,OAAO,~~CAACG~~,WAAR,GAAsB,SAAtB","sourcesContent":["import React, { FC, HTMLAttributes } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledOverlay } from \"./Styles\";\n\nexport const Overlay: FC<~~HTMLAttributes<HTMLDivElement>>~~ = ({\n className,\n ...rest\n}) => {\n return (\n <StyledOverlay className={classnames(\"c-overlay\", className)} {...rest} />\n );\n};\n\nOverlay.displayName = \"Overlay\";\n"],"file":"Overlay.js"}
1	+ {"version":3,"sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":["Overlay","className","disableBackgroundColor","rest","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAMO,IAAMA,OAAqB,GAAG,SAAxBA,OAAwB,OAI/B;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,mCAFJC,sBAEI;AAAA,MAFJA,sBAEI,sCAFqB,KAErB;AAAA,MADDC,IACC;;AACJ,sBACE,6BAAC,qBAAD;AACE,IAAA,SAAS,EAAE,yBAAW,WAAX,EAAwBF,SAAxB,CADb;AAEE,IAAA,uBAAuB,EAAEC;AAF3B,KAGMC,IAHN,EADF;AAOD,CAZM;;;AAcPH,OAAO,CAACI,WAAR,GAAsB,SAAtB","sourcesContent":["import React, { FC, HTMLAttributes } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledOverlay } from \"./Styles\";\n\ninterface IOverlay extends HTMLAttributes<HTMLDivElement> {\n disableBackgroundColor?: boolean;\n}\n\nexport const Overlay: FC<IOverlay> = ({\n className,\n disableBackgroundColor = false,\n ...rest\n}) => {\n return (\n <StyledOverlay\n className={classnames(\"c-overlay\", className)}\n $disableBackgroundColor={disableBackgroundColor}\n {...rest}\n />\n );\n};\n\nOverlay.displayName = \"Overlay\";\n"],"file":"Overlay.js"}

package/dist/cjs/components/Overlay/Styles.js CHANGED Viewed

@@ -1,18 +1,24 @@
 "use strict";
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledOverlay = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var StyledOverlay = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledOverlay",
   componentId: "sc-flnrpv-0"
-})(["position:fixed;top:0;right:0;bottom:0;left:0;"]);
+})(["position:fixed;top:0;right:0;bottom:0;left:0;", ""], function (props) {
+  return !props.$disableBackgroundColor && (0, _styledComponents.css)(["background:var(--modal-background);backdrop-filter:blur(2px);"]);
+});
 exports.StyledOverlay = StyledOverlay;
 StyledOverlay.displayName = "StyledOverlay";

package/dist/cjs/components/Overlay/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Overlay/Styles.ts"],"names":["StyledOverlay","styled","div","displayName"],"mappings":"~~;;;;;;;~~AAAA~~;;;;~~AAEO,IAAMA,aAAa,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,~~qDAAnB~~;;;~~AAQPF~~,aAAa,~~CAACG~~,WAAd,GAA4B,eAA5B","sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledOverlay = styled.div`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n`;\n\nStyledOverlay.displayName = \"StyledOverlay\";\n"],"file":"Styles.js"}
1	+ {"version":3,"sources":["../../../../src/components/Overlay/Styles.ts"],"names":["StyledOverlay","styled","div","props","$disableBackgroundColor","css","displayName"],"mappings":";;;;;;;;;AAAA;;;;;;AAEO,IAAMA,aAAa,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,0DAStB,UAACC,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,uBAAP,QACAC,qBADA,oEADA;AAAA,CATsB,CAAnB;;;AAiBPL,aAAa,CAACM,WAAd,GAA4B,eAA5B","sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport const StyledOverlay = styled.div<{\n $disableBackgroundColor: boolean;\n}>`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n ${(props) =>\n !props.$disableBackgroundColor &&\n css`\n background: var(--modal-background);\n backdrop-filter: blur(2px);\n `}\n`;\n\nStyledOverlay.displayName = \"StyledOverlay\";\n"],"file":"Styles.js"}

package/dist/cjs/components/RadioButton/Styles.js CHANGED Viewed

@@ -18,7 +18,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledRadioInput = _styledComponents.default.input.withConfig({
   displayName: "Styles__StyledRadioInput",
   componentId: "sc-1xh9uc2-0"
-})(["display none;"]);
+})(["display:none;"]);
 exports.StyledRadioInput = StyledRadioInput;
 StyledRadioInput.displayName = "StyledRadioInput";

package/dist/cjs/components/RadioButton/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/RadioButton/Styles.ts"],"names":["StyledRadioInput","styled","input","displayName","StyledRadioLabel","label","StyledRadioButton","div","BoxSizingStyle","props","$isControlled","css","$isHovered"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;AAEO,IAAMA,gBAAgB,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,qBAAtB;;;AAIPF,gBAAgB,CAACG,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMC,gBAAgB,GAAGH,0BAAOI,KAAV;AAAA;AAAA;AAAA,aACvB;AAAA;AAAA;AAAA,CADuB,CAAtB;;;AAIPD,gBAAgB,CAACD,WAAjB,GAA+B,kBAA/B;;AAOO,IAAMG,iBAAiB,GAAGL,0BAAOM,GAAV;AAAA;AAAA;AAAA,ojBAC1BC,8BAD0B,EAExB;AAAA;AAAA;AAAA,CAFwB,EAyBZJ,gBAzBY,EA+BTA,gBA/BS,EAoC1B,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,aAAN,KAAwB,IAAxB,QACAC,qBADA,oHAEkBP,gBAFlB,CADA;AAAA,CApC0B,EAiD1B,UAACK,KAAD;AAAA,SACAA,KAAK,CAACG,UAAN,QACAD,qBADA,sGAEIP,gBAFJ,CADA;AAAA,CAjD0B,EA8DVA,gBA9DU,CAAvB;;;AAyEPE,iBAAiB,CAACH,WAAlB,GAAgC,mBAAhC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\nexport const StyledRadioInput = styled.input`\n display none;\n`;\n\nStyledRadioInput.displayName = \"StyledRadioInput\";\n\nexport const StyledRadioLabel = styled.label`\n ${tw`tw-inline-flex tw-items-center`}\n`;\n\nStyledRadioLabel.displayName = \"StyledRadioLabel\";\n\nexport interface IStyledRadioButton {\n $isHovered?: boolean;\n $isControlled?: boolean;\n}\n\nexport const StyledRadioButton = styled.div<IStyledRadioButton>`\n ${BoxSizingStyle}\n ${tw`tw-inline-flex tw-items-center`}\n\n height: 16px;\n width: 16px;\n position: relative;\n\n svg {\n cursor: pointer;\n fill: transparent;\n }\n\n circle:first-child {\n transition-duration: 0.2s;\n stroke: var(--color-theme-500);\n }\n\n circle:last-child {\n transition-duration: 0.2s;\n transform-origin: center;\n transform: scale(0);\n fill: var(--color-secondary-500);\n }\n\n input:focus ~ ${StyledRadioLabel} {\n circle:first-child {\n stroke: var(--color-secondary);\n }\n }\n\n input:disabled ~ ${StyledRadioLabel} {\n pointer-events: none;\n opacity: 0.5;\n }\n\n ${(props) =>\n props.$isControlled !== true &&\n css`\n input:hover ~ ${StyledRadioLabel} {\n circle:first-child {\n stroke: var(--color-secondary);\n }\n circle:last-child {\n transform: scale(1);\n }\n }\n `}\n\n ${(props) =>\n props.$isHovered &&\n css`\n ${StyledRadioLabel} {\n circle:first-child {\n stroke: var(--color-secondary);\n }\n circle:last-child {\n transform: scale(1);\n }\n }\n `}\n\n input:checked ~ ${StyledRadioLabel} {\n circle:first-child {\n stroke: var(--color-secondary);\n }\n circle:last-child {\n transform: scale(1);\n fill: var(--color-secondary);\n }\n }\n`;\n\nStyledRadioButton.displayName = \"StyledRadioButton\";\n"],"file":"Styles.js"}
1	+ {"version":3,"sources":["../../../../src/components/RadioButton/Styles.ts"],"names":["StyledRadioInput","styled","input","displayName","StyledRadioLabel","label","StyledRadioButton","div","BoxSizingStyle","props","$isControlled","css","$isHovered"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;AAEO,IAAMA,gBAAgB,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,qBAAtB;;;AAIPF,gBAAgB,CAACG,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMC,gBAAgB,GAAGH,0BAAOI,KAAV;AAAA;AAAA;AAAA,aACvB;AAAA;AAAA;AAAA,CADuB,CAAtB;;;AAIPD,gBAAgB,CAACD,WAAjB,GAA+B,kBAA/B;;AAOO,IAAMG,iBAAiB,GAAGL,0BAAOM,GAAV;AAAA;AAAA;AAAA,ojBAC1BC,8BAD0B,EAExB;AAAA;AAAA;AAAA,CAFwB,EAyBZJ,gBAzBY,EA+BTA,gBA/BS,EAoC1B,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,aAAN,KAAwB,IAAxB,QACAC,qBADA,oHAEkBP,gBAFlB,CADA;AAAA,CApC0B,EAiD1B,UAACK,KAAD;AAAA,SACAA,KAAK,CAACG,UAAN,QACAD,qBADA,sGAEIP,gBAFJ,CADA;AAAA,CAjD0B,EA8DVA,gBA9DU,CAAvB;;;AAyEPE,iBAAiB,CAACH,WAAlB,GAAgC,mBAAhC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\nexport const StyledRadioInput = styled.input`\n display: none;\n`;\n\nStyledRadioInput.displayName = \"StyledRadioInput\";\n\nexport const StyledRadioLabel = styled.label`\n ${tw`tw-inline-flex tw-items-center`}\n`;\n\nStyledRadioLabel.displayName = \"StyledRadioLabel\";\n\nexport interface IStyledRadioButton {\n $isHovered?: boolean;\n $isControlled?: boolean;\n}\n\nexport const StyledRadioButton = styled.div<IStyledRadioButton>`\n ${BoxSizingStyle}\n ${tw`tw-inline-flex tw-items-center`}\n\n height: 16px;\n width: 16px;\n position: relative;\n\n svg {\n cursor: pointer;\n fill: transparent;\n }\n\n circle:first-child {\n transition-duration: 0.2s;\n stroke: var(--color-theme-500);\n }\n\n circle:last-child {\n transition-duration: 0.2s;\n transform-origin: center;\n transform: scale(0);\n fill: var(--color-secondary-500);\n }\n\n input:focus ~ ${StyledRadioLabel} {\n circle:first-child {\n stroke: var(--color-secondary);\n }\n }\n\n input:disabled ~ ${StyledRadioLabel} {\n pointer-events: none;\n opacity: 0.5;\n }\n\n ${(props) =>\n props.$isControlled !== true &&\n css`\n input:hover ~ ${StyledRadioLabel} {\n circle:first-child {\n stroke: var(--color-secondary);\n }\n circle:last-child {\n transform: scale(1);\n }\n }\n `}\n\n ${(props) =>\n props.$isHovered &&\n css`\n ${StyledRadioLabel} {\n circle:first-child {\n stroke: var(--color-secondary);\n }\n circle:last-child {\n transform: scale(1);\n }\n }\n `}\n\n input:checked ~ ${StyledRadioLabel} {\n circle:first-child {\n stroke: var(--color-secondary);\n }\n circle:last-child {\n transform: scale(1);\n fill: var(--color-secondary);\n }\n }\n`;\n\nStyledRadioButton.displayName = \"StyledRadioButton\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Sheet/Sheet.js CHANGED Viewed

@@ -19,6 +19,8 @@ var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
 var _Styles = require("./Styles");
+var _Overlay = require("../Overlay");
 var _excluded = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -95,9 +97,8 @@ var Sheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var handleClose = (0, _react.useCallback)(function () {
     setOpen(false);
   }, []);
-  var handleBackgroundClick = (0, _react.useCallback)(function (event) {
+  var handleBackgroundClick = (0, _react.useCallback)(function () {
     if (!disableBackgroundClick) {
-      event.preventDefault();
       handleClose();
     }
   }, [disableBackgroundClick, handleClose]);
@@ -110,11 +111,12 @@ var Sheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: handleRef,
     onClose: handleClose,
     disableFocusLock: disableFocusLock,
-    disableScrollLock: disableScrollLock
-  }), /*#__PURE__*/_react.default.createElement(_Styles.StyledSheetOverlay, {
+    disableScrollLock: disableScrollLock,
+    preventDefaultClickEvent: true
+  }), open ? /*#__PURE__*/_react.default.createElement(_Overlay.Overlay, {
     onClick: handleBackgroundClick,
-    $hasBgColor: !disableBackgroundColor
-  }), /*#__PURE__*/_react.default.createElement(_Styles.StyledSheetWrapper, {
+    disableBackgroundColor: disableBackgroundColor
+  }) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledSheetWrapper, {
     className: (0, _classnames.default)("c-sheet__wrapper", bodyClassName),
     style: bodyStyle,
     $position: position,

package/dist/cjs/components/Sheet/Sheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":["Sheet","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","setOpen","exited","setExited","innerRef","handleRef","handleEnter","handleExited","handleClose","handleBackgroundClick","~~event","preventDefault","~~length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"mappings":";;;;;;;;;AAAA;;~~AAYA~~;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAwBO~~,IAAMA,KAAK,gBAAG,uBAInB,gBAiBEC,GAjBF,EAkBK;AAAA,MAhBDC,QAgBC,QAhBDA,QAgBC;AAAA,MAfDC,OAeC,QAfDA,OAeC;AAAA,2BAdDC,QAcC;AAAA,MAdDA,QAcC,8BAdU,EAcV;AAAA,uBAbDC,IAaC;AAAA,MAbKC,WAaL,0BAbmB,KAanB;AAAA,4BAZDC,SAYC;AAAA,MAZDA,SAYC,+BAZW,KAYX;AAAA,2BAXDC,QAWC;AAAA,MAXDA,QAWC,8BAXU,QAWV;AAAA,uBAVDC,IAUC;AAAA,MAVDA,IAUC,0BAVM,QAUN;AAAA,mCATDC,gBASC;AAAA,MATDA,gBASC,sCATkB,KASlB;AAAA,mCARDC,iBAQC;AAAA,MARDA,iBAQC,sCARmB,KAQnB;AAAA,mCAPDC,sBAOC;AAAA,MAPDA,sBAOC,sCAPwB,KAOxB;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,MALDC,aAKC,QALDA,aAKC;AAAA,oCAJDC,sBAIC;AAAA,MAJDA,sBAIC,uCAJwB,KAIxB;AAAA,MAHEC,IAGF;;AACH,kBAAwB,qBAASV,WAAT,CAAxB;AAAA;AAAA,MAAOD,IAAP;AAAA,MAAaY,OAAb;;AACA,mBAA4B,qBAAS,IAAT,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,QAAQ,GAAG,mBAAuB,IAAvB,CAAjB;AAEA,MAAMC,SAAS,GAAG,yBAAWD,QAAX,EAAqBnB,GAArB,CAAlB;AAEA,wBAAU,YAAM;AACdgB,IAAAA,OAAO,CAACX,WAAD,CAAP;AACD,GAFD,EAEG,CAACA,WAAD,CAFH;AAIA,MAAMgB,WAAW,GAAG,wBAAY,YAAM;AACpCH,IAAAA,SAAS,CAAC,KAAD,CAAT;AACD,GAFmB,EAEjB,EAFiB,CAApB;AAIA,MAAMI,YAAY,GAAG,wBAAY,YAAM;AACrCJ,IAAAA,SAAS,CAAC,IAAD,CAAT;AACA,WAAOhB,OAAP,KAAmB,UAAnB,IAAiCA,OAAO,EAAxC;AACD,GAHoB,EAGlB,CAACA,OAAD,CAHkB,CAArB;AAKA,MAAMqB,WAAW,GAAG,wBAAY,YAAM;AACpCP,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GAFmB,EAEjB,EAFiB,CAApB;AAIA,MAAMQ,qBAAqB,GAAG,~~wBAC5B~~,~~UAACC,KAAD,EAAuC~~;~~AACrC~~,QAAI,~~CAACX~~,sBAAL,EAA6B;~~AAC3BW~~,MAAAA,~~KAAK,CAACC,cAAN;AACAH,MAAAA,~~WAAW;AACZ;AACF,~~GAN2B~~,~~EAO5B~~,CAACT,sBAAD,EAAyBS,WAAzB,~~CAP4B~~,CAA9B;;~~AAUA~~,MAAI,CAACnB,IAAD,IAASa,MAAb,EAAqB;AACnB,WAAO,IAAP;AACD;;AAED,sBACE,6BAAC,cAAD,eACMF,IADN;AAEE,IAAA,GAAG,EAAEK,SAFP;AAGE,IAAA,OAAO,EAAEG,WAHX;AAIE,IAAA,gBAAgB,EAAEd,gBAJpB;AAKE,IAAA,iBAAiB,EAAEC;~~AALrB~~,~~mBAOE~~,6BAAC,~~0BAAD~~;AACE,IAAA,OAAO,~~EAAEc~~,qBADX;AAEE,IAAA,~~WAAW~~,~~EAAE,CAACb~~;~~AAFhB~~,~~IAPF~~,~~eAWE~~,6BAAC,0BAAD;AACE,IAAA,SAAS,EAAE,yBAAW,kBAAX,EAA+BE,aAA/B,CADb;AAEE,IAAA,KAAK,EAAED,SAFT;AAGE,IAAA,SAAS,EAAEL,QAHb;AAIE,IAAA,KAAK,EAAEC;AAJT,KAMGL,QAAQ,~~CAACwB~~,MAAT,gBACC,6BAAC,wBAAD,~~QACGxB~~,QAAQ,~~CAACyB~~,GAAT,CAAa,UAACC,IAAD,EAAOC,KAAP,EAAiB;AAC7B,QAAMC,aAAa,GAAG,CAAtB,CAD6B,CACJ;;AACzB,QAAMC,cAAc,GAAG,CAAvB,CAF6B,CAEH;;AAC1B,QAAMC,OAAO,GAAGH,KAAK,GAAG,CAAxB;AACA,QAAMI,WAAW,~~GACf/B~~,QAAQ,~~CAACwB~~,MAAT,GAAkBK,cAAlB,GACIA,cADJ,GAEIA,cAAc,GAAGC,OAHvB;AAIA,QAAME,UAAU,GAAGF,OAAO,IAAIF,aAAX,GAA2B,CAA3B,GAA+BE,OAAlD;AACA,wBACE,6BAAC,gCAAD;AACE,MAAA,MAAM,MADR;AAEE,MAAA,EAAE,~~EAAE7B~~,IAFN;AAGE,MAAA,OAAO,~~EAAE2B~~,aAAa,GAAG,GAH3B;AAIE,MAAA,GAAG,4BAAqBD,KAArB;AAJL,OAMG,UAACM,KAAD;AAAA,0BACC,6BAAC,0BAAD;AACE,QAAA,MAAM,EAAEA,KADV;AAEE,QAAA,KAAK,~~EAAE5B~~,IAFT;AAGE,QAAA,cAAc,~~EAAEuB~~,aAAa,GAAG,EAHlC;AAIE,QAAA,eAAe,EAAEC,cAAc,GAAG,EAJpC;AAKE,QAAA,YAAY,EAAEE,WAAW,GAAG,EAL9B;AAME,QAAA,WAAW,EAAEC,UAAU,GAAG;AAN5B,SAQGN,IARH,CADD;AAAA,KANH,CADF;AAqBD,GA9BA,CADH,CADD,GAkCG,IAxCN,eAyCE,6BAAC,2BAAD;AACE,IAAA,MAAM,MADR;AAEE,IAAA,EAAE,~~EAAEzB~~,IAFN;AAGE,IAAA,OAAO,EAAE,GAHX;AAIE,IAAA,UAAU,EAAE,oBAJd;AAKE,IAAA,UAAU,EAAEE,SALd;AAME,IAAA,OAAO,EAAEe,WANX;AAOE,IAAA,QAAQ,EAAEC;AAPZ,kBASE,6BAAC,+BAAD;AAAyB,IAAA,SAAS,EAAC;AAAnC,KACGrB,QADH,CATF,CAzCF,~~CAXF~~,CADF;~~AAqED~~,~~CAjIkB~~,CAAd;;~~AAoIPF~~,KAAK,~~CAACsC~~,WAAN,GAAoB,OAApB","sourcesContent":["import React, {\n useRef,\n useCallback,\n useEffect,\n forwardRef,\n HTMLAttributes,\n useState,\n CSSProperties,\n ReactElement,\n ~~MouseEvent,\n~~} from \"react\";\n\nimport { Transition } from \"react-transition-group\";\nimport { Window } from \"../Window\";\nimport classnames from \"classnames\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport {\n StyledAnimatedSpan,\n StyledCssTransition,\n StyledSheetIcons,\n ~~StyledSheetOverlay,\n~~ StyledSheetWrapper,\n StyledSheetWrapperPaper,\n} from \"./Styles\";\n\ninterface ISheet {\n onClose?: () => void;\n controls?: JSX.Element[];\n open?: boolean;\n animation?: \"top\" \| \"bottom\" \| \"left\" \| \"right\";\n position?: \"center\" \| \"left\" \| \"right\";\n mode?: \"normal\" \| \"stretch\";\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n disableBackgroundColor?: boolean;\n bodyStyle?: CSSProperties;\n bodyClassName?: string;\n disableBackgroundClick?: boolean;\n}\n\nexport const Sheet = forwardRef<\n HTMLDivElement,\n ISheet & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n onClose,\n controls = [],\n open: defaultOpen = false,\n animation = \"top\",\n position = \"center\",\n mode = \"normal\",\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundColor = false,\n bodyStyle,\n bodyClassName,\n disableBackgroundClick = false,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n const innerRef = useRef<HTMLDivElement>(null);\n\n const handleRef = useForkRef(innerRef, ref);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n }, []);\n\n const handleBackgroundClick = useCallback(\n (~~event: MouseEvent<HTMLDivElement>~~) => {\n if (!disableBackgroundClick) {\n ~~event.preventDefault();\n~~ handleClose();\n }\n }~~,\n~~ [disableBackgroundClick, handleClose]\n );\n\n if (!open && exited) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n >\n <~~StyledSheetOverlay~~\n onClick={handleBackgroundClick}\n ~~$hasBgColor~~={!disableBackgroundColor}\n />\n <StyledSheetWrapper\n className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n style={bodyStyle}\n $position={position}\n $mode={mode}\n >\n {controls.length ? (\n <StyledSheetIcons>\n {controls.map((item, index) => {\n const maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s\n const maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s\n const control = index + 1;\n const durationOut =\n controls.length > maxDurationOut\n ? maxDurationOut\n : maxDurationOut - control;\n const durationIn = control >= maxDurationIn ? 1 : control;\n return (\n <Transition\n appear\n in={open}\n timeout={maxDurationIn * 100}\n key={`c-sheet-control-${index}`}\n >\n {(state): ReactElement => (\n <StyledAnimatedSpan\n $state={state}\n $mode={mode}\n $maxDurationIn={maxDurationIn / 10}\n $maxDurationOut={maxDurationOut / 10}\n $durationOut={durationOut / 10}\n $durationIn={durationIn / 10}\n >\n {item}\n </StyledAnimatedSpan>\n )}\n </Transition>\n );\n })}\n </StyledSheetIcons>\n ) : null}\n <StyledCssTransition\n appear\n in={open}\n timeout={400}\n classNames={\"c-sheet__animation\"}\n $direction={animation}\n onEnter={handleEnter}\n onExited={handleExited}\n >\n <StyledSheetWrapperPaper className=\"c-sheet__wrapper__paper\">\n {children}\n </StyledSheetWrapperPaper>\n </StyledCssTransition>\n </StyledSheetWrapper>\n </Window>\n );\n }\n);\n\nSheet.displayName = \"Sheet\";\n"],"file":"Sheet.js"}
1	+ {"version":3,"sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":["Sheet","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","setOpen","exited","setExited","innerRef","handleRef","handleEnter","handleExited","handleClose","handleBackgroundClick","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"mappings":"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","sourcesContent":["import React, {\n useRef,\n useCallback,\n useEffect,\n forwardRef,\n HTMLAttributes,\n useState,\n CSSProperties,\n ReactElement,\n} from \"react\";\n\nimport { Transition } from \"react-transition-group\";\nimport { Window } from \"../Window\";\nimport classnames from \"classnames\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport {\n StyledAnimatedSpan,\n StyledCssTransition,\n StyledSheetIcons,\n StyledSheetWrapper,\n StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { Overlay } from \"../Overlay\";\n\ninterface ISheet {\n onClose?: () => void;\n controls?: JSX.Element[];\n open?: boolean;\n animation?: \"top\" \| \"bottom\" \| \"left\" \| \"right\";\n position?: \"center\" \| \"left\" \| \"right\";\n mode?: \"normal\" \| \"stretch\";\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n disableBackgroundColor?: boolean;\n bodyStyle?: CSSProperties;\n bodyClassName?: string;\n disableBackgroundClick?: boolean;\n}\n\nexport const Sheet = forwardRef<\n HTMLDivElement,\n ISheet & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n onClose,\n controls = [],\n open: defaultOpen = false,\n animation = \"top\",\n position = \"center\",\n mode = \"normal\",\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundColor = false,\n bodyStyle,\n bodyClassName,\n disableBackgroundClick = false,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n const innerRef = useRef<HTMLDivElement>(null);\n\n const handleRef = useForkRef(innerRef, ref);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n }, []);\n\n const handleBackgroundClick = useCallback(() => {\n if (!disableBackgroundClick) {\n handleClose();\n }\n }, [disableBackgroundClick, handleClose]);\n\n if (!open && exited) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n preventDefaultClickEvent\n >\n {open ? (\n <Overlay\n onClick={handleBackgroundClick}\n disableBackgroundColor={disableBackgroundColor}\n />\n ) : null}\n <StyledSheetWrapper\n className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n style={bodyStyle}\n $position={position}\n $mode={mode}\n >\n {controls.length ? (\n <StyledSheetIcons>\n {controls.map((item, index) => {\n const maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s\n const maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s\n const control = index + 1;\n const durationOut =\n controls.length > maxDurationOut\n ? maxDurationOut\n : maxDurationOut - control;\n const durationIn = control >= maxDurationIn ? 1 : control;\n return (\n <Transition\n appear\n in={open}\n timeout={maxDurationIn * 100}\n key={`c-sheet-control-${index}`}\n >\n {(state): ReactElement => (\n <StyledAnimatedSpan\n $state={state}\n $mode={mode}\n $maxDurationIn={maxDurationIn / 10}\n $maxDurationOut={maxDurationOut / 10}\n $durationOut={durationOut / 10}\n $durationIn={durationIn / 10}\n >\n {item}\n </StyledAnimatedSpan>\n )}\n </Transition>\n );\n })}\n </StyledSheetIcons>\n ) : null}\n <StyledCssTransition\n appear\n in={open}\n timeout={400}\n classNames={\"c-sheet__animation\"}\n $direction={animation}\n onEnter={handleEnter}\n onExited={handleExited}\n >\n <StyledSheetWrapperPaper className=\"c-sheet__wrapper__paper\">\n {children}\n </StyledSheetWrapperPaper>\n </StyledCssTransition>\n </StyledSheetWrapper>\n </Window>\n );\n }\n);\n\nSheet.displayName = \"Sheet\";\n"],"file":"Sheet.js"}

package/dist/cjs/components/Sheet/Styles.js CHANGED Viewed

@@ -5,12 +5,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSheetWrapperPaper = exports.StyledSheetWrapper = exports.StyledSheetOverlay = exports.StyledSheetIcons = exports.StyledSheetControlsTop = exports.StyledSheetControlsCenterOut = exports.StyledSheetControlsCenterIn = exports.StyledSheetControlsBottom = exports.StyledCssTransition = exports.StyledAnimatedSpan = void 0;
+exports.StyledSheetWrapperPaper = exports.StyledSheetWrapper = exports.StyledSheetIcons = exports.StyledSheetControlsTop = exports.StyledSheetControlsCenterOut = exports.StyledSheetControlsCenterIn = exports.StyledSheetControlsBottom = exports.StyledCssTransition = exports.StyledAnimatedSpan = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _Overlay = require("../Overlay");
 var _BoxSizingStyle = require("../BoxSizingStyle");
 var _FontStyle = require("../FontStyle");
@@ -28,18 +26,10 @@ var StyledSheetIcons = _styledComponents.default.div.withConfig({
 exports.StyledSheetIcons = StyledSheetIcons;
 StyledSheetIcons.displayName = "StyledSheetIcons";
-var StyledSheetOverlay = (0, _styledComponents.default)(_Overlay.Overlay).withConfig({
-  displayName: "Styles__StyledSheetOverlay",
-  componentId: "sc-144eyxd-1"
-})(["", ""], function (props) {
-  return props.$hasBgColor && (0, _styledComponents.css)(["background:var(--modal-background);"]);
-});
-exports.StyledSheetOverlay = StyledSheetOverlay;
-StyledSheetOverlay.displayName = "StyledSheetOverlay";
 var StyledSheetWrapper = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledSheetWrapper",
-  componentId: "sc-144eyxd-2"
+  componentId: "sc-144eyxd-1"
 })(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, _FontStyle.FontStyle, function (props) {
   return props.$mode === "stretch" ? (0, _styledComponents.css)(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : (0, _styledComponents.css)(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons);
 }, function (props) {
@@ -68,7 +58,7 @@ StyledSheetWrapper.displayName = "StyledSheetWrapper";
 var StyledSheetWrapperPaper = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledSheetWrapperPaper",
-  componentId: "sc-144eyxd-3"
+  componentId: "sc-144eyxd-2"
 })(["background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:6px;overflow:auto;animation:0.3s linear ease-out;", ""], {
   "flex": "1 1 auto"
 });
@@ -86,7 +76,7 @@ exports.StyledSheetControlsCenterOut = StyledSheetControlsCenterOut;
 var StyledAnimatedSpan = _styledComponents.default.span.withConfig({
   displayName: "Styles__StyledAnimatedSpan",
-  componentId: "sc-144eyxd-4"
+  componentId: "sc-144eyxd-3"
 })(["background:red;", " ", " ", " ", ""], function (props) {
   return props.$state === "entering" && (0, _styledComponents.css)(["opacity:1;", ""], props.$mode === "stretch" ? (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, "".concat(props.$durationIn, "s"), "".concat(props.$durationIn, "s")) : (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, "".concat(props.$maxDurationIn, "s")));
 }, function (props) {
@@ -101,7 +91,7 @@ exports.StyledAnimatedSpan = StyledAnimatedSpan;
 StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
 var StyledCssTransition = (0, _styledComponents.default)(_reactTransitionGroup.CSSTransition).withConfig({
   displayName: "Styles__StyledCssTransition",
-  componentId: "sc-144eyxd-5"
+  componentId: "sc-144eyxd-4"
 })(["", " ", " ", " ", ""], function (props) {
   return props.$direction === "top" && (0, _styledComponents.css)(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity 200ms,transform 200ms;}"]);
 }, function (props) {

package/dist/cjs/components/Sheet/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Sheet/Styles.ts"],"names":["StyledSheetIcons","styled","div","displayName","StyledSheetOverlay","Overlay","props","$hasBgColor","css","StyledSheetWrapper","BoxSizingStyle","FontStyle","$mode","$position","StyledSheetWrapperPaper","StyledSheetControlsTop","keyframes","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","CSSTransition","$direction"],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Overlay } from \"../Overlay\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport const StyledSheetIcons = styled.div`\n display: flex;\n height: 0;\n position: relative;\n\n span {\n position: relative;\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-secondary);\n cursor: pointer;\n border-radius: 100%;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n & > * {\n height: 40px;\n width: 40px;\n padding: 8px;\n fill: var(--color-theme-600);\n }\n }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\nexport const StyledSheetOverlay = styled(Overlay)<{ $hasBgColor: boolean }>`\n ${(props) =>\n props.$hasBgColor &&\n css`\n background: var(--modal-background);\n `}\n`;\n\nStyledSheetOverlay.displayName = \"StyledSheetOverlay\";\n\ninterface IStyledSheetWrapper {\n $position?: \"center\" \| \"left\" \| \"right\";\n $mode?: \"normal\" \| \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n ${BoxSizingStyle}\n ${FontStyle}\n\n position: relative;\n max-width: 95vw;\n display: flex;\n flex-direction: row;\n\n ${(props) =>\n props.$mode === \"stretch\"\n ? css`\n margin-top: 8px;\n height: calc(100vh - 16px);\n width: calc(100vw - 100px);\n max-width: 1000px;\n ${StyledSheetIcons} {\n flex-direction: column;\n width: 0;\n height: calc(100vh - 32px);\n & > * {\n margin-bottom: 8px;\n animation-fill-mode: both;\n }\n span {\n top: 8px;\n }\n }\n `\n : css`\n max-height: calc(100vh - 156px);\n margin-top: 126px;\n margin-bottom: 30px;\n width: 540px;\n flex-direction: column;\n\n ${StyledSheetIcons} {\n flex-direction: row-reverse;\n & > * {\n margin-left: 8px;\n animation-fill-mode: both;\n }\n span {\n top: -48px;\n right: 8px;\n }\n }\n `}\n\n ${(props) =>\n props.$position === \"center\" &&\n css`\n ${tw`tw-mx-auto`}\n `}\n\n ${(props) =>\n props.$position === \"left\" &&\n css`\n ${tw`tw-ml-2 tw-mr-auto`}\n `}\n\n ${(props) =>\n props.$position === \"right\" &&\n css`\n ${tw`tw-mr-2 tw-ml-auto`}\n `}\n\n ${(props) =>\n props.$mode === \"stretch\" &&\n props.$position !== \"left\" &&\n css`\n ${StyledSheetIcons} {\n span {\n right: 48px;\n }\n }\n `}\n\n ${(props) =>\n props.$mode === \"stretch\" &&\n props.$position === \"left\" &&\n css`\n flex-direction: row-reverse;\n\n ${StyledSheetIcons} {\n span {\n right: -8px;\n }\n }\n `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\nexport const StyledSheetWrapperPaper = styled.div`\n background-color: var(--page-paper-main);\n color: var(--color-theme-900);\n box-shadow: var(--shadow-primary);\n border-radius: 6px;\n overflow: auto;\n animation: 0.3s linear ease-out;\n\n ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-200px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n 0% {\n transform: translateY(-150px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-150px);\n opacity: 0;\n }\n`;\n\ninterface IStyledAnimatedSpan {\n $mode: string;\n $state: string;\n $maxDurationIn: number;\n $maxDurationOut: number;\n $durationOut: number;\n $durationIn: number;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n background: red;\n ${(props) =>\n props.$state === \"entering\" &&\n css`\n opacity: 1;\n\n ${props.$mode === \"stretch\"\n ? css`\n animation-name: ${StyledSheetControlsTop};\n animation-duration: ${`${props.$durationIn}s`};\n animation-delay: ${`${props.$durationIn}s`};\n `\n : css`\n animation-name: ${StyledSheetControlsCenterIn};\n animation-duration: ${`${props.$maxDurationIn}s`};\n animation-delay: 0s;\n `}\n `}\n\n ${(props) =>\n props.$state === \"entered\" &&\n css`\n opacity: 1;\n `}\n\n ${(props) =>\n props.$state === \"exiting\" &&\n css`\n opacity: 0;\n\n ${props.$mode === \"stretch\"\n ? css`\n animation-name: ${StyledSheetControlsBottom};\n animation-duration: ${`${props.$durationOut}s`};\n animation-delay: ${`${props.$durationOut}s`};\n `\n : css`\n animation-name: ${StyledSheetControlsCenterOut};\n animation-duration: ${`${props.$maxDurationOut}s`};\n animation-delay: 0;\n `}\n `}\n\n ${(props) =>\n props.$state === \"exited\" &&\n css`\n opacity: 0;\n `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n $direction: string;\n}>`\n ${(props) =>\n props.$direction === \"top\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateY(-100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateY(-100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateY(-100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"bottom\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateY(100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateY(100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateY(100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"left\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateX(-100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateX(-100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateX(-100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"right\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateX(100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateX(100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateX(100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n"],"file":"Styles.js"}
1	+ {"version":3,"sources":["../../../../src/components/Sheet/Styles.ts"],"names":["StyledSheetIcons","styled","div","displayName","StyledSheetWrapper","BoxSizingStyle","FontStyle","props","$mode","css","$position","StyledSheetWrapperPaper","StyledSheetControlsTop","keyframes","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","CSSTransition","$direction"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;AAEO,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,yUAAtB;;;AAyBPF,gBAAgB,CAACG,WAAjB,GAA+B,kBAA/B;;AAOO,IAAMC,kBAAkB,GAAGH,0BAAOC,GAAV;AAAA;AAAA;AAAA,iHAC3BG,8BAD2B,EAE3BC,oBAF2B,EAS3B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,SAAhB,OACIC,qBADJ,0NAMQT,gBANR,QAmBIS,qBAnBJ,wNA0BQT,gBA1BR,CADA;AAAA,CAT2B,EAiD3B,UAACO,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,KAAoB,QAApB,QACAD,qBADA,YAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CAjD2B,EAuD3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,KAAoB,MAApB,QACAD,qBADA,YAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CAvD2B,EA6D3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,KAAoB,OAApB,QACAD,qBADA,YAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CA7D2B,EAmE3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,SAAhB,IACAD,KAAK,CAACG,SAAN,KAAoB,MADpB,QAEAD,qBAFA,+BAGIT,gBAHJ,CADA;AAAA,CAnE2B,EA8E3B,UAACO,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,SAAhB,IACAD,KAAK,CAACG,SAAN,KAAoB,MADpB,QAEAD,qBAFA,0DAKIT,gBALJ,CADA;AAAA,CA9E2B,CAAxB;;;AA4FPI,kBAAkB,CAACD,WAAnB,GAAiC,oBAAjC;;AAEO,IAAMQ,uBAAuB,GAAGV,0BAAOC,GAAV;AAAA;AAAA;AAAA,kLAQ9B;AAAA;AAAA,CAR8B,CAA7B;;;AAWPS,uBAAuB,CAACR,WAAxB,GAAsC,yBAAtC;AAEO,IAAMS,sBAAsB,OAAGC,2BAAH,0FAA5B;;AAWA,IAAMC,yBAAyB,OAAGD,2BAAH,0FAA/B;;AAWA,IAAME,2BAA2B,OAAGF,2BAAH,0FAAjC;;AAWA,IAAMG,4BAA4B,OAAGH,2BAAH,0FAAlC;;;AAoBA,IAAMI,kBAAkB,GAAGhB,0BAAOiB,IAAV;AAAA;AAAA;AAAA,2CAE3B,UAACX,KAAD;AAAA,SACAA,KAAK,CAACY,MAAN,KAAiB,UAAjB,QACAV,qBADA,sBAIIF,KAAK,CAACC,KAAN,KAAgB,SAAhB,OACEC,qBADF,yEAEsBG,sBAFtB,YAG6BL,KAAK,CAACa,WAHnC,kBAI0Bb,KAAK,CAACa,WAJhC,cAMEX,qBANF,uEAOsBM,2BAPtB,YAQ6BR,KAAK,CAACc,cARnC,OAJJ,CADA;AAAA,CAF2B,EAoB3B,UAACd,KAAD;AAAA,SACAA,KAAK,CAACY,MAAN,KAAiB,SAAjB,QACAV,qBADA,iBADA;AAAA,CApB2B,EA0B3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACY,MAAN,KAAiB,SAAjB,QACAV,qBADA,sBAIIF,KAAK,CAACC,KAAN,KAAgB,SAAhB,OACEC,qBADF,yEAEsBK,yBAFtB,YAG6BP,KAAK,CAACe,YAHnC,kBAI0Bf,KAAK,CAACe,YAJhC,cAMEb,qBANF,sEAOsBO,4BAPtB,YAQ6BT,KAAK,CAACgB,eARnC,OAJJ,CADA;AAAA,CA1B2B,EA4C3B,UAAChB,KAAD;AAAA,SACAA,KAAK,CAACY,MAAN,KAAiB,QAAjB,QACAV,qBADA,iBADA;AAAA,CA5C2B,CAAxB;;;AAmDPQ,kBAAkB,CAACd,WAAnB,GAAiC,oBAAjC;AAEO,IAAMqB,mBAAmB,GAAG,+BAAOC,mCAAP,CAAH;AAAA;AAAA;AAAA,4BAG5B,UAAClB,KAAD;AAAA,SACAA,KAAK,CAACmB,UAAN,KAAqB,KAArB,QACAjB,qBADA,+fADA;AAAA,CAH4B,EAkC5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACmB,UAAN,KAAqB,QAArB,QACAjB,qBADA,4fADA;AAAA,CAlC4B,EAiE5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACmB,UAAN,KAAqB,MAArB,QACAjB,qBADA,+fADA;AAAA,CAjE4B,EAgG5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACmB,UAAN,KAAqB,OAArB,QACAjB,qBADA,4fADA;AAAA,CAhG4B,CAAzB;;AAgIPe,mBAAmB,CAACrB,WAApB,GAAkC,qBAAlC","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport const StyledSheetIcons = styled.div`\n display: flex;\n height: 0;\n position: relative;\n\n span {\n position: relative;\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-secondary);\n cursor: pointer;\n border-radius: 100%;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n & > * {\n height: 40px;\n width: 40px;\n padding: 8px;\n fill: var(--color-theme-600);\n }\n }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n $position?: \"center\" \| \"left\" \| \"right\";\n $mode?: \"normal\" \| \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n ${BoxSizingStyle}\n ${FontStyle}\n\n position: relative;\n max-width: 95vw;\n display: flex;\n flex-direction: row;\n\n ${(props) =>\n props.$mode === \"stretch\"\n ? css`\n margin-top: 8px;\n height: calc(100vh - 16px);\n width: calc(100vw - 100px);\n max-width: 1000px;\n ${StyledSheetIcons} {\n flex-direction: column;\n width: 0;\n height: calc(100vh - 32px);\n & > * {\n margin-bottom: 8px;\n animation-fill-mode: both;\n }\n span {\n top: 8px;\n }\n }\n `\n : css`\n max-height: calc(100vh - 156px);\n margin-top: 126px;\n margin-bottom: 30px;\n width: 540px;\n flex-direction: column;\n\n ${StyledSheetIcons} {\n flex-direction: row-reverse;\n & > * {\n margin-left: 8px;\n animation-fill-mode: both;\n }\n span {\n top: -48px;\n right: 8px;\n }\n }\n `}\n\n ${(props) =>\n props.$position === \"center\" &&\n css`\n ${tw`tw-mx-auto`}\n `}\n\n ${(props) =>\n props.$position === \"left\" &&\n css`\n ${tw`tw-ml-2 tw-mr-auto`}\n `}\n\n ${(props) =>\n props.$position === \"right\" &&\n css`\n ${tw`tw-mr-2 tw-ml-auto`}\n `}\n\n ${(props) =>\n props.$mode === \"stretch\" &&\n props.$position !== \"left\" &&\n css`\n ${StyledSheetIcons} {\n span {\n right: 48px;\n }\n }\n `}\n\n ${(props) =>\n props.$mode === \"stretch\" &&\n props.$position === \"left\" &&\n css`\n flex-direction: row-reverse;\n\n ${StyledSheetIcons} {\n span {\n right: -8px;\n }\n }\n `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\nexport const StyledSheetWrapperPaper = styled.div`\n background-color: var(--page-paper-main);\n color: var(--color-theme-900);\n box-shadow: var(--shadow-primary);\n border-radius: 6px;\n overflow: auto;\n animation: 0.3s linear ease-out;\n\n ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-200px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n 0% {\n transform: translateY(-150px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-150px);\n opacity: 0;\n }\n`;\n\ninterface IStyledAnimatedSpan {\n $mode: string;\n $state: string;\n $maxDurationIn: number;\n $maxDurationOut: number;\n $durationOut: number;\n $durationIn: number;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n background: red;\n ${(props) =>\n props.$state === \"entering\" &&\n css`\n opacity: 1;\n\n ${props.$mode === \"stretch\"\n ? css`\n animation-name: ${StyledSheetControlsTop};\n animation-duration: ${`${props.$durationIn}s`};\n animation-delay: ${`${props.$durationIn}s`};\n `\n : css`\n animation-name: ${StyledSheetControlsCenterIn};\n animation-duration: ${`${props.$maxDurationIn}s`};\n animation-delay: 0s;\n `}\n `}\n\n ${(props) =>\n props.$state === \"entered\" &&\n css`\n opacity: 1;\n `}\n\n ${(props) =>\n props.$state === \"exiting\" &&\n css`\n opacity: 0;\n\n ${props.$mode === \"stretch\"\n ? css`\n animation-name: ${StyledSheetControlsBottom};\n animation-duration: ${`${props.$durationOut}s`};\n animation-delay: ${`${props.$durationOut}s`};\n `\n : css`\n animation-name: ${StyledSheetControlsCenterOut};\n animation-duration: ${`${props.$maxDurationOut}s`};\n animation-delay: 0;\n `}\n `}\n\n ${(props) =>\n props.$state === \"exited\" &&\n css`\n opacity: 0;\n `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n $direction: string;\n}>`\n ${(props) =>\n props.$direction === \"top\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateY(-100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateY(-100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateY(-100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"bottom\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateY(100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateY(100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateY(100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"left\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateX(-100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateX(-100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateX(-100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"right\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateX(100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateX(100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateX(100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n"],"file":"Styles.js"}