@mailstep/design-system 0.6.2-beta.3 → 0.6.2-beta.5

package/ui/Elements/Icon/icons/index.js

@@ -1,114 +1,55 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Group = exports.Rows = exports.QRCode = exports.Calendar = exports.ThreeDots = exports.TwoCheckedBoxes = exports.TwoBoxes = exports.Print = exports.MakePhoto = exports.Location = exports.Info = exports.Gift = exports.EmptyRack = exports.Dispatch = exports.Consolidation = exports.CheckedBox = exports.Rack = exports.Box = exports.OpenBox = exports.Link = exports.AddPhoto = exports.Puzzle1 = exports.Logout1 = exports.Inventory2 = exports.BarcodeScan = exports.ImagePlaceholder = exports.Product = exports.Transfer = exports.Settings2 = exports.Return = exports.Profile = exports.Products = exports.Plus1 = exports.Notification2 = exports.MobileCancel = exports.MenuItems = exports.Inventory = exports.Income = exports.HelpCircle1 = exports.HamburgerMenu = exports.Expeditions = exports.Complaint = exports.FlagSVK = exports.FlagRUS = exports.FlagITA = exports.FlagESP = exports.FlagEL = exports.FlagCZ = exports.FlagUSA = exports.Cancel = void 0;
-exports.Integrations = exports.TwoUsers = exports.Truck = exports.ShoppingBag = exports.Company = void 0;
-var Cancel_1 = require("./Cancel");
-Object.defineProperty(exports, "Cancel", { enumerable: true, get: function () { return Cancel_1.Cancel; } });
-var FlagUSA_1 = require("./FlagUSA");
-Object.defineProperty(exports, "FlagUSA", { enumerable: true, get: function () { return FlagUSA_1.FlagUSA; } });
-var FlagCZ_1 = require("./FlagCZ");
-Object.defineProperty(exports, "FlagCZ", { enumerable: true, get: function () { return FlagCZ_1.FlagCZ; } });
-var FlagEL_1 = require("./FlagEL");
-Object.defineProperty(exports, "FlagEL", { enumerable: true, get: function () { return FlagEL_1.FlagEL; } });
-var FlagESP_1 = require("./FlagESP");
-Object.defineProperty(exports, "FlagESP", { enumerable: true, get: function () { return FlagESP_1.FlagESP; } });
-var FlagITA_1 = require("./FlagITA");
-Object.defineProperty(exports, "FlagITA", { enumerable: true, get: function () { return FlagITA_1.FlagITA; } });
-var FlagRUS_1 = require("./FlagRUS");
-Object.defineProperty(exports, "FlagRUS", { enumerable: true, get: function () { return FlagRUS_1.FlagRUS; } });
-var FlagSVK_1 = require("./FlagSVK");
-Object.defineProperty(exports, "FlagSVK", { enumerable: true, get: function () { return FlagSVK_1.FlagSVK; } });
-var Complaint_1 = require("./Complaint");
-Object.defineProperty(exports, "Complaint", { enumerable: true, get: function () { return Complaint_1.Complaint; } });
-var Expeditions_1 = require("./Expeditions");
-Object.defineProperty(exports, "Expeditions", { enumerable: true, get: function () { return Expeditions_1.Expeditions; } });
-var HamburgerMenu_1 = require("./HamburgerMenu");
-Object.defineProperty(exports, "HamburgerMenu", { enumerable: true, get: function () { return HamburgerMenu_1.HamburgerMenu; } });
-var HelpCircle1_1 = require("./HelpCircle1");
-Object.defineProperty(exports, "HelpCircle1", { enumerable: true, get: function () { return HelpCircle1_1.HelpCircle1; } });
-var Income_1 = require("./Income");
-Object.defineProperty(exports, "Income", { enumerable: true, get: function () { return Income_1.Income; } });
-var Inventory_1 = require("./Inventory");
-Object.defineProperty(exports, "Inventory", { enumerable: true, get: function () { return Inventory_1.Inventory; } });
-var MenuItems_1 = require("./MenuItems");
-Object.defineProperty(exports, "MenuItems", { enumerable: true, get: function () { return MenuItems_1.MenuItems; } });
-var MobileCancel_1 = require("./MobileCancel");
-Object.defineProperty(exports, "MobileCancel", { enumerable: true, get: function () { return MobileCancel_1.MobileCancel; } });
-var Notification2_1 = require("./Notification2");
-Object.defineProperty(exports, "Notification2", { enumerable: true, get: function () { return Notification2_1.Notification2; } });
-var Plus1_1 = require("./Plus1");
-Object.defineProperty(exports, "Plus1", { enumerable: true, get: function () { return Plus1_1.Plus1; } });
-var Products_1 = require("./Products");
-Object.defineProperty(exports, "Products", { enumerable: true, get: function () { return Products_1.Products; } });
-var Profile_1 = require("./Profile");
-Object.defineProperty(exports, "Profile", { enumerable: true, get: function () { return Profile_1.Profile; } });
-var Return_1 = require("./Return");
-Object.defineProperty(exports, "Return", { enumerable: true, get: function () { return Return_1.Return; } });
-var Settings2_1 = require("./Settings2");
-Object.defineProperty(exports, "Settings2", { enumerable: true, get: function () { return Settings2_1.Settings2; } });
-var Transfer_1 = require("./Transfer");
-Object.defineProperty(exports, "Transfer", { enumerable: true, get: function () { return Transfer_1.Transfer; } });
-var Product_1 = require("./Product");
-Object.defineProperty(exports, "Product", { enumerable: true, get: function () { return Product_1.Product; } });
-var ImagePlaceholder_1 = require("./ImagePlaceholder");
-Object.defineProperty(exports, "ImagePlaceholder", { enumerable: true, get: function () { return ImagePlaceholder_1.ImagePlaceholder; } });
-var BarcodeScan_1 = require("./BarcodeScan");
-Object.defineProperty(exports, "BarcodeScan", { enumerable: true, get: function () { return BarcodeScan_1.BarcodeScan; } });
-var Inventory2_1 = require("./Inventory2");
-Object.defineProperty(exports, "Inventory2", { enumerable: true, get: function () { return Inventory2_1.Inventory2; } });
-var Logout1_1 = require("./Logout1");
-Object.defineProperty(exports, "Logout1", { enumerable: true, get: function () { return Logout1_1.Logout1; } });
-var Puzzle1_1 = require("./Puzzle1");
-Object.defineProperty(exports, "Puzzle1", { enumerable: true, get: function () { return Puzzle1_1.Puzzle1; } });
-var AddPhoto_1 = require("./AddPhoto");
-Object.defineProperty(exports, "AddPhoto", { enumerable: true, get: function () { return AddPhoto_1.AddPhoto; } });
-var Link_1 = require("./Link");
-Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
-var OpenBox_1 = require("./OpenBox");
-Object.defineProperty(exports, "OpenBox", { enumerable: true, get: function () { return OpenBox_1.OpenBox; } });
-var Box_1 = require("./Box");
-Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.Box; } });
-var Rack_1 = require("./Rack");
-Object.defineProperty(exports, "Rack", { enumerable: true, get: function () { return Rack_1.Rack; } });
-var CheckedBox_1 = require("./CheckedBox");
-Object.defineProperty(exports, "CheckedBox", { enumerable: true, get: function () { return CheckedBox_1.CheckedBox; } });
-var Consolidation_1 = require("./Consolidation");
-Object.defineProperty(exports, "Consolidation", { enumerable: true, get: function () { return Consolidation_1.Consolidation; } });
-var Dispatch_1 = require("./Dispatch");
-Object.defineProperty(exports, "Dispatch", { enumerable: true, get: function () { return Dispatch_1.Dispatch; } });
-var EmptyRack_1 = require("./EmptyRack");
-Object.defineProperty(exports, "EmptyRack", { enumerable: true, get: function () { return EmptyRack_1.EmptyRack; } });
-var Gift_1 = require("./Gift");
-Object.defineProperty(exports, "Gift", { enumerable: true, get: function () { return Gift_1.Gift; } });
-var Info_1 = require("./Info");
-Object.defineProperty(exports, "Info", { enumerable: true, get: function () { return Info_1.Info; } });
-var Location_1 = require("./Location");
-Object.defineProperty(exports, "Location", { enumerable: true, get: function () { return Location_1.Location; } });
-var MakePhoto_1 = require("./MakePhoto");
-Object.defineProperty(exports, "MakePhoto", { enumerable: true, get: function () { return MakePhoto_1.MakePhoto; } });
-var Print_1 = require("./Print");
-Object.defineProperty(exports, "Print", { enumerable: true, get: function () { return Print_1.Print; } });
-var TwoBoxes_1 = require("./TwoBoxes");
-Object.defineProperty(exports, "TwoBoxes", { enumerable: true, get: function () { return TwoBoxes_1.TwoBoxes; } });
-var TwoCheckedBoxes_1 = require("./TwoCheckedBoxes");
-Object.defineProperty(exports, "TwoCheckedBoxes", { enumerable: true, get: function () { return TwoCheckedBoxes_1.TwoCheckedBoxes; } });
-var ThreeDots_1 = require("./ThreeDots");
-Object.defineProperty(exports, "ThreeDots", { enumerable: true, get: function () { return ThreeDots_1.ThreeDots; } });
-var Calendar_1 = require("./Calendar");
-Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return Calendar_1.Calendar; } });
-var QRCode_1 = require("./QRCode");
-Object.defineProperty(exports, "QRCode", { enumerable: true, get: function () { return QRCode_1.QRCode; } });
-var Rows_1 = require("./Rows");
-Object.defineProperty(exports, "Rows", { enumerable: true, get: function () { return Rows_1.Rows; } });
-var Group_1 = require("./Group");
-Object.defineProperty(exports, "Group", { enumerable: true, get: function () { return Group_1.Group; } });
-var Company_1 = require("./Company");
-Object.defineProperty(exports, "Company", { enumerable: true, get: function () { return Company_1.Company; } });
-var ShoppingBag_1 = require("./ShoppingBag");
-Object.defineProperty(exports, "ShoppingBag", { enumerable: true, get: function () { return ShoppingBag_1.ShoppingBag; } });
-var Truck_1 = require("./Truck");
-Object.defineProperty(exports, "Truck", { enumerable: true, get: function () { return Truck_1.Truck; } });
-var TwoUsers_1 = require("./TwoUsers");
-Object.defineProperty(exports, "TwoUsers", { enumerable: true, get: function () { return TwoUsers_1.TwoUsers; } });
-var Integrations_1 = require("./Integrations");
-Object.defineProperty(exports, "Integrations", { enumerable: true, get: function () { return Integrations_1.Integrations; } });
+export { Cancel } from './Cancel.js';
+export { FlagUSA } from './FlagUSA.js';
+export { FlagCZ } from './FlagCZ.js';
+export { FlagEL } from './FlagEL.js';
+export { FlagESP } from './FlagESP.js';
+export { FlagITA } from './FlagITA.js';
+export { FlagRUS } from './FlagRUS.js';
+export { FlagSVK } from './FlagSVK.js';
+export { Complaint } from './Complaint.js';
+export { Expeditions } from './Expeditions.js';
+export { HamburgerMenu } from './HamburgerMenu.js';
+export { HelpCircle1 } from './HelpCircle1.js';
+export { Income } from './Income.js';
+export { Inventory } from './Inventory.js';
+export { MenuItems } from './MenuItems.js';
+export { MobileCancel } from './MobileCancel.js';
+export { Notification2 } from './Notification2.js';
+export { Plus1 } from './Plus1.js';
+export { Products } from './Products.js';
+export { Profile } from './Profile.js';
+export { Return } from './Return.js';
+export { Settings2 } from './Settings2.js';
+export { Transfer } from './Transfer.js';
+export { Product } from './Product.js';
+export { ImagePlaceholder } from './ImagePlaceholder.js';
+export { BarcodeScan } from './BarcodeScan.js';
+export { Inventory2 } from './Inventory2.js';
+export { Logout1 } from './Logout1.js';
+export { Puzzle1 } from './Puzzle1.js';
+export { AddPhoto } from './AddPhoto.js';
+export { Link } from './Link.js';
+export { OpenBox } from './OpenBox.js';
+export { Box } from './Box.js';
+export { Rack } from './Rack.js';
+export { CheckedBox } from './CheckedBox.js';
+export { Consolidation } from './Consolidation.js';
+export { Dispatch } from './Dispatch.js';
+export { EmptyRack } from './EmptyRack.js';
+export { Gift } from './Gift.js';
+export { Info } from './Info.js';
+export { Location } from './Location.js';
+export { MakePhoto } from './MakePhoto.js';
+export { Print } from './Print.js';
+export { TwoBoxes } from './TwoBoxes.js';
+export { TwoCheckedBoxes } from './TwoCheckedBoxes.js';
+export { ThreeDots } from './ThreeDots.js';
+export { Calendar } from './Calendar.js';
+export { QRCode } from './QRCode.js';
+export { Rows } from './Rows.js';
+export { Group } from './Group.js';
+export { Company } from './Company.js';
+export { ShoppingBag } from './ShoppingBag.js';
+export { Truck } from './Truck.js';
+export { TwoUsers } from './TwoUsers.js';
+export { Integrations } from './Integrations.js';

