npm - @primer/react-brand - Versions diffs - 0.68.0-rc.485a3446 → 0.68.0-rc.5601e395 - Mend

@primer/react-brand 0.68.0-rc.485a3446 → 0.68.0-rc.5601e395

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (473) hide show

package/esm/Button/Button.js CHANGED Viewed

@@ -2,7 +2,7 @@ import e from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import { Text as n } from "../Text/Text.js";
 import { ExpandableArrow as r } from "../ExpandableArrow/ExpandableArrow.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-DPvZ0fhp.css';/* empty css                                                                                                    */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-kII0kqk3.css';/* empty css                                                                                                    */
 import i from "./Button.module.js";
 import a, { forwardRef as o, useCallback as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";

package/esm/Button/Button.module-Byz3R1qi.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Button-module__Button___scH9Z{appearance:none;-webkit-user-select:none;user-select:none;vertical-align:middle;border-radius:var(--base-size-6);cursor:pointer;border:solid var(--brand-borderWidth-thin) transparent;box-sizing:border-box;justify-content:center;align-items:center;gap:var(--brand-control-medium-gap);background:0 0;-webkit-text-decoration:none;text-decoration:none;transition:background-color .2s,border-color .2s;display:inline-flex}.Primer_Brand__Button-module__Button___scH9Z:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Button-module__Button___scH9Z:focus-visible{outline:4px solid var(--brand-color-focus);outline-offset:2px;transition:none}.Primer_Brand__Button-module__Button--disabled___IHZ7f,.Primer_Brand__Button-module__Button--disabled___IHZ7f:hover,.Primer_Brand__Button-module__Button--disabled___IHZ7f:focus{cursor:not-allowed}.Primer_Brand__Button-module__Button--size-small___zQrEw .Primer_Brand__Button-module__Button__text___ED0bX{display:flex}.Primer_Brand__Button-module__Button__text___ED0bX{position:relative}.Primer_Brand__Button-module__Button--label___qrkyz{font-family:var(--brand-body-fontFamily);font-style:normal;font-weight:var(--base-text-weight-medium);text-align:center}.Primer_Brand__Button-module__Button__icon-visual____qybb{height:var(--base-size-16);fill:currentColor;align-self:center;width:auto;display:flex}.Primer_Brand__Button-module__Button__trailing-visual___5i3xR,.Primer_Brand__Button-module__Button__leading-visual___jjtTe{display:flex}.Primer_Brand__Button-module__Button-arrow___F4HtG{margin-inline-start:calc(var(--base-size-8) * -1);margin-inline-end:calc(var(--base-size-4) * -1)}.Primer_Brand__Button-module__Button--primary___MSbnU{color:var(--brand-button-primary-fgColor-rest);background-color:var(--brand-button-primary-bgColor-rest)}.Primer_Brand__Button-module__Button--size-small___zQrEw.Primer_Brand__Button-module__Button--primary___MSbnU{border-width:var(--brand-borderWidth-thin)}.Primer_Brand__Button-module__Button--primary___MSbnU:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-primary-bgColor-hover)}.Primer_Brand__Button-module__Button--primary___MSbnU:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-expanded=true]{background:var(--brand-button-primary-bgColor-active);border-color:var(--brand-button-primary-borderColor-active)}.Primer_Brand__Button-module__Button--label-primary___QX1u5{color:var(--brand-button-primary-fgColor-rest)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true],.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f{background-color:var(--brand-button-primary-bgColor-disabled)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-primary___QX1u5.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-primary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_{background-color:var(--brand-button-secondary-bgColor-rest);border-color:var(--brand-button-secondary-borderColor-rest);color:var(--brand-button-secondary-fgColor-rest);-webkit-backdrop-filter:blur(var(--base-size-20));backdrop-filter:blur(var(--base-size-20))}.Primer_Brand__Button-module__Button--secondary___gHnw_:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-secondary-bgColor-hover);border-color:var(--brand-button-secondary-borderColor-hover)}.Primer_Brand__Button-module__Button--secondary___gHnw_:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-expanded=true]{background-color:var(--brand-button-secondary-bgColor-active);border-color:var(--brand-button-secondary-borderColor-active)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled{border-color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--secondary___gHnw_.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-secondary___eJ0_a.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--subtle___F7pEE{background-color:var(--brand-button-subtle-bgColor-rest);border-width:var(--brand-borderWidth-thin);border-color:var(--brand-button-subtle-borderColor-rest);color:var(--brand-color-text-default);-webkit-backdrop-filter:blur(var(--base-size-20));backdrop-filter:blur(var(--base-size-20))}.Primer_Brand__Button-module__Button--subtle___F7pEE:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-subtle-bgColor-hover);border-color:var(--brand-button-subtle-borderColor-hover)}.Primer_Brand__Button-module__Button--subtle___F7pEE:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-expanded=true]{background-color:var(--brand-button-subtle-bgColor-active);border-color:var(--brand-button-subtle-borderColor-active)}.Primer_Brand__Button-module__Button--label-subtle___8ndWH{color:var(--brand-button-subtle-fgColor-rest)}.Primer_Brand__Button-module__Button--subtle___F7pEE:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--subtle___F7pEE.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-subtle___8ndWH.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-subtle-fgColor-disabled)}.Primer_Brand__Button-module__Button--size-small___zQrEw{min-height:var(--brand-control-small-size);padding-inline:var(--brand-control-small-paddingInline-normal)}.Primer_Brand__Button-module__Button--size-medium___KFmzx{min-height:var(--brand-control-medium-size);padding:var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20)}.Primer_Brand__Button-module__Button--size-large___J6UCI{min-height:var(--brand-control-large-size);padding:var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious)}.Primer_Brand__Button-module__Button--size-large___J6UCI .Primer_Brand__Button-module__Button__icon-visual____qybb,.Primer_Brand__Button-module__Button--size-large___J6UCI .Primer_Brand__Button-module__Button-arrow___F4HtG{height:var(--base-size-20);width:var(--base-size-20)}.Primer_Brand__Button-module__Button--label-medium___ClmeR{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:.01rem}.Primer_Brand__Button-module__Button--label-large___UDxqS{font-size:var(--brand-text-subhead-size-large);line-height:var(--brand-text-subhead-lineHeight-large)}.Primer_Brand__Button-module__Button--block___kCYDx{width:100%}@media (forced-colors:active){.Primer_Brand__Button-module__Button--disabled___IHZ7f{outline-color:graytext}.Primer_Brand__Button-module__Button--label___qrkyz.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:graytext}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Button-module__Button___scH9Z,.Primer_Brand__Button-module__Button___scH9Z:before,.Primer_Brand__Button-module__Button___scH9Z:after,.Primer_Brand__Button-module__Button___scH9Z *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Button/Button.module.js CHANGED Viewed

