primer_view_components 0.0.44 → 0.0.45

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8134ca7a0a270e780b58ce74eabd681c4c2d20ace4b45dd0a5a85eff6a21635d
-  data.tar.gz: 8a8bc46d3f161e4398d129881b2ef6a0f1fe8f4a513b6cf82bd8b1c466f36d2d
+  metadata.gz: 8953ba874b51d234f8b42590fb30c2cc073c54ffd3b7a56dad24b9e6aa4d2f26
+  data.tar.gz: a0ac7e3a02d41fde2096547c8c68a91f99c003dee28bcb18a5e0862f46c1058f
 SHA512:
-  metadata.gz: '0557945a7c1e8ce40e117c65c283ecc7b0d2e1480d130586dbc5bc807d4ac084ec776928ac400eaa6c7a2391edb9b22e21c97071b9a499cb7221af78f1c4dbf4'
-  data.tar.gz: 31f974e2c2dc37056d9f67cb8036092521469d1d8e36c694dd02e664df50d7bffc12e6c3308853a89ad6b8a9794cc911196656fd36f5b3e6b4b389ee5fcd6a1e
+  metadata.gz: 89aa1e3a6f977a4bf25675092205034efc9797d275ea9d8e01b7bc50423506f67b2d05ca03a74b69dd3b16b669c6fa68d12b96895647218ca758034ed00d29ab
+  data.tar.gz: 46eead3cd6ae2b57008f2f7699e572029e736c5000dfd480c0cd5f399de7ac6160f746ccfab2d79305216f7e0602fc280b356051cd120e796f88988dde0fe303

data/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 ## main
 
+## 0.0.45
+
+### Updates
+
+* Allow copying from elements using `for` in `ClipboardCopy`.
+
+    *Manuel Puyol*
+
+### Breaking changes
+
+* Remove `label` argument in favor of `aria-label` in `ClipboardCopy`.
+
+    *Manuel Puyol*
+
+### Misc
+
+* Add autocorrect for button linters.
+
+    *Manuel Puyol*
+
+* Unify contributing guidelines.
+
+    *Kate Higa*
+
+* Rerun flaky system tests.
+
+    *Manuel Puyol*
+
+* Check if selector is a classify class in Utilities.
+
+   *Jon Rohan*
+
 ## 0.0.44
 
 ### Updates
@@ -30,6 +62,10 @@
 
 ### Misc
 
+* Replace Classify::Spacing class with pre-generated mappings.
+
+  *Jon Rohan*
+
 * Add linter suggestions for `Button` component.
 
     *Manuel Puyol*

data/app/components/primer/base_component.rb

@@ -93,7 +93,7 @@ module Primer
     # | :- | :- | :- |
     # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :inline_flex, :table, :table_cell]) %> |
     # | `height` | Symbol | <%= one_of([:fit]) %> |
-    # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %> |
+    # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Primer::Classify::Utilities.mappings(:hide)) %> |
     # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
     # | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
     #
@@ -102,7 +102,7 @@ module Primer
     # | Name | Type | Description |
     # | :- | :- | :- |
     # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
-    # | `float` | Symbol | <%= one_of([:left, :right]) %> |
+    # | `float` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:float)) %> |
     # | `left` | Boolean | If `false`, sets `left: 0`. |
     # | `position` | Symbol | <%= one_of([:relative, :absolute, :fixed]) %> |
     # | `right` | Boolean | If `false`, sets `right: 0`. |
@@ -112,20 +112,20 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `m` | Integer | Margin. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:m]) %> |
-    # | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mb]) %> |
-    # | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:ml]) %> |
-    # | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mr]) %> |
-    # | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mt]) %> |
-    # | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mx]) %> |
-    # | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:my]) %> |
-    # | `p` | Integer | Padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:p]) %> |
-    # | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pb]) %> |
-    # | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pl]) %> |
-    # | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pr]) %> |
-    # | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pt]) %> |
-    # | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:px]) %> |
-    # | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:py]) %> |
+    # | `m` | Integer | Margin. <%= one_of(Primer::Classify::Utilities.mappings(:m)) %> |
+    # | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Utilities.mappings(:mb)) %> |
+    # | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Utilities.mappings(:ml)) %> |
+    # | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Utilities.mappings(:mr)) %> |
+    # | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Utilities.mappings(:mt)) %> |
+    # | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Utilities.mappings(:mx)) %> |
+    # | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Utilities.mappings(:my)) %> |
+    # | `p` | Integer | Padding. <%= one_of(Primer::Classify::Utilities.mappings(:p)) %> |
+    # | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Utilities.mappings(:pb)) %> |
+    # | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Utilities.mappings(:pl)) %> |
+    # | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Utilities.mappings(:pr)) %> |
+    # | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Utilities.mappings(:pt)) %> |
+    # | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Utilities.mappings(:px)) %> |
+    # | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Utilities.mappings(:py)) %> |
     #
     # ## Typography
     #

data/app/components/primer/clipboard_copy.rb

@@ -2,25 +2,43 @@
 
 module Primer
   # Use `ClipboardCopy` to copy element text content or input values to the clipboard.
