glints-aries 4.0.233 → 4.0.234

package/es/@next/Skeleton/SkeletonStyle.d.ts

@@ -0,0 +1 @@
+export declare const SkeletonShimmer: string;

package/es/@next/Skeleton/SkeletonStyle.js

@@ -0,0 +1,2 @@
+import { Neutral } from '../utilities/colors';
+export var SkeletonShimmer = "\nbackground: linear-gradient(\n  110.76deg,\n  " + Neutral.B95 + " 36.01%,\n  rgba(217, 217, 217, 0.24) 47.36%,\n  " + Neutral.B95 + " 57.51%\n);\nbackground-size: 400% 100%;\n  animation: skeleton-shimmer 1.5s linear infinite;\n\n  @keyframes skeleton-shimmer {\n    0% {\n      background-position: 100% 50%;\n    }\n\n    100% {\n      background-position: 0 50%;\n    }\n  }\n";

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface SkeletonImageCircleProps {
+    /** Sets the height and width. Default is 48px */
+    size?: string;
+}
+export declare const SkeletonImageCircle: ({ size, }: SkeletonImageCircleProps) => JSX.Element;

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StyledSkeletonImageCircle } from './SkeletonImageStyle';
+export var SkeletonImageCircle = function SkeletonImageCircle(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '48px' : _ref$size;
+  return /*#__PURE__*/React.createElement(StyledSkeletonImageCircle, {
+    size: size
+  });
+};

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface SkeletonImageSquareProps {
+    height: string;
+    width: string;
+}
+export declare const SkeletonImageSquare: ({ height, width, }: SkeletonImageSquareProps) => JSX.Element;

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyledSkeletonImageSquare } from './SkeletonImageStyle';
+export var SkeletonImageSquare = function SkeletonImageSquare(_ref) {
+  var _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '80px' : _ref$height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '80px' : _ref$width;
+  return /*#__PURE__*/React.createElement(StyledSkeletonImageSquare, {
+    height: height,
+    width: width
+  });
+};

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.d.ts

@@ -0,0 +1,5 @@
+import { SkeletonImageCircleProps } from './SkeletonImageCircle';
+import { SkeletonImageSquareProps } from './SkeletonImageSquare';
+export declare const SkeletonImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSkeletonImageCircle: import("styled-components").StyledComponent<"div", any, SkeletonImageCircleProps, never>;
+export declare const StyledSkeletonImageSquare: import("styled-components").StyledComponent<"div", any, SkeletonImageSquareProps, never>;

package/es/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { borderRadiusHalf } from '../../../utilities/borderRadius';
+import { SkeletonShimmer } from '../../SkeletonStyle';
+export var SkeletonImageContainer = styled.div.withConfig({
+  displayName: "SkeletonImageStyle__SkeletonImageContainer",
+  componentId: "sc-1x8xyqg-0"
+})(["width:100%;"]);
+export var StyledSkeletonImageCircle = styled.div.withConfig({
+  displayName: "SkeletonImageStyle__StyledSkeletonImageCircle",
+  componentId: "sc-1x8xyqg-1"
+})(["width:", ";height:", ";border-radius:", ";", ""], function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+}, borderRadiusHalf, SkeletonShimmer);
+export var StyledSkeletonImageSquare = styled.div.withConfig({
+  displayName: "SkeletonImageStyle__StyledSkeletonImageSquare",
+  componentId: "sc-1x8xyqg-2"
+})(["width:", ";height:", ";", ""], function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+}, SkeletonShimmer);

package/es/@next/Skeleton/components/SkeletonText/SkeletonText.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Variant as TypographyVariant } from '../../../Typography';
+declare type Row = {
+    width?: string;
+    variant?: TypographyVariant;
+};
+export interface SkeletonTextProps {
+    rows?: number | Row[];
+}
+export declare const SkeletonText: ({ rows }: SkeletonTextProps) => JSX.Element;
+export {};

