krl-alfred 1.80.6 → 1.80.7

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 (15) hide show
  1. package/dist/components/Button/Button.styled.js +1 -1
  2. package/dist/components/Icon/Cargo.js +1 -1
  3. package/dist/components/Icon/Icon.styled.js +1 -1
  4. package/dist/components/Icon/index.js +4 -10
  5. package/dist/components/Icon/stories/Icons.stories.js +3 -3
  6. package/dist/components/Input/Input.js +1 -1
  7. package/dist/components/Modal/Modal.styled.js +2 -2
  8. package/dist/components/Pagination/Pagination.js +4 -1
  9. package/dist/components/Pagination/Pagination.styled.js +1 -1
  10. package/dist/components/SelectBox/SelectBox.styled.js +1 -1
  11. package/dist/components/Table/Table.js +2 -1
  12. package/dist/components/Table/Table.styled.js +1 -1
  13. package/dist/utils/genericUtils.js +9 -1
  14. package/package.json +2 -2
  15. package/dist/components/Icon/Cargo1.js +0 -40
package/dist/components/Button/Button.styled.js CHANGED
@@ -86,7 +86,7 @@ var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
86
86
  return "var(--body-bold-14-17)";
87
87
  }
88
88
  }, devices_1.devices.mdUp, devices_1.devices.md);
89
- exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 1s;\n }\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 1s;\n }\n }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
89
+ exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
90
90
  switch (props.$variant) {
91
91
  case 'primary':
92
92
  return primary;
package/dist/components/Icon/Cargo.js CHANGED
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
37
  var jsx_runtime_1 = require("react/jsx-runtime");
38
38
  var React = __importStar(require("react"));
39
- var SvgCargo = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M20.5161 9.75H18.0039C18.0218 9.63967 18.0313 9.52827 18.0323 9.41667V4.33333C18.0323 3.71449 17.7706 3.121 17.3047 2.68342C16.8389 2.24583 16.2072 2 15.5484 2H8.45161C7.79285 2 7.16107 2.24583 6.69525 2.68342C6.22943 3.121 5.96774 3.71449 5.96774 4.33333V9.41667C5.96871 9.52827 5.97819 9.63967 5.99613 9.75H3.48387C2.82511 9.75 2.19333 9.99583 1.72751 10.4334C1.26169 10.871 1 11.4645 1 12.0833V19.6667C1 20.2855 1.26169 20.879 1.72751 21.3166C2.19333 21.7542 2.82511 22 3.48387 22H20.5161C21.1749 22 21.8067 21.7542 22.2725 21.3166C22.7383 20.879 23 20.2855 23 19.6667V12.0833C23 11.4645 22.7383 10.871 22.2725 10.4334C21.8067 9.99583 21.1749 9.75 20.5161 9.75ZM8.09677 9.41667V4.33333C8.09677 4.24493 8.13416 4.16014 8.2007 4.09763C8.26725 4.03512 8.3575 4 8.45161 4H10.9355V7H13.0645V4H15.5484C15.6425 4 15.7328 4.03512 15.7993 4.09763C15.8658 4.16014 15.9032 4.24493 15.9032 4.33333V9.41667C15.9032 9.50507 15.8658 9.58986 15.7993 9.65237C15.7328 9.71488 15.6425 9.75 15.5484 9.75H8.45161C8.3575 9.75 8.26725 9.71488 8.2007 9.65237C8.13416 9.58986 8.09677 9.50507 8.09677 9.41667ZM10.9355 20H3.48387C3.38976 20 3.29951 19.9649 3.23296 19.9024C3.16642 19.8399 3.12903 19.7551 3.12903 19.6667V12.0833C3.12903 11.9949 3.16642 11.9101 3.23296 11.8476C3.29951 11.7851 3.38976 11.75 3.48387 11.75H5.96774V16H8.09677V11.75H10.5806C10.6748 11.75 10.765 11.7851 10.8316 11.8476C10.8981 11.9101 10.9355 11.9949 10.9355 12.0833V20ZM20.871 19.6667C20.871 19.7551 20.8336 19.8399 20.767 19.9024C20.7005 19.9649 20.6102 20 20.5161 20H13.0645V12.0833C13.0645 11.9949 13.1019 11.9101 13.1684 11.8476C13.235 11.7851 13.3252 11.75 13.4194 11.75H15.9032V16H18.0323V11.75H20.5161C20.6102 11.75 20.7005 11.7851 20.767 11.8476C20.8336 11.9101 20.871 11.9949 20.871 12.0833V19.6667Z", fill: "currentColor" }) }))); };
39
+ var SvgCargo = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M20.5161 9.75H18.0039C18.0218 9.63967 18.0313 9.52827 18.0323 9.41667V4.33333C18.0323 3.7145 17.7706 3.121 17.3047 2.68342C16.8389 2.24583 16.2072 2 15.5484 2H8.45161C7.79285 2 7.16107 2.24583 6.69525 2.68342C6.22943 3.121 5.96774 3.7145 5.96774 4.33333V9.41667C5.96871 9.52827 5.97819 9.63967 5.99613 9.75H3.48387C2.82511 9.75 2.19333 9.99583 1.72751 10.4334C1.26169 10.871 1 11.4645 1 12.0833V19.6667C1 20.2855 1.26169 20.879 1.72751 21.3166C2.19333 21.7542 2.82511 22 3.48387 22H20.5161C21.1749 22 21.8067 21.7542 22.2725 21.3166C22.7383 20.879 23 20.2855 23 19.6667V12.0833C23 11.4645 22.7383 10.871 22.2725 10.4334C21.8067 9.99583 21.1749 9.75 20.5161 9.75ZM8.09677 9.41667V4.33333C8.09677 4.24493 8.13416 4.16014 8.2007 4.09763C8.26725 4.03512 8.3575 4 8.45161 4H10.9355V7H13.0645V4H15.5484C15.6425 4 15.7328 4.03512 15.7993 4.09763C15.8658 4.16014 15.9032 4.24493 15.9032 4.33333V9.41667C15.9032 9.50507 15.8658 9.58986 15.7993 9.65237C15.7328 9.71488 15.6425 9.75 15.5484 9.75H8.45161C8.3575 9.75 8.26725 9.71488 8.2007 9.65237C8.13416 9.58986 8.09677 9.50507 8.09677 9.41667ZM10.9355 20H3.48387C3.38976 20 3.29951 19.9649 3.23296 19.9024C3.16642 19.8399 3.12903 19.7551 3.12903 19.6667V12.0833C3.12903 11.9949 3.16642 11.9101 3.23296 11.8476C3.29951 11.7851 3.38976 11.75 3.48387 11.75H5.96774V16H8.09677V11.75H10.5806C10.6748 11.75 10.765 11.7851 10.8316 11.8476C10.8981 11.9101 10.9355 11.9949 10.9355 12.0833V20ZM20.871 19.6667C20.871 19.7551 20.8336 19.8399 20.767 19.9024C20.7005 19.9649 20.6102 20 20.5161 20H13.0645V12.0833C13.0645 11.9949 13.1019 11.9101 13.1684 11.8476C13.235 11.7851 13.3252 11.75 13.4194 11.75H15.9032V16H18.0323V11.75H20.5161C20.6102 11.75 20.7005 11.7851 20.767 11.8476C20.8336 11.9101 20.871 11.9949 20.871 12.0833V19.6667Z", fill: "currentColor" }) }))); };
40
40
  exports.default = SvgCargo;
package/dist/components/Icon/Icon.styled.js CHANGED
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.IconWrapper = exports.IconStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
- exports.IconStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;\n gap: 50px 20px;\n .item{\n text-align: center;\n .title{\n display: block;\n margin-top: 10px;\n font:var(--body-regular-14-17);\n }\n }\n"], ["\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;\n gap: 50px 20px;\n .item{\n text-align: center;\n .title{\n display: block;\n margin-top: 10px;\n font:var(--body-regular-14-17);\n }\n }\n"])));
12
+ exports.IconStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;\n gap: 50px 20px;\n .item{\n text-align: center;\n .title{\n display: block;\n margin-top: 10px;\n font:var(--body-regular-14-17);\n }\n }\n\n table{\n border-collapse: collapse;\n }\n td, th {\n border: 1px solid #ddd;\n padding: 8px;\n }\n\n tr:nth-child(even){background-color: #f2f2f2;}\n\n tr:hover {background-color: #ddd;}\n\n th {\n padding-top: 12px;\n padding-bottom: 12px;\n text-align: left;\n background-color: #04AA6D;\n color: white;\n }\n"], ["\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;\n gap: 50px 20px;\n .item{\n text-align: center;\n .title{\n display: block;\n margin-top: 10px;\n font:var(--body-regular-14-17);\n }\n }\n\n table{\n border-collapse: collapse;\n }\n td, th {\n border: 1px solid #ddd;\n padding: 8px;\n }\n\n tr:nth-child(even){background-color: #f2f2f2;}\n\n tr:hover {background-color: #ddd;}\n\n th {\n padding-top: 12px;\n padding-bottom: 12px;\n text-align: left;\n background-color: #04AA6D;\n color: white;\n }\n"])));
13
13
  exports.IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: middle;\n svg{\n display: block;\n width: ", ";\n height: ", ";\n ", "\n }\n"], ["\n display: inline-block;\n vertical-align: middle;\n svg{\n display: block;\n width: ", ";\n height: ", ";\n ", "\n }\n"])), function (props) { return props.$width; }, function (props) { return props.$height; }, function (props) { return props.$hasColorChanged ? "\n path,circle,rect{\n color: ".concat(props.$color, ";\n &[stroke-width]{\n stroke-width: ").concat(props.$strokeWidth, ";\n }\n }\n stop{\n ").concat(props.$linear.map(function (value, key) {
14
14
  return "\n &:nth-child(".concat(key + 1, "){\n stop-color: ").concat(value, ";\n }\n ");
15
15
  }), "}\n }\n ") : ""; });
