se-design 1.0.76 → 1.0.77-dev-v1

package/dist/index65.js

@@ -1,8 +1,8 @@
 import a from "react";
-import { Button as E } from "./index4.js";
+import { Button as f } from "./index4.js";
 import { Badge as j } from "./index10.js";
 import { Icon as q } from "./index6.js";
-import { Link as f } from "./index64.js";
+import { Link as N } from "./index64.js";
 import { CustomModal as G } from "./index13.js";
 import { useStableId as J } from "./index199.js";
 /* empty css         */
@@ -16,21 +16,21 @@ const K = {
     height: "384px"
   }
 }, ea = ({
-  isOpen: N,
+  isOpen: u,
   onClose: n,
   trigger: c,
-  modalWidth: u,
-  modalHeight: b,
-  variant: g,
+  modalWidth: b,
+  modalHeight: g,
+  variant: x,
   size: t = "lg",
-  availabilityLabel: x = "Available on ",
-  availabilityBadgeText: k,
+  availabilityLabel: k = "Available on ",
+  availabilityBadgeText: r,
   title: C,
   description: v,
-  learnMoreLinkText: r,
+  learnMoreLinkText: o,
   learnMoreHref: l,
-  onLearnMoreClick: o,
-  featureListDesc: s,
+  onLearnMoreClick: s,
+  featureListDesc: m,
   featuresList: I = [],
   featureItemIcon: L,
   mediaContent: S,
@@ -39,13 +39,13 @@ const K = {
   onLaterClick: F,
   onPurchaseClick: P,
   className: $ = "",
-  modalContentClassName: B = "",
+  modalContentClassName: D = "",
   automationId: i = "",
-  id: D
+  id: z
 }) => {
-  const m = J(D, "paywall-title"), z = () => {
+  const p = J(z, "paywall-title"), B = () => {
     F?.(), n();
-  }, p = K[t], O = u ?? p.width, d = b ?? p.height, y = g === "with-points" && t === "lg", w = I.map((e) => typeof e == "string" ? {
+  }, d = K[t], O = b ?? d.width, w = g ?? d.height, y = x === "with-points" && t === "lg", h = I.map((e) => typeof e == "string" ? {
     text: e
   } : {
     text: e.text,
@@ -53,7 +53,7 @@ const K = {
     href: e.href,
     external: e.external,
     onLinkClick: e.onLinkClick
-  }), R = y && w.length > 0, W = L ?? /* @__PURE__ */ a.createElement(q, {
+  }), R = y && h.length > 0, W = L ?? /* @__PURE__ */ a.createElement(q, {
     name: "info",
     rotation: "180"
   }), Y = /* @__PURE__ */ a.createElement("section", {
@@ -63,54 +63,54 @@ const K = {
     className: "paywall-card"
   }, /* @__PURE__ */ a.createElement("div", {
     className: "paywall-card-content"
-  }, /* @__PURE__ */ a.createElement("span", {
+  }, r && /* @__PURE__ */ a.createElement("span", {
     className: "paywall-card-availability"
   }, /* @__PURE__ */ a.createElement("span", {
     className: "paywall-card-availability-label"
-  }, x), /* @__PURE__ */ a.createElement(j, {
-    label: k,
+  }, k), /* @__PURE__ */ a.createElement(j, {
+    label: r,
     className: "paywall-card-badge",
     bgColor: "var(--color-yellow-100)",
     textColor: "var(--color-yellow-700)"
   })), /* @__PURE__ */ a.createElement("h3", {
-    id: m,
+    id: p,
     className: "paywall-card-title"
   }, C), /* @__PURE__ */ a.createElement("p", {
     className: "paywall-card-description"
-  }, v, r && (l || o) && /* @__PURE__ */ a.createElement(f, {
+  }, v, o && (l || s) && /* @__PURE__ */ a.createElement(N, {
     href: l ?? "#",
-    label: r,
+    label: o,
     external: !!l,
     className: "paywall-card-learn-more",
     onClick: (e) => {
-      l || e.preventDefault(), o?.(e);
+      l || e.preventDefault(), s?.(e);
     }
-  })), y && s && /* @__PURE__ */ a.createElement("p", {
+  })), y && m && /* @__PURE__ */ a.createElement("p", {
     className: "paywall-card-features-intro"
-  }, s), R && /* @__PURE__ */ a.createElement("ul", {
+  }, m), R && /* @__PURE__ */ a.createElement("ul", {
     className: "paywall-card-features-list"
-  }, w.map((e) => /* @__PURE__ */ a.createElement("li", {
+  }, h.map((e) => /* @__PURE__ */ a.createElement("li", {
     key: e.text,
     className: "paywall-card-feature-item"
   }, /* @__PURE__ */ a.createElement("span", {
     className: "paywall-card-feature-icon",
     "aria-hidden": !0
-  }, e.icon ?? W), /* @__PURE__ */ a.createElement("span", null, e.href || e.onLinkClick ? /* @__PURE__ */ a.createElement(f, {
+  }, e.icon ?? W), /* @__PURE__ */ a.createElement("span", null, e.href || e.onLinkClick ? /* @__PURE__ */ a.createElement(N, {
     href: e.href ?? "#",
     label: e.text,
     external: e.external,
-    onClick: (h) => {
-      e.href || h.preventDefault(), e.onLinkClick?.(h);
+    onClick: (E) => {
+      e.href || E.preventDefault(), e.onLinkClick?.(E);
     }
   }) : e.text)))), /* @__PURE__ */ a.createElement("div", {
     className: "paywall-card-actions"
-  }, /* @__PURE__ */ a.createElement(E, {
+  }, /* @__PURE__ */ a.createElement(f, {
     type: "ghost",
     size: "md",
     label: _,
-    onClick: z,
+    onClick: B,
     className: "paywall-card-btn-later"
-  }), /* @__PURE__ */ a.createElement(E, {
+  }), /* @__PURE__ */ a.createElement(f, {
     type: "primary",
     size: "md",
     label: A,
@@ -121,17 +121,17 @@ const K = {
   }, S))), Z = /* @__PURE__ */ a.createElement("div", {
     role: "dialog",
     "aria-modal": "true",
-    "aria-labelledby": m,
-    className: `paywall-modal-content ${B}`,
+    "aria-labelledby": p,
+    className: `paywall-modal-content ${D}`,
     style: {
-      height: d,
-      minHeight: d
+      height: w,
+      minHeight: w
     }
   }, Y);
   return /* @__PURE__ */ a.createElement(a.Fragment, null, c && /* @__PURE__ */ a.createElement("span", {
     className: "paywall-trigger"
   }, c), /* @__PURE__ */ a.createElement(G, {
-    isOpen: N,
+    isOpen: u,
     onClose: n,
     onModalClick: () => {
     },
@@ -142,6 +142,7 @@ const K = {
   }));
 };
 export {
-  ea as Paywall
+  ea as Paywall,
+  ea as default
 };
 //# sourceMappingURL=index65.js.map

package/dist/index65.js.map

@@ -1 +1 @@
-{"version":3,"file":"index65.js","sources":["../src/components/Paywall/index.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { Button } from 'src/components/Button';\nimport { Badge } from 'src/components/Badge';\nimport { Icon } from 'src/components/Icon';\nimport { Link } from 'src/components/Link';\nimport { CustomModal } from 'src/components/CustomModal';\nimport { useStableId } from 'src/utils/useStableId';\nimport './style.scss';\n\n/** Variant: with bullet points list, or description only */\nexport type PaywallVariant = 'with-points' | 'description-only';\n\n/** Size: small (656×384) or large (768×500) – sets modal dimensions and media panel proportion */\nexport type PaywallSize = 'sm' | 'lg';\n\n/** Feature list item: plain string (uses default/list icon) or object with text, optional per-item icon, and optional link/action */\nexport type PaywallFeatureItem =\n  | string\n  | {\n      text: string;\n      icon?: ReactNode;\n      /** If provided, the feature text becomes a hyperlink navigating to this URL */\n      href?: string;\n      /** If true, opens the href in a new tab (only applicable when href is set) */\n      external?: boolean;\n      /** Click handler — use with href for analytics, or alone for SPA actions */\n      onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n    };\n\nconst PAYWALL_SIZE_DIMENSIONS: Record<PaywallSize, { width: string; height: string }> = {\n  lg: { width: '768px', height: '500px' },\n  sm: { width: '656px', height: '384px' },\n};\n\nexport interface PaywallProps {\n  isOpen: boolean;\n  onClose: () => void;\n  trigger?: ReactNode;\n  modalWidth?: string;\n  modalHeight?: string;\n  variant: PaywallVariant;\n  size?: PaywallSize;\n  availabilityLabel?: string;\n  availabilityBadgeText: string;\n  title: string;\n  description: string;\n  learnMoreLinkText?: string;\n  learnMoreHref?: string;\n  onLearnMoreClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n  featureListDesc?: string;\n  featuresList?: PaywallFeatureItem[];\n  featureItemIcon?: ReactNode;\n  mediaContent?: ReactNode;\n  laterButtonText: string;\n  purchaseButtonText: string;\n  onLaterClick?: () => void;\n  onPurchaseClick?: () => void;\n  className?: string;\n  modalContentClassName?: string;\n  automationId?: string;\n  id?: string;\n}\n\n/** Paywall – always shown in a modal. Pass isOpen/onClose and optionally a trigger. */\nexport const Paywall: FC<PaywallProps> = ({\n  isOpen,\n  onClose,\n  trigger,\n  modalWidth,\n  modalHeight,\n  variant,\n  size = 'lg',\n  availabilityLabel = 'Available on ',\n  availabilityBadgeText,\n  title,\n  description,\n  learnMoreLinkText,\n  learnMoreHref,\n  onLearnMoreClick,\n  featureListDesc,\n  featuresList = [],\n  featureItemIcon,\n  mediaContent,\n  laterButtonText,\n  purchaseButtonText,\n  onLaterClick,\n  onPurchaseClick,\n  className = '',\n  modalContentClassName = '',\n  automationId = '',\n  id: providedId,\n}) => {\n  const titleId = useStableId(providedId, 'paywall-title');\n\n  const handleLaterClick = () => {\n    onLaterClick?.();\n    onClose();\n  };\n\n  const dimensions = PAYWALL_SIZE_DIMENSIONS[size];\n  const width = modalWidth ?? dimensions.width;\n  const height = modalHeight ?? dimensions.height;\n\n  const withPoints = variant === 'with-points' && size === 'lg';\n  const normalizedFeatures = featuresList.map((item): { text: string; icon?: ReactNode; href?: string; external?: boolean; onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void } =>\n    typeof item === 'string'\n      ? { text: item }\n      : { text: item.text, icon: item.icon, href: item.href, external: item.external, onLinkClick: item.onLinkClick }\n  );\n  const showFeatures = withPoints && normalizedFeatures.length > 0;\n  const defaultIcon = featureItemIcon ?? <Icon name=\"info\" rotation='180'/>;\n\n  const content = (\n    <section\n      className={`paywall paywall-ctn paywall-ctn--${size} ${className}`}\n      data-automation-id={automationId}\n    >\n      <div className=\"paywall-card\">\n        <div className=\"paywall-card-content\">\n          <span className=\"paywall-card-availability\">\n            <span className=\"paywall-card-availability-label\">{availabilityLabel}</span>\n            <Badge\n              label={availabilityBadgeText}\n              className=\"paywall-card-badge\"\n              bgColor=\"var(--color-yellow-100)\"\n              textColor=\"var(--color-yellow-700)\"\n            />\n          </span>\n          <h3 id={titleId} className=\"paywall-card-title\">{title}</h3>\n          <p className=\"paywall-card-description\">\n            {description}\n            {learnMoreLinkText && (learnMoreHref || onLearnMoreClick) && (\n              <Link\n                href={learnMoreHref ?? '#'}\n                label={learnMoreLinkText}\n                external={!!learnMoreHref}\n                className=\"paywall-card-learn-more\"\n                onClick={(e) => { if (!learnMoreHref) { e.preventDefault(); } onLearnMoreClick?.(e); }}\n              />\n            )}\n          </p>\n          {withPoints && featureListDesc && (\n            <p className=\"paywall-card-features-intro\">{featureListDesc}</p>\n          )}\n          {showFeatures && (\n            <ul className=\"paywall-card-features-list\">\n              {normalizedFeatures.map((item) => (\n                <li key={item.text} className=\"paywall-card-feature-item\">\n                  <span className=\"paywall-card-feature-icon\" aria-hidden>\n                    {item.icon ?? defaultIcon}\n                  </span>\n                  <span>\n                    {item.href || item.onLinkClick ? (\n                      <Link\n                        href={item.href ?? '#'}\n                        label={item.text}\n                        external={item.external}\n                        onClick={(e) => { if (!item.href) { e.preventDefault(); } item.onLinkClick?.(e); }}\n                      />\n                    ) : (\n                      item.text\n                    )}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          )}\n          <div className=\"paywall-card-actions\">\n            <Button\n              type=\"ghost\"\n              size=\"md\"\n              label={laterButtonText}\n              onClick={handleLaterClick}\n              className=\"paywall-card-btn-later\"\n            />\n            <Button\n              type=\"primary\"\n              size=\"md\"\n              label={purchaseButtonText}\n              onClick={onPurchaseClick}\n              className=\"paywall-card-btn-purchase\"\n            />\n          </div>\n        </div>\n        <div className=\"paywall-card-media\">\n          {mediaContent}\n        </div>\n      </div>\n    </section>\n  );\n\n  const modalContent = (\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n      className={`paywall-modal-content ${modalContentClassName}`}\n      style={{ height, minHeight: height }}\n    >\n      {content}\n    </div>\n  );\n\n  return (\n    <>\n      {trigger && <span className=\"paywall-trigger\">{trigger}</span>}\n      <CustomModal\n        isOpen={isOpen}\n        onClose={onClose}\n        onModalClick={() => {}}\n        renderModalContent={() => modalContent}\n        width={width}\n        contentClassName=\"paywall-modal-content-wrapper\"\n        automationId={automationId}\n      />\n    </>\n  );\n};\n\nexport default Paywall;\n"],"names":["React__default","Button","Badge","Icon","Link","CustomModal","useStableId","PAYWALL_SIZE_DIMENSIONS","lg","width","height","sm","Paywall","isOpen","onClose","trigger","modalWidth","modalHeight","variant","size","availabilityLabel","availabilityBadgeText","title","description","learnMoreLinkText","learnMoreHref","onLearnMoreClick","featureListDesc","featuresList","featureItemIcon","mediaContent","laterButtonText","purchaseButtonText","onLaterClick","onPurchaseClick","className","modalContentClassName","automationId","id","providedId","titleId","handleLaterClick","dimensions","withPoints","normalizedFeatures","map","item","text","icon","href","external","onLinkClick","showFeatures","length","defaultIcon","React","createElement","name","rotation","content","label","bgColor","textColor","onClick","e","preventDefault","key","type","modalContent","role","style","minHeight","Fragment","onModalClick","renderModalContent","contentClassName"],"mappings":"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"}
+{"version":3,"file":"index65.js","sources":["../src/components/Paywall/index.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { Button } from 'src/components/Button';\nimport { Badge } from 'src/components/Badge';\nimport { Icon } from 'src/components/Icon';\nimport { Link } from 'src/components/Link';\nimport { CustomModal } from 'src/components/CustomModal';\nimport { useStableId } from 'src/utils/useStableId';\nimport './style.scss';\n\n/** Variant: with bullet points list, or description only */\nexport type PaywallVariant = 'with-points' | 'description-only';\n\n/** Size: small (656×384) or large (768×500) – sets modal dimensions and media panel proportion */\nexport type PaywallSize = 'sm' | 'lg';\n\n/** Feature list item: plain string (uses default/list icon) or object with text, optional per-item icon, and optional link/action */\nexport type PaywallFeatureItem =\n  | string\n  | {\n      text: string;\n      icon?: ReactNode;\n      /** If provided, the feature text becomes a hyperlink navigating to this URL */\n      href?: string;\n      /** If true, opens the href in a new tab (only applicable when href is set) */\n      external?: boolean;\n      /** Click handler — use with href for analytics, or alone for SPA actions */\n      onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n    };\n\nconst PAYWALL_SIZE_DIMENSIONS: Record<PaywallSize, { width: string; height: string }> = {\n  lg: { width: '768px', height: '500px' },\n  sm: { width: '656px', height: '384px' },\n};\n\nexport interface PaywallProps {\n  isOpen: boolean;\n  onClose: () => void;\n  trigger?: ReactNode;\n  modalWidth?: string;\n  modalHeight?: string;\n  variant: PaywallVariant;\n  size?: PaywallSize;\n  availabilityLabel?: string;\n  availabilityBadgeText?: string;\n  title: string;\n  description: string;\n  learnMoreLinkText?: string;\n  learnMoreHref?: string;\n  onLearnMoreClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n  featureListDesc?: string;\n  featuresList?: PaywallFeatureItem[];\n  featureItemIcon?: ReactNode;\n  mediaContent?: ReactNode;\n  laterButtonText: string;\n  purchaseButtonText: string;\n  onLaterClick?: () => void;\n  onPurchaseClick?: () => void;\n  className?: string;\n  modalContentClassName?: string;\n  automationId?: string;\n  id?: string;\n}\n\n/** Paywall – always shown in a modal. Pass isOpen/onClose and optionally a trigger. */\nexport const Paywall: FC<PaywallProps> = ({\n  isOpen,\n  onClose,\n  trigger,\n  modalWidth,\n  modalHeight,\n  variant,\n  size = 'lg',\n  availabilityLabel = 'Available on ',\n  availabilityBadgeText,\n  title,\n  description,\n  learnMoreLinkText,\n  learnMoreHref,\n  onLearnMoreClick,\n  featureListDesc,\n  featuresList = [],\n  featureItemIcon,\n  mediaContent,\n  laterButtonText,\n  purchaseButtonText,\n  onLaterClick,\n  onPurchaseClick,\n  className = '',\n  modalContentClassName = '',\n  automationId = '',\n  id: providedId,\n}) => {\n  const titleId = useStableId(providedId, 'paywall-title');\n\n  const handleLaterClick = () => {\n    onLaterClick?.();\n    onClose();\n  };\n\n  const dimensions = PAYWALL_SIZE_DIMENSIONS[size];\n  const width = modalWidth ?? dimensions.width;\n  const height = modalHeight ?? dimensions.height;\n\n  const withPoints = variant === 'with-points' && size === 'lg';\n  const normalizedFeatures = featuresList.map((item): { text: string; icon?: ReactNode; href?: string; external?: boolean; onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void } =>\n    typeof item === 'string'\n      ? { text: item }\n      : { text: item.text, icon: item.icon, href: item.href, external: item.external, onLinkClick: item.onLinkClick }\n  );\n  const showFeatures = withPoints && normalizedFeatures.length > 0;\n  const defaultIcon = featureItemIcon ?? <Icon name=\"info\" rotation='180'/>;\n\n  const content = (\n    <section\n      className={`paywall paywall-ctn paywall-ctn--${size} ${className}`}\n      data-automation-id={automationId}\n    >\n      <div className=\"paywall-card\">\n        <div className=\"paywall-card-content\">\n          {availabilityBadgeText && (\n            <span className=\"paywall-card-availability\">\n              <span className=\"paywall-card-availability-label\">{availabilityLabel}</span>\n              <Badge\n                label={availabilityBadgeText}\n                className=\"paywall-card-badge\"\n                bgColor=\"var(--color-yellow-100)\"\n                textColor=\"var(--color-yellow-700)\"\n              />\n            </span>\n          )}\n          <h3 id={titleId} className=\"paywall-card-title\">{title}</h3>\n          <p className=\"paywall-card-description\">\n            {description}\n            {learnMoreLinkText && (learnMoreHref || onLearnMoreClick) && (\n              <Link\n                href={learnMoreHref ?? '#'}\n                label={learnMoreLinkText}\n                external={!!learnMoreHref}\n                className=\"paywall-card-learn-more\"\n                onClick={(e) => { if (!learnMoreHref) { e.preventDefault(); } onLearnMoreClick?.(e); }}\n              />\n            )}\n          </p>\n          {withPoints && featureListDesc && (\n            <p className=\"paywall-card-features-intro\">{featureListDesc}</p>\n          )}\n          {showFeatures && (\n            <ul className=\"paywall-card-features-list\">\n              {normalizedFeatures.map((item) => (\n                <li key={item.text} className=\"paywall-card-feature-item\">\n                  <span className=\"paywall-card-feature-icon\" aria-hidden>\n                    {item.icon ?? defaultIcon}\n                  </span>\n                  <span>\n                    {item.href || item.onLinkClick ? (\n                      <Link\n                        href={item.href ?? '#'}\n                        label={item.text}\n                        external={item.external}\n                        onClick={(e) => { if (!item.href) { e.preventDefault(); } item.onLinkClick?.(e); }}\n                      />\n                    ) : (\n                      item.text\n                    )}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          )}\n          <div className=\"paywall-card-actions\">\n            <Button\n              type=\"ghost\"\n              size=\"md\"\n              label={laterButtonText}\n              onClick={handleLaterClick}\n              className=\"paywall-card-btn-later\"\n            />\n            <Button\n              type=\"primary\"\n              size=\"md\"\n              label={purchaseButtonText}\n              onClick={onPurchaseClick}\n              className=\"paywall-card-btn-purchase\"\n            />\n          </div>\n        </div>\n        <div className=\"paywall-card-media\">\n          {mediaContent}\n        </div>\n      </div>\n    </section>\n  );\n\n  const modalContent = (\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n      className={`paywall-modal-content ${modalContentClassName}`}\n      style={{ height, minHeight: height }}\n    >\n      {content}\n    </div>\n  );\n\n  return (\n    <>\n      {trigger && <span className=\"paywall-trigger\">{trigger}</span>}\n      <CustomModal\n        isOpen={isOpen}\n        onClose={onClose}\n        onModalClick={() => {}}\n        renderModalContent={() => modalContent}\n        width={width}\n        contentClassName=\"paywall-modal-content-wrapper\"\n        automationId={automationId}\n      />\n    </>\n  );\n};\n\nexport default Paywall;\n"],"names":["React__default","Button","Badge","Icon","Link","CustomModal","useStableId","PAYWALL_SIZE_DIMENSIONS","lg","width","height","sm","Paywall","isOpen","onClose","trigger","modalWidth","modalHeight","variant","size","availabilityLabel","availabilityBadgeText","title","description","learnMoreLinkText","learnMoreHref","onLearnMoreClick","featureListDesc","featuresList","featureItemIcon","mediaContent","laterButtonText","purchaseButtonText","onLaterClick","onPurchaseClick","className","modalContentClassName","automationId","id","providedId","titleId","handleLaterClick","dimensions","withPoints","normalizedFeatures","map","item","text","icon","href","external","onLinkClick","showFeatures","length","defaultIcon","React","createElement","name","rotation","content","label","bgColor","textColor","onClick","e","preventDefault","key","type","modalContent","role","style","minHeight","Fragment","onModalClick","renderModalContent","contentClassName"],"mappings":"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"}

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 "./index72.js";
 import { isElementVisible as p } from "./index198.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "1.0.76",
+  "version": "1.0.77-dev-v1",
   "type": "module",
   "module": "dist/index.js",
   "exports": {