+  #
+  # @accessibility
+  #   Always set an accessible label to help the user interact with the component.
   class ClipboardCopy < Primer::Component
     status :alpha
 
     # @example Default
-    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", label: "Copy text to the system clipboard")) %>
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
     #
     # @example With text instead of icons
-    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", label: "Copy text to the system clipboard")) do %>
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) do %>
     #     Click to copy!
     #   <% end %>
     #
-    # @param label [String] String that will be read to screenreaders when the component is focused
-    # @param value [String] Text to copy into the users clipboard when they click the component
+    # @example Copying from an element
+    #   <%= render(Primer::ClipboardCopy.new(for: "blob-path", "aria-label": "Copy text to the system clipboard")) %>
+    #   <div id="blob-path">src/index.js</div>
+    #
+    # @param aria-label [String] String that will be read to screenreaders when the component is focused
+    # @param value [String] Text to copy into the users clipboard when they click the component.
+    # @param for [String] Element id from where to get the copied value.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, value:, **system_arguments)
+    def initialize(value: nil, **system_arguments)
       @system_arguments = system_arguments
+      @value = value
+
+      validate!
+
       @system_arguments[:tag] = "clipboard-copy"
-      @system_arguments[:value] = value
-      @system_arguments[:"aria-label"] = label
+      @system_arguments[:value] = value if value.present?
+    end
+
+    private
+
+    def validate!
+      validate_aria_label
+      raise ArgumentError, "Must provide either `value` or `for`" if @value.nil? && @system_arguments[:for].nil?
     end
   end
 end

data/app/components/primer/details_menu_component.d.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/components/primer/details_menu_component.js

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/lib/primer/classify.rb

@@ -3,11 +3,20 @@
 module Primer
   # :nodoc:
   class Classify
+    # Load the utilities.yml file.
+    # Disabling because we want to load symbols, strings, and integers from the .yml file
+    # rubocop:disable Security/YAMLLoad
+    UTILITIES = YAML.load(
+      File.read(
+        File.join(File.dirname(__FILE__), "./classify/utilities.yml")
+      )
+    ).freeze
+    # rubocop:enable Security/YAMLLoad
+
     DISPLAY_KEY = :display
