@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/PastDue/pastDueMessages.js

@@ -1,48 +1,47 @@
-import _styled from "@emotion/styled/base";
-import { Anchor } from '@codecademy/gamut';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledAnchor = /*#__PURE__*/_styled(Anchor, {
-  target: "ej6f6si0",
-  label: "StyledAnchor"
-})(({
-  theme,
-  isAlert
-}) => isAlert ? `color: ${theme.colors.white}` : '', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QYXN0RHVlL3Bhc3REdWVNZXNzYWdlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXlEIiwiZmlsZSI6Ii4uLy4uL3NyYy9QYXN0RHVlL3Bhc3REdWVNZXNzYWdlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmNob3IgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmludGVyZmFjZSBQYXN0RHVlRXJyb3JNZXNzYWdlIHtcbiAgdGV4dDE6IHN0cmluZztcbiAgdGV4dDI6IHN0cmluZyB8IEpTWC5FbGVtZW50O1xufVxuXG5jb25zdCBTdHlsZWRBbmNob3IgPSBzdHlsZWQoQW5jaG9yKTx7IGlzQWxlcnQ6IGJvb2xlYW4gfT5gXG4gICR7KHsgdGhlbWUsIGlzQWxlcnQgfSkgPT4gKGlzQWxlcnQgPyBgY29sb3I6ICR7dGhlbWUuY29sb3JzLndoaXRlfWAgOiAnJyl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IHBhc3REdWVFcnJvck1lc3NhZ2VzID0gKFxuICBpc1NpbHZlclBsYW46IGJvb2xlYW4sXG4gIGlzQWxlcnQ6IGJvb2xlYW5cbik6IFJlY29yZDxzdHJpbmcsIFBhc3REdWVFcnJvck1lc3NhZ2U+ID0+ICh7XG4gIGluc3VmZmljaWVudF9mdW5kczoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IGRpZCBub3QgZ28gdGhyb3VnaCBkdWUgdG8gaW5zdWZmaWNpZW50IGZ1bmRzLmAsXG4gICAgdGV4dDI6IGBUbyBrZWVwIGxlYXJuaW5nIHdpdGggQ29kZWNhZGVteSAke1xuICAgICAgaXNTaWx2ZXJQbGFuID8gJ1BsdXMnIDogJ1BybydcbiAgICB9LCBwbGVhc2UgdXBkYXRlIHlvdXIgcGF5bWVudCBtZXRob2QuYCxcbiAgfSxcbiAgZGVjbGluZWQ6IHtcbiAgICB0ZXh0MTogYFlvdXIgcGF5bWVudCBkaWQgbm90IGdvIHRocm91Z2guIENvbnRhY3QgeW91ciBiYW5rIG9yIGNhcmQgaXNzdWVyIHRvIGZpbmQgb3V0IG1vcmUuYCxcbiAgICB0ZXh0MjogYFRvIGtlZXAgbGVhcm5pbmcgd2l0aCBDb2RlY2FkZW15ICR7XG4gICAgICBpc1NpbHZlclBsYW4gPyAnUGx1cycgOiAnUHJvJ1xuICAgIH0sIHBsZWFzZSB1cGRhdGUgeW91ciBwYXltZW50IG1ldGhvZC5gLFxuICB9LFxuICB0ZW1wb3JhcnlfaG9sZDoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IG1ldGhvZCB3YXMgcGxhY2VkIG9uIGEgdGVtcG9yYXJ5IGhvbGQuIENvbnRhY3QgeW91ciBiYW5rIG9yIGNhcmQgaXNzdWVyIHRvIGZpbmQgb3V0IG1vcmUuYCxcbiAgICB0ZXh0MjogYFRvIGtlZXAgbGVhcm5pbmcgd2l0aCBDb2RlY2FkZW15ICR7XG4gICAgICBpc1NpbHZlclBsYW4gPyAnUGx1cycgOiAnUHJvJ1xuICAgIH0sIHBsZWFzZSB1cGRhdGUgeW91ciBwYXltZW50IG1ldGhvZC5gLFxuICB9LFxuICBpbnZhbGlkX3RyYW5zYWN0aW9uOiB7XG4gICAgdGV4dDE6IGBZb3VyIHBheW1lbnQgZGlkIG5vdCBnbyB0aHJvdWdoLiBDb250YWN0IHlvdXIgYmFuayBvciBjYXJkIGlzc3VlciB0byBmaW5kIG91dCBtb3JlIGFib3V0IHBvc3NpYmxlIHRyYW5zYWN0aW9uIHJlc3RyaWN0aW9ucy5gLFxuICAgIHRleHQyOiBgVG8ga2VlcCBsZWFybmluZyB3aXRoIENvZGVjYWRlbXkgJHtcbiAgICAgIGlzU2lsdmVyUGxhbiA/ICdQbHVzJyA6ICdQcm8nXG4gICAgfSwgcGxlYXNlIHVwZGF0ZSB5b3VyIHBheW1lbnQgbWV0aG9kLmAsXG4gIH0sXG4gIGludmFsaWRfYWNjb3VudF9udW1iZXI6IHtcbiAgICB0ZXh0MTogYFlvdXIgcGF5bWVudCBkaWQgbm90IGdvIHRocm91Z2ggYmVjYXVzZSB5b3VyIGNhcmQgZGV0YWlscyBtYXkgYmUgaW5jb3JyZWN0LmAsXG4gICAgdGV4dDI6IGBUbyBrZWVwIGxlYXJuaW5nIHdpdGggQ29kZWNhZGVteSAke1xuICAgICAgaXNTaWx2ZXJQbGFuID8gJ1BsdXMnIDogJ1BybydcbiAgICB9LCBwbGVhc2UgdXBkYXRlIHlvdXIgY2FyZCBkZXRhaWxzIG9yIHBheW1lbnQgbWV0aG9kLmAsXG4gIH0sXG4gIGV4cGlyZWRfY2FyZDoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IGRpZCBub3QgZ28gdGhyb3VnaCBiZWNhdXNlIHlvdXIgY2FyZCBpcyBleHBpcmVkLmAsXG4gICAgdGV4dDI6IGBUbyBrZWVwIGxlYXJuaW5nIHdpdGggQ29kZWNhZGVteSAke1xuICAgICAgaXNTaWx2ZXJQbGFuID8gJ1BsdXMnIDogJ1BybydcbiAgICB9LCBwbGVhc2UgdXBkYXRlIHlvdXIgcGF5bWVudCBtZXRob2QuYCxcbiAgfSxcbiAgZGVmYXVsdDoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IGRpZCBub3QgZ28gdGhyb3VnaC4gVG8ga2VlcCBsZWFybmluZyB3aXRoIENvZGVjYWRlbXkgJHtcbiAgICAgIGlzU2lsdmVyUGxhbiA/ICdQbHVzJyA6ICdQcm8nXG4gICAgfSwgcGxlYXNlIHVwZGF0ZSB5b3VyIHBheW1lbnQgbWV0aG9kLmAsXG4gICAgdGV4dDI6IChcbiAgICAgIDw+XG4gICAgICAgIExldCBvdXJ7JyAnfVxuICAgICAgICA8U3R5bGVkQW5jaG9yXG4gICAgICAgICAgaHJlZj1cImh0dHBzOi8vaGVscC5jb2RlY2FkZW15LmNvbS9oYy9lbi11c1wiXG4gICAgICAgICAgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgICByZWw9XCJub3JlZmVycmVyXCJcbiAgICAgICAgICBpc0FsZXJ0PXtpc0FsZXJ0fVxuICAgICAgICA+XG4gICAgICAgICAgY3VzdG9tZXIgc3VwcG9ydFxuICAgICAgICA8L1N0eWxlZEFuY2hvcj57JyAnfVxuICAgICAgICB0ZWFtIGtub3cgaWYgeW91IGhhdmUgZnVydGhlciBxdWVzdGlvbnMuXG4gICAgICA8Lz5cbiAgICApLFxuICB9LFxufSk7XG4iXX0= */"));
-export const pastDueErrorMessages = (isSilverPlan, isAlert) => ({
-  insufficient_funds: {
-    text1: `Your payment did not go through due to insufficient funds.`,
-    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`
-  },
-  declined: {
-    text1: `Your payment did not go through. Contact your bank or card issuer to find out more.`,
-    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`
-  },
-  temporary_hold: {
-    text1: `Your payment method was placed on a temporary hold. Contact your bank or card issuer to find out more.`,
-    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`
-  },
-  invalid_transaction: {
-    text1: `Your payment did not go through. Contact your bank or card issuer to find out more about possible transaction restrictions.`,
-    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`
-  },
-  invalid_account_number: {
-    text1: `Your payment did not go through because your card details may be incorrect.`,
-    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your card details or payment method.`
-  },
-  expired_card: {
-    text1: `Your payment did not go through because your card is expired.`,
-    text2: `To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`
-  },
-  default: {
-    text1: `Your payment did not go through. To keep learning with Codecademy ${isSilverPlan ? 'Plus' : 'Pro'}, please update your payment method.`,
-    text2: /*#__PURE__*/_jsxs(_Fragment, {
-      children: ["Let our", ' ', /*#__PURE__*/_jsx(StyledAnchor, {
-        href: "https://help.codecademy.com/hc/en-us",
-        target: "_blank",
-        rel: "noreferrer",
-        isAlert: isAlert,
-        children: "customer support"
-      }), ' ', "team know if you have further questions."]
-    })
-  }
-});
+import { Anchor } from "@codecademy/gamut";
+import styled from "@emotion/styled";
+
+//#region src/PastDue/pastDueMessages.tsx
+const StyledAnchor = /* @__PURE__ */ styled(Anchor, {
+	target: "e192anko0",
+	label: "brand-StyledAnchor"
+})(({ theme, isAlert }) => isAlert ? `color: ${theme.colors.white}` : "", ";", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1Bhc3REdWUvcGFzdER1ZU1lc3NhZ2VzLnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1Bhc3REdWUvcGFzdER1ZU1lc3NhZ2VzLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmNob3IgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmludGVyZmFjZSBQYXN0RHVlRXJyb3JNZXNzYWdlIHtcbiAgdGV4dDE6IHN0cmluZztcbiAgdGV4dDI6IHN0cmluZyB8IEpTWC5FbGVtZW50O1xufVxuXG5jb25zdCBTdHlsZWRBbmNob3IgPSBzdHlsZWQoQW5jaG9yKTx7IGlzQWxlcnQ6IGJvb2xlYW4gfT5gXG4gICR7KHsgdGhlbWUsIGlzQWxlcnQgfSkgPT4gKGlzQWxlcnQgPyBgY29sb3I6ICR7dGhlbWUuY29sb3JzLndoaXRlfWAgOiAnJyl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IHBhc3REdWVFcnJvck1lc3NhZ2VzID0gKFxuICBpc1NpbHZlclBsYW46IGJvb2xlYW4sXG4gIGlzQWxlcnQ6IGJvb2xlYW5cbik6IFJlY29yZDxzdHJpbmcsIFBhc3REdWVFcnJvck1lc3NhZ2U+ID0+ICh7XG4gIGluc3VmZmljaWVudF9mdW5kczoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IGRpZCBub3QgZ28gdGhyb3VnaCBkdWUgdG8gaW5zdWZmaWNpZW50IGZ1bmRzLmAsXG4gICAgdGV4dDI6IGBUbyBrZWVwIGxlYXJuaW5nIHdpdGggQ29kZWNhZGVteSAke1xuICAgICAgaXNTaWx2ZXJQbGFuID8gJ1BsdXMnIDogJ1BybydcbiAgICB9LCBwbGVhc2UgdXBkYXRlIHlvdXIgcGF5bWVudCBtZXRob2QuYCxcbiAgfSxcbiAgZGVjbGluZWQ6IHtcbiAgICB0ZXh0MTogYFlvdXIgcGF5bWVudCBkaWQgbm90IGdvIHRocm91Z2guIENvbnRhY3QgeW91ciBiYW5rIG9yIGNhcmQgaXNzdWVyIHRvIGZpbmQgb3V0IG1vcmUuYCxcbiAgICB0ZXh0MjogYFRvIGtlZXAgbGVhcm5pbmcgd2l0aCBDb2RlY2FkZW15ICR7XG4gICAgICBpc1NpbHZlclBsYW4gPyAnUGx1cycgOiAnUHJvJ1xuICAgIH0sIHBsZWFzZSB1cGRhdGUgeW91ciBwYXltZW50IG1ldGhvZC5gLFxuICB9LFxuICB0ZW1wb3JhcnlfaG9sZDoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IG1ldGhvZCB3YXMgcGxhY2VkIG9uIGEgdGVtcG9yYXJ5IGhvbGQuIENvbnRhY3QgeW91ciBiYW5rIG9yIGNhcmQgaXNzdWVyIHRvIGZpbmQgb3V0IG1vcmUuYCxcbiAgICB0ZXh0MjogYFRvIGtlZXAgbGVhcm5pbmcgd2l0aCBDb2RlY2FkZW15ICR7XG4gICAgICBpc1NpbHZlclBsYW4gPyAnUGx1cycgOiAnUHJvJ1xuICAgIH0sIHBsZWFzZSB1cGRhdGUgeW91ciBwYXltZW50IG1ldGhvZC5gLFxuICB9LFxuICBpbnZhbGlkX3RyYW5zYWN0aW9uOiB7XG4gICAgdGV4dDE6IGBZb3VyIHBheW1lbnQgZGlkIG5vdCBnbyB0aHJvdWdoLiBDb250YWN0IHlvdXIgYmFuayBvciBjYXJkIGlzc3VlciB0byBmaW5kIG91dCBtb3JlIGFib3V0IHBvc3NpYmxlIHRyYW5zYWN0aW9uIHJlc3RyaWN0aW9ucy5gLFxuICAgIHRleHQyOiBgVG8ga2VlcCBsZWFybmluZyB3aXRoIENvZGVjYWRlbXkgJHtcbiAgICAgIGlzU2lsdmVyUGxhbiA/ICdQbHVzJyA6ICdQcm8nXG4gICAgfSwgcGxlYXNlIHVwZGF0ZSB5b3VyIHBheW1lbnQgbWV0aG9kLmAsXG4gIH0sXG4gIGludmFsaWRfYWNjb3VudF9udW1iZXI6IHtcbiAgICB0ZXh0MTogYFlvdXIgcGF5bWVudCBkaWQgbm90IGdvIHRocm91Z2ggYmVjYXVzZSB5b3VyIGNhcmQgZGV0YWlscyBtYXkgYmUgaW5jb3JyZWN0LmAsXG4gICAgdGV4dDI6IGBUbyBrZWVwIGxlYXJuaW5nIHdpdGggQ29kZWNhZGVteSAke1xuICAgICAgaXNTaWx2ZXJQbGFuID8gJ1BsdXMnIDogJ1BybydcbiAgICB9LCBwbGVhc2UgdXBkYXRlIHlvdXIgY2FyZCBkZXRhaWxzIG9yIHBheW1lbnQgbWV0aG9kLmAsXG4gIH0sXG4gIGV4cGlyZWRfY2FyZDoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IGRpZCBub3QgZ28gdGhyb3VnaCBiZWNhdXNlIHlvdXIgY2FyZCBpcyBleHBpcmVkLmAsXG4gICAgdGV4dDI6IGBUbyBrZWVwIGxlYXJuaW5nIHdpdGggQ29kZWNhZGVteSAke1xuICAgICAgaXNTaWx2ZXJQbGFuID8gJ1BsdXMnIDogJ1BybydcbiAgICB9LCBwbGVhc2UgdXBkYXRlIHlvdXIgcGF5bWVudCBtZXRob2QuYCxcbiAgfSxcbiAgZGVmYXVsdDoge1xuICAgIHRleHQxOiBgWW91ciBwYXltZW50IGRpZCBub3QgZ28gdGhyb3VnaC4gVG8ga2VlcCBsZWFybmluZyB3aXRoIENvZGVjYWRlbXkgJHtcbiAgICAgIGlzU2lsdmVyUGxhbiA/ICdQbHVzJyA6ICdQcm8nXG4gICAgfSwgcGxlYXNlIHVwZGF0ZSB5b3VyIHBheW1lbnQgbWV0aG9kLmAsXG4gICAgdGV4dDI6IChcbiAgICAgIDw+XG4gICAgICAgIExldCBvdXJ7JyAnfVxuICAgICAgICA8U3R5bGVkQW5jaG9yXG4gICAgICAgICAgaHJlZj1cImh0dHBzOi8vaGVscC5jb2RlY2FkZW15LmNvbS9oYy9lbi11c1wiXG4gICAgICAgICAgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgICAgICByZWw9XCJub3JlZmVycmVyXCJcbiAgICAgICAgICBpc0FsZXJ0PXtpc0FsZXJ0fVxuICAgICAgICA+XG4gICAgICAgICAgY3VzdG9tZXIgc3VwcG9ydFxuICAgICAgICA8L1N0eWxlZEFuY2hvcj57JyAnfVxuICAgICAgICB0ZWFtIGtub3cgaWYgeW91IGhhdmUgZnVydGhlciBxdWVzdGlvbnMuXG4gICAgICA8Lz5cbiAgICApLFxuICB9LFxufSk7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXFCIn0= */");
+const pastDueErrorMessages = (isSilverPlan, isAlert) => ({
+	insufficient_funds: {
+		text1: `Your payment did not go through due to insufficient funds.`,
+		text2: `To keep learning with Codecademy ${isSilverPlan ? "Plus" : "Pro"}, please update your payment method.`
+	},
+	declined: {
+		text1: `Your payment did not go through. Contact your bank or card issuer to find out more.`,
+		text2: `To keep learning with Codecademy ${isSilverPlan ? "Plus" : "Pro"}, please update your payment method.`
+	},
+	temporary_hold: {
+		text1: `Your payment method was placed on a temporary hold. Contact your bank or card issuer to find out more.`,
+		text2: `To keep learning with Codecademy ${isSilverPlan ? "Plus" : "Pro"}, please update your payment method.`
+	},
+	invalid_transaction: {
+		text1: `Your payment did not go through. Contact your bank or card issuer to find out more about possible transaction restrictions.`,
+		text2: `To keep learning with Codecademy ${isSilverPlan ? "Plus" : "Pro"}, please update your payment method.`
+	},
+	invalid_account_number: {
+		text1: `Your payment did not go through because your card details may be incorrect.`,
+		text2: `To keep learning with Codecademy ${isSilverPlan ? "Plus" : "Pro"}, please update your card details or payment method.`
+	},
+	expired_card: {
+		text1: `Your payment did not go through because your card is expired.`,
+		text2: `To keep learning with Codecademy ${isSilverPlan ? "Plus" : "Pro"}, please update your payment method.`
+	},
+	default: {
+		text1: `Your payment did not go through. To keep learning with Codecademy ${isSilverPlan ? "Plus" : "Pro"}, please update your payment method.`,
+		text2: /* @__PURE__ */ React.createElement(React.Fragment, null, "Let our", " ", /* @__PURE__ */ React.createElement(StyledAnchor, {
+			href: "https://help.codecademy.com/hc/en-us",
+			target: "_blank",
+			rel: "noreferrer",
+			isAlert
+		}, "customer support"), " ", "team know if you have further questions.")
+	}
+});
+
+//#endregion
+export { pastDueErrorMessages };
+//# sourceMappingURL=pastDueMessages.js.map

package/dist/PastDue/pastDueMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pastDueMessages.js","names":["Anchor","styled","StyledAnchor","theme","isAlert","colors","white","pastDueErrorMessages","isSilverPlan","insufficient_funds","text1","text2","declined","temporary_hold","invalid_transaction","invalid_account_number","expired_card","default","href","target","rel"],"sources":["../../src/PastDue/pastDueMessages.tsx"],"sourcesContent":["import { Anchor } from '@codecademy/gamut';\nimport styled from '@emotion/styled';\n\ninterface PastDueErrorMessage {\n  text1: string;\n  text2: string | JSX.Element;\n}\n\nconst StyledAnchor = styled(Anchor)<{ isAlert: boolean }>`\n  ${({ theme, isAlert }) => (isAlert ? `color: ${theme.colors.white}` : '')};\n`;\n\nexport const pastDueErrorMessages = (\n  isSilverPlan: boolean,\n  isAlert: boolean\n): Record<string, PastDueErrorMessage> => ({\n  insufficient_funds: {\n    text1: `Your payment did not go through due to insufficient funds.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n  },\n  declined: {\n    text1: `Your payment did not go through. Contact your bank or card issuer to find out more.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n  },\n  temporary_hold: {\n    text1: `Your payment method was placed on a temporary hold. Contact your bank or card issuer to find out more.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n  },\n  invalid_transaction: {\n    text1: `Your payment did not go through. Contact your bank or card issuer to find out more about possible transaction restrictions.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n  },\n  invalid_account_number: {\n    text1: `Your payment did not go through because your card details may be incorrect.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your card details or payment method.`,\n  },\n  expired_card: {\n    text1: `Your payment did not go through because your card is expired.`,\n    text2: `To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n  },\n  default: {\n    text1: `Your payment did not go through. To keep learning with Codecademy ${\n      isSilverPlan ? 'Plus' : 'Pro'\n    }, please update your payment method.`,\n    text2: (\n      <>\n        Let our{' '}\n        <StyledAnchor\n          href=\"https://help.codecademy.com/hc/en-us\"\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          isAlert={isAlert}\n        >\n          customer support\n        </StyledAnchor>{' '}\n        team know if you have further questions.\n      </>\n    ),\n  },\n});\n"],"mappings":";;;;AAQA,MAAME,eAAeD,uBAAOD,QAAAA;;;IACvB,EAAEG,OAAOC,cAAeA,UAAU,UAAUD,MAAME,OAAOC,UAAU,IAAA,KAAA,0tHAAA;AAGxE,MAAaC,wBACXC,cACAJ,aACyC;CACzCK,oBAAoB;EAClBC,OAAO;EACPC,OAAO,oCACLH,eAAe,SAAS,MACzB;EACH;CACAI,UAAU;EACRF,OAAO;EACPC,OAAO,oCACLH,eAAe,SAAS,MACzB;EACH;CACAK,gBAAgB;EACdH,OAAO;EACPC,OAAO,oCACLH,eAAe,SAAS,MACzB;EACH;CACAM,qBAAqB;EACnBJ,OAAO;EACPC,OAAO,oCACLH,eAAe,SAAS,MACzB;EACH;CACAO,wBAAwB;EACtBL,OAAO;EACPC,OAAO,oCACLH,eAAe,SAAS,MACzB;EACH;CACAQ,cAAc;EACZN,OAAO;EACPC,OAAO,oCACLH,eAAe,SAAS,MACzB;EACH;CACAS,SAAS;EACPP,OAAO,qEACLF,eAAe,SAAS,MACzB;EACDG,OACE,sBAAA,cAAA,MAAA,UAAA,MAAE,WACQ,KACR,sBAAA,cAACT,cAAAA;GACCgB,MAAK;GACLC,QAAO;GACPC,KAAI;GACKhB;KACV,mBAAA,EAEe,KAAI,2CAAA;EAI1B;CACF"}

package/dist/PausableImage/BaseImage/index.cjs

@@ -0,0 +1,55 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../index.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+let react_freezeframe = require("react-freezeframe");
+react_freezeframe = require_runtime.__toESM(react_freezeframe);
+
+//#region src/PausableImage/BaseImage/index.tsx
+const Container = /* @__PURE__ */ (0, _emotion_styled.default)("div", {
+	target: "e6na4ca0",
+	label: "brand-Container"
+})("align-items:center;justify-content:center;height:100%;display:flex;position:relative;width:100%;> img,> .react-freezeframe,> .react-freezeframe img{max-width:100%;}.ff-container .ff-canvas{transition:none;}.ff-loading-icon::before{display:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhdXNhYmxlSW1hZ2UvQmFzZUltYWdlL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhdXNhYmxlSW1hZ2UvQmFzZUltYWdlL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGaWxsQnV0dG9uLCBIaWRkZW5UZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgUGF1c2VJY29uLCBQbGF5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IEZyZWV6ZWZyYW1lIGZyb20gJ3JlYWN0LWZyZWV6ZWZyYW1lJztcblxuaW1wb3J0IHsgaW1hZ2VTdHlsZXMgfSBmcm9tICcuLic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQmFzZUltYWdlUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMDAlO1xuXG4gID4gaW1nLFxuICA+IC5yZWFjdC1mcmVlemVmcmFtZSxcbiAgPiAucmVhY3QtZnJlZXplZnJhbWUgaW1nIHtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gIH1cbiAgLmZmLWNvbnRhaW5lciAuZmYtY2FudmFzIHtcbiAgICB0cmFuc2l0aW9uOiBub25lO1xuICB9XG4gIC5mZi1sb2FkaW5nLWljb246OmJlZm9yZSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFBsYXlpbmdJbWFnZSA9IGltYWdlU3R5bGVzO1xuXG5jb25zdCBTdHlsZWRGcmVlemVmcmFtZSA9IHN0eWxlZChGcmVlemVmcmFtZSkoaW1hZ2VTdHlsZXMpO1xuXG5leHBvcnQgY29uc3QgQmFzZUltYWdlOiBSZWFjdC5GQzxCYXNlSW1hZ2VQcm9wcz4gPSAoeyBhbHQsIC4uLnJlc3QgfSkgPT4ge1xuICBjb25zdCBbcGF1c2VkLCBzZXRQYXVzZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IFtsaXZlVGV4dCwgYnV0dG9uTGFiZWwsIEljb24sIEltYWdlXSA9IHBhdXNlZFxuICAgID8gW2Ake2FsdH0sIHBhdXNlZGAsICdQbGF5IGFuaW1hdGVkIGltYWdlJywgUGxheUljb24sIFN0eWxlZEZyZWV6ZWZyYW1lXVxuICAgIDogW2Ake2FsdH0sIHBsYXlpbmdgLCAnUGF1c2UgYW5pbWF0ZWQgaW1hZ2UnLCBQYXVzZUljb24sIFBsYXlpbmdJbWFnZV07XG5cbiAgcmV0dXJuIChcbiAgICA8Q29udGFpbmVyPlxuICAgICAgPEltYWdlIGFsdD17YWx0fSB7Li4ucmVzdH0gLz5cbiAgICAgIHsvKiBlbnN1cmUgcHJvcGVyIGZhbGwgYmFjayBsYWJlbCBpZiBhbiBlbXB0eSBzdHJpbmcgaXMgZ2l2ZW4gYXMgYWx0ICovfVxuICAgICAgPEhpZGRlblRleHQgYXJpYS1saXZlPVwicG9saXRlXCI+e2FsdCA/IGxpdmVUZXh0IDogYnV0dG9uTGFiZWx9PC9IaWRkZW5UZXh0PlxuICAgICAgPEZpbGxCdXR0b25cbiAgICAgICAgYm90dG9tPXswfVxuICAgICAgICBtPXs4fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBzZXRQYXVzZWQoIXBhdXNlZCl9XG4gICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICByaWdodD17MH1cbiAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgIHpJbmRleD17MX1cbiAgICAgICAgYXJpYS1sYWJlbD17YnV0dG9uTGFiZWx9XG4gICAgICA+XG4gICAgICAgIDxJY29uIGNvbG9yPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDwvRmlsbEJ1dHRvbj5cbiAgICA8L0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEJhc2VJbWFnZTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjeUIifQ== */");
+const PlayingImage = require_index.imageStyles;
+const StyledFreezeframe = /* @__PURE__ */ (0, _emotion_styled.default)(react_freezeframe.default, {
+	target: "e6na4ca1",
+	label: "brand-StyledFreezeframe"
+})(require_index.imageStyles, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhdXNhYmxlSW1hZ2UvQmFzZUltYWdlL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhdXNhYmxlSW1hZ2UvQmFzZUltYWdlL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGaWxsQnV0dG9uLCBIaWRkZW5UZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgUGF1c2VJY29uLCBQbGF5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IEZyZWV6ZWZyYW1lIGZyb20gJ3JlYWN0LWZyZWV6ZWZyYW1lJztcblxuaW1wb3J0IHsgaW1hZ2VTdHlsZXMgfSBmcm9tICcuLic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQmFzZUltYWdlUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMDAlO1xuXG4gID4gaW1nLFxuICA+IC5yZWFjdC1mcmVlemVmcmFtZSxcbiAgPiAucmVhY3QtZnJlZXplZnJhbWUgaW1nIHtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gIH1cbiAgLmZmLWNvbnRhaW5lciAuZmYtY2FudmFzIHtcbiAgICB0cmFuc2l0aW9uOiBub25lO1xuICB9XG4gIC5mZi1sb2FkaW5nLWljb246OmJlZm9yZSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFBsYXlpbmdJbWFnZSA9IGltYWdlU3R5bGVzO1xuXG5jb25zdCBTdHlsZWRGcmVlemVmcmFtZSA9IHN0eWxlZChGcmVlemVmcmFtZSkoaW1hZ2VTdHlsZXMpO1xuXG5leHBvcnQgY29uc3QgQmFzZUltYWdlOiBSZWFjdC5GQzxCYXNlSW1hZ2VQcm9wcz4gPSAoeyBhbHQsIC4uLnJlc3QgfSkgPT4ge1xuICBjb25zdCBbcGF1c2VkLCBzZXRQYXVzZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IFtsaXZlVGV4dCwgYnV0dG9uTGFiZWwsIEljb24sIEltYWdlXSA9IHBhdXNlZFxuICAgID8gW2Ake2FsdH0sIHBhdXNlZGAsICdQbGF5IGFuaW1hdGVkIGltYWdlJywgUGxheUljb24sIFN0eWxlZEZyZWV6ZWZyYW1lXVxuICAgIDogW2Ake2FsdH0sIHBsYXlpbmdgLCAnUGF1c2UgYW5pbWF0ZWQgaW1hZ2UnLCBQYXVzZUljb24sIFBsYXlpbmdJbWFnZV07XG5cbiAgcmV0dXJuIChcbiAgICA8Q29udGFpbmVyPlxuICAgICAgPEltYWdlIGFsdD17YWx0fSB7Li4ucmVzdH0gLz5cbiAgICAgIHsvKiBlbnN1cmUgcHJvcGVyIGZhbGwgYmFjayBsYWJlbCBpZiBhbiBlbXB0eSBzdHJpbmcgaXMgZ2l2ZW4gYXMgYWx0ICovfVxuICAgICAgPEhpZGRlblRleHQgYXJpYS1saXZlPVwicG9saXRlXCI+e2FsdCA/IGxpdmVUZXh0IDogYnV0dG9uTGFiZWx9PC9IaWRkZW5UZXh0PlxuICAgICAgPEZpbGxCdXR0b25cbiAgICAgICAgYm90dG9tPXswfVxuICAgICAgICBtPXs4fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBzZXRQYXVzZWQoIXBhdXNlZCl9XG4gICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICByaWdodD17MH1cbiAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgIHpJbmRleD17MX1cbiAgICAgICAgYXJpYS1sYWJlbD17YnV0dG9uTGFiZWx9XG4gICAgICA+XG4gICAgICAgIDxJY29uIGNvbG9yPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDwvRmlsbEJ1dHRvbj5cbiAgICA8L0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEJhc2VJbWFnZTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQzBCIn0= */");
+const BaseImage = ({ alt, ...rest }) => {
+	const [paused, setPaused] = (0, react.useState)(false);
+	const [liveText, buttonLabel, Icon, Image] = paused ? [
+		`${alt}, paused`,
+		"Play animated image",
+		_codecademy_gamut_icons.PlayIcon,
+		StyledFreezeframe
+	] : [
+		`${alt}, playing`,
+		"Pause animated image",
+		_codecademy_gamut_icons.PauseIcon,
+		PlayingImage
+	];
+	return /* @__PURE__ */ react.createElement(Container, null, /* @__PURE__ */ react.createElement(Image, {
+		alt,
+		...rest
+	}), /* @__PURE__ */ react.createElement(_codecademy_gamut.HiddenText, { "aria-live": "polite" }, alt ? liveText : buttonLabel), /* @__PURE__ */ react.createElement(_codecademy_gamut.FillButton, {
+		bottom: 0,
+		m: 8,
+		onClick: () => setPaused(!paused),
+		position: "absolute",
+		right: 0,
+		variant: "secondary",
+		zIndex: 1,
+		"aria-label": buttonLabel
+	}, /* @__PURE__ */ react.createElement(Icon, { color: "currentColor" })));
+};
+
+//#endregion
+exports.BaseImage = BaseImage;
+exports.default = BaseImage;
+exports.Container = Container;
+exports.PlayingImage = PlayingImage;
+//# sourceMappingURL=index.cjs.map

package/dist/PausableImage/BaseImage/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["FillButton","HiddenText","PauseIcon","PlayIcon","styled","useState","React","Freezeframe","imageStyles","Container","PlayingImage","StyledFreezeframe","BaseImage","alt","rest","paused","setPaused","liveText","buttonLabel","Icon","Image","aria-live","bottom","m","onClick","position","right","variant","zIndex","aria-label","color"],"sources":["../../../src/PausableImage/BaseImage/index.tsx"],"sourcesContent":["import { FillButton, HiddenText } from '@codecademy/gamut';\nimport { PauseIcon, PlayIcon } from '@codecademy/gamut-icons';\nimport styled from '@emotion/styled';\nimport { useState } from 'react';\nimport * as React from 'react';\nimport Freezeframe from 'react-freezeframe';\n\nimport { imageStyles } from '..';\n\nexport interface BaseImageProps {\n  alt: string;\n  src: string;\n}\n\nexport const Container = styled.div`\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  display: flex;\n  position: relative;\n  width: 100%;\n\n  > img,\n  > .react-freezeframe,\n  > .react-freezeframe img {\n    max-width: 100%;\n  }\n  .ff-container .ff-canvas {\n    transition: none;\n  }\n  .ff-loading-icon::before {\n    display: none;\n  }\n`;\n\nexport const PlayingImage = imageStyles;\n\nconst StyledFreezeframe = styled(Freezeframe)(imageStyles);\n\nexport const BaseImage: React.FC<BaseImageProps> = ({ alt, ...rest }) => {\n  const [paused, setPaused] = useState(false);\n\n  const [liveText, buttonLabel, Icon, Image] = paused\n    ? [`${alt}, paused`, 'Play animated image', PlayIcon, StyledFreezeframe]\n    : [`${alt}, playing`, 'Pause animated image', PauseIcon, PlayingImage];\n\n  return (\n    <Container>\n      <Image alt={alt} {...rest} />\n      {/* ensure proper fall back label if an empty string is given as alt */}\n      <HiddenText aria-live=\"polite\">{alt ? liveText : buttonLabel}</HiddenText>\n      <FillButton\n        bottom={0}\n        m={8}\n        onClick={() => setPaused(!paused)}\n        position=\"absolute\"\n        right={0}\n        variant=\"secondary\"\n        zIndex={1}\n        aria-label={buttonLabel}\n      >\n        <Icon color=\"currentColor\" />\n      </FillButton>\n    </Container>\n  );\n};\n\nexport default BaseImage;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAaS,YAAYL,6CAAAA,OAAAA;;;;AAqBzB,MAAaM,eAAeF;AAE5B,MAAMG,oBAAoBP,6CAAOG,2BAAAA;;;GAAaC,2BAAAA,svFAAAA;AAE9C,MAAaI,aAAuC,EAAEC,KAAK,GAAGC,WAAM;CAClE,MAAM,CAACC,QAAQC,iCAAsB,MAAA;CAErC,MAAM,CAACC,UAAUC,aAAaC,MAAMC,SAASL,SACzC;EAAC,GAAGF,IAAI;EAAW;EAAuBV;EAAUQ;EAAkB,GACtE;EAAC,GAAGE,IAAI;EAAY;EAAwBX;EAAWQ;EAAa;AAExE,QACE,sBAAA,cAACD,WAAAA,MACC,sBAAA,cAACW,OAAAA;EAAWP;EAAM,GAAGC;KAErB,sBAAA,cAACb,8BAAAA,EAAWoB,aAAU,YAAUR,MAAMI,WAAWC,YAAAA,EACjD,sBAAA,cAAClB,8BAAAA;EACCsB,QAAQ;EACRC,GAAG;EACHC,eAAeR,UAAU,CAACD,OAAAA;EAC1BU,UAAS;EACTC,OAAO;EACPC,SAAQ;EACRC,QAAQ;EACRC,cAAYX;IAEZ,sBAAA,cAACC,MAAAA,EAAKW,OAAM"}

package/dist/PausableImage/BaseImage/index.js

@@ -1,54 +1,49 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-import { FillButton, HiddenText } from '@codecademy/gamut';
-import { PauseIcon, PlayIcon } from '@codecademy/gamut-icons';
-import { useState } from 'react';
-import * as React from 'react';
-import Freezeframe from 'react-freezeframe';
-import { imageStyles } from '..';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Container = /*#__PURE__*/_styled("div", {
-  target: "e1oynmvg1",
-  label: "Container"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1v365f0",
-  styles: "align-items:center;justify-content:center;height:100%;display:flex;position:relative;width:100%;>img,>.react-freezeframe,>.react-freezeframe img{max-width:100%;}.ff-container .ff-canvas{transition:none;}.ff-loading-icon::before{display:none;}"
-} : {
-  name: "1v365f0",
-  styles: "align-items:center;justify-content:center;height:100%;display:flex;position:relative;width:100%;>img,>.react-freezeframe,>.react-freezeframe img{max-width:100%;}.ff-container .ff-canvas{transition:none;}.ff-loading-icon::before{display:none;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9QYXVzYWJsZUltYWdlL0Jhc2VJbWFnZS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY21DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9QYXVzYWJsZUltYWdlL0Jhc2VJbWFnZS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGaWxsQnV0dG9uLCBIaWRkZW5UZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgUGF1c2VJY29uLCBQbGF5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IEZyZWV6ZWZyYW1lIGZyb20gJ3JlYWN0LWZyZWV6ZWZyYW1lJztcblxuaW1wb3J0IHsgaW1hZ2VTdHlsZXMgfSBmcm9tICcuLic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQmFzZUltYWdlUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMDAlO1xuXG4gID4gaW1nLFxuICA+IC5yZWFjdC1mcmVlemVmcmFtZSxcbiAgPiAucmVhY3QtZnJlZXplZnJhbWUgaW1nIHtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gIH1cbiAgLmZmLWNvbnRhaW5lciAuZmYtY2FudmFzIHtcbiAgICB0cmFuc2l0aW9uOiBub25lO1xuICB9XG4gIC5mZi1sb2FkaW5nLWljb246OmJlZm9yZSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFBsYXlpbmdJbWFnZSA9IGltYWdlU3R5bGVzO1xuXG5jb25zdCBTdHlsZWRGcmVlemVmcmFtZSA9IHN0eWxlZChGcmVlemVmcmFtZSkoaW1hZ2VTdHlsZXMpO1xuXG5leHBvcnQgY29uc3QgQmFzZUltYWdlOiBSZWFjdC5GQzxCYXNlSW1hZ2VQcm9wcz4gPSAoeyBhbHQsIC4uLnJlc3QgfSkgPT4ge1xuICBjb25zdCBbcGF1c2VkLCBzZXRQYXVzZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IFtsaXZlVGV4dCwgYnV0dG9uTGFiZWwsIEljb24sIEltYWdlXSA9IHBhdXNlZFxuICAgID8gW2Ake2FsdH0sIHBhdXNlZGAsICdQbGF5IGFuaW1hdGVkIGltYWdlJywgUGxheUljb24sIFN0eWxlZEZyZWV6ZWZyYW1lXVxuICAgIDogW2Ake2FsdH0sIHBsYXlpbmdgLCAnUGF1c2UgYW5pbWF0ZWQgaW1hZ2UnLCBQYXVzZUljb24sIFBsYXlpbmdJbWFnZV07XG5cbiAgcmV0dXJuIChcbiAgICA8Q29udGFpbmVyPlxuICAgICAgPEltYWdlIGFsdD17YWx0fSB7Li4ucmVzdH0gLz5cbiAgICAgIHsvKiBlbnN1cmUgcHJvcGVyIGZhbGwgYmFjayBsYWJlbCBpZiBhbiBlbXB0eSBzdHJpbmcgaXMgZ2l2ZW4gYXMgYWx0ICovfVxuICAgICAgPEhpZGRlblRleHQgYXJpYS1saXZlPVwicG9saXRlXCI+e2FsdCA/IGxpdmVUZXh0IDogYnV0dG9uTGFiZWx9PC9IaWRkZW5UZXh0PlxuICAgICAgPEZpbGxCdXR0b25cbiAgICAgICAgYm90dG9tPXswfVxuICAgICAgICBtPXs4fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBzZXRQYXVzZWQoIXBhdXNlZCl9XG4gICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICByaWdodD17MH1cbiAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgIHpJbmRleD17MX1cbiAgICAgICAgYXJpYS1sYWJlbD17YnV0dG9uTGFiZWx9XG4gICAgICA+XG4gICAgICAgIDxJY29uIGNvbG9yPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDwvRmlsbEJ1dHRvbj5cbiAgICA8L0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEJhc2VJbWFnZTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-export const PlayingImage = imageStyles;
-const StyledFreezeframe = /*#__PURE__*/_styled(Freezeframe, {
-  target: "e1oynmvg0",
-  label: "StyledFreezeframe"
-})(imageStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9QYXVzYWJsZUltYWdlL0Jhc2VJbWFnZS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUMwQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvUGF1c2FibGVJbWFnZS9CYXNlSW1hZ2UvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmlsbEJ1dHRvbiwgSGlkZGVuVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IFBhdXNlSWNvbiwgUGxheUljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBGcmVlemVmcmFtZSBmcm9tICdyZWFjdC1mcmVlemVmcmFtZSc7XG5cbmltcG9ydCB7IGltYWdlU3R5bGVzIH0gZnJvbSAnLi4nO1xuXG5leHBvcnQgaW50ZXJmYWNlIEJhc2VJbWFnZVByb3BzIHtcbiAgYWx0OiBzdHJpbmc7XG4gIHNyYzogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGhlaWdodDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogMTAwJTtcblxuICA+IGltZyxcbiAgPiAucmVhY3QtZnJlZXplZnJhbWUsXG4gID4gLnJlYWN0LWZyZWV6ZWZyYW1lIGltZyB7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICB9XG4gIC5mZi1jb250YWluZXIgLmZmLWNhbnZhcyB7XG4gICAgdHJhbnNpdGlvbjogbm9uZTtcbiAgfVxuICAuZmYtbG9hZGluZy1pY29uOjpiZWZvcmUge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBQbGF5aW5nSW1hZ2UgPSBpbWFnZVN0eWxlcztcblxuY29uc3QgU3R5bGVkRnJlZXplZnJhbWUgPSBzdHlsZWQoRnJlZXplZnJhbWUpKGltYWdlU3R5bGVzKTtcblxuZXhwb3J0IGNvbnN0IEJhc2VJbWFnZTogUmVhY3QuRkM8QmFzZUltYWdlUHJvcHM+ID0gKHsgYWx0LCAuLi5yZXN0IH0pID0+IHtcbiAgY29uc3QgW3BhdXNlZCwgc2V0UGF1c2VkXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCBbbGl2ZVRleHQsIGJ1dHRvbkxhYmVsLCBJY29uLCBJbWFnZV0gPSBwYXVzZWRcbiAgICA/IFtgJHthbHR9LCBwYXVzZWRgLCAnUGxheSBhbmltYXRlZCBpbWFnZScsIFBsYXlJY29uLCBTdHlsZWRGcmVlemVmcmFtZV1cbiAgICA6IFtgJHthbHR9LCBwbGF5aW5nYCwgJ1BhdXNlIGFuaW1hdGVkIGltYWdlJywgUGF1c2VJY29uLCBQbGF5aW5nSW1hZ2VdO1xuXG4gIHJldHVybiAoXG4gICAgPENvbnRhaW5lcj5cbiAgICAgIDxJbWFnZSBhbHQ9e2FsdH0gey4uLnJlc3R9IC8+XG4gICAgICB7LyogZW5zdXJlIHByb3BlciBmYWxsIGJhY2sgbGFiZWwgaWYgYW4gZW1wdHkgc3RyaW5nIGlzIGdpdmVuIGFzIGFsdCAqL31cbiAgICAgIDxIaWRkZW5UZXh0IGFyaWEtbGl2ZT1cInBvbGl0ZVwiPnthbHQgPyBsaXZlVGV4dCA6IGJ1dHRvbkxhYmVsfTwvSGlkZGVuVGV4dD5cbiAgICAgIDxGaWxsQnV0dG9uXG4gICAgICAgIGJvdHRvbT17MH1cbiAgICAgICAgbT17OH1cbiAgICAgICAgb25DbGljaz17KCkgPT4gc2V0UGF1c2VkKCFwYXVzZWQpfVxuICAgICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgICAgcmlnaHQ9ezB9XG4gICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICB6SW5kZXg9ezF9XG4gICAgICAgIGFyaWEtbGFiZWw9e2J1dHRvbkxhYmVsfVxuICAgICAgPlxuICAgICAgICA8SWNvbiBjb2xvcj1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICA8L0ZpbGxCdXR0b24+XG4gICAgPC9Db250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBCYXNlSW1hZ2U7XG4iXX0= */");
-export const BaseImage = ({
-  alt,
-  ...rest
-}) => {
-  const [paused, setPaused] = useState(false);
-  const [liveText, buttonLabel, Icon, Image] = paused ? [`${alt}, paused`, 'Play animated image', PlayIcon, StyledFreezeframe] : [`${alt}, playing`, 'Pause animated image', PauseIcon, PlayingImage];
-  return /*#__PURE__*/_jsxs(Container, {
-    children: [/*#__PURE__*/_jsx(Image, {
-      alt: alt,
-      ...rest
-    }), /*#__PURE__*/_jsx(HiddenText, {
-      "aria-live": "polite",
-      children: alt ? liveText : buttonLabel
-    }), /*#__PURE__*/_jsx(FillButton, {
-      bottom: 0,
-      m: 8,
-      onClick: () => setPaused(!paused),
-      position: "absolute",
-      right: 0,
-      variant: "secondary",
-      zIndex: 1,
-      "aria-label": buttonLabel,
-      children: /*#__PURE__*/_jsx(Icon, {
-        color: "currentColor"
-      })
-    })]
-  });
+import { imageStyles } from "../index.js";
+import { FillButton, HiddenText } from "@codecademy/gamut";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import { useState } from "react";
+import { PauseIcon, PlayIcon } from "@codecademy/gamut-icons";
+import Freezeframe from "react-freezeframe";
+
+//#region src/PausableImage/BaseImage/index.tsx
+const Container = /* @__PURE__ */ styled("div", {
+	target: "e6na4ca0",
+	label: "brand-Container"
+})("align-items:center;justify-content:center;height:100%;display:flex;position:relative;width:100%;> img,> .react-freezeframe,> .react-freezeframe img{max-width:100%;}.ff-container .ff-canvas{transition:none;}.ff-loading-icon::before{display:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhdXNhYmxlSW1hZ2UvQmFzZUltYWdlL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhdXNhYmxlSW1hZ2UvQmFzZUltYWdlL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGaWxsQnV0dG9uLCBIaWRkZW5UZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgUGF1c2VJY29uLCBQbGF5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IEZyZWV6ZWZyYW1lIGZyb20gJ3JlYWN0LWZyZWV6ZWZyYW1lJztcblxuaW1wb3J0IHsgaW1hZ2VTdHlsZXMgfSBmcm9tICcuLic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQmFzZUltYWdlUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMDAlO1xuXG4gID4gaW1nLFxuICA+IC5yZWFjdC1mcmVlemVmcmFtZSxcbiAgPiAucmVhY3QtZnJlZXplZnJhbWUgaW1nIHtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gIH1cbiAgLmZmLWNvbnRhaW5lciAuZmYtY2FudmFzIHtcbiAgICB0cmFuc2l0aW9uOiBub25lO1xuICB9XG4gIC5mZi1sb2FkaW5nLWljb246OmJlZm9yZSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFBsYXlpbmdJbWFnZSA9IGltYWdlU3R5bGVzO1xuXG5jb25zdCBTdHlsZWRGcmVlemVmcmFtZSA9IHN0eWxlZChGcmVlemVmcmFtZSkoaW1hZ2VTdHlsZXMpO1xuXG5leHBvcnQgY29uc3QgQmFzZUltYWdlOiBSZWFjdC5GQzxCYXNlSW1hZ2VQcm9wcz4gPSAoeyBhbHQsIC4uLnJlc3QgfSkgPT4ge1xuICBjb25zdCBbcGF1c2VkLCBzZXRQYXVzZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IFtsaXZlVGV4dCwgYnV0dG9uTGFiZWwsIEljb24sIEltYWdlXSA9IHBhdXNlZFxuICAgID8gW2Ake2FsdH0sIHBhdXNlZGAsICdQbGF5IGFuaW1hdGVkIGltYWdlJywgUGxheUljb24sIFN0eWxlZEZyZWV6ZWZyYW1lXVxuICAgIDogW2Ake2FsdH0sIHBsYXlpbmdgLCAnUGF1c2UgYW5pbWF0ZWQgaW1hZ2UnLCBQYXVzZUljb24sIFBsYXlpbmdJbWFnZV07XG5cbiAgcmV0dXJuIChcbiAgICA8Q29udGFpbmVyPlxuICAgICAgPEltYWdlIGFsdD17YWx0fSB7Li4ucmVzdH0gLz5cbiAgICAgIHsvKiBlbnN1cmUgcHJvcGVyIGZhbGwgYmFjayBsYWJlbCBpZiBhbiBlbXB0eSBzdHJpbmcgaXMgZ2l2ZW4gYXMgYWx0ICovfVxuICAgICAgPEhpZGRlblRleHQgYXJpYS1saXZlPVwicG9saXRlXCI+e2FsdCA/IGxpdmVUZXh0IDogYnV0dG9uTGFiZWx9PC9IaWRkZW5UZXh0PlxuICAgICAgPEZpbGxCdXR0b25cbiAgICAgICAgYm90dG9tPXswfVxuICAgICAgICBtPXs4fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBzZXRQYXVzZWQoIXBhdXNlZCl9XG4gICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICByaWdodD17MH1cbiAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgIHpJbmRleD17MX1cbiAgICAgICAgYXJpYS1sYWJlbD17YnV0dG9uTGFiZWx9XG4gICAgICA+XG4gICAgICAgIDxJY29uIGNvbG9yPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDwvRmlsbEJ1dHRvbj5cbiAgICA8L0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEJhc2VJbWFnZTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjeUIifQ== */");
+const PlayingImage = imageStyles;
+const StyledFreezeframe = /* @__PURE__ */ styled(Freezeframe, {
+	target: "e6na4ca1",
+	label: "brand-StyledFreezeframe"
+})(imageStyles, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhdXNhYmxlSW1hZ2UvQmFzZUltYWdlL2luZGV4LnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhdXNhYmxlSW1hZ2UvQmFzZUltYWdlL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGaWxsQnV0dG9uLCBIaWRkZW5UZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgUGF1c2VJY29uLCBQbGF5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IEZyZWV6ZWZyYW1lIGZyb20gJ3JlYWN0LWZyZWV6ZWZyYW1lJztcblxuaW1wb3J0IHsgaW1hZ2VTdHlsZXMgfSBmcm9tICcuLic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQmFzZUltYWdlUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMDAlO1xuXG4gID4gaW1nLFxuICA+IC5yZWFjdC1mcmVlemVmcmFtZSxcbiAgPiAucmVhY3QtZnJlZXplZnJhbWUgaW1nIHtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gIH1cbiAgLmZmLWNvbnRhaW5lciAuZmYtY2FudmFzIHtcbiAgICB0cmFuc2l0aW9uOiBub25lO1xuICB9XG4gIC5mZi1sb2FkaW5nLWljb246OmJlZm9yZSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFBsYXlpbmdJbWFnZSA9IGltYWdlU3R5bGVzO1xuXG5jb25zdCBTdHlsZWRGcmVlemVmcmFtZSA9IHN0eWxlZChGcmVlemVmcmFtZSkoaW1hZ2VTdHlsZXMpO1xuXG5leHBvcnQgY29uc3QgQmFzZUltYWdlOiBSZWFjdC5GQzxCYXNlSW1hZ2VQcm9wcz4gPSAoeyBhbHQsIC4uLnJlc3QgfSkgPT4ge1xuICBjb25zdCBbcGF1c2VkLCBzZXRQYXVzZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IFtsaXZlVGV4dCwgYnV0dG9uTGFiZWwsIEljb24sIEltYWdlXSA9IHBhdXNlZFxuICAgID8gW2Ake2FsdH0sIHBhdXNlZGAsICdQbGF5IGFuaW1hdGVkIGltYWdlJywgUGxheUljb24sIFN0eWxlZEZyZWV6ZWZyYW1lXVxuICAgIDogW2Ake2FsdH0sIHBsYXlpbmdgLCAnUGF1c2UgYW5pbWF0ZWQgaW1hZ2UnLCBQYXVzZUljb24sIFBsYXlpbmdJbWFnZV07XG5cbiAgcmV0dXJuIChcbiAgICA8Q29udGFpbmVyPlxuICAgICAgPEltYWdlIGFsdD17YWx0fSB7Li4ucmVzdH0gLz5cbiAgICAgIHsvKiBlbnN1cmUgcHJvcGVyIGZhbGwgYmFjayBsYWJlbCBpZiBhbiBlbXB0eSBzdHJpbmcgaXMgZ2l2ZW4gYXMgYWx0ICovfVxuICAgICAgPEhpZGRlblRleHQgYXJpYS1saXZlPVwicG9saXRlXCI+e2FsdCA/IGxpdmVUZXh0IDogYnV0dG9uTGFiZWx9PC9IaWRkZW5UZXh0PlxuICAgICAgPEZpbGxCdXR0b25cbiAgICAgICAgYm90dG9tPXswfVxuICAgICAgICBtPXs4fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBzZXRQYXVzZWQoIXBhdXNlZCl9XG4gICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICByaWdodD17MH1cbiAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgIHpJbmRleD17MX1cbiAgICAgICAgYXJpYS1sYWJlbD17YnV0dG9uTGFiZWx9XG4gICAgICA+XG4gICAgICAgIDxJY29uIGNvbG9yPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgIDwvRmlsbEJ1dHRvbj5cbiAgICA8L0NvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEJhc2VJbWFnZTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQzBCIn0= */");
+const BaseImage = ({ alt, ...rest }) => {
+	const [paused, setPaused] = useState(false);
+	const [liveText, buttonLabel, Icon, Image] = paused ? [
+		`${alt}, paused`,
+		"Play animated image",
+		PlayIcon,
+		StyledFreezeframe
+	] : [
+		`${alt}, playing`,
+		"Pause animated image",
+		PauseIcon,
+		PlayingImage
+	];
+	return /* @__PURE__ */ React$1.createElement(Container, null, /* @__PURE__ */ React$1.createElement(Image, {
+		alt,
+		...rest
+	}), /* @__PURE__ */ React$1.createElement(HiddenText, { "aria-live": "polite" }, alt ? liveText : buttonLabel), /* @__PURE__ */ React$1.createElement(FillButton, {
+		bottom: 0,
+		m: 8,
+		onClick: () => setPaused(!paused),
+		position: "absolute",
+		right: 0,
+		variant: "secondary",
+		zIndex: 1,
+		"aria-label": buttonLabel
+	}, /* @__PURE__ */ React$1.createElement(Icon, { color: "currentColor" })));
 };
-export default BaseImage;
+
+//#endregion
+export { BaseImage, BaseImage as default, Container, PlayingImage };
+//# sourceMappingURL=index.js.map

package/dist/PausableImage/BaseImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["FillButton","HiddenText","PauseIcon","PlayIcon","styled","useState","React","Freezeframe","imageStyles","Container","PlayingImage","StyledFreezeframe","BaseImage","alt","rest","paused","setPaused","liveText","buttonLabel","Icon","Image","aria-live","bottom","m","onClick","position","right","variant","zIndex","aria-label","color"],"sources":["../../../src/PausableImage/BaseImage/index.tsx"],"sourcesContent":["import { FillButton, HiddenText } from '@codecademy/gamut';\nimport { PauseIcon, PlayIcon } from '@codecademy/gamut-icons';\nimport styled from '@emotion/styled';\nimport { useState } from 'react';\nimport * as React from 'react';\nimport Freezeframe from 'react-freezeframe';\n\nimport { imageStyles } from '..';\n\nexport interface BaseImageProps {\n  alt: string;\n  src: string;\n}\n\nexport const Container = styled.div`\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  display: flex;\n  position: relative;\n  width: 100%;\n\n  > img,\n  > .react-freezeframe,\n  > .react-freezeframe img {\n    max-width: 100%;\n  }\n  .ff-container .ff-canvas {\n    transition: none;\n  }\n  .ff-loading-icon::before {\n    display: none;\n  }\n`;\n\nexport const PlayingImage = imageStyles;\n\nconst StyledFreezeframe = styled(Freezeframe)(imageStyles);\n\nexport const BaseImage: React.FC<BaseImageProps> = ({ alt, ...rest }) => {\n  const [paused, setPaused] = useState(false);\n\n  const [liveText, buttonLabel, Icon, Image] = paused\n    ? [`${alt}, paused`, 'Play animated image', PlayIcon, StyledFreezeframe]\n    : [`${alt}, playing`, 'Pause animated image', PauseIcon, PlayingImage];\n\n  return (\n    <Container>\n      <Image alt={alt} {...rest} />\n      {/* ensure proper fall back label if an empty string is given as alt */}\n      <HiddenText aria-live=\"polite\">{alt ? liveText : buttonLabel}</HiddenText>\n      <FillButton\n        bottom={0}\n        m={8}\n        onClick={() => setPaused(!paused)}\n        position=\"absolute\"\n        right={0}\n        variant=\"secondary\"\n        zIndex={1}\n        aria-label={buttonLabel}\n      >\n        <Icon color=\"currentColor\" />\n      </FillButton>\n    </Container>\n  );\n};\n\nexport default BaseImage;\n"],"mappings":";;;;;;;;;AAcA,MAAaS,YAAYL,uBAAAA,OAAAA;;;;AAqBzB,MAAaM,eAAeF;AAE5B,MAAMG,oBAAoBP,uBAAOG,aAAAA;;;GAAaC,aAAAA,svFAAAA;AAE9C,MAAaI,aAAuC,EAAEC,KAAK,GAAGC,WAAM;CAClE,MAAM,CAACC,QAAQC,aAAaX,SAAS,MAAA;CAErC,MAAM,CAACY,UAAUC,aAAaC,MAAMC,SAASL,SACzC;EAAC,GAAGF,IAAI;EAAW;EAAuBV;EAAUQ;EAAkB,GACtE;EAAC,GAAGE,IAAI;EAAY;EAAwBX;EAAWQ;EAAa;AAExE,QACE,wBAAA,cAACD,WAAAA,MACC,wBAAA,cAACW,OAAAA;EAAWP;EAAM,GAAGC;KAErB,wBAAA,cAACb,YAAAA,EAAWoB,aAAU,YAAUR,MAAMI,WAAWC,YAAAA,EACjD,wBAAA,cAAClB,YAAAA;EACCsB,QAAQ;EACRC,GAAG;EACHC,eAAeR,UAAU,CAACD,OAAAA;EAC1BU,UAAS;EACTC,OAAO;EACPC,SAAQ;EACRC,QAAQ;EACRC,cAAYX;IAEZ,wBAAA,cAACC,MAAAA,EAAKW,OAAM"}

package/dist/PausableImage/index.cjs

@@ -0,0 +1,32 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _emotion_react = require("@emotion/react");
+
+//#region src/PausableImage/index.tsx
+const BaseImage = /* @__PURE__ */ react.lazy(() => Promise.resolve().then(() => require("./BaseImage/index.cjs")));
+const imageStyles = /* @__PURE__ */ (0, _emotion_styled.default)("img", {
+	target: "enet7ec0",
+	label: "brand-imageStyles"
+})((0, _emotion_react.css)({
+	height: "auto",
+	maxHeight: "100%",
+	maxWidth: "100%",
+	"&[src$=\".svg\"]": { width: "100%" }
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhdXNhYmxlSW1hZ2UvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvUGF1c2FibGVJbWFnZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBCYXNlSW1hZ2UgPSBSZWFjdC5sYXp5KCgpID0+IGltcG9ydCgnLi9CYXNlSW1hZ2UnKSk7XG5cbmludGVyZmFjZSBQYXVzZWFibGVJbWFnZVByb3BzIHtcbiAgc3JjOiBzdHJpbmc7XG4gIGFsdDogc3RyaW5nO1xufVxuZXhwb3J0IGNvbnN0IGltYWdlU3R5bGVzID0gc3R5bGVkLmltZyhcbiAgY3NzKHtcbiAgICBoZWlnaHQ6ICdhdXRvJyxcbiAgICBtYXhIZWlnaHQ6ICcxMDAlJyxcbiAgICBtYXhXaWR0aDogJzEwMCUnLFxuICAgICcmW3NyYyQ9XCIuc3ZnXCJdJzoge1xuICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICB9LFxuICB9KVxuKTtcblxuY29uc3QgU3RhdGljSW1hZ2UgPSBpbWFnZVN0eWxlcztcblxuZXhwb3J0IGNvbnN0IFBhdXNhYmxlSW1hZ2U6IFJlYWN0LkZDPFBhdXNlYWJsZUltYWdlUHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHN0YXRpY0ltYWdlID0gPFN0YXRpY0ltYWdlIHsuLi5wcm9wc30gLz47XG5cbiAgLy8gQXZvaWQgcmVuZGVyaW5nIFJlYWN0LlN1c3BlbnNlIG9uIHRoZSBzZXJ2ZXIgdW50aWwgaXQncyBmdWxseSBzdXBwb3J0ZWQgYnkgUmVhY3QgJiBvdXIgYXBwbGljYXRpb25zXG4gIGNvbnN0IFtpc01vdW50ZWQsIHNldElzTW91bnRlZF0gPSBSZWFjdC51c2VTdGF0ZShmYWxzZSk7XG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0SXNNb3VudGVkKHRydWUpO1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge2lzTW91bnRlZCAmJiBwcm9wcy5zcmM/LmVuZHNXaXRoKCcuZ2lmJykgPyAoXG4gICAgICAgIDxSZWFjdC5TdXNwZW5zZSBmYWxsYmFjaz17c3RhdGljSW1hZ2V9PlxuICAgICAgICAgIDxCYXNlSW1hZ2Ugey4uLnByb3BzfSAvPlxuICAgICAgICA8L1JlYWN0LlN1c3BlbnNlPlxuICAgICAgKSA6IChcbiAgICAgICAgc3RhdGljSW1hZ2VcbiAgICAgICl9XG4gICAgPC8+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVUyQiJ9 */");
+const StaticImage = imageStyles;
+const PausableImage = (props) => {
+	const staticImage = /* @__PURE__ */ react.createElement(StaticImage, props);
+	const [isMounted, setIsMounted] = react.useState(false);
+	react.useEffect(() => {
+		setIsMounted(true);
+	}, []);
+	return /* @__PURE__ */ react.createElement(react.Fragment, null, isMounted && props.src?.endsWith(".gif") ? /* @__PURE__ */ react.createElement(react.Suspense, { fallback: staticImage }, /* @__PURE__ */ react.createElement(BaseImage, props)) : staticImage);
+};
+
+//#endregion
+exports.PausableImage = PausableImage;
+exports.imageStyles = imageStyles;
+//# sourceMappingURL=index.cjs.map

package/dist/PausableImage/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["css","styled","React","BaseImage","lazy","imageStyles","height","maxHeight","maxWidth","width","StaticImage","PausableImage","props","staticImage","isMounted","setIsMounted","useState","useEffect","src","endsWith","Suspense","fallback"],"sources":["../../src/PausableImage/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nconst BaseImage = React.lazy(() => import('./BaseImage'));\n\ninterface PauseableImageProps {\n  src: string;\n  alt: string;\n}\nexport const imageStyles = styled.img(\n  css({\n    height: 'auto',\n    maxHeight: '100%',\n    maxWidth: '100%',\n    '&[src$=\".svg\"]': {\n      width: '100%',\n    },\n  })\n);\n\nconst StaticImage = imageStyles;\n\nexport const PausableImage: React.FC<PauseableImageProps> = (props) => {\n  const staticImage = <StaticImage {...props} />;\n\n  // Avoid rendering React.Suspense on the server until it's fully supported by React & our applications\n  const [isMounted, setIsMounted] = React.useState(false);\n  React.useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  return (\n    <>\n      {isMounted && props.src?.endsWith('.gif') ? (\n        <React.Suspense fallback={staticImage}>\n          <BaseImage {...props} />\n        </React.Suspense>\n      ) : (\n        staticImage\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AAIA,MAAMG,YAAYD,sBAAME,gDAAW,0BAAO;AAM1C,MAAaC,cAAcJ,6CAAAA,OAAAA;;;2BACrB;CACFK,QAAQ;CACRC,WAAW;CACXC,UAAU;CACV,oBAAkB,EAChBC,OAAO,QACT;CACF,CAAA,EAAA,0wDAAA;AAGF,MAAMC,cAAcL;AAEpB,MAAaM,iBAAgDC,UAAAA;CAC3D,MAAMC,cAAc,sBAAA,cAACH,aAAgBE,MAAAA;CAGrC,MAAM,CAACE,WAAWC,gBAAgBb,MAAMc,SAAS,MAAA;AACjDd,OAAMe,gBAAU;AACdF,eAAa,KAAA;IACZ,EAAE,CAAA;AAEL,QACE,sBAAA,cAAA,MAAA,UAAA,MACGD,aAAaF,MAAMM,KAAKC,SAAS,OAAA,GAChC,sBAAA,cAACjB,MAAMkB,UAAQ,EAACC,UAAUR,eACxB,sBAAA,cAACV,WAAcS,MAAAA,CAAAA,GAGjBC,YAAAA"}

package/dist/PausableImage/index.d.cts

@@ -0,0 +1,17 @@
+import * as React$1 from "react";
+import * as _emotion_react0 from "@emotion/react";
+import * as _emotion_styled0 from "@emotion/styled";
+
+//#region src/PausableImage/index.d.ts
+interface PauseableImageProps {
+  src: string;
+  alt: string;
+}
+declare const imageStyles: _emotion_styled0.StyledComponent<{
+  theme?: _emotion_react0.Theme;
+  as?: React$1.ElementType;
+}, React$1.DetailedHTMLProps<React$1.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+declare const PausableImage: React$1.FC<PauseableImageProps>;
+//#endregion
+export { PausableImage, imageStyles };
+//# sourceMappingURL=index.d.cts.map

package/dist/PausableImage/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/PausableImage/index.tsx"],"mappings":";;;;;UAMU,mBAAA;EACR,GAAA;EACA,GAAA;AAAA;AAAA,cAEW,WAAA,mBAAW,eAAA;UASvB,eAAA,CAAA,KAAA;;;cAIY,aAAA,EAAe,OAAA,CAAM,EAAA,CAAG,mBAAA"}

package/dist/PausableImage/index.d.ts

@@ -1,11 +1,17 @@
-import * as React from 'react';
+import * as _emotion_styled0 from "@emotion/styled";
+import * as React$1 from "react";
+import * as _emotion_react0 from "@emotion/react";
+
+//#region src/PausableImage/index.d.ts
 interface PauseableImageProps {
-    src: string;
-    alt: string;
+  src: string;
+  alt: string;
 }
-export declare const imageStyles: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const PausableImage: React.FC<PauseableImageProps>;
-export {};
+declare const imageStyles: _emotion_styled0.StyledComponent<{
+  theme?: _emotion_react0.Theme;
+  as?: React$1.ElementType;
+}, React$1.DetailedHTMLProps<React$1.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+declare const PausableImage: React$1.FC<PauseableImageProps>;
+//#endregion
+export { PausableImage, imageStyles };
+//# sourceMappingURL=index.d.ts.map

package/dist/PausableImage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/PausableImage/index.tsx"],"mappings":";;;;;UAMU,mBAAA;EACR,GAAA;EACA,GAAA;AAAA;AAAA,cAEW,WAAA,mBAAW,eAAA;UASvB,eAAA,CAAA,KAAA;;;cAIY,aAAA,EAAe,OAAA,CAAM,EAAA,CAAG,mBAAA"}

package/dist/PausableImage/index.js

@@ -1,37 +1,28 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-import { css } from '@emotion/react';
-import * as React from 'react';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const BaseImage = /*#__PURE__*/React.lazy(() => import('./BaseImage'));
-export const imageStyles = /*#__PURE__*/_styled("img", {
-  target: "eubpdj90",
-  label: "imageStyles"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1hzevmy-imageStyles",
-  styles: "height:auto;max-height:100%;max-width:100%;&[src$=\".svg\"]{width:100%;};label:imageStyles;"
-} : {
-  name: "1hzevmy-imageStyles",
-  styles: "height:auto;max-height:100%;max-width:100%;&[src$=\".svg\"]{width:100%;};label:imageStyles;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QYXVzYWJsZUltYWdlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXRSIsImZpbGUiOiIuLi8uLi9zcmMvUGF1c2FibGVJbWFnZS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEJhc2VJbWFnZSA9IFJlYWN0LmxhenkoKCkgPT4gaW1wb3J0KCcuL0Jhc2VJbWFnZScpKTtcblxuaW50ZXJmYWNlIFBhdXNlYWJsZUltYWdlUHJvcHMge1xuICBzcmM6IHN0cmluZztcbiAgYWx0OiBzdHJpbmc7XG59XG5leHBvcnQgY29uc3QgaW1hZ2VTdHlsZXMgPSBzdHlsZWQuaW1nKFxuICBjc3Moe1xuICAgIGhlaWdodDogJ2F1dG8nLFxuICAgIG1heEhlaWdodDogJzEwMCUnLFxuICAgIG1heFdpZHRoOiAnMTAwJScsXG4gICAgJyZbc3JjJD1cIi5zdmdcIl0nOiB7XG4gICAgICB3aWR0aDogJzEwMCUnLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5jb25zdCBTdGF0aWNJbWFnZSA9IGltYWdlU3R5bGVzO1xuXG5leHBvcnQgY29uc3QgUGF1c2FibGVJbWFnZTogUmVhY3QuRkM8UGF1c2VhYmxlSW1hZ2VQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3Qgc3RhdGljSW1hZ2UgPSA8U3RhdGljSW1hZ2Ugey4uLnByb3BzfSAvPjtcblxuICAvLyBBdm9pZCByZW5kZXJpbmcgUmVhY3QuU3VzcGVuc2Ugb24gdGhlIHNlcnZlciB1bnRpbCBpdCdzIGZ1bGx5IHN1cHBvcnRlZCBieSBSZWFjdCAmIG91ciBhcHBsaWNhdGlvbnNcbiAgY29uc3QgW2lzTW91bnRlZCwgc2V0SXNNb3VudGVkXSA9IFJlYWN0LnVzZVN0YXRlKGZhbHNlKTtcbiAgUmVhY3QudXNlRWZmZWN0KCgpID0+IHtcbiAgICBzZXRJc01vdW50ZWQodHJ1ZSk7XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7aXNNb3VudGVkICYmIHByb3BzLnNyYz8uZW5kc1dpdGgoJy5naWYnKSA/IChcbiAgICAgICAgPFJlYWN0LlN1c3BlbnNlIGZhbGxiYWNrPXtzdGF0aWNJbWFnZX0+XG4gICAgICAgICAgPEJhc2VJbWFnZSB7Li4ucHJvcHN9IC8+XG4gICAgICAgIDwvUmVhY3QuU3VzcGVuc2U+XG4gICAgICApIDogKFxuICAgICAgICBzdGF0aWNJbWFnZVxuICAgICAgKX1cbiAgICA8Lz5cbiAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QYXVzYWJsZUltYWdlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVMkIiLCJmaWxlIjoiLi4vLi4vc3JjL1BhdXNhYmxlSW1hZ2UvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBCYXNlSW1hZ2UgPSBSZWFjdC5sYXp5KCgpID0+IGltcG9ydCgnLi9CYXNlSW1hZ2UnKSk7XG5cbmludGVyZmFjZSBQYXVzZWFibGVJbWFnZVByb3BzIHtcbiAgc3JjOiBzdHJpbmc7XG4gIGFsdDogc3RyaW5nO1xufVxuZXhwb3J0IGNvbnN0IGltYWdlU3R5bGVzID0gc3R5bGVkLmltZyhcbiAgY3NzKHtcbiAgICBoZWlnaHQ6ICdhdXRvJyxcbiAgICBtYXhIZWlnaHQ6ICcxMDAlJyxcbiAgICBtYXhXaWR0aDogJzEwMCUnLFxuICAgICcmW3NyYyQ9XCIuc3ZnXCJdJzoge1xuICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICB9LFxuICB9KVxuKTtcblxuY29uc3QgU3RhdGljSW1hZ2UgPSBpbWFnZVN0eWxlcztcblxuZXhwb3J0IGNvbnN0IFBhdXNhYmxlSW1hZ2U6IFJlYWN0LkZDPFBhdXNlYWJsZUltYWdlUHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHN0YXRpY0ltYWdlID0gPFN0YXRpY0ltYWdlIHsuLi5wcm9wc30gLz47XG5cbiAgLy8gQXZvaWQgcmVuZGVyaW5nIFJlYWN0LlN1c3BlbnNlIG9uIHRoZSBzZXJ2ZXIgdW50aWwgaXQncyBmdWxseSBzdXBwb3J0ZWQgYnkgUmVhY3QgJiBvdXIgYXBwbGljYXRpb25zXG4gIGNvbnN0IFtpc01vdW50ZWQsIHNldElzTW91bnRlZF0gPSBSZWFjdC51c2VTdGF0ZShmYWxzZSk7XG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0SXNNb3VudGVkKHRydWUpO1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge2lzTW91bnRlZCAmJiBwcm9wcy5zcmM/LmVuZHNXaXRoKCcuZ2lmJykgPyAoXG4gICAgICAgIDxSZWFjdC5TdXNwZW5zZSBmYWxsYmFjaz17c3RhdGljSW1hZ2V9PlxuICAgICAgICAgIDxCYXNlSW1hZ2Ugey4uLnByb3BzfSAvPlxuICAgICAgICA8L1JlYWN0LlN1c3BlbnNlPlxuICAgICAgKSA6IChcbiAgICAgICAgc3RhdGljSW1hZ2VcbiAgICAgICl9XG4gICAgPC8+XG4gICk7XG59O1xuIl19 */");
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import { css } from "@emotion/react";
+
+//#region src/PausableImage/index.tsx
+const BaseImage = /* @__PURE__ */ React$1.lazy(() => import("./BaseImage/index.js"));
+const imageStyles = /* @__PURE__ */ styled("img", {
+	target: "enet7ec0",
+	label: "brand-imageStyles"
+})(css({
+	height: "auto",
+	maxHeight: "100%",
+	maxWidth: "100%",
+	"&[src$=\".svg\"]": { width: "100%" }
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhdXNhYmxlSW1hZ2UvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvUGF1c2FibGVJbWFnZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBCYXNlSW1hZ2UgPSBSZWFjdC5sYXp5KCgpID0+IGltcG9ydCgnLi9CYXNlSW1hZ2UnKSk7XG5cbmludGVyZmFjZSBQYXVzZWFibGVJbWFnZVByb3BzIHtcbiAgc3JjOiBzdHJpbmc7XG4gIGFsdDogc3RyaW5nO1xufVxuZXhwb3J0IGNvbnN0IGltYWdlU3R5bGVzID0gc3R5bGVkLmltZyhcbiAgY3NzKHtcbiAgICBoZWlnaHQ6ICdhdXRvJyxcbiAgICBtYXhIZWlnaHQ6ICcxMDAlJyxcbiAgICBtYXhXaWR0aDogJzEwMCUnLFxuICAgICcmW3NyYyQ9XCIuc3ZnXCJdJzoge1xuICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICB9LFxuICB9KVxuKTtcblxuY29uc3QgU3RhdGljSW1hZ2UgPSBpbWFnZVN0eWxlcztcblxuZXhwb3J0IGNvbnN0IFBhdXNhYmxlSW1hZ2U6IFJlYWN0LkZDPFBhdXNlYWJsZUltYWdlUHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHN0YXRpY0ltYWdlID0gPFN0YXRpY0ltYWdlIHsuLi5wcm9wc30gLz47XG5cbiAgLy8gQXZvaWQgcmVuZGVyaW5nIFJlYWN0LlN1c3BlbnNlIG9uIHRoZSBzZXJ2ZXIgdW50aWwgaXQncyBmdWxseSBzdXBwb3J0ZWQgYnkgUmVhY3QgJiBvdXIgYXBwbGljYXRpb25zXG4gIGNvbnN0IFtpc01vdW50ZWQsIHNldElzTW91bnRlZF0gPSBSZWFjdC51c2VTdGF0ZShmYWxzZSk7XG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0SXNNb3VudGVkKHRydWUpO1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge2lzTW91bnRlZCAmJiBwcm9wcy5zcmM/LmVuZHNXaXRoKCcuZ2lmJykgPyAoXG4gICAgICAgIDxSZWFjdC5TdXNwZW5zZSBmYWxsYmFjaz17c3RhdGljSW1hZ2V9PlxuICAgICAgICAgIDxCYXNlSW1hZ2Ugey4uLnByb3BzfSAvPlxuICAgICAgICA8L1JlYWN0LlN1c3BlbnNlPlxuICAgICAgKSA6IChcbiAgICAgICAgc3RhdGljSW1hZ2VcbiAgICAgICl9XG4gICAgPC8+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVUyQiJ9 */");
 const StaticImage = imageStyles;
-export const PausableImage = props => {
-  const staticImage = /*#__PURE__*/_jsx(StaticImage, {
-    ...props
-  });
+const PausableImage = (props) => {
+	const staticImage = /* @__PURE__ */ React$1.createElement(StaticImage, props);
+	const [isMounted, setIsMounted] = React$1.useState(false);
+	React$1.useEffect(() => {
+		setIsMounted(true);
+	}, []);
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, isMounted && props.src?.endsWith(".gif") ? /* @__PURE__ */ React$1.createElement(React$1.Suspense, { fallback: staticImage }, /* @__PURE__ */ React$1.createElement(BaseImage, props)) : staticImage);
+};
 
-  // Avoid rendering React.Suspense on the server until it's fully supported by React & our applications
-  const [isMounted, setIsMounted] = React.useState(false);
-  React.useEffect(() => {
-    setIsMounted(true);
-  }, []);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: isMounted && props.src?.endsWith('.gif') ? /*#__PURE__*/_jsx(React.Suspense, {
-      fallback: staticImage,
-      children: /*#__PURE__*/_jsx(BaseImage, {
-        ...props
-      })
-    }) : staticImage
-  });
-};
+//#endregion
+export { PausableImage, imageStyles };
+//# sourceMappingURL=index.js.map

package/dist/PausableImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["css","styled","React","BaseImage","lazy","imageStyles","height","maxHeight","maxWidth","width","StaticImage","PausableImage","props","staticImage","isMounted","setIsMounted","useState","useEffect","src","endsWith","Suspense","fallback"],"sources":["../../src/PausableImage/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nconst BaseImage = React.lazy(() => import('./BaseImage'));\n\ninterface PauseableImageProps {\n  src: string;\n  alt: string;\n}\nexport const imageStyles = styled.img(\n  css({\n    height: 'auto',\n    maxHeight: '100%',\n    maxWidth: '100%',\n    '&[src$=\".svg\"]': {\n      width: '100%',\n    },\n  })\n);\n\nconst StaticImage = imageStyles;\n\nexport const PausableImage: React.FC<PauseableImageProps> = (props) => {\n  const staticImage = <StaticImage {...props} />;\n\n  // Avoid rendering React.Suspense on the server until it's fully supported by React & our applications\n  const [isMounted, setIsMounted] = React.useState(false);\n  React.useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  return (\n    <>\n      {isMounted && props.src?.endsWith('.gif') ? (\n        <React.Suspense fallback={staticImage}>\n          <BaseImage {...props} />\n        </React.Suspense>\n      ) : (\n        staticImage\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;AAIA,MAAMG,YAAYD,wBAAME,WAAW,OAAO,wBAAA;AAM1C,MAAaC,cAAcJ,uBAAAA,OAAAA;;;GACzBD,IAAI;CACFM,QAAQ;CACRC,WAAW;CACXC,UAAU;CACV,oBAAkB,EAChBC,OAAO,QACT;CACF,CAAA,EAAA,0wDAAA;AAGF,MAAMC,cAAcL;AAEpB,MAAaM,iBAAgDC,UAAAA;CAC3D,MAAMC,cAAc,wBAAA,cAACH,aAAgBE,MAAAA;CAGrC,MAAM,CAACE,WAAWC,gBAAgBb,QAAMc,SAAS,MAAA;AACjDd,SAAMe,gBAAU;AACdF,eAAa,KAAA;IACZ,EAAE,CAAA;AAEL,QACE,wBAAA,cAAA,QAAA,UAAA,MACGD,aAAaF,MAAMM,KAAKC,SAAS,OAAA,GAChC,wBAAA,cAACjB,QAAMkB,UAAQ,EAACC,UAAUR,eACxB,wBAAA,cAACV,WAAcS,MAAAA,CAAAA,GAGjBC,YAAAA"}

package/dist/PlanCard/PlanCardBanner.cjs

@@ -0,0 +1,29 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/PlanCard/PlanCardBanner.tsx
+const BackgroundFlex = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut_styles.Background, {
+	target: "e1q95ts20",
+	label: "brand-BackgroundFlex"
+})((0, _codecademy_gamut_styles.css)({
+	display: "flex",
+	p: 8,
+	justifyContent: "center",
+	alignItems: "center"
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BsYW5DYXJkL1BsYW5DYXJkQmFubmVyLnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BsYW5DYXJkL1BsYW5DYXJkQmFubmVyLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQmFja2dyb3VuZCwgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmludGVyZmFjZSBQbGFuQ2FyZEJhbm5lclByb3BzIHtcbiAgdGV4dDogc3RyaW5nO1xuICBpY29uPzogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5jb25zdCBCYWNrZ3JvdW5kRmxleCA9IHN0eWxlZChCYWNrZ3JvdW5kKShcbiAgY3NzKHtcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcDogOCxcbiAgICBqdXN0aWZ5Q29udGVudDogJ2NlbnRlcicsXG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgUGxhbkNhcmRCYW5uZXI6IFJlYWN0LkZDPFBsYW5DYXJkQmFubmVyUHJvcHM+ID0gKHtcbiAgdGV4dCxcbiAgaWNvbixcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8QmFja2dyb3VuZEZsZXggYmc9XCJuYXZ5XCI+XG4gICAgICB7aWNvbiAmJiBpY29ufVxuICAgICAgPFRleHQgZm9udEZhbWlseT1cImFjY2VudFwiIGZvbnRTaXplPXsxNH0gbWw9ezh9PlxuICAgICAgICB7dGV4dH1cbiAgICAgIDwvVGV4dD5cbiAgICA8L0JhY2tncm91bmRGbGV4PlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVdUIifQ== */");
+const PlanCardBanner = ({ text, icon }) => {
+	return /* @__PURE__ */ react.default.createElement(BackgroundFlex, { bg: "navy" }, icon && icon, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		fontFamily: "accent",
+		fontSize: 14,
+		ml: 8
+	}, text));
+};
+
+//#endregion
+exports.PlanCardBanner = PlanCardBanner;
+//# sourceMappingURL=PlanCardBanner.cjs.map

package/dist/PlanCard/PlanCardBanner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanCardBanner.cjs","names":["Text","Background","css","styled","React","BackgroundFlex","display","p","justifyContent","alignItems","PlanCardBanner","text","icon","bg","fontFamily","fontSize","ml"],"sources":["../../src/PlanCard/PlanCardBanner.tsx"],"sourcesContent":["import { Text } from '@codecademy/gamut';\nimport { Background, css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport React from 'react';\n\ninterface PlanCardBannerProps {\n  text: string;\n  icon?: React.ReactNode;\n}\n\nconst BackgroundFlex = styled(Background)(\n  css({\n    display: 'flex',\n    p: 8,\n    justifyContent: 'center',\n    alignItems: 'center',\n  })\n);\n\nexport const PlanCardBanner: React.FC<PlanCardBannerProps> = ({\n  text,\n  icon,\n}) => {\n  return (\n    <BackgroundFlex bg=\"navy\">\n      {icon && icon}\n      <Text fontFamily=\"accent\" fontSize={14} ml={8}>\n        {text}\n      </Text>\n    </BackgroundFlex>\n  );\n};\n"],"mappings":";;;;;;;;;AAUA,MAAMK,iBAAiBF,6CAAOF,qCAAAA;;;qCACxB;CACFK,SAAS;CACTC,GAAG;CACHC,gBAAgB;CAChBC,YAAY;CACd,CAAA,EAAA,8xCAAA;AAGF,MAAaC,kBAAiD,EAC5DC,MACAC,WACD;AACC,QACE,8BAAA,cAACP,gBAAAA,EAAeQ,IAAG,UAChBD,QAAQA,MACT,8BAAA,cAACZ,wBAAAA;EAAKc,YAAW;EAASC,UAAU;EAAIC,IAAI;IACzCL,KAAAA,CAAAA"}

package/dist/PlanCard/PlanCardBanner.d.cts

@@ -0,0 +1,11 @@
+import React from "react";
+
+//#region src/PlanCard/PlanCardBanner.d.ts
+interface PlanCardBannerProps {
+  text: string;
+  icon?: React.ReactNode;
+}
+declare const PlanCardBanner: React.FC<PlanCardBannerProps>;
+//#endregion
+export { PlanCardBanner };
+//# sourceMappingURL=PlanCardBanner.d.cts.map

package/dist/PlanCard/PlanCardBanner.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanCardBanner.d.cts","names":[],"sources":["../../src/PlanCard/PlanCardBanner.tsx"],"mappings":";;;UAKU,mBAAA;EACR,IAAA;EACA,IAAA,GAAO,KAAA,CAAM,SAAA;AAAA;AAAA,cAYF,cAAA,EAAgB,KAAA,CAAM,EAAA,CAAG,mBAAA"}

package/dist/PlanCard/PlanCardBanner.d.ts

@@ -1,7 +1,11 @@
-import React from 'react';
+import React from "react";
+
+//#region src/PlanCard/PlanCardBanner.d.ts
 interface PlanCardBannerProps {
-    text: string;
-    icon?: React.ReactNode;
+  text: string;
+  icon?: React.ReactNode;
 }
-export declare const PlanCardBanner: React.FC<PlanCardBannerProps>;
-export {};
+declare const PlanCardBanner: React.FC<PlanCardBannerProps>;
+//#endregion
+export { PlanCardBanner };
+//# sourceMappingURL=PlanCardBanner.d.ts.map

package/dist/PlanCard/PlanCardBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanCardBanner.d.ts","names":[],"sources":["../../src/PlanCard/PlanCardBanner.tsx"],"mappings":";;;UAKU,mBAAA;EACR,IAAA;EACA,IAAA,GAAO,KAAA,CAAM,SAAA;AAAA;AAAA,cAYF,cAAA,EAAgB,KAAA,CAAM,EAAA,CAAG,mBAAA"}