se-design 1.1.0 → 1.1.1-dev-01

package/dist/index44.js

@@ -1,24 +1,24 @@
-import t, { useState as p, useEffect as g } from "react";
+import t, { useState as d, useEffect as g } from "react";
 import { Icon as S } from "./index6.js";
 import { Button as A } from "./index4.js";
 import { getRegionAttributes as P } from "./index72.js";
 import "./index78.js";
 import { useStableId as w } from "./index227.js";
 /* empty css         */
-function x() {
-  return x = Object.assign ? Object.assign.bind() : function(i) {
-    for (var n = 1; n < arguments.length; n++) {
-      var a = arguments[n];
-      for (var s in a) ({}).hasOwnProperty.call(a, s) && (i[s] = a[s]);
+function f() {
+  return f = Object.assign ? Object.assign.bind() : function(i) {
+    for (var r = 1; r < arguments.length; r++) {
+      var n = arguments[r];
+      for (var s in n) ({}).hasOwnProperty.call(n, s) && (i[s] = n[s]);
     }
     return i;
-  }, x.apply(null, arguments);
+  }, f.apply(null, arguments);
 }
 const l = {
-  bannerCtn: "relative overflow-hidden rounded-[8px] bg-[var(--color-white)] flex items-center py-[16px] pl-[16px] pr-[48px] w-full",
+  bannerCtn: "relative overflow-hidden rounded-[8px] bg-[var(--color-white)] flex items-center py-[18px] pl-[20px] pr-[64px] w-full",
   content: "relative flex items-center justify-between w-full gap-[24px]",
   textCtn: "flex flex-col gap-[4px] items-start",
-  closeBtn: "absolute top-[4px] right-[4px]"
+  closeBtn: "absolute top-[12px] right-[12px]"
 }, D = [{
   key: "ring-3",
   rx: 357,
@@ -34,10 +34,10 @@ const l = {
   rx: 255,
   ry: 132.5,
   opacity: 1
-}], I = 1600, O = 952, f = O * 0.6, T = 1550, X = ({
+}], I = 1600, O = 952, x = O * 0.6, T = 1550, X = ({
   bannerClassName: i = "",
-  title: n = "Nicely done, you're a Pro now!",
-  description: a = "Get Business Plan which adds unlimited signatures, AI insights and bulk signing.",
+  title: r = "Nicely done, you're a Pro now!",
+  description: n = "Get Business Plan which adds unlimited signatures, AI insights and bulk signing.",
   buttonLabel: s = "Upgrade to Business",
   buttonIconProps: k = {
     name: "upload"
@@ -51,7 +51,7 @@ const l = {
   const b = w(), y = w(), C = P({
     titleId: b,
     descriptionId: y
-  }), [L, h] = p(!1), [v, d] = p(!1), [E, M] = p(0);
+  }), [L, h] = d(!1), [v, p] = d(!1), [E, M] = d(0);
   g(() => {
     const e = window.matchMedia("(prefers-reduced-motion: reduce)");
     h(e.matches);
@@ -60,19 +60,19 @@ const l = {
   }, []), g(() => {
     u && M((e) => e + 1);
   }, [u]);
-  const r = !u || L;
+  const a = !u || L;
   return g(() => {
-    if (r) {
-      d(!0);
+    if (a) {
+      p(!0);
       return;
     }
-    d(!1);
+    p(!1);
     const e = setTimeout(() => {
-      d(!0), _?.();
+      p(!0), _?.();
     }, T);
     return () => clearTimeout(e);
-  }, [E, r]), /* @__PURE__ */ t.createElement("div", x({
-    className: `${l.bannerCtn} ${i} upgrade-banner-ctn ${r ? "upgrade-banner-ctn--static" : ""}`,
+  }, [E, a]), /* @__PURE__ */ t.createElement("div", f({
+    className: `${l.bannerCtn} ${i} upgrade-banner-ctn ${a ? "upgrade-banner-ctn--static" : ""}`,
     "data-automation-id": B
   }, C), /* @__PURE__ */ t.createElement("svg", {
     key: E,
@@ -81,16 +81,16 @@ const l = {
     preserveAspectRatio: "xMidYMid slice",
     "aria-hidden": "true"
   }, D.map((e, o) => {
-    const c = f, N = -e.rx * 0.6;
+    const c = x, N = -e.rx * 0.6;
     return /* @__PURE__ */ t.createElement("ellipse", {
       key: e.key,
       className: `upgrade-banner-ring upgrade-banner-ring--${e.key}`,
-      cx: r ? c : N,
+      cx: a ? c : N,
       cy: "42",
       rx: e.rx,
       ry: e.ry,
       opacity: e.opacity
-    }, !r && /* @__PURE__ */ t.createElement("animate", {
+    }, !a && /* @__PURE__ */ t.createElement("animate", {
       attributeName: "cx",
       from: N,
       to: c,
@@ -101,15 +101,15 @@ const l = {
     }));
   }), /* @__PURE__ */ t.createElement("ellipse", {
     className: "upgrade-banner-ring upgrade-banner-ring--fill",
-    cx: r ? f : -1640,
+    cx: a ? x : -1640,
     cy: "42",
     rx: I,
     ry: I,
     opacity: "1"
-  }, !r && /* @__PURE__ */ t.createElement("animate", {
+  }, !a && /* @__PURE__ */ t.createElement("animate", {
     attributeName: "cx",
     from: -1640,
-    to: f,
+    to: x,
     dur: "1.2s",
     begin: "0.35s",
     calcMode: "linear",
@@ -121,17 +121,17 @@ const l = {
   }, /* @__PURE__ */ t.createElement("span", {
     id: b,
     className: "upgrade-banner-title text-[var(--color-white)]"
-  }, n), /* @__PURE__ */ t.createElement("span", {
+  }, r), /* @__PURE__ */ t.createElement("span", {
     id: y,
     className: "upgrade-banner-description text-[var(--color-white)]"
-  }, a)), /* @__PURE__ */ t.createElement(A, {
+  }, n)), /* @__PURE__ */ t.createElement(A, {
     type: "secondary",
     theme: "blue",
     size: "sm",
     label: s,
     iconProps: k,
     onClick: R,
-    className: "shrink-0"
+    className: "shrink-0 !gap-[6px] !py-[10px] !px-[20px]"
   })), m && v && /* @__PURE__ */ t.createElement("div", {
     className: l.closeBtn
   }, /* @__PURE__ */ t.createElement(S, {
@@ -147,6 +147,7 @@ const l = {
   }, v ? "Dismiss button available." : ""));
 };
 export {
-  X as UpgradeBanner
+  X as UpgradeBanner,
+  X as default
 };
 //# sourceMappingURL=index44.js.map

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":["../src/components/UpgradeBanner/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from \"react\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport { Map } from \"../../utils/common.types\";\nimport { getRegionAttributes } from \"../../utils/a11y\";\nimport { useStableId } from \"../../utils/useStableId\";\nimport \"./style.scss\";\n\nexport interface UpgradeBannerProps {\n  /** Additional class name applied to the banner container. */\n  bannerClassName?: string;\n  /** Headline text. */\n  title?: string;\n  /** Supporting description text below the title. */\n  description?: string;\n  /** Label for the call-to-action button. */\n  buttonLabel?: string;\n  /** Icon props for the call-to-action button. */\n  buttonIconProps?: IconProps;\n  /** Called when the call-to-action button is activated. */\n  onButtonClick?: () => void;\n  /** Called when the dismiss (close) icon is activated. When omitted, no close icon is rendered. */\n  onClose?: () => void;\n  /**\n   * Pass `true` at the moment the banner should animate in (e.g. when a\n   * preceding task list completes) — the animation runs once per\n   * `false` -> `true` transition, not on mount. When `false` (default), the\n   * banner renders in its fully-settled solid state with no animation.\n   */\n  playAnimation?: boolean;\n  /** Called once the fill animation finishes. */\n  onAnimationComplete?: () => void;\n  /** Automation ID for testing, applied as data-automation-id on the root element. */\n  automationId?: string;\n}\n\nconst className: Map = {\n  bannerCtn:\n    \"relative overflow-hidden rounded-[8px] bg-[var(--color-white)] flex items-center py-[16px] pl-[16px] pr-[48px] w-full\",\n  content: \"relative flex items-center justify-between w-full gap-[24px]\",\n  textCtn: \"flex flex-col gap-[4px] items-start\",\n  closeBtn: \"absolute top-[4px] right-[4px]\"\n};\n\nconst RING_LAYERS = [\n  { key: \"ring-3\", rx: 357, ry: 185.5, opacity: 0.3 },\n  { key: \"ring-2\", rx: 306, ry: 159, opacity: 0.5 },\n  { key: \"ring-1\", rx: 255, ry: 132.5, opacity: 1 }\n];\n\nconst FILL_RADIUS = 1600;\nconst VIEWBOX_WIDTH = 952;\nconst RIPPLE_REST_CX = VIEWBOX_WIDTH * 0.6;\nconst FILL_ANIMATION_END_MS = 1550;\n\nexport const UpgradeBanner: FC<UpgradeBannerProps> = ({\n  bannerClassName = \"\",\n  title = \"Nicely done, you're a Pro now!\",\n  description = \"Get Business Plan which adds unlimited signatures, AI insights and bulk signing.\",\n  buttonLabel = \"Upgrade to Business\",\n  buttonIconProps = { name: \"upload\" },\n  onButtonClick,\n  onClose,\n  playAnimation = false,\n  onAnimationComplete,\n  automationId\n}) => {\n  const titleId = useStableId();\n  const descriptionId = useStableId();\n  const regionAttributes = getRegionAttributes({ titleId, descriptionId });\n\n  const [reduceMotion, setReduceMotion] = useState(false);\n  const [showCloseButton, setShowCloseButton] = useState(false);\n  const [animationRunId, setAnimationRunId] = useState(0);\n\n  useEffect(() => {\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setReduceMotion(query.matches);\n\n    const handleChange = (event: MediaQueryListEvent) => setReduceMotion(event.matches);\n    query.addEventListener(\"change\", handleChange);\n    return () => query.removeEventListener(\"change\", handleChange);\n  }, []);\n\n  useEffect(() => {\n    if (!playAnimation) {\n      return;\n    }\n    setAnimationRunId((id) => id + 1);\n  }, [playAnimation]);\n\n  const showStatic = !playAnimation || reduceMotion;\n\n  useEffect(() => {\n    if (showStatic) {\n      setShowCloseButton(true);\n      return;\n    }\n\n    setShowCloseButton(false);\n    const timer = setTimeout(() => {\n      setShowCloseButton(true);\n      onAnimationComplete?.();\n    }, FILL_ANIMATION_END_MS);\n    return () => clearTimeout(timer);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animationRunId, showStatic]);\n\n  return (\n    <div\n      className={`${className.bannerCtn} ${bannerClassName} upgrade-banner-ctn ${\n        showStatic ? \"upgrade-banner-ctn--static\" : \"\"\n      }`}\n      data-automation-id={automationId}\n      {...regionAttributes}\n    >\n      <svg\n        key={animationRunId}\n        className=\"upgrade-banner-rings\"\n        viewBox=\"0 0 952 84\"\n        preserveAspectRatio=\"xMidYMid slice\"\n        aria-hidden=\"true\"\n      >\n        {RING_LAYERS.map((ring, index) => {\n          const restCx = RIPPLE_REST_CX;\n          const fromCx = -ring.rx * 0.6;\n          return (\n            <ellipse\n              key={ring.key}\n              className={`upgrade-banner-ring upgrade-banner-ring--${ring.key}`}\n              cx={showStatic ? restCx : fromCx}\n              cy=\"42\"\n              rx={ring.rx}\n              ry={ring.ry}\n              opacity={ring.opacity}\n            >\n              {!showStatic && (\n                <animate\n                  attributeName=\"cx\"\n                  from={fromCx}\n                  to={restCx}\n                  dur=\"1.1s\"\n                  begin={`${index * 0.12}s`}\n                  calcMode=\"linear\"\n                  fill=\"freeze\"\n                />\n              )}\n            </ellipse>\n          );\n        })}\n        <ellipse\n          className=\"upgrade-banner-ring upgrade-banner-ring--fill\"\n          cx={showStatic ? RIPPLE_REST_CX : -(FILL_RADIUS + 40)}\n          cy=\"42\"\n          rx={FILL_RADIUS}\n          ry={FILL_RADIUS}\n          opacity=\"1\"\n        >\n          {!showStatic && (\n            <animate\n              attributeName=\"cx\"\n              from={-(FILL_RADIUS + 40)}\n              to={RIPPLE_REST_CX}\n              dur=\"1.2s\"\n              begin=\"0.35s\"\n              calcMode=\"linear\"\n              fill=\"freeze\"\n            />\n          )}\n        </ellipse>\n      </svg>\n\n      <div className={className.content}>\n        <div className={className.textCtn}>\n          <span id={titleId} className=\"upgrade-banner-title text-[var(--color-white)]\">\n            {title}\n          </span>\n          <span id={descriptionId} className=\"upgrade-banner-description text-[var(--color-white)]\">\n            {description}\n          </span>\n        </div>\n        <Button\n          type=\"secondary\"\n          theme=\"blue\"\n          size=\"sm\"\n          label={buttonLabel}\n          iconProps={buttonIconProps}\n          onClick={onButtonClick}\n          className=\"shrink-0\"\n        />\n      </div>\n\n      {onClose && showCloseButton && (\n        <div className={className.closeBtn}>\n          <Icon name=\"close\" size={16} stroke=\"var(--color-white)\" onClick={onClose} ariaLabel=\"Dismiss\" />\n        </div>\n      )}\n\n      {onClose && (\n        <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {showCloseButton ? \"Dismiss button available.\" : \"\"}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default UpgradeBanner;\n"],"names":["className","bannerCtn","content","textCtn","closeBtn","RING_LAYERS","key","rx","ry","opacity","FILL_RADIUS","VIEWBOX_WIDTH","RIPPLE_REST_CX","FILL_ANIMATION_END_MS","UpgradeBanner","bannerClassName","title","description","buttonLabel","buttonIconProps","name","onButtonClick","onClose","playAnimation","onAnimationComplete","automationId","titleId","useStableId","descriptionId","regionAttributes","getRegionAttributes","reduceMotion","setReduceMotion","useState","showCloseButton","setShowCloseButton","animationRunId","setAnimationRunId","useEffect","query","window","matchMedia","matches","handleChange","event","addEventListener","removeEventListener","id","showStatic","timer","setTimeout","clearTimeout","React","createElement","_extends","viewBox","preserveAspectRatio","map","ring","index","restCx","fromCx","cx","cy","attributeName","from","to","dur","begin","calcMode","fill","Button","type","theme","size","label","iconProps","onClick","Icon","stroke","ariaLabel","role"],"mappings":"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"}
+{"version":3,"file":"index44.js","sources":["../src/components/UpgradeBanner/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from \"react\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport { Map } from \"../../utils/common.types\";\nimport { getRegionAttributes } from \"../../utils/a11y\";\nimport { useStableId } from \"../../utils/useStableId\";\nimport \"./style.scss\";\n\nexport interface UpgradeBannerProps {\n  /** Additional class name applied to the banner container. */\n  bannerClassName?: string;\n  /** Headline text. */\n  title?: string;\n  /** Supporting description text below the title. */\n  description?: string;\n  /** Label for the call-to-action button. */\n  buttonLabel?: string;\n  /** Icon props for the call-to-action button. */\n  buttonIconProps?: IconProps;\n  /** Called when the call-to-action button is activated. */\n  onButtonClick?: () => void;\n  /** Called when the dismiss (close) icon is activated. When omitted, no close icon is rendered. */\n  onClose?: () => void;\n  /**\n   * Pass `true` at the moment the banner should animate in (e.g. when a\n   * preceding task list completes) — the animation runs once per\n   * `false` -> `true` transition, not on mount. When `false` (default), the\n   * banner renders in its fully-settled solid state with no animation.\n   */\n  playAnimation?: boolean;\n  /** Called once the fill animation finishes. */\n  onAnimationComplete?: () => void;\n  /** Automation ID for testing, applied as data-automation-id on the root element. */\n  automationId?: string;\n}\n\nconst className: Map = {\n  bannerCtn:\n    \"relative overflow-hidden rounded-[8px] bg-[var(--color-white)] flex items-center py-[18px] pl-[20px] pr-[64px] w-full\",\n  content: \"relative flex items-center justify-between w-full gap-[24px]\",\n  textCtn: \"flex flex-col gap-[4px] items-start\",\n  closeBtn: \"absolute top-[12px] right-[12px]\"\n};\n\nconst RING_LAYERS = [\n  { key: \"ring-3\", rx: 357, ry: 185.5, opacity: 0.3 },\n  { key: \"ring-2\", rx: 306, ry: 159, opacity: 0.5 },\n  { key: \"ring-1\", rx: 255, ry: 132.5, opacity: 1 }\n];\n\nconst FILL_RADIUS = 1600;\nconst VIEWBOX_WIDTH = 952;\nconst RIPPLE_REST_CX = VIEWBOX_WIDTH * 0.6;\nconst FILL_ANIMATION_END_MS = 1550;\n\nexport const UpgradeBanner: FC<UpgradeBannerProps> = ({\n  bannerClassName = \"\",\n  title = \"Nicely done, you're a Pro now!\",\n  description = \"Get Business Plan which adds unlimited signatures, AI insights and bulk signing.\",\n  buttonLabel = \"Upgrade to Business\",\n  buttonIconProps = { name: \"upload\" },\n  onButtonClick,\n  onClose,\n  playAnimation = false,\n  onAnimationComplete,\n  automationId\n}) => {\n  const titleId = useStableId();\n  const descriptionId = useStableId();\n  const regionAttributes = getRegionAttributes({ titleId, descriptionId });\n\n  const [reduceMotion, setReduceMotion] = useState(false);\n  const [showCloseButton, setShowCloseButton] = useState(false);\n  const [animationRunId, setAnimationRunId] = useState(0);\n\n  useEffect(() => {\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setReduceMotion(query.matches);\n\n    const handleChange = (event: MediaQueryListEvent) => setReduceMotion(event.matches);\n    query.addEventListener(\"change\", handleChange);\n    return () => query.removeEventListener(\"change\", handleChange);\n  }, []);\n\n  useEffect(() => {\n    if (!playAnimation) {\n      return;\n    }\n    setAnimationRunId((id) => id + 1);\n  }, [playAnimation]);\n\n  const showStatic = !playAnimation || reduceMotion;\n\n  useEffect(() => {\n    if (showStatic) {\n      setShowCloseButton(true);\n      return;\n    }\n\n    setShowCloseButton(false);\n    const timer = setTimeout(() => {\n      setShowCloseButton(true);\n      onAnimationComplete?.();\n    }, FILL_ANIMATION_END_MS);\n    return () => clearTimeout(timer);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animationRunId, showStatic]);\n\n  return (\n    <div\n      className={`${className.bannerCtn} ${bannerClassName} upgrade-banner-ctn ${\n        showStatic ? \"upgrade-banner-ctn--static\" : \"\"\n      }`}\n      data-automation-id={automationId}\n      {...regionAttributes}\n    >\n      <svg\n        key={animationRunId}\n        className=\"upgrade-banner-rings\"\n        viewBox=\"0 0 952 84\"\n        preserveAspectRatio=\"xMidYMid slice\"\n        aria-hidden=\"true\"\n      >\n        {RING_LAYERS.map((ring, index) => {\n          const restCx = RIPPLE_REST_CX;\n          const fromCx = -ring.rx * 0.6;\n          return (\n            <ellipse\n              key={ring.key}\n              className={`upgrade-banner-ring upgrade-banner-ring--${ring.key}`}\n              cx={showStatic ? restCx : fromCx}\n              cy=\"42\"\n              rx={ring.rx}\n              ry={ring.ry}\n              opacity={ring.opacity}\n            >\n              {!showStatic && (\n                <animate\n                  attributeName=\"cx\"\n                  from={fromCx}\n                  to={restCx}\n                  dur=\"1.1s\"\n                  begin={`${index * 0.12}s`}\n                  calcMode=\"linear\"\n                  fill=\"freeze\"\n                />\n              )}\n            </ellipse>\n          );\n        })}\n        <ellipse\n          className=\"upgrade-banner-ring upgrade-banner-ring--fill\"\n          cx={showStatic ? RIPPLE_REST_CX : -(FILL_RADIUS + 40)}\n          cy=\"42\"\n          rx={FILL_RADIUS}\n          ry={FILL_RADIUS}\n          opacity=\"1\"\n        >\n          {!showStatic && (\n            <animate\n              attributeName=\"cx\"\n              from={-(FILL_RADIUS + 40)}\n              to={RIPPLE_REST_CX}\n              dur=\"1.2s\"\n              begin=\"0.35s\"\n              calcMode=\"linear\"\n              fill=\"freeze\"\n            />\n          )}\n        </ellipse>\n      </svg>\n\n      <div className={className.content}>\n        <div className={className.textCtn}>\n          <span id={titleId} className=\"upgrade-banner-title text-[var(--color-white)]\">\n            {title}\n          </span>\n          <span id={descriptionId} className=\"upgrade-banner-description text-[var(--color-white)]\">\n            {description}\n          </span>\n        </div>\n        <Button\n          type=\"secondary\"\n          theme=\"blue\"\n          size=\"sm\"\n          label={buttonLabel}\n          iconProps={buttonIconProps}\n          onClick={onButtonClick}\n          className=\"shrink-0 !gap-[6px] !py-[10px] !px-[20px]\"\n        />\n      </div>\n\n      {onClose && showCloseButton && (\n        <div className={className.closeBtn}>\n          <Icon name=\"close\" size={16} stroke=\"var(--color-white)\" onClick={onClose} ariaLabel=\"Dismiss\" />\n        </div>\n      )}\n\n      {onClose && (\n        <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {showCloseButton ? \"Dismiss button available.\" : \"\"}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default UpgradeBanner;\n"],"names":["className","bannerCtn","content","textCtn","closeBtn","RING_LAYERS","key","rx","ry","opacity","FILL_RADIUS","VIEWBOX_WIDTH","RIPPLE_REST_CX","FILL_ANIMATION_END_MS","UpgradeBanner","bannerClassName","title","description","buttonLabel","buttonIconProps","name","onButtonClick","onClose","playAnimation","onAnimationComplete","automationId","titleId","useStableId","descriptionId","regionAttributes","getRegionAttributes","reduceMotion","setReduceMotion","useState","showCloseButton","setShowCloseButton","animationRunId","setAnimationRunId","useEffect","query","window","matchMedia","matches","handleChange","event","addEventListener","removeEventListener","id","showStatic","timer","setTimeout","clearTimeout","React","createElement","_extends","viewBox","preserveAspectRatio","map","ring","index","restCx","fromCx","cx","cy","attributeName","from","to","dur","begin","calcMode","fill","Button","type","theme","size","label","iconProps","onClick","Icon","stroke","ariaLabel","role"],"mappings":"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"}

package/dist/index45.js

@@ -110,6 +110,7 @@ const f = {
   }));
 };
 export {
-  U as MessageBar
+  U as MessageBar,
+  U as default
 };
 //# sourceMappingURL=index45.js.map

package/dist/index61.js

@@ -1,4 +1,4 @@
-import a from "react";
+import t from "react";
 /* empty css         */
 const n = ({
   element: e,
@@ -15,12 +15,12 @@ const n = ({
     "--shimmer-base-color": s,
     "--shimmer-highlight-color": m
   }, r = `se-design-shimmer-element se-design-shimmer-${e.type}`;
-  return /* @__PURE__ */ a.createElement("div", {
+  return /* @__PURE__ */ t.createElement("div", {
     className: r,
     style: i
-  }, e.children && e.children.map((t, p) => /* @__PURE__ */ a.createElement(n, {
+  }, e.children && e.children.map((a, p) => /* @__PURE__ */ t.createElement(n, {
     key: p,
-    element: t,
+    element: a,
     animationDuration: d,
     baseColor: s,
     highlightColor: m
@@ -40,48 +40,48 @@ const n = ({
     alignItems: e.alignItems,
     flex: e.flex
   };
-  return /* @__PURE__ */ a.createElement("div", {
+  return /* @__PURE__ */ t.createElement("div", {
     className: `se-design-shimmer-container ${e.className || ""}`,
     style: i
-  }, e.children.map((r, t) => r.type === "container" ? /* @__PURE__ */ a.createElement(y, {
-    key: t,
+  }, e.children.map((r, a) => r.type === "container" ? /* @__PURE__ */ t.createElement(y, {
+    key: a,
     container: r,
     animationDuration: d,
     baseColor: s,
     highlightColor: m
-  }) : /* @__PURE__ */ a.createElement(n, {
-    key: t,
+  }) : /* @__PURE__ */ t.createElement(n, {
+    key: a,
     element: r,
     animationDuration: d,
     baseColor: s,
     highlightColor: m
   })));
-}, g = ({
+}, l = ({
   structure: e,
   className: d = "",
   animationDuration: s = 3,
   baseColor: m = "var(--color-gray-700)",
   highlightColor: i = "var(--color-gray-600)",
   width: r,
-  height: t
+  height: a
 }) => {
   const p = {
     width: r ? typeof r == "number" ? `${r}px` : r : "100%",
-    height: t ? typeof t == "number" ? `${t}px` : t : "auto",
+    height: a ? typeof a == "number" ? `${a}px` : a : "auto",
     "--shimmer-duration": `${s}s`,
     "--shimmer-base-color": m,
     "--shimmer-highlight-color": i
   };
-  return /* @__PURE__ */ a.createElement("div", {
+  return /* @__PURE__ */ t.createElement("div", {
     className: `se-design-shimmer-loader ${d}`,
     style: p
-  }, e.map((c, o) => c.type === "container" ? /* @__PURE__ */ a.createElement(y, {
+  }, e.map((c, o) => c.type === "container" ? /* @__PURE__ */ t.createElement(y, {
     key: o,
     container: c,
     animationDuration: s,
     baseColor: m,
     highlightColor: i
-  }) : /* @__PURE__ */ a.createElement(n, {
+  }) : /* @__PURE__ */ t.createElement(n, {
     key: o,
     element: c,
     animationDuration: s,
@@ -90,6 +90,7 @@ const n = ({
   })));
 };
 export {
-  g as ShimmerLoader
+  l as ShimmerLoader,
+  l as default
 };
 //# sourceMappingURL=index61.js.map

package/dist/index7.js

@@ -1,11 +1,11 @@
-import c, { useState as h, useCallback as i } from "react";
+import s, { useState as h, useCallback as i } from "react";
 import "./index78.js";
 import { isElementVisible as p } from "./index226.js";
 const x = ({
   skipLinks: n,
-  className: r = ""
+  className: c = ""
 }) => {
-  const [s, u] = h(n), l = i(() => {
+  const [r, u] = h(n), l = i(() => {
     const t = n.filter((e) => {
       const o = document.getElementById(e.id);
       return p(o);
@@ -30,10 +30,10 @@ const x = ({
       });
     }
   }, []);
-  return n.length === 0 ? null : /* @__PURE__ */ c.createElement("div", {
-    className: `se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${r}`,
+  return n.length === 0 ? null : /* @__PURE__ */ s.createElement("div", {
+    className: `se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${c}`,
     onFocus: a
-  }, s.map((t) => /* @__PURE__ */ c.createElement("a", {
+  }, r.map((t) => /* @__PURE__ */ s.createElement("a", {
     key: t.id,
     href: `#${t.id}`,
     className: "absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-blue-500)] text-md py-1 px-2.5 rounded capitalize focus:static focus:left-auto focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:text-[var(--color-blue-600)] hover:bg-[var(--color-blue-200)]",
@@ -43,6 +43,7 @@ const x = ({
   }, t.label)));
 };
 export {
-  x as SkipLinksBar
+  x as SkipLinksBar,
+  x as default
 };
 //# sourceMappingURL=index7.js.map

package/dist/index71.js

@@ -142,6 +142,7 @@ const K = {
   }));
 };
 export {
-  ea as Paywall
+  ea as Paywall,
+  ea as default
 };
 //# sourceMappingURL=index71.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "1.1.0",
+  "version": "1.1.1-dev-01",
   "type": "module",
   "module": "dist/index.js",
   "exports": {