-    SPACING_KEYS = Primer::Classify::Spacing::KEYS
 
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = SPACING_KEYS + %i[hide position v float text box_shadow].freeze
+    CONCAT_KEYS = %i[position v text box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
       (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
@@ -25,7 +34,7 @@ module Primer
     CONTAINER_KEY = :container
 
     BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
-    RESPONSIVE_KEYS = ([DISPLAY_KEY, :float, Primer::Classify::Grid::COL_KEY] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
+    RESPONSIVE_KEYS = ([DISPLAY_KEY, Primer::Classify::Grid::COL_KEY] + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
 
     BOOLEAN_MAPPINGS = {
       underline: {
@@ -79,6 +88,7 @@ module Primer
     BORDER_RADIUS_KEY = :border_radius
     TYPOGRAPHY_KEYS = [:font_size].freeze
     VALID_KEYS = (
+      UTILITIES.keys +
       CONCAT_KEYS +
       BOOLEAN_MAPPINGS.keys +
       BORDER_MARGIN_KEYS +
@@ -129,7 +139,7 @@ module Primer
         if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
           invalid_class_names =
             classes.split(" ").each_with_object([]) do |class_name, memo|
-              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
+              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) } || Primer::Classify::Utilities.supported_selector?(class_name)
             end
 
           raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning." if invalid_class_names.any?
@@ -155,7 +165,7 @@ module Primer
           next unless VALID_KEYS.include?(key)
 
           if value.is_a?(Array)
-            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key)
+            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key) || Primer::Classify::Utilities.supported_key?(key)
 
             value.each_with_index do |val, index|
               Primer::Classify::Cache.read(memo, key, val, BREAKPOINTS[index]) || extract_value(memo, key, val, BREAKPOINTS[index])
@@ -173,8 +183,8 @@ module Primer
       def extract_value(memo, key, val, breakpoint)
         return if val.nil? || val == ""
 
-        if SPACING_KEYS.include?(key)
-          memo[:classes] << Primer::Classify::Spacing.spacing(key, val, breakpoint)
+        if Primer::Classify::Utilities.supported_key?(key)
+          memo[:classes] << Primer::Classify::Utilities.classname(key, val, breakpoint)
         elsif BOOLEAN_MAPPINGS.key?(key)
           BOOLEAN_MAPPINGS[key][:mappings].each do |m|
             memo[:classes] << m[:css_class] if m[:value] == val && m[:css_class].present?

data/app/lib/primer/classify/cache.rb

@@ -19,26 +19,6 @@ module Primer
         end
 
         def preload!
-          preload(
-            keys: Primer::Classify::Spacing::MARGIN_DIRECTION_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::MARGIN_DIRECTION_OPTIONS
-          )
-
-          preload(
-            keys: Primer::Classify::Spacing::BASE_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::BASE_OPTIONS
-          )
-
-          preload(
-            keys: Primer::Classify::Spacing::AUTO_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::AUTO_OPTIONS
-          )
-
-          preload(
-            keys: Primer::Classify::Spacing::RESPONSIVE_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::RESPONSIVE_OPTIONS
-          )
-
           preload(
             keys: Primer::Classify::Flex::DIRECTION_KEY,
             values: Primer::Classify::Flex::DIRECTION_VALUES

data/app/lib/primer/classify/utilities.rb

@@ -0,0 +1,137 @@
+# frozen_string_literal: true
+
+# :nodoc:
+module Primer
+  class Classify
+    # Handler for PrimerCSS utility classes loaded from utilities.rake
+    class Utilities
+      class << self
+        def classname(key, val, breakpoint = "")
+          if (valid = validate(key, val, breakpoint))
+            valid
+          else
+            # Get selector
+            Primer::Classify::UTILITIES[key][val][Primer::Classify::BREAKPOINTS.index(breakpoint)]
+          end
+        end
+
+        # Does the Utilitiy class support the given key
+        #
+        # returns Boolean
+        def supported_key?(key)
+          Primer::Classify::UTILITIES[key].present?
+        end
+
+        # Does the Utilitiy class support the given key and value
+        #
+        # returns Boolean
+        def supported_value?(key, val)
+          supported_key?(key) && Primer::Classify::UTILITIES[key][val].present?
+        end
+
+        # Does the given selector exist in the utilities file
+        #
+        # returns Boolean
+        def supported_selector?(selector)
+          # This method is too slow to run in production
+          return false if Rails.env.production?
+
+          find_selector(selector).present?
+        end
+
+        # Is the key and value responsive
+        #
+        # returns Boolean
+        def responsive?(key, val)
+          supported_value?(key, val) && Primer::Classify::UTILITIES[key][val].count > 1
+        end
+
+        # Get the options for the given key
+        #
+        # returns Array or nil if key not supported
+        def mappings(key)
+          return unless supported_key?(key)
+
+          Primer::Classify::UTILITIES[key].keys
+        end
+
+        # Extract hash from classes ie. "mr-1 mb-2 foo" => { mr: 1, mb: 2, classes: "foo" }
+        def classes_to_hash(classes)
+          # This method is too slow to run in production
+          return { classes: classes } if Rails.env.production?
+
+          obj = {}
+          classes = classes.split(" ")
+          # Loop through all classes supplied and reject ones we find a match for
+          # So when we're at the end of the loop we have classes left with any non-system classes.
+          classes.reject! do |classname|
+            key, value, index = find_selector(classname)
+            next false if key.nil?
+
+            # Create array if nil
+            obj[key] = Array.new(5, nil) if obj[key].nil?
+            # Place the arguments in the responsive array based on index mr: [nil, 2]
+            obj[key][index] = value
+            next true
+          end
+
+          # Transform responsive arrays into arrays without trailing nil, so `mr: [1, nil, nil, nil, nil]` becomes `mr: 1`
+          obj.transform_values! do |value|
+            value = value.reverse.drop_while(&:nil?).reverse
+            if value.count == 1
+              value.first
+            else
+              value
+            end
+          end
+
+          # Add back the non-system classes
+          obj[:classes] = classes.join(" ") if classes.any?
+          obj
+        end
+
+        private
+
+        def find_selector(selector)
+          # Search each key/value_hash pair, eg. key `:mr` and value_hash `{ 0 => [ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ] }`
+          Primer::Classify::UTILITIES.each do |key, value_hash|
+            # Each value hash will also contain an array of classnames for breakpoints
+            # Key argument `0`, classes `[ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ]`
+            value_hash.each do |key_argument, classnames|
+              # Skip each value hash until we get one with the selector
+              next unless classnames.include?(selector)
+
+              # Return [:mr, 0, 1]
+              # has index of classname, so we can match it up with responsvie array `mr: [nil, 0]`
+              return [key, key_argument, classnames.index(selector)]
+            end
+          end
+
+          nil
+        end
+
+        def validate(key, val, breakpoint)
+          unless supported_key?(key)
+            raise ArgumentError, "#{key} is not a valid Primer utility key" unless Rails.env.production?
+
+            return ""
+          end
+
+          unless breakpoint.empty? || responsive?(key, val)
+            raise ArgumentError, "#{key} does not support responsive values" unless Rails.env.production?
+
+            return ""
+          end
+
+          unless supported_value?(key, val)
+            raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" unless Rails.env.production?
+
+            return ""
+          end
+
+          nil
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/classify/utilities.yml

@@ -0,0 +1,1147 @@
+---
+:float:
+  :left:
+  - float-left
+  - float-sm-left
+  - float-md-left
+  - float-lg-left
+  - float-xl-left
+  :right:
+  - float-right
+  - float-sm-right
+  - float-md-right
+  - float-lg-right
+  - float-xl-right
+  :none:
+  - float-none
+  - float-sm-none
+  - float-md-none
+  - float-lg-none
+  - float-xl-none
+:m:
+  0:
+  - m-0
+  - m-sm-0
+  - m-md-0
+  - m-lg-0
+  - m-xl-0
+  1:
+  - m-1
+  - m-sm-1
+  - m-md-1
+  - m-lg-1
+  - m-xl-1
+  2:
+  - m-2
+  - m-sm-2
+  - m-md-2
+  - m-lg-2
+  - m-xl-2
+  3:
+  - m-3
+  - m-sm-3
+  - m-md-3
+  - m-lg-3
+  - m-xl-3
+  4:
+  - m-4
+  - m-sm-4
+  - m-md-4
+  - m-lg-4
+  - m-xl-4
+  5:
+  - m-5
+  - m-sm-5
+  - m-md-5
+  - m-lg-5
+  - m-xl-5
+  6:
+  - m-6
+  - m-sm-6
+  - m-md-6
+  - m-lg-6
+  - m-xl-6
+  :auto:
+  - m-auto
+:mt:
+  0:
+  - mt-0
+  - mt-sm-0
+  - mt-md-0
+  - mt-lg-0
+  - mt-xl-0
+  1:
+  - mt-1
+  - mt-sm-1
+  - mt-md-1
+  - mt-lg-1
+  - mt-xl-1
+  -1:
+  - mt-n1
+  - mt-sm-n1
+  - mt-md-n1
+  - mt-lg-n1
+  - mt-xl-n1
+  2:
+  - mt-2
+  - mt-sm-2
+  - mt-md-2
+  - mt-lg-2
+  - mt-xl-2
+  -2:
+  - mt-n2
+  - mt-sm-n2
+  - mt-md-n2
+  - mt-lg-n2
+  - mt-xl-n2
+  3:
+  - mt-3
+  - mt-sm-3
+  - mt-md-3
+  - mt-lg-3
+  - mt-xl-3
+  -3:
+  - mt-n3
+  - mt-sm-n3
+  - mt-md-n3
+  - mt-lg-n3
+  - mt-xl-n3
+  4:
+  - mt-4
+  - mt-sm-4
+  - mt-md-4
+  - mt-lg-4
+  - mt-xl-4
+  -4:
+  - mt-n4
+  - mt-sm-n4
+  - mt-md-n4
+  - mt-lg-n4
+  - mt-xl-n4
+  5:
+  - mt-5
+  - mt-sm-5
+  - mt-md-5
+  - mt-lg-5
+  - mt-xl-5
+  -5:
+  - mt-n5
+  - mt-sm-n5
+  - mt-md-n5
+  - mt-lg-n5
+  - mt-xl-n5
+  6:
+  - mt-6
+  - mt-sm-6
+  - mt-md-6
+  - mt-lg-6
+  - mt-xl-6
+  -6:
+  - mt-n6
+  - mt-sm-n6
+  - mt-md-n6
+  - mt-lg-n6
+  - mt-xl-n6
+  7:
+  - mt-7
+  - mt-sm-7
+  - mt-md-7
+  - mt-lg-7
+  - mt-xl-7
+  -7:
+  - mt-n7
+  - mt-sm-n7
+  - mt-md-n7
+  - mt-lg-n7
+  - mt-xl-n7
+  8:
+  - mt-8
+  - mt-sm-8
+  - mt-md-8
+  - mt-lg-8
+  - mt-xl-8
+  -8:
+  - mt-n8
+  - mt-sm-n8
+  - mt-md-n8
+  - mt-lg-n8
+  - mt-xl-n8
+  9:
+  - mt-9
+  - mt-sm-9
+  - mt-md-9
+  - mt-lg-9
+  - mt-xl-9
+  -9:
+  - mt-n9
+  - mt-sm-n9
+  - mt-md-n9
+  - mt-lg-n9
+  - mt-xl-n9
+  10:
+  - mt-10
+  - mt-sm-10
+  - mt-md-10
+  - mt-lg-10
+  - mt-xl-10
+  -10:
+  - mt-n10
+  - mt-sm-n10
+  - mt-md-n10
+  - mt-lg-n10
+  - mt-xl-n10
+  11:
+  - mt-11
+  - mt-sm-11
+  - mt-md-11
+  - mt-lg-11
+  - mt-xl-11
+  -11:
+  - mt-n11
+  - mt-sm-n11
+  - mt-md-n11
+  - mt-lg-n11
+  - mt-xl-n11
+  12:
+  - mt-12
+  - mt-sm-12
+  - mt-md-12
+  - mt-lg-12
+  - mt-xl-12
+  -12:
+  - mt-n12
+  - mt-sm-n12
+  - mt-md-n12
+  - mt-lg-n12
+  - mt-xl-n12
+  :auto:
+  - mt-auto
+:mb:
+  0:
+  - mb-0
+  - mb-sm-0
+  - mb-md-0
+  - mb-lg-0
+  - mb-xl-0
+  1:
+  - mb-1
+  - mb-sm-1
+  - mb-md-1
+  - mb-lg-1
+  - mb-xl-1
+  -1:
+  - mb-n1
+  - mb-sm-n1
+  - mb-md-n1
+  - mb-lg-n1
+  - mb-xl-n1
+  2:
+  - mb-2
+  - mb-sm-2
+  - mb-md-2
+  - mb-lg-2
+  - mb-xl-2
+  -2:
+  - mb-n2
+  - mb-sm-n2
+  - mb-md-n2
+  - mb-lg-n2
+  - mb-xl-n2
+  3:
+  - mb-3
+  - mb-sm-3
+  - mb-md-3
+  - mb-lg-3
+  - mb-xl-3
+  -3:
+  - mb-n3
+  - mb-sm-n3
+  - mb-md-n3
+  - mb-lg-n3
+  - mb-xl-n3
+  4:
+  - mb-4
+  - mb-sm-4
+  - mb-md-4
+  - mb-lg-4
+  - mb-xl-4
+  -4:
+  - mb-n4
+  - mb-sm-n4
+  - mb-md-n4
+  - mb-lg-n4
+  - mb-xl-n4
+  5:
+  - mb-5
+  - mb-sm-5
+  - mb-md-5
+  - mb-lg-5
+  - mb-xl-5
+  -5:
+  - mb-n5
+  - mb-sm-n5
+  - mb-md-n5
+  - mb-lg-n5
+  - mb-xl-n5
+  6:
+  - mb-6
+  - mb-sm-6
+  - mb-md-6
+  - mb-lg-6
+  - mb-xl-6
+  -6:
+  - mb-n6
+  - mb-sm-n6
+  - mb-md-n6
+  - mb-lg-n6
+  - mb-xl-n6
+  7:
+  - mb-7
+  - mb-sm-7
+  - mb-md-7
+  - mb-lg-7
+  - mb-xl-7
+  -7:
+  - mb-n7
+  - mb-sm-n7
+  - mb-md-n7
+  - mb-lg-n7
+  - mb-xl-n7
+  8:
+  - mb-8
+  - mb-sm-8
+  - mb-md-8
+  - mb-lg-8
+  - mb-xl-8
+  -8:
+  - mb-n8
+  - mb-sm-n8
+  - mb-md-n8
+  - mb-lg-n8
+  - mb-xl-n8
+  9:
+  - mb-9
+  - mb-sm-9
+  - mb-md-9
+  - mb-lg-9
+  - mb-xl-9
+  -9:
+  - mb-n9
+  - mb-sm-n9
+  - mb-md-n9
+  - mb-lg-n9
+  - mb-xl-n9
+  10:
+  - mb-10
+  - mb-sm-10
+  - mb-md-10
+  - mb-lg-10
+  - mb-xl-10
+  -10:
+  - mb-n10
+  - mb-sm-n10
+  - mb-md-n10
+  - mb-lg-n10
+  - mb-xl-n10
+  11:
+  - mb-11
+  - mb-sm-11
+  - mb-md-11
+  - mb-lg-11
+  - mb-xl-11
+  -11:
+  - mb-n11
+  - mb-sm-n11
+  - mb-md-n11
+  - mb-lg-n11
+  - mb-xl-n11
+  12:
+  - mb-12
+  - mb-sm-12
+  - mb-md-12
+  - mb-lg-12
+  - mb-xl-12
+  -12:
+  - mb-n12
+  - mb-sm-n12
+  - mb-md-n12
+  - mb-lg-n12
+  - mb-xl-n12
+:mr:
+  0:
+  - mr-0
+  - mr-sm-0
+  - mr-md-0
+  - mr-lg-0
+  - mr-xl-0
+  1:
+  - mr-1
+  - mr-sm-1
+  - mr-md-1
+  - mr-lg-1
+  - mr-xl-1
+  -1:
+  - mr-n1
+  - mr-sm-n1
+  - mr-md-n1
+  - mr-lg-n1
+  - mr-xl-n1
+  2:
+  - mr-2
+  - mr-sm-2
+  - mr-md-2
+  - mr-lg-2
+  - mr-xl-2
+  -2:
+  - mr-n2
+  - mr-sm-n2
+  - mr-md-n2
+  - mr-lg-n2
+  - mr-xl-n2
+  3:
+  - mr-3
+  - mr-sm-3
+  - mr-md-3
+  - mr-lg-3
+  - mr-xl-3
+  -3:
+  - mr-n3
+  - mr-sm-n3
+  - mr-md-n3
+  - mr-lg-n3
+  - mr-xl-n3
+  4:
+  - mr-4
+  - mr-sm-4
+  - mr-md-4
+  - mr-lg-4
+  - mr-xl-4
+  -4:
+  - mr-n4
+  - mr-sm-n4
+  - mr-md-n4
+  - mr-lg-n4
+  - mr-xl-n4
+  5:
+  - mr-5
+  - mr-sm-5
+  - mr-md-5
+  - mr-lg-5
+  - mr-xl-5
+  -5:
+  - mr-n5
+  - mr-sm-n5
+  - mr-md-n5
+  - mr-lg-n5
+  - mr-xl-n5
+  6:
+  - mr-6
+  - mr-sm-6
+  - mr-md-6
+  - mr-lg-6
+  - mr-xl-6
+  -6:
+  - mr-n6
+  - mr-sm-n6
+  - mr-md-n6
+  - mr-lg-n6
+  - mr-xl-n6
+:ml:
+  0:
+  - ml-0
+  - ml-sm-0
+  - ml-md-0
+  - ml-lg-0
+  - ml-xl-0
+  1:
+  - ml-1
+  - ml-sm-1
+  - ml-md-1
+  - ml-lg-1
+  - ml-xl-1
+  -1:
+  - ml-n1
+  - ml-sm-n1
+  - ml-md-n1
+  - ml-lg-n1
+  - ml-xl-n1
+  2:
+  - ml-2
+  - ml-sm-2
+  - ml-md-2
+  - ml-lg-2
+  - ml-xl-2
+  -2:
+  - ml-n2
+  - ml-sm-n2
+  - ml-md-n2
+  - ml-lg-n2
+  - ml-xl-n2
+  3:
+  - ml-3
+  - ml-sm-3
+  - ml-md-3
+  - ml-lg-3
+  - ml-xl-3
+  -3:
+  - ml-n3
+  - ml-sm-n3
+  - ml-md-n3
+  - ml-lg-n3
+  - ml-xl-n3
+  4:
+  - ml-4
+  - ml-sm-4
+  - ml-md-4
+  - ml-lg-4
+  - ml-xl-4
+  -4:
+  - ml-n4
+  - ml-sm-n4
+  - ml-md-n4
+  - ml-lg-n4
+  - ml-xl-n4
+  5:
+  - ml-5
+  - ml-sm-5
+  - ml-md-5
+  - ml-lg-5
+  - ml-xl-5
+  -5:
+  - ml-n5
+  - ml-sm-n5
+  - ml-md-n5
+  - ml-lg-n5
+  - ml-xl-n5
+  6:
+  - ml-6
+  - ml-sm-6
+  - ml-md-6
+  - ml-lg-6
+  - ml-xl-6
+  -6:
+  - ml-n6
+  - ml-sm-n6
+  - ml-md-n6
+  - ml-lg-n6
+  - ml-xl-n6
+:mx:
+  0:
+  - mx-0
+  - mx-sm-0
+  - mx-md-0
+  - mx-lg-0
+  - mx-xl-0
+  1:
+  - mx-1
+  - mx-sm-1
+  - mx-md-1
+  - mx-lg-1
+  - mx-xl-1
+  2:
+  - mx-2
+  - mx-sm-2
+  - mx-md-2
+  - mx-lg-2
+  - mx-xl-2
+  3:
+  - mx-3
+  - mx-sm-3
+  - mx-md-3
+  - mx-lg-3
+  - mx-xl-3
+  4:
+  - mx-4
+  - mx-sm-4
+  - mx-md-4
+  - mx-lg-4
+  - mx-xl-4
+  5:
+  - mx-5
+  - mx-sm-5
+  - mx-md-5
+  - mx-lg-5
+  - mx-xl-5
+  6:
+  - mx-6
+  - mx-sm-6
+  - mx-md-6
+  - mx-lg-6
+  - mx-xl-6
+  :auto:
+  - mx-auto
+  - mx-sm-auto
+  - mx-md-auto
+  - mx-lg-auto
+  - mx-xl-auto
+:my:
+  0:
+  - my-0
+  - my-sm-0
+  - my-md-0
+  - my-lg-0
+  - my-xl-0
+  1:
+  - my-1
+  - my-sm-1
+  - my-md-1
+  - my-lg-1
+  - my-xl-1
+  2:
+  - my-2
+  - my-sm-2
+  - my-md-2
+  - my-lg-2
+  - my-xl-2
+  3:
+  - my-3
+  - my-sm-3
+  - my-md-3
+  - my-lg-3
+  - my-xl-3
+  4:
+  - my-4
+  - my-sm-4
+  - my-md-4
+  - my-lg-4
+  - my-xl-4
+  5:
+  - my-5
+  - my-sm-5
+  - my-md-5
+  - my-lg-5
+  - my-xl-5
+  6:
+  - my-6
+  - my-sm-6
+  - my-md-6
+  - my-lg-6
+  - my-xl-6
+  7:
+  - my-7
+  - my-sm-7
+  - my-md-7
+  - my-lg-7
+  - my-xl-7
+  8:
+  - my-8
+  - my-sm-8
+  - my-md-8
+  - my-lg-8
+  - my-xl-8
+  9:
+  - my-9
+  - my-sm-9
+  - my-md-9
+  - my-lg-9
+  - my-xl-9
+  10:
+  - my-10
+  - my-sm-10
+  - my-md-10
+  - my-lg-10
+  - my-xl-10
+  11:
+  - my-11
+  - my-sm-11
+  - my-md-11
+  - my-lg-11
+  - my-xl-11
+  12:
+  - my-12
+  - my-sm-12
+  - my-md-12
+  - my-lg-12
+  - my-xl-12
+:p:
+  0:
+  - p-0
+  - p-sm-0
+  - p-md-0
+  - p-lg-0
+  - p-xl-0
+  1:
+  - p-1
+  - p-sm-1
+  - p-md-1
+  - p-lg-1
+  - p-xl-1
+  2:
+  - p-2
+  - p-sm-2
+  - p-md-2
+  - p-lg-2
+  - p-xl-2
+  3:
+  - p-3
+  - p-sm-3
+  - p-md-3
+  - p-lg-3
+  - p-xl-3
+  4:
+  - p-4
+  - p-sm-4
+  - p-md-4
+  - p-lg-4
+  - p-xl-4
+  5:
+  - p-5
+  - p-sm-5
+  - p-md-5
+  - p-lg-5
+  - p-xl-5
+  6:
+  - p-6
+  - p-sm-6
+  - p-md-6
+  - p-lg-6
+  - p-xl-6
+  :responsive:
+  - p-responsive
+:pt:
+  0:
+  - pt-0
+  - pt-sm-0
+  - pt-md-0
+  - pt-lg-0
+  - pt-xl-0
+  1:
+  - pt-1
+  - pt-sm-1
+  - pt-md-1
+  - pt-lg-1
+  - pt-xl-1
+  2:
+  - pt-2
+  - pt-sm-2
+  - pt-md-2
+  - pt-lg-2
+  - pt-xl-2
+  3:
+  - pt-3
+  - pt-sm-3
+  - pt-md-3
+  - pt-lg-3
+  - pt-xl-3
+  4:
+  - pt-4
+  - pt-sm-4
+  - pt-md-4
+  - pt-lg-4
+  - pt-xl-4
+  5:
+  - pt-5
+  - pt-sm-5
+  - pt-md-5
+  - pt-lg-5
+  - pt-xl-5
+  6:
+  - pt-6
+  - pt-sm-6
+  - pt-md-6
+  - pt-lg-6
+  - pt-xl-6
+  7:
+  - pt-7
+  - pt-sm-7
+  - pt-md-7
+  - pt-lg-7
+  - pt-xl-7
+  8:
+  - pt-8
+  - pt-sm-8
+  - pt-md-8
+  - pt-lg-8
+  - pt-xl-8
+  9:
+  - pt-9
+  - pt-sm-9
+  - pt-md-9
+  - pt-lg-9
+  - pt-xl-9
+  10:
+  - pt-10
+  - pt-sm-10
+  - pt-md-10
+  - pt-lg-10
+  - pt-xl-10
+  11:
+  - pt-11
+  - pt-sm-11
+  - pt-md-11
+  - pt-lg-11
+  - pt-xl-11
+  12:
+  - pt-12
+  - pt-sm-12
+  - pt-md-12
+  - pt-lg-12
+  - pt-xl-12
+:pr:
+  0:
+  - pr-0
+  - pr-sm-0
+  - pr-md-0
+  - pr-lg-0
+  - pr-xl-0
+  1:
+  - pr-1
+  - pr-sm-1
+  - pr-md-1
+  - pr-lg-1
+  - pr-xl-1
+  2:
+  - pr-2
+  - pr-sm-2
+  - pr-md-2
+  - pr-lg-2
+  - pr-xl-2
+  3:
+  - pr-3
+  - pr-sm-3
+  - pr-md-3
+  - pr-lg-3
+  - pr-xl-3
+  4:
+  - pr-4
+  - pr-sm-4
+  - pr-md-4
+  - pr-lg-4
+  - pr-xl-4
+  5:
+  - pr-5
+  - pr-sm-5
+  - pr-md-5
+  - pr-lg-5
+  - pr-xl-5
+  6:
+  - pr-6
+  - pr-sm-6
+  - pr-md-6
+  - pr-lg-6
+  - pr-xl-6
+  7:
+  - pr-7
+  - pr-sm-7
+  - pr-md-7
+  - pr-lg-7
+  - pr-xl-7
+  8:
+  - pr-8
+  - pr-sm-8
+  - pr-md-8
+  - pr-lg-8
+  - pr-xl-8
+  9:
+  - pr-9
+  - pr-sm-9
+  - pr-md-9
+  - pr-lg-9
+  - pr-xl-9
+  10:
+  - pr-10
+  - pr-sm-10
+  - pr-md-10
+  - pr-lg-10
+  - pr-xl-10
+  11:
+  - pr-11
+  - pr-sm-11
+  - pr-md-11
+  - pr-lg-11
+  - pr-xl-11
+  12:
+  - pr-12
+  - pr-sm-12
+  - pr-md-12
+  - pr-lg-12
+  - pr-xl-12
+:pb:
+  0:
+  - pb-0
+  - pb-sm-0
+  - pb-md-0
+  - pb-lg-0
+  - pb-xl-0
+  1:
+  - pb-1
+  - pb-sm-1
+  - pb-md-1
+  - pb-lg-1
+  - pb-xl-1
+  2:
+  - pb-2
+  - pb-sm-2
+  - pb-md-2
+  - pb-lg-2
+  - pb-xl-2
+  3:
+  - pb-3
+  - pb-sm-3
+  - pb-md-3
+  - pb-lg-3
+  - pb-xl-3
+  4:
+  - pb-4
+  - pb-sm-4
+  - pb-md-4
+  - pb-lg-4
+  - pb-xl-4
+  5:
+  - pb-5
+  - pb-sm-5
+  - pb-md-5
+  - pb-lg-5
+  - pb-xl-5
+  6:
+  - pb-6
+  - pb-sm-6
+  - pb-md-6
+  - pb-lg-6
+  - pb-xl-6
+  7:
+  - pb-7
+  - pb-sm-7
+  - pb-md-7
+  - pb-lg-7
+  - pb-xl-7
+  8:
+  - pb-8
+  - pb-sm-8
+  - pb-md-8
+  - pb-lg-8
+  - pb-xl-8
+  9:
+  - pb-9
+  - pb-sm-9
+  - pb-md-9
+  - pb-lg-9
+  - pb-xl-9
+  10:
+  - pb-10
+  - pb-sm-10
+  - pb-md-10
+  - pb-lg-10
+  - pb-xl-10
+  11:
+  - pb-11
+  - pb-sm-11
+  - pb-md-11
+  - pb-lg-11
+  - pb-xl-11
+  12:
+  - pb-12
+  - pb-sm-12
+  - pb-md-12
+  - pb-lg-12
+  - pb-xl-12
+:pl:
+  0:
+  - pl-0
+  - pl-sm-0
+  - pl-md-0
+  - pl-lg-0
+  - pl-xl-0
+  1:
+  - pl-1
+  - pl-sm-1
+  - pl-md-1
+  - pl-lg-1
+  - pl-xl-1
+  2:
+  - pl-2
+  - pl-sm-2
+  - pl-md-2
+  - pl-lg-2
+  - pl-xl-2
+  3:
+  - pl-3
+  - pl-sm-3
+  - pl-md-3
+  - pl-lg-3
+  - pl-xl-3
+  4:
+  - pl-4
+  - pl-sm-4
+  - pl-md-4
+  - pl-lg-4
+  - pl-xl-4
+  5:
+  - pl-5
+  - pl-sm-5
+  - pl-md-5
+  - pl-lg-5
+  - pl-xl-5
+  6:
+  - pl-6
+  - pl-sm-6
+  - pl-md-6
+  - pl-lg-6
+  - pl-xl-6
+  7:
+  - pl-7
+  - pl-sm-7
+  - pl-md-7
+  - pl-lg-7
+  - pl-xl-7
+  8:
+  - pl-8
+  - pl-sm-8
+  - pl-md-8
+  - pl-lg-8
+  - pl-xl-8
+  9:
+  - pl-9
+  - pl-sm-9
+  - pl-md-9
+  - pl-lg-9
+  - pl-xl-9
+  10:
+  - pl-10
+  - pl-sm-10
+  - pl-md-10
+  - pl-lg-10
+  - pl-xl-10
+  11:
+  - pl-11
+  - pl-sm-11
+  - pl-md-11
+  - pl-lg-11
+  - pl-xl-11
+  12:
+  - pl-12
+  - pl-sm-12
+  - pl-md-12
+  - pl-lg-12
+  - pl-xl-12
+:px:
+  0:
+  - px-0
+  - px-sm-0
+  - px-md-0
+  - px-lg-0
+  - px-xl-0
+  1:
+  - px-1
+  - px-sm-1
+  - px-md-1
+  - px-lg-1
+  - px-xl-1
+  2:
+  - px-2
+  - px-sm-2
+  - px-md-2
+  - px-lg-2
+  - px-xl-2
+  3:
+  - px-3
+  - px-sm-3
+  - px-md-3
+  - px-lg-3
+  - px-xl-3
+  4:
+  - px-4
+  - px-sm-4
+  - px-md-4
+  - px-lg-4
+  - px-xl-4
+  5:
+  - px-5
+  - px-sm-5
+  - px-md-5
+  - px-lg-5
+  - px-xl-5
+  6:
+  - px-6
+  - px-sm-6
+  - px-md-6
+  - px-lg-6
+  - px-xl-6
+:py:
+  0:
+  - py-0
+  - py-sm-0
+  - py-md-0
+  - py-lg-0
+  - py-xl-0
+  1:
+  - py-1
+  - py-sm-1
+  - py-md-1
+  - py-lg-1
+  - py-xl-1
+  2:
+  - py-2
+  - py-sm-2
+  - py-md-2
+  - py-lg-2
+  - py-xl-2
+  3:
+  - py-3
+  - py-sm-3
+  - py-md-3
+  - py-lg-3
+  - py-xl-3
+  4:
+  - py-4
+  - py-sm-4
+  - py-md-4
+  - py-lg-4
+  - py-xl-4
+  5:
+  - py-5
+  - py-sm-5
+  - py-md-5
+  - py-lg-5
+  - py-xl-5
+  6:
+  - py-6
+  - py-sm-6
+  - py-md-6
+  - py-lg-6
+  - py-xl-6
+  7:
+  - py-7
+  - py-sm-7
+  - py-md-7
+  - py-lg-7
+  - py-xl-7
+  8:
+  - py-8
+  - py-sm-8
+  - py-md-8
+  - py-lg-8
+  - py-xl-8
+  9:
+  - py-9
+  - py-sm-9
+  - py-md-9
+  - py-lg-9
+  - py-xl-9
+  10:
+  - py-10
+  - py-sm-10
+  - py-md-10
+  - py-lg-10
+  - py-xl-10
+  11:
+  - py-11
+  - py-sm-11
+  - py-md-11
+  - py-lg-11
+  - py-xl-11
+  12:
+  - py-12
+  - py-sm-12
+  - py-md-12
+  - py-lg-12
+  - py-xl-12
+:hide:
+  :sm:
+  - hide-sm
+  :md:
+  - hide-md
+  :lg:
+  - hide-lg
+  :xl:
+  - hide-xl