package/dist/components/Icon/index.js CHANGED
@@ -26,10 +26,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  };
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  exports.ButtonIcon = exports.BoxLeft = exports.BoxDown = exports.Box = exports.Bookmark = exports.Bag3 = exports.Bag = exports.Bag2 = exports.Baby = exports.AskedQuestions = exports.ArrowsRight = exports.ArrowsLeft = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeftHover = exports.ArrowSmallLeft = exports.ArrowSmallDown = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowPlusCircle = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGo = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.AgreementArrowUp = exports.AgreementArrowDown = exports.Again = exports.AddUser = exports.Activity = void 0;
29
- exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Dislike = exports.Discovery = exports.Discount = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.Closemini = exports.CloseSquare = exports.CloseSmall = exports.CloseMiniHover = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CircleFilled = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMarkThin = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.CargoBack = exports.Cargo2 = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = exports.Calendar = exports.BuyBig = exports.Buy = void 0;
30
- exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NoHiddenCost = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading2 = exports.Loading = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Lightning = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegativeFilled = exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.Heart = exports.Graph = exports.Gift = void 0;
31
- exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TicketStar = exports.Ticket = exports.TickSquare = exports.ThreeUser = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Securitywithtik = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.ProfilNamePassive = exports.ProfilName = exports.PriceTag = exports.PoweredByQnbLogo = void 0;
32
- exports.iconList = exports.Visa = exports.TwitterStroke = exports.TimesLg = exports.Pointinghand = exports.PointFinger = exports.Plant = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Lgbt = exports.HeartArrow = exports.Grid = exports.FacebookStroke = exports.Confetti = exports.BackCargo2 = exports.Youtube = exports.Work = exports.Whatsapp = exports.WaveLoading = exports.WaveArrowUp = void 0;
29
+ exports.Gift = exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Dislike = exports.Discovery = exports.Discount = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.Closemini = exports.CloseSquare = exports.CloseSmall = exports.CloseMiniHover = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CircleFilled = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMarkThin = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.CargoBack = exports.Cargo2 = exports.Cargo = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = exports.Calendar = exports.BuyBig = exports.Buy = void 0;
30
+ exports.PoweredByQnbLogo = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NoHiddenCost = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading2 = exports.Loading = exports.List = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Lightning = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegativeFilled = exports.InstagramNegative = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.Heart = exports.Graph = void 0;
31
+ exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TicketStar = exports.Ticket = exports.TickSquare = exports.ThreeUser = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Securitywithtik = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.ProfilNamePassive = exports.ProfilName = exports.PriceTag = void 0;
32
+ exports.iconList = exports.Visa = exports.TwitterStroke = exports.TimesLg = exports.Pointinghand = exports.PointFinger = exports.Plant = exports.More = exports.Mastercard = exports.Live = exports.LinkedinStroke = exports.Lgbt = exports.HeartArrow = exports.Grid = exports.FacebookStroke = exports.Confetti = exports.BackCargo2 = exports.Youtube = exports.Work = exports.Whatsapp = exports.WaveLoading = void 0;
33
33
  var jsx_runtime_1 = require("react/jsx-runtime");
34
34
  var Activity_1 = __importDefault(require("./Activity"));
35
35
  Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
@@ -149,8 +149,6 @@ var Camera_1 = __importDefault(require("./Camera"));
149
149
  Object.defineProperty(exports, "Camera", { enumerable: true, get: function () { return Camera_1.default; } });
150
150
  var Campaign_1 = __importDefault(require("./Campaign"));
151
151
  Object.defineProperty(exports, "Campaign", { enumerable: true, get: function () { return Campaign_1.default; } });
152
- var Cargo1_1 = __importDefault(require("./Cargo1"));
153
- Object.defineProperty(exports, "Cargo1", { enumerable: true, get: function () { return Cargo1_1.default; } });
154
152
  var Cargo_1 = __importDefault(require("./Cargo"));
155
153
  Object.defineProperty(exports, "Cargo", { enumerable: true, get: function () { return Cargo_1.default; } });
156
154
  var Cargo2_1 = __importDefault(require("./Cargo2"));
@@ -710,10 +708,6 @@ exports.iconList = {
710
708
  var props = __rest(_a, []);
711
709
  return (0, jsx_runtime_1.jsx)(Campaign_1.default, __assign({}, props));
712
710
  },
713
- Cargo1: function (_a) {
714
- var props = __rest(_a, []);
715
- return (0, jsx_runtime_1.jsx)(Cargo1_1.default, __assign({}, props));
716
- },
717
711
  Cargo: function (_a) {
718
712
  var props = __rest(_a, []);
719
713
  return (0, jsx_runtime_1.jsx)(Cargo_1.default, __assign({}, props));
package/dist/components/Icon/stories/Icons.stories.js CHANGED
@@ -21,9 +21,9 @@ var Icon_styled_1 = require("../Icon.styled");
21
21
  var Icon_1 = __importDefault(require("../Icon"));
22
22
  var IconStoryList = function (props) {
23
23
  var color = props.color, strokeWidth = props.strokeWidth, width = props.width, height = props.height, hasColorChanged = props.hasColorChanged;
24
- return ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconStyled, { children: Object.entries(index_1.iconList).map(function (value, key) {
25
- return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'item' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "svg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: value[0], color: color, strokeWidth: strokeWidth, width: width, height: height, hasColorChanged: hasColorChanged }) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: value[0] }))] }), key));
26
- }) }));
24
+ return ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconStyled, { children: (0, jsx_runtime_1.jsx)("table", { children: Object.entries(index_1.iconList).map(function (value, key) {
25
+ return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: 'item' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "svg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: value[0], color: color, strokeWidth: strokeWidth, width: width, height: height, hasColorChanged: hasColorChanged }) })) })) }), (0, jsx_runtime_1.jsx)("td", { children: value[0] }), (0, jsx_runtime_1.jsx)("td", { contentEditable: "true" })] }, key));
26
+ }) }) }));
27
27
  };
