@happeouikit/content-renderer 3.4.1 → 3.4.2-alpha.1

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 (6) hide show
  1. package/CHANGELOG.md +320 -0
  2. package/dist/index.cjs.js +150 -152
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.es.js +149 -151
  5. package/dist/index.es.js.map +1 -1
  6. package/package.json +2 -3
package/dist/index.es.js CHANGED
@@ -5647,171 +5647,169 @@ const ji = (e) => ` ${e}`.replace(
5647
5647
  margin: 0 auto;
5648
5648
  }
5649
5649
  }
5650
+
5651
+ img {
5652
+ max-width: 100%;
5653
+ margin: 5px;
5654
+ padding: 0;
5655
+ }
5650
5656
 
5651
5657
  // everything-except-pages CSS
5652
- ${({ widgetType: e, inheritBrandingStyles: n }) => e === "page" ? "" : kr`
5653
- * {
5654
- font-family: ${ha};
5655
- }
5656
-
5657
- h1 {
5658
- font-family: ${n ? "var(--channels-h1-font-family, revert)" : "revert"};
5659
- font-weight: ${n ? "var(--channels-h1-font-weight, 500)" : "500"};
5660
- font-size: 24px;
5661
- letter-spacing: -0.5px;
5662
- line-height: 32px;
5663
- + h1,
5664
- + h2,
5665
- + h3,
5666
- + h4,
5667
- + p {
5668
- margin-top: var(--space-md);
5669
- }
5670
- & * {
5671
- font-family: ${n ? "var(--channels-h1-font-family, revert)" : "revert"};
5658
+ ${({ widgetType: e, inheritBrandingStyles: n }) => e !== "page" && kr`
5659
+ * {
5660
+ font-family: ${ha};
5672
5661
  }
5673
- }
5674
- h2 {
5675
- font-family: ${n ? "var(--channels-h2-font-family, revert)" : "revert"};
5676
- font-weight: ${n ? "var(--channels-h2-font-weight, 500)" : "500"};
5677
- font-size: 20px;
5678
- line-height: 28px;
5679
- + h1,
5680
- + h2,
5681
- + h3,
5682
- + h4,
5683
- + p {
5684
- margin-top: var(--space-md);
5685
- }
5686
- & * {
5687
- font-family: ${n ? "var(--channels-h2-font-family, revert)" : "revert"};
5662
+
5663
+ h1 {
5664
+ font-family: ${n ? "var(--channels-h1-font-family, revert)" : "revert"};
5665
+ font-weight: ${n ? "var(--channels-h1-font-weight, 500)" : "500"};
5666
+ font-size: 24px;
5667
+ letter-spacing: -0.5px;
5668
+ line-height: 32px;
5669
+ + h1,
5670
+ + h2,
5671
+ + h3,
5672
+ + h4,
5673
+ + p {
5674
+ margin-top: var(--space-md);
5675
+ }
5676
+ & * {
5677
+ font-family: ${n ? "var(--channels-h1-font-family, revert)" : "revert"};
5678
+ }
5688
5679
  }
5689
- }
5690
- h3 {
5691
- font-family: ${n ? "var(--channels-h3-font-family, revert)" : "revert"};
5692
- font-weight: ${n ? "var(--channels-h3-font-weight, 500)" : "500"};
5693
- font-size: 16px;
5694
- line-height: 24px;
5695
- + h1,
5696
- + h2,
5697
- + h3,
5698
- + h4,
5699
- + p {
5700
- margin-top: var(--space-md-minus);
5680
+ h2 {
5681
+ font-family: ${n ? "var(--channels-h2-font-family, revert)" : "revert"};
5682
+ font-weight: ${n ? "var(--channels-h2-font-weight, 500)" : "500"};
5683
+ font-size: 20px;
5684
+ line-height: 28px;
5685
+ + h1,
5686
+ + h2,
5687
+ + h3,
5688
+ + h4,
5689
+ + p {
5690
+ margin-top: var(--space-md);
5691
+ }
5692
+ & * {
5693
+ font-family: ${n ? "var(--channels-h2-font-family, revert)" : "revert"};
5694
+ }
5701
5695
  }
5702
- & * {
5703
- font-family: ${n ? "var(--channels-h3-font-family, revert);" : "revert"}
5696
+ h3 {
5697
+ font-family: ${n ? "var(--channels-h3-font-family, revert)" : "revert"};
5698
+ font-weight: ${n ? "var(--channels-h3-font-weight, 500)" : "500"};
5699
+ font-size: 16px;
5700
+ line-height: 24px;
5701
+ + h1,
5702
+ + h2,
5703
+ + h3,
5704
+ + h4,
5705
+ + p {
5706
+ margin-top: var(--space-md-minus);
5707
+ }
5708
+ & * {
5709
+ font-family: ${n ? "var(--channels-h3-font-family, revert);" : "revert"}
5710
+ }
5704
5711
  }
5705
- }
5706
- h4 {
5707
- font-size: 16px;
5708
- line-height: 24px;
5709
- + h1,
5710
- + h2,
5711
- + h3,
5712
- + h4,
5713
- + p {
5714
- margin-top: var(--space-md-minus);
5712
+ h4 {
5713
+ font-size: 16px;
5714
+ line-height: 24px;
5715
+ + h1,
5716
+ + h2,
5717
+ + h3,
5718
+ + h4,
5719
+ + p {
5720
+ margin-top: var(--space-md-minus);
5721
+ }
5715
5722
  }
5716
- }
5717
- p {
5718
- font-family: ${n ? "var(--channels-body-font-family, revert)" : "revert"};
5719
- font-weight: ${n ? "var(--channels-body-font-weight, revert)" : "revert"};
5720
- font-size: 16px;
5721
- line-height: 24px;
5722
- letter-spacing: 0px;
5723
- + h1,
5724
- + h2,
5725
- + h3,
5726
- + h4,
5727
- + p {
5728
- margin-top: var(--space-md-minus);
5723
+ p {
5724
+ font-family: ${n ? "var(--channels-body-font-family, revert)" : "revert"};
5725
+ font-weight: ${n ? "var(--channels-body-font-weight, revert)" : "revert"};
5726
+ font-size: 16px;
5727
+ line-height: 24px;
5728
+ letter-spacing: 0;
5729
+ + h1,
5730
+ + h2,
5731
+ + h3,
5732
+ + h4,
5733
+ + p {
5734
+ margin-top: var(--space-md-minus);
5735
+ }
5736
+
5737
+ & * {
5738
+ font-family: ${n ? "var(--channels-body-font-family, revert)" : "revert"};
5739
+ }
5729
5740
  }
5730
-
5731
- & * {
5732
- font-family: ${n ? "var(--channels-body-font-family, revert)" : "revert"};
5741
+ a {
5742
+ color: var(--color-active-primary);
5743
+ text-decoration: none;
5744
+ :hover {
5745
+ text-decoration: underline;
5746
+ }
5733
5747
  }
5734
- }
5735
- }
5736
- a {
5737
- color: var(--color-active-primary);
5738
- text-decoration: none;
5739
- :hover {
5740
- text-decoration: underline;
5748
+ ul {
5749
+ list-style-type: disc;
5741
5750
  }
5742
- }
5743
- ul {
5744
- list-style-type: disc;
5745
- }
5746
- ol {
5747
- list-style-type: decimal;
5748
- counter-reset: item;
5749
- li {
5750
- padding-left: var(--space-md-minus);
5751
- text-indent: -33px;
5752
- list-style-type: none;
5753
- counter-increment: item;
5754
- &:before {
5755
- display: inline-block;
5756
- width: 13px;
5757
- padding-right: var(--space-md);
5758
- padding-left: var(--space-xs-plus);
5759
- font-weight: bold;
5760
- text-align: right;
5761
- content: counter(item) ".";
5751
+ ol {
5752
+ list-style-type: decimal;
5753
+ counter-reset: item;
5754
+ li {
5755
+ padding-left: var(--space-md-minus);
5756
+ text-indent: -33px;
5757
+ list-style-type: none;
5758
+ counter-increment: item;
5759
+ &:before {
5760
+ display: inline-block;
5761
+ width: 13px;
5762
+ padding-right: var(--space-md);
5763
+ padding-left: var(--space-xs-plus);
5764
+ font-weight: bold;
5765
+ text-align: right;
5766
+ content: counter(item) ".";
5767
+ }
5768
+ font-family: ${n ? "var(--channels-body-font-family, revert)" : "revert"};
5769
+ font-weight: ${n ? "var(--channels-body-font-weight, revert)" : "revert"};
5762
5770
  }
5763
- font-family: ${n ? "var(--channels-body-font-family, revert)" : "revert"};
5764
- font-weight: ${n ? "var(--channels-body-font-weight, revert)" : "revert"};
5765
5771
  }
5766
- }
5767
- ol,
5768
- ul {
5769
- font-size: 16px;
5770
- line-height: 24px;
5771
- margin: var(--space-md);
5772
- display: block;
5773
- -webkit-margin-before: var(--space-sm);
5774
- -webkit-margin-after: var(--space-sm);
5775
- -webkit-padding-start: var(--space-sm);
5776
- li,
5777
- li {
5778
- margin-bottom: var(--space-xs-plus);
5779
- padding-left: var(--space-sm-plus);
5780
- > ul,
5781
- > ol {
5782
- -webkit-margin-before: var(--space-sm) !important;
5783
- -webkit-margin-after: var(--space-sm) !important;
5772
+ ol,
5773
+ ul {
5774
+ font-size: 16px;
5775
+ line-height: 24px;
5776
+ margin: var(--space-md);
5777
+ display: block;
5778
+ -webkit-margin-before: var(--space-sm);
5779
+ -webkit-margin-after: var(--space-sm);
5780
+ -webkit-padding-start: var(--space-sm);
5781
+ li,
5782
+ li {
5783
+ margin-bottom: var(--space-xs-plus);
5784
+ padding-left: var(--space-sm-plus);
5785
+ > ul,
5786
+ > ol {
5787
+ -webkit-margin-before: var(--space-sm) !important;
5788
+ -webkit-margin-after: var(--space-sm) !important;
5789
+ }
5790
+
5791
+ font-family: ${n ? "var(--channels-body-font-family, revert);" : "revert"};
5792
+ font-weight: ${n ? "var(--channels-body-font-weight, revert)" : "revert"};
5793
+ }
5794
+
5795
+ &:first-child,
5796
+ &:first-child {
5797
+ -webkit-margin-before: 0;
5798
+ }
5799
+ &:last-child,
5800
+ &:last-child {
5801
+ -webkit-margin-after: 0;
5784
5802
  }
5785
-
5786
- font-family: ${n ? "var(--channels-body-font-family, revert);" : "revert"};
5787
- font-weight: ${n ? "var(--channels-body-font-weight, revert)" : "revert"};
5788
- }
5789
-
5790
- &:first-child,
5791
- &:first-child {
5792
- -webkit-margin-before: 0;
5793
- }
5794
- &:last-child,
5795
- &:last-child {
5796
- -webkit-margin-after: 0;
5797
5803
  }
5798
- }
5799
- hr {
5800
- -webkit-margin-before: var(--space-md);
5801
- -webkit-margin-after: var(--space-md-minus);
5802
- border-color: var(--color-divider);
5803
- border-style: solid;
5804
- height: 0px;
5805
- border-width: 1px 0 0 0;
5806
- }
5807
- img {
5808
- max-width: 100%;
5809
- margin: var(--space-md) 0;
5810
- & + img {
5811
- margin-top: 0;
5804
+ hr {
5805
+ -webkit-margin-before: var(--space-md);
5806
+ -webkit-margin-after: var(--space-md-minus);
5807
+ border-color: var(--color-divider);
5808
+ border-style: solid;
5809
+ height: 0;
5810
+ border-width: 1px 0 0 0;
5812
5811
  }
5813
- }
5814
- .xl-emoji * {
5812
+ .xl-emoji * {
5815
5813
  font-size: 40px;
5816
5814
  line-height: 1.2;
5817
5815
  }
@@ -5933,7 +5931,7 @@ const ji = (e) => ` ${e}`.replace(
5933
5931
  ${be.min.md`
5934
5932
  margin: 30px -150px;
5935
5933
  width: calc(100% + 300px) !important;
5936
- max-width: none;
5934
+ max-width: none !important;
5937
5935
  `}
5938
5936
  img {
5939
5937
  width: 100%;