package/es/@next/Skeleton/components/SkeletonText/SkeletonText.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SkeletonTextContainer, StyledSkeletonText } from './SkeletonTextStyle';
+export var SkeletonText = function SkeletonText(_ref) {
+  var _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? 4 : _ref$rows;
+  var defaultWidth = '100%';
+  var defaultVariant = 'body1';
+  var renderRows = function renderRows() {
+    var rowsToArray = typeof rows === 'number' ? [].concat(Array(rows)) : rows;
+    return rowsToArray.map(function (row, index) {
+      return /*#__PURE__*/React.createElement(StyledSkeletonText, {
+        key: "skeleton-text-" + index,
+        width: (row == null ? void 0 : row.width) || defaultWidth,
+        variant: (row == null ? void 0 : row.variant) || defaultVariant
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(SkeletonTextContainer, null, renderRows());
+};

package/es/@next/Skeleton/components/SkeletonText/SkeletonText.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;
+export declare const WithCustomRows: any;

package/es/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.d.ts

@@ -0,0 +1,8 @@
+import { Variant as TypographyVariant } from '../../../Typography';
+interface StyledSkeletonTextProps {
+    width?: string;
+    variant?: TypographyVariant;
+}
+export declare const StyledSkeletonText: import("styled-components").StyledComponent<"li", any, StyledSkeletonTextProps, never>;
+export declare const SkeletonTextContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export {};

package/es/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.js

@@ -0,0 +1,31 @@
+var _variantHeightMapping;
+import styled, { css } from 'styled-components';
+import * as Breakpoints from '../../../utilities/breakpoints';
+import { space4 } from '../../../utilities/spacing';
+import { SkeletonShimmer } from '../../SkeletonStyle';
+var headline1 = css(["height:84px;@media (max-width:", "){height:36px;}"], Breakpoints.large);
+var headline2 = css(["height:75px;@media (max-width:", "){height:32px;}"], Breakpoints.large);
+var headline3 = css(["height:54px;@media (max-width:", "){height:28px;}"], Breakpoints.large);
+var headline4 = css(["height:42px;@media (max-width:", "){height:24px;}"], Breakpoints.large);
+var headline5 = css(["height:39px;@media (max-width:", "){height:20px;}"], Breakpoints.large);
+var headline6 = css(["height:36px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
+var subtitle1 = css(["height:32px;@media (max-width:", "){height:16px;}"], Breakpoints.large);
+var subtitle2 = css(["height:21px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
+var body1 = css(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
+var body2 = css(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
+var button = css(["height:14px;"]);
+var caption = css(["height:20px;@media (max-width:", "){height:17px;}"], Breakpoints.large);
+var overline = css(["height:17px;@media (max-width:", "){height:14px;}"], Breakpoints.large);
+var variantHeightMapping = (_variantHeightMapping = {}, _variantHeightMapping['headline1'] = headline1, _variantHeightMapping['headline2'] = headline2, _variantHeightMapping['headline3'] = headline3, _variantHeightMapping['headline4'] = headline4, _variantHeightMapping['headline5'] = headline5, _variantHeightMapping['headline6'] = headline6, _variantHeightMapping['subtitle1'] = subtitle1, _variantHeightMapping['subtitle2'] = subtitle2, _variantHeightMapping['body1'] = body1, _variantHeightMapping['body2'] = body2, _variantHeightMapping['button'] = button, _variantHeightMapping['caption'] = caption, _variantHeightMapping['overline'] = overline, _variantHeightMapping);
+export var StyledSkeletonText = styled.li.withConfig({
+  displayName: "SkeletonTextStyle__StyledSkeletonText",
+  componentId: "sc-ym0kos-0"
+})(["", " width:", ";", ""], function (props) {
+  return variantHeightMapping[props.variant];
+}, function (props) {
+  return props.width;
+}, SkeletonShimmer);
+export var SkeletonTextContainer = styled.ul.withConfig({
+  displayName: "SkeletonTextStyle__SkeletonTextContainer",
+  componentId: "sc-ym0kos-1"
+})(["list-style:none;width:100%;li:not(:last-child){margin-bottom:", ";}"], space4);

package/es/@next/Skeleton/components/index.d.ts

@@ -0,0 +1,3 @@
+export { SkeletonText, SkeletonTextProps } from './SkeletonText/SkeletonText';
+export { SkeletonImageCircle, SkeletonImageCircleProps, } from './SkeletonImage/SkeletonImageCircle';
+export { SkeletonImageSquare, SkeletonImageSquareProps, } from './SkeletonImage/SkeletonImageSquare';

package/es/@next/Skeleton/components/index.js

@@ -0,0 +1,3 @@
+export { SkeletonText, SkeletonTextProps } from './SkeletonText/SkeletonText';
+export { SkeletonImageCircle, SkeletonImageCircleProps } from './SkeletonImage/SkeletonImageCircle';
+export { SkeletonImageSquare, SkeletonImageSquareProps } from './SkeletonImage/SkeletonImageSquare';

package/es/@next/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/es/@next/Skeleton/index.js

@@ -0,0 +1 @@
+export * from './components';

package/es/@next/index.d.ts

@@ -29,6 +29,7 @@ export { Pagination, PaginationProps, SimplePagination } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
 export { RadioButton, RadioButtonProps } from './RadioButton';
 export { Select, SelectProps } from './Select';
+export { SkeletonImageCircle, SkeletonImageCircleProps, SkeletonImageSquare, SkeletonImageSquareProps, SkeletonText, SkeletonTextProps, } from './Skeleton';
 export { Spinner, SpinnerProps } from './Spinner';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';

package/es/@next/index.js

@@ -30,6 +30,7 @@ export { Pagination, PaginationProps, SimplePagination } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
 export { RadioButton, RadioButtonProps } from './RadioButton';
 export { Select, SelectProps } from './Select';
+export { SkeletonImageCircle, SkeletonImageCircleProps, SkeletonImageSquare, SkeletonImageSquareProps, SkeletonText, SkeletonTextProps } from './Skeleton';
 export { Spinner, SpinnerProps } from './Spinner';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';

package/lib/@next/Skeleton/SkeletonStyle.d.ts

@@ -0,0 +1 @@
+export declare const SkeletonShimmer: string;

package/lib/@next/Skeleton/SkeletonStyle.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+exports.SkeletonShimmer = void 0;
+var _colors = require("../utilities/colors");
+var SkeletonShimmer = "\nbackground: linear-gradient(\n  110.76deg,\n  " + _colors.Neutral.B95 + " 36.01%,\n  rgba(217, 217, 217, 0.24) 47.36%,\n  " + _colors.Neutral.B95 + " 57.51%\n);\nbackground-size: 400% 100%;\n  animation: skeleton-shimmer 1.5s linear infinite;\n\n  @keyframes skeleton-shimmer {\n    0% {\n      background-position: 100% 50%;\n    }\n\n    100% {\n      background-position: 0 50%;\n    }\n  }\n";
+exports.SkeletonShimmer = SkeletonShimmer;

package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface SkeletonImageCircleProps {
+    /** Sets the height and width. Default is 48px */
+    size?: string;
+}
+export declare const SkeletonImageCircle: ({ size, }: SkeletonImageCircleProps) => JSX.Element;

package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SkeletonImageCircle = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SkeletonImageStyle = require("./SkeletonImageStyle");
+var SkeletonImageCircle = function SkeletonImageCircle(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '48px' : _ref$size;
+  return /*#__PURE__*/_react["default"].createElement(_SkeletonImageStyle.StyledSkeletonImageCircle, {
+    size: size
+  });
+};
+exports.SkeletonImageCircle = SkeletonImageCircle;

package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageCircle.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;

package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface SkeletonImageSquareProps {
+    height: string;
+    width: string;
+}
+export declare const SkeletonImageSquare: ({ height, width, }: SkeletonImageSquareProps) => JSX.Element;

package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SkeletonImageSquare = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SkeletonImageStyle = require("./SkeletonImageStyle");
+var SkeletonImageSquare = function SkeletonImageSquare(_ref) {
+  var _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '80px' : _ref$height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '80px' : _ref$width;
+  return /*#__PURE__*/_react["default"].createElement(_SkeletonImageStyle.StyledSkeletonImageSquare, {
+    height: height,
+    width: width
+  });
+};
+exports.SkeletonImageSquare = SkeletonImageSquare;

package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageSquare.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;

package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.d.ts

@@ -0,0 +1,5 @@
+import { SkeletonImageCircleProps } from './SkeletonImageCircle';
+import { SkeletonImageSquareProps } from './SkeletonImageSquare';
+export declare const SkeletonImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSkeletonImageCircle: import("styled-components").StyledComponent<"div", any, SkeletonImageCircleProps, never>;
+export declare const StyledSkeletonImageSquare: import("styled-components").StyledComponent<"div", any, SkeletonImageSquareProps, never>;

package/lib/@next/Skeleton/components/SkeletonImage/SkeletonImageStyle.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledSkeletonImageSquare = exports.StyledSkeletonImageCircle = exports.SkeletonImageContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _borderRadius = require("../../../utilities/borderRadius");
+var _SkeletonStyle = require("../../SkeletonStyle");
+var SkeletonImageContainer = _styledComponents["default"].div.withConfig({
+  displayName: "SkeletonImageStyle__SkeletonImageContainer",
+  componentId: "sc-1x8xyqg-0"
+})(["width:100%;"]);
+exports.SkeletonImageContainer = SkeletonImageContainer;
+var StyledSkeletonImageCircle = _styledComponents["default"].div.withConfig({
+  displayName: "SkeletonImageStyle__StyledSkeletonImageCircle",
+  componentId: "sc-1x8xyqg-1"
+})(["width:", ";height:", ";border-radius:", ";", ""], function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+}, _borderRadius.borderRadiusHalf, _SkeletonStyle.SkeletonShimmer);
+exports.StyledSkeletonImageCircle = StyledSkeletonImageCircle;
+var StyledSkeletonImageSquare = _styledComponents["default"].div.withConfig({
+  displayName: "SkeletonImageStyle__StyledSkeletonImageSquare",
+  componentId: "sc-1x8xyqg-2"
+})(["width:", ";height:", ";", ""], function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+}, _SkeletonStyle.SkeletonShimmer);
+exports.StyledSkeletonImageSquare = StyledSkeletonImageSquare;

package/lib/@next/Skeleton/components/SkeletonText/SkeletonText.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Variant as TypographyVariant } from '../../../Typography';
+declare type Row = {
+    width?: string;
+    variant?: TypographyVariant;
+};
+export interface SkeletonTextProps {
+    rows?: number | Row[];
+}
+export declare const SkeletonText: ({ rows }: SkeletonTextProps) => JSX.Element;
+export {};

package/lib/@next/Skeleton/components/SkeletonText/SkeletonText.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SkeletonText = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SkeletonTextStyle = require("./SkeletonTextStyle");
+var SkeletonText = function SkeletonText(_ref) {
+  var _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? 4 : _ref$rows;
+  var defaultWidth = '100%';
+  var defaultVariant = 'body1';
+  var renderRows = function renderRows() {
+    var rowsToArray = typeof rows === 'number' ? [].concat(Array(rows)) : rows;
+    return rowsToArray.map(function (row, index) {
+      return /*#__PURE__*/_react["default"].createElement(_SkeletonTextStyle.StyledSkeletonText, {
+        key: "skeleton-text-" + index,
+        width: (row == null ? void 0 : row.width) || defaultWidth,
+        variant: (row == null ? void 0 : row.variant) || defaultVariant
+      });
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_SkeletonTextStyle.SkeletonTextContainer, null, renderRows());
+};
+exports.SkeletonText = SkeletonText;

package/lib/@next/Skeleton/components/SkeletonText/SkeletonText.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;
+export declare const WithCustomRows: any;

package/lib/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.d.ts

@@ -0,0 +1,8 @@
+import { Variant as TypographyVariant } from '../../../Typography';
+interface StyledSkeletonTextProps {
+    width?: string;
+    variant?: TypographyVariant;
+}
+export declare const StyledSkeletonText: import("styled-components").StyledComponent<"li", any, StyledSkeletonTextProps, never>;
+export declare const SkeletonTextContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export {};

package/lib/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.js

@@ -0,0 +1,39 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledSkeletonText = exports.SkeletonTextContainer = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var Breakpoints = _interopRequireWildcard(require("../../../utilities/breakpoints"));
+var _spacing = require("../../../utilities/spacing");
+var _SkeletonStyle = require("../../SkeletonStyle");
+var _variantHeightMapping;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var headline1 = (0, _styledComponents.css)(["height:84px;@media (max-width:", "){height:36px;}"], Breakpoints.large);
+var headline2 = (0, _styledComponents.css)(["height:75px;@media (max-width:", "){height:32px;}"], Breakpoints.large);
+var headline3 = (0, _styledComponents.css)(["height:54px;@media (max-width:", "){height:28px;}"], Breakpoints.large);
+var headline4 = (0, _styledComponents.css)(["height:42px;@media (max-width:", "){height:24px;}"], Breakpoints.large);
+var headline5 = (0, _styledComponents.css)(["height:39px;@media (max-width:", "){height:20px;}"], Breakpoints.large);
+var headline6 = (0, _styledComponents.css)(["height:36px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
+var subtitle1 = (0, _styledComponents.css)(["height:32px;@media (max-width:", "){height:16px;}"], Breakpoints.large);
+var subtitle2 = (0, _styledComponents.css)(["height:21px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
+var body1 = (0, _styledComponents.css)(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
+var body2 = (0, _styledComponents.css)(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
+var button = (0, _styledComponents.css)(["height:14px;"]);
+var caption = (0, _styledComponents.css)(["height:20px;@media (max-width:", "){height:17px;}"], Breakpoints.large);
+var overline = (0, _styledComponents.css)(["height:17px;@media (max-width:", "){height:14px;}"], Breakpoints.large);
+var variantHeightMapping = (_variantHeightMapping = {}, _variantHeightMapping['headline1'] = headline1, _variantHeightMapping['headline2'] = headline2, _variantHeightMapping['headline3'] = headline3, _variantHeightMapping['headline4'] = headline4, _variantHeightMapping['headline5'] = headline5, _variantHeightMapping['headline6'] = headline6, _variantHeightMapping['subtitle1'] = subtitle1, _variantHeightMapping['subtitle2'] = subtitle2, _variantHeightMapping['body1'] = body1, _variantHeightMapping['body2'] = body2, _variantHeightMapping['button'] = button, _variantHeightMapping['caption'] = caption, _variantHeightMapping['overline'] = overline, _variantHeightMapping);
+var StyledSkeletonText = _styledComponents["default"].li.withConfig({
+  displayName: "SkeletonTextStyle__StyledSkeletonText",
+  componentId: "sc-ym0kos-0"
+})(["", " width:", ";", ""], function (props) {
+  return variantHeightMapping[props.variant];
+}, function (props) {
+  return props.width;
+}, _SkeletonStyle.SkeletonShimmer);
+exports.StyledSkeletonText = StyledSkeletonText;
+var SkeletonTextContainer = _styledComponents["default"].ul.withConfig({
+  displayName: "SkeletonTextStyle__SkeletonTextContainer",
+  componentId: "sc-ym0kos-1"
+})(["list-style:none;width:100%;li:not(:last-child){margin-bottom:", ";}"], _spacing.space4);
+exports.SkeletonTextContainer = SkeletonTextContainer;

package/lib/@next/Skeleton/components/index.d.ts

@@ -0,0 +1,3 @@
+export { SkeletonText, SkeletonTextProps } from './SkeletonText/SkeletonText';
+export { SkeletonImageCircle, SkeletonImageCircleProps, } from './SkeletonImage/SkeletonImageCircle';
+export { SkeletonImageSquare, SkeletonImageSquareProps, } from './SkeletonImage/SkeletonImageSquare';

package/lib/@next/Skeleton/components/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.SkeletonTextProps = exports.SkeletonText = exports.SkeletonImageSquareProps = exports.SkeletonImageSquare = exports.SkeletonImageCircleProps = exports.SkeletonImageCircle = void 0;
+var _SkeletonText = require("./SkeletonText/SkeletonText");
+exports.SkeletonText = _SkeletonText.SkeletonText;
+exports.SkeletonTextProps = _SkeletonText.SkeletonTextProps;
+var _SkeletonImageCircle = require("./SkeletonImage/SkeletonImageCircle");
+exports.SkeletonImageCircle = _SkeletonImageCircle.SkeletonImageCircle;
+exports.SkeletonImageCircleProps = _SkeletonImageCircle.SkeletonImageCircleProps;
+var _SkeletonImageSquare = require("./SkeletonImage/SkeletonImageSquare");
+exports.SkeletonImageSquare = _SkeletonImageSquare.SkeletonImageSquare;
+exports.SkeletonImageSquareProps = _SkeletonImageSquare.SkeletonImageSquareProps;

package/lib/@next/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/lib/@next/Skeleton/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+var _components = require("./components");
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _components[key]) return;
+  exports[key] = _components[key];
+});

package/lib/@next/index.d.ts

@@ -29,6 +29,7 @@ export { Pagination, PaginationProps, SimplePagination } from './Pagination';
 export { Popover, PopoverProps } from './Popover';
 export { RadioButton, RadioButtonProps } from './RadioButton';
 export { Select, SelectProps } from './Select';
+export { SkeletonImageCircle, SkeletonImageCircleProps, SkeletonImageSquare, SkeletonImageSquareProps, SkeletonText, SkeletonTextProps, } from './Skeleton';
 export { Spinner, SpinnerProps } from './Spinner';
 export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
 export { Tag, TagProps } from './Tag';

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.SelectProps = exports.Select = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.ComboboxProps = exports.Combobox = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BarProps = exports.Bar = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
+exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SkeletonTextProps = exports.SkeletonText = exports.SkeletonImageSquareProps = exports.SkeletonImageSquare = exports.SkeletonImageCircleProps = exports.SkeletonImageCircle = exports.SimplePagination = exports.SelectProps = exports.Select = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.ComboboxProps = exports.Combobox = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BarProps = exports.Bar = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -106,6 +106,13 @@ exports.RadioButtonProps = _RadioButton.RadioButtonProps;
 var _Select = require("./Select");
 exports.Select = _Select.Select;
 exports.SelectProps = _Select.SelectProps;
+var _Skeleton = require("./Skeleton");
+exports.SkeletonImageCircle = _Skeleton.SkeletonImageCircle;
+exports.SkeletonImageCircleProps = _Skeleton.SkeletonImageCircleProps;
+exports.SkeletonImageSquare = _Skeleton.SkeletonImageSquare;
+exports.SkeletonImageSquareProps = _Skeleton.SkeletonImageSquareProps;
+exports.SkeletonText = _Skeleton.SkeletonText;
+exports.SkeletonTextProps = _Skeleton.SkeletonTextProps;
 var _Spinner = require("./Spinner");
 exports.Spinner = _Spinner.Spinner;
 exports.SpinnerProps = _Spinner.SpinnerProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.233",
+  "version": "4.0.234",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",