@elliemae/ds-skeleton 3.12.0-next.1 → 3.12.0-rc.0

package/dist/cjs/DSSkeleton.js

@@ -45,7 +45,8 @@ const DSSkeleton = (props) => {
     ...globalAttributes,
     ...xstyledProps,
     variant,
-    withChildren
+    withChildren,
+    as: "span"
   });
 };
 DSSkeleton.propTypes = import_react_desc_prop_types.DSSkeletonPropTypes;

package/dist/cjs/DSSkeleton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSSkeleton.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { describe } from '@elliemae/ds-utilities';\nimport { StyledSkeleton } from './styled/components';\nimport { useSkeleton } from './config/useSkeleton';\nimport type { DSSkeletonT } from './react-desc-prop-types';\nimport { DSSkeletonPropTypes } from './react-desc-prop-types';\n\nexport const DSSkeleton: React.ComponentType<DSSkeletonT.Props> = (props) => {\n  const {\n    propsWithDefault: { variant },\n    withChildren,\n    xstyledProps,\n    globalAttributes,\n  } = useSkeleton(props);\n\n  return <StyledSkeleton {...globalAttributes} {...xstyledProps} variant={variant} withChildren={withChildren} />;\n};\n\nDSSkeleton.propTypes = DSSkeletonPropTypes;\nDSSkeleton.displayName = 'DSSkeleton';\nexport const DSSkeletonWithSchema = describe(DSSkeleton);\nDSSkeletonWithSchema.propTypes = DSSkeletonPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcd;AAdT,0BAAyB;AACzB,wBAA+B;AAC/B,yBAA4B;AAE5B,mCAAoC;AAE7B,MAAM,aAAqD,CAAC,UAAU;AAC3E,QAAM;AAAA,IACJ,kBAAkB,EAAE,QAAQ;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gCAAY,KAAK;AAErB,SAAO,4CAAC;AAAA,IAAgB,GAAG;AAAA,IAAmB,GAAG;AAAA,IAAc;AAAA,IAAkB;AAAA,GAA4B;AAC/G;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AAClB,MAAM,2BAAuB,8BAAS,UAAU;AACvD,qBAAqB,YAAY;",
+  "sourcesContent": ["import { describe } from '@elliemae/ds-utilities';\nimport { StyledSkeleton } from './styled/components';\nimport { useSkeleton } from './config/useSkeleton';\nimport type { DSSkeletonT } from './react-desc-prop-types';\nimport { DSSkeletonPropTypes } from './react-desc-prop-types';\n\nexport const DSSkeleton: React.ComponentType<DSSkeletonT.Props> = (props) => {\n  const {\n    propsWithDefault: { variant },\n    withChildren,\n    xstyledProps,\n    globalAttributes,\n  } = useSkeleton(props);\n\n  return (\n    <StyledSkeleton {...globalAttributes} {...xstyledProps} variant={variant} withChildren={withChildren} as=\"span\" />\n  );\n};\n\nDSSkeleton.propTypes = DSSkeletonPropTypes;\nDSSkeleton.displayName = 'DSSkeleton';\nexport const DSSkeletonWithSchema = describe(DSSkeleton);\nDSSkeletonWithSchema.propTypes = DSSkeletonPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAfJ,0BAAyB;AACzB,wBAA+B;AAC/B,yBAA4B;AAE5B,mCAAoC;AAE7B,MAAM,aAAqD,CAAC,UAAU;AAC3E,QAAM;AAAA,IACJ,kBAAkB,EAAE,QAAQ;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gCAAY,KAAK;AAErB,SACE,4CAAC;AAAA,IAAgB,GAAG;AAAA,IAAmB,GAAG;AAAA,IAAc;AAAA,IAAkB;AAAA,IAA4B,IAAG;AAAA,GAAO;AAEpH;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AAClB,MAAM,2BAAuB,8BAAS,UAAU;AACvD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/cjs/styled/components.js

@@ -32,7 +32,10 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_exported_related = require("../exported-related");
 var import_animation = require("./animation");
 var import_variants = require("./variants");
-const StyledSkeleton = (0, import_ds_system.styled)("span", { name: import_exported_related.DSSkeletonName, slot: import_exported_related.DSSkeletonSlots.ROOT })`
+const StyledSkeleton = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper, {
+  name: import_exported_related.DSSkeletonName,
+  slot: import_exported_related.DSSkeletonSlots.ROOT
+})`
   display: block;
   height: 20px;
   background-color: ${import_ds_system.th.color("neutral-400")}2f;
@@ -45,9 +48,5 @@ const StyledSkeleton = (0, import_ds_system.styled)("span", { name: import_expor
   ${(props) => props.withChildren ? import_variants.withChildrenCss : ""}
   
   animation: ${import_animation.pulseKeyframe} 1.5s ease-in-out 0.5s infinite;
-
-  ${import_ds_system.layout}
-  ${import_ds_system.space}
-  ${import_ds_system.sizing}
 `;
 //# sourceMappingURL=components.js.map

package/dist/cjs/styled/components.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styled/components.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, th, layout, space, sizing } from '@elliemae/ds-system';\nimport { DSSkeletonName, DSSkeletonSlots } from '../exported-related';\nimport { pulseKeyframe } from './animation';\nimport { circularVariantCss, textVariantCss, withChildrenCss } from './variants';\n\ninterface StyledSkeletonProps {\n  variant: 'circular' | 'rectangular' | 'text';\n  withChildren: boolean;\n}\n\nexport const StyledSkeleton = styled('span', { name: DSSkeletonName, slot: DSSkeletonSlots.ROOT })<StyledSkeletonProps>`\n  display: block;\n  height: 20px;\n  background-color: ${th.color('neutral-400')}2f;\n  ${(props) => {\n    if (props.variant === 'circular') return circularVariantCss;\n    if (props.variant === 'text') return textVariantCss;\n  }}\n  ${(props) => (props.withChildren ? withChildrenCss : '')}\n  \n  animation: ${pulseKeyframe} 1.5s ease-in-out 0.5s infinite;\n\n  ${layout}\n  ${space}\n  ${sizing}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAkD;AAClD,8BAAgD;AAChD,uBAA8B;AAC9B,sBAAoE;AAO7D,MAAM,qBAAiB,yBAAO,QAAQ,EAAE,MAAM,wCAAgB,MAAM,wCAAgB,KAAK,CAAC;AAAA;AAAA;AAAA,sBAG3E,oBAAG,MAAM,aAAa;AAAA,IACxC,CAAC,UAAU;AACX,MAAI,MAAM,YAAY;AAAY,WAAO;AACzC,MAAI,MAAM,YAAY;AAAQ,WAAO;AACvC;AAAA,IACE,CAAC,UAAW,MAAM,eAAe,kCAAkB;AAAA;AAAA,eAExC;AAAA;AAAA,IAEX;AAAA,IACA;AAAA,IACA;AAAA;",
+  "sourcesContent": ["import { styled, th, XStyledWrapper } from '@elliemae/ds-system';\nimport { DSSkeletonName, DSSkeletonSlots } from '../exported-related';\nimport { pulseKeyframe } from './animation';\nimport { circularVariantCss, textVariantCss, withChildrenCss } from './variants';\n\ninterface StyledSkeletonProps {\n  variant: 'circular' | 'rectangular' | 'text';\n  withChildren: boolean;\n}\n\nexport const StyledSkeleton = styled(XStyledWrapper, {\n  name: DSSkeletonName,\n  slot: DSSkeletonSlots.ROOT,\n})<StyledSkeletonProps>`\n  display: block;\n  height: 20px;\n  background-color: ${th.color('neutral-400')}2f;\n  ${(props) => {\n    if (props.variant === 'circular') return circularVariantCss;\n    if (props.variant === 'text') return textVariantCss;\n  }}\n  ${(props) => (props.withChildren ? withChildrenCss : '')}\n  \n  animation: ${pulseKeyframe} 1.5s ease-in-out 0.5s infinite;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,8BAAgD;AAChD,uBAA8B;AAC9B,sBAAoE;AAO7D,MAAM,qBAAiB,yBAAO,iCAAgB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,sBAGqB,oBAAG,MAAM,aAAa;AAAA,IACxC,CAAC,UAAU;AACX,MAAI,MAAM,YAAY;AAAY,WAAO;AACzC,MAAI,MAAM,YAAY;AAAQ,WAAO;AACvC;AAAA,IACE,CAAC,UAAW,MAAM,eAAe,kCAAkB;AAAA;AAAA,eAExC;AAAA;",
   "names": []
 }

package/dist/esm/DSSkeleton.js

@@ -15,7 +15,8 @@ const DSSkeleton = (props) => {
     ...globalAttributes,
     ...xstyledProps,
     variant,
-    withChildren
+    withChildren,
+    as: "span"
   });
 };
 DSSkeleton.propTypes = DSSkeletonPropTypes;

package/dist/esm/DSSkeleton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSkeleton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-utilities';\nimport { StyledSkeleton } from './styled/components';\nimport { useSkeleton } from './config/useSkeleton';\nimport type { DSSkeletonT } from './react-desc-prop-types';\nimport { DSSkeletonPropTypes } from './react-desc-prop-types';\n\nexport const DSSkeleton: React.ComponentType<DSSkeletonT.Props> = (props) => {\n  const {\n    propsWithDefault: { variant },\n    withChildren,\n    xstyledProps,\n    globalAttributes,\n  } = useSkeleton(props);\n\n  return <StyledSkeleton {...globalAttributes} {...xstyledProps} variant={variant} withChildren={withChildren} />;\n};\n\nDSSkeleton.propTypes = DSSkeletonPropTypes;\nDSSkeleton.displayName = 'DSSkeleton';\nexport const DSSkeletonWithSchema = describe(DSSkeleton);\nDSSkeletonWithSchema.propTypes = DSSkeletonPropTypes;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcd;AAdT,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,SAAS,2BAA2B;AAE7B,MAAM,aAAqD,CAAC,UAAU;AAC3E,QAAM;AAAA,IACJ,kBAAkB,EAAE,QAAQ;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,YAAY,KAAK;AAErB,SAAO,oBAAC;AAAA,IAAgB,GAAG;AAAA,IAAmB,GAAG;AAAA,IAAc;AAAA,IAAkB;AAAA,GAA4B;AAC/G;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AAClB,MAAM,uBAAuB,SAAS,UAAU;AACvD,qBAAqB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-utilities';\nimport { StyledSkeleton } from './styled/components';\nimport { useSkeleton } from './config/useSkeleton';\nimport type { DSSkeletonT } from './react-desc-prop-types';\nimport { DSSkeletonPropTypes } from './react-desc-prop-types';\n\nexport const DSSkeleton: React.ComponentType<DSSkeletonT.Props> = (props) => {\n  const {\n    propsWithDefault: { variant },\n    withChildren,\n    xstyledProps,\n    globalAttributes,\n  } = useSkeleton(props);\n\n  return (\n    <StyledSkeleton {...globalAttributes} {...xstyledProps} variant={variant} withChildren={withChildren} as=\"span\" />\n  );\n};\n\nDSSkeleton.propTypes = DSSkeletonPropTypes;\nDSSkeleton.displayName = 'DSSkeleton';\nexport const DSSkeletonWithSchema = describe(DSSkeleton);\nDSSkeletonWithSchema.propTypes = DSSkeletonPropTypes;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACenB;AAfJ,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,SAAS,2BAA2B;AAE7B,MAAM,aAAqD,CAAC,UAAU;AAC3E,QAAM;AAAA,IACJ,kBAAkB,EAAE,QAAQ;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,YAAY,KAAK;AAErB,SACE,oBAAC;AAAA,IAAgB,GAAG;AAAA,IAAmB,GAAG;AAAA,IAAc;AAAA,IAAkB;AAAA,IAA4B,IAAG;AAAA,GAAO;AAEpH;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AAClB,MAAM,uBAAuB,SAAS,UAAU;AACvD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/esm/styled/components.js

@@ -1,9 +1,12 @@
 import * as React from "react";
-import { styled, th, layout, space, sizing } from "@elliemae/ds-system";
+import { styled, th, XStyledWrapper } from "@elliemae/ds-system";
 import { DSSkeletonName, DSSkeletonSlots } from "../exported-related";
 import { pulseKeyframe } from "./animation";
 import { circularVariantCss, textVariantCss, withChildrenCss } from "./variants";
-const StyledSkeleton = styled("span", { name: DSSkeletonName, slot: DSSkeletonSlots.ROOT })`
+const StyledSkeleton = styled(XStyledWrapper, {
+  name: DSSkeletonName,
+  slot: DSSkeletonSlots.ROOT
+})`
   display: block;
   height: 20px;
   background-color: ${th.color("neutral-400")}2f;
@@ -16,10 +19,6 @@ const StyledSkeleton = styled("span", { name: DSSkeletonName, slot: DSSkeletonSl
   ${(props) => props.withChildren ? withChildrenCss : ""}
   
   animation: ${pulseKeyframe} 1.5s ease-in-out 0.5s infinite;
-
-  ${layout}
-  ${space}
-  ${sizing}
 `;
 export {
   StyledSkeleton

package/dist/esm/styled/components.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/components.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, th, layout, space, sizing } from '@elliemae/ds-system';\nimport { DSSkeletonName, DSSkeletonSlots } from '../exported-related';\nimport { pulseKeyframe } from './animation';\nimport { circularVariantCss, textVariantCss, withChildrenCss } from './variants';\n\ninterface StyledSkeletonProps {\n  variant: 'circular' | 'rectangular' | 'text';\n  withChildren: boolean;\n}\n\nexport const StyledSkeleton = styled('span', { name: DSSkeletonName, slot: DSSkeletonSlots.ROOT })<StyledSkeletonProps>`\n  display: block;\n  height: 20px;\n  background-color: ${th.color('neutral-400')}2f;\n  ${(props) => {\n    if (props.variant === 'circular') return circularVariantCss;\n    if (props.variant === 'text') return textVariantCss;\n  }}\n  ${(props) => (props.withChildren ? withChildrenCss : '')}\n  \n  animation: ${pulseKeyframe} 1.5s ease-in-out 0.5s infinite;\n\n  ${layout}\n  ${space}\n  ${sizing}\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,IAAI,QAAQ,OAAO,cAAc;AAClD,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB,gBAAgB,uBAAuB;AAO7D,MAAM,iBAAiB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,KAAK,CAAC;AAAA;AAAA;AAAA,sBAG3E,GAAG,MAAM,aAAa;AAAA,IACxC,CAAC,UAAU;AACX,MAAI,MAAM,YAAY;AAAY,WAAO;AACzC,MAAI,MAAM,YAAY;AAAQ,WAAO;AACvC;AAAA,IACE,CAAC,UAAW,MAAM,eAAe,kBAAkB;AAAA;AAAA,eAExC;AAAA;AAAA,IAEX;AAAA,IACA;AAAA,IACA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, th, XStyledWrapper } from '@elliemae/ds-system';\nimport { DSSkeletonName, DSSkeletonSlots } from '../exported-related';\nimport { pulseKeyframe } from './animation';\nimport { circularVariantCss, textVariantCss, withChildrenCss } from './variants';\n\ninterface StyledSkeletonProps {\n  variant: 'circular' | 'rectangular' | 'text';\n  withChildren: boolean;\n}\n\nexport const StyledSkeleton = styled(XStyledWrapper, {\n  name: DSSkeletonName,\n  slot: DSSkeletonSlots.ROOT,\n})<StyledSkeletonProps>`\n  display: block;\n  height: 20px;\n  background-color: ${th.color('neutral-400')}2f;\n  ${(props) => {\n    if (props.variant === 'circular') return circularVariantCss;\n    if (props.variant === 'text') return textVariantCss;\n  }}\n  ${(props) => (props.withChildren ? withChildrenCss : '')}\n  \n  animation: ${pulseKeyframe} 1.5s ease-in-out 0.5s infinite;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,IAAI,sBAAsB;AAC3C,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB,gBAAgB,uBAAuB;AAO7D,MAAM,iBAAiB,OAAO,gBAAgB;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,sBAGqB,GAAG,MAAM,aAAa;AAAA,IACxC,CAAC,UAAU;AACX,MAAI,MAAM,YAAY;AAAY,WAAO;AACzC,MAAI,MAAM,YAAY;AAAQ,WAAO;AACvC;AAAA,IACE,CAAC,UAAW,MAAM,eAAe,kBAAkB;AAAA;AAAA,eAExC;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-skeleton",
-  "version": "3.12.0-next.1",
+  "version": "3.12.0-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Skeleton UI",
   "files": [
@@ -35,8 +35,8 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-system": "3.12.0-next.1",
-    "@elliemae/ds-utilities": "3.12.0-next.1"
+    "@elliemae/ds-system": "3.12.0-rc.0",
+    "@elliemae/ds-utilities": "3.12.0-rc.0"
   },
   "devDependencies": {
     "styled-components": "~5.3.5"