@@ -1,6 +1,7 @@
-import './Button.module-CDHmNf-Y.css';var e = {
+import './Button.module-Byz3R1qi.css';var e = {
 	Button: "Primer_Brand__Button-module__Button___scH9Z",
 	"Button--disabled": "Primer_Brand__Button-module__Button--disabled___IHZ7f",
+	"Button--size-small": "Primer_Brand__Button-module__Button--size-small___zQrEw",
 	Button__text: "Primer_Brand__Button-module__Button__text___ED0bX",
 	"Button--label": "Primer_Brand__Button-module__Button--label___qrkyz",
 	"Button__icon-visual": "Primer_Brand__Button-module__Button__icon-visual____qybb",
@@ -8,7 +9,6 @@ import './Button.module-CDHmNf-Y.css';var e = {
 	"Button__leading-visual": "Primer_Brand__Button-module__Button__leading-visual___jjtTe",
 	"Button-arrow": "Primer_Brand__Button-module__Button-arrow___F4HtG",
 	"Button--primary": "Primer_Brand__Button-module__Button--primary___MSbnU",
-	"Button--size-small": "Primer_Brand__Button-module__Button--size-small___zQrEw",
 	"Button--label-primary": "Primer_Brand__Button-module__Button--label-primary___QX1u5",
 	"Button-arrow--disabled": "Primer_Brand__Button-module__Button-arrow--disabled___kZpao",
 	"Button__icon-visual--disabled": "Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg",

package/esm/Button/Button.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n appearance: none;\n user-select: none;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n transition: ~~box~~-~~shadow~~ ~~var(--brand~~-~~animation-duration-faster)~~;\n text-decoration: none;\n border-radius: var(--~~brand~~-~~borderRadius~~-~~medium~~);\n cursor: pointer;\n border: solid var(--brand-borderWidth-~~thick~~) transparent;\n background: none;\n display: inline-flex;\n gap: var(--brand-control-medium-gap);\n}\n\n.Button:hover {\n text-decoration: none;\n}\n\n.Button:focus-visible {\n transition: none;\n outline: 4px solid var(--brand-color-focus);\n outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n cursor: not-allowed;\n}\n\n.Button__text {\n position: relative;\n}\n\n.Button--label {\n font-family: var(--brand-body-fontFamily);\n font-style: normal;\n font-weight: var(--base-text-weight-medium);\n text-align: center;\n}\n\n.Button__icon-visual {\n display: flex;\n align-self: center;\n height: var(--base-size-16);\n width: auto;\n fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding /\n/ reduce gap between label and arrow /\n.Button-arrow {\n margin-inline-end: calc(var(--base-size-4) -1);\n margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary /\n\n.Button--primary {\n color: var(--brand-button-primary-fgColor-rest);\n background-color: var(--brand-button-primary-bgColor-rest);\n}\n\n.Button--size-small.Button--primary {\n border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background: var(--brand-button-primary-bgColor-hover);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--primary[aria-expanded='true'] {\n background: var(--brand-button-primary-bgColor-active);\n border-color: var(--brand-button-primary-borderColor-active);\n}\n\n.Button--label-primary {\n color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n background-color: var(--brand-button-primary-bgColor-disabled);\n}\n\n.Button--primary:disabled .Button-arrow--disabled,\n.Button--primary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--primary.Button--disabled .Button-arrow--disabled,\n.Button--primary:disabled .Button__icon-visual--disabled,\n.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--primary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-primary.Button-label--disabled {\n color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/ secondary /\n\n.Button--secondary {\n ~~transition:~~ background ~~var(--brand~~-~~animation-duration-faster), border-~~color ~~var(--brand-animation-duration-faster);\n background~~: var(--brand-button-secondary-bgColor-rest);\n border-color: var(--brand-button-secondary-borderColor-rest);\n color: var(--brand-button-secondary-fgColor-rest);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background: var(--brand-button-secondary-bgColor-hover);\n border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--secondary[aria-expanded='true'] {\n background: var(--brand-button-secondary-bgColor-active);\n border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:disabled .Button-arrow--disabled,\n.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--secondary.Button--disabled .Button-arrow--disabled,\n.Button--secondary:disabled .Button__icon-visual--disabled,\n.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--secondary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-secondary.Button-label--disabled {\n color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/ subtle /\n\n.Button--subtle {\n ~~transition:~~ background ~~var(--brand~~-~~animation-duration-faster), border-~~color ~~var(--brand-animation-duration-faster);\n background~~: var(--brand-button-subtle-bgColor-rest);\n border-width: var(--brand-borderWidth-thin);\n border-color: var(--brand-button-subtle-borderColor-rest);\n color: var(--brand-color-text-default);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background: var(--brand-button-subtle-bgColor-hover);\n border-color: var(--brand-button-subtle-borderColor-hover);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--subtle[aria-expanded='true'] {\n background: var(--brand-button-subtle-bgColor-active);\n border-color: var(--brand-button-subtle-borderColor-active);\n}\n\n.Button--label-subtle {\n color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:disabled .Button-arrow--disabled,\n.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,\n.Button--subtle.Button--disabled .Button-arrow--disabled,\n.Button--subtle:disabled .Button__icon-visual--disabled,\n.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--subtle.Button--disabled .Button__icon-visual--disabled,\n.Button--label-subtle.Button-label--disabled {\n color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/ size /\n\n.Button--size-small {\n min-height: var(--brand-control-small-size);\n padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n min-height: var(--brand-control-medium-size);\n padding: var(--brand-control-medium-paddingBlock-condensed) var(--~~brand~~-~~control~~-~~medium-paddingInline-spacious~~);\n}\n\n.Button--size-large {\n min-height: var(--brand-control-large-size);\n padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n.Button--size-large .Button__icon-visual,\n.Button--size-large .Button-arrow {\n height: var(--base-size-20);\n width: var(--base-size-20);\n}\n\n.Button--label-medium {\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: 0.01rem;\n}\n\n.Button--label-large {\n font-size: var(--brand-text-subhead-size-large);\n line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n width: 100%;\n}\n\n@media (forced-colors: active) {\n .Button--disabled {\n outline-color: GrayText;\n }\n\n / Indicates disabled state in WHCM /\n .Button--label.Button-label--disabled {\n color: GrayText;\n }\n}\n\n/ Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Button,\n .Button::before,\n .Button::after,\n .Button {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n appearance: none;\n user-select: none;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s, border-color 0.2s;\n text-decoration: none;\n border-radius: var(--base-size-6);\n cursor: pointer;\n border: solid var(--brand-borderWidth-thin) transparent;\n background: none;\n box-sizing: border-box;\n display: inline-flex;\n gap: var(--brand-control-medium-gap);\n}\n\n.Button:hover {\n text-decoration: none;\n}\n\n.Button:focus-visible {\n transition: none;\n outline: 4px solid var(--brand-color-focus);\n outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n cursor: not-allowed;\n}\n\n.Button--size-small .Button__text {\n display: flex;\n}\n\n.Button__text {\n position: relative;\n}\n\n.Button--label {\n font-family: var(--brand-body-fontFamily);\n font-style: normal;\n font-weight: var(--base-text-weight-medium);\n text-align: center;\n}\n\n.Button__icon-visual {\n display: flex;\n align-self: center;\n height: var(--base-size-16);\n width: auto;\n fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding /\n/ reduce gap between label and arrow /\n.Button-arrow {\n margin-inline-end: calc(var(--base-size-4) -1);\n margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary /\n\n.Button--primary {\n color: var(--brand-button-primary-fgColor-rest);\n background-color: var(--brand-button-primary-bgColor-rest);\n}\n\n.Button--size-small.Button--primary {\n border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-primary-bgColor-hover);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--primary[aria-expanded='true'] {\n background: var(--brand-button-primary-bgColor-active);\n border-color: var(--brand-button-primary-borderColor-active);\n}\n\n.Button--label-primary {\n color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n background-color: var(--brand-button-primary-bgColor-disabled);\n}\n\n.Button--primary:disabled .Button-arrow--disabled,\n.Button--primary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--primary.Button--disabled .Button-arrow--disabled,\n.Button--primary:disabled .Button__icon-visual--disabled,\n.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--primary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-primary.Button-label--disabled {\n color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/ secondary /\n\n.Button--secondary {\n background-color: var(--brand-button-secondary-bgColor-rest);\n border-color: var(--brand-button-secondary-borderColor-rest);\n color: var(--brand-button-secondary-fgColor-rest);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-secondary-bgColor-hover);\n border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--secondary[aria-expanded='true'] {\n background-color: var(--brand-button-secondary-bgColor-active);\n border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:disabled .Button-arrow--disabled,\n.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--secondary.Button--disabled .Button-arrow--disabled,\n.Button--secondary:disabled .Button__icon-visual--disabled,\n.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--secondary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-secondary.Button-label--disabled {\n color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/ subtle /\n\n.Button--subtle {\n background-color: var(--brand-button-subtle-bgColor-rest);\n border-width: var(--brand-borderWidth-thin);\n border-color: var(--brand-button-subtle-borderColor-rest);\n color: var(--brand-color-text-default);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-subtle-bgColor-hover);\n border-color: var(--brand-button-subtle-borderColor-hover);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--subtle[aria-expanded='true'] {\n background-color: var(--brand-button-subtle-bgColor-active);\n border-color: var(--brand-button-subtle-borderColor-active);\n}\n\n.Button--label-subtle {\n color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:disabled .Button-arrow--disabled,\n.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,\n.Button--subtle.Button--disabled .Button-arrow--disabled,\n.Button--subtle:disabled .Button__icon-visual--disabled,\n.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--subtle.Button--disabled .Button__icon-visual--disabled,\n.Button--label-subtle.Button-label--disabled {\n color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/ size /\n\n.Button--size-small {\n min-height: var(--brand-control-small-size);\n padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n min-height: var(--brand-control-medium-size);\n padding: var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20);\n}\n\n.Button--size-large {\n min-height: var(--brand-control-large-size);\n padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n.Button--size-large .Button__icon-visual,\n.Button--size-large .Button-arrow {\n height: var(--base-size-20);\n width: var(--base-size-20);\n}\n\n.Button--label-medium {\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: 0.01rem;\n}\n\n.Button--label-large {\n font-size: var(--brand-text-subhead-size-large);\n line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n width: 100%;\n}\n\n@media (forced-colors: active) {\n .Button--disabled {\n outline-color: GrayText;\n }\n\n / Indicates disabled state in WHCM /\n .Button--label.Button-label--disabled {\n color: GrayText;\n }\n}\n\n/ Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Button,\n .Button::before,\n .Button::after,\n .Button {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/Hero/{Hero.module-b8OFm8Ci.css → Hero.module-DvYo_AtL.css} RENAMED Viewed

	@@ -1 +1 @@
1	- .Primer_Brand__Hero-module__Hero___It6gj{flex-direction:column;display:flex}.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-narrow-padding)}.Primer_Brand__Hero-module__Hero--align-start___ouSp3{text-align:left;align-items:flex-start}.Primer_Brand__Hero-module__Hero--align-center___6FMoH{text-align:center;place-items:center}.Primer_Brand__Hero-module__Hero-grid___gXNGW{--brand-Grid-spacing-margin:0}.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{width:100%;max-width:1280px;padding:var(--base-size-32);background-color:var(--brand-Hero-bgColor-gridlineGridInner);margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V,.Primer_Brand__Hero-module__Hero-grid--inline-end___o8Dtq{--brand-Grid-spacing-row:var(--base-size-40)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{padding:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V{--brand-Grid-spacing-row:var(--base-size-80)}}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-actions___RUotq{justify-content:center}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-content___lpGj0{flex-direction:column;align-items:center;display:flex}.Primer_Brand__Hero-module__Hero-image___GC10l{border-radius:var(--brand-borderRadius-medium);width:100%}.Primer_Brand__Hero-module__Hero-mediaContainer___DWFUR{flex:1;width:100%;height:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageContainer--bg-subtle___RFNq3{background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-32);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{justify-content:center;width:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{background-color:var(--brand-color-canvas-subtle);align-items:stretch;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{min-height:calc(600px - var(--base-size-24))}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero-media-item--block-end___RrUWM{border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI{border-radius:var(--brand-borderRadius-medium)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{width:100%;max-width:1280px;margin-inline:auto}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{min-height:440px}}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh.Primer_Brand__Hero-module__Hero--image-pos-inline___fwJAZ{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-32);flex-direction:column;justify-content:center;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline___TD4jr:not(.Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk),.Primer_Brand__Hero-module__Hero-media-item--inline___3XHJG{border-radius:0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk{align-self:center;max-width:100%;height:auto}.Primer_Brand__Hero-module__Hero-video___Ne5zN{width:100%}.Primer_Brand__Hero-module__Hero-media-item___Ia3pn{border-radius:var(--brand-borderRadius-large);width:100%}.Primer_Brand__Hero-module__Hero-label___XJftM{text-transform:uppercase;letter-spacing:1px;align-items:center;margin-block-end:var(--base-size-16);display:flex}.Primer_Brand__Hero-module__Hero-heading___HMve3{max-width:924px;margin:0}.Primer_Brand__Hero-module__Hero-heading___HMve3 b{color:var(--brand-color-accent-primary);font-style:normal;font-weight:inherit}.Primer_Brand__Hero-module__Hero-heading--fullWidth___sJlnY{max-width:none;max-width:initial}.Primer_Brand__Hero-module__Hero-text-column--inline-gridline___gGhfi{height:100%}.Primer_Brand__Hero-module__Hero-description___7raSC{margin:var(--base-size-24) 0 0;max-width:600px}.Primer_Brand__Hero-module__Hero--variant-inline-gridline___Jwjqy .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:auto;padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:center;gap:var(--base-size-8) var(--base-size-16);flex-wrap:wrap;margin-block-start:var(--base-size-32);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:stretch;gap:var(--base-size-8) var(--base-size-12)}.Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-eyebrow___mlxSE{margin-block-end:var(--base-size-32)}@media screen and (width>=34rem){.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-regular-padding)}}.Primer_Brand__Hero-module__Hero-video-poster-button___mtbvt{cursor:pointer;background:0 0;border:none;width:100%;height:100%;padding:0;font-size:0;line-height:0;display:block;position:relative}.Primer_Brand__Hero-module__Hero-video-poster-image___ZP3Q5{width:100%;height:auto;display:block}.Primer_Brand__Hero-module__Hero-video-poster-icon___PfT4p{width:var(--base-size-96);height:var(--base-size-96);z-index:1;color:var(--base-color-scale-white-0);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__Hero-module__Hero-video-poster-header___13M9x{padding:var(--base-size-16) var(--base-size-24);align-items:center;gap:var(--base-size-16);height:var(--base-size-80);background:linear-gradient(#000000b3 60%,#0000);display:flex;position:absolute;inset:0 0 auto}.Primer_Brand__Hero-module__Hero-video-header-poster-icon___tlEff,.Primer_Brand__Hero-module__Hero-video-poster-text___4R755{color:var(--base-color-scale-white-0)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{--brand-Grid-spacing-row:0;gap:0;width:100%;max-width:1280px;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-32);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;padding-block-end:var(--base-size-24);display:flex}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-32);padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-24)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-64);border-block-end:none;border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline-end:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-64);flex-direction:column;justify-content:flex-end;padding-inline-start:var(--base-size-64);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-image___GC10l:not(.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI){border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}
1	+ .Primer_Brand__Hero-module__Hero___It6gj{flex-direction:column;display:flex}.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-narrow-padding)}.Primer_Brand__Hero-module__Hero--align-start___ouSp3{text-align:left;align-items:flex-start}.Primer_Brand__Hero-module__Hero--align-center___6FMoH{text-align:center;place-items:center}.Primer_Brand__Hero-module__Hero-grid___gXNGW{--brand-Grid-spacing-margin:0}.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{width:100%;max-width:1280px;padding:var(--base-size-32);background-color:var(--brand-Hero-bgColor-gridlineGridInner);margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V,.Primer_Brand__Hero-module__Hero-grid--inline-end___o8Dtq{--brand-Grid-spacing-row:var(--base-size-40)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{padding:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V{--brand-Grid-spacing-row:var(--base-size-80)}}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-actions___RUotq{justify-content:center}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-content___lpGj0{flex-direction:column;align-items:center;display:flex}.Primer_Brand__Hero-module__Hero-image___GC10l{border-radius:var(--brand-borderRadius-medium);width:100%}.Primer_Brand__Hero-module__Hero-mediaContainer___DWFUR{flex:1;width:100%;height:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageContainer--bg-subtle___RFNq3{background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-32);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{justify-content:center;width:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{background-color:var(--brand-color-canvas-subtle);align-items:stretch;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{min-height:calc(600px - var(--base-size-24))}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero-media-item--block-end___RrUWM{border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI{border-radius:var(--brand-borderRadius-medium)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{width:100%;max-width:1280px;margin-inline:auto}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{min-height:440px}}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh.Primer_Brand__Hero-module__Hero--image-pos-inline___fwJAZ{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-32);flex-direction:column;justify-content:center;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline___TD4jr:not(.Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk),.Primer_Brand__Hero-module__Hero-media-item--inline___3XHJG{border-radius:0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk{align-self:center;max-width:100%;height:auto}.Primer_Brand__Hero-module__Hero-video___Ne5zN{width:100%}.Primer_Brand__Hero-module__Hero-media-item___Ia3pn{border-radius:var(--brand-borderRadius-large);width:100%}.Primer_Brand__Hero-module__Hero-label___XJftM{text-transform:uppercase;letter-spacing:1px;align-items:center;margin-block-end:calc(var(--base-size-16) - var(--base-size-2));display:flex}.Primer_Brand__Hero-module__Hero-heading___HMve3{max-width:924px;margin:0}.Primer_Brand__Hero-module__Hero-heading___HMve3 b{color:var(--brand-color-accent-primary);font-style:normal;font-weight:inherit}.Primer_Brand__Hero-module__Hero-heading--fullWidth___sJlnY{max-width:none;max-width:initial}.Primer_Brand__Hero-module__Hero-text-column--inline-gridline___gGhfi{height:100%}.Primer_Brand__Hero-module__Hero-description___7raSC{margin:var(--base-size-24) 0 0;max-width:600px}.Primer_Brand__Hero-module__Hero--variant-inline-gridline___Jwjqy .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:auto;padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:center;gap:var(--base-size-8) var(--base-size-16);flex-wrap:wrap;margin-block-start:var(--base-size-32);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:stretch;gap:var(--base-size-8) var(--base-size-12)}.Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-eyebrow___mlxSE{margin-block-end:var(--base-size-32)}@media screen and (width>=34rem){.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-regular-padding)}}.Primer_Brand__Hero-module__Hero-video-poster-button___mtbvt{cursor:pointer;background:0 0;border:none;width:100%;height:100%;padding:0;font-size:0;line-height:0;display:block;position:relative}.Primer_Brand__Hero-module__Hero-video-poster-image___ZP3Q5{width:100%;height:auto;display:block}.Primer_Brand__Hero-module__Hero-video-poster-icon___PfT4p{width:var(--base-size-96);height:var(--base-size-96);z-index:1;color:var(--base-color-scale-white-0);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__Hero-module__Hero-video-poster-header___13M9x{padding:var(--base-size-16) var(--base-size-24);align-items:center;gap:var(--base-size-16);height:var(--base-size-80);background:linear-gradient(#000000b3 60%,#0000);display:flex;position:absolute;inset:0 0 auto}.Primer_Brand__Hero-module__Hero-video-header-poster-icon___tlEff,.Primer_Brand__Hero-module__Hero-video-poster-text___4R755{color:var(--base-color-scale-white-0)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{--brand-Grid-spacing-row:0;gap:0;width:100%;max-width:1280px;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-32);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;padding-block-end:var(--base-size-24);display:flex}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-32);padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-24)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-64);border-block-end:none;border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline-end:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-64);flex-direction:column;justify-content:flex-end;padding-inline-start:var(--base-size-64);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-image___GC10l:not(.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI){border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}

package/esm/Hero/Hero.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Hero.module-b8OFm8Ci.css';var e = {
+import './Hero.module-DvYo_AtL.css';var e = {
 	Hero: "Primer_Brand__Hero-module__Hero___It6gj",
 	"Hero--variant-default": "Primer_Brand__Hero-module__Hero--variant-default___lNgHw",
 	"Hero--align-start": "Primer_Brand__Hero-module__Hero--align-start___ouSp3",

package/esm/Hero/Hero.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n display: flex;\n flex-direction: column;\n}\n\n.Hero--variant-default {\n padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n align-items: flex-start;\n text-align: left;\n}\n\n.Hero--align-center {\n justify-items: center;\n align-items: center;\n text-align: center;\n}\n\n.Hero-grid {\n --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32);\n background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed /\n}\n\n/ Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width. /\n@container (min-width: 1280px) {\n .Hero-grid--contained {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--contained {\n padding: var(--base-size-64);\n }\n\n .Hero-grid--block-end {\n --brand-Grid-spacing-row: var(--base-size-80);\n }\n}\n\n.Hero--align-center .Hero-actions {\n justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.Hero-image {\n border-radius: var(--brand-borderRadius-medium);\n width: 100%;\n}\n\n.Hero-mediaContainer {\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-32);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n background-color: var(--brand-color-canvas-subtle);\n display: flex;\n align-items: stretch;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-imageContainer--inline-bordered {\n min-height: calc(600px - var(--base-size-24));\n }\n\n .Hero-imageWrapper--bg-subtle {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-64);\n }\n}\n\n.Hero--variant-gridline {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Shared media styles for images and videos /\n.Hero--variant-gridline .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/ Applied directly to video/iframe elements for block-end position /\n.Hero-media-item--block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n.Hero-media--pos-block-end-padded {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ GridLine variant with inline (side-by-side) layout /\n.Hero-grid--bordered-inline {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--bordered-inline {\n min-height: 440px;\n }\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--bordered-inline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/ Text column styling for gridline inline positions /\n.Hero-contentColumn--bordered-inline {\n padding: var(--base-size-32);\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-contentColumn--bordered-inline {\n padding: var(--base-size-64);\n }\n}\n\n/ Media styling for gridline inline positions /\n\n/ Edge-to-edge inline media (no padding) - remove border radius /\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {\n border-radius: 0;\n}\n\n/ Applied directly to video/iframe elements for inline position /\n.Hero-media-item--inline {\n border-radius: 0;\n}\n\n/ Padded inline media - constrain size and center /\n.Hero--variant-gridline .Hero-media--pos-inline-padded {\n max-width: 100%;\n height: auto;\n align-self: center;\n}\n\n/ Image column styling now handled by .Hero-imageContainer--inline-bordered /\n\n.Hero-video {\n width: 100%;\n}\n\n/ Base styles for video/iframe media elements /\n.Hero-media-item {\n width: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-block-end: var(--base-size-16);\n display: flex;\n align-items: center;\n}\n\n.Hero-heading {\n margin: 0;\n max-width: 924px;\n}\n\n.Hero-heading b {\n color: var(--brand-color-accent-primary);\n font-style: normal;\n font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n height: 100%;\n}\n\n.Hero-description {\n margin: var(--base-size-24) 0 0;\n max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n padding-block-start: var(--base-size-24);\n margin-block-start: auto;\n}\n\n.Hero-actions {\n margin-block-start: var(--base-size-32);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n align-items: stretch;\n gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n margin-block-end: var(--base-size-32);\n}\n\n/ Small breakpoint and up /\n@media screen and (min-width: 34rem) {\n .Hero--variant-default {\n padding: var(--brand-Hero-regular-padding);\n }\n}\n\n.Hero-video-poster-button {\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n display: block;\n height: 100%;\n position: relative;\n line-height: 0;\n font-size: 0;\n width: 100%;\n}\n\n.Hero-video-poster-image {\n display: block;\n height: auto;\n width: 100%;\n}\n\n.Hero-video-poster-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--base-size-96);\n height: var(--base-size-96);\n z-index: 1;\n color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n position: absolute;\n inset: 0 0 auto;\n padding: var(--base-size-16) var(--base-size-24);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n color: var(--base-color-scale-white-0);\n}\n\n/ ========================================\n Gridline-Expressive Variant\n ======================================== /\n\n.Hero--variant-gridline-expressive {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Grid container for expressive variant /\n.Hero-grid--expressive {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n gap: 0;\n --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--expressive {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n/ Header column (eyebrow, heading) /\n.Hero-expressive-header-column {\n padding: var(--base-size-32);\n padding-block-end: var(--base-size-24);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n display: flex;\n align-items: center;\n}\n\n/ Body column (description, actions, trailing) /\n.Hero-expressive-body-column {\n padding: var(--base-size-32);\n padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-24);\n}\n\n/ Desktop: Side-by-side layout with vertical divider /\n@media screen and (min-width: 63.25rem) {\n .Hero-expressive-header-column {\n padding: var(--base-size-64);\n padding-inline-end: var(--base-size-64);\n border-block-end: none;\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .Hero-expressive-body-column {\n padding: var(--base-size-64);\n padding-inline-start: var(--base-size-64);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n .Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-32);\n }\n\n .Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-32);\n }\n}\n\n/ Media wrapper styles for gridline-expressive (same as gridline) /\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive .Hero-media--pos-block-end,\n.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n display: flex;\n flex-direction: column;\n}\n\n.Hero--variant-default {\n padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n align-items: flex-start;\n text-align: left;\n}\n\n.Hero--align-center {\n justify-items: center;\n align-items: center;\n text-align: center;\n}\n\n.Hero-grid {\n --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32);\n background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed /\n}\n\n/ Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width. /\n@container (min-width: 1280px) {\n .Hero-grid--contained {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--contained {\n padding: var(--base-size-64);\n }\n\n .Hero-grid--block-end {\n --brand-Grid-spacing-row: var(--base-size-80);\n }\n}\n\n.Hero--align-center .Hero-actions {\n justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.Hero-image {\n border-radius: var(--brand-borderRadius-medium);\n width: 100%;\n}\n\n.Hero-mediaContainer {\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-32);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n background-color: var(--brand-color-canvas-subtle);\n display: flex;\n align-items: stretch;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-imageContainer--inline-bordered {\n min-height: calc(600px - var(--base-size-24));\n }\n\n .Hero-imageWrapper--bg-subtle {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-64);\n }\n}\n\n.Hero--variant-gridline {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Shared media styles for images and videos /\n.Hero--variant-gridline .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/ Applied directly to video/iframe elements for block-end position /\n.Hero-media-item--block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n.Hero-media--pos-block-end-padded {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ GridLine variant with inline (side-by-side) layout /\n.Hero-grid--bordered-inline {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--bordered-inline {\n min-height: 440px;\n }\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--bordered-inline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/ Text column styling for gridline inline positions /\n.Hero-contentColumn--bordered-inline {\n padding: var(--base-size-32);\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-contentColumn--bordered-inline {\n padding: var(--base-size-64);\n }\n}\n\n/ Media styling for gridline inline positions /\n\n/ Edge-to-edge inline media (no padding) - remove border radius /\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {\n border-radius: 0;\n}\n\n/ Applied directly to video/iframe elements for inline position /\n.Hero-media-item--inline {\n border-radius: 0;\n}\n\n/ Padded inline media - constrain size and center /\n.Hero--variant-gridline .Hero-media--pos-inline-padded {\n max-width: 100%;\n height: auto;\n align-self: center;\n}\n\n/ Image column styling now handled by .Hero-imageContainer--inline-bordered /\n\n.Hero-video {\n width: 100%;\n}\n\n/ Base styles for video/iframe media elements /\n.Hero-media-item {\n width: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-block-end: calc(var(--base-size-16) - var(--base-size-2));\n display: flex;\n align-items: center;\n}\n\n.Hero-heading {\n margin: 0;\n max-width: 924px;\n}\n\n.Hero-heading b {\n color: var(--brand-color-accent-primary);\n font-style: normal;\n font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n height: 100%;\n}\n\n.Hero-description {\n margin: var(--base-size-24) 0 0;\n max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n padding-block-start: var(--base-size-24);\n margin-block-start: auto;\n}\n\n.Hero-actions {\n margin-block-start: var(--base-size-32);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n align-items: stretch;\n gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n margin-block-end: var(--base-size-32);\n}\n\n/ Small breakpoint and up /\n@media screen and (min-width: 34rem) {\n .Hero--variant-default {\n padding: var(--brand-Hero-regular-padding);\n }\n}\n\n.Hero-video-poster-button {\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n display: block;\n height: 100%;\n position: relative;\n line-height: 0;\n font-size: 0;\n width: 100%;\n}\n\n.Hero-video-poster-image {\n display: block;\n height: auto;\n width: 100%;\n}\n\n.Hero-video-poster-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--base-size-96);\n height: var(--base-size-96);\n z-index: 1;\n color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n position: absolute;\n inset: 0 0 auto;\n padding: var(--base-size-16) var(--base-size-24);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n color: var(--base-color-scale-white-0);\n}\n\n/ ========================================\n Gridline-Expressive Variant\n ======================================== /\n\n.Hero--variant-gridline-expressive {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Grid container for expressive variant /\n.Hero-grid--expressive {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n gap: 0;\n --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--expressive {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n/ Header column (eyebrow, heading) /\n.Hero-expressive-header-column {\n padding: var(--base-size-32);\n padding-block-end: var(--base-size-24);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n display: flex;\n align-items: center;\n}\n\n/ Body column (description, actions, trailing) /\n.Hero-expressive-body-column {\n padding: var(--base-size-32);\n padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-24);\n}\n\n/ Desktop: Side-by-side layout with vertical divider /\n@media screen and (min-width: 63.25rem) {\n .Hero-expressive-header-column {\n padding: var(--base-size-64);\n padding-inline-end: var(--base-size-64);\n border-block-end: none;\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .Hero-expressive-body-column {\n padding: var(--base-size-64);\n padding-inline-start: var(--base-size-64);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n .Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-32);\n }\n\n .Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-32);\n }\n}\n\n/ Media wrapper styles for gridline-expressive (same as gridline) /\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive .Hero-media--pos-block-end,\n.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n"],"mappings":""}

package/esm/Icon/Icon.module-UyYnXhrw.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Icon-module__Icon___aJJhk{box-sizing:content-box;padding:0}.Primer_Brand__Icon-module__Icon___aJJhk>svg{display:block}.Primer_Brand__Icon-module__Icon--size-20___j3HnM{width:var(--base-size-20);height:var(--base-size-20)}.Primer_Brand__Icon-module__Icon--size-24___IMNie{width:var(--base-size-24);height:var(--base-size-24)}.Primer_Brand__Icon-module__Icon--size-28___a2UX9{width:var(--base-size-28);height:var(--base-size-28)}.Primer_Brand__Icon-module__Icon--size-32___Tgjny{width:var(--base-size-32);height:var(--base-size-32)}.Primer_Brand__Icon-module__Icon--size-36___BRbWP{width:var(--base-size-36);height:var(--base-size-36)}.Primer_Brand__Icon-module__Icon--size-40___5TwjU{width:var(--base-size-40);height:var(--base-size-40)}.Primer_Brand__Icon-module__Icon--size-44___PjVGi{width:var(--base-size-44);height:var(--base-size-44)}.Primer_Brand__Icon-module__Icon--background___fgUOm{padding:var(--base-size-12);border-radius:var(--base-size-12)}.Primer_Brand__Icon-module__Icon--color-default___vt2u3{color:var(--brand-Icon-color-default)}.Primer_Brand__Icon-module__Icon--background-color-default___oiQxP{background-color:var(--brand-Icon-background-default)}.Primer_Brand__Icon-module__Icon--color-blue___vlDeB{color:var(--brand-Icon-color-blue)}.Primer_Brand__Icon-module__Icon--background-color-blue___kEC8S{background-color:var(--brand-Icon-background-blue)}.Primer_Brand__Icon-module__Icon--color-coral___Oo4Jn{color:var(--brand-Icon-color-coral)}.Primer_Brand__Icon-module__Icon--background-color-coral___tyhtJ{background-color:var(--brand-Icon-background-coral)}.Primer_Brand__Icon-module__Icon--color-green___ufOLM{color:var(--brand-Icon-color-green)}.Primer_Brand__Icon-module__Icon--background-color-green___A2kAi{background-color:var(--brand-Icon-background-green)}.Primer_Brand__Icon-module__Icon--color-gray___dgvUd{color:var(--brand-Icon-color-gray)}.Primer_Brand__Icon-module__Icon--background-color-gray___PqbZM{background-color:var(--brand-Icon-background-gray)}.Primer_Brand__Icon-module__Icon--color-indigo___JOc9i{color:var(--brand-Icon-color-indigo)}.Primer_Brand__Icon-module__Icon--background-color-indigo___JCAKp{background-color:var(--brand-Icon-background-indigo)}.Primer_Brand__Icon-module__Icon--color-lemon___6s8P_{color:var(--brand-Icon-color-lemon)}.Primer_Brand__Icon-module__Icon--background-color-lemon___LVQHh{background-color:var(--brand-Icon-background-lemon)}.Primer_Brand__Icon-module__Icon--color-lime___0sYqH{color:var(--brand-Icon-color-lime)}.Primer_Brand__Icon-module__Icon--background-color-lime___LAPrm{background-color:var(--brand-Icon-background-lime)}.Primer_Brand__Icon-module__Icon--color-orange___gMDpg{color:var(--brand-Icon-color-orange)}.Primer_Brand__Icon-module__Icon--background-color-orange___leM1v{background-color:var(--brand-Icon-background-orange)}.Primer_Brand__Icon-module__Icon--color-pink___ydryY{color:var(--brand-Icon-color-pink)}.Primer_Brand__Icon-module__Icon--background-color-pink___AZFEG{background-color:var(--brand-Icon-background-pink)}.Primer_Brand__Icon-module__Icon--color-purple___2UG4_{color:var(--brand-Icon-color-purple)}.Primer_Brand__Icon-module__Icon--background-color-purple___JrHKk{background-color:var(--brand-Icon-background-purple)}.Primer_Brand__Icon-module__Icon--color-red___lXx5z{color:var(--brand-Icon-color-red)}.Primer_Brand__Icon-module__Icon--background-color-red___qxCqZ{background-color:var(--brand-Icon-background-red)}.Primer_Brand__Icon-module__Icon--color-teal___wzkaS{color:var(--brand-Icon-color-teal)}.Primer_Brand__Icon-module__Icon--background-color-teal___iKPiz{background-color:var(--brand-Icon-background-teal)}.Primer_Brand__Icon-module__Icon--color-yellow___26Zwg{color:var(--brand-Icon-color-yellow)}.Primer_Brand__Icon-module__Icon--background-color-yellow___uFZoS{background-color:var(--brand-Icon-background-yellow)}

package/esm/Icon/Icon.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Icon.module-C1_lP1JO.css';var e = {
+import './Icon.module-UyYnXhrw.css';var e = {
 	Icon: "Primer_Brand__Icon-module__Icon___aJJhk",
 	"Icon--size-20": "Primer_Brand__Icon-module__Icon--size-20___j3HnM",
 	"Icon--size-24": "Primer_Brand__Icon-module__Icon--size-24___IMNie",

package/esm/Icon/Icon.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.module.js","names":[],"sources":["../../src/Icon/Icon.module.css"],"sourcesContent":[".Icon {\n box-sizing: content-box;\n padding: 0;\n}\n\n.Icon > svg {\n display: block; /* Ensure SVG are unaffected by text styles and font metrics, maintaining vertical alignment */\n}\n\n.Icon--size-20 {\n width: var(--base-size-20);\n height: var(--base-size-20);\n}\n\n.Icon--size-24 {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.Icon--size-28 {\n width: var(--base-size-28);\n height: var(--base-size-28);\n}\n\n.Icon--size-32 {\n width: var(--base-size-32);\n height: var(--base-size-32);\n}\n\n.Icon--size-36 {\n width: var(--base-size-36);\n height: var(--base-size-36);\n}\n\n.Icon--size-40 {\n width: var(--base-size-40);\n height: var(--base-size-40);\n}\n\n.Icon--size-44 {\n width: var(--base-size-44);\n height: var(--base-size-44);\n}\n\n.Icon--background {\n padding: var(--base-size-12);\n border-radius: var(--~~brand~~-~~borderRadius~~-~~medium~~);\n}\n\n.Icon--color-default {\n color: var(--brand-Icon-color-default);\n}\n\n.Icon--background-color-default {\n background-color: var(--brand-Icon-background-default);\n}\n\n.Icon--color-blue {\n color: var(--brand-Icon-color-blue);\n}\n\n.Icon--background-color-blue {\n background-color: var(--brand-Icon-background-blue);\n}\n\n.Icon--color-coral {\n color: var(--brand-Icon-color-coral);\n}\n\n.Icon--background-color-coral {\n background-color: var(--brand-Icon-background-coral);\n}\n\n.Icon--color-green {\n color: var(--brand-Icon-color-green);\n}\n\n.Icon--background-color-green {\n background-color: var(--brand-Icon-background-green);\n}\n\n.Icon--color-gray {\n color: var(--brand-Icon-color-gray);\n}\n\n.Icon--background-color-gray {\n background-color: var(--brand-Icon-background-gray);\n}\n\n.Icon--color-indigo {\n color: var(--brand-Icon-color-indigo);\n}\n\n.Icon--background-color-indigo {\n background-color: var(--brand-Icon-background-indigo);\n}\n\n.Icon--color-lemon {\n color: var(--brand-Icon-color-lemon);\n}\n\n.Icon--background-color-lemon {\n background-color: var(--brand-Icon-background-lemon);\n}\n\n.Icon--color-lime {\n color: var(--brand-Icon-color-lime);\n}\n\n.Icon--background-color-lime {\n background-color: var(--brand-Icon-background-lime);\n}\n\n.Icon--color-orange {\n color: var(--brand-Icon-color-orange);\n}\n\n.Icon--background-color-orange {\n background-color: var(--brand-Icon-background-orange);\n}\n\n.Icon--color-pink {\n color: var(--brand-Icon-color-pink);\n}\n\n.Icon--background-color-pink {\n background-color: var(--brand-Icon-background-pink);\n}\n\n.Icon--color-purple {\n color: var(--brand-Icon-color-purple);\n}\n\n.Icon--background-color-purple {\n background-color: var(--brand-Icon-background-purple);\n}\n\n.Icon--color-red {\n color: var(--brand-Icon-color-red);\n}\n\n.Icon--background-color-red {\n background-color: var(--brand-Icon-background-red);\n}\n\n.Icon--color-teal {\n color: var(--brand-Icon-color-teal);\n}\n\n.Icon--background-color-teal {\n background-color: var(--brand-Icon-background-teal);\n}\n\n.Icon--color-yellow {\n color: var(--brand-Icon-color-yellow);\n}\n\n.Icon--background-color-yellow {\n background-color: var(--brand-Icon-background-yellow);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Icon.module.js","names":[],"sources":["../../src/Icon/Icon.module.css"],"sourcesContent":[".Icon {\n box-sizing: content-box;\n padding: 0;\n}\n\n.Icon > svg {\n display: block; /* Ensure SVG are unaffected by text styles and font metrics, maintaining vertical alignment */\n}\n\n.Icon--size-20 {\n width: var(--base-size-20);\n height: var(--base-size-20);\n}\n\n.Icon--size-24 {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.Icon--size-28 {\n width: var(--base-size-28);\n height: var(--base-size-28);\n}\n\n.Icon--size-32 {\n width: var(--base-size-32);\n height: var(--base-size-32);\n}\n\n.Icon--size-36 {\n width: var(--base-size-36);\n height: var(--base-size-36);\n}\n\n.Icon--size-40 {\n width: var(--base-size-40);\n height: var(--base-size-40);\n}\n\n.Icon--size-44 {\n width: var(--base-size-44);\n height: var(--base-size-44);\n}\n\n.Icon--background {\n padding: var(--base-size-12);\n border-radius: var(--base-size-12);\n}\n\n.Icon--color-default {\n color: var(--brand-Icon-color-default);\n}\n\n.Icon--background-color-default {\n background-color: var(--brand-Icon-background-default);\n}\n\n.Icon--color-blue {\n color: var(--brand-Icon-color-blue);\n}\n\n.Icon--background-color-blue {\n background-color: var(--brand-Icon-background-blue);\n}\n\n.Icon--color-coral {\n color: var(--brand-Icon-color-coral);\n}\n\n.Icon--background-color-coral {\n background-color: var(--brand-Icon-background-coral);\n}\n\n.Icon--color-green {\n color: var(--brand-Icon-color-green);\n}\n\n.Icon--background-color-green {\n background-color: var(--brand-Icon-background-green);\n}\n\n.Icon--color-gray {\n color: var(--brand-Icon-color-gray);\n}\n\n.Icon--background-color-gray {\n background-color: var(--brand-Icon-background-gray);\n}\n\n.Icon--color-indigo {\n color: var(--brand-Icon-color-indigo);\n}\n\n.Icon--background-color-indigo {\n background-color: var(--brand-Icon-background-indigo);\n}\n\n.Icon--color-lemon {\n color: var(--brand-Icon-color-lemon);\n}\n\n.Icon--background-color-lemon {\n background-color: var(--brand-Icon-background-lemon);\n}\n\n.Icon--color-lime {\n color: var(--brand-Icon-color-lime);\n}\n\n.Icon--background-color-lime {\n background-color: var(--brand-Icon-background-lime);\n}\n\n.Icon--color-orange {\n color: var(--brand-Icon-color-orange);\n}\n\n.Icon--background-color-orange {\n background-color: var(--brand-Icon-background-orange);\n}\n\n.Icon--color-pink {\n color: var(--brand-Icon-color-pink);\n}\n\n.Icon--background-color-pink {\n background-color: var(--brand-Icon-background-pink);\n}\n\n.Icon--color-purple {\n color: var(--brand-Icon-color-purple);\n}\n\n.Icon--background-color-purple {\n background-color: var(--brand-Icon-background-purple);\n}\n\n.Icon--color-red {\n color: var(--brand-Icon-color-red);\n}\n\n.Icon--background-color-red {\n background-color: var(--brand-Icon-background-red);\n}\n\n.Icon--color-teal {\n color: var(--brand-Icon-color-teal);\n}\n\n.Icon--background-color-teal {\n background-color: var(--brand-Icon-background-teal);\n}\n\n.Icon--color-yellow {\n color: var(--brand-Icon-color-yellow);\n}\n\n.Icon--background-color-yellow {\n background-color: var(--brand-Icon-background-yellow);\n}\n"],"mappings":""}

package/esm/MediaPlaylist/MediaPlaylist.d.ts ADDED Viewed

@@ -0,0 +1,77 @@
+import React from 'react';
+import { type HeadingProps, type TextProps } from '..';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css';
+export type MediaPlaylistProps = React.PropsWithChildren<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+}> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export type MediaPlaylistHeadingProps = React.PropsWithChildren<{
+    as?: Exclude<HeadingProps['as'], 'h1'>;
+}> & BaseProps<HTMLDivElement>;
+type MediaPlaylistHeadingInternalProps = {
+    activeIndex?: number | null;
+    itemCount?: number;
+};
+declare function MediaPlaylistHeading({ activeIndex, as, children, className, id, itemCount, ...props }: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemProps = React.PropsWithChildren<{
+    /**
+     * An optional thumbnail to be shown in the playlist for this item.
+     */
+    thumbnail?: React.ReactNode;
+} & BaseProps<HTMLDivElement>>;
+declare function MediaPlaylistItem({ children }: MediaPlaylistItemProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {
+    children?: React.ReactNode;
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+};
+declare function MediaPlaylistItemHeading({ children, className, description, font, size, title, variant, weight, ...props }: MediaPlaylistItemHeadingProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare function MediaPlaylistItemContent({ children, className, ...props }: MediaPlaylistItemContentProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.
+ */
+export declare const MediaPlaylist: React.ForwardRefExoticComponent<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>> & {
+    Heading: typeof MediaPlaylistHeading;
+    Item: typeof MediaPlaylistItem;
+    ItemHeading: typeof MediaPlaylistItemHeading;
+    ItemContent: typeof MediaPlaylistItemContent;
+    ItemMedia: React.ForwardRefExoticComponent<MediaPlaylistItemMediaProps & React.RefAttributes<HTMLDivElement>>;
+    testIds: {
+        root: string;
+    };
+};
+export {};
+//# sourceMappingURL=MediaPlaylist.d.ts.map

package/esm/MediaPlaylist/MediaPlaylist.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MediaPlaylist.d.ts","sourceRoot":"","sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,IAAI,CAAA;AAKnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD;;GAEG;AACH,OAAO,kHAAkH,CAAA;AAOzH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACvD;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AA6HxD,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC9D,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,CAAC,GACA,SAAS,CAAC,cAAc,CAAC,CAAA;AAE3B,KAAK,iCAAiC,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,iBAAS,oBAAoB,CAAC,EAC5B,WAAkB,EAClB,EAAS,EACT,QAAQ,EACR,SAAS,EACT,EAAE,EACF,SAAa,EACb,GAAG,KAAK,EACT,EAAE,yBAAyB,GAAG,iCAAiC,2CAa/D;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAC1D;IACE;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,GAAG,SAAS,CAAC,cAAc,CAAC,CAC9B,CAAA;AAED,iBAAS,iBAAiB,CAAC,EAAC,QAAQ,EAAC,EAAE,sBAAsB,2CAE5D;AAED,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,iBAAS,wBAAwB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAkB,EAClB,IAAY,EACZ,KAAK,EACL,OAAmB,EACnB,MAAiB,EACjB,GAAG,KAAK,EACT,EAAE,6BAA6B,2CA4B/B;AAED,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,iBAAS,wBAAwB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,6BAA6B,2CAM/F;AAED,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAyB9E;;GAEG;AACH,eAAO,MAAM,aAAa;IA7QxB;;OAEG;2BACoB,MAAM;IAC7B;;OAEG;oBACa,MAAM;IACtB;;OAEG;eACQ,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;oBAC1B,MAAM;;;;;;;;;;;;CAwQtB,CAAA"}

package/esm/MediaPlaylist/MediaPlaylist.js ADDED Viewed

@@ -0,0 +1,172 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../hooks/useId.js";
+import { Text as n } from "../Text/Text.js";
+import { Heading as r } from "../Heading/Heading.js";
+import i from "../component-helpers/shared.module.js";
+import { Pagination as a } from "../Pagination/Pagination.js";
+import { useMediaPlaylist as o } from "./useMediaPlaylist.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes-YId8eSZQ.css';/* empty css                                                                                                            */
+import s from "./MediaPlaylist.module.js";
+import { cloneElement as c, forwardRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/MediaPlaylist/MediaPlaylist.tsx
+var p = l(({ children: n, className: r, defaultSelectedIndex: l = 0, onChange: u, selectedIndex: p, "data-testid": m, ...h }, g) => {
+	let _ = t(), { activeIndex: v, currentItemPage: x, getPaginationAttributes: S, getTabListProps: C, getTabPanelProps: w, getTabProps: T, handlePageChange: E, hasOverflowItems: D, headingChild: O, isItemSelected: k, items: A, setItemRef: j, tabListRef: M } = o({
+		children: n,
+		components: y,
+		defaultSelectedIndex: l,
+		onChange: u,
+		selectedIndex: p
+	}), N = O?.props.id ?? `${_}-heading`;
+	!O && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("MediaPlaylist: Heading child is required. This element labels the playlist for assistive technologies.");
+	let P = C(O ? { labelledBy: N } : { label: "Media playlist" });
+	return /* @__PURE__ */ d("div", {
+		ref: g,
+		className: e(s.MediaPlaylist, i.gridline, D && s["MediaPlaylist--overflowItems"], r),
+		"data-testid": m || b.root,
+		...h,
+		children: /* @__PURE__ */ f("div", {
+			className: s.MediaPlaylist__layout,
+			children: [/* @__PURE__ */ f("div", {
+				className: s.MediaPlaylist__playlist,
+				children: [
+					O && c(O, {
+						activeIndex: v,
+						id: N,
+						itemCount: A.length
+					}),
+					/* @__PURE__ */ d("div", {
+						...P,
+						ref: M,
+						className: s.MediaPlaylist__tablist,
+						children: A.map((t, n) => {
+							let r = T(String(n));
+							return /* @__PURE__ */ d("div", {
+								ref: (e) => {
+									j(n, e);
+								},
+								className: e(s.MediaPlaylist__item, k(n) && s["MediaPlaylist__item--selected"], t.className),
+								children: /* @__PURE__ */ d("button", {
+									type: "button",
+									...r,
+									className: s.MediaPlaylist__tab,
+									children: /* @__PURE__ */ f("span", {
+										className: s.MediaPlaylist__tabContent,
+										children: [t.thumbnail && /* @__PURE__ */ d("span", {
+											className: s.MediaPlaylist__thumbnail,
+											children: t.thumbnail
+										}), /* @__PURE__ */ d("span", {
+											className: s.MediaPlaylist__itemHeadingContent,
+											children: t.heading
+										})]
+									})
+								})
+							}, n);
+						})
+					}),
+					D && /* @__PURE__ */ d(a, {
+						className: s.MediaPlaylist__pagination,
+						pageCount: A.length,
+						currentPage: x,
+						onPageChange: E,
+						hrefBuilder: () => "#",
+						pageAttributesBuilder: S,
+						"aria-label": "Media playlist items",
+						showPages: !1
+					})
+				]
+			}), /* @__PURE__ */ d("div", {
+				className: s.MediaPlaylist__mediaPanels,
+				children: A.map((t, n) => /* @__PURE__ */ f("div", {
+					...w(String(n)),
+					tabIndex: -1,
+					className: e(s.MediaPlaylist__mediaPanel, s.MediaPlaylist__panel),
+					children: [t.media, /* @__PURE__ */ d("div", {
+						className: s.MediaPlaylist__panelContent,
+						children: t.content
+					})]
+				}, n))
+			})]
+		})
+	});
+});
+function m({ activeIndex: t = null, as: n = "h3", children: i, className: a, id: o, itemCount: c = 0, ...l }) {
+	return /* @__PURE__ */ f("div", {
+		className: e(s.MediaPlaylist__heading, a),
+		...l,
+		children: [/* @__PURE__ */ d(r, {
+			as: n,
+			id: o,
+			className: s.MediaPlaylist__headingLabel,
+			children: i
+		}), c > 0 && t !== null && /* @__PURE__ */ f("span", {
+			className: s.MediaPlaylist__headingCounter,
+			"aria-live": "polite",
+			children: [
+				t + 1,
+				"/",
+				c
+			]
+		})]
+	});
+}
+function h({ children: e }) {
+	return /* @__PURE__ */ d(u, { children: e });
+}
+function g({ children: t, className: r, description: i, font: a = "mona-sans", size: o = "200", title: c, variant: l = "default", weight: u = "medium", ...p }) {
+	let m = c !== void 0 || i !== void 0, h = c ?? t;
+	return /* @__PURE__ */ d(n, {
+		...p,
+		as: "span",
+		className: e(s.MediaPlaylist__itemHeading, r),
+		font: a,
+		size: o,
+		variant: l,
+		weight: u,
+		children: m ? /* @__PURE__ */ f("span", {
+			className: s.MediaPlaylist__itemHeadingDetails,
+			children: [h && /* @__PURE__ */ d("span", {
+				className: s.MediaPlaylist__itemHeadingTitle,
+				children: h
+			}), i && /* @__PURE__ */ d(n, {
+				as: "span",
+				font: "monospace",
+				size: "100",
+				variant: "muted",
+				children: i
+			})]
+		}) : t
+	});
+}
+function _({ children: t, className: n, ...r }) {
+	return /* @__PURE__ */ d("div", {
+		className: e(s.MediaPlaylist__content, n),
+		...r,
+		children: t
+	});
+}
+var v = l(function({ children: t, className: n, ...r }, i) {
+	return /* @__PURE__ */ d("div", {
+		ref: i,
+		className: e(s.MediaPlaylist__media, n),
+		...r,
+		children: t
+	});
+}), y = {
+	Heading: m,
+	Item: h,
+	ItemHeading: g,
+	ItemContent: _,
+	ItemMedia: v
+}, b = { root: "MediaPlaylist" }, x = Object.assign(p, {
+	Heading: m,
+	Item: h,
+	ItemHeading: g,
+	ItemContent: _,
+	ItemMedia: v,
+	testIds: b
+});
+//#endregion
+export { x as MediaPlaylist };
+//# sourceMappingURL=MediaPlaylist.js.map

package/esm/MediaPlaylist/MediaPlaylist.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MediaPlaylist.js","names":[],"sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"sourcesContent":["import React, {cloneElement, forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Heading, Text, type HeadingProps, type TextProps} from '..'\nimport {Pagination} from '../Pagination'\nimport {useId} from '../hooks/useId'\n\nimport {type MediaPlaylistComponentTypes, useMediaPlaylist} from './useMediaPlaylist'\nimport type {BaseProps} from '../component-helpers'\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css'\n\n/** Main Stylesheet (as a CSS Module) */\n\nimport styles from './MediaPlaylist.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nexport type MediaPlaylistProps = React.PropsWithChildren<{\n /**\n * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.\n */\n defaultSelectedIndex?: number\n /**\n * The index of the currently selected item. This makes the component controlled.\n */\n selectedIndex?: number\n /**\n * Callback fired when the selected index changes.\n */\n onChange?: (selectedIndex: number) => void\n 'data-testid'?: string\n}> &\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>\n\nconst MediaPlaylistRoot = forwardRef<HTMLDivElement, MediaPlaylistProps>(\n ({children, className, defaultSelectedIndex = 0, onChange, selectedIndex, 'data-testid': testId, ...props}, ref) => {\n const uniqueId = useId()\n\n const {\n activeIndex,\n currentItemPage,\n getPaginationAttributes,\n getTabListProps,\n getTabPanelProps,\n getTabProps,\n handlePageChange,\n hasOverflowItems,\n headingChild,\n isItemSelected,\n items,\n setItemRef,\n tabListRef,\n } = useMediaPlaylist({\n children,\n components: mediaPlaylistComponents,\n defaultSelectedIndex,\n onChange,\n selectedIndex,\n })\n\n const headingId = headingChild?.props.id ?? `${uniqueId}-heading`\n\n if (!headingChild && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn(\n 'MediaPlaylist: Heading child is required. This element labels the playlist for assistive technologies.',\n )\n }\n\n const tabListProps = headingChild\n ? getTabListProps({labelledBy: headingId})\n : getTabListProps({label: 'Media playlist'})\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles.MediaPlaylist,\n gridlineStyles.gridline,\n hasOverflowItems && styles['MediaPlaylist--overflowItems'],\n className,\n )}\n data-testid={testId || testIds.root}\n {...props}\n >\n <div className={styles.MediaPlaylist__layout}>\n <div className={styles.MediaPlaylist__playlist}>\n {headingChild &&\n cloneElement(headingChild, {\n activeIndex,\n id: headingId,\n itemCount: items.length,\n })}\n <div {...tabListProps} ref={tabListRef} className={styles.MediaPlaylist__tablist}>\n {items.map((item, index) => {\n const tabProps = getTabProps<HTMLButtonElement>(String(index))\n\n return (\n <div\n key={index}\n ref={element => {\n setItemRef(index, element)\n }}\n className={clsx(\n styles.MediaPlaylist__item,\n isItemSelected(index) && styles['MediaPlaylist__item--selected'],\n item.className,\n )}\n >\n <button type=\"button\" {...tabProps} className={styles.MediaPlaylist__tab}>\n <span className={styles.MediaPlaylist__tabContent}>\n {item.thumbnail && <span className={styles.MediaPlaylist__thumbnail}>{item.thumbnail}</span>}\n <span className={styles.MediaPlaylist__itemHeadingContent}>{item.heading}</span>\n </span>\n </button>\n </div>\n )\n })}\n </div>\n\n {hasOverflowItems && (\n <Pagination\n className={styles.MediaPlaylist__pagination}\n pageCount={items.length}\n currentPage={currentItemPage}\n onPageChange={handlePageChange}\n hrefBuilder={() => '#'}\n pageAttributesBuilder={getPaginationAttributes}\n aria-label=\"Media playlist items\"\n showPages={false}\n />\n )}\n </div>\n\n <div className={styles.MediaPlaylist__mediaPanels}>\n {items.map((item, index) => {\n const panelProps = getTabPanelProps(String(index))\n\n return (\n <div\n key={index}\n {...panelProps}\n tabIndex={-1}\n className={clsx(styles.MediaPlaylist__mediaPanel, styles.MediaPlaylist__panel)}\n >\n {item.media}\n <div className={styles.MediaPlaylist__panelContent}>{item.content}</div>\n </div>\n )\n })}\n </div>\n </div>\n </div>\n )\n },\n)\n\nexport type MediaPlaylistHeadingProps = React.PropsWithChildren<{\n as?: Exclude<HeadingProps['as'], 'h1'>\n}> &\n BaseProps<HTMLDivElement>\n\ntype MediaPlaylistHeadingInternalProps = {\n activeIndex?: number | null\n itemCount?: number\n}\n\nfunction MediaPlaylistHeading({\n activeIndex = null,\n as = 'h3',\n children,\n className,\n id,\n itemCount = 0,\n ...props\n}: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps) {\n return (\n <div className={clsx(styles.MediaPlaylist__heading, className)} {...props}>\n <Heading as={as} id={id} className={styles.MediaPlaylist__headingLabel}>\n {children}\n </Heading>\n {itemCount > 0 && activeIndex !== null && (\n <span className={styles.MediaPlaylist__headingCounter} aria-live=\"polite\">\n {activeIndex + 1}/{itemCount}\n </span>\n )}\n </div>\n )\n}\n\nexport type MediaPlaylistItemProps = React.PropsWithChildren<\n {\n /**\n * An optional thumbnail to be shown in the playlist for this item.\n */\n thumbnail?: React.ReactNode\n } & BaseProps<HTMLDivElement>\n>\n\nfunction MediaPlaylistItem({children}: MediaPlaylistItemProps) {\n return <>{children}</>\n}\n\nexport type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {\n children?: React.ReactNode\n description?: React.ReactNode\n title?: React.ReactNode\n}\n\nfunction MediaPlaylistItemHeading({\n children,\n className,\n description,\n font = 'mona-sans',\n size = '200',\n title,\n variant = 'default',\n weight = 'medium',\n ...props\n}: MediaPlaylistItemHeadingProps) {\n const hasStructuredContent = title !== undefined || description !== undefined\n const headingTitle = title ?? children\n\n return (\n <Text\n {...props}\n as=\"span\"\n className={clsx(styles.MediaPlaylist__itemHeading, className)}\n font={font}\n size={size}\n variant={variant}\n weight={weight}\n >\n {hasStructuredContent ? (\n <span className={styles.MediaPlaylist__itemHeadingDetails}>\n {headingTitle && <span className={styles.MediaPlaylist__itemHeadingTitle}>{headingTitle}</span>}\n {description && (\n <Text as=\"span\" font=\"monospace\" size=\"100\" variant=\"muted\">\n {description}\n </Text>\n )}\n </span>\n ) : (\n children\n )}\n </Text>\n )\n}\n\nexport type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>\n\nfunction MediaPlaylistItemContent({children, className, ...props}: MediaPlaylistItemContentProps) {\n return (\n <div className={clsx(styles.MediaPlaylist__content, className)} {...props}>\n {children}\n </div>\n )\n}\n\nexport type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>\n\nconst MediaPlaylistItemMedia = forwardRef<HTMLDivElement, MediaPlaylistItemMediaProps>(function MediaPlaylistItemMedia(\n {children, className, ...props},\n ref,\n) {\n return (\n <div ref={ref} className={clsx(styles.MediaPlaylist__media, className)} {...props}>\n {children}\n </div>\n )\n})\n\nconst mediaPlaylistComponents = {\n Heading: MediaPlaylistHeading,\n Item: MediaPlaylistItem,\n ItemHeading: MediaPlaylistItemHeading,\n ItemContent: MediaPlaylistItemContent,\n ItemMedia: MediaPlaylistItemMedia,\n} satisfies MediaPlaylistComponentTypes\n\nconst testIds = {\n root: 'MediaPlaylist',\n}\n\n/**\n * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.\n */\nexport const MediaPlaylist = Object.assign(MediaPlaylistRoot, {\n Heading: MediaPlaylistHeading,\n Item: MediaPlaylistItem,\n ItemHeading: MediaPlaylistItemHeading,\n ItemContent: MediaPlaylistItemContent,\n ItemMedia: MediaPlaylistItemMedia,\n testIds,\n})\n"],"mappings":";;;;;;;;;;;;AAoCA,IAAM,IAAoB,GACvB,EAAC,aAAU,cAAW,0BAAuB,GAAG,aAAU,kBAAe,eAAe,GAAQ,GAAG,KAAQ,MAAQ;CAClH,IAAM,IAAW,GAAO,EAElB,EACJ,gBACA,oBACA,4BACA,oBACA,qBACA,gBACA,qBACA,qBACA,iBACA,mBACA,UACA,eACA,kBACE,EAAiB;EACnB;EACA,YAAY;EACZ;EACA;EACA;EACD,CAAC,EAEI,IAAY,GAAc,MAAM,MAAM,GAAG,EAAS;AAExD,CAAI,CAAC,MAAA,QAAA,IAAA,aAA0C,iBAAA,QAAA,IAAA,aAA0C,WAEvF,QAAQ,KACN,yGACD;CAGH,IAAM,IACF,EADiB,IACD,EAAC,YAAY,GAAU,GACvB,EAAC,OAAO,kBAAiB,CAAC;AAE9C,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAO,eACP,EAAe,UACf,KAAoB,EAAO,iCAC3B,EACD;EACD,eAAa,KAAU,EAAQ;EAC/B,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACG,KACC,EAAa,GAAc;MACzB;MACA,IAAI;MACJ,WAAW,EAAM;MAClB,CAAC;KACJ,kBAAC,OAAD;MAAK,GAAI;MAAc,KAAK;MAAY,WAAW,EAAO;gBACvD,EAAM,KAAK,GAAM,MAAU;OAC1B,IAAM,IAAW,EAA+B,OAAO,EAAM,CAAC;AAE9D,cACE,kBAAC,OAAD;QAEE,MAAK,MAAW;AACd,WAAW,GAAO,EAAQ;;QAE5B,WAAW,EACT,EAAO,qBACP,EAAe,EAAM,IAAI,EAAO,kCAChC,EAAK,UACN;kBAED,kBAAC,UAAD;SAAQ,MAAK;SAAS,GAAI;SAAU,WAAW,EAAO;mBACpD,kBAAC,QAAD;UAAM,WAAW,EAAO;oBAAxB,CACG,EAAK,aAAa,kBAAC,QAAD;WAAM,WAAW,EAAO;qBAA2B,EAAK;WAAiB,CAAA,EAC5F,kBAAC,QAAD;WAAM,WAAW,EAAO;qBAAoC,EAAK;WAAe,CAAA,CAC3E;;SACA,CAAA;QACL,EAhBC,EAgBD;QAER;MACE,CAAA;KAEL,KACC,kBAAC,GAAD;MACE,WAAW,EAAO;MAClB,WAAW,EAAM;MACjB,aAAa;MACb,cAAc;MACd,mBAAmB;MACnB,uBAAuB;MACvB,cAAW;MACX,WAAW;MACX,CAAA;KAEA;OAEN,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,KAAK,GAAM,MAId,kBAAC,OAAD;KAEE,GALe,EAAiB,OAAO,EAAM,CAKzC;KACJ,UAAU;KACV,WAAW,EAAK,EAAO,2BAA2B,EAAO,qBAAqB;eAJhF,CAMG,EAAK,OACN,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAA8B,EAAK;MAAc,CAAA,CACpE;OAPC,EAOD,CAER;IACE,CAAA,CACF;;EACF,CAAA;EAGX;AAYD,SAAS,EAAqB,EAC5B,iBAAc,MACd,QAAK,MACL,aACA,cACA,OACA,eAAY,GACZ,GAAG,KAC6D;AAChE,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,wBAAwB,EAAU;EAAE,GAAI;YAApE,CACE,kBAAC,GAAD;GAAa;GAAQ;GAAI,WAAW,EAAO;GACxC;GACO,CAAA,EACT,IAAY,KAAK,MAAgB,QAChC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAA+B,aAAU;aAAjE;IACG,IAAc;IAAE;IAAE;IACd;KAEL;;;AAaV,SAAS,EAAkB,EAAC,eAAmC;AAC7D,QAAO,kBAAA,GAAA,EAAG,aAAY,CAAA;;AASxB,SAAS,EAAyB,EAChC,aACA,cACA,gBACA,UAAO,aACP,UAAO,OACP,UACA,aAAU,WACV,YAAS,UACT,GAAG,KAC6B;CAChC,IAAM,IAAuB,MAAU,KAAA,KAAa,MAAgB,KAAA,GAC9D,IAAe,KAAS;AAE9B,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,IAAG;EACH,WAAW,EAAK,EAAO,4BAA4B,EAAU;EACvD;EACA;EACG;EACD;YAEP,IACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KAAgB,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAkC;IAAoB,CAAA,EAC9F,KACC,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAK;IAAY,MAAK;IAAM,SAAQ;cACjD;IACI,CAAA,CAEJ;OAEP;EAEG,CAAA;;AAMX,SAAS,EAAyB,EAAC,aAAU,cAAW,GAAG,KAAuC;AAChG,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,wBAAwB,EAAU;EAAE,GAAI;EACjE;EACG,CAAA;;AAMV,IAAM,IAAyB,EAAwD,SACrF,EAAC,aAAU,cAAW,GAAG,KACzB,GACA;AACA,QACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAK,EAAO,sBAAsB,EAAU;EAAE,GAAI;EACzE;EACG,CAAA;EAER,EAEI,IAA0B;CAC9B,SAAS;CACT,MAAM;CACN,aAAa;CACb,aAAa;CACb,WAAW;CACZ,EAEK,IAAU,EACd,MAAM,iBACP,EAKY,IAAgB,OAAO,OAAO,GAAmB;CAC5D,SAAS;CACT,MAAM;CACN,aAAa;CACb,aAAa;CACb,WAAW;CACX;CACD,CAAC"}

package/esm/MediaPlaylist/MediaPlaylist.module-BU39a4-W.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{padding-block-start:var(--base-size-36);padding-inline:var(--base-size-20)}@media screen and (width<=63.24rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{width:100%;max-width:38.625rem;margin-inline:auto;padding:0}}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{background:var(--brand-MediaPlaylist-bgColor);flex-direction:column;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:2;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:var(--base-size-48);align-items:center;gap:var(--base-size-8);padding:var(--base-size-12) var(--base-size-16);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);text-transform:uppercase;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingLabel___cOPfs{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;margin:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs{align-items:center;gap:var(--base-size-8);color:var(--brand-color-text-default);display:inline-flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs:before{content:"•";color:var(--brand-color-text-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{width:100%;padding:var(--base-size-16);order:1}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2[hidden]{display:none}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-20);flex-direction:column;width:100%;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr{max-width:var(--brand-Prose-lineLength)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{background-color:var(--base-color-scale-black-0);overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb img,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb picture,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb video,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{width:100%;max-width:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{flex-direction:column;order:2;display:flex;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));overscroll-behavior:contain;scroll-padding-block:var(--base-size-24);overflow-y:auto}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__pagination___mct_v{padding:var(--base-size-12) var(--base-size-16) var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:3;justify-content:center;margin:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-width:0;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));flex-direction:column;flex:none;align-items:flex-start;display:flex;position:relative;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 100%;background-color:var(--brand-color-border-muted);transition:transform var(--brand-animation-duration-fast) ease, background-color var(--brand-animation-duration-fast) ease;position:absolute;inset-block-end:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-muted);margin:0;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G .Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-default)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingContent___pzVd0{flex:auto;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{gap:var(--base-size-4);flex-direction:column;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingTitle___F1sIm{color:inherit;word-wrap:anywhere;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{box-sizing:border-box;width:100%;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));color:inherit;font:inherit;text-align:left;cursor:pointer;padding:var(--base-size-12) var(--base-size-16);background:0 0;border:0;outline:none;flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:flex-start;gap:var(--base-size-12);width:100%;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA{width:var(--base-size-112);block-size:calc(var(--base-size-64) - var(--brand-borderWidth-thin));aspect-ratio:16/9;border-radius:var(--brand-borderRadius-small);background-color:var(--brand-color-canvas-subtle);flex-shrink:0;display:block;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA>*{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-4)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__content___m36IL{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}@media screen and (width>=38.625rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{box-sizing:border-box;width:100%;border-inline:none;max-inline-size:80rem;margin-inline:auto;padding:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{--brand-MediaPlaylist-desktopGutter:3.75rem;--brand-MediaPlaylist-sidebarWidth:27rem;box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(0,27rem);grid-template-areas:"media tabs";grid-template-columns:minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));grid-column-gap:3.75rem;grid-column-gap:var(--brand-MediaPlaylist-desktopGutter);-moz-column-gap:3.75rem;-moz-column-gap:var(--brand-MediaPlaylist-desktopGutter);column-gap:3.75rem;column-gap:var(--brand-MediaPlaylist-desktopGutter);width:100%;padding-inline-start:3.75rem;padding-inline-start:var(--brand-MediaPlaylist-desktopGutter);display:grid}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);flex-direction:column;grid-area:tabs;align-self:stretch;padding-block-start:calc(var(--base-size-48) + var(--base-size-12));display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{padding-block:var(--base-size-80);grid-area:media;justify-content:flex-start;align-items:flex-start;padding-inline:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-40)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{aspect-ratio:16/9;border-radius:var(--base-size-6)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h1+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h2+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h3+p{margin-block-start:var(--base-size-12)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:auto;padding-block-start:var(--base-size-24);padding-block-end:var(--base-size-12);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)));padding-block:var(--base-size-20);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:center}}@media screen and (width>=80rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-inline-end:0}}

package/esm/MediaPlaylist/MediaPlaylist.module.js ADDED Viewed

@@ -0,0 +1,30 @@
+import './MediaPlaylist.module-BU39a4-W.css';var e = {
+	MediaPlaylist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg",
+	MediaPlaylist__layout: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17",
+	MediaPlaylist__playlist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y",
+	MediaPlaylist__heading: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj",
+	MediaPlaylist__headingLabel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingLabel___cOPfs",
+	MediaPlaylist__headingCounter: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs",
+	MediaPlaylist__mediaPanels: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2",
+	MediaPlaylist__mediaPanel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2",
+	MediaPlaylist__panel: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx",
+	MediaPlaylist__panelContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr",
+	MediaPlaylist__media: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb",
+	MediaPlaylist__tablist: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB",
+	"MediaPlaylist--overflowItems": "Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc",
+	MediaPlaylist__pagination: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__pagination___mct_v",
+	MediaPlaylist__item: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C",
+	"MediaPlaylist__item--selected": "Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G",
+	MediaPlaylist__itemHeading: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s",
+	MediaPlaylist__itemHeadingContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingContent___pzVd0",
+	MediaPlaylist__itemHeadingDetails: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu",
+	MediaPlaylist__itemHeadingTitle: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingTitle___F1sIm",
+	MediaPlaylist__tab: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX",
+	MediaPlaylist__tabContent: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ",
+	MediaPlaylist__thumbnail: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA",
+	MediaPlaylist__content: "Primer_Brand__MediaPlaylist-module__MediaPlaylist__content___m36IL"
+};
+//#endregion
+export { e as default };
+//# sourceMappingURL=MediaPlaylist.module.js.map