package/ui/Elements/Icon/index.js

@@ -1,26 +1,5 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icon = exports.iconDictionary = void 0;
-var Icon_1 = __importDefault(require("./Icon"));
-exports.Icon = Icon_1.default;
-__exportStar(require("./icons"), exports);
-var Icon_2 = require("./Icon");
-Object.defineProperty(exports, "iconDictionary", { enumerable: true, get: function () { return Icon_2.iconDictionary; } });
-exports.default = Icon_1.default;
+import Icon from './Icon.js';
+export * from './icons/index.js';
+export { iconDictionary } from './Icon.js';
+export { Icon };
+export default Icon;

package/ui/Elements/Icon/stories/BadgeIcon.stories.js

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var BadgeIcon_1 = __importDefault(require("../BadgeIcon"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import BadgeIcon from '../BadgeIcon.js';
 var meta = {
     title: 'Elements/BadgeIcon',
-    component: BadgeIcon_1.default,
+    component: BadgeIcon,
     decorators: [
-        function (Story) { return ((0, jsx_runtime_1.jsx)("div", { style: { width: '30px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })); },
+        function (Story) { return (_jsx("div", { style: { width: '30px' }, children: _jsx(Story, {}) })); },
     ],
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {
         icon: 'coffee',
         badge: 'warning'

package/ui/Elements/Icon/stories/Icon.stories.js

@@ -1,47 +1,44 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpeditionPinkSolid = exports.ExpeditionPink = exports.BigExpedition = exports.SmallExpedition = exports.Spinning = exports.Expedition = void 0;
-var __1 = require("../");
+import { Icon } from '../index.js';
 var meta = {
     title: 'Elements/Icon',
-    component: __1.Icon,
+    component: Icon,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Expedition = {
+export default meta;
+export var Expedition = {
     args: {
         icon: 'expedition',
         size: '40px',
     },
 };
-exports.Spinning = {
+export var Spinning = {
     args: {
         icon: 'expedition',
         size: '40px',
         spinning: true
     },
 };
-exports.SmallExpedition = {
+export var SmallExpedition = {
     args: {
         icon: 'expedition',
         size: '20px',
     },
 };
-exports.BigExpedition = {
+export var BigExpedition = {
     args: {
         icon: 'expedition',
         size: '80px',
     },
 };
-exports.ExpeditionPink = {
+export var ExpeditionPink = {
     args: {
         icon: 'expedition',
         fill: 'pink',
         size: '40px',
     },
 };
-exports.ExpeditionPinkSolid = {
+export var ExpeditionPinkSolid = {
     args: {
         icon: 'expedition',
         style: 'solid',

package/ui/Elements/Icon/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Elements/Image/Image.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,9 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_image_1 = require("react-image");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Img } from 'react-image';
 var formatScrSet = function (srcSet, imageProps) {
     return Object.entries(srcSet)
         .map(function (_a) {
@@ -23,6 +21,6 @@ var formatScrSet = function (srcSet, imageProps) {
 };
 var Image = function (props) {
     var srcSetString = props.srcSet ? formatScrSet(props.srcSet, props) : undefined;
-    return (0, jsx_runtime_1.jsx)(react_image_1.Img, __assign({}, props, { srcSet: srcSetString, src: props.src }));
+    return _jsx(Img, __assign({}, props, { srcSet: srcSetString, src: props.src }));
 };
-exports.default = Image;
+export default Image;

package/ui/Elements/Image/index.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Image = void 0;
-var Image_1 = __importDefault(require("./Image"));
-exports.Image = Image_1.default;
-exports.default = Image_1.default;
+import Image from './Image.js';
+export { Image };
+export default Image;

package/ui/Elements/Image/stories/Image.stories.js

@@ -1,40 +1,34 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SrcSet = exports.CORS = exports.WithLoader = exports.Default = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Image_1 = __importDefault(require("../Image"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import Image from '../Image.js';
 var small = 'https://via.placeholder.com/150x150';
 var medium = 'https://via.placeholder.com/700x700';
 var large = 'https://via.placeholder.com/1200x1200';
-var Loader = (0, jsx_runtime_1.jsx)("div", { children: "loading image ..." });
+var Loader = _jsx("div", { children: "loading image ..." });
 var meta = {
     title: 'Elements/Image',
-    component: Image_1.default,
+    component: Image,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {
         src: 'https://via.placeholder.com/1200',
     },
 };
-exports.WithLoader = {
+export var WithLoader = {
     args: {
         src: 'https://upload.wikimedia.org/wikipedia/commons/4/47/New_york_times_square-terabass.jpg',
         loader: Loader,
     },
 };
-exports.CORS = {
+export var CORS = {
     args: {
         src: 'https://via.placeholder.com/150x150',
         crossOrigin: 'anonymous',
     },
 };
-exports.SrcSet = {
+export var SrcSet = {
     args: {
         src: 'https://via.placeholder.com/150x150',
         srcSet: { '500w': small, '800w': medium, '1400w': large },

package/ui/Elements/Image/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Elements/Label/Label.js

@@ -1,43 +1,17 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldLabel = exports.Label = void 0;
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var styled_components_2 = require("@xstyled/styled-components");
-var style = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-weight: bold;\n  display: block;\n  margin-bottom: 6px;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-weight: bold;\n  display: block;\n  margin-bottom: 6px;\n"])), function (_a) {
+import styled, { css } from '@xstyled/styled-components';
+import { system, th } from '@xstyled/styled-components';
+var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-weight: bold;\n  display: block;\n  margin-bottom: 6px;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-weight: bold;\n  display: block;\n  margin-bottom: 6px;\n"])), function (_a) {
     var $isInvalid = _a.$isInvalid;
-    return ($isInvalid ? styled_components_2.th.color('red1') : styled_components_2.th.color('typoPrimary'));
-}, (0, styled_components_2.th)('fonts.primary'));
-exports.Label = styled_components_1.default.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 8px;\n  ", ";\n  ", "\n  ", ";\n"], ["\n  margin-left: 8px;\n  ", ";\n  ", "\n  ", ";\n"])), style, function (_a) {
+    return ($isInvalid ? th.color('red1') : th.color('typoPrimary'));
+}, th('fonts.primary'));
+export var Label = styled.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 8px;\n  ", ";\n  ", "\n  ", ";\n"], ["\n  margin-left: 8px;\n  ", ";\n  ", "\n  ", ";\n"])), style, function (_a) {
     var fontSize = _a.fontSize;
     return fontSize
-        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          font-size: ", ";\n        "], ["\n          font-size: ", ";\n        "])), fontSize) : null;
-}, styled_components_2.system);
-exports.FieldLabel = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  font-size: 12px;\n"], ["\n  ", ";\n  font-size: 12px;\n"])), style);
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          font-size: ", ";\n        "], ["\n          font-size: ", ";\n        "])), fontSize) : null;
+}, system);
+export var FieldLabel = styled.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  font-size: 12px;\n"], ["\n  ", ";\n  font-size: 12px;\n"])), style);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/Label/index.js

@@ -1,8 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldLabel = exports.Label = void 0;
-var Label_1 = require("./Label");
-var Label_2 = require("./Label");
-Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_2.Label; } });
-Object.defineProperty(exports, "FieldLabel", { enumerable: true, get: function () { return Label_2.FieldLabel; } });
-exports.default = Label_1.Label;
+import { Label } from './Label.js';
+export { Label, FieldLabel } from './Label.js';
+export default Label;

package/ui/Elements/Label/stories/Label.stories.js

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ManyPages = exports.Default = void 0;
-var __1 = require("../");
+import { Label } from '../index.js';
 var meta = {
     title: 'Elements/Label',
-    component: __1.Label,
+    component: Label,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {
         children: 'This is a label',
     },
 };
-exports.ManyPages = {
+export var ManyPages = {
     args: {
         itemCount: 1000,
         itemPerPage: 8,

package/ui/Elements/Line/Line.js

@@ -1,21 +1,16 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
 var gabs = {
     none: 0,
     small: '5px',
     medium: '10px',
     large: '20px',
 };
-var LineComponent = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  border-bottom: 1px ", ";\n  border-bottom-color: lightGray3;\n  margin: ", ";\n"], ["\n  width: 100%;\n  border-bottom: 1px ", ";\n  border-bottom-color: lightGray3;\n  margin: ", ";\n"])), function (_a) {
+var LineComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  border-bottom: 1px ", ";\n  border-bottom-color: lightGray3;\n  margin: ", ";\n"], ["\n  width: 100%;\n  border-bottom: 1px ", ";\n  border-bottom-color: lightGray3;\n  margin: ", ";\n"])), function (_a) {
     var variant = _a.variant;
     return variant;
 }, function (_a) {
@@ -24,7 +19,7 @@ var LineComponent = styled_components_1.default.div(templateObject_1 || (templat
 });
 var Line = function (_a) {
     var _b = _a.gab, gab = _b === void 0 ? 'none' : _b, _c = _a.gabTop, gabTop = _c === void 0 ? 'none' : _c, _d = _a.gabBottom, gabBottom = _d === void 0 ? 'none' : _d, _e = _a.variant, variant = _e === void 0 ? 'solid' : _e;
-    return ((0, jsx_runtime_1.jsx)(LineComponent, { gab: gab, gabTop: gabTop, gabBottom: gabBottom, variant: variant }));
+    return (_jsx(LineComponent, { gab: gab, gabTop: gabTop, gabBottom: gabBottom, variant: variant }));
 };
-exports.default = Line;
+export default Line;
 var templateObject_1;

package/ui/Elements/Line/index.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Line = void 0;
-var Line_1 = __importDefault(require("./Line"));
-exports.Line = Line_1.default;
-exports.default = Line_1.default;
+import Line from './Line.js';
+export { Line };
+export default Line;

package/ui/Elements/Line/stories/Line.stories.js

@@ -1,46 +1,40 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LargebottomGab = exports.LargeTopGab = exports.LargeGab = exports.MediumGab = exports.SmallGab = exports.Dashed = exports.Default = void 0;
-var Line_1 = __importDefault(require("../Line"));
+import Line from '../Line.js';
 var meta = {
     title: 'Elements/Line',
-    component: Line_1.default,
+    component: Line,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {},
 };
-exports.Dashed = {
+export var Dashed = {
     args: {
         variant: 'dashed',
     },
 };
-exports.SmallGab = {
+export var SmallGab = {
     args: {
         gab: 'small',
     },
 };
-exports.MediumGab = {
+export var MediumGab = {
     args: {
         gab: 'medium',
     },
 };
-exports.LargeGab = {
+export var LargeGab = {
     args: {
         gab: 'large',
     },
 };
-exports.LargeTopGab = {
+export var LargeTopGab = {
     args: {
         gabTop: 'large',
     },
 };
-exports.LargebottomGab = {
+export var LargebottomGab = {
     args: {
         gabBottom: 'large',
     },

package/ui/Elements/Line/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};