28
28
  exports.default = {
29
29
  title: 'Design System/Icons',
package/dist/components/Input/Input.js CHANGED
@@ -89,7 +89,7 @@ var Input = function (_a) {
89
89
  setStartDate(date);
90
90
  setInputValue((0, date_fns_1.format)(date, format));
91
91
  onChange((0, date_fns_1.format)(date, format));
92
- setTimeout(function () { inputRef.current.input.blur(); }, 50);
92
+ setTimeout(function () { inputRef.current.input.blur(); }, 1);
93
93
  }, selected: startDate, ref: inputRef, dateFormat: format, locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}),
94
94
  //customInput={<InputStyled $hasError={hasError} id={id}/>}
95
95
  renderCustomHeader: function (_a) {
package/dist/components/Modal/Modal.styled.js CHANGED
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.OverlayStyled = exports.ModalStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
- exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 0.5rem;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px var(--box-shadow-color);\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n [data-simplebar] {\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"], ["\n background: white;\n border-radius: 0.5rem;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px var(--box-shadow-color);\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n [data-simplebar] {\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"])), function (props) {
13
+ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 0.5rem;\n box-sizing: border-box;\n max-height: min(calc(100dvh - 50px), 720px);\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px var(--box-shadow-color);\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n [data-simplebar] {\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"], ["\n background: white;\n border-radius: 0.5rem;\n box-sizing: border-box;\n max-height: min(calc(100dvh - 50px), 720px);\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 0.5rem;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px var(--box-shadow-color);\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n [data-simplebar] {\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"])), function (props) {
14
14
  switch (props.$size) {
15
15
  case 'xxsmall':
16
16
  return "311px";
@@ -25,7 +25,7 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
25
25
  default:
26
26
  return "462px";
27
27
  }
28
- }, function (props) { return !props.$autoHeight ? "\n @media only screen and ".concat(devices_1.devices.sm, " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n width: 100%;\n max-width: 100%;\n max-height: initial;\n }\n @media screen and (max-height: 900px) {\n @media screen and (min-width: ").concat(devices_1.breakpoints.sm, ") {\n max-height: calc(100dvh - 50px);\n }\n }\n ") : "\n @media screen and (max-height: 900px) {\n max-height: calc(100dvh - 50px);\n }\n "; }, function (props) { return props.$showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.$customContent ? '0' : '0 24px'; }, function (props) { return props.$showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
28
+ }, function (props) { return !props.$autoHeight ? "\n @media only screen and ".concat(devices_1.devices.sm, " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n width: 100%;\n max-width: 100%;\n max-height: initial;\n }\n ") : ""; }, function (props) { return props.$showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.$customContent ? '0' : '0 24px'; }, function (props) { return props.$showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
29
29
  switch (props.$buttonsAlignment) {
30
30
  case 'horizontal':
31
31
  return "\n justify-content: flex-start;\n flex-direction: row-reverse;\n gap: 0;\n button {\n + button{\n margin-right: ".concat((props.$size === 'small' ? '16px' : '24px'), ";\n @media only screen and ").concat(devices_1.devices.sm, " {\n margin-right: 16px;\n }\n }\n }\n @media only screen and ").concat(devices_1.devices.sm, " {\n button {\n flex: 1 1 0;\n &:is(:nth-child(1)) {\n min-width: ").concat((props.$showSecondaryButton ? 'initial' : 'calc(100% - 3rem)'), ";\n white-space: nowrap;\n box-sizing: content-box;\n }\n + button {\n margin-right: 1rem;\n }\n }\n }\n ");
package/dist/components/Pagination/Pagination.js CHANGED
@@ -58,6 +58,7 @@ var react_i18next_1 = require("react-i18next");
58
58
  var Button_1 = __importDefault(require("../Button"));
59
59
  var rc_select_1 = __importStar(require("rc-select"));
60
60
  var react_1 = require("react");
61
+ var genericUtils_1 = require("../../utils/genericUtils");
61
62
  var Pagination = function (_a) {
62
63
  var _b = _a.defaultCurrent, defaultCurrent = _b === void 0 ? props_1.PaginationDefault.defaultCurrent : _b, _c = _a.defaultPageSize, defaultPageSize = _c === void 0 ? props_1.PaginationDefault.defaultPageSize : _c, _d = _a.total, total = _d === void 0 ? props_1.PaginationDefault.total : _d, _e = _a.pageSizeOptions, pageSizeOptions = _e === void 0 ? props_1.PaginationDefault.pageSizeOptions : _e, onChange = _a.onChange, onShowSizeChange = _a.onShowSizeChange, otherProps = __rest(_a, ["defaultCurrent", "defaultPageSize", "total", "pageSizeOptions", "onChange", "onShowSizeChange"]);
63
64
  var t = (0, react_i18next_1.useTranslation)().t;
@@ -70,7 +71,9 @@ var Pagination = function (_a) {
70
71
  var children = props.children.map(function (child) {
71
72
  return __assign(__assign({}, child), { props: __assign(__assign({}, child.props), { children: child.props.children.replaceAll("sayfa", "Sayfa") }) });
72
73
  });
73
- return (0, jsx_runtime_1.jsx)(rc_select_1.default, __assign({}, props, { children: children, listHeight: 153 }));
74
+ return (0, jsx_runtime_1.jsx)(rc_select_1.default, __assign({}, props, { children: children, listHeight: 153, showAction: "click", onMouseDown: function (e) {
75
+ (0, genericUtils_1.focusSelect)(e.target);
76
+ } }));
74
77
  };
75
78
  Select.Option = rc_select_1.Option;
76
79
  return ((0, jsx_runtime_1.jsx)(Pagination_styled_1.PaginationStyled, { children: (0, jsx_runtime_1.jsx)(rc_pagination_1.default, __assign({ showQuickJumper: {
package/dist/components/Pagination/Pagination.styled.js CHANGED
@@ -12,5 +12,5 @@ var jsx_runtime_1 = require("react/jsx-runtime");
12
12
  var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var svgToBase64_1 = __importDefault(require("../../utils/svgToBase64"));
14
14
  var Icon_1 = __importDefault(require("../Icon/Icon"));
15
- exports.PaginationStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rc-pagination {\n align-items: flex-start;\n justify-content: flex-end;\n\n .rc-pagination-item {\n width: 1.5rem;\n height: 1.5rem;\n min-width: 1.5rem;\n padding: 0;\n border: 0;\n margin: 8.5px 0.25rem 0 0.25rem;\n border-radius: 0.25rem;\n transition: all 0.2s ease !important;\n\n a {\n padding: 0;\n font: var(--caption-semi-bold-12-15);\n line-height: 1.5rem;\n color: inherit;\n }\n\n &:is(.rc-pagination-item-active), &:hover {\n background-color: var(--primary-opacity-10);\n\n a {\n color: var(--primary);\n }\n }\n }\n\n .rc-pagination-prev, .rc-pagination-next {\n width: 2.5rem;\n height: 2.5rem;\n border: 0;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--primary);\n transition: all 0.2s ease;\n &:hover{\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n div {\n display: block;\n }\n }\n\n .rc-pagination-prev {\n margin-right: 1rem;\n }\n\n .rc-pagination-next {\n margin-left: 1rem;\n }\n\n .rc-pagination-jump-prev, .rc-pagination-jump-next {\n width: 27px;\n margin: 5px 0 0 0;\n\n button {\n &:after {\n content: \"...\";\n }\n }\n }\n\n .rc-pagination-options {\n display: flex;\n align-items: flex-start;\n margin-left: 1rem;\n\n .rc-pagination-options-quick-jumper {\n display: flex;\n align-items: center;\n height: auto !important;\n line-height: initial !important;\n input {\n margin: 0 1rem;\n box-sizing: border-box;\n width: 88px;\n height: 40px;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 19.5px 24px;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n outline: none;\n background: var(--dark-opacity-3);\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid var(--primary);\n color: var(--dark);\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n background: var(--dark-opacity-5);\n }\n }\n }\n }\n\n .rc-select {\n\n // --------------- Single ----------------\n margin: 0;\n &-single {\n .rc-select-selector {\n display: flex;\n position: relative;\n\n .rc-select-selection-wrap {\n width: 100%;\n position: relative;\n }\n\n .rc-select-selection-search {\n width: 100%;\n position: relative;\n display: none;\n &-input {\n width: 100%;\n }\n }\n\n .rc-select-selection-item,\n .rc-select-selection-placeholder {\n font: inherit;\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n top: 0;\n left: 0;\n justify-content: space-between;\n padding: 0 1.5rem;\n }\n\n .rc-select-selection-item {\n &:after{\n content: \"\";\n display: block;\n width: 1rem;\n height: 1rem;\n transition: all .2s ease;\n background-image:url('", "');\n }\n }\n }\n\n // Not customize\n\n &:not(.rc-select-customize-input) {\n .rc-select-selector {\n box-sizing: border-box;\n width: 141px;\n height: 40px;\n background: white;\n border-radius: 0.5rem;\n border: none;\n padding: 0;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n outline: none;\n text-align: center;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n }\n }\n }\n }\n &-open {\n .rc-select-selector {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n &:before{\n border: 2px solid var(--primary) !important;\n }\n .rc-select-selection-item {\n &:after{\n transform: rotate(180deg);\n }\n }\n }\n }\n\n // =============== Focused ===============\n\n &-focused {\n .rc-select-selector {\n border: 1px solid var(--dark-opacity-10) !important;\n }\n }\n\n // ============== Dropdown ===============\n\n &-dropdown {\n margin: 0 !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: none !important;\n border: 1px solid var(--dark-opacity-10) !important;\n overflow: hidden !important;\n inset: 40px auto auto 0 !important;\n position: static !important;\n }\n\n // =============== Option ================\n\n &-item {\n font: var(--title-bold-16-19);\n padding: 1rem 1.5rem;\n\n // >>> Group\n\n &-group {\n color: #999;\n font-weight: bold;\n font-size: 80%;\n }\n\n // >>> Option\n\n &-option {\n position: relative;\n display: block;\n font: var(--title-bold-16-19);\n\n &-grouped {\n padding-left: 24px;\n }\n\n .rc-select-item-option-state {\n display: none;\n }\n\n // ------- Active -------\n\n &-active {\n background: var(--dark-opacity-3);\n }\n\n // ------ Disabled ------\n\n &-disabled {\n color: #999;\n }\n }\n\n // >>> Empty\n\n &-empty {\n text-align: center;\n color: #999;\n }\n }\n .rc-virtual-list-scrollbar-thumb{\n background-color: var(--dark-opacity-10) !important;\n width: 5px !important;\n }\n }\n }\n"], ["\n .rc-pagination {\n align-items: flex-start;\n justify-content: flex-end;\n\n .rc-pagination-item {\n width: 1.5rem;\n height: 1.5rem;\n min-width: 1.5rem;\n padding: 0;\n border: 0;\n margin: 8.5px 0.25rem 0 0.25rem;\n border-radius: 0.25rem;\n transition: all 0.2s ease !important;\n\n a {\n padding: 0;\n font: var(--caption-semi-bold-12-15);\n line-height: 1.5rem;\n color: inherit;\n }\n\n &:is(.rc-pagination-item-active), &:hover {\n background-color: var(--primary-opacity-10);\n\n a {\n color: var(--primary);\n }\n }\n }\n\n .rc-pagination-prev, .rc-pagination-next {\n width: 2.5rem;\n height: 2.5rem;\n border: 0;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--primary);\n transition: all 0.2s ease;\n &:hover{\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n div {\n display: block;\n }\n }\n\n .rc-pagination-prev {\n margin-right: 1rem;\n }\n\n .rc-pagination-next {\n margin-left: 1rem;\n }\n\n .rc-pagination-jump-prev, .rc-pagination-jump-next {\n width: 27px;\n margin: 5px 0 0 0;\n\n button {\n &:after {\n content: \"...\";\n }\n }\n }\n\n .rc-pagination-options {\n display: flex;\n align-items: flex-start;\n margin-left: 1rem;\n\n .rc-pagination-options-quick-jumper {\n display: flex;\n align-items: center;\n height: auto !important;\n line-height: initial !important;\n input {\n margin: 0 1rem;\n box-sizing: border-box;\n width: 88px;\n height: 40px;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 19.5px 24px;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n outline: none;\n background: var(--dark-opacity-3);\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid var(--primary);\n color: var(--dark);\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n background: var(--dark-opacity-5);\n }\n }\n }\n }\n\n .rc-select {\n\n // --------------- Single ----------------\n margin: 0;\n &-single {\n .rc-select-selector {\n display: flex;\n position: relative;\n\n .rc-select-selection-wrap {\n width: 100%;\n position: relative;\n }\n\n .rc-select-selection-search {\n width: 100%;\n position: relative;\n display: none;\n &-input {\n width: 100%;\n }\n }\n\n .rc-select-selection-item,\n .rc-select-selection-placeholder {\n font: inherit;\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n top: 0;\n left: 0;\n justify-content: space-between;\n padding: 0 1.5rem;\n }\n\n .rc-select-selection-item {\n &:after{\n content: \"\";\n display: block;\n width: 1rem;\n height: 1rem;\n transition: all .2s ease;\n background-image:url('", "');\n }\n }\n }\n\n // Not customize\n\n &:not(.rc-select-customize-input) {\n .rc-select-selector {\n box-sizing: border-box;\n width: 141px;\n height: 40px;\n background: white;\n border-radius: 0.5rem;\n border: none;\n padding: 0;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n outline: none;\n text-align: center;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n }\n }\n }\n }\n &-open {\n .rc-select-selector {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n &:before{\n border: 2px solid var(--primary) !important;\n }\n .rc-select-selection-item {\n &:after{\n transform: rotate(180deg);\n }\n }\n }\n }\n\n // =============== Focused ===============\n\n &-focused {\n .rc-select-selector {\n border: 1px solid var(--dark-opacity-10) !important;\n }\n }\n\n // ============== Dropdown ===============\n\n &-dropdown {\n margin: 0 !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: none !important;\n border: 1px solid var(--dark-opacity-10) !important;\n overflow: hidden !important;\n inset: 40px auto auto 0 !important;\n position: static !important;\n }\n\n // =============== Option ================\n\n &-item {\n font: var(--title-bold-16-19);\n padding: 1rem 1.5rem;\n\n // >>> Group\n\n &-group {\n color: #999;\n font-weight: bold;\n font-size: 80%;\n }\n\n // >>> Option\n\n &-option {\n position: relative;\n display: block;\n font: var(--title-bold-16-19);\n\n &-grouped {\n padding-left: 24px;\n }\n\n .rc-select-item-option-state {\n display: none;\n }\n\n // ------- Active -------\n\n &-active {\n background: var(--dark-opacity-3);\n }\n\n // ------ Disabled ------\n\n &-disabled {\n color: #999;\n }\n }\n\n // >>> Empty\n\n &-empty {\n text-align: center;\n color: #999;\n }\n }\n .rc-virtual-list-scrollbar-thumb{\n background-color: var(--dark-opacity-10) !important;\n width: 5px !important;\n }\n }\n }\n"])), function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--dark)", name: "ArrowDownBig" })); });
15
+ exports.PaginationStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rc-pagination {\n align-items: flex-start;\n justify-content: flex-end;\n\n .rc-pagination-item {\n width: 1.5rem;\n height: 1.5rem;\n min-width: 1.5rem;\n padding: 0;\n border: 0;\n margin: 8.5px 2px 0 2px;\n border-radius: 0.25rem;\n transition: all 0.2s ease !important;\n\n a {\n padding: 0;\n font: var(--caption-semi-bold-12-15);\n line-height: 1.5rem;\n color: inherit;\n }\n\n &:is(.rc-pagination-item-active), &:hover {\n background-color: var(--primary-opacity-10);\n\n a {\n color: var(--primary);\n }\n }\n }\n\n .rc-pagination-prev, .rc-pagination-next {\n width: 2.5rem;\n height: 2.5rem;\n border: 0;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--primary);\n transition: all 0.2s ease;\n &:hover{\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n div {\n display: block;\n }\n }\n\n .rc-pagination-prev {\n margin-right: 1rem;\n }\n\n .rc-pagination-next {\n margin-left: 1rem;\n }\n\n .rc-pagination-jump-prev, .rc-pagination-jump-next {\n width: 27px;\n margin: 5px 0 0 0;\n\n button {\n &:after {\n content: \"...\";\n }\n }\n }\n\n .rc-pagination-options {\n display: flex;\n align-items: flex-start;\n margin-left: 1rem;\n\n .rc-pagination-options-quick-jumper {\n display: flex;\n align-items: center;\n height: auto !important;\n line-height: initial !important;\n input {\n margin: 0 1rem;\n box-sizing: border-box;\n width: 88px;\n height: 40px;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 19.5px 24px;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n outline: none;\n background: var(--dark-opacity-3);\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid var(--primary);\n color: var(--dark);\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n background: var(--dark-opacity-5);\n }\n }\n }\n }\n\n .rc-select {\n\n // --------------- Single ----------------\n margin: 0;\n &-single {\n .rc-select-selector {\n display: flex;\n position: relative;\n\n .rc-select-selection-wrap {\n width: 100%;\n position: relative;\n }\n\n .rc-select-selection-search {\n width: 100%;\n position: relative;\n display: none;\n &-input {\n width: 100%;\n }\n }\n\n .rc-select-selection-item,\n .rc-select-selection-placeholder {\n font: inherit;\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n top: 0;\n left: 0;\n justify-content: space-between;\n padding: 0 1.5rem;\n }\n\n .rc-select-selection-item {\n &:after{\n content: \"\";\n display: block;\n width: 1rem;\n height: 1rem;\n transition: all .2s ease;\n background-image:url('", "');\n }\n }\n }\n\n // Not customize\n\n &:not(.rc-select-customize-input) {\n .rc-select-selector {\n box-sizing: border-box;\n width: 141px;\n height: 40px;\n background: white;\n border-radius: 0.5rem;\n border: none;\n padding: 0;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n outline: none;\n text-align: center;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n }\n }\n }\n }\n &-open {\n .rc-select-selector {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n &:before{\n border: 2px solid var(--primary) !important;\n }\n .rc-select-selection-item {\n &:after{\n transform: rotate(180deg);\n }\n }\n }\n }\n\n // =============== Focused ===============\n\n &-focused {\n .rc-select-selector {\n border: 1px solid var(--dark-opacity-10) !important;\n }\n }\n\n // ============== Dropdown ===============\n\n &-dropdown {\n margin: 0 !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: none !important;\n border: 1px solid var(--dark-opacity-10) !important;\n overflow: hidden !important;\n inset: 40px auto auto 0 !important;\n position: static !important;\n }\n\n // =============== Option ================\n\n &-item {\n font: var(--title-bold-16-19);\n padding: 1rem 1.5rem;\n\n // >>> Group\n\n &-group {\n color: #999;\n font-weight: bold;\n font-size: 80%;\n }\n\n // >>> Option\n\n &-option {\n position: relative;\n display: block;\n font: var(--title-bold-16-19);\n\n &-grouped {\n padding-left: 24px;\n }\n\n .rc-select-item-option-state {\n display: none;\n }\n\n // ------- Active -------\n\n &-active {\n background: var(--dark-opacity-3);\n }\n\n // ------ Disabled ------\n\n &-disabled {\n color: #999;\n }\n }\n\n // >>> Empty\n\n &-empty {\n text-align: center;\n color: #999;\n }\n }\n .rc-virtual-list-scrollbar-thumb{\n background-color: var(--dark-opacity-10) !important;\n width: 5px !important;\n }\n }\n }\n"], ["\n .rc-pagination {\n align-items: flex-start;\n justify-content: flex-end;\n\n .rc-pagination-item {\n width: 1.5rem;\n height: 1.5rem;\n min-width: 1.5rem;\n padding: 0;\n border: 0;\n margin: 8.5px 2px 0 2px;\n border-radius: 0.25rem;\n transition: all 0.2s ease !important;\n\n a {\n padding: 0;\n font: var(--caption-semi-bold-12-15);\n line-height: 1.5rem;\n color: inherit;\n }\n\n &:is(.rc-pagination-item-active), &:hover {\n background-color: var(--primary-opacity-10);\n\n a {\n color: var(--primary);\n }\n }\n }\n\n .rc-pagination-prev, .rc-pagination-next {\n width: 2.5rem;\n height: 2.5rem;\n border: 0;\n position: relative;\n overflow: hidden;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--primary);\n transition: all 0.2s ease;\n &:hover{\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n }\n div {\n display: block;\n }\n }\n\n .rc-pagination-prev {\n margin-right: 1rem;\n }\n\n .rc-pagination-next {\n margin-left: 1rem;\n }\n\n .rc-pagination-jump-prev, .rc-pagination-jump-next {\n width: 27px;\n margin: 5px 0 0 0;\n\n button {\n &:after {\n content: \"...\";\n }\n }\n }\n\n .rc-pagination-options {\n display: flex;\n align-items: flex-start;\n margin-left: 1rem;\n\n .rc-pagination-options-quick-jumper {\n display: flex;\n align-items: center;\n height: auto !important;\n line-height: initial !important;\n input {\n margin: 0 1rem;\n box-sizing: border-box;\n width: 88px;\n height: 40px;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 19.5px 24px;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n outline: none;\n background: var(--dark-opacity-3);\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid var(--primary);\n color: var(--dark);\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n background: var(--dark-opacity-5);\n }\n }\n }\n }\n\n .rc-select {\n\n // --------------- Single ----------------\n margin: 0;\n &-single {\n .rc-select-selector {\n display: flex;\n position: relative;\n\n .rc-select-selection-wrap {\n width: 100%;\n position: relative;\n }\n\n .rc-select-selection-search {\n width: 100%;\n position: relative;\n display: none;\n &-input {\n width: 100%;\n }\n }\n\n .rc-select-selection-item,\n .rc-select-selection-placeholder {\n font: inherit;\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n top: 0;\n left: 0;\n justify-content: space-between;\n padding: 0 1.5rem;\n }\n\n .rc-select-selection-item {\n &:after{\n content: \"\";\n display: block;\n width: 1rem;\n height: 1rem;\n transition: all .2s ease;\n background-image:url('", "');\n }\n }\n }\n\n // Not customize\n\n &:not(.rc-select-customize-input) {\n .rc-select-selector {\n box-sizing: border-box;\n width: 141px;\n height: 40px;\n background: white;\n border-radius: 0.5rem;\n border: none;\n padding: 0;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n outline: none;\n text-align: center;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n }\n }\n }\n }\n &-open {\n .rc-select-selector {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n &:before{\n border: 2px solid var(--primary) !important;\n }\n .rc-select-selection-item {\n &:after{\n transform: rotate(180deg);\n }\n }\n }\n }\n\n // =============== Focused ===============\n\n &-focused {\n .rc-select-selector {\n border: 1px solid var(--dark-opacity-10) !important;\n }\n }\n\n // ============== Dropdown ===============\n\n &-dropdown {\n margin: 0 !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: none !important;\n border: 1px solid var(--dark-opacity-10) !important;\n overflow: hidden !important;\n inset: 40px auto auto 0 !important;\n position: static !important;\n }\n\n // =============== Option ================\n\n &-item {\n font: var(--title-bold-16-19);\n padding: 1rem 1.5rem;\n\n // >>> Group\n\n &-group {\n color: #999;\n font-weight: bold;\n font-size: 80%;\n }\n\n // >>> Option\n\n &-option {\n position: relative;\n display: block;\n font: var(--title-bold-16-19);\n\n &-grouped {\n padding-left: 24px;\n }\n\n .rc-select-item-option-state {\n display: none;\n }\n\n // ------- Active -------\n\n &-active {\n background: var(--dark-opacity-3);\n }\n\n // ------ Disabled ------\n\n &-disabled {\n color: #999;\n }\n }\n\n // >>> Empty\n\n &-empty {\n text-align: center;\n color: #999;\n }\n }\n .rc-virtual-list-scrollbar-thumb{\n background-color: var(--dark-opacity-10) !important;\n width: 5px !important;\n }\n }\n }\n"])), function (props) { return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "var(--dark)", name: "ArrowDownBig" })); });
16
16
  var templateObject_1;
package/dist/components/SelectBox/SelectBox.styled.js CHANGED
@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var Icon_1 = __importDefault(require("../Icon/Icon"));
14
14
  var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
15
15
  var devices_1 = require("../../constants/devices");
16
- exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: white;\n }\n }\n\n .customSelect__control {\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16);\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0.5rem;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__indicators{\n height: 56px;\n }\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 0.5rem;\n width: 16px;\n height: 16px;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1rem;\n height: 1rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n &:is(.customSelect__control--menu-is-open){\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n\n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-focused) {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__single-value, .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: white;\n }\n }\n\n .customSelect__control {\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16);\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0.5rem;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__indicators{\n height: 56px;\n }\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 0.5rem;\n width: 16px;\n height: 16px;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1rem;\n height: 1rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n &:is(.customSelect__control--menu-is-open){\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n\n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-focused) {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__single-value, .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$hasError ? "2px" : "1px"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) {
16
+ exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: white;\n }\n }\n\n .customSelect__control {\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n ", "\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n position: relative;\n z-index: 5;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16);\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: 0.5rem !important;\n position: static !important;\n }\n }\n .customSelect__indicators{\n height: 56px;\n }\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 0.5rem;\n width: 16px;\n height: 16px;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1rem;\n height: 1rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n &:is(.customSelect__control--menu-is-open){\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n\n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-focused) {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n [data-simplebar] {\n max-height: ", " !important;\n height: auto !important;\n padding: 0 !important;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n\n .select {\n position: relative;\n\n .customSelect {\n &:is(.lightBg) {\n .customSelect__control {\n background-color: white;\n }\n }\n\n .customSelect__control {\n background-color: var(--dark-opacity-3);\n border: 0;\n padding: 0 1.5rem;\n cursor: pointer;\n\n &:before {\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-width: ", ";\n border-style: solid;\n border-radius: 0.5rem;\n border-color: ", ";\n }\n ", "\n /*&:hover {\n &:before{\n border-color: var(--primary);\n border-width: 2px;\n }\n }*/\n\n .customSelect__value-container {\n padding: 0;\n min-height: ", ";\n\n &:is(.customSelect__value-container--is-multi) {\n display: block;\n padding: 1rem 0;\n }\n\n .customSelect__multi-value {\n border: 1px solid var(--grey-10);\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-3);\n margin: 0;\n justify-content: space-between;\n display: grid;\n grid-template-columns: 1fr auto;\n position: relative;\n z-index: 5;\n + .customSelect__multi-value {\n margin-top: 0.5rem;\n }\n\n .customSelect__multi-value__label {\n font: var(--body-semi-bold-13-16);\n }\n\n .customSelect__multi-value__remove {\n background-color: transparent !important;\n color: var(--dark) !important;\n }\n }\n\n .customSelect__placeholder {\n font: var(--body-semi-bold-14-17);\n color: ", ";\n margin: 0;\n line-height: 1.5rem;\n }\n\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font: var(--body-semi-bold-14-17);\n color: ", ";\n }\n\n .customSelect__input-container {\n margin: 0;\n padding: 0;\n position: absolute;\n bottom: 0;\n top: 0;\n margin-top: 0;\n width: 100% !important;\n display: block !important;\n &:after {\n display: none;\n }\n\n input {\n font: var(--body-semi-bold-14-17) !important;\n width: 100% !important;\n display: block !important;\n height: 100% !important;\n }\n }\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: 0.5rem !important;\n position: static !important;\n }\n }\n .customSelect__indicators{\n height: 56px;\n }\n .customSelect__indicator {\n padding: 0;\n margin: 0 0 0 0.5rem;\n width: 16px;\n height: 16px;\n transition: all .2s ease;\n\n &:is(.customSelect__dropdown-indicator) {\n ", ";\n }\n\n &:is(.customSelect__clear-indicator) {\n width: 1rem;\n height: 1rem;\n display: block !important;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n\n ~ .customSelect__dropdown-indicator {\n display: none;\n }\n }\n\n div {\n display: block;\n }\n }\n\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__loading-indicator{\n width: 1.5rem;\n span{\n display: none;\n }\n ~ *{\n display: none !important;\n ~ *{\n display: none !important;\n }\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__value-container {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20name%3D%22Search%22%3E%3Cg%20id%3D%22Search%22%3E%3Ccircle%20id%3D%22Ellipse_739%22%20cx%3D%227.33203%22%20cy%3D%227.33398%22%20r%3D%226%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fcircle%3E%3Cpath%20id%3D%22Line_181%22%20d%3D%22M12%2012L14.6667%2014.6667%22%20stroke%3D%22%23", "%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 2rem;\n\n &.customSelect__value-container--has-value {\n background-image: ", ";\n }\n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n &:is(.customSelect__control--menu-is-open){\n .customSelect__input-container {\n margin-top: 0 !important;\n }\n .customSelect__value-container--has-value{\n .customSelect__input-container {\n margin-top: ", ";\n position: static;\n\n input {\n\n }\n }\n }\n }\n }\n\n .customSelect__menu-notice {\n text-align: start;\n padding: 1rem 1.5rem;\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-50);\n }\n\n .customSelect__menu {\n margin: 0;\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n\n .customSelect__menu-list {\n padding: 0;\n //max-height: ", ";\n max-height: initial !important;\n //scroll-margin: 0 10px 30px 0;\n //scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n //scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n\n .option {\n height: 70px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n\n &:hover, &:is(.customSelect__option--is-focused) {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:active {\n background-color: var(--dark-opacity-3);\n\n @media only screen and ", " {\n background-color: transparent !important;\n }\n }\n\n &:is(.optionSm) {\n height: auto;\n min-height: 51px;\n padding: 1rem 1.5rem;\n }\n\n &:is(.fixedBottom) {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n\n strong {\n color: var(--dark-opacity-50);\n }\n }\n\n > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .left {\n strong {\n display: block;\n font: var(--title-bold-16-19);\n }\n\n span {\n display: block;\n font: var(--body-medium-13-16);\n }\n }\n\n .right {\n display: flex;\n align-items: end;\n justify-content: flex-end;\n\n strong {\n display: block;\n font: var(--title-extra-bold-16-19);\n line-height: 17px;\n\n small {\n font: var(--body-extra-bold-14-17);\n }\n }\n\n span {\n display: block;\n font: var(--body-regular-13-16);\n margin-left: 0.2rem;\n }\n }\n }\n\n }\n }\n }\n\n &:is(.isSearchable) {\n .customSelect__control--menu-is-open {\n .customSelect__value-container {\n background-image: url('", "') !important;\n }\n }\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-color: var(--primary);\n border-width: 2px;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n box-shadow: none;\n\n .customSelect__indicator {\n &:is(.customSelect__dropdown-indicator) {\n transform: rotate(180deg);\n }\n }\n\n .customSelect__value-container {\n .customSelect__placeholder {\n color: var(--dark-opacity-50);\n }\n }\n\n\n .customSelect__clear-indicator {\n display: none !important;\n }\n }\n }\n }\n\n .placement-top {\n .customSelect__menu {\n border-radius: 0.5rem 0.5rem 0 0 !important;\n top: auto !important;\n bottom: 100% !important;\n }\n\n .customSelect__control--menu-is-open {\n &:before {\n border-radius: 0 0 0.5rem 0.5rem !important;\n }\n }\n }\n"])), function (props) { return props.$width || '370px'; }, function (props) { return props.$maxOptionListHeight && props.$maxOptionListHeight; }, function (props) { return props.$hasError ? "2px" : "1px"; }, function (props) { return props.$hasError ? "var(--red)" : "var(--dark-opacity-10)"; }, function (props) { return props.$isMulti ? "\n &:is(.customSelect__control--menu-is-open){\n background-color: white !important;\n }\n " : ""; }, function (props) {
17
17
  switch (props.$size) {
18
18
  case 'medium':
19
19
  return "56px";
package/dist/components/Table/Table.js CHANGED
@@ -30,6 +30,7 @@ var Table_styled_1 = require("./Table.styled");
30
30
  var rc_table_1 = __importDefault(require("rc-table"));
31
31
  var react_i18next_1 = require("react-i18next");
32
32
  var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
33
+ var classnames_1 = __importDefault(require("classnames"));
33
34
  var Table = function (_a) {
34
35
  var _b = _a.columns, columns = _b === void 0 ? props_1.TableDefault.columns : _b, emptyText = _a.emptyText, _c = _a.hasLoading, hasLoading = _c === void 0 ? props_1.TableDefault.hasLoading : _c, _d = _a.data, data = _d === void 0 ? props_1.TableDefault.data : _d;
35
36
  var t = (0, react_i18next_1.useTranslation)().t;
@@ -55,6 +56,6 @@ var Table = function (_a) {
55
56
  if (!emptyText) {
56
57
  emptyText = t("NO_OPTIONS_FOUND");
57
58
  }
58
- return ((0, jsx_runtime_1.jsx)(Table_styled_1.TableStyled, { children: (0, jsx_runtime_1.jsx)(rc_table_1.default, { columns: tableColumns, data: tableData, emptyText: (0, jsx_runtime_1.jsx)(Table_styled_1.EmptyStyled, { children: emptyText }), className: (tableData === null || tableData === void 0 ? void 0 : tableData.length) <= 0 && "rc-table-empty" }) }));
59
+ return ((0, jsx_runtime_1.jsx)(Table_styled_1.TableStyled, { children: (0, jsx_runtime_1.jsx)(rc_table_1.default, { columns: tableColumns, data: tableData, emptyText: (0, jsx_runtime_1.jsx)(Table_styled_1.EmptyStyled, { children: emptyText }), className: (0, classnames_1.default)({ "rc-table-empty": (tableData === null || tableData === void 0 ? void 0 : tableData.length) <= 0 || [null].includes(tableData), hasLoading: hasLoading }) }) }));
59
60
  };
60
61
  exports.default = Table;
package/dist/components/Table/Table.styled.js CHANGED
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.EmptyStyled = exports.SkeletonStyled = exports.TableStyled = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
- exports.TableStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rc-table{\n &:is(.rc-table-empty){\n table{\n tbody{\n tr{\n cursor: initial;\n &:after{\n opacity: 0 !important;\n }\n }\n }\n }\n }\n table{\n border:0;\n //border-spacing: 0 0.5rem;\n th, td {\n position: relative;\n box-sizing: border-box;\n padding: 0 1rem;\n height: 49px;\n line-height: 49px;\n white-space: nowrap;\n border: none;\n text-align: start;\n &:first-child{\n padding: 0 1rem 0 1.5rem;\n }\n }\n th {\n font: var(--body-semi-bold-14-17);\n }\n td {\n font: var(--body-regular-14-17);\n }\n tbody{\n tr{\n position: relative;\n cursor: pointer;\n &:after{\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0;\n border-radius: 0.5rem;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: -1;\n }\n &:hover{\n &:after{\n opacity: 1;\n }\n }\n }\n }\n }\n }\n"], ["\n .rc-table{\n &:is(.rc-table-empty){\n table{\n tbody{\n tr{\n cursor: initial;\n &:after{\n opacity: 0 !important;\n }\n }\n }\n }\n }\n table{\n border:0;\n //border-spacing: 0 0.5rem;\n th, td {\n position: relative;\n box-sizing: border-box;\n padding: 0 1rem;\n height: 49px;\n line-height: 49px;\n white-space: nowrap;\n border: none;\n text-align: start;\n &:first-child{\n padding: 0 1rem 0 1.5rem;\n }\n }\n th {\n font: var(--body-semi-bold-14-17);\n }\n td {\n font: var(--body-regular-14-17);\n }\n tbody{\n tr{\n position: relative;\n cursor: pointer;\n &:after{\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0;\n border-radius: 0.5rem;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: -1;\n }\n &:hover{\n &:after{\n opacity: 1;\n }\n }\n }\n }\n }\n }\n"])));
12
+ exports.TableStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rc-table{\n &:is(.rc-table-empty),&:is(.hasLoading){\n table{\n user-select: none;\n pointer-events: none;\n tbody{\n tr{\n cursor: initial;\n &:after{\n opacity: 0 !important;\n }\n }\n }\n }\n }\n table{\n border:0;\n border-spacing: 0 2px;\n //border-spacing: 0 0.5rem;\n th, td {\n position: relative;\n box-sizing: border-box;\n padding: 0 1rem;\n height: 49px;\n line-height: 49px;\n white-space: nowrap;\n border: none;\n text-align: start;\n &:first-child{\n padding: 0 1rem 0 1.5rem;\n }\n }\n th {\n font: var(--body-semi-bold-14-17);\n }\n td {\n font: var(--body-regular-14-17);\n }\n tbody{\n tr{\n position: relative;\n cursor: pointer;\n &:after{\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0;\n border-radius: 0.5rem;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: -1;\n }\n &:hover{\n &:after{\n opacity: 1;\n }\n }\n }\n }\n }\n }\n"], ["\n .rc-table{\n &:is(.rc-table-empty),&:is(.hasLoading){\n table{\n user-select: none;\n pointer-events: none;\n tbody{\n tr{\n cursor: initial;\n &:after{\n opacity: 0 !important;\n }\n }\n }\n }\n }\n table{\n border:0;\n border-spacing: 0 2px;\n //border-spacing: 0 0.5rem;\n th, td {\n position: relative;\n box-sizing: border-box;\n padding: 0 1rem;\n height: 49px;\n line-height: 49px;\n white-space: nowrap;\n border: none;\n text-align: start;\n &:first-child{\n padding: 0 1rem 0 1.5rem;\n }\n }\n th {\n font: var(--body-semi-bold-14-17);\n }\n td {\n font: var(--body-regular-14-17);\n }\n tbody{\n tr{\n position: relative;\n cursor: pointer;\n &:after{\n content: \"\";\n position: absolute;\n inset: 0;\n opacity: 0;\n border-radius: 0.5rem;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: -1;\n }\n &:hover{\n &:after{\n opacity: 1;\n }\n }\n }\n }\n }\n }\n"])));
13
13
  exports.SkeletonStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n @keyframes shineSkeleton {\n to {\n // Move shine from left to right, with offset on the right based on the width of the shine - see background-size\n background-position: right -40px top 0;\n }\n }\n height: 20px;\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-5);\n background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\n background-size: 40px 100%;\n background-repeat: no-repeat;\n background-position: left -40px top 0;\n animation: shineSkeleton 0.5s ease infinite;\n"], ["\n @keyframes shineSkeleton {\n to {\n // Move shine from left to right, with offset on the right based on the width of the shine - see background-size\n background-position: right -40px top 0;\n }\n }\n height: 20px;\n border-radius: 0.25rem;\n background-color: var(--dark-opacity-5);\n background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\n background-size: 40px 100%;\n background-repeat: no-repeat;\n background-position: left -40px top 0;\n animation: shineSkeleton 0.5s ease infinite;\n"])));
14
14
  exports.EmptyStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: var(--body-regular-14-17);\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: var(--body-regular-14-17);\n"])));
15
15
  var templateObject_1, templateObject_2, templateObject_3;
package/dist/utils/genericUtils.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.replaceTRtoEn = void 0;
3
+ exports.focusSelect = exports.replaceTRtoEn = void 0;
4
4
  var replaceTRtoEn = function (text) {
5
5
  return text
6
6
  .replace(/Ğ/gim, 'g')
@@ -19,3 +19,11 @@ var replaceTRtoEn = function (text) {
19
19
  .replace(/i̇/gim, 'i');
20
20
  };
21
21
  exports.replaceTRtoEn = replaceTRtoEn;
22
+ var focusSelect = function (elem) {
23
+ setTimeout(function () {
24
+ if (elem) {
25
+ elem.scrollIntoView({ behavior: 'smooth', block: 'start' });
26
+ }
27
+ }, 100);
28
+ };
29
+ exports.focusSelect = focusSelect;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "1.80.6",
3
+ "version": "1.80.7",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -28,7 +28,7 @@
28
28
  "i18next": "^23.7.6",
29
29
  "plop": "^3.1.2",
30
30
  "rc-pagination": "^4.3.0",
31
- "rc-select": "^14.16.2",
31
+ "rc-select": "^14.16.3",
32
32
  "rc-table": "^7.48.0",
33
33
  "react": "^18.2.0",
34
34
  "react-circular-progressbar": "^2.1.0",
package/dist/components/Icon/Cargo1.js DELETED
@@ -1,40 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || function (mod) {
30
- if (mod && mod.__esModule) return mod;
31
- var result = {};
32
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
- __setModuleDefault(result, mod);
34
- return result;
35
- };
36
- Object.defineProperty(exports, "__esModule", { value: true });
37
- var jsx_runtime_1 = require("react/jsx-runtime");
38
- var React = __importStar(require("react"));
39
- var SvgCargo1 = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M18.9677 10.2H16.9123C16.9269 10.1117 16.9347 10.0226 16.9355 9.93333V5.86667C16.9355 5.3716 16.7214 4.8968 16.3402 4.54673C15.9591 4.19667 15.4422 4 14.9032 4H9.09677C8.55779 4 8.04087 4.19667 7.65975 4.54673C7.27863 4.8968 7.06452 5.3716 7.06452 5.86667V9.93333C7.0653 10.0226 7.07307 10.1117 7.08774 10.2H5.03226C4.49327 10.2 3.97636 10.3967 3.59523 10.7467C3.21411 11.0968 3 11.5716 3 12.0667V18.1333C3 18.6284 3.21411 19.1032 3.59523 19.4533C3.97636 19.8033 4.49327 20 5.03226 20H18.9677C19.5067 20 20.0236 19.8033 20.4048 19.4533C20.7859 19.1032 21 18.6284 21 18.1333V12.0667C21 11.5716 20.7859 11.0968 20.4048 10.7467C20.0236 10.3967 19.5067 10.2 18.9677 10.2ZM8.80645 9.93333V5.86667C8.80645 5.79594 8.83704 5.72811 8.89148 5.6781C8.94593 5.6281 9.01978 5.6 9.09677 5.6H11.129V8H12.871V5.6H14.9032C14.9802 5.6 15.0541 5.6281 15.1085 5.6781C15.163 5.72811 15.1935 5.79594 15.1935 5.86667V9.93333C15.1935 10.0041 15.163 10.0719 15.1085 10.1219C15.0541 10.1719 14.9802 10.2 14.9032 10.2H9.09677C9.01978 10.2 8.94593 10.1719 8.89148 10.1219C8.83704 10.0719 8.80645 10.0041 8.80645 9.93333ZM11.129 18.4H5.03226C4.95526 18.4 4.88141 18.3719 4.82697 18.3219C4.77252 18.2719 4.74194 18.2041 4.74194 18.1333V12.0667C4.74194 11.9959 4.77252 11.9281 4.82697 11.8781C4.88141 11.8281 4.95526 11.8 5.03226 11.8H7.06452V15.2H8.80645V11.8H10.8387C10.9157 11.8 10.9896 11.8281 11.044 11.8781C11.0984 11.9281 11.129 11.9959 11.129 12.0667V18.4ZM19.2581 18.1333C19.2581 18.2041 19.2275 18.2719 19.173 18.3219C19.1186 18.3719 19.0447 18.4 18.9677 18.4H12.871V12.0667C12.871 11.9959 12.9016 11.9281 12.956 11.8781C13.0104 11.8281 13.0843 11.8 13.1613 11.8H15.1935V15.2H16.9355V11.8H18.9677C19.0447 11.8 19.1186 11.8281 19.173 11.8781C19.2275 11.9281 19.2581 11.9959 19.2581 12.0667V18.1333Z", fill: "currentColor" }) }))); };
40
- exports.default = SvgCargo1;